phares3757/oi-metrology
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete self contained Thunder Tests

Browse Source 
Back to .net8.0
api/v4/InfinityQS
ApiExplorerSettings
Wafer Counter
Color Sorting
This commit is contained in:
Mike Phares
2024-03-13 13:15:56 -07:00
parent 7e16ee7f98
commit 127634f5ab
952 changed files with 205130 additions and 914 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
Server/wwwroot/package/dist/collection/_fonts.scss vendored Normal file
View File

@ -0,0 +1,27 @@
/* Source Sans 3 Regular */
@font-face {
font-family: "Source Sans 3";
font-style: normal;
font-weight: 400;
src: url("./source-sans-3/SourceSans3-Regular.ttf.woff2") format("woff2"),
url("./source-sans-3/SourceSans3-Regular.ttf.woff") format("woff");
}
/* Source Sans 3 Semibold */
@font-face {
font-family: "Source Sans 3";
font-style: normal;
font-weight: 600;
src: url("./source-sans-3/SourceSans3-Semibold.ttf.woff2") format("woff2"),
url("./source-sans-3/SourceSans3-Semibold.ttf.woff") format("woff");
}
/* Source Sans 3 Italic */
@font-face {
font-family: "Source Sans 3";
font-style: italic;
font-weight: 400;
src: url("./source-sans-3/SourceSans3-It.ttf.woff2") format("woff2"),
url("./source-sans-3/SourceSans3-It.ttf.woff") format("woff");
}

71
Server/wwwroot/package/dist/collection/collection-manifest.json vendored Normal file
View File

@ -0,0 +1,71 @@
{
"entries": [
"components/accordion/accordion.js",
"components/accordion/accordionItem.js",
"components/alert/alert.js",
"components/badge/badge.js",
"components/breadcrumb/breadcrumb-item-label.js",
"components/breadcrumb/breadcrumb-item.js",
"components/breadcrumb/breadcrumb.js",
"components/button/button.js",
"components/card/card.js",
"components/card/card-headline/card-headline.js",
"components/card/card-image/card-image.js",
"components/card/card-links/card-links.js",
"components/card/card-overline/card-overline.js",
"components/card/card-text/card-text.js",
"components/checkbox/checkbox.js",
"components/chips/chip.js",
"components/dropdown/dropdown.js",
"components/dropdown/dropdown-header/dropdown-header.js",
"components/dropdown/dropdown-item/dropdown-item.js",
"components/dropdown/dropdown-menu/dropdown-menu.js",
"components/dropdown/dropdown-seperator/dropdown-separator.js",
"components/dropdown/dropdown-trigger/dropdown-trigger.js",
"components/dropdown/dropdown-trigger-button/dropdown-trigger-button.js",
"components/footer/footer-column.js",
"components/footer/footer.js",
"components/icon/infineonIconStencil.js",
"components/icon-button/icon-button.js",
"components/icons-preview/icons-preview.js",
"components/link/link.js",
"components/list-group/list-group-item.js",
"components/list-group/list-group-notification.js",
"components/list-group/list-group.js",
"components/modal/modal.js",
"components/navbar/navbar-item.js",
"components/navbar/navbar-menu-item.js",
"components/navbar/navbar-menu.js",
"components/navbar/navbar.js",
"components/number-indicator/number-indicator.js",
"components/pagination/pagination.js",
"components/progress-bar/progress-bar.js",
"components/radio-button/radio-button.js",
"components/search-bar/search-bar.js",
"components/search-field/search-field.js",
"components/select/multi-select/multiselect.js",
"components/select/single-select/select.js",
"components/sidebar/sidebar-item.js",
"components/sidebar/sidebar-title.js",
"components/sidebar/sidebar.js",
"components/slider/slider.js",
"components/spinner/spinner.js",
"components/status/status.js",
"components/switch/switch.js",
"components/table/table.js",
"components/table-basic-version/table.js",
"components/tabs/tab.js",
"components/tabs/tabs.js",
"components/tag/tag.js",
"components/text-field/text-field.js",
"components/tooltip/tooltip.js",
"stories/setup-and-installation/faq/faq.js"
],
"compiler": {
"name": "@stencil/core",
"version": "4.5.0",
"typescriptVersion": "5.2.2"
},
"collections": [],
"bundles": []
}

15
Server/wwwroot/package/dist/collection/components/accordion/accordion.css vendored Normal file
View File

@ -0,0 +1,15 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
display: block;
}
.accordion-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--ifx-font-family);
}

19
Server/wwwroot/package/dist/collection/components/accordion/accordion.e2e.js vendored Normal file
View File

@ -0,0 +1,19 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-accordion', () => {
let page;
let element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<ifx-accordion></ifx-accordion>');
element = await page.find('ifx-accordion');
});
it('renders', async () => {
expect(element).toHaveClass('hydrated');
});
it('autoCollapse prop works as expected', async () => {
element.setProperty('autoCollapse', true);
await page.waitForChanges();
expect(await element.getProperty('autoCollapse')).toBe(true);
});
});
//# sourceMappingURL=accordion.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/accordion/accordion.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"accordion.e2e.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,IAAI,IAAI,CAAC;EACT,IAAI,OAAO,CAAC;EAEZ,UAAU,CAAC,KAAK,IAAI,EAAE;IACpB,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAC1B,MAAM,IAAI,CAAC,UAAU,CAAC,iCAAiC,CAAC,CAAC;IACzD,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;EAC7C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,OAAO,CAAC,WAAW,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IAC1C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,OAAO,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/D,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-accordion', () => {\n let page;\n let element;\n\n beforeEach(async () => {\n page = await newE2EPage();\n await page.setContent('<ifx-accordion></ifx-accordion>');\n element = await page.find('ifx-accordion');\n });\n\n it('renders', async () => {\n expect(element).toHaveClass('hydrated');\n });\n\n it('autoCollapse prop works as expected', async () => {\n element.setProperty('autoCollapse', true);\n await page.waitForChanges();\n expect(await element.getProperty('autoCollapse')).toBe(true);\n });\n\n});\n"]}

66
Server/wwwroot/package/dist/collection/components/accordion/accordion.js vendored Normal file
View File

@ -0,0 +1,66 @@
//ifxAccordion.tsx
import { h } from "@stencil/core";
export class Accordion {
constructor() {
this.autoCollapse = false;
}
async onItemOpen(event) {
if (this.autoCollapse) {
const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
for (const item of items) {
const itemElement = item;
if (itemElement !== event.target && (await itemElement.open)) {
itemElement.open = false;
}
}
}
}
render() {
return (h("div", { class: "accordion-wrapper" }, h("slot", null)));
}
static get is() { return "ifx-accordion"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["accordion.scss"]
};
}
static get styleUrls() {
return {
"$": ["accordion.css"]
};
}
static get properties() {
return {
"autoCollapse": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "auto-collapse",
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "ifxItemOpen",
"method": "onItemOpen",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=accordion.js.map

1
Server/wwwroot/package/dist/collection/components/accordion/accordion.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOpE,MAAM,OAAO,SAAS;;wBAEY,KAAK;;EAGrC,KAAK,CAAC,UAAU,CAAC,KAAkB;IACjC,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;MACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;QACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;UAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;SAC1B;OACF;KACF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n @Listen('ifxItemOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n"]}

51
Server/wwwroot/package/dist/collection/components/accordion/accordion.stories.js vendored Normal file
View File

@ -0,0 +1,51 @@
import { action } from "@storybook/addon-actions";
export default {
title: 'Components/Accordion',
component: 'ifx-accordion',
//tags: ['autodocs'],
args: {
autoCollapse: false,
initialCollapse: true
},
argTypes: {
amountOfItems: { control: 'number' },
initialCollapse: {
description: 'If set on more than one accordion-item, auto-collapse must be false',
}
},
};
const Template = (args) => {
const accordionElement = document.createElement('ifx-accordion');
const initialItem = document.createElement('ifx-accordion-item');
initialItem.setAttribute('initialCollapse', args.initialCollapse);
initialItem.setAttribute('caption', `Label`);
initialItem.setAttribute('open', `true`);
initialItem.innerHTML = `
Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
`;
initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));
initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));
accordionElement.append(initialItem);
accordionElement.setAttribute('auto-collapse', args.autoCollapse);
for (let i = 1; i < args.amountOfItems; i++) {
const item = document.createElement('ifx-accordion-item');
item.setAttribute('caption', `Label`);
item.setAttribute('open', `false`);
item.innerHTML = `
Content for Item #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
`;
item.addEventListener('ifxItemOpen', action('ifxItemOpen'));
item.addEventListener('ifxItemClose', action('ifxItemClose'));
accordionElement.append(item);
}
return accordionElement;
};
export const Default = Template.bind({});
Default.args = {
amountOfItems: 3
};
//# sourceMappingURL=accordion.stories.js.map

1
Server/wwwroot/package/dist/collection/components/accordion/accordion.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,SAAS,EAAE,eAAe;EAC1B,qBAAqB;EAErB,IAAI,EAAE;IACJ,YAAY,EAAE,KAAK;IACnB,eAAe,EAAE,IAAI;GACtB;EAED,QAAQ,EAAE;IACR,aAAa,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;IACpC,eAAe,EAAE;MACf,WAAW,EAAE,qEAAqE;KACnF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EACjE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;EACjE,WAAW,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EAClE,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;EAC7C,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;EAEzC,WAAW,CAAC,SAAS,GAAG;;;;CAIzB,CAAC;EACA,WAAW,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;EACnE,WAAW,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;EAErE,gBAAgB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;EAErC,gBAAgB,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;EACjE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE;IAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC1D,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACtC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEnC,IAAI,CAAC,SAAS,GAAG;4BACO,CAAC,GAAG,CAAC;;;KAG5B,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5D,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IAE9D,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;GAC/B;EAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,aAAa,EAAE,CAAC;CACjB,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Accordion',\n component: 'ifx-accordion',\n //tags: ['autodocs'],\n\n args: {\n autoCollapse: false,\n initialCollapse: true\n },\n\n argTypes: {\n amountOfItems: { control: 'number' },\n initialCollapse: {\n description: 'If set on more than one accordion-item, auto-collapse must be false',\n }\n },\n};\n\nconst Template = (args) => {\n const accordionElement = document.createElement('ifx-accordion');\n const initialItem = document.createElement('ifx-accordion-item');\n initialItem.setAttribute('initialCollapse', args.initialCollapse);\n initialItem.setAttribute('caption', `Label`);\n initialItem.setAttribute('open', `true`);\n\n initialItem.innerHTML = `\n Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n`;\n initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n accordionElement.append(initialItem);\n\n accordionElement.setAttribute('auto-collapse', args.autoCollapse)\n for (let i = 1; i < args.amountOfItems; i++) {\n const item = document.createElement('ifx-accordion-item');\n item.setAttribute('caption', `Label`);\n item.setAttribute('open', `false`);\n\n item.innerHTML = `\n Content for Item #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n `;\n item.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n item.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n accordionElement.append(item);\n }\n\n return accordionElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n amountOfItems: 3\n};"]}

66
Server/wwwroot/package/dist/collection/components/accordion/accordionItem.css vendored Normal file
View File

@ -0,0 +1,66 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
.accordion-item {
border-radius: 3px;
overflow: hidden;
transition: all 0.3s;
font-family: var(--ifx-font-family);
}
.accordion-title:hover {
border: 1px solid #EEEDED;
color: #08665C;
}
.accordion-title {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
color: #0A8276;
background-color: #FFFFFF;
border: 1px solid #EEEDED;
cursor: pointer;
}
.accordion-caption {
font-weight: 600;
font-size: 1.125rem;
}
.accordion-content {
gap: 8px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
line-height: 24px;
font-size: 1rem;
font-weight: 400;
}
.inner-content {
background-color: #FFFFFF;
padding: 24px;
/* wraps text at spaces and within words */
word-wrap: break-word;
/* breaks text within a word if necessary */
overflow-wrap: anywhere;
align-self: stretch;
/* breaks text at arbitrary points when needed */
}
.accordion-icon {
font-weight: bold;
display: inline-block;
transition: transform 0.3s;
}
.accordion-icon:hover {
color: #08665C;
}
.accordion-item.open .accordion-icon {
transform: rotate(-180deg);
}

29
Server/wwwroot/package/dist/collection/components/accordion/accordionItem.e2e.js vendored Normal file
View File

@ -0,0 +1,29 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-accordion-item', () => {
let page;
let element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<ifx-accordion-item caption="Test"></ifx-accordion-item>');
element = await page.find('ifx-accordion-item');
});
it('renders', async () => {
expect(element).toHaveClass('hydrated');
});
it('displays the caption', async () => {
const captionElement = await page.find('ifx-accordion-item >>> .accordion-caption');
expect(captionElement.innerText).toEqual('Test');
});
it('expands and collapses on click', async () => {
const titleElement = await page.find('ifx-accordion-item >>> .accordion-title');
// Initially closed
expect(await element.getProperty('open')).toBeFalsy();
await titleElement.click();
// Open after first click
expect(await element.getProperty('open')).toBeTruthy();
await titleElement.click();
// Closed after second click
expect(await element.getProperty('open')).toBeFalsy();
});
});
//# sourceMappingURL=accordionItem.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/accordion/accordionItem.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"accordionItem.e2e.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,IAAI,IAAI,CAAC;EACT,IAAI,OAAO,CAAC;EAEZ,UAAU,CAAC,KAAK,IAAI,EAAE;IACpB,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAC1B,MAAM,IAAI,CAAC,UAAU,CAAC,0DAA0D,CAAC,CAAC;IAElF,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;EAClD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,2CAA2C,CAAC,CAAC;IACpF,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EACnD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;IAEhF,mBAAmB;IACnB,MAAM,CAAC,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IAEtD,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;IAE3B,yBAAyB;IACzB,MAAM,CAAC,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IAEvD,MAAM,YAAY,CAAC,KAAK,EAAE,CAAC;IAE3B,4BAA4B;IAC5B,MAAM,CAAC,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;EACxD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-accordion-item', () => {\n let page;\n let element;\n\n beforeEach(async () => {\n page = await newE2EPage();\n await page.setContent('<ifx-accordion-item caption=\"Test\"></ifx-accordion-item>');\n\n element = await page.find('ifx-accordion-item');\n });\n\n it('renders', async () => {\n expect(element).toHaveClass('hydrated');\n });\n\n it('displays the caption', async () => {\n const captionElement = await page.find('ifx-accordion-item >>> .accordion-caption');\n expect(captionElement.innerText).toEqual('Test');\n });\n\n it('expands and collapses on click', async () => {\n const titleElement = await page.find('ifx-accordion-item >>> .accordion-title');\n\n // Initially closed\n expect(await element.getProperty('open')).toBeFalsy();\n\n await titleElement.click();\n\n // Open after first click\n expect(await element.getProperty('open')).toBeTruthy();\n\n await titleElement.click();\n\n // Closed after second click\n expect(await element.getProperty('open')).toBeFalsy();\n });\n});\n"]}

181
Server/wwwroot/package/dist/collection/components/accordion/accordionItem.js vendored Normal file
View File

@ -0,0 +1,181 @@
//ifxAccordionItem
import { h } from "@stencil/core";
export class IfxAccordionItem {
constructor() {
this.caption = undefined;
this.open = false;
this.initialCollapse = true;
this.internalOpen = false;
}
componentWillLoad() {
this.internalOpen = this.open;
if (!this.initialCollapse) {
this.internalOpen = true;
}
}
componentDidLoad() {
this.openAccordionItem();
}
componentDidUpdate() {
this.openAccordionItem();
}
openChanged(newValue) {
this.internalOpen = newValue;
}
toggleOpen() {
this.internalOpen = !this.internalOpen;
this.open = this.internalOpen;
if (this.internalOpen) {
this.ifxItemOpen.emit({ isOpen: this.internalOpen });
}
else {
this.ifxItemClose.emit({ isClosed: !this.internalOpen });
}
}
openAccordionItem() {
if (this.internalOpen) {
this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
}
else {
this.contentEl.style.maxHeight = '0';
}
}
handleSlotChange(e) {
const slotElement = e.target;
const nodes = slotElement.assignedNodes();
if (nodes.length > 0) {
nodes.forEach(node => {
const observer = new MutationObserver((mutationsList, _) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
if (this.internalOpen) {
this.openAccordionItem();
}
}
}
});
observer.observe(node, { attributes: true, childList: true, subtree: true });
});
}
if (this.internalOpen) {
this.openAccordionItem();
}
}
render() {
return (h("div", { "aria-label": this.caption, class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", { onSlotchange: (e) => this.handleSlotChange(e) })))));
}
static get is() { return "ifx-accordion-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["accordionItem.scss"]
};
}
static get styleUrls() {
return {
"$": ["accordionItem.css"]
};
}
static get properties() {
return {
"caption": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "caption",
"reflect": false
},
"open": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open",
"reflect": false,
"defaultValue": "false"
},
"initialCollapse": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "initial-collapse",
"reflect": false,
"defaultValue": "true"
}
};
}
static get states() {
return {
"internalOpen": {}
};
}
static get events() {
return [{
"method": "ifxItemOpen",
"name": "ifxItemOpen",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "ifxItemClose",
"name": "ifxItemClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "open",
"methodName": "openChanged"
}];
}
}
//# sourceMappingURL=accordionItem.js.map

1
Server/wwwroot/package/dist/collection/components/accordion/accordionItem.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

124
Server/wwwroot/package/dist/collection/components/alert/alert.css vendored Normal file
View File

@ -0,0 +1,124 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
display: block;
}
.alert__info-wrapper {
display: flex;
padding: 16px 24px;
font-family: var(--ifx-font-family);
}
.alert__info-wrapper .info__text-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.alert__info-wrapper .info__text-wrapper .info__headline-wrapper {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,
.alert__info-wrapper .info__text-wrapper .info__description-wrapper {
color: #1D1D1D;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),
.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p) {
padding: 0;
margin: 0;
}
.alert__info-wrapper .info__text-wrapper .info__description-wrapper {
font-weight: 400;
}
.alert__info-wrapper .close-icon-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.alert__info-wrapper .close-icon-wrapper a {
line-height: 0;
color: #1D1D1D;
}
.alert {
display: flex;
border: 1px solid #0A8276;
border-radius: 1px;
color: #1D1D1D;
background-color: #FFFFFF;
font-family: var(--ifx-font-family);
}
.alert .close-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
}
.alert .close-icon-wrapper a {
line-height: 0;
color: #1D1D1D;
}
.alert .icon-wrapper {
position: relative;
min-width: 48px;
display: flex;
justify-content: center;
align-items: center;
background-color: #0A8276;
}
.alert .alert-text {
font-size: 16px;
width: 100%;
padding: 12px 0px 12px 12px;
color: #1D1D1D;
white-space: pre-wrap;
/* wraps text at spaces and within words */
word-wrap: break-word;
/* breaks text within a word if necessary */
overflow-wrap: anywhere;
/* breaks text at arbitrary points when needed */
}
.alert.primary {
border: 1px solid #0A8276;
}
.alert.primary .icon-wrapper {
background-color: #0A8276;
color: #FFFFFF;
}
.alert.secondary {
border: 1px solid #9C216E;
}
.alert.secondary .icon-wrapper {
background-color: #9C216E;
color: #FFFFFF;
}
.alert.danger {
border: 1px solid #CD002F;
}
.alert.danger .icon-wrapper {
background-color: #CD002F;
color: #FFFFFF;
}
.alert.warning {
border: 1px solid #E16B25;
}
.alert.warning .icon-wrapper {
background-color: #E16B25;
color: #FFFFFF;
}
.close-icon-wrapper ifx-icon:hover {
cursor: pointer;
}

31
Server/wwwroot/package/dist/collection/components/alert/alert.e2e.js vendored Normal file
View File

@ -0,0 +1,31 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-alert', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-alert></ifx-alert>');
const element = await page.find('ifx-alert');
expect(element).toHaveClass('hydrated');
});
it('should set the correct variant', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-alert variant="primary"></ifx-alert>');
const element = await page.find('ifx-alert');
const variant = await element.getProperty('variant');
expect(variant).toBe('primary');
});
it('should set the correct icon', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-alert icon="cinfo24"></ifx-alert>');
const element = await page.find('ifx-alert');
const icon = await element.getProperty('icon');
expect(icon).toBe('cinfo24');
});
it('should display the correct icon', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-alert icon="cinfo24"></ifx-alert>');
const iconElement = await page.find('ifx-alert >>> .icon-wrapper > ifx-icon');
const iconProp = await iconElement.getProperty('icon');
expect(iconProp).toBe('cinfo24');
});
});
//# sourceMappingURL=alert.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/alert/alert.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"alert.e2e.js","sourceRoot":"","sources":["../../../src/components/alert/alert.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAEzB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2CAA2C,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAErD,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAClC,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,wCAAwC,CAAC,CAAC;IAEhE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC/B,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,wCAAwC,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;IAC9E,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAEvD,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EACnC,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-alert', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-alert></ifx-alert>');\n\n const element = await page.find('ifx-alert');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should set the correct variant', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-alert variant=\"primary\"></ifx-alert>');\n\n const element = await page.find('ifx-alert');\n const variant = await element.getProperty('variant');\n\n expect(variant).toBe('primary');\n });\n\n it('should set the correct icon', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-alert icon=\"cinfo24\"></ifx-alert>');\n\n const element = await page.find('ifx-alert');\n const icon = await element.getProperty('icon');\n\n expect(icon).toBe('cinfo24');\n });\n\n it('should display the correct icon', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-alert icon=\"cinfo24\"></ifx-alert>');\n\n const iconElement = await page.find('ifx-alert >>> .icon-wrapper > ifx-icon');\n const iconProp = await iconElement.getProperty('icon');\n\n expect(iconProp).toBe('cinfo24');\n });\n\n});\n"]}

104
Server/wwwroot/package/dist/collection/components/alert/alert.js vendored Normal file
View File

@ -0,0 +1,104 @@
import { h } from "@stencil/core";
export class Alert {
constructor() {
this.variant = 'primary';
this.icon = undefined;
this.closable = true;
}
handleClose() {
this.ifxClose.emit();
}
render() {
return (this.variant === 'info'
? h("div", { class: 'alert__info-wrapper' }, h("div", { class: 'info__text-wrapper' }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: 'headline' })), h("div", { class: "info__description-wrapper" }, h("slot", { name: 'desc' }))), this.closable && h("div", { class: "close-icon-wrapper" }, h("a", { href: undefined, onClick: this.handleClose.bind(this) }, h("ifx-icon", { icon: 'cross-16' }))))
: h("div", { class: `alert ${this.variant}` }, this.icon && (h("div", { class: 'icon-wrapper' }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text" }, h("slot", null)), this.closable && h("div", { class: "close-icon-wrapper" }, h("a", { href: undefined, onClick: this.handleClose.bind(this) }, h("ifx-icon", { icon: 'cross-16' })))));
}
static get is() { return "ifx-alert"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["alert.scss"]
};
}
static get styleUrls() {
return {
"$": ["alert.css"]
};
}
static get properties() {
return {
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | 'danger' | 'warning' | 'info'",
"resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "variant",
"reflect": false,
"defaultValue": "'primary'"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "icon",
"reflect": false
},
"closable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "closable",
"reflect": false,
"defaultValue": "true"
}
};
}
static get events() {
return [{
"method": "ifxClose",
"name": "ifxClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
}
//# sourceMappingURL=alert.js.map

1
Server/wwwroot/package/dist/collection/components/alert/alert.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,KAAK;;mBAC2D,SAAS;;oBAGxD,IAAI;;EAEhC,WAAW;IACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;EACtB,CAAC;EAED,MAAM;IACJ,OAAO,CACN,IAAI,CAAC,OAAO,KAAK,MAAM;MACvB,CAAC,CAAC,WAAK,KAAK,EAAC,qBAAqB;QAC/B,WAAK,KAAK,EAAC,oBAAoB;UAC7B,WAAK,KAAK,EAAC,wBAAwB;YACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB;UACN,WAAK,KAAK,EAAC,2BAA2B;YACpC,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF;QACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB;UAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;YACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACF;MACP,CAAC,CAAC,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE;QACjC,IAAI,CAAC,IAAI,IAAI,CACZ,WAAK,KAAK,EAAC,cAAc;UACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP;QAED,WAAK,KAAK,EAAC,YAAY;UACrB,eAAQ,CACJ;QACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB;UAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;YACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\n\nexport class Alert {\n @Prop() variant: 'primary' | 'secondary' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n\n handleClose() { \n this.ifxClose.emit()\n }\n\n render() {\n return (\n this.variant === 'info' \n ? <div class='alert__info-wrapper'>\n <div class='info__text-wrapper'>\n <div class=\"info__headline-wrapper\">\n <slot name='headline' />\n </div>\n <div class=\"info__description-wrapper\">\n <slot name='desc' />\n </div>\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div>\n : <div class={`alert ${this.variant}`}>\n {this.icon && (\n <div class='icon-wrapper'>\n <ifx-icon icon={this.icon} />\n </div>\n )\n }\n <div class=\"alert-text\">\n <slot />\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div >\n );\n }\n}\n"]}

63
Server/wwwroot/package/dist/collection/components/alert/alert.stories.js vendored Normal file
View File

@ -0,0 +1,63 @@
import { icons } from "@infineon/infineon-icons";
export default {
title: "Components/Alert",
tags: ['autodocs'],
args: {
label: 'Attention! This is an alert message — check it out!',
variant: "primary",
showIcon: true,
closable: true,
iconName: 'c-info-24',
},
argTypes: {
variant: {
options: ['primary', 'secondary', 'danger', 'warning'],
control: { type: 'radio' },
},
iconName: {
options: Object.values(icons).map(i => i['name']),
control: { type: 'select' }
},
closable: {
control: 'boolean',
default: true
},
ifxClose: {
action: 'ifxClose',
description: 'Custom event emitted when close button clicked',
table: {
type: {
summary: 'Framework integration',
detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
},
},
}
}
};
const DefaultTemplate = (args) => `<ifx-alert variant="${args.variant}" icon="${args.showIcon ? args.iconName : ""}" closable="${args.closable}">${args.label}</ifx-alert>`;
export const Default = DefaultTemplate.bind({});
const InfoTemplate = (args) => ` <ifx-alert variant="info" closable="${args.closable}">
<div slot="headline">Headline</div>
<div slot="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.
</div>
</ifx-alert>`;
export const Info = InfoTemplate.bind({});
Info.argTypes = {
variant: {
table: {
disable: true
}
},
iconName: {
table: {
disable: true
}
},
showIcon: {
table: {
disable: true
}
}
};
//# sourceMappingURL=alert.stories.js.map

1
Server/wwwroot/package/dist/collection/components/alert/alert.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,qDAAqD;IAC5D,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,WAAW;GACtB;EAED,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,CAAC;MACtD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IAED,QAAQ,EAAE;MACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IAED,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE,IAAI;KACd;IAED,QAAQ,EAAE;MACR,MAAM,EAAE,UAAU;MAClB,WAAW,EAAE,gDAAgD;MAC7D,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,6KAA6K;SACtL;OACF;KACF;GACF;CACF,CAAC;AAIF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,uBAAuB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;AAG5I,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE,CAC5B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;EACd,OAAO,EAAE;IACP,KAAK,EAAC;MACJ,OAAO,EAAE,IAAI;KACd;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAC;MACJ,OAAO,EAAE,IAAI;KACd;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAC;MACJ,OAAO,EAAE,IAAI;KACd;GACF;CACF,CAAA","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: \"Components/Alert\",\n tags: ['autodocs'],\n\n args: {\n label: 'Attention! This is an alert message — check it out!',\n variant: \"primary\",\n showIcon: true,\n closable: true,\n iconName: 'c-info-24',\n },\n\n argTypes: {\n variant: {\n options: ['primary', 'secondary', 'danger', 'warning'],\n control: { type: 'radio' },\n },\n\n iconName: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' }\n },\n\n closable: {\n control: 'boolean',\n default: true\n },\n\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when close button clicked',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n },\n },\n }\n }\n};\n\n\n\nconst DefaultTemplate = (args) =>\n `<ifx-alert variant=\"${args.variant}\" icon=\"${args.showIcon ? args.iconName : \"\"}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = (args) =>\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n <div slot=\"headline\">Headline</div>\n <div slot=\"desc\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n </div>\n </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n variant: {\n table:{\n disable: true\n }\n },\n iconName: {\n table:{\n disable: true\n }\n },\n showIcon: {\n table:{\n disable: true\n }\n }\n}"]}

24
Server/wwwroot/package/dist/collection/components/badge/badge.css vendored Normal file
View File

@ -0,0 +1,24 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
display: inline-flex;
}
.badge__container {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 4px 8px;
gap: 8px;
border: 1px solid #EEEDED;
background-color: #EEEDED;
border-radius: 100px;
font-family: var(--ifx-font-family);
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
color: #1D1D1D;
}

21
Server/wwwroot/package/dist/collection/components/badge/badge.e2e.js vendored Normal file
View File

@ -0,0 +1,21 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-badge', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-badge></ifx-badge>');
const element = await page.find('ifx-badge');
expect(element).toHaveClass('hydrated');
});
it('should display slotted content', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-badge>Test content</ifx-badge>');
const badgeContent = await page.evaluate(() => {
const badge = document.querySelector('ifx-badge');
const slot = badge.shadowRoot.querySelector('slot');
const nodes = slot.assignedNodes();
return nodes[0].textContent;
});
expect(badgeContent).toBe('Test content');
});
});
//# sourceMappingURL=badge.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/badge/badge.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"badge.e2e.js","sourceRoot":"","sources":["../../../src/components/badge/badge.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAEzB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qCAAqC,CAAC,CAAC;IAE7D,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MAClD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACpD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAC5C,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-badge', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-badge></ifx-badge>');\n\n const element = await page.find('ifx-badge');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-badge>Test content</ifx-badge>');\n\n const badgeContent = await page.evaluate(() => {\n const badge = document.querySelector('ifx-badge');\n const slot = badge.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n });\n\n expect(badgeContent).toBe('Test content');\n });\n\n});\n"]}

19
Server/wwwroot/package/dist/collection/components/badge/badge.js vendored Normal file
View File

@ -0,0 +1,19 @@
import { h } from "@stencil/core";
export class Badge {
render() {
return (h("div", { class: "badge__container" }, h("slot", null)));
}
static get is() { return "ifx-badge"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["badge.scss"]
};
}
static get styleUrls() {
return {
"$": ["badge.css"]
};
}
}
//# sourceMappingURL=badge.js.map

1
Server/wwwroot/package/dist/collection/components/badge/badge.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,KAAK;EAEhB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;MAC3B,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-badge',\n styleUrl: 'badge.scss',\n shadow: true\n})\nexport class Badge {\n\n render() {\n return (\n <div class=\"badge__container\">\n <slot />\n </div>\n );\n }\n}"]}

22
Server/wwwroot/package/dist/collection/components/badge/badge.stories.js vendored Normal file
View File

@ -0,0 +1,22 @@
import { icons } from "@infineon/infineon-icons";
export default {
title: "Components/Badge",
tags: ['autodocs'],
args: {
label: 'Badge label',
icon: false
},
argTypes: {
iconName: {
options: Object.values(icons).map(i => i['name']),
control: { type: 'select' }
}
}
};
const DefaultTemplate = (args) => `<ifx-badge>
${args.icon ? `<ifx-icon icon="${args.iconName}"></ifx-icon>` : ""}
${args.label}
</ifx-badge>`;
export const Default = DefaultTemplate.bind({});
Default.argTypes = {};
//# sourceMappingURL=badge.stories.js.map

1
Server/wwwroot/package/dist/collection/components/badge/badge.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,KAAK;GACZ;EAED,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;GACF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B;MACI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,QAAQ,eAAe,CAAC,CAAC,CAAC,EAAE;MAChE,IAAI,CAAC,KAAK;eACD,CAAC;AAGhB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAElB,CAAA","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: \"Components/Badge\",\n tags: ['autodocs'],\n\n args: {\n label: 'Badge label',\n icon: false\n },\n \n argTypes: { \n iconName: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' }\n }\n }\n};\n\n\nconst DefaultTemplate = (args) =>\n `<ifx-badge>\n ${args.icon ? `<ifx-icon icon=\"${args.iconName}\"></ifx-icon>` : \"\"}\n ${args.label}\n </ifx-badge>`;\n\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {\n\n}\n\n\n\n"]}

38
Server/wwwroot/package/dist/collection/components/breadcrumb/breadcrumb-item-label.css vendored Normal file
View 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
View 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
View 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
View 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
View 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
View File

@ -0,0 +1 @@
{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOrE,MAAM,OAAO,cAAc;;sBAEM,KAAK;;EAKpC,kBAAkB,CAAC,KAAiB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;MAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;EACH,CAAC;EAED,eAAe;IACb,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACxE,OAAO,YAAY,CAAA;EACrB,CAAC;EAGD,yBAAyB,CAAC,KAA+B;IACvD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;EACrC,CAAC;EAED,kBAAkB;IAChB,OAAO,IAAI,CAAC,cAAc,CAAC;EAC7B,CAAC;EAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;IACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;EAC/B,CAAC;EAED,iBAAiB;IACf,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;EACrD,CAAC;EAED,kBAAkB;IAChB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;EACrD,CAAC;EAED,cAAc;IACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAA;IACjG,IAAG,IAAI,CAAC,EAAE,KAAK,eAAe,CAAC,eAAe,CAAC,MAAM,GAAC,CAAC,CAAC,EAAE;MACxD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;;MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;EACjC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,EAAE,CAAA;EACvB,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,cAAc,EAAE,CAAA;EACvB,CAAC;EAED,gBAAgB;IACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;IAE/D,IAAG,CAAC,YAAY,EAAE;MAChB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;MAClD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;KACxD;SAAM;MACL,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,UAAI,KAAK,EAAC,mBAAmB,kBAAe,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;MACvH,UAAI,KAAK,EAAC,oBAAoB;QAC3B,YAAM,IAAI,EAAC,OAAO,GAAG;QACrB,WAAK,KAAK,EAAC,eAAe;UACxB,eAAQ,CACJ,CACH;MACJ,CAAC,IAAI,CAAC,UAAU,IAAI,YAAM,KAAK,EAAC,oBAAoB,QAAS,CAC3D,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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
View 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
View 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
View 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
View 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
View 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
View 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
View 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"]}

252
Server/wwwroot/package/dist/collection/components/button/button.css vendored Normal file
View File

@ -0,0 +1,252 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
vertical-align: bottom;
display: inline-flex;
width: var(--bw, fit-content);
}
.btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0px 16px;
gap: 8px;
color: #FFFFFF;
font-weight: 600;
border-radius: 1px;
line-height: 1.5rem;
font-family: var(--ifx-font-family);
font-style: normal;
text-decoration: none;
user-select: none;
font-size: 1rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
width: var(--bw, fit-content);
}
.btn:not(.disabled) {
cursor: pointer;
}
.btn.disabled {
pointer-events: none;
}
.btn-default {
color: #FFFFFF;
background-color: #0A8276;
}
.btn-default:disabled, .btn-default.disabled {
background-color: #BFBBBB;
color: #FFFFFF;
pointer-events: none;
}
.btn-secondary-default {
background-color: #FFFFFF;
color: #0A8276;
border: 1px solid #0A8276;
}
.btn-secondary-default:disabled, .btn-secondary-default.disabled {
background-color: #FFFFFF;
border: 1px solid #BFBBBB;
color: #BFBBBB;
pointer-events: none;
}
.btn-tertiary-default {
background-color: transparent;
color: #0A8276;
}
.btn-tertiary-default:disabled, .btn-tertiary-default.disabled {
color: #BFBBBB;
pointer-events: none;
}
.btn-danger {
color: #FFFFFF;
background-color: #CD002F;
border-color: #CD002F;
}
.btn-danger:disabled, .btn-danger.disabled {
background-color: #BFBBBB;
color: #FFFFFF;
pointer-events: none;
}
.btn-secondary-danger {
background-color: #FFFFFF;
color: #CD002F;
border: 1px solid #CD002F;
}
.btn-secondary-danger:disabled, .btn-secondary-danger.disabled {
background-color: #FFFFFF;
border: 1px solid #BFBBBB;
color: #BFBBBB;
pointer-events: none;
}
.btn-tertiary-danger {
background-color: transparent;
color: #CD002F;
}
.btn-tertiary-danger:disabled, .btn-tertiary-danger.disabled {
background-color: #FFFFFF;
color: #BFBBBB;
pointer-events: none;
}
.btn-inverse {
color: #0A8276;
background-color: #FFFFFF;
}
.btn-inverse:disabled, .btn-inverse.disabled {
opacity: 1;
background-color: #FFFFFF;
color: #0A8276;
pointer-events: none;
}
.btn-secondary-inverse {
color: #FFFFFF;
border: 1px solid #FFFFFF;
}
.btn-secondary-inverse:disabled, .btn-secondary-inverse.disabled {
border: 1px solid #FFFFFF;
color: #FFFFFF;
pointer-events: none;
}
.btn-tertiary-inverse {
color: #FFFFFF;
}
.btn-tertiary-inverse:disabled, .btn-tertiary-inverse.disabled {
color: #FFFFFF;
opacity: 1;
pointer-events: none;
}
.btn ifx-icon:empty {
display: none;
}
.btn.btn-xs {
font-size: 0.875rem;
height: 32px;
line-height: 1rem;
}
.btn.btn-s {
font-size: 0.875rem;
height: 36px;
line-height: 1.25rem;
}
.btn.btn-l {
font-size: 1.25rem;
height: 48px;
line-height: 1.75rem;
}
.btn.btn-default:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-default:not(:disabled, .disabled):hover {
background-color: #08665C;
}
.btn.btn-default:not(:disabled, .disabled):active, .btn.btn-default:not(:disabled, .disabled).active {
background-color: #06534B;
}
.btn.btn-secondary-default:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-secondary-default:not(:disabled, .disabled):hover {
color: #FFFFFF;
background-color: #08665C;
}
.btn.btn-secondary-default:not(:disabled, .disabled):active, .btn.btn-secondary-default:not(:disabled, .disabled).active {
background-color: #06534B;
}
.btn.btn-secondary:not(:disabled, .disabled):hover {
background-color: #9C216E;
}
.btn.btn-secondary:not(:disabled, .disabled):active, .btn.btn-secondary:not(:disabled, .disabled).active {
background-color: #9C216E;
}
.btn.btn-danger:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-danger:not(:disabled, .disabled):hover {
background-color: #A2001E;
}
.btn.btn-danger:not(:disabled, .disabled):active, .btn.btn-danger:not(:disabled, .disabled).active {
background-color: #900021;
}
.btn.btn-secondary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-secondary-danger:not(:disabled, .disabled):hover {
color: #FFFFFF;
background-color: #A2001E;
}
.btn.btn-secondary-danger:not(:disabled, .disabled):active, .btn.btn-secondary-danger:not(:disabled, .disabled).active {
background-color: #900021;
}
.btn.btn-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
}
.btn.btn-inverse:not(:disabled, .disabled):hover {
background-color: #EEEDED;
}
.btn.btn-inverse:not(:disabled, .disabled):active, .btn.btn-inverse:not(:disabled, .disabled).active {
background-color: #BFBBBB;
}
.btn.btn-secondary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
}
.btn.btn-secondary-inverse:not(:disabled, .disabled):hover {
color: #0A8276;
background-color: #EEEDED;
}
.btn.btn-secondary-inverse:not(:disabled, .disabled):active, .btn.btn-secondary-inverse:not(:disabled, .disabled).active {
color: #0A8276;
background-color: #BFBBBB;
}
.btn.btn-tertiary-default:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #08665C;
}
.btn.btn-tertiary-default:not(:disabled, .disabled):hover {
color: #08665C;
}
.btn.btn-tertiary-default:not(:disabled, .disabled):active, .btn.btn-tertiary-default:not(:disabled, .disabled).active {
color: #06534B;
}
.btn.btn-tertiary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E;
}
.btn.btn-tertiary-danger:not(:disabled, .disabled):hover {
color: #A2001E;
}
.btn.btn-tertiary-danger:not(:disabled, .disabled):active, .btn.btn-tertiary-danger:not(:disabled, .disabled).active {
color: #900021;
}
.btn.btn-tertiary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
}
.btn.btn-tertiary-inverse:not(:disabled, .disabled):hover {
color: #EEEDED;
}
.btn.btn-tertiary-inverse:not(:disabled, .disabled):active, .btn.btn-tertiary-inverse:not(:disabled, .disabled).active {
color: #BFBBBB;
}

42
Server/wwwroot/package/dist/collection/components/button/button.e2e.js vendored Normal file
View File

@ -0,0 +1,42 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-button', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-button></ifx-button>');
const element = await page.find('ifx-button');
expect(element).toHaveClass('hydrated');
});
it('should display slotted content', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-button>Button Text</ifx-button>');
const buttonText = await page.evaluate(() => {
const button = document.querySelector('ifx-button');
const slot = button.shadowRoot.querySelector('slot');
const nodes = slot.assignedNodes();
return nodes[0].textContent;
});
expect(buttonText).toBe('Button Text');
});
it('should set correct variant', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-button variant="secondary"></ifx-button>');
const element = await page.find('ifx-button');
const variant = await element.getProperty('variant');
expect(variant).toBe('secondary');
});
it('should set correct theme', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-button theme="danger"></ifx-button>');
const element = await page.find('ifx-button');
const color = await element.getProperty('theme');
expect(color).toBe('danger');
});
it('should set correct size', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-button size="s"></ifx-button>');
const element = await page.find('ifx-button');
const size = await element.getProperty('size');
expect(size).toBe('s');
});
});
//# sourceMappingURL=button.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/button/button.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"button.e2e.js","sourceRoot":"","sources":["../../../src/components/button/button.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAE1B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,sCAAsC,CAAC,CAAC;IAE9D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC1C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;MACpD,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACrD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;EACzC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,+CAA+C,CAAC,CAAC;IAEvE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAErD,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACpC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,0CAA0C,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEjD,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC/B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,oCAAoC,CAAC,CAAC;IAE5D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EACzB,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-button', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button></ifx-button>');\n\n const element = await page.find('ifx-button');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button>Button Text</ifx-button>');\n\n const buttonText = await page.evaluate(() => {\n const button = document.querySelector('ifx-button');\n const slot = button.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n });\n\n expect(buttonText).toBe('Button Text');\n });\n\n it('should set correct variant', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button variant=\"secondary\"></ifx-button>');\n\n const element = await page.find('ifx-button');\n const variant = await element.getProperty('variant');\n\n expect(variant).toBe('secondary');\n });\n\n it('should set correct theme', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button theme=\"danger\"></ifx-button>');\n\n const element = await page.find('ifx-button');\n const color = await element.getProperty('theme');\n\n expect(color).toBe('danger');\n });\n\n it('should set correct size', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button size=\"s\"></ifx-button>');\n\n const element = await page.find('ifx-button');\n const size = await element.getProperty('size');\n\n expect(size).toBe('s');\n });\n\n});\n"]}

331
Server/wwwroot/package/dist/collection/components/button/button.js vendored Normal file
View File

@ -0,0 +1,331 @@
import { h, Host } from "@stencil/core";
import classNames from "classnames";
export class Button {
constructor() {
this.handleClick = (ev) => {
if (this.el.shadowRoot) {
const parentForm = this.el.closest('form');
if (parentForm) {
ev.preventDefault();
if (this.type === 'reset') {
// If the button type is 'reset', manually reset all custom form fields
this.resetClickHandler(); //this will reset all ifx-text-fields within a form
}
else {
const fakeButton = document.createElement('button');
if (this.type) {
fakeButton.type = this.type;
}
fakeButton.style.display = 'none';
parentForm.appendChild(fakeButton);
fakeButton.click();
fakeButton.remove();
}
}
}
};
this.variant = 'primary';
this.theme = 'default';
this.size = 'm';
this.disabled = false;
this.internalHref = undefined;
this.href = undefined;
this.target = '_self';
this.type = "button";
this.fullWidth = false;
}
setInternalHref(newValue) {
this.internalHref = newValue;
}
async setFocus() {
this.focusableElement.focus();
}
insertNativeButton() {
this.nativeButton = document.createElement('button');
this.nativeButton.type = this.type;
this.nativeButton.style.display = 'none';
this.el.closest('form').appendChild(this.nativeButton);
}
handleFormAndInternalHref() {
if (this.el.closest('form')) {
if (this.el.href) {
this.el.internalHref = undefined;
}
this.insertNativeButton();
}
else {
this.internalHref = this.href;
}
}
handleButtonWidth() {
if (this.fullWidth) {
this.el.style.setProperty('--bw', '100%');
}
else {
this.el.style.setProperty('--bw', 'fit-content');
}
}
componentWillLoad() {
this.handleFormAndInternalHref();
}
componentWillRender() {
this.handleButtonWidth();
}
resetClickHandler() {
const formElement = this.el.closest('form');
const customElements = formElement.querySelectorAll('ifx-text-field');
customElements.forEach(element => {
element.reset();
});
}
handleKeyDown(ev) {
if (ev.key === 'Enter' && !this.disabled) {
this.handleClick(ev);
}
}
handleHostClick(event) {
if (this.disabled === true) {
event.stopImmediatePropagation();
}
}
handleFocus(event) {
if (this.disabled) {
event.preventDefault();
this.focusableElement.blur();
}
}
render() {
return (h(Host, null, h("a", { tabIndex: 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled, "aria-labelledby": "label" }, h("slot", null))));
}
getVariantClass() {
return `${this.variant}` === "secondary"
? `secondary-${this.theme}`
: `${this.variant}` === 'tertiary'
? `tertiary-${this.theme}`
: `${this.theme}`;
}
getSizeClass() {
if (`${this.size}` === "xs") {
return "xs";
}
else if (`${this.size}` === "s") {
return "s";
}
else if (`${this.size}` === "l") {
return "l";
}
else
return "";
}
getClassNames() {
return classNames('btn', this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? 'disabled' : '');
}
static get is() { return "ifx-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["button.scss"]
};
}
static get styleUrls() {
return {
"$": ["button.css"]
};
}
static get properties() {
return {
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | 'tertiary'",
"resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "variant",
"reflect": false,
"defaultValue": "'primary'"
},
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'default' | 'danger' | 'inverse'",
"resolved": "\"danger\" | \"default\" | \"inverse\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "theme",
"reflect": false,
"defaultValue": "'default'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'m'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "href",
"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'"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"button\" | \"submit\" | \"reset\"",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false,
"defaultValue": "\"button\""
},
"fullWidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "full-width",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"internalHref": {}
};
}
static get methods() {
return {
"setFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "href",
"methodName": "setInternalHref"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "click",
"method": "handleHostClick",
"target": undefined,
"capture": true,
"passive": false
}];
}
}
//# sourceMappingURL=button.js.map

1
Server/wwwroot/package/dist/collection/components/button/button.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

57
Server/wwwroot/package/dist/collection/components/button/button.stories.js vendored Normal file
View File

@ -0,0 +1,57 @@
import { icons } from "@infineon/infineon-icons";
export default {
title: "Components/Button",
tags: ['autodocs'],
args: {
label: "Button",
variant: "primary",
theme: "default",
type: "button",
size: "m",
fullWidth: false,
disabled: false,
iconPosition: 'left',
href: false,
url: "",
target: '_blank'
},
argTypes: {
icon: {
options: Object.values(icons).map(i => i['name']),
control: { type: 'select' },
},
variant: {
options: ['primary', 'secondary', 'tertiary'],
control: { type: 'radio' },
},
theme: {
options: ['default', 'danger', 'inverse'],
control: { type: 'radio' },
},
type: {
options: ['button', 'submit', 'reset'],
control: { type: 'radio' },
},
size: {
description: "Size options: xs (32px) s (36px), m (40px), l (48px) - default: m",
options: ['xs', 's', 'm', 'l'],
control: { type: 'radio' },
},
fullWidth: {
control: { type: 'boolean' }
},
iconPosition: {
options: ['left', 'right'],
control: { type: 'radio' }
},
target: {
options: ['_blank', '_self', '_parent'],
control: { type: 'radio' }
}
},
};
const DefaultTemplate = (args) => `<ifx-button type="${args.type}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ""} full-width="${args.fullWidth}">
${args.icon && args.iconPosition.toUpperCase() === "LEFT" ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ""}${args.label}${args.icon && args.iconPosition.toUpperCase() === "RIGHT" ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ""}
</ifx-button>`;
export const Default = DefaultTemplate.bind({});
//# sourceMappingURL=button.stories.js.map

1
Server/wwwroot/package/dist/collection/components/button/button.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,EAAE;IACP,MAAM,EAAE,QAAQ;GACjB;EAED,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,KAAK,EAAE;MACL,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;MACzC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;MACtC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,IAAI,EAAE;MACJ,WAAW,EAAE,oEAAoE;MACjF,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;MAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KAC3B;IACD,YAAY,EAAE;MACZ,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;MAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GAEF;CAEF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,qBAAqB,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,gBAAgB,IAAI,CAAC,SAAS;IAC5N,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;cAC3N,CAAC;AAGf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["\r\nimport { icons } from '@infineon/infineon-icons'\r\n\r\nexport default {\r\n title: \"Components/Button\",\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: \"Button\",\r\n variant: \"primary\",\r\n theme: \"default\",\r\n type: \"button\",\r\n size: \"m\",\r\n fullWidth: false,\r\n disabled: false,\r\n iconPosition: 'left',\r\n href: false,\r\n url: \"\",\r\n target: '_blank'\r\n },\r\n\r\n argTypes: {\r\n icon: {\r\n options: Object.values(icons).map(i => i['name']),\r\n control: { type: 'select' },\r\n },\r\n variant: {\r\n options: ['primary', 'secondary', 'tertiary'],\r\n control: { type: 'radio' },\r\n },\r\n theme: {\r\n options: ['default', 'danger', 'inverse'],\r\n control: { type: 'radio' },\r\n },\r\n type: {\r\n options: ['button', 'submit', 'reset'],\r\n control: { type: 'radio' },\r\n },\r\n size: {\r\n description: \"Size options: xs (32px) s (36px), m (40px), l (48px) - default: m\",\r\n options: ['xs', 's', 'm', 'l'],\r\n control: { type: 'radio' },\r\n },\r\n fullWidth: {\r\n control: {type: 'boolean'}\r\n },\r\n iconPosition: {\r\n options: ['left', 'right'],\r\n control: { type: 'radio' }\r\n },\r\n target: {\r\n options: ['_blank', '_self', '_parent'],\r\n control: { type: 'radio' }\r\n }\r\n\r\n },\r\n\r\n};\r\n\r\n\r\nconst DefaultTemplate = (args) =>\r\n `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : \"\"} full-width=\"${args.fullWidth}\">\r\n ${args.icon && args.iconPosition.toUpperCase() === \"LEFT\" ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : \"\"}${args.label}${args.icon && args.iconPosition.toUpperCase() === \"RIGHT\" ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : \"\"} \r\n</ifx-button>`;\r\n\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}

36
Server/wwwroot/package/dist/collection/components/card/card-headline/card-headline.css vendored Normal file
View File

@ -0,0 +1,36 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
pointer-events: none;
}
.card__headline-wrapper {
padding-bottom: 16px;
}
.card__headline-wrapper.withDesc {
padding-bottom: 8px;
}
.card-headline {
margin-top: 0;
padding-top: 0;
font-family: var(--ifx-font-family);
font-weight: 600;
font-size: 1.5rem;
line-height: 2rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.card-headline.isHovered {
color: #0A8276;
}
.card-headline.horizontal {
font-size: 1.25rem;
line-height: 28px;
}

21
Server/wwwroot/package/dist/collection/components/card/card-headline/card-headline.e2e.js vendored Normal file
View File

@ -0,0 +1,21 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-card-headline', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-card-headline></ifx-card-headline>');
const element = await page.find('ifx-card-headline');
expect(element).toHaveClass('hydrated');
});
it('should display slotted content', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-card-headline>Test content</ifx-card-headline>');
const headlineContent = await page.evaluate(() => {
const headline = document.querySelector('ifx-card-headline');
const slot = headline.shadowRoot.querySelector('slot');
const nodes = slot.assignedNodes();
return nodes[0].textContent;
}).catch(e => console.error(e));
expect(headlineContent).toBe('Test content');
});
});
//# sourceMappingURL=card-headline.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/card/card-headline/card-headline.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card-headline.e2e.js","sourceRoot":"","sources":["../../../../src/components/card/card-headline/card-headline.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EAEjC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACrD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,qDAAqD,CAAC,CAAC;IAE7E,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;MAC7D,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACvD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAC/C,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-card-headline', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-headline></ifx-card-headline>');\n\n const element = await page.find('ifx-card-headline');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n\n await page.setContent('<ifx-card-headline>Test content</ifx-card-headline>');\n\n const headlineContent = await page.evaluate(() => {\n const headline = document.querySelector('ifx-card-headline');\n const slot = headline.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n }).catch(e => console.error(e));\n\n expect(headlineContent).toBe('Test content');\n });\n\n});\n"]}

67
Server/wwwroot/package/dist/collection/components/card/card-headline/card-headline.js vendored Normal file
View File

@ -0,0 +1,67 @@
import { h } from "@stencil/core";
export class CardHeadline {
constructor() {
this.direction = undefined;
this.hasDesc = undefined;
this.isHovered = false;
}
componentWillLoad() {
var _a;
const cardElement = this.el.closest('ifx-card');
if (cardElement) {
const cardClass = (_a = cardElement.shadowRoot.querySelector('.card')) === null || _a === void 0 ? void 0 : _a.className;
if (cardClass && cardClass.includes('horizontal')) {
this.direction = 'horizontal';
}
const desc = cardElement.querySelector('ifx-card-text');
if (desc) {
this.hasDesc = true;
}
}
}
render() {
return (h("div", { class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, h("div", { class: `card-headline ${this.direction} ${this.isHovered ? 'isHovered' : ""}` }, h("slot", null))));
}
static get is() { return "ifx-card-headline"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["card-headline.scss"]
};
}
static get styleUrls() {
return {
"$": ["card-headline.css"]
};
}
static get properties() {
return {
"isHovered": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "is-hovered",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"direction": {},
"hasDesc": {}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=card-headline.js.map

1
Server/wwwroot/package/dist/collection/components/card/card-headline/card-headline.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card-headline.js","sourceRoot":"","sources":["../../../../src/components/card/card-headline/card-headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnE,MAAM,OAAO,YAAY;;;;qBAIM,KAAK;;EAElC,iBAAiB;;IACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhD,IAAI,WAAW,EAAE;MACf,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;MAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;QACjD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;OAC9B;MAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACxD,IAAI,IAAI,EAAE;QACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;OACrB;KACF;EACH,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MACpE,WAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;QAChF,eAAQ,CACJ,CACF,CACP,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-headline',\n styleUrl: 'card-headline.scss',\n shadow: true,\n})\n\nexport class CardHeadline {\n @Element() el;\n @State() direction: string;\n @State() hasDesc: boolean;\n @Prop() isHovered: boolean = false;\n\n componentWillLoad() {\n const cardElement = this.el.closest('ifx-card');\n\n if (cardElement) {\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n if (cardClass && cardClass.includes('horizontal')) {\n this.direction = 'horizontal'\n }\n\n const desc = cardElement.querySelector('ifx-card-text');\n if (desc) {\n this.hasDesc = true;\n }\n }\n }\n\n\n render() {\n return (\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n <div class={`card-headline ${this.direction} ${this.isHovered ? 'isHovered' : \"\"}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"]}

6
Server/wwwroot/package/dist/collection/components/card/card-image/card-image.css vendored Normal file
View File

@ -0,0 +1,6 @@
.card-image {
width: 100%;
height: 100%;
vertical-align: bottom;
object-fit: cover;
}

106
Server/wwwroot/package/dist/collection/components/card/card-image/card-image.js vendored Normal file
View File

@ -0,0 +1,106 @@
import { h } from "@stencil/core";
export class CardImage {
constructor() {
this.src = undefined;
this.alt = undefined;
this.position = undefined;
}
handlePosition(position) {
this.imgPosition.emit(position);
}
componentWillLoad() {
this.handlePosition(this.position);
}
componentDidUpdate() {
this.handlePosition(this.position);
}
render() {
return (h("img", { src: this.src, alt: this.alt, class: "card-image" }));
}
static get is() { return "ifx-card-image"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["card-image.scss"]
};
}
static get styleUrls() {
return {
"$": ["card-image.css"]
};
}
static get properties() {
return {
"src": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "src",
"reflect": false
},
"alt": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "alt",
"reflect": false
},
"position": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "position",
"reflect": false
}
};
}
static get events() {
return [{
"method": "imgPosition",
"name": "imgPosition",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
}
//# sourceMappingURL=card-image.js.map

1
Server/wwwroot/package/dist/collection/components/card/card-image/card-image.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card-image.js","sourceRoot":"","sources":["../../../../src/components/card/card-image/card-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,SAAS;;;;;;EAMpB,cAAc,CAAC,QAAQ;IACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACjC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACpC,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACpC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,CACzD,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-image',\n styleUrl: 'card-image.scss',\n shadow: true,\n})\n\nexport class CardImage {\n @Prop() src: string;\n @Prop() alt: string;\n @Prop() position: string;\n @Event() imgPosition: EventEmitter;\n\n handlePosition(position) {\n this.imgPosition.emit(position)\n }\n\n componentWillLoad() {\n this.handlePosition(this.position)\n }\n\n componentDidUpdate() {\n this.handlePosition(this.position)\n }\n\n render() {\n return (\n <img src={this.src} alt={this.alt} class=\"card-image\" />\n );\n }\n}\n"]}

22
Server/wwwroot/package/dist/collection/components/card/card-links/card-links.css vendored Normal file
View File

@ -0,0 +1,22 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
.container {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
text-decoration: none;
color: #1D1D1D;
padding: 0px 24px 24px 24px;
/* wraps text at spaces and within words */
word-wrap: break-word;
/* breaks text within a word if necessary */
overflow-wrap: anywhere;
/* breaks text at arbitrary points when needed */
}
.container:hover {
cursor: initial;
}

20
Server/wwwroot/package/dist/collection/components/card/card-links/card-links.js vendored Normal file
View File

@ -0,0 +1,20 @@
import { h } from "@stencil/core";
export class CardLinks {
render() {
return (h("div", { class: 'container' }, h("slot", null)));
}
static get is() { return "ifx-card-links"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["card-links.scss"]
};
}
static get styleUrls() {
return {
"$": ["card-links.css"]
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=card-links.js.map

1
Server/wwwroot/package/dist/collection/components/card/card-links/card-links.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card-links.js","sourceRoot":"","sources":["../../../../src/components/card/card-links/card-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQtD,MAAM,OAAO,SAAS;EAGpB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,eAAQ,CACJ,CACP,CAAA;EACH,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-links',\n styleUrl: 'card-links.scss',\n shadow: true,\n})\n\nexport class CardLinks {\n @Element() el;\n\n render() {\n return (\n <div class='container'>\n <slot />\n </div>\n )\n }\n}\n"]}

21
Server/wwwroot/package/dist/collection/components/card/card-overline/card-overline.css vendored Normal file
View File

@ -0,0 +1,21 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
pointer-events: none;
}
.card-overline {
font-size: 1rem;
font-weight: 400;
color: #575352;
padding-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}

21
Server/wwwroot/package/dist/collection/components/card/card-overline/card-overline.e2e.js vendored Normal file
View File

@ -0,0 +1,21 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-card-overline', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-card-overline></ifx-card-overline>');
const element = await page.find('ifx-card-overline');
expect(element).toHaveClass('hydrated');
});
it('should display slotted content', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-card-overline>Card Overline</ifx-card-overline>');
const cardOverlineText = await page.evaluate(() => {
const cardOverline = document.querySelector('ifx-card-overline');
const slot = cardOverline.shadowRoot.querySelector('slot');
const nodes = slot.assignedNodes();
return nodes[0].textContent;
});
expect(cardOverlineText).toBe('Card Overline');
});
});
//# sourceMappingURL=card-overline.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/card/card-overline/card-overline.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card-overline.e2e.js","sourceRoot":"","sources":["../../../../src/components/card/card-overline/card-overline.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EAEjC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACrD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,sDAAsD,CAAC,CAAC;IAE9E,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAChD,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;MACjE,MAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;EACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-card-overline', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-overline></ifx-card-overline>');\n\n const element = await page.find('ifx-card-overline');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-overline>Card Overline</ifx-card-overline>');\n\n const cardOverlineText = await page.evaluate(() => {\n const cardOverline = document.querySelector('ifx-card-overline');\n const slot = cardOverline.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n });\n\n expect(cardOverlineText).toBe('Card Overline');\n });\n});\n"]}

19
Server/wwwroot/package/dist/collection/components/card/card-overline/card-overline.js vendored Normal file
View File

@ -0,0 +1,19 @@
import { h } from "@stencil/core";
export class CardOverline {
render() {
return (h("div", { class: "card-overline" }, h("slot", null)));
}
static get is() { return "ifx-card-overline"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["card-overline.scss"]
};
}
static get styleUrls() {
return {
"$": ["card-overline.css"]
};
}
}
//# sourceMappingURL=card-overline.js.map

1
Server/wwwroot/package/dist/collection/components/card/card-overline/card-overline.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card-overline.js","sourceRoot":"","sources":["../../../../src/components/card/card-overline/card-overline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,YAAY;EAEvB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;MACxB,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-overline',\n styleUrl: 'card-overline.scss',\n shadow: true,\n})\n\nexport class CardOverline {\n\n render() {\n return (\n <div class=\"card-overline\">\n <slot />\n </div>\n );\n }\n}\n"]}

27
Server/wwwroot/package/dist/collection/components/card/card-text/card-text.css vendored Normal file
View File

@ -0,0 +1,27 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
pointer-events: none;
}
.card__text-wrapper {
padding-bottom: 0px;
}
.card__text-wrapper.hasBtn {
padding-bottom: 16px;
}
.card-text {
line-height: 1.5rem;
font-size: 1rem;
font-weight: 400;
white-space: wrap;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

35
Server/wwwroot/package/dist/collection/components/card/card-text/card-text.js vendored Normal file
View File

@ -0,0 +1,35 @@
import { h } from "@stencil/core";
export class CardText {
constructor() {
this.hasBtn = undefined;
}
componentWillLoad() {
const link = this.el.closest('ifx-card').querySelector('ifx-link');
const button = this.el.closest('ifx-card').querySelector('ifx-button');
if (link || button) {
this.hasBtn = true;
}
}
render() {
return (h("div", { class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, h("div", { class: `card-text` }, h("slot", null))));
}
static get is() { return "ifx-card-text"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["./card-text.scss"]
};
}
static get styleUrls() {
return {
"$": ["card-text.css"]
};
}
static get states() {
return {
"hasBtn": {}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=card-text.js.map

1
Server/wwwroot/package/dist/collection/components/card/card-text/card-text.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card-text.js","sourceRoot":"","sources":["../../../../src/components/card/card-text/card-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,QAAQ;;;;EAInB,iBAAiB;IACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACvE,IAAG,IAAI,IAAI,MAAM,EAAE;MACjB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;MAC7D,WAAK,KAAK,EAAE,WAAW;QACrB,eAAQ,CACJ,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-text',\n styleUrl: './card-text.scss',\n shadow: true,\n})\n\nexport class CardText {\n @Element() el;\n @State() hasBtn: boolean;\n\n componentWillLoad() { \n const link = this.el.closest('ifx-card').querySelector('ifx-link');\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\n if(link || button) { \n this.hasBtn = true;\n }\n }\n\n render() {\n return (\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n <div class={`card-text`}>\n <slot />\n </div>\n </div>\n );\n }\n}\n"]}

105
Server/wwwroot/package/dist/collection/components/card/card.css vendored Normal file
View File

@ -0,0 +1,105 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
display: inline-flex;
}
.card {
position: relative;
display: inline-flex;
flex-direction: column;
word-wrap: break-word;
background-color: #FFFFFF;
background-clip: border-box;
border: 1px solid #EEEDED;
border-radius: 1px;
width: 350px;
height: auto;
font-family: var(--ifx-font-family);
}
.card.linkHovered {
border-color: #EEEDED;
}
.card.cardHovered {
border-color: #0A8276;
}
.card.noBtns .vertical .lower__body-wrapper {
padding-bottom: 24px;
}
.card.noBtns .horizontal .lower__body-wrapper {
padding-bottom: 24px;
}
.card .horizontal {
display: flex;
flex-direction: row;
min-height: 218px;
}
.card .horizontal .card-img {
flex: 1;
text-decoration: none;
}
.card .horizontal .card-img.noImage {
display: none;
}
.card .horizontal .card-img ::slotted([slot=img]) {
width: 100%;
vertical-align: bottom;
}
.card .horizontal .lower__body-wrapper {
flex: 1;
display: grid;
grid-template-rows: 1fr auto;
}
.card .horizontal .lower__body-wrapper .upper-body {
display: flex;
flex-direction: column;
text-decoration: none;
color: #1D1D1D;
padding: 24px 24px 0px 24px;
}
.card .vertical .upper__body-wrapper {
text-decoration: none;
color: #1D1D1D;
}
.card .vertical .upper__body-wrapper .card-img {
height: 190px;
}
.card .vertical .upper__body-wrapper .card-img.noImage {
display: none;
}
.card .vertical .upper__body-wrapper .upper-body {
padding: 24px 24px 0px 24px;
}
.card .vertical .lower__body-wrapper:hover {
border-color: #EEEDED;
}
.card.horizontal {
flex-direction: row;
width: 538px;
}
.card.horizontal .card-img {
flex: 1;
order: 2;
}
.card.horizontal .card-img ::slotted([slot=img]) {
width: 100%;
height: 100%;
vertical-align: bottom;
object-fit: cover;
}
.card.horizontal.left .horizontal .card-img {
order: 1;
}
.card.horizontal.left .horizontal .lower__body-wrapper {
order: 2;
}
.card:focus,
.card:focus-visible,
.focus {
outline: none;
border-color: #0A8276 !important;
}

24
Server/wwwroot/package/dist/collection/components/card/card.e2e.js vendored Normal file
View File

@ -0,0 +1,24 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-card', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-card></ifx-card>');
const element = await page.find('ifx-card');
expect(element).toHaveClass('hydrated');
});
it('should set correct direction', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-card direction="horizontal"></ifx-card>');
const element = await page.find('ifx-card');
const direction = await element.getProperty('direction');
expect(direction).toBe('horizontal');
});
it('should set correct alignment', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-card-image position="left"></ifx-card-image>');
const element = await page.find('ifx-card-image');
const alignment = await element.getProperty('position');
expect(alignment).toBe('left');
});
});
//# sourceMappingURL=card.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/card/card.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"card.e2e.js","sourceRoot":"","sources":["../../../src/components/card/card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EAExB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,8CAA8C,CAAC,CAAC;IAEtE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzD,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACvC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mDAAmD,CAAC,CAAC;IAE3E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExD,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACjC,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-card', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card></ifx-card>');\n\n const element = await page.find('ifx-card');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should set correct direction', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card direction=\"horizontal\"></ifx-card>');\n\n const element = await page.find('ifx-card');\n const direction = await element.getProperty('direction');\n\n expect(direction).toBe('horizontal');\n });\n\n it('should set correct alignment', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-card-image position=\"left\"></ifx-card-image>');\n\n const element = await page.find('ifx-card-image');\n const alignment = await element.getProperty('position');\n\n expect(alignment).toBe('left');\n });\n\n});\n"]}

188
Server/wwwroot/package/dist/collection/components/card/card.js vendored Normal file
View File

@ -0,0 +1,188 @@
import { h, Host } from "@stencil/core";
export class Card {
constructor() {
this.noBtns = undefined;
this.direction = 'vertical';
this.alignment = undefined;
this.noImg = undefined;
this.href = "";
this.internalHref = "";
this.target = "_self";
}
setImgPosition(event) {
this.alignment = event.detail;
}
handleComponentAdjustment() {
const image = this.el.querySelector('ifx-card-image');
const links = this.el.querySelector('ifx-card-links');
if (!image) {
this.noImg = true;
}
else
this.noImg = false;
if (!links) {
this.noBtns = true;
}
else
this.noBtns = false;
if (this.href.trim() === "") {
this.internalHref = undefined;
}
else
this.internalHref = this.href;
}
handleClassList(el, type, className) {
el.classList[type](className);
}
handleHovering() {
const card = this.el.shadowRoot.querySelector('.card');
let cardHeadline = this.el.querySelector('ifx-card-headline');
if (this.href) {
card.addEventListener('mouseover', (ev) => {
// const target = ev.target;
// const relatedTarget = ev.relatedTarget;
// if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {
// this.handleClassList(card, 'add', 'borderHovered')
// }
if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {
this.handleClassList(card, 'add', 'linkHovered');
}
else {
this.handleClassList(card, 'add', 'cardHovered');
if (cardHeadline) {
cardHeadline.isHovered = true;
}
}
});
card.addEventListener('mouseout', () => {
if (cardHeadline) {
cardHeadline.isHovered = false;
}
//this.handleClassList(card, 'remove', 'borderHovered')
this.handleClassList(card, 'remove', 'cardHovered');
this.handleClassList(card, 'add', 'linkHovered');
});
}
}
componentWillLoad() {
this.handleComponentAdjustment();
}
componentDidLoad() {
this.handleHovering();
this.addEventListenersToHandleCustomFocusState();
}
addEventListenersToHandleCustomFocusState() {
const element = this.el.shadowRoot;
if (!element) {
console.error('element not found');
return;
}
const upperBodyWrapper = element.querySelector('.upper__body-wrapper');
if (!upperBodyWrapper) {
console.error('upper body wrapper not found');
return;
}
element.tabIndex = -1;
upperBodyWrapper.tabIndex = -1;
}
componentWillUpdate() {
this.handleComponentAdjustment();
}
render() {
return (h(Host, null, h("div", { "aria-labelledby": "label", class: `card
${this.noBtns ? 'noBtns' : ""}
${this.direction}
${this.alignment}` }, this.direction === 'horizontal' &&
h("div", { class: "horizontal" }, h("a", { class: `card-img ${this.noImg ? 'noImage' : ""}`, href: this.internalHref }, h("slot", { name: "img" })), h("div", { class: 'lower__body-wrapper' }, h("a", { class: 'upper-body', href: this.internalHref }, h("slot", null)), h("div", null, h("slot", { name: 'buttons' })))), this.direction === 'vertical' &&
h("div", { class: "vertical" }, h("a", { class: 'upper__body-wrapper', href: this.internalHref, target: this.target }, h("div", { class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { name: "img" })), h("div", { class: 'upper-body' }, h("slot", null))), h("div", { class: 'lower__body-wrapper' }, h("slot", { name: 'buttons' }))))));
}
static get is() { return "ifx-card"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["card.scss"]
};
}
static get styleUrls() {
return {
"$": ["card.css"]
};
}
static get properties() {
return {
"direction": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'horizontal' | 'vertical'",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "direction",
"reflect": false,
"defaultValue": "'vertical'"
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "href",
"reflect": false,
"defaultValue": "\"\""
},
"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 states() {
return {
"noBtns": {},
"alignment": {},
"noImg": {},
"internalHref": {}
};
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "imgPosition",
"method": "setImgPosition",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=card.js.map

1
Server/wwwroot/package/dist/collection/components/card/card.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

118
Server/wwwroot/package/dist/collection/components/card/card.stories.js vendored Normal file
View File

@ -0,0 +1,118 @@
export default {
title: "Components/Card",
tags: ['autodocs'],
args: {
direction: 'vertical',
overline: "Overline",
headline: "Headline",
description: "Some quick example text to build on the card title and make up the bulk of the card's content.",
button: 'button',
href: "",
target: '_blank',
position: 'right',
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
},
argTypes: {
button: {
options: ['button', 'link', 'none'],
control: { type: 'radio' }
},
direction: {
options: ['horizontal', 'vertical'],
control: { type: 'radio' }
},
position: {
options: ['left', 'right'],
control: { type: 'radio' },
if: { arg: 'direction', eq: 'horizontal' }
},
target: {
options: ['_blank', '_self', '_parent'],
control: { type: 'radio' }
}
}
};
const DefaultTemplate = (args) => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
<ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
${args.overline
? `<ifx-card-overline>
${args.overline}
</ifx-card-overline>`
: ""}
${args.headline
? `<ifx-card-headline>
${args.headline}
</ifx-card-headline>`
: ""}
${args.description
? `<ifx-card-text>
${args.description}
</ifx-card-text>` : ""}
${args.button === 'button'
? `<ifx-card-links slot="buttons">
<ifx-button variant="primary">Button</ifx-button>
<ifx-button variant="secondary">Button</ifx-button>
</ifx-card-links>` : ""}
${args.button === 'link'
? `<ifx-card-links slot="buttons">
<ifx-link href="https://google.com" target="_blank">
<ifx-icon icon="calendar16"></ifx-icon>
Link
</ifx-link>
<ifx-link href="https://yahoo.com" target="_blank">
<ifx-icon icon="calendar16"></ifx-icon>
Link
</ifx-link>
</ifx-card-links>` : ""}
</ifx-card>`;
export const Default = DefaultTemplate.bind({});
Default.args = {
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
};
const HorizontalTemplate = (args) => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
<ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
${args.overline
? `<ifx-card-overline>
${args.overline}
</ifx-card-overline>`
: ""}
${args.headline
? `<ifx-card-headline>
${args.headline}
</ifx-card-headline>`
: ""}
${args.description
? `<ifx-card-text>
${args.description}
</ifx-card-text>`
: ""}
${args.button === 'button'
? `<ifx-card-links slot="buttons">
<ifx-button variant="primary">Button</ifx-button>
<ifx-button variant="secondary">Button</ifx-button>
</ifx-card-links>` : ""}
${args.button === 'link'
? `<ifx-card-links slot="buttons">
<ifx-link color="primary" href="https://google.com" target="_blank" underline="false">
<ifx-icon icon="calendar16"></ifx-icon>
Link
</ifx-link>
<ifx-link color="primary" href="https://yahoo.com" target="_blank" underline="false">
<ifx-icon icon="calendar16"></ifx-icon>
Link
</ifx-link>
</ifx-card-links>` : ""}
</ifx-card>`;
export const Horizontal = HorizontalTemplate.bind({});
Horizontal.args = {
direction: 'horizontal',
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
};
Horizontal.argTypes = {
direction: {
table: {
disable: true
}
}
};
//# sourceMappingURL=card.stories.js.map

1
Server/wwwroot/package/dist/collection/components/card/card.stories.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

120
Server/wwwroot/package/dist/collection/components/checkbox/checkbox.css vendored Normal file
View File

@ -0,0 +1,120 @@
:host {
display: inline-flex;
vertical-align: top;
}
.checkbox__container {
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 8px;
font-family: var(--ifx-font-family);
}
.checkbox__container .checkbox__wrapper {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
background-color: #FFFFFF;
border: 1px solid #575352;
border-radius: 1px;
flex: none;
order: 0;
flex-grow: 0;
}
.checkbox__container .checkbox__wrapper.checkbox-m {
height: 24px;
width: 24px;
}
.checkbox__container .checkbox__wrapper.error {
border-color: #CD002F;
}
.checkbox__container .checkbox__wrapper:focus-visible {
border: 1px solid #575352;
outline: 2px solid #0A8276;
outline-offset: 2px;
}
.checkbox__container .checkbox__wrapper:hover {
background-color: #EEEDED;
border: 1px solid #575352;
border-radius: 1px;
flex: none;
order: 0;
flex-grow: 0;
}
.checkbox__container .checkbox__wrapper.disabled {
background-color: #BFBBBB;
border-color: #BFBBBB;
border-radius: 1px;
flex: none;
order: 0;
flex-grow: 0;
}
.checkbox__container .checkbox__wrapper.checked {
background-color: #0A8276;
border-radius: 1px;
border-color: transparent;
flex: none;
order: 0;
flex-grow: 0;
color: #FFFFFF;
}
.checkbox__container .checkbox__wrapper.checked.error {
background-color: #CD002F;
}
.checkbox__container .checkbox__wrapper.checked:focus-visible {
border: 1px solid transparent;
outline: 2px solid #0A8276;
outline-offset: 2px;
}
.checkbox__container .checkbox__wrapper.checked:hover {
background-color: #08665C;
border-radius: 1px;
flex: none;
order: 0;
flex-grow: 0;
}
.checkbox__container .checkbox__wrapper.checked.disabled {
background: #BFBBBB;
border-radius: 1px;
flex: none;
order: 0;
flex-grow: 0;
}
.checkbox__container .checkbox__wrapper.indeterminate:before {
content: "";
display: block;
width: 70%;
height: 2px;
background-color: #08665C;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.checkbox__container .label {
height: 20px;
font-style: normal;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.25rem;
color: #1D1D1D;
flex: none;
order: 1;
flex-grow: 0;
}
.checkbox__container .label.label-m {
height: 24px;
font-size: 1rem;
line-height: 1.5rem;
}
.checkbox__container .label.disabled {
color: #BFBBBB;
}
.checkbox__container .checkbox__wrapper:hover, .checkbox__container .label:hover {
cursor: pointer;
}

30
Server/wwwroot/package/dist/collection/components/checkbox/checkbox.e2e.js vendored Normal file
View File

@ -0,0 +1,30 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-checkbox', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-checkbox></ifx-checkbox>');
const element = await page.find('ifx-checkbox');
expect(element).toHaveClass('hydrated');
});
it('should display slotted content', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-checkbox>Test content</ifx-checkbox>');
const labelContent = await page.evaluate(() => {
const checkbox = document.querySelector('ifx-checkbox');
const slot = checkbox.shadowRoot.querySelector('slot');
const nodes = slot.assignedNodes();
return nodes[0].textContent;
});
expect(labelContent).toBe('Test content');
});
it('should emit ifxChange event when clicked', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-checkbox></ifx-checkbox>');
const checkbox = await page.find('ifx-checkbox');
const ifxChange = await checkbox.spyOnEvent('ifxChange');
const checkboxWrapper = await page.find('ifx-checkbox >>> .checkbox__wrapper');
await checkboxWrapper.click();
expect(ifxChange).toHaveReceivedEvent();
});
});
//# sourceMappingURL=checkbox.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/checkbox/checkbox.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"checkbox.e2e.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;IAEvD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2CAA2C,CAAC,CAAC;IAEnE,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;MACxD,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACvD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;IAC/E,MAAM,eAAe,CAAC,KAAK,EAAE,CAAC;IAE9B,MAAM,CAAC,SAAS,CAAC,CAAC,mBAAmB,EAAE,CAAC;EAC1C,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-checkbox', () => {\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-checkbox></ifx-checkbox>');\n\n const element = await page.find('ifx-checkbox');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-checkbox>Test content</ifx-checkbox>');\n\n const labelContent = await page.evaluate(() => {\n const checkbox = document.querySelector('ifx-checkbox');\n const slot = checkbox.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n });\n\n expect(labelContent).toBe('Test content');\n });\n\n it('should emit ifxChange event when clicked', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-checkbox></ifx-checkbox>');\n\n const checkbox = await page.find('ifx-checkbox');\n const ifxChange = await checkbox.spyOnEvent('ifxChange');\n\n const checkboxWrapper = await page.find('ifx-checkbox >>> .checkbox__wrapper');\n await checkboxWrapper.click();\n\n expect(ifxChange).toHaveReceivedEvent();\n });\n\n});\n"]}

240
Server/wwwroot/package/dist/collection/components/checkbox/checkbox.js vendored Normal file
View File

@ -0,0 +1,240 @@
import { h } from "@stencil/core";
export class Checkbox {
constructor() {
this.disabled = false;
this.value = false;
this.error = false;
this.name = '';
this.size = 'm';
this.internalValue = undefined;
this.indeterminate = false;
this.internalIndeterminate = undefined;
}
handleCheckbox() {
if (!this.disabled) {
if (this.inputElement.indeterminate) {
this.internalValue = true;
this.internalIndeterminate = false;
}
else {
this.internalValue = !this.internalValue;
}
this.ifxChange.emit(this.internalValue);
}
}
valueChanged(newValue, oldValue) {
if (newValue !== oldValue) {
this.internalValue = newValue;
this.inputElement.checked = this.internalValue; // update the checkbox's checked property
}
}
indeterminateChanged(newValue, oldValue) {
if (newValue !== oldValue) {
this.internalIndeterminate = newValue;
this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
}
}
handleKeydown(event) {
// Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key
if (event.keyCode === 32 || event.keyCode === 13) {
this.handleCheckbox();
event.preventDefault(); // prevent the default action when space or enter is pressed
}
}
componentWillLoad() {
this.internalValue = this.value;
this.internalIndeterminate = this.indeterminate;
}
componentDidRender() {
this.inputElement.indeterminate = this.internalIndeterminate;
}
getCheckedClassName() {
if (this.error) {
if (this.internalValue) {
return "checked error";
}
else {
return "error";
}
}
else if (this.internalValue) {
return "checked";
}
else
return "";
}
render() {
const slot = this.el.innerHTML;
let hasSlot = false;
if (slot) {
hasSlot = true;
}
return (h("div", { class: "checkbox__container" }, h("input", { type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), name: this.name, checked: this.internalValue, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.internalValue}` }), h("div", { tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox" // role attribute
,
"aria-value": this.internalValue, "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper
${this.getCheckedClassName()}
${this.size === "m" ? "checkbox-m" : ""}
${this.indeterminate ? 'indeterminate' : ""}
${this.disabled ? 'disabled' : ""}` }, this.internalValue && h("ifx-icon", { icon: "check-12" })), hasSlot &&
h("div", { id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", null))));
}
static get is() { return "ifx-checkbox"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["checkbox.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"value": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false,
"defaultValue": "false"
},
"error": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "error",
"reflect": false,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false,
"defaultValue": "''"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'m'"
},
"indeterminate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "indeterminate",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"internalValue": {},
"internalIndeterminate": {}
};
}
static get events() {
return [{
"method": "ifxChange",
"name": "ifxChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "valueChanged"
}, {
"propName": "indeterminate",
"methodName": "indeterminateChanged"
}];
}
}
//# sourceMappingURL=checkbox.js.map

1
Server/wwwroot/package/dist/collection/components/checkbox/checkbox.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

45
Server/wwwroot/package/dist/collection/components/checkbox/checkbox.stories.js vendored Normal file
View File

@ -0,0 +1,45 @@
import { action } from "@storybook/addon-actions";
export default {
title: "Components/Checkbox",
tags: ['autodocs'],
args: {
error: false,
disabled: false,
value: false,
label: 'Text',
size: 's',
indeterminate: false,
},
argTypes: {
size: {
description: "Size options: s (21px) and m (25px) - default: m",
options: ['s', 'm'],
control: { type: 'radio' },
},
ifxChange: {
action: 'ifxChange',
description: 'Custom event emitted when accordion-item is closed',
table: {
type: {
summary: 'Framework integration',
detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
},
},
}
},
};
const DefaultTemplate = ({ error, disabled, value, indeterminate, size, label }) => {
const checkbox = document.createElement('ifx-checkbox');
checkbox.setAttribute('error', error);
checkbox.setAttribute('disabled', disabled);
checkbox.setAttribute('value', value);
checkbox.setAttribute('size', size);
checkbox.setAttribute('indeterminate', indeterminate);
checkbox.addEventListener('ifxChange', action('ifxChange'));
checkbox.innerHTML = `
${label}
`;
return checkbox;
};
export const Default = DefaultTemplate.bind({});
//# sourceMappingURL=checkbox.stories.js.map

1
Server/wwwroot/package/dist/collection/components/checkbox/checkbox.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,IAAI,EAAE;IACJ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,GAAG;IACT,aAAa,EAAE,KAAK;GACrB;EAED,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;MACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,SAAS,EAAE;MACT,MAAM,EAAE,WAAW;MACnB,WAAW,EAAE,oDAAoD;MACjE,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,iLAAiL;SAC1L;OACF;KACF;GACF;CAEF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,aAAa,EACb,IAAI,EACJ,KAAK,EACN,EAAE,EAAE;EACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;EACxD,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;EACtC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;EAC5C,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;EACtC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;EACpC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;EAEtD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;EAE5D,QAAQ,CAAC,SAAS,GAAG;MACjB,KAAK;GACR,CAAA;EAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,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/Checkbox\",\n tags: ['autodocs'],\n args: {\n error: false,\n disabled: false,\n value: false,\n label: 'Text',\n size: 's',\n indeterminate: false,\n },\n\n argTypes: {\n size: {\n description: \"Size options: s (21px) and m (25px) - default: m\",\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event emitted when accordion-item is closed',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n }\n },\n\n};\n\n\nconst DefaultTemplate = ({\n error,\n disabled,\n value,\n indeterminate,\n size,\n label\n}) => {\n const checkbox = document.createElement('ifx-checkbox');\n checkbox.setAttribute('error', error);\n checkbox.setAttribute('disabled', disabled);\n checkbox.setAttribute('value', value);\n checkbox.setAttribute('size', size);\n checkbox.setAttribute('indeterminate', indeterminate);\n\n checkbox.addEventListener('ifxChange', action('ifxChange'));\n\n checkbox.innerHTML = `\n ${label}\n `\n\n return checkbox;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\n\n"]}

51
Server/wwwroot/package/dist/collection/components/chips/chip.css vendored Normal file
View File

@ -0,0 +1,51 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
display: inline-block;
}
.container {
position: relative;
font-family: var(--ifx-font-family);
}
.container .wrapper {
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 8px 16px;
gap: 8px;
background: #FFFFFF;
border: 1px solid #BFBBBB;
border-radius: 100px;
}
.container .wrapper:hover {
cursor: pointer;
border: 1px solid #575352;
}
.container .wrapper:active {
border: 1px solid #0A8276;
}
.container .wrapper .wrapper-label {
font-style: normal;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.25rem;
display: flex;
align-items: center;
color: #1D1D1D;
flex: none;
order: 0;
flex-grow: 0;
}
.container .wrapper .wrapper-close-button ifx-icon {
transition: 0.3s;
width: 12px;
height: 12px;
}
.container .wrapper .wrapper-close-button.show ifx-icon {
transition: 0.3s;
transform: rotate(-180deg);
}

16
Server/wwwroot/package/dist/collection/components/chips/chip.e2e.js vendored Normal file
View File

@ -0,0 +1,16 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-chip', () => {
it('renders correctly with default props', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-chip placeholder="Select an option"><ifx-dropdown-menu></ifx-dropdown-menu></ifx-chip>');
const chip = await page.find('ifx-chip');
const chipContainer = await chip.find('.dropdown.container');
const wrapperLabel = await chip.find('.wrapper-label');
const wrapperCloseButton = await chip.find('.wrapper-close-button');
expect(chip).toHaveClass('hydrated');
expect(chipContainer).toBeDefined();
expect(wrapperLabel).toBeDefined();
expect(wrapperCloseButton).toBeDefined();
});
});
//# sourceMappingURL=chip.e2e.js.map

1
Server/wwwroot/package/dist/collection/components/chips/chip.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"chip.e2e.js","sourceRoot":"","sources":["../../../src/components/chips/chip.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6FAA6F,CAAC,CAAC;IAErH,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACvD,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAEpE,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,EAAE,CAAC;IACpC,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;IACnC,MAAM,CAAC,kBAAkB,CAAC,CAAC,WAAW,EAAE,CAAC;EAC3C,CAAC,CAAC,CAAC;AAGL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-chip', () => {\n it('renders correctly with default props', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-chip placeholder=\"Select an option\"><ifx-dropdown-menu></ifx-dropdown-menu></ifx-chip>');\n\n const chip = await page.find('ifx-chip');\n const chipContainer = await chip.find('.dropdown.container');\n const wrapperLabel = await chip.find('.wrapper-label');\n const wrapperCloseButton = await chip.find('.wrapper-close-button');\n\n expect(chip).toHaveClass('hydrated');\n expect(chipContainer).toBeDefined();\n expect(wrapperLabel).toBeDefined();\n expect(wrapperCloseButton).toBeDefined();\n });\n\n\n});\n"]}

116
Server/wwwroot/package/dist/collection/components/chips/chip.js vendored Normal file
View File

@ -0,0 +1,116 @@
import { h } from "@stencil/core";
export class Chip {
constructor() {
this.placeholder = undefined;
this.selectedValue = "";
}
handleOutsideClick(event) {
const path = event.composedPath();
if (!path.includes(this.el)) {
this.closedMenu();
}
}
handleDropdownItemValueEmission(event) {
this.selectedValue = event.detail;
this.ifxDropdownMenu.emit(event.detail);
this.toggleMenu();
}
getDropdownMenu() {
let dropdownMenuComponent = this.el.querySelector('ifx-dropdown-menu');
return dropdownMenuComponent;
}
closedMenu() {
let dropdownMenuComponent = this.getDropdownMenu();
dropdownMenuComponent.isOpen = false;
}
toggleMenu() {
let dropdownMenuComponent = this.getDropdownMenu();
dropdownMenuComponent.isOpen = !dropdownMenuComponent.isOpen;
this.toggleCloseIcon();
}
toggleCloseIcon() {
const closeIconWrapper = this.el.shadowRoot.querySelector('.wrapper-close-button');
closeIconWrapper.classList.toggle('show');
}
render() {
return (h("div", { "aria-value": this.selectedValue, "aria-label": 'chip with a dropdown menu', class: "dropdown container" }, h("div", { class: "wrapper", onClick: () => this.toggleMenu() }, h("div", { class: "wrapper-label" }, this.selectedValue ? this.selectedValue : this.placeholder), h("div", { class: "wrapper-close-button" }, h("ifx-icon", { icon: "chevrondown12" }))), h("slot", { name: "menu" })));
}
static get is() { return "ifx-chip"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["chip.scss"]
};
}
static get styleUrls() {
return {
"$": ["chip.css"]
};
}
static get properties() {
return {
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder",
"reflect": false
}
};
}
static get states() {
return {
"selectedValue": {}
};
}
static get events() {
return [{
"method": "ifxDropdownMenu",
"name": "ifxDropdownMenu",
"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"; }
static get listeners() {
return [{
"name": "mousedown",
"method": "handleOutsideClick",
"target": "document",
"capture": false,
"passive": true
}, {
"name": "ifxDropdownItem",
"method": "handleDropdownItemValueEmission",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=chip.js.map

1
Server/wwwroot/package/dist/collection/components/chips/chip.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chips/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,IAAI;;;yBAGkB,EAAE;;EAInC,kBAAkB,CAAC,KAAiB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;MAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;EACH,CAAC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;IAClC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,CAAC,UAAU,EAAE,CAAA;EACnB,CAAC;EAED,eAAe;IACb,IAAI,qBAAqB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvE,OAAO,qBAAqB,CAAA;EAC9B,CAAC;EAED,UAAU;IACR,IAAI,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAClD,qBAAqB,CAAC,MAAM,GAAG,KAAK,CAAC;EACvC,CAAC;EAED,UAAU;IACR,IAAI,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAClD,qBAAqB,CAAC,MAAM,GAAG,CAAC,qBAAqB,CAAC,MAAM,CAAC;IAC7D,IAAI,CAAC,eAAe,EAAE,CAAA;EACxB,CAAC;EAED,eAAe;IACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAA;IAClF,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;EAC3C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,yBAAiB,IAAI,CAAC,aAAa,gBAAa,2BAA2B,EAAC,KAAK,EAAC,oBAAoB;MACpG,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;QACnD,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CACvD;QACN,WAAK,KAAK,EAAC,sBAAsB;UAC/B,gBAAU,IAAI,EAAC,eAAe,GAAY,CACtC,CACF;MACN,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Listen, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-chip',\n styleUrl: 'chip.scss',\n shadow: true\n})\n\nexport class Chip {\n @Element() el;\n @Prop() placeholder: string;\n @State() selectedValue: string = \"\";\n @Event() ifxDropdownMenu: EventEmitter<CustomEvent>;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closedMenu();\n }\n }\n\n @Listen('ifxDropdownItem')\n handleDropdownItemValueEmission(event: CustomEvent) {\n this.selectedValue = event.detail;\n this.ifxDropdownMenu.emit(event.detail);\n this.toggleMenu()\n }\n\n getDropdownMenu() { \n let dropdownMenuComponent = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenuComponent\n }\n\n closedMenu() {\n let dropdownMenuComponent = this.getDropdownMenu()\n dropdownMenuComponent.isOpen = false;\n }\n\n toggleMenu() { \n let dropdownMenuComponent = this.getDropdownMenu()\n dropdownMenuComponent.isOpen = !dropdownMenuComponent.isOpen;\n this.toggleCloseIcon()\n }\n\n toggleCloseIcon() { \n const closeIconWrapper = this.el.shadowRoot.querySelector('.wrapper-close-button')\n closeIconWrapper.classList.toggle('show')\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='chip with a dropdown menu' class=\"dropdown container\">\n <div class=\"wrapper\" onClick={() => this.toggleMenu()}>\n <div class=\"wrapper-label\">\n {this.selectedValue ? this.selectedValue : this.placeholder}\n </div>\n <div class=\"wrapper-close-button\">\n <ifx-icon icon=\"chevrondown12\"></ifx-icon>\n </div>\n </div>\n <slot name=\"menu\" />\n </div>\n );\n }\n}"]}

38
Server/wwwroot/package/dist/collection/components/chips/chip.stories.js vendored Normal file
View File

@ -0,0 +1,38 @@
import { action } from "@storybook/addon-actions";
export default {
title: "Components/Chip",
tags: ['autodocs'],
args: {
placeholder: 'Placeholder',
},
argTypes: {
ifxDropdownMenu: {
action: 'ifxDropdownMenu',
description: 'Custom event emitted when menu item selected',
table: {
type: {
summary: 'Framework integration',
detail: 'React: onIfxDropdownMenu={handleChange}\nVue:@ifxDropdownMenu="handleChange"\nAngular:(ifxDropdownMenu)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenu", (event) => {//handle change});',
},
},
}
},
};
const DefaultTemplate = (args) => {
const wrapper = document.createElement('div');
wrapper.innerHTML = `<ifx-chip placeholder="${args.placeholder}">
<ifx-dropdown-menu size="m" slot="menu">
<ifx-dropdown-item icon="" target="_self" href="">Menu Item 1</ifx-dropdown-item>
<ifx-dropdown-item icon="" target="_self" href="">Menu Item 2</ifx-dropdown-item>
<ifx-dropdown-item icon="" target="_self" href="">Menu Item 3</ifx-dropdown-item>
<ifx-dropdown-item icon="" target="_self" href="">Menu Item 4</ifx-dropdown-item>
<ifx-dropdown-item icon="" target="_self" href="">Menu Item 5</ifx-dropdown-item>
</ifx-dropdown-menu>
</ifx-chip>`;
const chip = wrapper.querySelector('ifx-chip');
const dropdownMenu = chip.querySelector('ifx-dropdown-menu');
dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
return wrapper;
};
export const Default = DefaultTemplate.bind({});
//# sourceMappingURL=chip.stories.js.map

1
Server/wwwroot/package/dist/collection/components/chips/chip.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chips/chip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,WAAW,EAAE,aAAa;GAC3B;EACD,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,MAAM,EAAE,iBAAiB;MACzB,WAAW,EAAE,8CAA8C;MAC3D,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,yMAAyM;SAClN;OACF;KACF;GACF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE;EAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC9C,OAAO,CAAC,SAAS,GAAG,0BAA0B,IAAI,CAAC,WAAW;;;;;;;;YAQpD,CAAC;EAEX,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,UAAU,CAAgB,CAAC;EAC9D,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;EAE7D,YAAY,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC;EACpF,OAAO,OAAO,CAAC;AACjB,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/Chip\",\n tags: ['autodocs'],\n\n args: {\n placeholder: 'Placeholder',\n },\n argTypes: {\n ifxDropdownMenu: {\n action: 'ifxDropdownMenu',\n description: 'Custom event emitted when menu item selected',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxDropdownMenu={handleChange}\\nVue:@ifxDropdownMenu=\"handleChange\"\\nAngular:(ifxDropdownMenu)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenu\", (event) => {//handle change});',\n },\n },\n }\n },\n};\n\n\nconst DefaultTemplate = (args) => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-chip placeholder=\"${args.placeholder}\">\n <ifx-dropdown-menu size=\"m\" slot=\"menu\">\n <ifx-dropdown-item icon=\"\" target=\"_self\" href=\"\">Menu Item 1</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"\" target=\"_self\" href=\"\">Menu Item 2</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"\" target=\"_self\" href=\"\">Menu Item 3</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"\" target=\"_self\" href=\"\">Menu Item 4</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"\" target=\"_self\" href=\"\">Menu Item 5</ifx-dropdown-item>\n</ifx-dropdown-menu>\n</ifx-chip>`;\n\n const chip = wrapper.querySelector('ifx-chip') as HTMLElement;\n const dropdownMenu = chip.querySelector('ifx-dropdown-menu');\n\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n return wrapper;\n}\n\nexport const Default = DefaultTemplate.bind({});\n\n\n"]}

2
Server/wwwroot/package/dist/collection/components/dropdown/IOpenable.js vendored Normal file
View File

@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=IOpenable.js.map

1
Server/wwwroot/package/dist/collection/components/dropdown/IOpenable.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"IOpenable.js","sourceRoot":"","sources":["../../../src/components/dropdown/IOpenable.ts"],"names":[],"mappings":"","sourcesContent":["// IOpenable.ts\nexport interface IOpenable {\n isOpen: boolean;\n}"]}

23
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-header/dropdown-header.css vendored Normal file
View File

@ -0,0 +1,23 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
.dropdown-header {
display: flex;
padding: 8px 16px;
align-items: center;
gap: 8px;
align-self: stretch;
border-bottom: 1px solid #EEEDED;
font-family: var(--ifx-font-family);
}
.dropdown-header span {
color: #575352;
font-family: var(--ifx-font-family);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
/* 142.857% */
}

20
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-header/dropdown-header.js vendored Normal file
View File

@ -0,0 +1,20 @@
// dropdown-separator.tsx
import { h } from "@stencil/core";
export class DropdownHeader {
render() {
return (h("div", { class: 'dropdown-header' }, h("span", null, h("slot", null))));
}
static get is() { return "ifx-dropdown-header"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["dropdown-header.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown-header.css"]
};
}
}
//# sourceMappingURL=dropdown-header.js.map

1
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-header/dropdown-header.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-header/dropdown-header.tsx"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,cAAc;EACzB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB;MAC1B;QACE,eAAQ,CACH,CACH,CACP,CAAA;EACH,CAAC;;;;;;;;;CACF","sourcesContent":["// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-header',\n styleUrl: 'dropdown-header.scss',\n shadow: true\n})\n\nexport class DropdownHeader {\n render() {\n return (\n <div class='dropdown-header'>\n <span>\n <slot />\n </span>\n </div>\n )\n }\n}"]}

39
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-item/dropdown-item.css vendored Normal file
View File

@ -0,0 +1,39 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
.dropdown-item {
text-decoration: none;
color: #1D1D1D;
display: flex;
align-items: center;
padding: 8px 16px;
gap: 8px;
font-family: var(--ifx-font-family);
}
.dropdown-item.hide {
display: none;
}
.dropdown-item span {
color: #1D1D1D;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
/* 150% */
}
.dropdown-item.small span {
font-size: 14px;
}
.dropdown-item:hover {
cursor: pointer;
background-color: #EEEDED;
}
.dropdown-item:active {
background-color: #BFBBBB;
}
.icon {
margin-right: 4px;
}

142
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-item/dropdown-item.js vendored Normal file
View File

@ -0,0 +1,142 @@
// dropdown-item.tsx
import { h } from "@stencil/core";
export class DropdownItem {
constructor() {
this.icon = undefined;
this.href = "";
this.target = "_self";
this.hide = false;
this.size = 'l';
}
handleMenuSize(event) {
this.size = event.detail;
}
handleEventEmission() {
this.ifxDropdownItem.emit(this.el.textContent);
}
render() {
let hrefAttr = this.href ? { href: this.href, target: this.target } : {};
return (h("a", Object.assign({}, hrefAttr, { onClick: () => this.handleEventEmission(), class: `dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""}` }), this.icon && h("ifx-icon", { class: "icon", icon: this.icon }), h("span", null, h("slot", null))));
}
static get is() { return "ifx-dropdown-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["dropdown-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown-item.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
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "href",
"reflect": false,
"defaultValue": "\"\""
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "target",
"reflect": false,
"defaultValue": "\"_self\""
},
"hide": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"size": {}
};
}
static get events() {
return [{
"method": "ifxDropdownItem",
"name": "ifxDropdownItem",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "menuSize",
"method": "handleMenuSize",
"target": "body",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=dropdown-item.js.map

1
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-item/dropdown-item.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;;;gBAEA,EAAE;kBACA,OAAO;gBACR,KAAK;gBACL,GAAG;;EAK3B,cAAc,CAAC,KAAkB;IAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;EAC3B,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;EAChD,CAAC;EAED,MAAM;IACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,OAAO,CACL,yBAAO,QAAQ,IAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MAC9I,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;MACjE;QACE,eAAQ,CACH,CACL,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-item',\n styleUrl: 'dropdown-item.scss',\n shadow: true\n})\n\nexport class DropdownItem {\n @Prop() icon: string;\n @Prop() href: string = \"\"\n @Prop() target: string = \"_self\"\n @Prop() hide: boolean = false;\n @State() size: string = 'l'\n @Event() ifxDropdownItem: EventEmitter;\n @Element() el;\n\n @Listen('menuSize', { target: 'body' })\n handleMenuSize(event: CustomEvent) {\n this.size = event.detail;\n }\n\n handleEventEmission() {\n this.ifxDropdownItem.emit(this.el.textContent)\n }\n\n render() {\n let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n return (\n <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n <span>\n <slot />\n </span>\n </a>\n );\n }\n}"]}

32
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.css vendored Normal file
View File

@ -0,0 +1,32 @@
:host {
position: relative;
z-index: 1000;
}
.dropdown-menu {
display: none;
visibility: hidden;
flex-direction: column;
width: 224px;
max-height: 289px;
min-width: 224px;
overflow-y: auto;
background: #FFFFFF;
box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);
border: 1px solid #EEEDED;
padding: 8px 0px;
font-family: var(--ifx-font-family);
}
.dropdown-menu.small {
max-height: 266px;
max-width: 186px;
overflow-y: auto;
}
.dropdown-menu.hideTopPadding {
padding-top: 0px;
}
.dropdown-menu.show {
display: flex;
visibility: visible;
}

164
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js vendored Normal file
View File

@ -0,0 +1,164 @@
// dropdown-menu.tsx
import { h } from "@stencil/core";
export class DropdownMenu {
constructor() {
this.isOpen = false;
this.size = 'l';
this.hideTopPadding = false;
this.filteredItems = [];
}
handleMenuFilter(event) {
const searchValue = event.detail;
this.filterDropdownItems(searchValue);
}
handleDropdownItemValueEmission(event) {
this.ifxDropdownMenuItem.emit(event.detail);
}
filterDropdownItems(searchValue) {
const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
let dropdownItem, txtValue;
let query = searchValue.toUpperCase();
for (let i = 0; i < allItems.length; i++) {
dropdownItem = allItems[i];
txtValue = dropdownItem.textContent || dropdownItem.innerText;
if (txtValue.toUpperCase().indexOf(query) > -1) {
dropdownItem.setAttribute('hide', false);
}
else {
dropdownItem.setAttribute('hide', true);
}
}
}
componentWillUpdate() {
this.menuSize.emit(this.size);
}
componentWillLoad() {
this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
const searchField = this.el.querySelector('ifx-search-field');
const dropdownHeader = this.el.querySelector('ifx-dropdown-header');
if (searchField || dropdownHeader) {
this.hideTopPadding = true;
}
else
this.hideTopPadding = false;
}
render() {
return (h("div", { class: `dropdown-menu
${this.isOpen ? 'show' : ''}
${this.hideTopPadding ? 'hideTopPadding' : ""}
${this.size === 's' ? 'small' : ""}` }, h("slot", null)));
}
static get is() { return "ifx-dropdown-menu"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["dropdown-menu.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown-menu.css"]
};
}
static get properties() {
return {
"isOpen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "is-open",
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'l'"
}
};
}
static get states() {
return {
"hideTopPadding": {},
"filteredItems": {}
};
}
static get events() {
return [{
"method": "menuSize",
"name": "menuSize",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "ifxDropdownMenuItem",
"name": "ifxDropdownMenuItem",
"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"; }
static get listeners() {
return [{
"name": "ifxInput",
"method": "handleMenuFilter",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "ifxDropdownItem",
"method": "handleDropdownItemValueEmission",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=dropdown-menu.js.map

1
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;;kBACG,KAAK;gBACR,GAAG;0BACS,KAAK;yBAIe,EAAE;;EAIzD,gBAAgB,CAAC,KAAkB;IACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;EACvC,CAAC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;EAC7C,CAAC;EAED,mBAAmB,CAAC,WAAmB;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;IAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;IAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;MAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;MAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;QAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;OACzC;WAAM;QACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;OACxC;KACF;EACH,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC/B,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;IAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;MACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;;MAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;EACrC,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;QACzB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;MAElC,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// dropdown-menu.tsx\nimport { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-menu',\n styleUrl: 'dropdown-menu.scss',\n shadow: true\n})\n\nexport class DropdownMenu {\n @Prop() isOpen: boolean = false;\n @Prop() size: string = 'l'\n @State() hideTopPadding: boolean = false;\n @Element() el;\n\n @Event() menuSize: EventEmitter;\n @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n @Listen('ifxInput')\n handleMenuFilter(event: CustomEvent) {\n const searchValue = event.detail;\n this.filterDropdownItems(searchValue)\n }\n\n @Listen('ifxDropdownItem')\n handleDropdownItemValueEmission(event: CustomEvent) {\n this.ifxDropdownMenuItem.emit(event.detail)\n }\n\n filterDropdownItems(searchValue: string) {\n const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n let dropdownItem, txtValue;\n let query = searchValue.toUpperCase()\n\n for (let i = 0; i < allItems.length; i++) {\n dropdownItem = allItems[i];\n txtValue = dropdownItem.textContent || dropdownItem.innerText;\n\n if (txtValue.toUpperCase().indexOf(query) > -1) {\n dropdownItem.setAttribute('hide', false)\n } else {\n dropdownItem.setAttribute('hide', true)\n }\n }\n }\n\n componentWillUpdate() {\n this.menuSize.emit(this.size)\n }\n\n componentWillLoad() {\n this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n const searchField = this.el.querySelector('ifx-search-field')\n const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n if (searchField || dropdownHeader) {\n this.hideTopPadding = true;\n } else this.hideTopPadding = false;\n }\n\n\n render() {\n return (\n <div class={`dropdown-menu \n ${this.isOpen ? 'show' : ''} \n ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n ${this.size === 's' ? 'small' : \"\"}`\n } >\n <slot />\n </div >\n );\n }\n}"]}

5
Server/wwwroot/package/dist/collection/components/dropdown/dropdown-seperator/dropdown-separator.css vendored Normal file
View File

@ -0,0 +1,5 @@
.dropdown-separator {
height: 1px;
background-color: #EEEDED;
margin: 8px 16px;
}

Some files were not shown because too many files have changed in this diff Show More