npm - @siemens/ix - Versions diffs - 3.0.0-alpha.4 → 3.0.0 - Mend

@siemens/ix 3.0.0-alpha.4 → 3.0.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 (1093) hide show

package/dist/cjs/ix-card-accordion_2.cjs.entry.js CHANGED Viewed

@@ -15,7 +15,6 @@ const CardAccordion = class {
         this.accordionExpand = index.createEvent(this, "accordionExpand", 7);
         /**
          * Collapse the card
-         * @since 2.1.0
          */
         this.collapse = false;
         this.expandContent = false;
@@ -52,13 +51,13 @@ const CardAccordion = class {
         this.onInitialExpandChange();
     }
     render() {
-        return (index.h(index.Host, { key: '491fb99db65dab3492d23e3122ca9da2c899b232', slot: "card-accordion" }, index.h("button", { key: 'b498d87343ed4e70ef4a094642fc4906b309f5b3', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, index.h("ix-icon", { key: 'eb8b3af0c8ded220c6c8d62b3c9da45ba302c5d6', name: index$1.iconChevronRightSmall, class: {
+        return (index.h(index.Host, { key: '7c185cd6dce5848a156f7cda3e1330e1d044eaf7', slot: "card-accordion" }, index.h("button", { key: 'e69a169703eda0fd0298745c8792a387181f5a55', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, index.h("ix-icon", { key: '69c0621b1014d6a7bdc876d82f6ab14c52018aab', name: index$1.iconChevronRightSmall, class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), index.h("div", { key: '9b0b53385f7b0b7f3365c89e7134869990c6270a', class: {
+            } })), index.h("div", { key: '884b7e0f360ad133ce8a3eb76c32ed34f435135f', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, index.h("div", { key: 'a79520b455e3d344aca02ca70a9b7ff3262c76f8', class: "expand-content-inner" }, index.h("div", { key: 'c0798bb66e28ca6e2a5d6ee38b21222677d5a09a', class: "expand-content-body" }, index.h("slot", { key: '01f775b08d53d8ea428b35d972d75af719006e8c' })), index.h("div", { key: 'df5f62b0667977076557472c5713e30a7840a1a4', class: "expand-content-footer" })))));
+            } }, index.h("div", { key: '6cfc7fccccb7758e3cc73e7eb6c067763b3b4268', class: "expand-content-inner" }, index.h("div", { key: 'fd050651e883930641383c19fa02b49e68c6f7b5', class: "expand-content-body" }, index.h("slot", { key: '7c5fb593f6cb6745a99ad546d840b1044038e288' })), index.h("div", { key: 'ee9bd3cebe0d9c9ea1967fa9f121018ff487a5fb', class: "expand-content-footer" })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -74,7 +73,7 @@ const CardHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0f4e8785e6861fa9151cece5946a7b33e85bd7fd' }, index.h("slot", { key: 'd8909ebe344940cda53d4076ccd1291eb1240f8b' }), index.h("div", { key: 'f87b52b2b467664d6e9d886d358b1c6b5403aae8', class: "title-actions" }, index.h("slot", { key: '9e45b897368e305f0ce1e66b47424360c44c148d', name: "title-actions" }))));
+        return (index.h(index.Host, { key: 'd4531b8777d3c33b0ebede19cbb7b0a57aac530d' }, index.h("slot", { key: '66864059494bc518dae8ebe6cb77d3a33adbf00f' }), index.h("div", { key: 'bf48c597921cf044b83500d1725c740a3ad05b84', class: "title-actions" }, index.h("slot", { key: '628a31f58859cf14f210fade064526e7fd09b517', name: "title-actions" }))));
     }
 };
 CardHeader.style = cardTitleCss;

package/dist/cjs/ix-card-accordion_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-card-accordion.ix-card-title.entry.cjs.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,6tFAA6tF;;ACatvF,IAAI,kBAAkB,GAAG,CAAC;AAC1B,MAAM,iBAAiB,GAAG,CAAC,MAAiB,GAAA,gBAAgB,KAAI;IAC9D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACjD,CAAC;~~MAeY~~,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME~~;;;AAGG~~;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AASf,QAAA,IAAa,CAAA,aAAA,GAAG,KAAK;AA4E/B;IAzEC,qBAAqB,GAAA;AACnB,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ;;AAGrC,IAAA,IAAI,eAAe,GAAA;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC;;AAGtE,IAAA,mBAAmB,CAAC,KAAY,EAAA;QAC9B,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;AACxC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,MAAM,EAAE,IAAI,CAAC,aAAa;AAC1B,YAAA,WAAW,EAAE,KAAK;AACnB,SAAA,CAAC;AAEF,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,6BAA6B,EAAE;;;IAIhC,6BAA6B,GAAA;QACnC,UAAU,CAAC,MAAK;YACd,MAAM,IAAI,GAAG,IAAI,CAAC,eAAgB,CAAC,qBAAqB,EAAE;YAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;AACpC,gBAAA,IAAI,CAAC;AACF,qBAAA,UAAW,CAAC,aAAa,CAAC,iBAAiB;qBAC3C,cAAc,CAAC,KAAK,CAAC;;SAE3B,EAAE,GAAG,CAAC;;IAGT,iBAAiB,GAAA;QACf,IAAI,CAAC,qBAAqB,EAAE;;IAG9B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,EACzBD,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,aAAa,EAClB,eAAA,EAAA,iBAAiB,EAAE,EAAA,EAElCA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAEE,6BAAqB,EAC3B,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,IAAI,EAAE,IAAI,CAAC,aAAa;AACzB,aAAA,EAAA,CACQ,CACJ,EACTF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;gBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;aACzB,EAAA,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,CAAO,CACrC,CACF,CACD;;;;;;;;;~~ACtHb~~,MAAM,YAAY,GAAG,6PAA6P;;~~MCYrQ~~,UAAU,GAAA,MAAA;;;;IACrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD;;;;;;;;","names":["h","Host","iconChevronRightSmall"],"sources":["src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","src/components/card-accordion/card-accordion.tsx","src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","src/components/card-title/card-title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n width: 100%;\n transition: var(--theme-default-time) ease-in-out;\n\n .expand-action {\n all: unset;\n display: flex;\n position: relative;\n\n appearance: button;\n\n height: 2.5rem;\n width: 100%;\n\n background-color: var(--theme-color-component-1);\n align-items: center;\n justify-content: flex-start;\n\n &:hover {\n background: var(--theme-color-component-1--hover);\n }\n\n &:active {\n background: var(--theme-color-component-1--active);\n }\n\n @include focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: var(--theme-btn--focus--outline-offset);\n }\n }\n\n .expand-action::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--ix-card-background);\n z-index: -1;\n }\n\n .expand-action:not(.show),\n .expand-action:not(.show)::before {\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n\n .expand-icon {\n margin-left: 0.5rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .expand-icon.show {\n transform: rotate(90deg);\n }\n\n .expand-content {\n display: grid;\n position: relative;\n grid-template-rows: 0fr;\n transition: var(--theme-default-time) ease-in-out;\n width: 100%;\n max-height: 14.75rem;\n opacity: 0;\n background-color: var(--theme-color-component-1);\n }\n\n .expand-content.show {\n grid-template-rows: 14.75rem;\n opacity: 1;\n }\n\n .expand-content-inner {\n position: relative;\n height: 100%;\n overflow: hidden;\n }\n\n .expand-content.show .expand-content-body {\n display: none;\n overflow: hidden;\n color: var(--theme-color-std-text);\n }\n\n .expand-content.show .expand-content-body {\n display: block;\n overflow: auto;\n height: calc(100% - 1rem);\n }\n\n .expand-content-footer {\n display: block;\n position: relative;\n width: 100%;\n height: 1rem;\n\n margin-top: auto;\n margin-bottom: 0px;\n\n background-color: var(--theme-color-component-1);\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n}\n","import { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n expand: boolean;\n nativeEvent: Event;\n};\n\n/\n @~~since 1.6.0\n /\n@~~Component({\n tag: 'ix-card-accordion',\n styleUrl: 'card-accordion.scss',\n shadow: true,\n})\nexport class CardAccordion {\n /\n Collapse the card\n * @since 2.1.0\n /\n @Prop() collapse = false;\n\n @Element() hostElement!: HTMLIxCardAccordionElement;\n\n /\n @internal\n /\n @Event() accordionExpand!: EventEmitter<CardAccordionExpandChangeEvent>;\n\n @State() expandContent = false;\n\n @Watch('collapse')\n onInitialExpandChange() {\n this.expandContent = !this.collapse;\n }\n\n get expandedContent() {\n return this.hostElement.shadowRoot!.querySelector('.expand-content');\n }\n\n onExpandActionClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.expandContent = !this.expandContent;\n this.accordionExpand.emit({\n expand: this.expandContent,\n nativeEvent: event,\n });\n\n if (this.expandContent) {\n this.scrollExpandedContentIntoView();\n }\n }\n\n private scrollExpandedContentIntoView() {\n setTimeout(() => {\n const rect = this.expandedContent!.getBoundingClientRect();\n if (rect.bottom > window.innerHeight) {\n this.hostElement\n .shadowRoot!.querySelector('.expand-content')!\n .scrollIntoView(false);\n }\n }, 150);\n }\n\n componentWillLoad() {\n this.onInitialExpandChange();\n }\n\n render() {\n return (\n <Host slot=\"card-accordion\">\n <button\n tabIndex={0}\n class={{ 'expand-action': true, show: this.expandContent }}\n onClick={(event) => this.onExpandActionClick(event)}\n role=\"button\"\n type=\"button\"\n aria-expanded={this.expandContent}\n aria-controls={getAriaControlsId()}\n >\n <ix-icon\n name={iconChevronRightSmall}\n class={{\n 'expand-icon': true,\n show: this.expandContent,\n }}\n ></ix-icon>\n </button>\n <div\n class={{\n 'expand-content': true,\n show: this.expandContent,\n }}\n >\n <div class=\"expand-content-inner\">\n <div class=\"expand-content-body\">\n <slot></slot>\n </div>\n <div class=\"expand-content-footer\"></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n","@import 'common-variables';\n\n:host {\n display: flex;\n position: relative;\n flex-direction: row;\n align-items: center;\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n gap: $default-space;\n\n width: 100%;\n\n .title-actions {\n display: flex;\n position: relative;\n flex-direction: row;\n gap: 0.25rem;\n margin-left: auto;\n margin-right: 0;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/\n @slot title-actions - Place additional actions inside title\n \n @since 1.6.0\n */\n@Component({\n tag: 'ix-card-title',\n styleUrl: 'card-title.scss',\n shadow: true,\n})\nexport class CardHeader {\n render() {\n return (\n <Host>\n <slot></slot>\n <div class=\"title-actions\">\n <slot name=\"title-actions\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-card-accordion.ix-card-title.entry.cjs.js","mappings":"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","names":["h","Host","iconChevronRightSmall"],"sources":["src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","src/components/card-accordion/card-accordion.tsx","src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","src/components/card-title/card-title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n width: 100%;\n transition: var(--theme-default-time) ease-in-out;\n\n .expand-action {\n all: unset;\n display: flex;\n position: relative;\n\n appearance: button;\n\n height: 2.5rem;\n width: 100%;\n\n background-color: var(--theme-color-component-1);\n align-items: center;\n justify-content: flex-start;\n\n &:hover {\n background: var(--theme-color-component-1--hover);\n }\n\n &:active {\n background: var(--theme-color-component-1--active);\n }\n\n @include focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: var(--theme-btn--focus--outline-offset);\n }\n }\n\n .expand-action::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--ix-card-background);\n z-index: -1;\n }\n\n .expand-action:not(.show),\n .expand-action:not(.show)::before {\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n\n .expand-icon {\n margin-left: 0.5rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .expand-icon.show {\n transform: rotate(90deg);\n }\n\n .expand-content {\n display: grid;\n position: relative;\n grid-template-rows: 0fr;\n transition: var(--theme-default-time) ease-in-out;\n width: 100%;\n max-height: 14.75rem;\n opacity: 0;\n background-color: var(--theme-color-component-1);\n }\n\n .expand-content.show {\n grid-template-rows: 14.75rem;\n opacity: 1;\n }\n\n .expand-content-inner {\n position: relative;\n height: 100%;\n overflow: hidden;\n }\n\n .expand-content.show .expand-content-body {\n display: none;\n overflow: hidden;\n color: var(--theme-color-std-text);\n }\n\n .expand-content.show .expand-content-body {\n display: block;\n overflow: auto;\n height: calc(100% - 1rem);\n }\n\n .expand-content-footer {\n display: block;\n position: relative;\n width: 100%;\n height: 1rem;\n\n margin-top: auto;\n margin-bottom: 0px;\n\n background-color: var(--theme-color-component-1);\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n}\n","import { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n expand: boolean;\n nativeEvent: Event;\n};\n\n@Component({\n tag: 'ix-card-accordion',\n styleUrl: 'card-accordion.scss',\n shadow: true,\n})\nexport class CardAccordion {\n /\n Collapse the card\n /\n @Prop() collapse = false;\n\n @Element() hostElement!: HTMLIxCardAccordionElement;\n\n /\n @internal\n /\n @Event() accordionExpand!: EventEmitter<CardAccordionExpandChangeEvent>;\n\n @State() expandContent = false;\n\n @Watch('collapse')\n onInitialExpandChange() {\n this.expandContent = !this.collapse;\n }\n\n get expandedContent() {\n return this.hostElement.shadowRoot!.querySelector('.expand-content');\n }\n\n onExpandActionClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.expandContent = !this.expandContent;\n this.accordionExpand.emit({\n expand: this.expandContent,\n nativeEvent: event,\n });\n\n if (this.expandContent) {\n this.scrollExpandedContentIntoView();\n }\n }\n\n private scrollExpandedContentIntoView() {\n setTimeout(() => {\n const rect = this.expandedContent!.getBoundingClientRect();\n if (rect.bottom > window.innerHeight) {\n this.hostElement\n .shadowRoot!.querySelector('.expand-content')!\n .scrollIntoView(false);\n }\n }, 150);\n }\n\n componentWillLoad() {\n this.onInitialExpandChange();\n }\n\n render() {\n return (\n <Host slot=\"card-accordion\">\n <button\n tabIndex={0}\n class={{ 'expand-action': true, show: this.expandContent }}\n onClick={(event) => this.onExpandActionClick(event)}\n role=\"button\"\n type=\"button\"\n aria-expanded={this.expandContent}\n aria-controls={getAriaControlsId()}\n >\n <ix-icon\n name={iconChevronRightSmall}\n class={{\n 'expand-icon': true,\n show: this.expandContent,\n }}\n ></ix-icon>\n </button>\n <div\n class={{\n 'expand-content': true,\n show: this.expandContent,\n }}\n >\n <div class=\"expand-content-inner\">\n <div class=\"expand-content-body\">\n <slot></slot>\n </div>\n <div class=\"expand-content-footer\"></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n","@import 'common-variables';\n\n:host {\n display: flex;\n position: relative;\n flex-direction: row;\n align-items: center;\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n gap: $default-space;\n\n width: 100%;\n\n .title-actions {\n display: flex;\n position: relative;\n flex-direction: row;\n gap: 0.25rem;\n margin-left: auto;\n margin-right: 0;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/\n @slot title-actions - Place additional actions inside title\n */\n@Component({\n tag: 'ix-card-title',\n styleUrl: 'card-title.scss',\n shadow: true,\n})\nexport class CardHeader {\n render() {\n return (\n <Host>\n <slot></slot>\n <div class=\"title-actions\">\n <slot name=\"title-actions\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-card-list.cjs.entry.js CHANGED Viewed

@@ -41,8 +41,6 @@ const CardList = class {
         this.suppressOverflowHandling = false;
         /**
          * Hide the show all button
-         *
-         * @since 2.2.0
          */
         this.hideShowAll = false;
         /**
@@ -166,16 +164,16 @@ const CardList = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2157d907578c112638bdec74ad7be517b24af46d' }, index.h(CardListTitle, { key: '96769a6c3a4735663f76879d90e2af2f56ddc323', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (index.h(index.Host, { key: '9c7e330c5e56fdce20a528b8f6107833842e145c' }, index.h(CardListTitle, { key: 'e52c141d2a6947ce4d98adc5749370fe39700567', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), index.h("div", { key: '5a982b69bcacc770709c81edb7e57e901e1ca88c', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), index.h("div", { key: 'ab0903170788ebba38b341959c21bedb125f4b33', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, index.h("div", { key: '21c33b91f385f8e80c6ce4b2904ae959d287141c', class: {
+            }, style: this.computeMaskLayer() }, index.h("div", { key: 'bffa3e47652e170d19e788fabf2e4708f47b2a96', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, index.h("slot", { key: '5b7e106263dd575f1cbaa8e3272c341958babe7f', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (index.h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, index.h("slot", { key: '3f96b3334bf6ff39797597f1318bf6a796d32503', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (index.h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,

package/dist/cjs/ix-card-list.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-card-list.entry.cjs.js","mappings":"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","names":["h","iconChevronDown","createMutationObserver","Host","iconMoreMenu"],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n margin: 0.5rem;\n\n .CardList_Title {\n display: flex;\n position: relative;\n height: $CardList__Title__Height;\n align-items: center;\n width: 100%;\n margin-bottom: 1rem;\n\n &__Label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .CardList__Title__Button {\n margin-right: 1rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .CardList__Title__Button__Collapsed {\n transform: rotate(-90deg);\n }\n\n .CardList__Title__Show__All {\n align-self: center;\n margin-left: auto;\n margin-right: 0px;\n flex-shrink: 0;\n }\n\n .CardList__Content {\n display: flex;\n position: relative;\n height: calc(100% - #{$CardList__Title__Height});\n width: 100%;\n gap: 1.5rem;\n transition: var(--theme-default-time) ease-in-out;\n overflow: auto;\n }\n\n .CardList__Content__Collapsed {\n min-height: 0px;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n }\n\n .CardList__Style__Flexbox__Scroll {\n flex-wrap: wrap;\n }\n\n .CardList__Style__Infinite__Scroll {\n flex-wrap: nowrap;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .CardList__Overflow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n mask-image: var(--ix-card-list-overflow, none);\n }\n\n .Show__All__Card {\n display: flex;\n position: relative;\n\n align-self: flex-start;\n justify-self: center;\n\n max-width: 11.25rem;\n min-width: 11.25rem;\n width: 11.25rem;\n\n min-height: 11.25rem;\n max-height: 11.25rem;\n height: 11.25rem;\n\n --ix-card-border-color: var(--theme-color-primary);\n color: var(--theme-color-primary);\n }\n\n .CardList__Style__Infinite__Scroll .Show__All__Card {\n margin-top: 2.375rem;\n }\n\n .CardList__Style__Flexbox__Scroll .Show__All__Card {\n margin-bottom: 2.375rem;\n }\n\n .Show__All__Card:hover {\n background-color: var(--theme-color-ghost--hover);\n }\n\n .Show__All__Card:active {\n background-color: var(--theme-color-ghost--active);\n }\n\n .Show__All__Card__Content {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .Show__All__Card__Icon {\n display: flex;\n position: absolute;\n height: 4rem;\n width: 4rem;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Text {\n margin-bottom: 0px;\n margin-top: auto;\n }\n}\n\n::slotted(.display-none) {\n display: none !important;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n label?: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (!props.label) {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n ghost\n icon={iconChevronDown}\n onClick={props.onClick}\n iconColor=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n ></ix-icon-button>\n <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n {props.label}\n </ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n ghost\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /\n Name the card list\n /\n @Prop() label?: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount?: number;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n \n @since 2.2.0\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop() i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop() i18nMoreCards = 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged!: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement!: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer?: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot!.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('display-none');\n return;\n }\n element.classList.remove('display-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n if (!this.listElement) {\n return;\n }\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content>\n <div class=\"Show__All__Card__Content\">\n <ix-icon\n name={iconMoreMenu}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </div>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-card-list.entry.cjs.js","mappings":"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","names":["h","iconChevronDown","createMutationObserver","Host","iconMoreMenu"],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n margin: 0.5rem;\n\n .CardList_Title {\n display: flex;\n position: relative;\n height: $CardList__Title__Height;\n align-items: center;\n width: 100%;\n margin-bottom: 1rem;\n\n &__Label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .CardList__Title__Button {\n margin-right: 1rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .CardList__Title__Button__Collapsed {\n transform: rotate(-90deg);\n }\n\n .CardList__Title__Show__All {\n align-self: center;\n margin-left: auto;\n margin-right: 0px;\n flex-shrink: 0;\n }\n\n .CardList__Content {\n display: flex;\n position: relative;\n height: calc(100% - #{$CardList__Title__Height});\n width: 100%;\n gap: 1.5rem;\n transition: var(--theme-default-time) ease-in-out;\n overflow: auto;\n }\n\n .CardList__Content__Collapsed {\n min-height: 0px;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n }\n\n .CardList__Style__Flexbox__Scroll {\n flex-wrap: wrap;\n }\n\n .CardList__Style__Infinite__Scroll {\n flex-wrap: nowrap;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .CardList__Overflow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n mask-image: var(--ix-card-list-overflow, none);\n }\n\n .Show__All__Card {\n display: flex;\n position: relative;\n\n align-self: flex-start;\n justify-self: center;\n\n max-width: 11.25rem;\n min-width: 11.25rem;\n width: 11.25rem;\n\n min-height: 11.25rem;\n max-height: 11.25rem;\n height: 11.25rem;\n\n --ix-card-border-color: var(--theme-color-primary);\n color: var(--theme-color-primary);\n }\n\n .CardList__Style__Infinite__Scroll .Show__All__Card {\n margin-top: 2.375rem;\n }\n\n .CardList__Style__Flexbox__Scroll .Show__All__Card {\n margin-bottom: 2.375rem;\n }\n\n .Show__All__Card:hover {\n background-color: var(--theme-color-ghost--hover);\n }\n\n .Show__All__Card:active {\n background-color: var(--theme-color-ghost--active);\n }\n\n .Show__All__Card__Content {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .Show__All__Card__Icon {\n display: flex;\n position: absolute;\n height: 4rem;\n width: 4rem;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Text {\n margin-bottom: 0px;\n margin-top: auto;\n }\n}\n\n::slotted(.display-none) {\n display: none !important;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n label?: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (!props.label) {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n ghost\n icon={iconChevronDown}\n onClick={props.onClick}\n iconColor=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n ></ix-icon-button>\n <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n {props.label}\n </ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n ghost\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /\n Name the card list\n /\n @Prop() label?: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount?: number;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop() i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop() i18nMoreCards = 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged!: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement!: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer?: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot!.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('display-none');\n return;\n }\n element.classList.remove('display-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n if (!this.listElement) {\n return;\n }\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content>\n <div class=\"Show__All__Card__Content\">\n <ix-icon\n name={iconMoreMenu}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </div>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-card-list.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-card-list.entry.cjs.js","sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n margin: 0.5rem;\n\n .CardList_Title {\n display: flex;\n position: relative;\n height: $CardList__Title__Height;\n align-items: center;\n width: 100%;\n margin-bottom: 1rem;\n\n &__Label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .CardList__Title__Button {\n margin-right: 1rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .CardList__Title__Button__Collapsed {\n transform: rotate(-90deg);\n }\n\n .CardList__Title__Show__All {\n align-self: center;\n margin-left: auto;\n margin-right: 0px;\n flex-shrink: 0;\n }\n\n .CardList__Content {\n display: flex;\n position: relative;\n height: calc(100% - #{$CardList__Title__Height});\n width: 100%;\n gap: 1.5rem;\n transition: var(--theme-default-time) ease-in-out;\n overflow: auto;\n }\n\n .CardList__Content__Collapsed {\n min-height: 0px;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n }\n\n .CardList__Style__Flexbox__Scroll {\n flex-wrap: wrap;\n }\n\n .CardList__Style__Infinite__Scroll {\n flex-wrap: nowrap;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .CardList__Overflow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n mask-image: var(--ix-card-list-overflow, none);\n }\n\n .Show__All__Card {\n display: flex;\n position: relative;\n\n align-self: flex-start;\n justify-self: center;\n\n max-width: 11.25rem;\n min-width: 11.25rem;\n width: 11.25rem;\n\n min-height: 11.25rem;\n max-height: 11.25rem;\n height: 11.25rem;\n\n --ix-card-border-color: var(--theme-color-primary);\n color: var(--theme-color-primary);\n }\n\n .CardList__Style__Infinite__Scroll .Show__All__Card {\n margin-top: 2.375rem;\n }\n\n .CardList__Style__Flexbox__Scroll .Show__All__Card {\n margin-bottom: 2.375rem;\n }\n\n .Show__All__Card:hover {\n background-color: var(--theme-color-ghost--hover);\n }\n\n .Show__All__Card:active {\n background-color: var(--theme-color-ghost--active);\n }\n\n .Show__All__Card__Content {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .Show__All__Card__Icon {\n display: flex;\n position: absolute;\n height: 4rem;\n width: 4rem;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Text {\n margin-bottom: 0px;\n margin-top: auto;\n }\n}\n\n::slotted(.display-none) {\n display: none !important;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n label?: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (!props.label) {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n ghost\n icon={iconChevronDown}\n onClick={props.onClick}\n iconColor=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n ></ix-icon-button>\n <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n {props.label}\n </ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n ghost\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /\n Name the card list\n /\n @Prop() label?: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount?: number;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n \n @since 2.2.0\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop() i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop() i18nMoreCards = 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged!: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement!: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer?: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot!.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('display-none');\n return;\n }\n element.classList.remove('display-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n if (!this.listElement) {\n return;\n }\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content>\n <div class=\"Show__All__Card__Content\">\n <ix-icon\n name={iconMoreMenu}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </div>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","iconChevronDown","createMutationObserver","Host","iconMoreMenu"],"mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,u5FAAu5F;;ACc36F,SAAS,aAAa,CAAC,KAQtB,EAAA;AACC,IAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AAChB,QAAA,OAAO,IAAI;;AAGb,IAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,gBAAA,EAAA,EACE,KAAK,EACL,IAAA,EAAA,IAAI,EAAEC,uBAAe,EACrB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,IAAI;YAC7B,kCAAkC,EAAE,KAAK,CAAC,WAAW;AACtD,SAAA,EACe,CAAA,EAClBD,OAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAC,MAAM,EAAC,SAAS,EAC1D,EAAA,KAAK,CAAC,KAAK,CACE,EACf,CAAC,KAAK,CAAC,WAAW,KACjBA,uBACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EACL,IAAA,EAAA,OAAO,EAAE,KAAK,CAAC,cAAc,EAAA,EAE7BA,OAAO,CAAA,MAAA,EAAA,IAAA,EAAA,KAAK,CAAC,YAAY,CAAQ,EACjCA,OACG,CAAA,MAAA,EAAA,IAAA,EAAA,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAA,EAAA,EAAK,KAAK,CAAC,cAAc,GAAG,GAAG,IAAI,CAC9D,CACG,CACb,CACG;AAEV;MAUa,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAWE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAuB,OAAO;AAE/C;;;;AAIG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,EAAE;AAO5B;;AAEG;AACK,QAAA,IAAwB,CAAA,wBAAA,GAAG,KAAK;AAExC;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,UAAU;AAEhC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAG,gCAAgC;AAuBvC,QAAA,IAAsB,CAAA,sBAAA,GAAG,KAAK;AAC9B,QAAA,IAA2B,CAAA,2BAAA,GAAG,CAAC;AAC/B,QAAA,IAAwB,CAAA,wBAAA,GAAG,CAAC;AAC5B,QAAA,IAAkB,CAAA,kBAAA,GAAG,CAAC;AACtB,QAAA,IAAmB,CAAA,mBAAA,GAAG,CAAC;AA+MzC;IA3MS,0BAA0B,GAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAGlC,IAAA,cAAc,CAAC,KAAiB,EAAA;AACtC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,YAAA,WAAW,EAAE,KAAK;AACnB,SAAA,CAAC;;IAGI,eAAe,GAAA;AACrB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CACrD,2BAA2B,CACT;QACpB,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;IAGzC,8BAA8B,GAAA;AACpC,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE;QAC5C,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;AACvC,YAAA,IAAI,OAAO,YAAY,WAAW,EAAE;gBAClC,IAAI,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;AACpC,oBAAA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;oBACrC;;AAEF,gBAAA,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC;;AAE5C,SAAC,CAAC;QACF,IAAI,CAAC,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe;AACzE,QAAA,IAAI,CAAC,2BAA2B;AAC9B,YAAA,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe;AAE7C,QAAA,IAAI,CAAC,wBAAwB,GAAG,aAAa,CAAC,MAAM;QACpD,IAAI,CAAC,cAAc,EAAE;;IAGf,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAGE,uCAAsB,CAAC,MAAK;YAC1C,IAAI,CAAC,8BAA8B,EAAE;AACvC,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CACnB,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAE,EACjE;AACE,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CACF;QAED,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,8BAA8B,EAAE;AACvC,SAAC,CAAC;;IAGI,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;AACjC,YAAA,OAAO,KAAK;;AAEd,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;AAC7D,YAAA,OAAO,IAAI;;;AAIf,IAAA,IAAY,WAAW,GAAA;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC;;IAGjE,gBAAgB,GAAA;QACtB,IAAI,CAAC,cAAc,EAAE;;IAGf,qBAAqB,GAAA;QAC3B,QACE,IAAI,CAAC,wBAAwB,KAAK,KAAK,IAAI,IAAI,CAAC,sBAAsB;;AAIlE,IAAA,4BAA4B,CAAC,QAAgB,EAAA;AACnD,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,OAAO,CAAC;;AAGV,QAAA,IAAI,QAAQ,KAAK,CAAC,EAAE;AAClB,YAAA,OAAO,CAAC;;AAGV,QAAA,IAAI,QAAQ,GAAG,GAAG,EAAE;AAClB,YAAA,OAAO,CAAC;;QAGV,OAAO,QAAQ,GAAG,GAAG;;IAGf,gBAAgB,GAAA;QACtB,MAAM,gBAAgB,GAAG,EAAE;AAC3B,QAAA,MAAM,SAAS,GAAG,CAAA;;;cAId,gBAAgB;AAChB,aAAC,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CACzE,CAAA;0BAEE,gBAAgB;aACf,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG;AAC7D,kBAAE;kBACA,CAAC,CACP,CAAA;;MAEA;QACF,OAAO;AACL,YAAA,yBAAyB,EAAE,SAAS;SACrC;;IAIK,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;;QAEF,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,WAAW;AAEjE,QAAA,IAAI,CAAC,kBAAkB,GAAG,UAAU;QACpC,IAAI,CAAC,mBAAmB,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW;;IAGnE,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;YAC/B,IAAI,CAAC,uBAAuB,EAAE;;;IAIlC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;;IAI9B,MAAM,GAAA;QACJ,QACEF,QAACG,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHH,OAAC,CAAA,aAAa,EACZ,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,cAAc,EACZ,IAAI,CAAC,YAAY,KAAK;kBAClB,IAAI,CAAC;kBACL,IAAI,CAAC,YAAY,EAEvB,OAAO,EAAE,MAAM,IAAI,CAAC,0BAA0B,EAAE,EAChD,cAAc,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAC7C,WAAW,EAAE,IAAI,CAAC,WAAW,EACd,CAAA,EACjBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,IAAI;AACzB,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAA,EAE9BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,4BAA4B,EAAE,IAAI,CAAC,QAAQ;AAC3C,gBAAA,gCAAgC,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;AAC5D,gBAAA,iCAAiC,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC/D,EACD,QAAQ,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAA,EAEvCA,OACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,8BAA8B,EAAE,EACnD,CAAA,EACP,IAAI,CAAC,qBAAqB,EAAE,IAC3BA,OACE,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACtB,aAAA,EACD,OAAO,EAAE,CAAC,KAAK,KACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC1B,gBAAA,WAAW,EAAE,KAAK;AACnB,aAAA,CAAC,EAAA,EAGJA,OAAA,CAAA,iBAAA,EAAA,IAAA,EACEA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OACE,CAAA,SAAA,EAAA,EAAA,IAAI,EAAEI,oBAAY,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,uBAAuB,EACrB,CAAA,EACXJ,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,IAAI,CAAC,aAAa,QAAI,IAAI,CAAC,2BAA2B,MAClD,CACH,CACU,CACV,IACR,IAAI,CACJ,CACF,CACD;;;;;;;;"}
1	+ {"version":3,"file":"ix-card-list.entry.cjs.js","sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n margin: 0.5rem;\n\n .CardList_Title {\n display: flex;\n position: relative;\n height: $CardList__Title__Height;\n align-items: center;\n width: 100%;\n margin-bottom: 1rem;\n\n &__Label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .CardList__Title__Button {\n margin-right: 1rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .CardList__Title__Button__Collapsed {\n transform: rotate(-90deg);\n }\n\n .CardList__Title__Show__All {\n align-self: center;\n margin-left: auto;\n margin-right: 0px;\n flex-shrink: 0;\n }\n\n .CardList__Content {\n display: flex;\n position: relative;\n height: calc(100% - #{$CardList__Title__Height});\n width: 100%;\n gap: 1.5rem;\n transition: var(--theme-default-time) ease-in-out;\n overflow: auto;\n }\n\n .CardList__Content__Collapsed {\n min-height: 0px;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n }\n\n .CardList__Style__Flexbox__Scroll {\n flex-wrap: wrap;\n }\n\n .CardList__Style__Infinite__Scroll {\n flex-wrap: nowrap;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .CardList__Overflow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n mask-image: var(--ix-card-list-overflow, none);\n }\n\n .Show__All__Card {\n display: flex;\n position: relative;\n\n align-self: flex-start;\n justify-self: center;\n\n max-width: 11.25rem;\n min-width: 11.25rem;\n width: 11.25rem;\n\n min-height: 11.25rem;\n max-height: 11.25rem;\n height: 11.25rem;\n\n --ix-card-border-color: var(--theme-color-primary);\n color: var(--theme-color-primary);\n }\n\n .CardList__Style__Infinite__Scroll .Show__All__Card {\n margin-top: 2.375rem;\n }\n\n .CardList__Style__Flexbox__Scroll .Show__All__Card {\n margin-bottom: 2.375rem;\n }\n\n .Show__All__Card:hover {\n background-color: var(--theme-color-ghost--hover);\n }\n\n .Show__All__Card:active {\n background-color: var(--theme-color-ghost--active);\n }\n\n .Show__All__Card__Content {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n .Show__All__Card__Icon {\n display: flex;\n position: absolute;\n height: 4rem;\n width: 4rem;\n justify-content: center;\n align-items: center;\n }\n\n .Show__All__Card__Text {\n margin-bottom: 0px;\n margin-top: auto;\n }\n}\n\n::slotted(.display-none) {\n display: none !important;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n label?: string;\n isCollapsed: boolean;\n onClick: (e: MouseEvent) => void;\n onShowAllClick: (e: MouseEvent) => void;\n showAllLabel: string;\n showAllCounter: number;\n hideShowAll: boolean;\n}) {\n if (!props.label) {\n return null;\n }\n\n return (\n <div class=\"CardList_Title\">\n <ix-icon-button\n ghost\n icon={iconChevronDown}\n onClick={props.onClick}\n iconColor=\"color-primary\"\n class={{\n CardList__Title__Button: true,\n CardList__Title__Button__Collapsed: props.isCollapsed,\n }}\n ></ix-icon-button>\n <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n {props.label}\n </ix-typography>\n {!props.hideShowAll && (\n <ix-button\n class=\"CardList__Title__Show__All\"\n ghost\n onClick={props.onShowAllClick}\n >\n <span>{props.showAllLabel}</span>\n <span>\n {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n </span>\n </ix-button>\n )}\n </div>\n );\n}\n\n@Component({\n tag: 'ix-card-list',\n styleUrl: 'card-list.scss',\n shadow: true,\n})\nexport class CardList {\n /\n Name the card list\n /\n @Prop() label?: string;\n\n /\n Collapse the list\n /\n @Prop({ mutable: true }) collapse = false;\n\n /\n List style\n /\n @Prop() listStyle: 'stack' \| 'scroll' = 'stack';\n\n /\n Maximal visible cards\n \n @internal\n /\n @Prop() maxVisibleCards = 12;\n\n /\n Overwrite the default show all count.\n * /\n @Prop() showAllCount?: number;\n\n /\n Suppress the overflow handling of child elements\n /\n @Prop() suppressOverflowHandling = false;\n\n /\n Hide the show all button\n /\n @Prop() hideShowAll = false;\n\n /\n i18n Show all button\n /\n @Prop() i18nShowAll = 'Show all';\n\n /\n i18n More cards available\n /\n @Prop() i18nMoreCards = 'There are more cards available';\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() collapseChanged!: EventEmitter<boolean>;\n\n /\n Fire event when the collapse state is changed by the user\n /\n @Event() showAllClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n /\n Fire event when the show more card is clicked.\n /\n @Event() showMoreCardClick!: EventEmitter<{\n nativeEvent: MouseEvent;\n }>;\n\n @Element() hostElement!: HTMLIxCardListElement;\n\n @State() private hasOverflowingElements = false;\n @State() private numberOfOverflowingElements = 0;\n @State() private numberOfAllChildElements = 0;\n @State() private leftScrollDistance = 0;\n @State() private rightScrollDistance = 0;\n\n private observer?: MutationObserver;\n\n private onCardListVisibilityToggle() {\n this.collapse = !this.collapse;\n this.collapseChanged.emit(this.collapse);\n }\n\n private onShowAllClick(event: MouseEvent) {\n this.showAllClick.emit({\n nativeEvent: event,\n });\n }\n\n private getListChildren() {\n const slot = this.hostElement.shadowRoot!.querySelector(\n '.CardList__Content > slot'\n ) as HTMLSlotElement;\n return slot.assignedElements({ flatten: true });\n }\n\n private changeVisibilityOfSlotChildren() {\n const childElements = this.getListChildren();\n childElements.forEach((element, index) => {\n if (element instanceof HTMLElement) {\n if (index > this.maxVisibleCards - 1) {\n element.classList.add('display-none');\n return;\n }\n element.classList.remove('display-none');\n }\n });\n this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n this.numberOfOverflowingElements =\n childElements.length - this.maxVisibleCards;\n\n this.numberOfAllChildElements = childElements.length;\n this.detectOverflow();\n }\n\n private registerOverflowHandler() {\n this.observer = createMutationObserver(() => {\n this.changeVisibilityOfSlotChildren();\n });\n\n this.observer.observe(\n this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n {\n childList: true,\n subtree: true,\n }\n );\n\n requestAnimationFrame(() => {\n this.changeVisibilityOfSlotChildren();\n });\n }\n\n private shouldHandleOverflow() {\n if (this.suppressOverflowHandling) {\n return false;\n }\n if (this.listStyle === 'stack' \|\| this.listStyle === 'scroll') {\n return true;\n }\n }\n\n private get listElement() {\n return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n }\n\n private onCardListScroll() {\n this.detectOverflow();\n }\n\n private isShowMoreCardVisible() {\n return (\n this.suppressOverflowHandling === false && this.hasOverflowingElements\n );\n }\n\n private getOpacityFromScrollDistance(distance: number) {\n if (!this.listElement) {\n return 0;\n }\n\n if (distance === 0) {\n return 0;\n }\n\n if (distance > 100) {\n return 1;\n }\n\n return distance / 100;\n }\n\n private computeMaskLayer() {\n const maxOverflowWidth = 80;\n const maskLayer = `linear-gradient(\n 90deg,\n transparent 0px,\n black ${\n maxOverflowWidth \n (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n }px,\n black calc(100% - ${\n maxOverflowWidth *\n (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n ? 1\n : 0)\n }px),\n transparent 100%\n )`;\n return {\n '--ix-card-list-overflow': maskLayer,\n };\n }\n\n @Listen('resize', { target: 'window' })\n private detectOverflow() {\n if (!this.listElement) {\n return;\n }\n const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n this.leftScrollDistance = scrollLeft;\n this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n }\n\n componentDidLoad() {\n if (this.shouldHandleOverflow()) {\n this.registerOverflowHandler();\n }\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <CardListTitle\n isCollapsed={this.collapse}\n label={this.label}\n showAllLabel={this.i18nShowAll}\n showAllCounter={\n this.showAllCount === undefined\n ? this.numberOfAllChildElements\n : this.showAllCount\n }\n onClick={() => this.onCardListVisibilityToggle()}\n onShowAllClick={(e) => this.onShowAllClick(e)}\n hideShowAll={this.hideShowAll}\n ></CardListTitle>\n <div\n class={{\n CardList__Overflow: true,\n }}\n style={this.computeMaskLayer()}\n >\n <div\n class={{\n CardList__Content: true,\n CardList__Content__Collapsed: this.collapse,\n CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n }}\n onScroll={() => this.onCardListScroll()}\n >\n <slot\n onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n ></slot>\n {this.isShowMoreCardVisible() ? (\n <ix-card\n class={{\n Show__All__Card: true,\n }}\n onClick={(event) =>\n this.showMoreCardClick.emit({\n nativeEvent: event,\n })\n }\n >\n <ix-card-content>\n <div class=\"Show__All__Card__Content\">\n <ix-icon\n name={iconMoreMenu}\n size={'32'}\n class={'Show__All__Card__Icon'}\n ></ix-icon>\n <span class=\"Show__All__Card__Text\">\n {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n </span>\n </div>\n </ix-card-content>\n </ix-card>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","iconChevronDown","createMutationObserver","Host","iconMoreMenu"],"mappings":"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"}

package/dist/cjs/ix-card.ix-card-content.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-card.ix-card-content.entry.cjs.js","sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n cursor: pointer;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n overflow: hidden;\n }\n\n .card-content-wrapper {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n@mixin accordionChevronColorPrimary {\n ::slotted(ix-card-accordion) {\n color: var(--theme-color-primary);\n }\n}\n\n:host(.card-outline) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-ghost);\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-filled) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight, .card-outline)) {\n --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover),\n:host(.card-outline:hover) {\n --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover),\n:host(.card-filled:hover) {\n --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active),\n:host(.card-outline:active) {\n --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active),\n:host(.card-filled:active) {\n --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight),\n:host(.selected.card-outline) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification),\n:host(.selected.card-filled) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'primary'\n \| 'outline'\n \| 'filled';\n\n/\n @~~since 1.6.0\n /\n@~~Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement!: HTMLIxCardElement;\n\n /\n Card variant\n /\n @Prop() variant: CardVariant = 'outline';\n\n /\n ~~@since~~ ~~2.1.0~~\n /\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n padding: 1rem;\n height: 100%;\n overflow: hidden;\n\n .content-wrapper {\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n overflow: hidden;\n gap: 0.5rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/\n @~~since 1.6.0\n */\n@~~Component({\n tag: 'ix-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n render() {\n return (\n <Host>\n <div class=\"content-wrapper\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,ijKAAijK;;~~MCqBpjK~~,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,SAAS;AAExC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmBlC;IAjBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAC/B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD;;;;;;~~AChDb~~,MAAM,cAAc,GAAG,+8BAA+8B;;~~MCUz9B~~,WAAW,GAAA,MAAA;;;;IACtB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;"}
1	+ {"version":3,"file":"ix-card.ix-card-content.entry.cjs.js","sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n cursor: pointer;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n overflow: hidden;\n }\n\n .card-content-wrapper {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n@mixin accordionChevronColorPrimary {\n ::slotted(ix-card-accordion) {\n color: var(--theme-color-primary);\n }\n}\n\n:host(.card-outline) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-ghost);\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-filled) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight, .card-outline)) {\n --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover),\n:host(.card-outline:hover) {\n --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover),\n:host(.card-filled:hover) {\n --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active),\n:host(.card-outline:active) {\n --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active),\n:host(.card-filled:active) {\n --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight),\n:host(.selected.card-outline) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification),\n:host(.selected.card-filled) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'primary'\n \| 'outline'\n \| 'filled';\n\n@Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement!: HTMLIxCardElement;\n\n /\n Card variant\n /\n @Prop() variant: CardVariant = 'outline';\n\n /\n Show card in selected state\n /\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n padding: 1rem;\n height: 100%;\n overflow: hidden;\n\n .content-wrapper {\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n overflow: hidden;\n gap: 0.5rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'ix-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n render() {\n return (\n <Host>\n <div class=\"content-wrapper\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,ijKAAijK;;MCkBpjK,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,SAAS;AAExC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmBlC;IAjBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAC/B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD;;;;;;AC7Cb,MAAM,cAAc,GAAG,+8BAA+8B;;MCOz9B,WAAW,GAAA,MAAA;;;;IACtB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;"}

package/dist/cjs/ix-card_2.cjs.entry.js CHANGED Viewed

@@ -12,15 +12,15 @@ const Card = class {
          */
         this.variant = 'outline';
         /**
-         * @since 2.1.0
+         * Show card in selected state
          */
         this.selected = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7d36825ad469c0a2453fb72dbf7f079458c2a2f1', class: {
+        return (index.h(index.Host, { key: '3d866b84586d9db427e6dd978c607e9293b63375', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
-            } }, index.h("div", { key: '3a6186d515640d60fb7b3c4898c268bd6cf15c21', class: "card-content" }, index.h("slot", { key: 'd9fb872de9eb038fc0f02ba30458506f0b821784' })), index.h("div", { key: '2b1214fe85a418875accd6927bd1ca0b0f388dd5', class: "card-footer" }, index.h("slot", { key: 'ba68b648ad8c7d95a77d1b819f98957b43a0d663', name: "card-accordion" }))));
+            } }, index.h("div", { key: '9671d83ac2d056fdb0d130d0780474602470ee09', class: "card-content" }, index.h("slot", { key: 'f1f87190a18a858981098e9230916f8821a7ac0c' })), index.h("div", { key: '92492646227bfecc9d5977f240844664446e50e1', class: "card-footer" }, index.h("slot", { key: '06cdce4a40548d9486a0bd44d9de7410eaebe538', name: "card-accordion" }))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -33,7 +33,7 @@ const CardContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b158a08d7ca4779af659d4fa143e047dba41088e' }, index.h("div", { key: 'abd538339ad50ba6430c834eb1283c20788d78e2', class: "content-wrapper" }, index.h("slot", { key: '86494d2878e0cb36e417a5d5868fff7f551b4de7' }))));
+        return (index.h(index.Host, { key: '9621026e8c6cfa6e3d8b86b9a7eea1aa092fd709' }, index.h("div", { key: '42be4252caddf4e15d8554c9b1788e839dc946e8', class: "content-wrapper" }, index.h("slot", { key: '5b695aaf03f88d426969691c87be2330cc23bcb4' }))));
     }
 };
 CardContent.style = cardContentCss;

package/dist/cjs/ix-card_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-card.ix-card-content.entry.cjs.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,ijKAAijK;;~~MCqBpjK~~,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,SAAS;AAExC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmBlC;IAjBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAC/B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD;;;;;;~~AChDb~~,MAAM,cAAc,GAAG,+8BAA+8B;;~~MCUz9B~~,WAAW,GAAA,MAAA;;;;IACtB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;","names":["h","Host"],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n cursor: pointer;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n overflow: hidden;\n }\n\n .card-content-wrapper {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n@mixin accordionChevronColorPrimary {\n ::slotted(ix-card-accordion) {\n color: var(--theme-color-primary);\n }\n}\n\n:host(.card-outline) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-ghost);\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-filled) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight, .card-outline)) {\n --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover),\n:host(.card-outline:hover) {\n --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover),\n:host(.card-filled:hover) {\n --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active),\n:host(.card-outline:active) {\n --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active),\n:host(.card-filled:active) {\n --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight),\n:host(.selected.card-outline) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification),\n:host(.selected.card-filled) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'primary'\n \| 'outline'\n \| 'filled';\n\n/\n @~~since 1.6.0\n /\n@~~Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement!: HTMLIxCardElement;\n\n /\n Card variant\n /\n @Prop() variant: CardVariant = 'outline';\n\n /\n ~~@since~~ ~~2.1.0~~\n /\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n padding: 1rem;\n height: 100%;\n overflow: hidden;\n\n .content-wrapper {\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n overflow: hidden;\n gap: 0.5rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/\n @~~since 1.6.0\n */\n@~~Component({\n tag: 'ix-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n render() {\n return (\n <Host>\n <div class=\"content-wrapper\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-card.ix-card-content.entry.cjs.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,ijKAAijK;;MCkBpjK,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,SAAS;AAExC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmBlC;IAjBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAC/B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD;;;;;;AC7Cb,MAAM,cAAc,GAAG,+8BAA+8B;;MCOz9B,WAAW,GAAA,MAAA;;;;IACtB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;","names":["h","Host"],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n cursor: pointer;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n overflow: hidden;\n }\n\n .card-content-wrapper {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n@mixin accordionChevronColorPrimary {\n ::slotted(ix-card-accordion) {\n color: var(--theme-color-primary);\n }\n}\n\n:host(.card-outline) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-ghost);\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-filled) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight, .card-outline)) {\n --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover),\n:host(.card-outline:hover) {\n --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover),\n:host(.card-filled:hover) {\n --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active),\n:host(.card-outline:active) {\n --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active),\n:host(.card-filled:active) {\n --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight),\n:host(.selected.card-outline) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification),\n:host(.selected.card-filled) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'primary'\n \| 'outline'\n \| 'filled';\n\n@Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement!: HTMLIxCardElement;\n\n /\n Card variant\n /\n @Prop() variant: CardVariant = 'outline';\n\n /\n Show card in selected state\n /\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n padding: 1rem;\n height: 100%;\n overflow: hidden;\n\n .content-wrapper {\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n overflow: hidden;\n gap: 0.5rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'ix-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n render() {\n return (\n <Host>\n <div class=\"content-wrapper\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-category-filter.cjs.entry.js CHANGED Viewed

@@ -507,19 +507,19 @@ const CategoryFilter = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'd48391204268faa3f704bc957fb6d134cc910481' }, index.h("form", { key: 'cf53420f9616304f68291005f40c8a00b79777c8', ref: (el) => (this.formElement = el) }, index.h("div", { key: 'd3c38a9b88285828d6d8c4f772b964af613ea1e6', "read-only": this.readonly, class: {
+        return (index.h(index.Host, { key: '42fc0940f51eeba50c75bcc9c611507f50dc959c' }, index.h("form", { key: 'c76012919eac411895e28fb0b2d1a93f9454bd7a', ref: (el) => (this.formElement = el) }, index.h("div", { key: 'db03e6f7d587cafc27f9ce1515f45d0155db5495', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, index.h("ix-icon", { key: '0e0cd39cf3436c92b91e0da69845675af8ce45cd', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : index$1.iconSearch, size: "16" }), index.h("div", { key: '71a10d0e33a599af9dab3557493c11f5276ec9ef', class: "token-container" }, index.h("div", { key: '00d8d20be2133b43f98fdee6d9e3e2e45a31284c', class: "list-unstyled" }, this.filterTokens.map((value, index$1) => (index.h("span", { key: value.toString(), class: {
+            } }, index.h("ix-icon", { key: 'f46e872a458b3c3463c3ce285c344a84bbca886a', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : index$1.iconSearch, size: "16" }), index.h("div", { key: 'a738622921a0c86715dfa9562774429ea977e2bd', class: "token-container" }, index.h("div", { key: '751bb10ea63772fbf52da2a30540068a1f45277f', class: "list-unstyled" }, this.filterTokens.map((value, index$1) => (index.h("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, index.h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index$1) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (index.h("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), index.h("input", Object.assign({ key: '91b869c752452d7fe47681842a2fc280087bfcee', class: {
+            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), index.h("input", Object.assign({ key: 'd1c2a357355789ec61ddf6aa39efeb16a2e77b92', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes)))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (index.h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));