npm - @siemens/ix - Versions diffs - 2.4.1 → 2.6.0 - Mend

@siemens/ix 2.4.1 → 2.6.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 (1750) hide show

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const anime_es = require('./anime.es-e2814360.js');
 const animation = require('./animation-99234008.js');
 const service = require('./service-39a8e5fe.js');
@@ -20,9 +20,6 @@ const Pane = class {
         this.borderlessChanged = index.createEvent(this, "borderlessChanged", 7);
         this.hideOnCollapseChanged = index.createEvent(this, "hideOnCollapseChanged", 7);
         this.slotChanged = index.createEvent(this, "slotChanged", 7);
-        this.validPositions = ['top', 'left', 'bottom', 'right'];
-        this.collapsedPane = '40px';
-        this.collapsedPaneMobile = '48px';
         this.animations = new Map();
         this.animationCounter = 0;
         this.heading = undefined;
@@ -64,7 +61,9 @@ const Pane = class {
         service.applicationLayoutService.onChange.on(() => {
             this.isMobile = breakpoints.matchBreakpoint('sm');
         });
-        this.setPosition(this.currentSlot);
+        if (this.currentSlot) {
+            this.setPosition(this.currentSlot);
+        }
         this.mutationObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'attributes' &&
@@ -73,10 +72,12 @@ const Pane = class {
                     const oldSlot = mutation.oldValue;
                     if (newSlot !== oldSlot) {
                         this.slotChanged.emit({
-                            slot: oldSlot,
-                            newSlot: newSlot,
+                            slot: oldSlot !== null && oldSlot !== void 0 ? oldSlot : '',
+                            newSlot: newSlot !== null && newSlot !== void 0 ? newSlot : '',
                         });
-                        this.setPosition(newSlot);
+                        if (newSlot) {
+                            this.setPosition(newSlot);
+                        }
                     }
                 }
             });
@@ -99,7 +100,7 @@ const Pane = class {
         (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     setPosition(value) {
-        if (this.validPositions.includes(value)) {
+        if (Pane.validPositions.includes(value)) {
             this.composition = value;
         }
     }
@@ -300,31 +301,37 @@ const Pane = class {
         this.onParentSizeChange();
     }
     onHideOnCollapseChange(value) {
+        var _a;
         this.onParentSizeChange();
         this.hideOnCollapseChanged.emit({
-            slot: this.currentSlot,
+            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
             hideOnCollapse: value,
         });
     }
     onVariantChange(value) {
+        var _a;
         this.floating = value === 'floating';
         this.variantChanged.emit({
-            slot: this.currentSlot,
+            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
             variant: value,
         });
     }
     onBorderlessChange(value) {
+        var _a;
         this.borderlessChanged.emit({
-            slot: this.currentSlot,
+            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
             borderless: value,
         });
     }
-    onExpandedChange() {
-        this.onSizeChange();
-        this.expandedChanged.emit({
-            slot: this.currentSlot,
-            expanded: this.expanded,
+    dispatchExpandedChangedEvent() {
+        var _a;
+        const event = this.expandedChanged.emit({
+            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
+            expanded: !this.expanded,
         });
+        if (!event.defaultPrevented) {
+            this.expanded = !this.expanded;
+        }
     }
     onParentSizeChange() {
         this.clearAnimations();
@@ -351,18 +358,18 @@ const Pane = class {
             if (this.isMobile) {
                 this.hostElement.style.height = this.hideOnCollapse
                     ? '0'
-                    : this.collapsedPaneMobile;
+                    : Pane.collapsedPaneMobile;
             }
             else {
                 if (this.isBottomTopPane) {
                     this.hostElement.style.height = this.hideOnCollapse
                         ? '0'
-                        : this.collapsedPane;
+                        : Pane.collapsedPane;
                 }
                 else {
                     this.hostElement.style.width = this.hideOnCollapse
                         ? '0'
-                        : this.collapsedPane;
+                        : Pane.collapsedPane;
                 }
             }
         }
@@ -372,7 +379,7 @@ const Pane = class {
             if (this.isMobile) {
                 this.hostElement.style.minHeight = this.hideOnCollapse
                     ? '0'
-                    : this.collapsedPaneMobile;
+                    : Pane.collapsedPaneMobile;
                 this.animateHorizontalFadeIn('100%');
             }
             else {
@@ -380,13 +387,13 @@ const Pane = class {
                 if (this.isBottomTopPane) {
                     this.hostElement.style.height = this.hideOnCollapse
                         ? '0'
-                        : this.collapsedPane;
+                        : Pane.collapsedPane;
                     this.animateHorizontalFadeIn(expandPaneSize);
                 }
                 else {
                     this.hostElement.style.width = this.hideOnCollapse
                         ? '0'
-                        : this.collapsedPane;
+                        : Pane.collapsedPane;
                     this.animateVerticalFadeIn(expandPaneSize);
                 }
             }
@@ -394,20 +401,20 @@ const Pane = class {
         else {
             this.showContent = false;
             if (this.isMobile) {
-                this.hostElement.style.height = this.collapsedPaneMobile;
+                this.hostElement.style.height = Pane.collapsedPaneMobile;
             }
             else {
                 if (this.isBottomTopPane) {
-                    this.animateHorizontalFadeIn(this.collapsedPane);
+                    this.animateHorizontalFadeIn(Pane.collapsedPane);
                 }
                 else {
-                    this.animateVerticalFadeIn(this.collapsedPane);
+                    this.animateVerticalFadeIn(Pane.collapsedPane);
                 }
             }
         }
     }
     render() {
-        return (index.h(index.Host, { key: '10c2543fa3814a44f4a696b768070da6a0b2ce83', class: {
+        return (index.h(index.Host, { key: '10816a88c5f350682564704c5412edb412a793ee', class: {
                 'inline-color': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
                 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,
@@ -432,28 +439,26 @@ const Pane = class {
                 'box-shadow': this.floating,
                 'aria-expanded': this.expanded,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            } }, index.h("aside", { key: '4bea08d18307f21ca3d71874117152c10acd9ce9', class: {
+            } }, index.h("aside", { key: 'e9a81d713d0d1b6197615224664f1f4c3b739d3f', id: `pane-${this.composition}`, class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, index.h("div", { key: 'b86bd206f53643fb15f411528dd9e41e1d060ef8', id: "title-div", class: {
+            } }, index.h("div", { key: '650b4d96a644d8e27df9b9b9a9bbece1a596c978', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, index.h("ix-icon-button", { key: '4f58db9432c7685521d7a60257fff08118bc3c76', class: "title-icon", size: "24", icon: this.expanded
+            } }, index.h("ix-icon-button", { key: '3639fe948bf9c943eb9589bcad8721a9961d040e', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? 'close'
                     : this.expandIcon
-                : this.minimizeIcon, ghost: true, onClick: () => {
-                this.expanded = !this.expanded;
-            }, "aria-controls": this.composition + 'ToggleButton' }), index.h("span", { key: 'bd88452cdede62871391416c736ff80ae29f14a0', class: {
+                : this.minimizeIcon, ghost: true, onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}` }), index.h("span", { key: 'b53ab16718c7b3c700d2afd50d06893c0b67045c', class: {
                 'title-text': true,
                 rotate: !this.expanded && !this.isMobile && this.isLeftRightPane,
-            } }, this.icon ? (index.h("ix-icon", { size: "24", name: this.icon })) : null, index.h("div", { key: '6e49c2b280c258209dd43aa03658ab4bbcb9b883', class: "title-text-overflow" }, index.h("ix-typography", { key: '65fa43f3fec84b63d24d14b38434eea186aa0910', format: "h4" }, this.heading)))), index.h("div", { key: '11a5da6825a09b85f4957854179264c43ccd8a6f', class: "side-pane-content", hidden: !this.showContent }, index.h("slot", { key: '3c986fb71f77e5481ffd6449445b4247429ff07e' })))));
+            } }, this.icon ? (index.h("ix-icon", { size: "24", name: this.icon })) : null, index.h("div", { key: '0f00dc68707c7fda5b3d405b60a37effb27745aa', class: "title-text-overflow" }, index.h("ix-typography", { key: '74f167541755b2c139dd871443568f55e6938607', format: "h4" }, this.heading)))), index.h("div", { key: '699126620ea3bb6687720bc7881cb7cdb927c47e', class: "side-pane-content", hidden: !this.showContent }, index.h("slot", { key: '1661dc8a64c4898de6e0960e5c5771a05b0f5ec1' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -462,12 +467,15 @@ const Pane = class {
         "hideOnCollapse": ["onHideOnCollapseChange"],
         "variant": ["onVariantChange"],
         "borderless": ["onBorderlessChange"],
-        "expanded": ["onExpandedChange"],
         "parentHeightPx": ["onParentSizeChange"],
         "parentWidthPx": ["onParentSizeChange"],
+        "expanded": ["onSizeChange"],
         "size": ["onSizeChange"]
     }; }
 };
+Pane.validPositions = ['top', 'left', 'bottom', 'right'];
+Pane.collapsedPane = '40px';
+Pane.collapsedPaneMobile = '48px';
 Pane.style = IxPaneStyle0;
 exports.ix_pane = Pane;

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

	@@ -1 +1 @@
1	- {"file":"ix-pane.entry.cjs.js","mappings":"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","names":["matchBreakpoint","applicationLayoutService","animation","anime","Animation","h","Host"],"sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n @if $composition {\n border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n }\n}\n\n:host {\n @include ix-component;\n background-color: var(--theme-color-2);\n display: flex;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n\n aside {\n width: 100%;\n height: 100%;\n }\n\n .title-text {\n display: flex;\n align-items: center;\n gap: var(--theme-space-1);\n overflow: hidden;\n\n .title-text-overflow {\n width: 100%;\n height: 100%;\n display: contents;\n\n {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n }\n }\n\n .header-gap {\n gap: var(--theme-space-1);\n }\n\n .top-bottom-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane {\n display: flex;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1);\n\n .title-text {\n flex-direction: row-reverse;\n justify-content: start;\n flex-direction: row;\n }\n\n .rotate {\n writing-mode: vertical-lr;\n text-orientation: mixed;\n transform: rotate(180deg);\n flex-direction: row-reverse;\n\n ix-icon {\n transform: rotate(90deg);\n }\n }\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane.expanded {\n flex-direction: column;\n }\n\n .mobile-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title-mobile {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n margin: var(--theme-space-1) var(--theme-space-2);\n }\n }\n\n .side-pane-content {\n padding: var(--theme-space-1) var(--theme-space-2);\n overflow: auto;\n height: 100%;\n width: 100%;\n }\n}\n\n:host(.not-visible) {\n display: none;\n}\n\n:host(.inline-color) {\n background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n @include set-border(right);\n}\n\n:host(.right-pane-border) {\n @include set-border(left);\n}\n\n:host(.top-pane-border) {\n @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n width: 100%;\n position: absolute;\n z-index: 100 !important;\n\n .side-pane-content {\n height: calc(100% - 2.5rem);\n }\n}\n\n:host(.mobile-border-top) {\n @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n @include set-border(top);\n}\n\n:host(.top-expanded) {\n top: 0;\n}\n\n:host(.bottom-expanded) {\n bottom: 0;\n}\n\n:host(.left-right-pane) {\n height: 100%;\n}\n\n:host(.top-bottom-pane) {\n width: 100%;\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\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\nexport type Composition = 'top' \| 'left' \| 'bottom' \| 'right';\nexport type ExpandedChangedEvent = {\n slot: string;\n expanded: boolean;\n};\nexport type SlotChangedEvent = {\n slot: string;\n newSlot: string;\n};\nexport type HideOnCollapseChangedEvent = {\n slot: string;\n hideOnCollapse: boolean;\n};\nexport type VariantChangedEvent = {\n slot: string;\n variant: 'floating' \| 'inline';\n};\nexport type BorderlessChangedEvent = {\n slot: string;\n borderless: boolean;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-pane',\n styleUrl: 'pane.scss',\n shadow: true,\n})\nexport class Pane {\n @Element() hostElement: HTMLIxPaneElement;\n\n /\n Title of the side panel\n /\n @Prop() heading: string;\n\n /\n Variant of the side pane.\n * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n /\n @Prop() variant: 'floating' \| 'inline' = 'inline';\n\n /\n Define if the pane should have a collapsed state\n /\n @Prop() hideOnCollapse: boolean = false;\n\n /\n The maximum size of the sidebar, when it is expanded\n /\n @Prop() size:\n \| '240px'\n \| '320px'\n \| '360px'\n \| '480px'\n \| '600px'\n \| '33%'\n \| '50%' = '240px';\n\n /\n Toggle the border of the pane.\n * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n /\n @Prop() borderless: boolean = false;\n\n /\n State of the pane\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n Defines the position of the pane inside it's container.\n * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n /\n @Prop({ mutable: true }) composition: Composition = 'top';\n\n /\n Name of the icon\n /\n @Prop() icon: string;\n\n /\n @internal\n * Prevents overwriting of the variant and borderless property when used inside layout\n /\n @Prop() ignoreLayoutSettings: boolean = false;\n\n /\n @internal\n /\n @Prop({ mutable: true }) isMobile: boolean = false;\n\n /\n This event is triggered when the pane either expands or contracts\n /\n @Event() expandedChanged: EventEmitter<ExpandedChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() variantChanged: EventEmitter<VariantChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() borderlessChanged: EventEmitter<BorderlessChangedEvent>;\n\n /\n @internal\n /\n @Event() hideOnCollapseChanged: EventEmitter<HideOnCollapseChangedEvent>;\n\n /\n @internal\n */\n @Event() slotChanged: EventEmitter<SlotChangedEvent>;\n\n @State() private expandIcon = '';\n @State() private showContent = false;\n @State() private minimizeIcon = '';\n @State() private floating = false;\n @State() private parentWidthPx = 0;\n @State() private parentHeightPx = 0;\n\n private validPositions = ['top', 'left', 'bottom', 'right'];\n private collapsedPane = '40px';\n private collapsedPaneMobile = '48px';\n private animations: Map<string, anime.AnimeInstance> = new Map();\n private animationCounter = 0;\n\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n\n get currentSlot() {\n return this.hostElement.getAttribute('slot');\n }\n\n get isBottomTopPane() {\n return this.composition === 'bottom' \|\| this.composition === 'top';\n }\n\n get isLeftRightPane() {\n return this.composition === 'left' \|\| this.composition === 'right';\n }\n\n get isMobileTop() {\n return this.composition === 'top' \|\| this.composition === 'left';\n }\n\n componentWillLoad() {\n this.setIcons();\n\n this.floating = this.variant === 'floating';\n\n if (this.expanded) {\n this.onParentSizeChange();\n }\n\n this.isMobile = matchBreakpoint('sm');\n applicationLayoutService.onChange.on(() => {\n this.isMobile = matchBreakpoint('sm');\n });\n\n this.setPosition(this.currentSlot);\n\n this.mutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'slot'\n ) {\n const newSlot = this.currentSlot;\n const oldSlot = mutation.oldValue;\n\n if (newSlot !== oldSlot) {\n this.slotChanged.emit({\n slot: oldSlot,\n newSlot: newSlot,\n });\n this.setPosition(newSlot);\n }\n }\n });\n });\n this.mutationObserver.observe(this.hostElement, {\n attributes: true,\n attributeOldValue: true,\n });\n\n const parentElement = this.hostElement.parentElement;\n this.resizeObserver = new ResizeObserver((entries) => {\n this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n });\n if (parentElement) this.resizeObserver.observe(parentElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n private setPosition(value: string) {\n if (this.validPositions.includes(value)) {\n this.composition = value as Composition;\n }\n }\n\n private getExpandPaneSize() {\n let expandPaneSize: string;\n\n if (this.isBottomTopPane) {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentHeightPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n }\n }\n } else {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentWidthPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n }\n }\n }\n\n return expandPaneSize;\n }\n\n private setIcons() {\n const { expandIcon, minimizeIcon } = this.getIconNames();\n this.expandIcon = expandIcon;\n this.minimizeIcon = minimizeIcon;\n }\n\n private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n let expandIcon = '';\n let minimizeIcon = '';\n\n switch (this.composition) {\n case 'left':\n expandIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n minimizeIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n break;\n case 'right':\n expandIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n minimizeIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n break;\n case 'bottom':\n expandIcon = 'double-chevron-down';\n minimizeIcon = 'double-chevron-up';\n break;\n case 'top':\n expandIcon = 'double-chevron-up';\n minimizeIcon = 'double-chevron-down';\n break;\n }\n\n return { expandIcon, minimizeIcon };\n }\n\n private getKey() {\n return (this.animationCounter++).toString();\n }\n\n private animateVerticalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n width: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n this.animateVerticalPadding('0px');\n } else {\n this.animateVerticalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateHorizontalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n height: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n if (!this.isMobile) this.animateHorizontalPadding('0px');\n } else {\n if (!this.isMobile) this.animateHorizontalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private removePadding() {\n anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: 0,\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: 0,\n paddingRight: 0,\n delay: 0,\n });\n }\n\n private animateHorizontalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingTop: size,\n paddingBottom: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateVerticalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingLeft: size,\n paddingRight: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private clearAnimations() {\n this.animations.forEach((animation) => animation.pause());\n this.animations.clear();\n this.animationCounter = 0;\n }\n\n @Watch('isMobile')\n onMobileChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.hostElement.style.removeProperty('min-height');\n this.onParentSizeChange();\n }\n\n @Watch('composition')\n onPositionChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.onParentSizeChange();\n }\n\n @Watch('hideOnCollapse')\n onHideOnCollapseChange(value: boolean) {\n this.onParentSizeChange();\n\n this.hideOnCollapseChanged.emit({\n slot: this.currentSlot,\n hideOnCollapse: value,\n });\n }\n\n @Watch('variant')\n onVariantChange(value: 'inline' \| 'floating') {\n this.floating = value === 'floating';\n\n this.variantChanged.emit({\n slot: this.currentSlot,\n variant: value,\n });\n }\n\n @Watch('borderless')\n onBorderlessChange(value: boolean) {\n this.borderlessChanged.emit({\n slot: this.currentSlot,\n borderless: value,\n });\n }\n\n @Watch('expanded')\n onExpandedChange() {\n this.onSizeChange();\n\n this.expandedChanged.emit({\n slot: this.currentSlot,\n expanded: this.expanded,\n });\n }\n\n @Watch('parentHeightPx')\n @Watch('parentWidthPx')\n onParentSizeChange() {\n this.clearAnimations();\n this.removePadding();\n\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.height = '100%';\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = expandPaneSize;\n this.animateHorizontalPadding('8px', 0);\n } else {\n this.hostElement.style.width = expandPaneSize;\n this.animateVerticalPadding('8px', 0);\n }\n }\n\n this.showContent = true;\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n }\n }\n }\n }\n\n @Watch('size')\n onSizeChange() {\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.minHeight = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n this.animateHorizontalFadeIn('100%');\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateHorizontalFadeIn(expandPaneSize);\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateVerticalFadeIn(expandPaneSize);\n }\n }\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.animateHorizontalFadeIn(this.collapsedPane);\n } else {\n this.animateVerticalFadeIn(this.collapsedPane);\n }\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'inline-color': !this.floating,\n 'mobile-overlay': this.expanded && this.isMobile,\n 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n 'bottom-expanded':\n this.expanded && !this.isMobileTop && this.isMobile,\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n [`${this.composition}-pane-border`]:\n !this.borderless && !this.isMobile && !this.floating,\n 'nav-left-border':\n !this.borderless &&\n !this.isMobile &&\n this.composition !== 'right' &&\n this.floating,\n 'mobile-border-top':\n !this.borderless &&\n this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'mobile-border-bottom':\n !this.borderless &&\n !this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'box-shadow': this.floating,\n 'aria-expanded': this.expanded,\n 'not-visible': this.hideOnCollapse && !this.expanded,\n }}\n >\n <aside\n class={{\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n 'mobile-pane': this.isMobile,\n expanded: this.expanded,\n }}\n >\n <div\n id=\"title-div\"\n class={{\n title:\n !this.isMobile && !this.hideOnCollapse && !this.showContent,\n 'title-finished':\n !this.isMobile && !this.hideOnCollapse && this.showContent,\n 'title-expanded':\n !this.isMobile && !this.hideOnCollapse && this.expanded,\n 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n 'title-mobile': this.isMobile,\n 'header-gap': !this.isMobile && !this.hideOnCollapse,\n }}\n >\n <ix-icon-button\n class=\"title-icon\"\n size=\"24\"\n icon={\n this.expanded\n ? this.isMobile \|\| this.hideOnCollapse\n ? 'close'\n : this.expandIcon\n : this.minimizeIcon\n }\n ghost\n onClick={() => {\n this.expanded = !this.expanded;\n }}\n aria-controls={this.composition + 'ToggleButton'}\n />\n <span\n class={{\n 'title-text': true,\n rotate:\n !this.expanded && !this.isMobile && this.isLeftRightPane,\n }}\n >\n {this.icon ? (\n <ix-icon size=\"24\" name={this.icon}></ix-icon>\n ) : null}\n <div class=\"title-text-overflow\">\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n </div>\n </span>\n </div>\n <div class=\"side-pane-content\" hidden={!this.showContent}>\n <slot></slot>\n </div>\n </aside>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-pane.entry.cjs.js","mappings":"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","names":["matchBreakpoint","applicationLayoutService","animation","anime","Animation","h","Host"],"sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n @if $composition {\n border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n }\n}\n\n:host {\n @include ix-component;\n background-color: var(--theme-color-2);\n display: flex;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n\n aside {\n width: 100%;\n height: 100%;\n }\n\n .title-text {\n display: flex;\n align-items: center;\n gap: var(--theme-space-1);\n overflow: hidden;\n\n .title-text-overflow {\n width: 100%;\n height: 100%;\n display: contents;\n\n {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n }\n }\n\n .header-gap {\n gap: var(--theme-space-1);\n }\n\n .top-bottom-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane {\n display: flex;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1);\n\n .title-text {\n flex-direction: row-reverse;\n justify-content: start;\n flex-direction: row;\n }\n\n .rotate {\n writing-mode: vertical-lr;\n text-orientation: mixed;\n transform: rotate(180deg);\n flex-direction: row-reverse;\n\n ix-icon {\n transform: rotate(90deg);\n }\n }\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane.expanded {\n flex-direction: column;\n }\n\n .mobile-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title-mobile {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n margin: var(--theme-space-1) var(--theme-space-2);\n }\n }\n\n .side-pane-content {\n padding: var(--theme-space-1) var(--theme-space-2);\n overflow: auto;\n height: 100%;\n width: 100%;\n }\n}\n\n:host(.not-visible) {\n display: none;\n}\n\n:host(.inline-color) {\n background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n @include set-border(right);\n}\n\n:host(.right-pane-border) {\n @include set-border(left);\n}\n\n:host(.top-pane-border) {\n @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n width: 100%;\n position: absolute;\n z-index: 100 !important;\n\n .side-pane-content {\n height: calc(100% - 2.5rem);\n }\n}\n\n:host(.mobile-border-top) {\n @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n @include set-border(top);\n}\n\n:host(.top-expanded) {\n top: 0;\n}\n\n:host(.bottom-expanded) {\n bottom: 0;\n}\n\n:host(.left-right-pane) {\n height: 100%;\n}\n\n:host(.top-bottom-pane) {\n width: 100%;\n}\n","/\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\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\nexport type Composition = 'top' \| 'left' \| 'bottom' \| 'right';\nexport type ExpandedChangedEvent = {\n slot: string;\n expanded: boolean;\n};\nexport type SlotChangedEvent = {\n slot: string;\n newSlot: string;\n};\nexport type HideOnCollapseChangedEvent = {\n slot: string;\n hideOnCollapse: boolean;\n};\nexport type VariantChangedEvent = {\n slot: string;\n variant: 'floating' \| 'inline';\n};\nexport type BorderlessChangedEvent = {\n slot: string;\n borderless: boolean;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-pane',\n styleUrl: 'pane.scss',\n shadow: true,\n})\nexport class Pane {\n @Element() hostElement!: HTMLIxPaneElement;\n\n /\n Title of the side panel\n /\n @Prop() heading?: string;\n\n /\n Variant of the side pane.\n * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n /\n @Prop() variant: 'floating' \| 'inline' = 'inline';\n\n /\n Define if the pane should have a collapsed state\n /\n @Prop() hideOnCollapse: boolean = false;\n\n /\n The maximum size of the sidebar, when it is expanded\n /\n @Prop() size:\n \| '240px'\n \| '320px'\n \| '360px'\n \| '480px'\n \| '600px'\n \| '33%'\n \| '50%' = '240px';\n\n /\n Toggle the border of the pane.\n * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n /\n @Prop() borderless: boolean = false;\n\n /\n State of the pane\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n Defines the position of the pane inside it's container.\n * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n /\n @Prop({ mutable: true }) composition: Composition = 'top';\n\n /\n Name of the icon\n /\n @Prop() icon?: string;\n\n /\n @internal\n * Prevents overwriting of the variant and borderless property when used inside layout\n /\n @Prop() ignoreLayoutSettings: boolean = false;\n\n /\n @internal\n /\n @Prop({ mutable: true }) isMobile: boolean = false;\n\n /\n This event is triggered when the pane either expands or contracts\n /\n @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() variantChanged!: EventEmitter<VariantChangedEvent>;\n\n /\n This event is triggered when the variant of the pane is changed\n /\n @Event() borderlessChanged!: EventEmitter<BorderlessChangedEvent>;\n\n /\n @internal\n /\n @Event() hideOnCollapseChanged!: EventEmitter<HideOnCollapseChangedEvent>;\n\n /\n @internal\n */\n @Event() slotChanged!: EventEmitter<SlotChangedEvent>;\n\n @State() private expandIcon = '';\n @State() private showContent = false;\n @State() private minimizeIcon = '';\n @State() private floating = false;\n @State() private parentWidthPx = 0;\n @State() private parentHeightPx = 0;\n\n private static readonly validPositions = ['top', 'left', 'bottom', 'right'];\n private static readonly collapsedPane = '40px';\n private static readonly collapsedPaneMobile = '48px';\n private readonly animations: Map<string, anime.AnimeInstance> = new Map();\n private animationCounter = 0;\n\n private mutationObserver?: MutationObserver;\n private resizeObserver?: ResizeObserver;\n\n get currentSlot() {\n return this.hostElement.getAttribute('slot');\n }\n\n get isBottomTopPane() {\n return this.composition === 'bottom' \|\| this.composition === 'top';\n }\n\n get isLeftRightPane() {\n return this.composition === 'left' \|\| this.composition === 'right';\n }\n\n get isMobileTop() {\n return this.composition === 'top' \|\| this.composition === 'left';\n }\n\n componentWillLoad() {\n this.setIcons();\n\n this.floating = this.variant === 'floating';\n\n if (this.expanded) {\n this.onParentSizeChange();\n }\n\n this.isMobile = matchBreakpoint('sm');\n applicationLayoutService.onChange.on(() => {\n this.isMobile = matchBreakpoint('sm');\n });\n\n if (this.currentSlot) {\n this.setPosition(this.currentSlot);\n }\n\n this.mutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'slot'\n ) {\n const newSlot = this.currentSlot;\n const oldSlot = mutation.oldValue;\n\n if (newSlot !== oldSlot) {\n this.slotChanged.emit({\n slot: oldSlot ?? '',\n newSlot: newSlot ?? '',\n });\n\n if (newSlot) {\n this.setPosition(newSlot);\n }\n }\n }\n });\n });\n this.mutationObserver.observe(this.hostElement, {\n attributes: true,\n attributeOldValue: true,\n });\n\n const parentElement = this.hostElement.parentElement;\n this.resizeObserver = new ResizeObserver((entries) => {\n this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n });\n if (parentElement) this.resizeObserver.observe(parentElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n private setPosition(value: string) {\n if (Pane.validPositions.includes(value)) {\n this.composition = value as Composition;\n }\n }\n\n private getExpandPaneSize() {\n let expandPaneSize: string;\n\n if (this.isBottomTopPane) {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentHeightPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n }\n }\n } else {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentWidthPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n }\n }\n }\n\n return expandPaneSize;\n }\n\n private setIcons() {\n const { expandIcon, minimizeIcon } = this.getIconNames();\n this.expandIcon = expandIcon;\n this.minimizeIcon = minimizeIcon;\n }\n\n private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n let expandIcon = '';\n let minimizeIcon = '';\n\n switch (this.composition) {\n case 'left':\n expandIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n minimizeIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n break;\n case 'right':\n expandIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n minimizeIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n break;\n case 'bottom':\n expandIcon = 'double-chevron-down';\n minimizeIcon = 'double-chevron-up';\n break;\n case 'top':\n expandIcon = 'double-chevron-up';\n minimizeIcon = 'double-chevron-down';\n break;\n }\n\n return { expandIcon, minimizeIcon };\n }\n\n private getKey() {\n return (this.animationCounter++).toString();\n }\n\n private animateVerticalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n width: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n this.animateVerticalPadding('0px');\n } else {\n this.animateVerticalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateHorizontalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n height: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n if (!this.isMobile) this.animateHorizontalPadding('0px');\n } else {\n if (!this.isMobile) this.animateHorizontalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private removePadding() {\n anime({\n targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n duration: 0,\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: 0,\n paddingRight: 0,\n delay: 0,\n });\n }\n\n private animateHorizontalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n duration: duration,\n paddingTop: size,\n paddingBottom: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateVerticalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n duration: duration,\n paddingLeft: size,\n paddingRight: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private clearAnimations() {\n this.animations.forEach((animation) => animation.pause());\n this.animations.clear();\n this.animationCounter = 0;\n }\n\n @Watch('isMobile')\n onMobileChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.hostElement.style.removeProperty('min-height');\n this.onParentSizeChange();\n }\n\n @Watch('composition')\n onPositionChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.onParentSizeChange();\n }\n\n @Watch('hideOnCollapse')\n onHideOnCollapseChange(value: boolean) {\n this.onParentSizeChange();\n\n this.hideOnCollapseChanged.emit({\n slot: this.currentSlot ?? '',\n hideOnCollapse: value,\n });\n }\n\n @Watch('variant')\n onVariantChange(value: 'inline' \| 'floating') {\n this.floating = value === 'floating';\n\n this.variantChanged.emit({\n slot: this.currentSlot ?? '',\n variant: value,\n });\n }\n\n @Watch('borderless')\n onBorderlessChange(value: boolean) {\n this.borderlessChanged.emit({\n slot: this.currentSlot ?? '',\n borderless: value,\n });\n }\n\n private dispatchExpandedChangedEvent() {\n const event = this.expandedChanged.emit({\n slot: this.currentSlot ?? '',\n expanded: !this.expanded,\n });\n\n if (!event.defaultPrevented) {\n this.expanded = !this.expanded;\n }\n }\n\n @Watch('parentHeightPx')\n @Watch('parentWidthPx')\n onParentSizeChange() {\n this.clearAnimations();\n this.removePadding();\n\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.height = '100%';\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = expandPaneSize;\n this.animateHorizontalPadding('8px', 0);\n } else {\n this.hostElement.style.width = expandPaneSize;\n this.animateVerticalPadding('8px', 0);\n }\n }\n\n this.showContent = true;\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : Pane.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : Pane.collapsedPane;\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : Pane.collapsedPane;\n }\n }\n }\n }\n\n @Watch('expanded')\n @Watch('size')\n onSizeChange() {\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.minHeight = this.hideOnCollapse\n ? '0'\n : Pane.collapsedPaneMobile;\n this.animateHorizontalFadeIn('100%');\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : Pane.collapsedPane;\n this.animateHorizontalFadeIn(expandPaneSize);\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : Pane.collapsedPane;\n this.animateVerticalFadeIn(expandPaneSize);\n }\n }\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = Pane.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.animateHorizontalFadeIn(Pane.collapsedPane);\n } else {\n this.animateVerticalFadeIn(Pane.collapsedPane);\n }\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'inline-color': !this.floating,\n 'mobile-overlay': this.expanded && this.isMobile,\n 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n 'bottom-expanded':\n this.expanded && !this.isMobileTop && this.isMobile,\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n [`${this.composition}-pane-border`]:\n !this.borderless && !this.isMobile && !this.floating,\n 'nav-left-border':\n !this.borderless &&\n !this.isMobile &&\n this.composition !== 'right' &&\n this.floating,\n 'mobile-border-top':\n !this.borderless &&\n this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'mobile-border-bottom':\n !this.borderless &&\n !this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'box-shadow': this.floating,\n 'aria-expanded': this.expanded,\n 'not-visible': this.hideOnCollapse && !this.expanded,\n }}\n >\n <aside\n id={`pane-${this.composition}`}\n class={{\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n 'mobile-pane': this.isMobile,\n expanded: this.expanded,\n }}\n >\n <div\n id=\"title-div\"\n class={{\n title:\n !this.isMobile && !this.hideOnCollapse && !this.showContent,\n 'title-finished':\n !this.isMobile && !this.hideOnCollapse && this.showContent,\n 'title-expanded':\n !this.isMobile && !this.hideOnCollapse && this.expanded,\n 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n 'title-mobile': this.isMobile,\n 'header-gap': !this.isMobile && !this.hideOnCollapse,\n }}\n >\n <ix-icon-button\n class=\"title-icon\"\n size=\"24\"\n icon={\n this.expanded\n ? this.isMobile \|\| this.hideOnCollapse\n ? 'close'\n : this.expandIcon\n : this.minimizeIcon\n }\n ghost\n onClick={() => this.dispatchExpandedChangedEvent()}\n aria-controls={`pane-${this.composition}`}\n />\n <span\n class={{\n 'title-text': true,\n rotate:\n !this.expanded && !this.isMobile && this.isLeftRightPane,\n }}\n >\n {this.icon ? (\n <ix-icon size=\"24\" name={this.icon}></ix-icon>\n ) : null}\n <div class=\"title-text-overflow\">\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n </div>\n </span>\n </div>\n <div class=\"side-pane-content\" hidden={!this.showContent}>\n <slot></slot>\n </div>\n </aside>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0;margin-right:0}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center;padding-right:0.5rem !important}:host(.align-left) .container{justify-content:flex-start}";
 const IxPillStyle0 = pillCss;
@@ -27,13 +27,13 @@ const Pill = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (index.h(index.Host, { key: '1d4d88d976564778835cd02e28d5ede6fe4dd6f7', style: this.variant === 'custom'
+        return (index.h(index.Host, { key: '1bbd11e090e378d36040a08ca0f6acc01bdfc2f7', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, index.h("div", { key: '74474d69acc5d47b9bf6c5ebe12f676155a9e87d', style: Object.assign({}, customStyle), class: {
+            } }, index.h("div", { key: '185e005a8842833cfe55a19ec1c06dc45afa2647', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -47,10 +47,10 @@ const Pill = class {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, index.h("ix-icon", { key: 'c70dcfe5f55c77484cf3300dca53f6a4e55d5caf', class: {
+            } }, index.h("ix-icon", { key: '256012d0b9ff2c19f0f5787453365f9c3a14d150', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), index.h("span", { key: 'b3d056721cb891a986ac3196a9fcf049c8b366f9', class: "slot-container" }, index.h("slot", { key: 'a42505aafc70d545e3ff8020c80f67067b3eac8c' })))));
+            }, name: this.icon, size: '16' }), index.h("span", { key: '7e6df9c95355b084a795a5836ed1b2525e6792ea', class: "slot-container" }, index.h("slot", { key: '9a454c6e3b13bd688dff6ba53304ea04bc9aa5e6' })))));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"ix-pill.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,ojKAAojK,CAAC;AACrkK,qBAAe,OAAO;;MCeT,IAAI;;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;;IAEzB,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QACD,QACEA,QAACC,UAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,IAEDD,kEACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAEDA,sEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;aACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACFA,mEAAM,KAAK,EAAC,gBAAgB,IAC1BA,oEAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.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@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: inline-block;\n position: relative;\n height: 1.25rem;\n max-height: 1.25rem;\n margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n .container {\n height: 100%;\n justify-content: center;\n padding-right: 0.5rem !important;\n }\n}\n\n:host(.align-left) {\n .container {\n justify-content: flex-start;\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\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n shadow: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n \n @deprecated since 2.1.0 use `pill-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() pillColor: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.pillColor ?? this.color,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n return (\n <Host\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.pillColor ?? this.color,\n }\n : {}\n }\n title={this.el.textContent}\n class={{\n 'align-left': this.alignLeft,\n }}\n >\n <div\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: false,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n custom: this.variant === 'custom',\n closable: false,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-pill.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,ojKAAojK,CAAC;AACrkK,qBAAe,OAAO;;MCeT,IAAI;;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;;IAEzB,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QACD,QACEA,QAACC,UAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,IAEDD,kEACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAEDA,sEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;aACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACFA,mEAAM,KAAK,EAAC,gBAAgB,IAC1BA,oEAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.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@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: inline-block;\n position: relative;\n height: 1.25rem;\n max-height: 1.25rem;\n margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n .container {\n height: 100%;\n justify-content: center;\n padding-right: 0.5rem !important;\n }\n}\n\n:host(.align-left) {\n .container {\n justify-content: flex-start;\n }\n}\n","/\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\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-pill',\n styleUrl: 'pill.scss',\n shadow: true,\n})\nexport class Pill {\n @Element() el: HTMLIxPillElement;\n\n /\n Pill variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Show pill as outline\n /\n @Prop() outline = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n \n @deprecated since 2.1.0 use `pill-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() pillColor: string \| undefined;\n\n /\n Align pill content left\n */\n @Prop() alignLeft = false;\n\n render() {\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.pillColor ?? this.color,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n return (\n <Host\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.pillColor ?? this.color,\n }\n : {}\n }\n title={this.el.textContent}\n class={{\n 'align-left': this.alignLeft,\n }}\n >\n <div\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: false,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n custom: this.variant === 'custom',\n closable: false,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'16'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const pushCardCss = ":host{display:block;position:relative}:host .icon{transform:scale(1.25)}:host .notification{font-size:40px}:host ix-card-content{height:11rem}";
 const IxPushCardStyle0 = pushCardCss;
@@ -22,7 +22,7 @@ const PushCard = class {
         const color = this.variant === 'insight' || this.variant === 'notification'
             ? 'std'
             : undefined;
-        return (index.h(index.Host, { key: '9ba9fd8e6cc9f2b74e89fbbcd0c09a04aca45ac2' }, index.h("ix-card", { key: '913618b3fc69c1e59c3bbeb4c92569b2754ff3ae', variant: this.variant }, index.h("ix-card-content", { key: 'bb75a940ce3ac891fe947f4ed9e542c36a492f92' }, index.h("ix-card-title", { key: '37f4faab2368f341dd835fffe64b5915e1c4b322' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: '42059a2ed174f15fdcce1ddb599bc831afade5b1', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: '9e3b8df6148f3b8e3d577d8ece5253b14c85a0dd', name: "title-action" })), index.h("ix-typography", { key: 'b7473e9fd9fdaee3045ec4884544469a9a6457fe', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '26c212e7f6111df4d353525fda6b3a76ee7dea3c', color: color }, this.subheading)), index.h("ix-card-accordion", { key: 'a779591ee7405f4a725f1c04abbc7223064ee885', collapse: this.collapse }, index.h("slot", { key: '5d42faa67c254a1d8541c525cb8e0e08e6b0d095' })))));
+        return (index.h(index.Host, { key: '4927262c7896d5db2eb939fa8337ebadb6774229' }, index.h("ix-card", { key: '03336f0cc37dde84b0a00ac7fd3eab26258e2ac5', variant: this.variant }, index.h("ix-card-content", { key: '362537f589ab27e6a2a2ac4e732e384b2f08bb52' }, index.h("ix-card-title", { key: 'df79854b0f6b160938c5cb8111cb68e049dc2a21' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: '96a30b27bd3479dccc86974a0c356cc20db07952', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: '8c5a4c60df7d7b8785bbb71ea121d9966b531b6f', name: "title-action" })), index.h("ix-typography", { key: '193883ef7009f3f5b28505333ad4457f9a76bf24', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '1695ab207b51d282b96311b08fd0f1dc01daac36', color: color }, this.subheading)), index.h("ix-card-accordion", { key: 'ae91fcfe96e7d56e47d6f4579c11e959ceb84f5f', collapse: this.collapse }, index.h("slot", { key: 'f51b6187302421c78a9a81085609b5f96f6017d4' })))));
     }
 };
 PushCard.style = IxPushCardStyle0;

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

	@@ -1 +1 @@
1	- {"file":"ix-push-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,gJAAgJ,CAAC;AACrK,yBAAe,WAAW;;MCsBb,QAAQ;;;oBAIgB,SAAS;;;;~~uBAoBT~~,SAAS;wBAMhB,IAAI;;IAEhC,MAAM;;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;cACzD,KAAK;cACL,SAAS,CAAC;QAEhB,QACEA,QAACC,UAAI,uDACHD,sEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5BA,gFACEA,8EACG,IAAI,CAAC,IAAI,IACRA,qBAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACRA,mEAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ,EAC5DA,mEAAM,IAAI,EAAC,cAAc,GAAQ,CACnB,EAChBA,4EAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC,EAChBA,4EAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C,EAClBA,gFAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxCA,oEAAa,CACK,CACZ,CACL,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.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\n:host {\n display: block;\n position: relative;\n\n .icon {\n transform: scale(1.25);\n }\n\n .notification {\n font-size: 40px;\n }\n\n ix-card-content {\n height: 11rem;\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\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-push-card',\n styleUrl: 'push-card.scss',\n shadow: true,\n})\nexport class PushCard {\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card KPI value\n /\n @Prop() notification: string;\n\n /\n Card heading\n /\n @Prop() heading: string;\n\n /\n Card subheading\n /\n @Prop() subheading: string;\n\n /\n Card variant\n /\n @Prop() variant: PushCardVariant = 'insight';\n\n /\n Collapse the card\n * @since 2.1.0\n */\n @Prop() collapse: boolean = true;\n\n render() {\n const color: TypographyColors =\n this.variant === 'insight' \|\| this.variant === 'notification'\n ? 'std'\n : undefined;\n\n return (\n <Host>\n <ix-card variant={this.variant}>\n <ix-card-content>\n <ix-card-title>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <span class={'notification'}>{this.notification ?? 0}</span>\n <slot name=\"title-action\"></slot>\n </ix-card-title>\n <ix-typography color={color} format=\"h4\">\n {this.heading}\n </ix-typography>\n <ix-typography color={color}>{this.subheading}</ix-typography>\n </ix-card-content>\n <ix-card-accordion collapse={this.collapse}>\n <slot></slot>\n </ix-card-accordion>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-push-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,gJAAgJ,CAAC;AACrK,yBAAe,WAAW;;MCsBb,QAAQ;;;oBAIgB,SAAS;;;;uBAqBT,SAAS;wBAMhB,IAAI;;IAEhC,MAAM;;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;cACzD,KAAK;cACL,SAAS,CAAC;QAEhB,QACEA,QAACC,UAAI,uDACHD,sEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5BA,gFACEA,8EACG,IAAI,CAAC,IAAI,IACRA,qBAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACRA,mEAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ,EAC5DA,mEAAM,IAAI,EAAC,cAAc,GAAQ,CACnB,EAChBA,4EAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC,EAChBA,4EAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C,EAClBA,gFAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxCA,oEAAa,CACK,CACZ,CACL,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.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\n:host {\n display: block;\n position: relative;\n\n .icon {\n transform: scale(1.25);\n }\n\n .notification {\n font-size: 40px;\n }\n\n ix-card-content {\n height: 11rem;\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\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-push-card',\n styleUrl: 'push-card.scss',\n shadow: true,\n})\nexport class PushCard {\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card KPI value\n /\n @Prop() notification?: string;\n\n /\n Card heading\n /\n @Prop() heading?: string;\n\n /\n Card subheading\n /\n @Prop() subheading?: string;\n\n /\n Card variant\n * @deprecated variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.\n /\n @Prop() variant: PushCardVariant = 'insight';\n\n /\n Collapse the card\n * @since 2.1.0\n */\n @Prop() collapse: boolean = true;\n\n render() {\n const color: TypographyColors \| undefined =\n this.variant === 'insight' \|\| this.variant === 'notification'\n ? 'std'\n : undefined;\n\n return (\n <Host>\n <ix-card variant={this.variant}>\n <ix-card-content>\n <ix-card-title>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <span class={'notification'}>{this.notification ?? 0}</span>\n <slot name=\"title-action\"></slot>\n </ix-card-title>\n <ix-typography color={color} format=\"h4\">\n {this.heading}\n </ix-typography>\n <ix-typography color={color}>{this.subheading}</ix-typography>\n </ix-card-content>\n <ix-card-accordion collapse={this.collapse}>\n <slot></slot>\n </ix-card-accordion>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}