Delete self contained Thunder Tests
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
This commit is contained in:
38
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item-label.css
vendored
Normal file
38
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item-label.css
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
.breadcrumb-item-label-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: #1D1D1D;
|
||||
}
|
||||
.breadcrumb-item-label-container.margin {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.breadcrumb-item-label-container ifx-icon:empty {
|
||||
display: none;
|
||||
}
|
||||
.breadcrumb-item-label-container .label-icon-wrapper {
|
||||
display: inline-flex;
|
||||
}
|
||||
.breadcrumb-item-label-container .menu-icon-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.breadcrumb-item-label-container .menu-icon-wrapper.hide {
|
||||
display: none;
|
||||
}
|
||||
.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon {
|
||||
transition: 0.3s;
|
||||
}
|
||||
.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon {
|
||||
transition: 0.3s;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
109
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item-label.js
vendored
Normal file
109
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item-label.js
vendored
Normal file
@ -0,0 +1,109 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class BreadcrumbItemLabel {
|
||||
constructor() {
|
||||
this.icon = undefined;
|
||||
this.url = undefined;
|
||||
this.target = "_self";
|
||||
}
|
||||
componentDidLoad() {
|
||||
const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container');
|
||||
const menuWrapper = container.querySelector('.menu-icon-wrapper');
|
||||
this.breadcrumbMenuIconWrapper.emit(menuWrapper);
|
||||
}
|
||||
render() {
|
||||
return (h("a", { href: this.url, target: this.target, class: "breadcrumb-item-label-container" }, h("ifx-icon", { icon: this.icon }), h("span", { class: "label-wrapper" }, h("slot", null)), h("span", { class: "menu-icon-wrapper" }, h("ifx-icon", { icon: "chevron-down-12" }))));
|
||||
}
|
||||
static get is() { return "ifx-breadcrumb-item-label"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["breadcrumb-item-label.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["breadcrumb-item-label.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"icon": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "icon",
|
||||
"reflect": false
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "url",
|
||||
"reflect": false
|
||||
},
|
||||
"target": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "target",
|
||||
"reflect": false,
|
||||
"defaultValue": "\"_self\""
|
||||
}
|
||||
};
|
||||
}
|
||||
static get events() {
|
||||
return [{
|
||||
"method": "breadcrumbMenuIconWrapper",
|
||||
"name": "breadcrumbMenuIconWrapper",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "CustomEvent",
|
||||
"resolved": "CustomEvent<any>",
|
||||
"references": {
|
||||
"CustomEvent": {
|
||||
"location": "global",
|
||||
"id": "global::CustomEvent"
|
||||
}
|
||||
}
|
||||
}
|
||||
}];
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
}
|
||||
//# sourceMappingURL=breadcrumb-item-label.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"breadcrumb-item-label.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,mBAAmB;;;;kBAGL,OAAO;;EAIhC,gBAAgB;IACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;IACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;IACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;EAClD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC;MAC7E,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;MACtC,YAAM,KAAK,EAAC,eAAe;QACzB,eAAQ,CACH;MACR,YAAM,KAAK,EAAC,mBAAmB;QAC9B,gBAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() url: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\">\n <ifx-icon icon={this.icon}></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\">\n <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"]}
|
||||
55
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item.css
vendored
Normal file
55
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item.css
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
.breadcrumb-parent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
gap: 12px;
|
||||
}
|
||||
.breadcrumb-parent:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.breadcrumb-parent .breadcrumb-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open {
|
||||
display: block;
|
||||
}
|
||||
.breadcrumb-parent .breadcrumb-wrapper a {
|
||||
text-decoration: none;
|
||||
color: #1D1D1D;
|
||||
font-family: var(--ifx-font-family);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #1D1D1D;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0px;
|
||||
border-bottom: 1px solid #1D1D1D;
|
||||
}
|
||||
.breadcrumb-parent .breadcrumb-divider {
|
||||
width: 10px;
|
||||
height: 16px;
|
||||
color: #EEEDED;
|
||||
line-height: 13px;
|
||||
font-size: 1.25rem;
|
||||
margin-right: 12px;
|
||||
}
|
||||
98
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item.js
vendored
Normal file
98
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item.js
vendored
Normal file
@ -0,0 +1,98 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class BreadcrumbItem {
|
||||
constructor() {
|
||||
this.isLastItem = false;
|
||||
}
|
||||
handleOutsideClick(event) {
|
||||
const path = event.composedPath();
|
||||
if (!path.includes(this.el)) {
|
||||
this.closeDropdownMenu();
|
||||
}
|
||||
}
|
||||
getDropdownMenu() {
|
||||
const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');
|
||||
return dropdownMenu;
|
||||
}
|
||||
menuWrapperEventReEmitter(event) {
|
||||
this.emittedElement = event.detail;
|
||||
}
|
||||
getMenuIconWrapper() {
|
||||
return this.emittedElement;
|
||||
}
|
||||
handleClassList(el, type, className) {
|
||||
el.classList[type](className);
|
||||
}
|
||||
closeDropdownMenu() {
|
||||
const dropdownMenu = this.getDropdownMenu();
|
||||
const menuWrapper = this.getMenuIconWrapper();
|
||||
this.handleClassList(dropdownMenu, 'remove', 'open');
|
||||
this.handleClassList(menuWrapper, 'remove', 'show');
|
||||
}
|
||||
toggleDropdownMenu() {
|
||||
const dropdownMenu = this.getDropdownMenu();
|
||||
const menuWrapper = this.getMenuIconWrapper();
|
||||
this.handleClassList(dropdownMenu, 'toggle', 'open');
|
||||
this.handleClassList(menuWrapper, 'toggle', 'show');
|
||||
}
|
||||
handleLastItem() {
|
||||
const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item');
|
||||
if (this.el === breadcrumbItems[breadcrumbItems.length - 1]) {
|
||||
this.isLastItem = true;
|
||||
}
|
||||
else
|
||||
this.isLastItem = false;
|
||||
}
|
||||
componentWillLoad() {
|
||||
this.handleLastItem();
|
||||
}
|
||||
componentDidUpdate() {
|
||||
this.handleLastItem();
|
||||
}
|
||||
componentDidLoad() {
|
||||
const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');
|
||||
if (!dropdownMenu) {
|
||||
const iconMenuWrapper = this.getMenuIconWrapper();
|
||||
this.handleClassList(iconMenuWrapper, 'toggle', 'hide');
|
||||
}
|
||||
else {
|
||||
dropdownMenu.isOpen = true;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (h("li", { class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}`, onClick: () => this.toggleDropdownMenu() }, h("li", { class: "breadcrumb-wrapper" }, h("slot", { name: 'label' }), h("div", { class: "dropdown-menu" }, h("slot", null))), !this.isLastItem && h("span", { class: "breadcrumb-divider" }, "/")));
|
||||
}
|
||||
static get is() { return "ifx-breadcrumb-item"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["breadcrumb-item.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["breadcrumb-item.css"]
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"isLastItem": {}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get listeners() {
|
||||
return [{
|
||||
"name": "mousedown",
|
||||
"method": "handleOutsideClick",
|
||||
"target": "document",
|
||||
"capture": false,
|
||||
"passive": true
|
||||
}, {
|
||||
"name": "breadcrumbMenuIconWrapper",
|
||||
"method": "menuWrapperEventReEmitter",
|
||||
"target": undefined,
|
||||
"capture": false,
|
||||
"passive": false
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=breadcrumb-item.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement | undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n\n toggleDropdownMenu() { \n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n componentWillLoad() { \n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentDidLoad() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu')\n \n if(!dropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide')\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`} onClick={() => this.toggleDropdownMenu()}>\n <li class=\"breadcrumb-wrapper\">\n <slot name='label' />\n <div class=\"dropdown-menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\">/</span>}\n </li>\n );\n }\n}\n"]}
|
||||
19
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.css
vendored
Normal file
19
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.css
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-family: var(--ifx-font-family);
|
||||
font-size: 0.875rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
56
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.e2e.js
vendored
Normal file
56
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.e2e.js
vendored
Normal file
@ -0,0 +1,56 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('ifx-breadcrumb', () => {
|
||||
it('should render', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-breadcrumb></ifx-breadcrumb>');
|
||||
const element = await page.find('ifx-breadcrumb');
|
||||
expect(element).toHaveClass('hydrated');
|
||||
});
|
||||
it('should display breadcrumb items', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(`
|
||||
<ifx-breadcrumb>
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label icon="home" url="/">Home</ifx-breadcrumb-item-label>
|
||||
</ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label icon="chevron-right" url="/about">About</ifx-breadcrumb-item-label>
|
||||
</ifx-breadcrumb-item>
|
||||
</ifx-breadcrumb>
|
||||
`);
|
||||
const breadcrumb = await page.find('ifx-breadcrumb');
|
||||
const breadcrumbItems = await breadcrumb.findAll('ifx-breadcrumb-item');
|
||||
expect(breadcrumbItems.length).toBe(2);
|
||||
});
|
||||
it('should handle last item correctly', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(`
|
||||
<ifx-breadcrumb>
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label icon="home" url="/">Home</ifx-breadcrumb-item-label>
|
||||
</ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label icon="chevron-right" url="/about">About</ifx-breadcrumb-item-label>
|
||||
</ifx-breadcrumb-item>
|
||||
</ifx-breadcrumb>
|
||||
`);
|
||||
const breadcrumbItems = await page.findAll('ifx-breadcrumb-item');
|
||||
expect(breadcrumbItems[0]).not.toHaveAttribute('aria-current');
|
||||
});
|
||||
it('should toggle dropdown menu', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(`
|
||||
<ifx-breadcrumb>
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label icon="home" url="/">Home</ifx-breadcrumb-item-label>
|
||||
</ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label icon="chevron-right" url="/about">About</ifx-breadcrumb-item-label>
|
||||
</ifx-breadcrumb-item>
|
||||
</ifx-breadcrumb>
|
||||
`);
|
||||
await page.waitForChanges();
|
||||
});
|
||||
// Add more test cases as needed
|
||||
});
|
||||
//# sourceMappingURL=breadcrumb.e2e.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.e2e.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"breadcrumb.e2e.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;IAE3D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;KASrB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,MAAM,UAAU,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAExE,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACzC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;KASrB,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAElE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;EAEjE,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;KASrB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;EAE9B,CAAC,CAAC,CAAC;EAEH,gCAAgC;AAClC,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-breadcrumb', () => {\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-breadcrumb></ifx-breadcrumb>');\n\n const element = await page.find('ifx-breadcrumb');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display breadcrumb items', async () => {\n const page = await newE2EPage();\n await page.setContent(`\n <ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label icon=\"home\" url=\"/\">Home</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label icon=\"chevron-right\" url=\"/about\">About</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n </ifx-breadcrumb>\n `);\n\n const breadcrumb = await page.find('ifx-breadcrumb');\n const breadcrumbItems = await breadcrumb.findAll('ifx-breadcrumb-item');\n\n expect(breadcrumbItems.length).toBe(2);\n });\n\n it('should handle last item correctly', async () => {\n const page = await newE2EPage();\n await page.setContent(`\n <ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label icon=\"home\" url=\"/\">Home</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label icon=\"chevron-right\" url=\"/about\">About</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n </ifx-breadcrumb>\n `);\n\n const breadcrumbItems = await page.findAll('ifx-breadcrumb-item');\n\n expect(breadcrumbItems[0]).not.toHaveAttribute('aria-current');\n\n });\n\n it('should toggle dropdown menu', async () => {\n const page = await newE2EPage();\n await page.setContent(`\n <ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label icon=\"home\" url=\"/\">Home</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label icon=\"chevron-right\" url=\"/about\">About</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n </ifx-breadcrumb>\n `);\n\n await page.waitForChanges();\n\n });\n\n // Add more test cases as needed\n});\n"]}
|
||||
49
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.js
vendored
Normal file
49
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.js
vendored
Normal file
@ -0,0 +1,49 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class Breadcrumb {
|
||||
componentDidLoad() {
|
||||
const element = this.el.shadowRoot.firstChild;
|
||||
this.addEventListenersToHandleCustomFocusState(element);
|
||||
}
|
||||
addEventListenersToHandleCustomFocusState(element) {
|
||||
if (!element) {
|
||||
console.error('element not found');
|
||||
return;
|
||||
}
|
||||
element.tabIndex = -1;
|
||||
const slot = element.querySelector('slot');
|
||||
if (slot) {
|
||||
const assignedNodes = slot.assignedNodes();
|
||||
for (let i = 0; i < assignedNodes.length; i++) {
|
||||
const node = assignedNodes[i];
|
||||
if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {
|
||||
const breadcrumbLabel = node;
|
||||
if (!breadcrumbLabel.hasAttribute('url')) {
|
||||
breadcrumbLabel.tabIndex = -1;
|
||||
breadcrumbLabel.addEventListener('focus', () => {
|
||||
if (breadcrumbLabel.hasAttribute('url')) {
|
||||
breadcrumbLabel.blur();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (h("nav", { "aria-label": "Page navigation breadcrumb" }, h("ol", { class: "breadcrumb" }, h("slot", null))));
|
||||
}
|
||||
static get is() { return "ifx-breadcrumb"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["breadcrumb.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["breadcrumb.css"]
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
}
|
||||
//# sourceMappingURL=breadcrumb.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,UAAU;EAGrB,gBAAgB;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;IAC9C,IAAI,CAAC,yCAAyC,CAAC,OAAO,CAAC,CAAC;EAE1D,CAAC;EAEO,yCAAyC,CAAC,OAAoB;IACpE,IAAI,CAAC,OAAO,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;MACnC,OAAO;KACR;IACD,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAEtB,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C,IAAG,IAAI,EAAE;MACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;UAC3C,MAAM,eAAe,GAAG,IAAoC,CAAC;UAC7D,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YACxC,eAAe,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC9B,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;cAC7C,IAAI,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;gBACvC,eAAe,CAAC,IAAI,EAAE,CAAC;eACxB;YACH,CAAC,CAAC,CAAC;WACJ;SACF;OACF;KACF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,yBAAgB,4BAA4B;MAC1C,UAAI,KAAK,EAAC,YAAY;QACpB,eAAQ,CACL,CACD,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n componentDidLoad() {\n const element = this.el.shadowRoot.firstChild;\n this.addEventListenersToHandleCustomFocusState(element);\n\n }\n\n private addEventListenersToHandleCustomFocusState(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n element.tabIndex = -1;\n\n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbLabel = node as HTMLIfxBreadcrumbItemElement;\n if (!breadcrumbLabel.hasAttribute('url')) {\n breadcrumbLabel.tabIndex = -1;\n breadcrumbLabel.addEventListener('focus', () => {\n if (breadcrumbLabel.hasAttribute('url')) {\n breadcrumbLabel.blur();\n }\n });\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"]}
|
||||
59
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.stories.js
vendored
Normal file
59
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.stories.js
vendored
Normal file
@ -0,0 +1,59 @@
|
||||
import { action } from "@storybook/addon-actions";
|
||||
export default {
|
||||
title: 'Components/Breadcrumb',
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
icon: false
|
||||
},
|
||||
argTypes: {
|
||||
ifxDropdownMenuItem: {
|
||||
action: 'ifxDropdownMenuItem',
|
||||
description: 'Custom event emitted when an item is selected',
|
||||
table: {
|
||||
type: {
|
||||
summary: 'Framework integration',
|
||||
detail: 'React: onIfxDropdownMenuItem={handleChange}\nVue:@ifxDropdownMenuItem="handleChange"\nAngular:(ifxDropdownMenuItem)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenuItem", (event) => {//handle change});',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
const DefaultTemplate = (args) => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML =
|
||||
`<ifx-breadcrumb>
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ""}">Breadcrumb 1</ifx-breadcrumb-item-label>
|
||||
<ifx-dropdown-menu>
|
||||
<ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
|
||||
<ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
|
||||
<ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
|
||||
<ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
|
||||
</ifx-dropdown-menu>
|
||||
</ifx-breadcrumb-item>
|
||||
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ""}">Breadcrumb 2</ifx-breadcrumb-item-label>
|
||||
<ifx-dropdown-menu>
|
||||
<ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
|
||||
<ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
|
||||
<ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
|
||||
<ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
|
||||
</ifx-dropdown-menu>
|
||||
</ifx-breadcrumb-item>
|
||||
|
||||
<ifx-breadcrumb-item>
|
||||
<ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ""}" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
|
||||
</ifx-breadcrumb-item>
|
||||
</ifx-breadcrumb>`;
|
||||
const breadcrumb = wrapper.querySelector('ifx-breadcrumb');
|
||||
// Loop through each breadcrumb item and attach event listeners to its dropdown menu
|
||||
const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');
|
||||
breadcrumbItems.forEach((breadcrumbItem) => {
|
||||
const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');
|
||||
dropdownMenu === null || dropdownMenu === void 0 ? void 0 : dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
|
||||
});
|
||||
return wrapper;
|
||||
};
|
||||
export const Default = DefaultTemplate.bind({});
|
||||
//# sourceMappingURL=breadcrumb.stories.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,IAAI,EAAE,KAAK;GACZ;EACD,QAAQ,EAAE;IACR,mBAAmB,EAAE;MACnB,MAAM,EAAE,qBAAqB;MAC7B,WAAW,EAAE,+CAA+C;MAC5D,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,yNAAyN;SAClO;OACF;KACF;GACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE;EAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC9C,OAAO,CAAC,SAAS;IAEf;;oDAEgD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;oDAU5B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;oDAU5B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;kBAE9D,CAAC;EAEjB,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAC;EAC1E,oFAAoF;EACpF,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;EAC3E,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,EAAE;IACzC,MAAM,YAAY,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAC,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC;EACvF,CAAC,CAAC,CAAC;EAEH,OAAO,OAAO,CAAC;AAEjB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Breadcrumb',\n tags: ['autodocs'],\n\n args: {\n icon: false\n },\n argTypes: {\n ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted when an item is selected',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n }\n }\n};\n\nconst DefaultTemplate = (args) => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML =\n\n `<ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? 'c-info-16' : \"\"}\">Breadcrumb 1</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item url=\"http://google.com\">Google</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? 'c-info-16' : \"\"}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item url=\"http://google.com\">Google</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? 'c-info-16' : \"\"}\" url=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n breadcrumbItems.forEach((breadcrumbItem) => {\n const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n });\n\n return wrapper;\n\n}\n\nexport const Default = DefaultTemplate.bind({});\n\n"]}
|
||||
Reference in New Issue
Block a user