@infineon/infineon-design-system-stencil 35.2.1--canary.1915.7ab6592d308edd014242f541701f87632b3f48d5.0 → 35.3.0--canary.1921.e5a0855012d7c07d80effbc06e6a380d4a6e43d9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{icons-2cd72a7d.js → icons-31ab853f.js} +401 -401
- package/dist/cjs/{icons-2cd72a7d.js.map → icons-31ab853f.js.map} +1 -1
- package/dist/cjs/ifx-accordion_2.cjs.entry.js +11 -4
- package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-icon.cjs.entry.js +4 -7
- package/dist/cjs/ifx-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-icons-preview.cjs.entry.js +1 -1
- package/dist/collection/components/accordion/accordionItem.css +2 -5
- package/dist/collection/components/accordion/accordionItem.js +10 -3
- package/dist/collection/components/accordion/accordionItem.js.map +1 -1
- package/dist/collection/components/icon/infineonIconStencil.js +3 -6
- package/dist/collection/components/icon/infineonIconStencil.js.map +1 -1
- package/dist/components/ifx-accordion-item.js +1 -1
- package/dist/components/ifx-alert.js +1 -1
- package/dist/components/ifx-breadcrumb-item-label.js +1 -1
- package/dist/components/ifx-checkbox-group.js +1 -1
- package/dist/components/ifx-checkbox.js +1 -1
- package/dist/components/ifx-chip-item.js +1 -1
- package/dist/components/ifx-chip.js +1 -1
- package/dist/components/ifx-date-picker.js +1 -1
- package/dist/components/ifx-dropdown-item.js +1 -1
- package/dist/components/ifx-dropdown-trigger-button.js +1 -1
- package/dist/components/ifx-faq.js +2 -2
- package/dist/components/ifx-file-upload.js +2 -2
- package/dist/components/ifx-filter-accordion.js +1 -1
- package/dist/components/ifx-filter-bar.js +1 -1
- package/dist/components/ifx-filter-search.js +2 -2
- package/dist/components/ifx-icon-button.js +1 -1
- package/dist/components/ifx-icon.js +1 -1
- package/dist/components/ifx-icons-preview.js +3 -3
- package/dist/components/ifx-list-entry.js +2 -2
- package/dist/components/ifx-list.js +1 -1
- package/dist/components/ifx-modal.js +2 -2
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-navbar-item.js +1 -1
- package/dist/components/ifx-navbar.js +1 -1
- package/dist/components/ifx-notification.js +1 -1
- package/dist/components/ifx-overview-table.js +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-radio-button-group.js +1 -1
- package/dist/components/ifx-search-bar.js +2 -2
- package/dist/components/ifx-search-field.js +1 -1
- package/dist/components/ifx-segment.js +1 -1
- package/dist/components/ifx-segmented-control.js +1 -1
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +5 -5
- package/dist/components/ifx-sidebar-item.js +1 -1
- package/dist/components/ifx-slider.js +1 -1
- package/dist/components/ifx-step.js +1 -1
- package/dist/components/ifx-table.js +7 -7
- package/dist/components/ifx-tabs.js +1 -1
- package/dist/components/ifx-tag.js +1 -1
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +5 -5
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/ifx-tooltip.js +1 -1
- package/dist/components/ifx-tree-view-item.js +2 -2
- package/dist/components/{p-20d6a006.js → p-04049ea6.js} +2 -2
- package/dist/components/{p-20d6a006.js.map → p-04049ea6.js.map} +1 -1
- package/dist/components/{p-de94e49a.js → p-146fb9c8.js} +3 -3
- package/dist/components/{p-de94e49a.js.map → p-146fb9c8.js.map} +1 -1
- package/dist/components/{p-954808e0.js → p-167888ae.js} +4 -4
- package/dist/components/{p-954808e0.js.map → p-167888ae.js.map} +1 -1
- package/dist/components/{p-b6b0d09b.js → p-439f73d9.js} +2 -2
- package/dist/components/{p-b6b0d09b.js.map → p-439f73d9.js.map} +1 -1
- package/dist/components/{p-b22e6b22.js → p-683180dc.js} +2 -2
- package/dist/components/{p-b22e6b22.js.map → p-683180dc.js.map} +1 -1
- package/dist/components/{p-4cf462ca.js → p-7df26dbf.js} +13 -6
- package/dist/components/p-7df26dbf.js.map +1 -0
- package/dist/components/{p-c6dfc658.js → p-8be9bf0f.js} +2 -2
- package/dist/components/{p-c6dfc658.js.map → p-8be9bf0f.js.map} +1 -1
- package/dist/components/{p-12e75dad.js → p-9aa64d29.js} +404 -407
- package/dist/components/p-9aa64d29.js.map +1 -0
- package/dist/components/{p-f0693b44.js → p-9b0e0f3a.js} +2 -2
- package/dist/components/{p-f0693b44.js.map → p-9b0e0f3a.js.map} +1 -1
- package/dist/components/{p-2a500ed7.js → p-a5788f03.js} +3 -3
- package/dist/components/{p-2a500ed7.js.map → p-a5788f03.js.map} +1 -1
- package/dist/components/{p-6c0ec65a.js → p-adba7a0a.js} +2 -2
- package/dist/components/{p-6c0ec65a.js.map → p-adba7a0a.js.map} +1 -1
- package/dist/components/{p-8b5129e0.js → p-c0cbd87d.js} +2 -2
- package/dist/components/{p-8b5129e0.js.map → p-c0cbd87d.js.map} +1 -1
- package/dist/components/{p-f2f58eb1.js → p-ebea4e5c.js} +2 -2
- package/dist/components/{p-f2f58eb1.js.map → p-ebea4e5c.js.map} +1 -1
- package/dist/components/{p-1d3c54d6.js → p-f9edbcf3.js} +3 -3
- package/dist/components/{p-1d3c54d6.js.map → p-f9edbcf3.js.map} +1 -1
- package/dist/esm/{icons-75858876.js → icons-845f859e.js} +401 -401
- package/dist/esm/{icons-75858876.js.map → icons-845f859e.js.map} +1 -1
- package/dist/esm/ifx-accordion_2.entry.js +11 -4
- package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
- package/dist/esm/ifx-icon.entry.js +4 -7
- package/dist/esm/ifx-icon.entry.js.map +1 -1
- package/dist/esm/ifx-icons-preview.entry.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-4d96fed0.js → p-1e2705c8.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-4d96fed0.js.map → p-1e2705c8.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-aaf08082.entry.js → p-54a2b0d7.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-693b4fde.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-693b4fde.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-74bee1c8.entry.js → p-edd379d7.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-edd379d7.entry.js.map +1 -0
- package/package.json +2 -2
- package/dist/components/p-12e75dad.js.map +0 -1
- package/dist/components/p-4cf462ca.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-74bee1c8.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-a356a82d.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-a356a82d.entry.js.map +0 -1
- /package/dist/infineon-design-system-stencil/{p-aaf08082.entry.js.map → p-54a2b0d7.entry.js.map} +0 -0
|
@@ -31,7 +31,7 @@ const Accordion = class {
|
|
|
31
31
|
};
|
|
32
32
|
Accordion.style = IfxAccordionStyle0;
|
|
33
33
|
|
|
34
|
-
const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;
|
|
34
|
+
const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{height:0;transition:height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
|
|
35
35
|
const IfxAccordionItemStyle0 = accordionItemCss;
|
|
36
36
|
|
|
37
37
|
const IfxAccordionItem = class {
|
|
@@ -54,6 +54,7 @@ const IfxAccordionItem = class {
|
|
|
54
54
|
}
|
|
55
55
|
openChanged(newValue) {
|
|
56
56
|
this.internalOpen = newValue;
|
|
57
|
+
this.openAccordionItem();
|
|
57
58
|
}
|
|
58
59
|
toggleOpen() {
|
|
59
60
|
this.internalOpen = !this.internalOpen;
|
|
@@ -64,13 +65,19 @@ const IfxAccordionItem = class {
|
|
|
64
65
|
else {
|
|
65
66
|
this.ifxClose.emit({ isClosed: !this.internalOpen });
|
|
66
67
|
}
|
|
68
|
+
this.openAccordionItem();
|
|
67
69
|
}
|
|
68
70
|
openAccordionItem() {
|
|
69
71
|
if (this.internalOpen) {
|
|
70
|
-
this.contentEl.style.
|
|
72
|
+
this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
|
|
73
|
+
this.contentEl.style.overflow = 'hidden';
|
|
74
|
+
this.contentEl.addEventListener('transitionend', () => {
|
|
75
|
+
this.contentEl.style.overflow = 'visible';
|
|
76
|
+
}, { once: true });
|
|
71
77
|
}
|
|
72
78
|
else {
|
|
73
|
-
this.contentEl.style.
|
|
79
|
+
this.contentEl.style.height = '0';
|
|
80
|
+
this.contentEl.style.overflow = 'hidden';
|
|
74
81
|
}
|
|
75
82
|
}
|
|
76
83
|
handleSlotChange(e) {
|
|
@@ -108,7 +115,7 @@ const IfxAccordionItem = class {
|
|
|
108
115
|
}
|
|
109
116
|
}
|
|
110
117
|
render() {
|
|
111
|
-
return (index.h("div", { key: '
|
|
118
|
+
return (index.h("div", { key: '69613ca6c0f8f924e4789d91a98d409c8029b57a', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: '0bb26905f229dd5b4e5f2aaed93dae957fc5e82d', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, index.h("span", { key: '569dfc34c0eb6559207e28477d1da2cc681e07ab', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: 'cc337ffc523ecb8b5cb486506daa409368821c5f', icon: "chevron-down-16" })), index.h("span", { key: '4bdb8433a77c0670262a797b9c1ed2dba996e40c', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: 'e7108cbaa92d4426e1a4f9bd7304297bf0f4b407', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '4780c7d7a46de589fb1f21f3af177594be310397', class: "inner-content" }, index.h("slot", { key: 'd2e576977c607b21d325d99363fa84ec5da92e24', onSlotchange: (e) => this.handleSlotChange(e) })))));
|
|
112
119
|
}
|
|
113
120
|
get el() { return index.getElement(this); }
|
|
114
121
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n\n @Listen('ifxOpen')\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","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n overflow: hidden;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n\n @Listen('ifxOpen')\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","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n //overflow: hidden;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n height: 0;\n transition: height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n this.openAccordionItem();\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n this.openAccordionItem();\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n this.contentEl.style.overflow = 'hidden';\n this.contentEl.addEventListener('transitionend', () => {\n this.contentEl.style.overflow = 'visible';\n }, { once: true });\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-7f4df11a.js');
|
|
6
|
-
const icons = require('./icons-
|
|
6
|
+
const icons = require('./icons-31ab853f.js');
|
|
7
7
|
|
|
8
8
|
const infineonIconStencilCss = "ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";
|
|
9
9
|
const IfxIconStyle0 = infineonIconStencilCss;
|
|
@@ -73,18 +73,15 @@ const InfineonIconStencil = class {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
setIcon() {
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
.replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase
|
|
79
|
-
const iconName = toCamelCase(this.internalIcon);
|
|
80
|
-
this.ifxIcon = icons.getIcon(iconName);
|
|
76
|
+
const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);
|
|
77
|
+
this.ifxIcon = icons.getIcon(removeHyphen(this.internalIcon));
|
|
81
78
|
}
|
|
82
79
|
componentWillLoad() {
|
|
83
80
|
this.internalIcon = this.icon;
|
|
84
81
|
this.setIcon();
|
|
85
82
|
}
|
|
86
83
|
render() {
|
|
87
|
-
return (index.h(index.Host, { key: '
|
|
84
|
+
return (index.h(index.Host, { key: '7f6ff1ecf4d36c72ce33b220b21e9f140e87f430' }, this.constructIcon()));
|
|
88
85
|
}
|
|
89
86
|
static get watchers() { return {
|
|
90
87
|
"icon": ["updateIcon"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-icon.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,kFAAkF,CAAC;AAClH,sBAAe,sBAAsB;;MCSxB,mBAAmB;IALhC;;;QAM2B,SAAI,GAAW,EAAE,CAAA;
|
|
1
|
+
{"file":"ifx-icon.entry.cjs.js","mappings":"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","names":["h","getIcon","Host"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n display: inline-flex;\n justify-content: center;\n\n &:empty {\n display: none;\n }\n}","import { Component, Prop, h, Host, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n tag: 'ifx-icon',\n styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n @Prop({ mutable: true }) icon: string = \"\"\n @Prop({ mutable: true }) ifxIcon: any;\n @State() internalIcon: string;\n @Event() consoleError: EventEmitter<boolean>;\n\n @Watch('icon')\n updateIcon(newIcon: string) { \n this.internalIcon = newIcon;\n this.setIcon()\n }\n\n convertStringToHtml(htmlString) { \n const div = document.createElement('div')\n div.innerHTML = htmlString\n return div.firstChild\n }\n\n convertHtmlToObject(htmlElement) { \n let pathToObject = Array\n .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n .reduce((acc, current) => {\n acc[current.name] = current.value\n return acc\n }, {})\n\n return pathToObject\n }\n\n convertPathsToVnode(htmlPath) { \n let svgPaths = []\n const parentPath = this.convertHtmlToObject(htmlPath);\n const parentPathToVnode = h(\"path\", parentPath);\n svgPaths.push(parentPathToVnode)\n if(htmlPath.firstChild) { \n const paths = htmlPath.querySelectorAll('path');\n const pathLength = htmlPath.querySelectorAll('path').length;\n for(let i = 0; i < pathLength; i++) { \n let pathToObject = this.convertHtmlToObject(paths[i])\n let objToVnode = h(\"path\", pathToObject)\n svgPaths.push(objToVnode)\n } \n }\n return svgPaths\n }\n\n getSVG(svgPath) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\n const width = htmlPath.getAttribute('width');\n const height = htmlPath.getAttribute('height');\n const fill = htmlPath.getAttribute('fill');\n const viewBox = htmlPath.getAttribute('viewBox');\n \n return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\n }\n\n constructIcon() {\n if(this.ifxIcon) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon)\n const svgPath = this.convertPathsToVnode(htmlPath)\n const SVG = this.getSVG(svgPath)\n return SVG;\n } else if(this.icon !== \"\") {\n console.error('Icon not found!')\n this.consoleError.emit(true)\n return;\n } else { \n return;\n }\n }\n\n setIcon() { \n const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n this.ifxIcon = getIcon(removeHyphen(this.internalIcon));\n }\n\n componentWillLoad() {\n this.internalIcon = this.icon;\n this.setIcon()\n }\n\n render() {\n return (\n <Host>\n {this.constructIcon()}\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-7f4df11a.js');
|
|
6
|
-
const icons = require('./icons-
|
|
6
|
+
const icons = require('./icons-31ab853f.js');
|
|
7
7
|
|
|
8
8
|
const iconsPreviewCss = ".container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:\"Nunito Sans\";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:\"copied!\";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}";
|
|
9
9
|
const IfxIconsPreviewStyle0 = iconsPreviewCss;
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
.accordion-item {
|
|
6
6
|
border-radius: 3px;
|
|
7
|
-
overflow: hidden;
|
|
8
7
|
transition: all 0.3s;
|
|
9
8
|
font-family: var(--ifx-font-family);
|
|
10
9
|
}
|
|
@@ -50,10 +49,8 @@
|
|
|
50
49
|
}
|
|
51
50
|
|
|
52
51
|
.accordion-content {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
overflow: hidden;
|
|
56
|
-
transition: max-height 0.3s ease-in-out;
|
|
52
|
+
height: 0;
|
|
53
|
+
transition: height 0.3s ease-in-out;
|
|
57
54
|
line-height: 24px;
|
|
58
55
|
font-size: 1rem;
|
|
59
56
|
font-weight: 400;
|
|
@@ -17,6 +17,7 @@ export class IfxAccordionItem {
|
|
|
17
17
|
}
|
|
18
18
|
openChanged(newValue) {
|
|
19
19
|
this.internalOpen = newValue;
|
|
20
|
+
this.openAccordionItem();
|
|
20
21
|
}
|
|
21
22
|
toggleOpen() {
|
|
22
23
|
this.internalOpen = !this.internalOpen;
|
|
@@ -27,13 +28,19 @@ export class IfxAccordionItem {
|
|
|
27
28
|
else {
|
|
28
29
|
this.ifxClose.emit({ isClosed: !this.internalOpen });
|
|
29
30
|
}
|
|
31
|
+
this.openAccordionItem();
|
|
30
32
|
}
|
|
31
33
|
openAccordionItem() {
|
|
32
34
|
if (this.internalOpen) {
|
|
33
|
-
this.contentEl.style.
|
|
35
|
+
this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
|
|
36
|
+
this.contentEl.style.overflow = 'hidden';
|
|
37
|
+
this.contentEl.addEventListener('transitionend', () => {
|
|
38
|
+
this.contentEl.style.overflow = 'visible';
|
|
39
|
+
}, { once: true });
|
|
34
40
|
}
|
|
35
41
|
else {
|
|
36
|
-
this.contentEl.style.
|
|
42
|
+
this.contentEl.style.height = '0';
|
|
43
|
+
this.contentEl.style.overflow = 'hidden';
|
|
37
44
|
}
|
|
38
45
|
}
|
|
39
46
|
handleSlotChange(e) {
|
|
@@ -71,7 +78,7 @@ export class IfxAccordionItem {
|
|
|
71
78
|
}
|
|
72
79
|
}
|
|
73
80
|
render() {
|
|
74
|
-
return (h("div", { key: '
|
|
81
|
+
return (h("div", { key: '69613ca6c0f8f924e4789d91a98d409c8029b57a', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '0bb26905f229dd5b4e5f2aaed93dae957fc5e82d', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, h("span", { key: '569dfc34c0eb6559207e28477d1da2cc681e07ab', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: 'cc337ffc523ecb8b5cb486506daa409368821c5f', icon: "chevron-down-16" })), h("span", { key: '4bdb8433a77c0670262a797b9c1ed2dba996e40c', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: 'e7108cbaa92d4426e1a4f9bd7304297bf0f4b407', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '4780c7d7a46de589fb1f21f3af177594be310397', class: "inner-content" }, h("slot", { key: 'd2e576977c607b21d325d99363fa84ec5da92e24', onSlotchange: (e) => this.handleSlotChange(e) })))));
|
|
75
82
|
}
|
|
76
83
|
static get is() { return "ifx-accordion-item"; }
|
|
77
84
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOvG,MAAM,OAAO,gBAAgB;IAL7B;QAUK,SAAI,GAAY,KAAK,CAAC;QACjB,cAAS,GAAG,CAAC,CAAC;QACb,iBAAY,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOvG,MAAM,OAAO,gBAAgB;IAL7B;QAUK,SAAI,GAAY,KAAK,CAAC;QACjB,cAAS,GAAG,CAAC,CAAC;QACb,iBAAY,GAAY,KAAK,CAAC;KAiHxC;IA1GC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;IAChC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAKD,WAAW,CAAC,QAAiB;QAC3B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE9B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACvD,CAAC;QACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACjB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;YACjE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;gBACpD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC5C,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;YAClC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3C,CAAC;IACD,CAAC;IAED,gBAAgB,CAAC,CAAC;QAChB,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;QAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC;QAE1C,IAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE;oBACzD,KAAI,IAAI,QAAQ,IAAI,aAAa,EAAE,CAAC;wBAClC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;4BAClC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gCACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;4BAC3B,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAC/E,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAKD,aAAa,CAAC,EAAiB;QAC7B,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC;QAE/B,IAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;YACf,KAAK,OAAO,CAAC,CAAC,cAAc;YAC5B,KAAK,GAAG,EAAE,QAAQ;gBAChB,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM;QACV,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7D,4DAAK,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,YAAY,mBAAgB,mBAAmB,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC;gBAC3M,4EAAkB,MAAM,EAAC,IAAI,EAAC,SAAS,gBAAa,MAAM,CAAC,IAAI,CAAC,SAAS,CAAW,EAAE,KAAK,EAAC,gBAAgB;oBAC1G,iEAAU,IAAI,EAAC,iBAAiB,GAAE,CAC7B;gBACP,6DAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxE;YACN,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,qBAAiB,mBAAmB;gBACxJ,4DAAK,KAAK,EAAC,eAAe;oBACxB,6DAAM,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACnD,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n this.openAccordionItem();\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n this.openAccordionItem();\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n this.contentEl.style.overflow = 'hidden';\n this.contentEl.addEventListener('transitionend', () => {\n this.contentEl.style.overflow = 'visible';\n }, { once: true });\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"]}
|
|
@@ -63,18 +63,15 @@ export class InfineonIconStencil {
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
setIcon() {
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
.replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase
|
|
69
|
-
const iconName = toCamelCase(this.internalIcon);
|
|
70
|
-
this.ifxIcon = getIcon(iconName);
|
|
66
|
+
const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);
|
|
67
|
+
this.ifxIcon = getIcon(removeHyphen(this.internalIcon));
|
|
71
68
|
}
|
|
72
69
|
componentWillLoad() {
|
|
73
70
|
this.internalIcon = this.icon;
|
|
74
71
|
this.setIcon();
|
|
75
72
|
}
|
|
76
73
|
render() {
|
|
77
|
-
return (h(Host, { key: '
|
|
74
|
+
return (h(Host, { key: '7f6ff1ecf4d36c72ce33b220b21e9f140e87f430' }, this.constructIcon()));
|
|
78
75
|
}
|
|
79
76
|
static get is() { return "ifx-icon"; }
|
|
80
77
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"infineonIconStencil.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AASlD,MAAM,OAAO,mBAAmB;IALhC;QAM2B,SAAI,GAAW,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"infineonIconStencil.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n tag: 'ifx-icon',\n styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n @Prop({ mutable: true }) icon: string = \"\"\n @Prop({ mutable: true }) ifxIcon: any;\n @State() internalIcon: string;\n @Event() consoleError: EventEmitter<boolean>;\n\n @Watch('icon')\n updateIcon(newIcon: string) { \n this.internalIcon = newIcon;\n this.setIcon()\n }\n\n convertStringToHtml(htmlString) { \n const div = document.createElement('div')\n div.innerHTML = htmlString\n return div.firstChild\n }\n\n convertHtmlToObject(htmlElement) { \n let pathToObject = Array\n .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n .reduce((acc, current) => {\n acc[current.name] = current.value\n return acc\n }, {})\n\n return pathToObject\n }\n\n convertPathsToVnode(htmlPath) { \n let svgPaths = []\n const parentPath = this.convertHtmlToObject(htmlPath);\n const parentPathToVnode = h(\"path\", parentPath);\n svgPaths.push(parentPathToVnode)\n if(htmlPath.firstChild) { \n const paths = htmlPath.querySelectorAll('path');\n const pathLength = htmlPath.querySelectorAll('path').length;\n for(let i = 0; i < pathLength; i++) { \n let pathToObject = this.convertHtmlToObject(paths[i])\n let objToVnode = h(\"path\", pathToObject)\n svgPaths.push(objToVnode)\n } \n }\n return svgPaths\n }\n\n getSVG(svgPath) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\n const width = htmlPath.getAttribute('width');\n const height = htmlPath.getAttribute('height');\n const fill = htmlPath.getAttribute('fill');\n const viewBox = htmlPath.getAttribute('viewBox');\n \n return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\n }\n\n constructIcon() {\n if(this.ifxIcon) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon)\n const svgPath = this.convertPathsToVnode(htmlPath)\n const SVG = this.getSVG(svgPath)\n return SVG;\n } else if(this.icon !== \"\") {\n console.error('Icon not found!')\n this.consoleError.emit(true)\n return;\n } else { \n return;\n }\n }\n\n setIcon() { \n const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n this.ifxIcon = getIcon(removeHyphen(this.internalIcon));\n }\n\n componentWillLoad() {\n this.internalIcon = this.icon;\n this.setIcon()\n }\n\n render() {\n return (\n <Host>\n {this.constructIcon()}\n </Host>\n );\n }\n}"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-7df26dbf.js';
|
|
2
2
|
|
|
3
3
|
const IfxAccordionItem = IfxAccordionItem$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-9aa64d29.js';
|
|
3
3
|
|
|
4
4
|
const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, 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)}";
|
|
5
5
|
const IfxBreadcrumbItemLabelStyle0 = breadcrumbItemLabelCss;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-9aa64d29.js';
|
|
3
3
|
|
|
4
4
|
const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem \"Source Sans 3\";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem \"Source Sans 3\";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
|
|
5
5
|
const IfxCheckboxGroupStyle0 = checkboxGroupCss;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-9aa64d29.js';
|
|
3
3
|
|
|
4
4
|
const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
|
|
5
5
|
const IfxDatePickerStyle0 = datePickerCss;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-9aa64d29.js';
|
|
3
3
|
|
|
4
4
|
const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, 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;}.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}";
|
|
5
5
|
const IfxDropdownItemStyle0 = dropdownItemCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
|
|
2
2
|
import { d as defineCustomElement$3 } from './p-17df0350.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-9aa64d29.js';
|
|
4
4
|
|
|
5
5
|
const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
|
|
6
6
|
const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
|
|
2
2
|
import { d as defineCustomElement$4 } from './p-ed739e86.js';
|
|
3
|
-
import { d as defineCustomElement$3 } from './p-
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$3 } from './p-7df26dbf.js';
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-9aa64d29.js';
|
|
5
5
|
|
|
6
6
|
const faqCss = ".container{padding-top:10px}";
|
|
7
7
|
const IfxFaqStyle0 = faqCss;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
2
|
import { d as defineCustomElement$5 } from './p-17df0350.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './p-
|
|
4
|
-
import { d as defineCustomElement$3 } from './p-
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-9aa64d29.js';
|
|
4
|
+
import { d as defineCustomElement$3 } from './p-ebea4e5c.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-5e9d3450.js';
|
|
6
6
|
|
|
7
7
|
const fileUploadCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.file-upload-wrapper.disabled{pointer-events:none}.file-upload-wrapper.disabled label,.file-upload-wrapper.disabled .file-upload-info{color:#575352}.file-upload-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D}.file-upload-label .required{display:inline-block;margin-left:4px}.file-upload-label .required.error{color:#CD002F}.upload-dropzone{border:1px dashed #BFBBBB;padding:40px;text-align:center;cursor:pointer;color:#1D1D1D;transition:border-color 0.3s ease;border-radius:1px;background:#FFFFFF}.upload-dropzone ifx-icon{color:#0A8276}.upload-dropzone:hover{border:1px dashed #8D8786}.upload-dropzone.drag-over{border:1px solid #0A8276;background:#F7F7F7}.upload-dropzone.drag-over.error{border:1px solid #0A8276}.upload-dropzone.error{border-color:#CD002F}.disabled .upload-dropzone{pointer-events:none;border-color:#BFBBBB;color:#BFBBBB}.disabled .upload-dropzone ifx-icon{color:#BFBBBB}.upload-dropzone input{display:none}.file-upload-info{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0em;color:#1D1D1D;margin:0;margin-top:4px}.file-upload-status{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;margin-top:8px}.file-upload-status.file-upload-status__error{display:flex;align-items:center;color:#CD002F}.file-upload-status.file-upload-status__error ifx-icon{position:relative;top:-1px;color:#CD002F;margin-right:8px}.upload-heading{font:600 1.125rem/1.625rem \"Source Sans 3\";margin-bottom:8px}.file-list-wrapper{margin-top:16px}.file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding-top:12px;padding-right:16px;padding-bottom:8px;padding-left:16px;display:flex;gap:8px}.file-info{width:100%;min-width:0}.file-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}.file-top-row ifx-icon{flex-shrink:0}.file-name-wrapper{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;font-weight:400;font-size:0.875rem}.file-name-base{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.file-name-ext{flex-shrink:0;margin-left:0}.file-middle-row{display:flex;align-items:center;font-size:0.75rem;line-height:1rem;flex-wrap:wrap;color:#575352}.file-middle-row .file-status{margin-left:12px}.file-middle-row .file-status ifx-icon{margin-right:8px}.file-progress-row{margin-top:4px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:1px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-9aa64d29.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-9142f93b.js';
|
|
4
4
|
|
|
5
5
|
// utils.ts
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f8e6a4ef.js';
|
|
2
2
|
import { d as defineCustomElement$3 } from './p-17df0350.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-9aa64d29.js';
|
|
4
4
|
|
|
5
5
|
const filterBarCss = ":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";
|
|
6
6
|
const IfxFilterBarStyle0 = filterBarCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-9aa64d29.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-9b0e0f3a.js';
|
|
4
4
|
|
|
5
5
|
const filterSearchCss = ".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}";
|
|
6
6
|
const IfxFilterSearchStyle0 = filterSearchCss;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { i as icons, d as defineCustomElement$5 } from './p-
|
|
2
|
+
import { i as icons, d as defineCustomElement$5 } from './p-9aa64d29.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-53d4339c.js';
|
|
4
|
-
import { d as defineCustomElement$3 } from './p-
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$3 } from './p-04049ea6.js';
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-9b0e0f3a.js';
|
|
6
6
|
|
|
7
7
|
const iconsPreviewCss = ".container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:\"Nunito Sans\";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:\"copied!\";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}";
|
|
8
8
|
const IfxIconsPreviewStyle0 = iconsPreviewCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$4 } from './p-
|
|
3
|
-
import { d as defineCustomElement$3 } from './p-
|
|
2
|
+
import { d as defineCustomElement$4 } from './p-439f73d9.js';
|
|
3
|
+
import { d as defineCustomElement$3 } from './p-9aa64d29.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-357107c5.js';
|
|
5
5
|
|
|
6
6
|
const listEntryCss = ".list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch}";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-9aa64d29.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-53d4339c.js';
|
|
4
4
|
|
|
5
5
|
const listCss = ".link-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-9aa64d29.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-ebea4e5c.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Copy/pasted from https://github.com/andreasbm/focus-trap
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-9aa64d29.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-9142f93b.js';
|
|
4
4
|
|
|
5
5
|
const navbarItemCss = ":host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:\"Source Sans 3\";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:\"Source Sans 3\";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;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)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}";
|