npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.3--canary.1685.d4f6fa41532c053d6dd83a5a287820d5cf74b243.0 → 30.9.3--canary.1692.59c40bb497f09acb42590b3e54cb7f4190ece08f.0 - Mend

@infineon/infineon-design-system-stencil 30.9.3--canary.1685.d4f6fa41532c053d6dd83a5a287820d5cf74b243.0 → 30.9.3--canary.1692.59c40bb497f09acb42590b3e54cb7f4190ece08f.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.

Files changed (814) hide show

package/dist/collection/components/accordion/accordionItem.js.map CHANGED Viewed

	@@ -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,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,gBAAgB~~;IAL7B;QASK~~,~~SAAI,GAAY,~~KAAK~~,CAAC~~;~~QACjB~~,~~aAAQ,GAAG,~~CAAC~~,CAAC~~;~~QACZ~~,~~iBAAY,GAAY,~~KAAK,~~CAAC;KAmGxC;IA7FC,~~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","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLive = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxItemOpen: EventEmitter;\n @Event() ifxItemClose: EventEmitter;\n private contentEl!: 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.ifxItemOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxItemClose.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 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'>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLive) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-12\"/>\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}"]}
1	+ {"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLive = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxItemOpen: EventEmitter;\n @Event() ifxItemClose: EventEmitter;\n private contentEl!: 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.ifxItemOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxItemClose.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 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'>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLive) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-12\"/>\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}"]}

package/dist/collection/components/alert/alert.js CHANGED Viewed

@@ -1,9 +1,6 @@
 import { h } from "@stencil/core";
 export class Alert {
     constructor() {
-        this.variant = 'primary';
-        this.closable = true;
-        this.AriaLive = 'assertive';
         this.alertTypeDescription = {
             "primary": 'Neutral alert',
             "success": 'Success Alert',
@@ -11,6 +8,11 @@ export class Alert {
             "warning": 'Warning Alert',
             "info": 'Neutral alert',
         };
+        this.variant = 'primary';
+        this.icon = undefined;
+        this.closable = true;
+        this.AriaLive = 'assertive';
+        this.uniqueId = undefined;
     }
     handleClose() {
         this.ifxClose.emit();

package/dist/collection/components/alert/alert.js.map CHANGED Viewed

	@@ -1 +1 @@
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,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,KAAK~~;IALlB;QAMU~~,~~YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,~~yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;~~KAqDH~~;~~IAnDC~~,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAED,iBAAiB;QACf,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe;gBACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,CACP,CAAC;IACJ,CAAC;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACnE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAC/B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B;YAC/K,WAAK,KAAK,EAAC,oBAAoB;gBAC7B,WAAK,KAAK,EAAC,wBAAwB;oBACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB;gBACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B;oBAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF;YACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAC5C,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO;YAC9C,IAAI,CAAC,IAAI,IAAI,CACZ,WAAK,KAAK,EAAC,cAAc;gBACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP;YACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE;gBACvD,eAAQ,CACJ;YACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAC5C,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\n @Prop() variant: 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n @Prop() AriaLive = 'assertive';\n @State() uniqueId: string;\n\n alertTypeDescription = {\n \"primary\": 'Neutral alert',\n \"success\": 'Success Alert',\n \"danger\": 'Error Alert',\n \"warning\": 'Warning Alert',\n \"info\": 'Neutral alert',\n };\n\n handleClose() {\n this.ifxClose.emit();\n }\n\n renderCloseButton() {\n return (\n <div class=\"close-icon-wrapper\">\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n <ifx-icon icon=\"cross-16\" />\n </button>\n </div>\n );\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('alert');\n }\n }\n\n render() {\n return this.variant === 'info' ? (\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n <div class=\"info__text-wrapper\">\n <div class=\"info__headline-wrapper\">\n <slot name=\"headline\" />\n </div>\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n <slot name=\"desc\" />\n </div>\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n ) : (\n <div class={`alert ${this.variant}`} role=\"alert\">\n {this.icon && (\n <div class=\"icon-wrapper\">\n <ifx-icon icon={this.icon} />\n </div>\n )}\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n <slot />\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n );\n }\n}\n"]}
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,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,KAAK;;QAQhB,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;uBAbuE,SAAS;;wBAGtD,IAAI;wBACb,WAAW;;;IAW9B,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAED,iBAAiB;QACf,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe;gBACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,CACP,CAAC;IACJ,CAAC;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACnE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAC/B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B;YAC/K,WAAK,KAAK,EAAC,oBAAoB;gBAC7B,WAAK,KAAK,EAAC,wBAAwB;oBACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB;gBACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B;oBAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF;YACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAC5C,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO;YAC9C,IAAI,CAAC,IAAI,IAAI,CACZ,WAAK,KAAK,EAAC,cAAc;gBACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP;YACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE;gBACvD,eAAQ,CACJ;YACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAC5C,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\n @Prop() variant: 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n @Prop() AriaLive = 'assertive';\n @State() uniqueId: string;\n\n alertTypeDescription = {\n \"primary\": 'Neutral alert',\n \"success\": 'Success Alert',\n \"danger\": 'Error Alert',\n \"warning\": 'Warning Alert',\n \"info\": 'Neutral alert',\n };\n\n handleClose() {\n this.ifxClose.emit();\n }\n\n renderCloseButton() {\n return (\n <div class=\"close-icon-wrapper\">\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n <ifx-icon icon=\"cross-16\" />\n </button>\n </div>\n );\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('alert');\n }\n }\n\n render() {\n return this.variant === 'info' ? (\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n <div class=\"info__text-wrapper\">\n <div class=\"info__headline-wrapper\">\n <slot name=\"headline\" />\n </div>\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n <slot name=\"desc\" />\n </div>\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n ) : (\n <div class={`alert ${this.variant}`} role=\"alert\">\n {this.icon && (\n <div class=\"icon-wrapper\">\n <ifx-icon icon={this.icon} />\n </div>\n )}\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n <slot />\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 export class BreadcrumbItemLabel {
     constructor() {
+        this.icon = undefined;
+        this.url = undefined;
         this.target = "_self";
     }
     componentDidLoad() {

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map CHANGED Viewed

	@@ -1 +1 @@
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~~;IALhC;QAQU~~,~~WAAM,GAAW,~~OAAO,~~CAAA;KAuBjC;IAnBC,~~gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YACzF,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,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\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"]}
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;;;;sBAGL,OAAO;;IAIhC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YACzF,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,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\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 export class BreadcrumbItem {
     constructor() {
         this.isLastItem = false;
+        this.uniqueId = undefined;
         this.hasDropdownMenu = false;
     }
     handleOutsideClick(event) {

package/dist/collection/components/breadcrumb/breadcrumb-item.js.map CHANGED Viewed

	@@ -1 +1 @@
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~~;IAL3B;QAOW~~,~~eAAU,GAAY,~~KAAK,~~CAAC;QAI5B,oBAAe,GAAY,~~KAAK,~~CAAC;KA0H3C;IAvHC,~~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","sourcesContent":["import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\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 @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\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 if(this.hasDropdownMenu) {\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\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\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\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\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 generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \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' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\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 @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\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 if(this.hasDropdownMenu) {\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\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\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\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\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 generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \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' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"]}

package/dist/collection/components/button/button.js CHANGED Viewed

@@ -2,13 +2,6 @@ import { h, Host } from "@stencil/core";
 import classNames from "classnames";
 export class Button {
     constructor() {
-        this.variant = 'primary';
-        this.theme = 'default';
-        this.size = 'm';
-        this.disabled = false;
-        this.target = '_self';
-        this.type = "button";
-        this.fullWidth = false;
         this.handleClick = (ev) => {
             if (this.el.shadowRoot) {
                 const parentForm = this.el.closest('form');
@@ -31,6 +24,16 @@ export class Button {
                 }
             }
         };
+        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;
+        this.AriaLabel = undefined;
     }
     setInternalHref(newValue) {
         this.internalHref = newValue;

package/dist/collection/components/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChG,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,MAAM,OAAO,MAAM~~;IALnB;QAMU~~,~~YAAO,GAAyC,SAAS,CAAC;QAC1D,UAAK,GAAqC,SAAS,CAAC;QACpD,SAAI,GAAW,GAAG,CAAC;QACnB,aAAQ,GAAY,KAAK,CAAC;QAG1B,WAAM,GAAW,OAAO,CAAC;QACzB,SAAI,GAAkC,QAAQ,CAAC;QAC/C,cAAS,GAAY,KAAK,CAAC;QAqDnC,~~gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;gBACvB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBAC3C,IAAI,UAAU,EAAE,CAAC;oBACf,EAAE,CAAC,cAAc,EAAE,CAAC;oBAEpB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;wBAC1B,uEAAuE;wBACvE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,mDAAmD;oBAC/E,CAAC;yBAAM,CAAC;wBACN,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;wBACpD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;4BACd,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;wBAC9B,CAAC;wBACD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;wBAClC,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;wBACnC,UAAU,CAAC,KAAK,EAAE,CAAC;wBACnB,UAAU,CAAC,MAAM,EAAE,CAAC;oBACtB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAA;~~KAoFF~~;~~IAtJC~~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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() AriaLabel: string;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.AriaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"]}
1	+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() AriaLabel: string;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.AriaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"]}

package/dist/collection/components/card/card-headline/card-headline.js CHANGED Viewed

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
 export class CardHeadline {
+    constructor() {
+        this.direction = undefined;
+        this.hasDesc = undefined;
+    }
     componentWillLoad() {
         var _a;
         const cardElement = this.el.closest('ifx-card');

package/dist/collection/components/card/card-headline/card-headline.js.map CHANGED Viewed

	@@ -1 +1 @@
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,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,YAAY;IAKvB,iBAAiB;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;YAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;YAC/B,CAAC;YAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;YACpE,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,EAAE;gBAC3C,8DAAQ,CACJ,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State } 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\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}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"]}
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,MAAM,eAAe,CAAC;AAQ7D,MAAM,OAAO,YAAY;;;;;IAKvB,iBAAiB;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;YAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;YAC/B,CAAC;YAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;YACpE,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,EAAE;gBAC3C,8DAAQ,CACJ,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State } 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\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}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"]}

package/dist/collection/components/card/card-image/card-image.js CHANGED Viewed

@@ -1,5 +1,10 @@
 import { h } from "@stencil/core";
 export class CardImage {
+    constructor() {
+        this.src = undefined;
+        this.alt = undefined;
+        this.position = undefined;
+    }
     handlePosition(position) {
         this.imgPosition.emit(position);
     }

package/dist/collection/components/card/card-image/card-image.js.map CHANGED Viewed

	@@ -1 +1 @@
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;IAMpB,cAAc,CAAC,QAAQ;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,CACzD,CAAC;IACJ,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"]}
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;;;;;;IAMpB,cAAc,CAAC,QAAQ;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACjC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,CACzD,CAAC;IACJ,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"]}

package/dist/collection/components/card/card-text/card-text.js CHANGED Viewed

@@ -1,5 +1,8 @@
 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');

package/dist/collection/components/card/card-text/card-text.js.map CHANGED Viewed

	@@ -1 +1 @@
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;IAInB,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACvE,IAAG,IAAI,IAAI,MAAM,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7D,4DAAK,KAAK,EAAE,WAAW;gBACrB,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,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"]}
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;;;;IAInB,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACvE,IAAG,IAAI,IAAI,MAAM,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7D,4DAAK,KAAK,EAAE,WAAW;gBACrB,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,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"]}

package/dist/collection/components/card/card.js CHANGED Viewed

@@ -1,10 +1,14 @@
 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";
+        this.AriaLabel = undefined;
     }
     setImgPosition(event) {
         this.alignment = event.detail;

package/dist/collection/components/card/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,IAAI~~;IANjB;QASU~~,~~cAAS,GAA8B,~~UAAU,~~CAAC;QAGlD,SAAI,GAAW,~~EAAE~~,CAAC~~;~~QACjB~~,~~iBAAY,GAAW,~~EAAE~~,CAAA~~;~~QAC1B~~,~~WAAM,GAAW,~~OAAO,~~CAAC;KAqFlC;IAjFC,~~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","sourcesContent":["import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\"\n @Prop() target: string = \"_self\";\n @Prop() AriaLabel: string;\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href.trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\nrender() {\n return (\n <Host>\n <div aria-label={this.AriaLabel} class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }\n role=\"region\">\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\"\n @Prop() target: string = \"_self\";\n @Prop() AriaLabel: string;\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href.trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\nrender() {\n return (\n <Host>\n <div aria-label={this.AriaLabel} class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }\n role=\"region\">\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"]}

package/dist/collection/components/checkbox/checkbox.js CHANGED Viewed

@@ -6,6 +6,9 @@ export class Checkbox {
         this.error = false;
         this.size = 'm';
         this.indeterminate = false;
+        this.value = undefined;
+        this.internalChecked = undefined;
+        this.internalIndeterminate = undefined;
     }
     handleCheckbox() {
         if (!this.disabled) {

package/dist/collection/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUxH,MAAM,OAAO,QAAQ~~;IAPrB;QAWU~~,~~aAAQ,GAAY,~~KAAK~~,CAAC~~;~~QAC1B~~,~~YAAO,GAAY,~~KAAK~~,CAAC~~;~~QACzB~~,~~UAAK,GAAY,~~KAAK~~,CAAC~~;~~QACvB~~,~~SAAI,GAAW,~~GAAG~~,CAAC~~;~~QACnB~~,~~kBAAa,GAAY,~~KAAK,~~CAAC;KA4IxC;IAnIC,~~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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() checked: boolean = false;\n @Prop() error: boolean = false;\n @Prop() size: string = 'm';\n @Prop() indeterminate: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean;\n @State() internalIndeterminate: boolean;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (this.inputElement.indeterminate) {\n this.internalChecked = true;\n this.internalIndeterminate = false;\n } else {\n this.internalChecked = !this.internalChecked;\n }\n \n if (this.internalChecked) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n this.ifxChange.emit(this.internalChecked);\n }\n }\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n @Method()\n async toggleCheckedState(newVal: boolean) {\n this.internalChecked = newVal;\n }\n\n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n }\n }\n\n\n @Watch('indeterminate')\n indeterminateChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalIndeterminate = newValue;\n this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n }\n }\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 \|\| event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n this.internalIndeterminate = this.indeterminate;\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.internalIndeterminate;\n }\n\n\n /*\n Callback for form association.\n * Called whenever the form is reset.\n */\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalChecked) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalChecked) {\n return \"checked\";\n } else return \"\"\n }\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n\n if (slot) {\n hasSlot = true;\n }\n\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n checked={this.internalChecked}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.value}`}\n disabled={this.disabled ? true : undefined}\n />\n\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalChecked && <ifx-icon icon=\"check-12\" aria-hidden=\"true\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() checked: boolean = false;\n @Prop() error: boolean = false;\n @Prop() size: string = 'm';\n @Prop() indeterminate: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean;\n @State() internalIndeterminate: boolean;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (this.inputElement.indeterminate) {\n this.internalChecked = true;\n this.internalIndeterminate = false;\n } else {\n this.internalChecked = !this.internalChecked;\n }\n \n if (this.internalChecked) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n this.ifxChange.emit(this.internalChecked);\n }\n }\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n @Method()\n async toggleCheckedState(newVal: boolean) {\n this.internalChecked = newVal;\n }\n\n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n }\n }\n\n\n @Watch('indeterminate')\n indeterminateChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalIndeterminate = newValue;\n this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n }\n }\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 \|\| event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n this.internalIndeterminate = this.indeterminate;\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.internalIndeterminate;\n }\n\n\n /*\n Callback for form association.\n * Called whenever the form is reset.\n */\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalChecked) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalChecked) {\n return \"checked\";\n } else return \"\"\n }\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n\n if (slot) {\n hasSlot = true;\n }\n\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n checked={this.internalChecked}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.value}`}\n disabled={this.disabled ? true : undefined}\n />\n\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalChecked && <ifx-icon icon=\"check-12\" aria-hidden=\"true\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/chip/chip-item/chip-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,MAAM,EACN,IAAI,EACJ,KAAK,EAAE,MAAM,eAAe,CAAC;AASjC,MAAM,OAAO,QAAQ~~;IANrB;QAWQ~~,~~UAAK,GAAW,~~SAAS~~,CAAC~~;~~QAC1B~~,~~cAAS,GAAc,~~EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE~~,CAAC~~;~~QACxD~~,~~aAAQ,GAAY,~~KAAK,~~CAAC;KA4FjE;IAzFD,~~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","sourcesContent":["import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. /\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n / Do not emit if ChipState does not allow. /\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n / Propogating the selected state to the Chip (Parent) component if it is set. /\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/ Checkbox; renders only in 'multi' variant. /}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/ Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"]}
1	+ {"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. /\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n / Do not emit if ChipState does not allow. /\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n / Propogating the selected state to the Chip (Parent) component if it is set. /\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/ Checkbox; renders only in 'multi' variant. /}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/ Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"]}

package/dist/collection/components/chip/chip.js CHANGED Viewed

@@ -6,6 +6,7 @@ export class Chip {
         this.value = undefined;
         this.variant = 'single';
         this.readOnly = false;
+        this.AriaLabel = undefined;
         this.opened = false;
         this.selectedOptions = [];
     }

package/dist/collection/components/chip/chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,IAAI;IALjB;QASU,gBAAW,GAAW,EAAE,CAAC;QACzB,SAAI,GAAsB,OAAO,CAAC;QACjB,UAAK,GAA2B,SAAS,CAAC;QAC3D,YAAO,GAAuB,QAAQ,CAAC;QACvC,aAAQ,GAAY,KAAK,CAAC;QAGzB,WAAM,GAAY,KAAK,CAAC;QACxB,oBAAe,GAA+B,EAAE,CAAC;KA+V3D;IA5VC,iBAAiB,CAAC,QAAgC;QAChD,IAAI,CAAC,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,2BAA2B,CAAC,KAAiB;QAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,WAAW,GAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACtF,MAAM,YAAY,GAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACxF,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC/E,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,8FAA8F;QAC9F,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;QAED,IAAK,KAAK,CAAC,MAAsB,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YACzD,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;aAAM,IAAK,KAAK,CAAC,MAAsB,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;YACrE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAGD,qBAAqB,CAAC,KAAuC;QAC3D,MAAM,WAAW,GAAwB,KAAK,CAAC,MAAM,CAAC;QACtD,MAAM,iBAAiB,GAA+B,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;QAEhF,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAC;gBACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,MAAM,SAAS,GAAa,IAAI,CAAC,YAAY,EAAE,CAAC;gBAChD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAgC,EAAE,EAAE;oBACrD,IAAI,QAAQ,CAAC,QAAQ,IAAI,QAAQ,KAAK,KAAK,CAAC,MAAM,EAAE,CAAC;wBACnD,QAAQ,CAAC,SAAS,mCACb,QAAQ,CAAC,SAAS,KACrB,qBAAqB,EAAE,KAAK,GAC7B,CAAC;wBACF,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;oBAC5B,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,eAAe,GAAG,CAAC,WAAW,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;QACnF,CAAC;aAAM,CAAC;YACN,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAC;gBACzB,4BAA4B;gBAC5B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC7E,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;gBAChE,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC;YACrG,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAClE,CAAC;QAED,IAAI,WAAW,CAAC,iBAAiB,EAAE,CAAC;YAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,iBAAiB,EAAE,iBAAiB;gBACpC,gBAAgB,EAAE,IAAI,CAAC,eAAe;gBACtC,IAAI,EAAE,IAAI,CAAC,WAAW;aACvB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,YAAY;QACV,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACrD,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACnE,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjF,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACH,eAAe,CAAC,QAAgB,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,SAAS,GAAa,IAAI,CAAC,YAAY,EAAE,CAAC;QAChD,IAAI,IAA4B,CAAC;QAEjC,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAA2B,CAAC;QACxE,CAAC;aAAM,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC;YAClD,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAA2B,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,kBAAkB,KAAK,EAAE,CAAC,CAAC;YACzC,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;QACjF,IAAI,UAAU,EAAE,CAAC;YACf,mDAAmD;YACnD,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;IACH,CAAC;IAED,SAAS;QACP,MAAM,WAAW,GAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACtF,WAAW,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAED,yBAAyB,CAAC,KAAiB;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,IAAI,iBAAiB,GAAG,KAAK,CAAC;QAC9B,MAAM,SAAS,GAAa,IAAI,CAAC,YAAY,EAAE,CAAC;QAChD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAgC,EAAE,EAAE;YACrD,IAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACtB,iBAAiB,GAAG,IAAI,CAAC;gBACzB,QAAQ,CAAC,SAAS,mCACb,QAAQ,CAAC,SAAS,KACrB,qBAAqB,EAAE,KAAK,GAC7B,CAAA;gBACD,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,0DAA0D;QAC1D,IAAI,iBAAiB,EAAE,CAAC;YACtB,MAAM,iBAAiB,GAA+B,IAAI,CAAC,eAAe,CAAC;YAC3E,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,iBAAiB,EAAE,iBAAiB;gBACpC,gBAAgB,EAAE,EAAE;gBACpB,IAAI,EAAE,IAAI,CAAC,WAAW;aACvB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,oBAAoB,CAAC,KAAoB;QACvC,6FAA6F;QAC7F,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;gBACnB,KAAK,OAAO,CAAC;gBACb,KAAK,OAAO,CAAC;gBACb,KAAK,WAAW;oBACd,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;oBACxB,MAAM;gBACR,KAAK,SAAS;oBACZ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;oBACzB,MAAM;YACV,CAAC;QACH,CAAC;aAAM,CAAC;YACN,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;gBACnB,KAAK,QAAQ;oBACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;oBACpB,IAAI,CAAC,SAAS,EAAE,CAAC;oBACjB,MAAM;YACV,CAAC;QACH,CAAC;IACH,CAAC;IAED,qBAAqB,CAAC,KAAoB;QACxC,IAAI,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpC,IAAI,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,MAAgC,CAAC,CAAC;QACxF,IAAI,WAAW,KAAK,CAAC,CAAC,EAAE,CAAC;YACvB,OAAO,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,WAAW;gBACd,IAAI,WAAW,KAAK,SAAS,CAAC,MAAM,GAAG,CAAC;oBAAE,MAAM;gBAChD,IAAI,CAAC,eAAe,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;gBACtC,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,WAAW,KAAK,CAAC;oBAAE,MAAM;gBAC7B,IAAI,CAAC,eAAe,CAAE,WAAW,GAAG,CAAC,CAAC,CAAC;gBACvC,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,MAAM;YACR,KAAK,OAAO;gBACV,kDAAkD;gBAClD,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;oBAC9B,uCAAuC;oBACvC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;oBACpB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,CAAC;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,kDAAkD;gBAClD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,MAAM;QACR,CAAC;IACH,CAAC;IAEH,aAAa;QACX,MAAM,SAAS,GAAa,IAAI,CAAC,YAAY,EAAE,CAAC;QAChD,IAAI,GAAG,GAAW,CAAC,CAAC;QACpB,SAAS,CAAC,OAAO,CAAC,CAAC,QAAgC,EAAE,EAAE;YACrD,QAAQ,CAAC,SAAS,GAAG;gBACnB,qBAAqB,EAAE,IAAI;gBAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;gBACjD,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;gBACxD,GAAG,EAAE,GAAG,EAAE;aACX,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B,CAAC,QAAgC;QAC1D,6BAA6B;QAC7B,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;QAE1B,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE;YACxB,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,OAAO,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC,CAAC,EAAE,CAAC;QAEL,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;gBAC5C,KAAK;gBACL,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,IAAI;gBACd,GAAG,EAAE,WAAW,EAAE;gBAClB,iBAAiB,EAAE,IAAI;aACxB,CAAC,CAAC,CAAC;QACN,CAAC;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,CAAC;oBACtB,KAAK,EAAE,QAAQ;oBACf,KAAK,EAAE,QAAQ;oBACf,QAAQ,EAAE,IAAI;oBACd,GAAG,EAAE,WAAW,EAAE;oBAClB,iBAAiB,EAAE,IAAI;iBACxB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,MAAM;YACf,4DAAK,KAAK,EAAE,gCAAgC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;mCAC1D,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;oBAC5D,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;oBAC5D,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,EACxE,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACzE,IAAI,EAAC,UAAU,gBACH,IAAI,CAAC,SAAS,gBACd,IAAI,CAAC,kBAAkB,EAAE,mBACtB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACtC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,mBACnD,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,mBACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,0BAC3B,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;gBAGnE,4DAAK,KAAK,EAAC,gBAAgB;oBAEvB,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;oBAI5D,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,WAAW,KAAK,EAAE,CAAC;wBAC7G,GAAG,IAAI,CAAC,WAAW,GAAG;oBAItB,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,CAAC;wBACnC,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,kBAAkB,EAAE,CACtB;oBAIN,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;wBAC7D;;4BAAyB,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;gCAAyB,CAErF;gBAGJ,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;oBAC/G,4DAAK,KAAK,EAAC,sBAAsB;wBAC/B,gBAAU,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,GAAI,CACvC;gBAKN,CAAC,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;oBACxF,4DAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAA,CAAC,CAAC;wBACzF,gBAAU,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,GAAI,CACjC;gBAIN,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;oBAChE,4DAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAA,CAAC,CAAC;wBACzF,gBAAU,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,GAAI,CACjC,CAGJ;YAGJ,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAC7B,4DAAK,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB;oBACtD,8DAAQ,CACJ,CAEJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n tag: 'ifx-chip',\n styleUrl: 'chip.scss',\n shadow: true\n})\nexport class Chip {\n @Element() chip: HTMLIfxChipElement;\n\n @Event() ifxChipChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n @Prop() placeholder: string = '';\n @Prop() size: 'small' \| 'large' = 'large';\n @Prop({ mutable: true }) value: Array<string> \| string = undefined;\n @Prop() variant: 'single' \| 'multi' = 'single';\n @Prop() readOnly: boolean = false;\n @Prop() AriaLabel: string;\n\n @State() opened: boolean = false;\n @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n @Watch('value')\n handleValueChange(newValue: Array<string> \| string) {\n this.syncSelectedOptionsWithProp(newValue);\n }\n\n @Watch('readOnly')\n handleReadOnlyChange(newValue: boolean) {\n if (newValue) {\n this.opened = false;\n }\n }\n\n @Listen('mousedown', { target: 'document' })\n closeDropdownOnOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n this.toggleDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n // override behavior of all keys except Tab. Users should be able to tab out of the component.\n if (event.code !== 'Tab') {\n event.preventDefault(); \n }\n\n if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n this.handleWrapperKeyDown(event);\n } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n this.handleDropdownKeyDown(event);\n }\n }\n\n @Listen('ifxChipItemSelect')\n updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n const eventDetail: ChipItemSelectEvent = event.detail;\n const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n if (this.variant !== 'multi') {\n if (eventDetail.selected) {\n this.opened = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected && chipItem !== event.target) {\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n };\n chipItem.selected = false;\n }\n });\n this.selectedOptions = [eventDetail];\n } else {\n this.selectedOptions = [];\n }\n this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n } else {\n if (eventDetail.selected) {\n // Prevent duplicate entries\n if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n this.selectedOptions = [...this.selectedOptions, eventDetail];\n }\n } else {\n this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n }\n this.value = this.selectedOptions.map((option) => option.value);\n }\n\n if (eventDetail.emitIfxChipChange) {\n this.ifxChipChange.emit({\n previousSelection: previousSelection,\n currentSelection: this.selectedOptions,\n name: this.placeholder\n });\n }\n }\n\n getChipItems(): NodeList {\n return this.chip.querySelectorAll('ifx-chip-item');\n }\n\n getSelectedOptions(): string {\n if (this.variant !== 'multi') {\n return this.selectedOptions.map(option => option.label).join('');\n }\n return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n }\n\n toggleDropdownMenu() {\n if (this.readOnly) return;\n this.opened = !this.opened;\n }\n\n /*\n Focuses the chip item at the specified index.\n * @param index the index of the chip item to focus. -1 will focus the last chip item.\n /\n focusChipItemAt(index: number = 0) {\n this.opened = true;\n const chipItems: NodeList = this.getChipItems();\n let item: HTMLIfxChipItemElement;\n \n if (index === -1) {\n item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n } else if (index >= 0 && index < chipItems.length) {\n item = chipItems.item(index) as HTMLIfxChipItemElement;\n } else {\n console.error(`Invalid index: ${index}`);\n return;\n }\n\n const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n if (shadowItem) {\n // Delay needed for the shadow item to be rendered.\n setTimeout(() => {\n shadowItem.focus();\n }, 1);\n }\n }\n\n focusChip() {\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n chipWrapper.focus();\n }\n\n handleUnselectButtonClick(event: MouseEvent) {\n event.stopPropagation();\n this.opened = false;\n\n let itemGotUnselected = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected) {\n itemGotUnselected = true;\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n }\n chipItem.selected = false;\n }\n });\n\n / Emit event only if at least one item was unselected. */\n if (itemGotUnselected) {\n const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n this.selectedOptions = [];\n this.value = [];\n this.ifxChipChange.emit({\n previousSelection: previousSelection,\n currentSelection: [],\n name: this.placeholder\n });\n }\n }\n\n handleWrapperClick() {\n if (!this.readOnly) {\n this.toggleDropdownMenu();\n }\n }\n\n handleWrapperKeyDown(event: KeyboardEvent) {\n // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n if (this.readOnly) return;\n\n if (!this.opened) {\n switch (event.code) {\n case 'Space':\n case 'Enter':\n case 'ArrowDown':\n this.focusChipItemAt(0);\n break;\n case 'ArrowUp':\n this.focusChipItemAt(-1);\n break;\n }\n } else {\n switch (event.code) {\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n }\n\n handleDropdownKeyDown(event: KeyboardEvent) {\n let chipitems = this.getChipItems();\n\n let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n if (targetIndex === -1) {\n console.error('Target not found in chip items');\n return;\n }\n\n switch (event.code) {\n case 'ArrowDown':\n if (targetIndex === chipitems.length - 1) break;\n this.focusChipItemAt(targetIndex + 1);\n break;\n case 'ArrowUp':\n if (targetIndex === 0) break;\n this.focusChipItemAt( targetIndex - 1);\n break;\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n case 'Space':\n // selection is handled by the chip-item component\n if (this.variant === 'single') {\n // only close dropdown if single select\n this.opened = false;\n this.focusChip();\n }\n break;\n case 'Enter':\n // selection is handled by the chip-item component\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n\n syncChipState() {\n const chipItems: NodeList = this.getChipItems();\n let key: number = 0;\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n chipItem.chipState = {\n emitIfxChipItemSelect: true,\n size: (this.size === 'small' ? 'small' : 'large'),\n variant: (this.variant === 'multi' ? 'multi' : 'single'),\n key: key++\n };\n });\n }\n\n syncSelectedOptionsWithProp(newValue: Array<string> \| string) {\n // Clear old selected options\n this.selectedOptions = [];\n\n const generateKey = (() => {\n let count = 0;\n return () => count++;\n })();\n\n if (Array.isArray(newValue)) {\n this.selectedOptions = newValue.map(value => ({\n value,\n label: value,\n selected: true,\n key: generateKey(),\n emitIfxChipChange: true\n }));\n } else if (typeof newValue === 'string') {\n this.selectedOptions = [{\n value: newValue,\n label: newValue,\n selected: true,\n key: generateKey(),\n emitIfxChipChange: true\n }];\n }\n\n this.syncChipState();\n }\n\n componentWillLoad() {\n this.syncSelectedOptionsWithProp(this.value);\n }\n\n render() {\n return (\n <div class='chip'>\n <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n tabIndex={0}\n onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n role='combobox'\n aria-label={this.AriaLabel}\n aria-value={this.getSelectedOptions()}\n aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n aria-controls={!this.readOnly ? 'dropdown' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n >\n\n <div class='wrapper__label'>\n {\n (this.selectedOptions.length === 0) && `${this.placeholder}`\n }\n\n {\n (this.selectedOptions.length !== 0 && (this.variant === 'multi' \|\| this.readOnly) && this.placeholder !== '') &&\n `${this.placeholder}:`\n }\n\n {\n (this.selectedOptions.length !== 0) &&\n <div class='label__selected-options'>\n {this.getSelectedOptions()}\n </div>\n }\n\n {\n (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n <ifx-number-indicator> {`+${this.selectedOptions.length - 2}`} </ifx-number-indicator>\n }\n </div>\n\n {\n !this.readOnly && (this.variant !== 'multi' \|\| (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n <div class='wrapper__open-button'>\n <ifx-icon key={1} icon={`chevrondown16`} />\n </div>\n }\n\n\n { \n (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n {\n ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n </div>\n\n {\n this.opened && !this.readOnly &&\n <div id='dropdown' role='listbox' class='chip__dropdown'>\n <slot />\n </div>\n }\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n tag: 'ifx-chip',\n styleUrl: 'chip.scss',\n shadow: true\n})\nexport class Chip {\n @Element() chip: HTMLIfxChipElement;\n\n @Event() ifxChipChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n @Prop() placeholder: string = '';\n @Prop() size: 'small' \| 'large' = 'large';\n @Prop({ mutable: true }) value: Array<string> \| string = undefined;\n @Prop() variant: 'single' \| 'multi' = 'single';\n @Prop() readOnly: boolean = false;\n @Prop() AriaLabel: string;\n\n @State() opened: boolean = false;\n @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n @Watch('value')\n handleValueChange(newValue: Array<string> \| string) {\n this.syncSelectedOptionsWithProp(newValue);\n }\n\n @Watch('readOnly')\n handleReadOnlyChange(newValue: boolean) {\n if (newValue) {\n this.opened = false;\n }\n }\n\n @Listen('mousedown', { target: 'document' })\n closeDropdownOnOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n this.toggleDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n // override behavior of all keys except Tab. Users should be able to tab out of the component.\n if (event.code !== 'Tab') {\n event.preventDefault(); \n }\n\n if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n this.handleWrapperKeyDown(event);\n } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n this.handleDropdownKeyDown(event);\n }\n }\n\n @Listen('ifxChipItemSelect')\n updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n const eventDetail: ChipItemSelectEvent = event.detail;\n const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n if (this.variant !== 'multi') {\n if (eventDetail.selected) {\n this.opened = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected && chipItem !== event.target) {\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n };\n chipItem.selected = false;\n }\n });\n this.selectedOptions = [eventDetail];\n } else {\n this.selectedOptions = [];\n }\n this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n } else {\n if (eventDetail.selected) {\n // Prevent duplicate entries\n if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n this.selectedOptions = [...this.selectedOptions, eventDetail];\n }\n } else {\n this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n }\n this.value = this.selectedOptions.map((option) => option.value);\n }\n\n if (eventDetail.emitIfxChipChange) {\n this.ifxChipChange.emit({\n previousSelection: previousSelection,\n currentSelection: this.selectedOptions,\n name: this.placeholder\n });\n }\n }\n\n getChipItems(): NodeList {\n return this.chip.querySelectorAll('ifx-chip-item');\n }\n\n getSelectedOptions(): string {\n if (this.variant !== 'multi') {\n return this.selectedOptions.map(option => option.label).join('');\n }\n return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n }\n\n toggleDropdownMenu() {\n if (this.readOnly) return;\n this.opened = !this.opened;\n }\n\n /*\n Focuses the chip item at the specified index.\n * @param index the index of the chip item to focus. -1 will focus the last chip item.\n /\n focusChipItemAt(index: number = 0) {\n this.opened = true;\n const chipItems: NodeList = this.getChipItems();\n let item: HTMLIfxChipItemElement;\n \n if (index === -1) {\n item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n } else if (index >= 0 && index < chipItems.length) {\n item = chipItems.item(index) as HTMLIfxChipItemElement;\n } else {\n console.error(`Invalid index: ${index}`);\n return;\n }\n\n const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n if (shadowItem) {\n // Delay needed for the shadow item to be rendered.\n setTimeout(() => {\n shadowItem.focus();\n }, 1);\n }\n }\n\n focusChip() {\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n chipWrapper.focus();\n }\n\n handleUnselectButtonClick(event: MouseEvent) {\n event.stopPropagation();\n this.opened = false;\n\n let itemGotUnselected = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected) {\n itemGotUnselected = true;\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n }\n chipItem.selected = false;\n }\n });\n\n / Emit event only if at least one item was unselected. */\n if (itemGotUnselected) {\n const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n this.selectedOptions = [];\n this.value = [];\n this.ifxChipChange.emit({\n previousSelection: previousSelection,\n currentSelection: [],\n name: this.placeholder\n });\n }\n }\n\n handleWrapperClick() {\n if (!this.readOnly) {\n this.toggleDropdownMenu();\n }\n }\n\n handleWrapperKeyDown(event: KeyboardEvent) {\n // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n if (this.readOnly) return;\n\n if (!this.opened) {\n switch (event.code) {\n case 'Space':\n case 'Enter':\n case 'ArrowDown':\n this.focusChipItemAt(0);\n break;\n case 'ArrowUp':\n this.focusChipItemAt(-1);\n break;\n }\n } else {\n switch (event.code) {\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n }\n\n handleDropdownKeyDown(event: KeyboardEvent) {\n let chipitems = this.getChipItems();\n\n let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n if (targetIndex === -1) {\n console.error('Target not found in chip items');\n return;\n }\n\n switch (event.code) {\n case 'ArrowDown':\n if (targetIndex === chipitems.length - 1) break;\n this.focusChipItemAt(targetIndex + 1);\n break;\n case 'ArrowUp':\n if (targetIndex === 0) break;\n this.focusChipItemAt( targetIndex - 1);\n break;\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n case 'Space':\n // selection is handled by the chip-item component\n if (this.variant === 'single') {\n // only close dropdown if single select\n this.opened = false;\n this.focusChip();\n }\n break;\n case 'Enter':\n // selection is handled by the chip-item component\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n\n syncChipState() {\n const chipItems: NodeList = this.getChipItems();\n let key: number = 0;\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n chipItem.chipState = {\n emitIfxChipItemSelect: true,\n size: (this.size === 'small' ? 'small' : 'large'),\n variant: (this.variant === 'multi' ? 'multi' : 'single'),\n key: key++\n };\n });\n }\n\n syncSelectedOptionsWithProp(newValue: Array<string> \| string) {\n // Clear old selected options\n this.selectedOptions = [];\n\n const generateKey = (() => {\n let count = 0;\n return () => count++;\n })();\n\n if (Array.isArray(newValue)) {\n this.selectedOptions = newValue.map(value => ({\n value,\n label: value,\n selected: true,\n key: generateKey(),\n emitIfxChipChange: true\n }));\n } else if (typeof newValue === 'string') {\n this.selectedOptions = [{\n value: newValue,\n label: newValue,\n selected: true,\n key: generateKey(),\n emitIfxChipChange: true\n }];\n }\n\n this.syncChipState();\n }\n\n componentWillLoad() {\n this.syncSelectedOptionsWithProp(this.value);\n }\n\n render() {\n return (\n <div class='chip'>\n <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n tabIndex={0}\n onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n role='combobox'\n aria-label={this.AriaLabel}\n aria-value={this.getSelectedOptions()}\n aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n aria-controls={!this.readOnly ? 'dropdown' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n >\n\n <div class='wrapper__label'>\n {\n (this.selectedOptions.length === 0) && `${this.placeholder}`\n }\n\n {\n (this.selectedOptions.length !== 0 && (this.variant === 'multi' \|\| this.readOnly) && this.placeholder !== '') &&\n `${this.placeholder}:`\n }\n\n {\n (this.selectedOptions.length !== 0) &&\n <div class='label__selected-options'>\n {this.getSelectedOptions()}\n </div>\n }\n\n {\n (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n <ifx-number-indicator> {`+${this.selectedOptions.length - 2}`} </ifx-number-indicator>\n }\n </div>\n\n {\n !this.readOnly && (this.variant !== 'multi' \|\| (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n <div class='wrapper__open-button'>\n <ifx-icon key={1} icon={`chevrondown16`} />\n </div>\n }\n\n\n { \n (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n {\n ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n </div>\n\n {\n this.opened && !this.readOnly &&\n <div id='dropdown' role='listbox' class='chip__dropdown'>\n <slot />\n </div>\n }\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/content-switcher/content-switcher-item.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 export class ContentSwitcherItem {
     constructor() {
         this.selected = false;
+        this.value = undefined;
     }
     render() {
         return (h(Host, { key: '99244cbfde12465c294ba0ce760731ba6e88c8db' }, h("button", { key: '76e0009bcd1dc452964c03cb10e851321467cec2', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '987a09faed55d3066f1b80740cdbf6b7de571496' }))));

package/dist/collection/components/content-switcher/content-switcher-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"content-switcher-item.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB~~;IALhC;QAMU~~,~~aAAQ,GAAY,~~KAAK,~~CAAC;KAYnC;IATC,~~MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAE,2BAA2B,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC7E,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-content-switcher-item',\n styleUrl: './content-switcher-item.scss',\n shadow: true,\n})\nexport class ContentSwitcherItem {\n @Prop() selected: boolean = false;\n @Prop() value: string;\n\n render() {\n return (\n <Host>\n <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\n <slot></slot>\n </button>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"content-switcher-item.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;;wBACF,KAAK;;;IAGjC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAE,2BAA2B,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC7E,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-content-switcher-item',\n styleUrl: './content-switcher-item.scss',\n shadow: true,\n})\nexport class ContentSwitcherItem {\n @Prop() selected: boolean = false;\n @Prop() value: string;\n\n render() {\n return (\n <Host>\n <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\n <slot></slot>\n </button>\n </Host>\n );\n }\n}\n"]}