@siemens/ix 4.4.0 → 5.0.0

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.js');
 var anime_esm = require('./anime.esm-AXTM6yn_.js');
-var animation = require('./animation-D5wGQwTg.js');
-var service = require('./service-DuiJmf7R.js');
+var animation = require('./animation-hxDbANsw.js');
 var breakpoints = require('./breakpoints-C5ZrUCbZ.js');
 var disposableEventListener = require('./disposable-event-listener-BALEIeXq.js');
-var a11y = require('./a11y-DldCLr8D.js');
-require('./typed-event-DxWATHPL.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var service = require('./service-CRjXhKel.js');
+require('./typed-event-Bw4IfJC0.js');
 
 const paneCss = () => `:host(.floating-pane){--ix-pane--background:var(--theme-pane-floating--background);--ix-pane--border-color:var(--theme-pane-floating--border-color);--ix-pane--color:var(--theme-pane-floating--color);--ix-pane--box-shadow:var(--theme-pane-floating--box-shadow)}:host(.inline-pane){--ix-pane--background:var(--theme-pane-inline--background);--ix-pane--border-color:var(--theme-pane-inline--border-color);--ix-pane--color:var(--theme-pane-inline--color);--ix-pane--box-shadow:var(--theme-pane-inline--box-shadow)}:host{display:flex;position:relative;overflow:hidden;box-sizing:border-box;box-shadow:var(--ix-pane--box-shadow);background-color:var(--ix-pane--background)}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host aside{width:100%;height:100%}:host .pane-icon{color:var(--ix-pane--color)}:host .slot-header-content{display:inline-block;position:relative;max-height:2rem}:host .title-text{display:flex;align-items:center;gap:var(--theme-space-1);overflow:hidden}:host .title-text .title-text-overflow{width:100%;height:100%;display:contents}:host .title-text .title-text-overflow *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .header-gap{gap:var(--theme-space-1)}:host .top-bottom-pane{display:flex;flex-direction:column;flex-grow:1}:host .top-bottom-pane .title{display:flex;flex-direction:row;align-items:center;margin:var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)}:host .top-bottom-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .top-bottom-pane .title-expanded{display:flex;flex-direction:row}:host .top-bottom-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane{display:flex;flex-grow:1}:host .left-right-pane .title{display:flex;flex-direction:column;align-items:center;margin:var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)}:host .left-right-pane .title .title-text{flex-direction:row-reverse;justify-content:start;flex-direction:row}:host .left-right-pane .title .rotate{writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);flex-direction:row-reverse}:host .left-right-pane .title .rotate ix-icon{transform:rotate(90deg)}:host .left-right-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane .title-expanded{display:flex;flex-direction:row}:host .left-right-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane.expanded{flex-direction:column}:host .mobile-pane{display:flex;flex-direction:column;flex-grow:1}:host .mobile-pane .title-mobile{display:flex;flex-direction:row-reverse;justify-content:space-between;margin:var(--theme-space-1) var(--theme-space-2)}:host .side-pane-content{padding:var(--theme-space-1) var(--theme-space-2) var(--theme-space-3) var(--theme-space-2);overflow:auto;height:100%;width:100%}:host .slot-header{max-height:2rem;max-width:unset}:host .slot-header.rotate{max-height:unset;max-width:2rem}:host(.not-visible){display:none}:host(.nav-left-border){border-left:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.left-pane-border){border-right:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.right-pane-border){border-left:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.top-pane-border){border-bottom:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.bottom-pane-border){border-top:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.mobile-overlay){width:100%;position:absolute;z-index:100 !important}:host(.mobile-overlay) .side-pane-content{height:calc(100% - 2.5rem)}:host(.mobile-border-top){border-bottom:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.mobile-border-bottom){border-top:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.top-expanded){top:0}:host(.bottom-expanded){bottom:0}:host(.left-right-pane){height:100%}:host(.top-bottom-pane){width:100%}`;
 
@@ -20,55 +20,98 @@ const Pane = class {
         this.borderlessChanged = index.createEvent(this, "borderlessChanged", 7);
         this.hideOnCollapseChanged = index.createEvent(this, "hideOnCollapseChanged", 7);
         this.slotChanged = index.createEvent(this, "slotChanged", 7);
-        /**
-         * Variant of the side pane.
-         * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.
-         */
-        this.variant = 'inline';
-        /**
-         * Define if the pane should have a collapsed state
-         */
-        this.hideOnCollapse = false;
-        /**
-         * The maximum size of the sidebar, when it is expanded
-         */
-        this.size = '240px';
-        /**
-         * Toggle the border of the pane.
-         * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.
-         */
-        this.borderless = false;
-        /**
-         * State of the pane
-         */
-        this.expanded = false;
-        /**
-         * Defines the position of the pane inside it's container.
-         * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.
-         */
-        this.composition = 'top';
-        /**
-         * If true, the pane will close when clicking outside of it
-         */
-        this.closeOnClickOutside = false;
-        /**
-         * @internal
-         * Prevents overwriting of the variant and borderless property when used inside layout
-         */
-        this.ignoreLayoutSettings = false;
-        /**
-         * @internal
-         */
-        this.isMobile = false;
-        this.expandIcon = '';
-        this.showContent = false;
-        this.minimizeIcon = '';
-        this.floating = false;
-        this.parentWidthPx = 0;
-        this.parentHeightPx = 0;
-        this.animations = new Map();
-        this.animationCounter = 0;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Title of the side panel
+     */
+    heading;
+    /**
+     * Variant of the side pane.
+     * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.
+     */
+    variant = 'inline';
+    /**
+     * Define if the pane should have a collapsed state
+     */
+    hideOnCollapse = false;
+    /**
+     * The maximum size of the sidebar, when it is expanded
+     */
+    size = '240px';
+    /**
+     * Toggle the border of the pane.
+     * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.
+     */
+    borderless = false;
+    /**
+     * State of the pane
+     */
+    expanded = false;
+    /**
+     * Defines the position of the pane inside it's container.
+     * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.
+     */
+    composition = 'top';
+    /**
+     * Name of the icon
+     */
+    icon;
+    /**
+     * If true, the pane will close when clicking outside of it
+     */
+    closeOnClickOutside = false;
+    /**
+     * ARIA label for the icon
+     */
+    ariaLabelIcon;
+    /**
+     * ARIA label close or collapse button
+     */
+    ariaLabelCollapseCloseButton;
+    /**
+     * @internal
+     * Prevents overwriting of the variant and borderless property when used inside layout
+     */
+    ignoreLayoutSettings = false;
+    /**
+     * @internal
+     */
+    isMobile = false;
+    /**
+     * This event is triggered when the pane either expands or contracts
+     */
+    expandedChanged;
+    /**
+     * This event is triggered when the variant of the pane is changed
+     */
+    variantChanged;
+    /**
+     * This event is triggered when the variant of the pane is changed
+     */
+    borderlessChanged;
+    /**
+     * @internal
+     */
+    hideOnCollapseChanged;
+    /**
+     * @internal
+     */
+    slotChanged;
+    expandIcon = '';
+    showContent = false;
+    minimizeIcon = '';
+    floating = false;
+    parentWidthPx = 0;
+    parentHeightPx = 0;
+    static validPositions = ['top', 'left', 'bottom', 'right'];
+    static collapsedPane = '40px';
+    static collapsedPaneMobile = '48px';
+    animations = new Map();
+    animationCounter = 0;
+    mutationObserver;
+    resizeObserver;
+    disposableWindowClick;
     get currentSlot() {
         return this.hostElement.getAttribute('slot');
     }
@@ -82,20 +125,17 @@ const Pane = class {
         return this.composition === 'top' || this.composition === 'left';
     }
     disconnectedCallback() {
-        var _a, _b, _c;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        (_c = this.disposableWindowClick) === null || _c === void 0 ? void 0 : _c.call(this);
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
+        this.disposableWindowClick?.();
     }
     onExpandedChange() {
-        var _a;
         if (!this.closeOnClickOutside || !this.expanded) {
-            (_a = this.disposableWindowClick) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.disposableWindowClick?.();
             return;
         }
         this.disposableWindowClick = disposableEventListener.addDisposableEventListener(window, 'click', (event) => {
-            var _a;
-            const path = ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) || [];
+            const path = event.composedPath?.() || [];
             if (!path.includes(this.hostElement)) {
                 this.dispatchExpandedChangedEvent();
             }
@@ -123,8 +163,8 @@ const Pane = class {
                     const oldSlot = mutation.oldValue;
                     if (newSlot !== oldSlot) {
                         this.slotChanged.emit({
-                            slot: oldSlot !== null && oldSlot !== void 0 ? oldSlot : '',
-                            newSlot: newSlot !== null && newSlot !== void 0 ? newSlot : '',
+                            slot: oldSlot ?? '',
+                            newSlot: newSlot ?? '',
                         });
                         if (newSlot) {
                             this.setPosition(newSlot);
@@ -342,33 +382,29 @@ const Pane = class {
         this.onParentSizeChange();
     }
     onHideOnCollapseChange(value) {
-        var _a;
         this.onParentSizeChange();
         this.hideOnCollapseChanged.emit({
-            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
+            slot: this.currentSlot ?? '',
             hideOnCollapse: value,
         });
     }
     onVariantChange(value) {
-        var _a;
         this.floating = value === 'floating';
         this.variantChanged.emit({
-            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
+            slot: this.currentSlot ?? '',
             variant: value,
         });
     }
     onBorderlessChange(value) {
-        var _a;
         this.borderlessChanged.emit({
-            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
+            slot: this.currentSlot ?? '',
             borderless: value,
         });
     }
     dispatchExpandedChangedEvent() {
-        var _a;
         const newExpandedValue = !this.expanded;
         const event = this.expandedChanged.emit({
-            slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : '',
+            slot: this.currentSlot ?? '',
             expanded: newExpandedValue,
         });
         if (!event.defaultPrevented) {
@@ -468,7 +504,7 @@ const Pane = class {
         else {
             paneButtonAriaLabel = 'Expand pane';
         }
-        return (index.h(index.Host, { key: '721b37ecf81c48cf26977b3e2db0f76541632096', class: {
+        return (index.h(index.Host, { key: '7cbc0656b5c4c2ec4057733c7eb652004ebdc383', class: {
                 'floating-pane': this.floating,
                 'inline-pane': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
@@ -492,30 +528,29 @@ const Pane = class {
                     !this.expanded &&
                     !this.floating,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            }, "aria-expanded": a11y.a11yBoolean(this.expanded) }, index.h("aside", { key: '206a7094a94dcb5156b1ed407dd7db20838352bc', id: `pane-${this.composition}`, class: {
+            }, "aria-expanded": a11y.a11yBoolean(this.expanded) }, index.h("aside", { key: '7c1ea7ef3cf622297ea4363908baf81a9db99dda', 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: '1ecb31589789658568a199f696876aac4dfdbd96', id: "title-div", class: {
+            } }, index.h("div", { key: 'f6292f3f589efc59514c6998a2ccb7cce694e40e', 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: 'bfa93a835e4920d11630a71c1a0b39f92df350ab', class: "title-icon", size: "24", icon: this.expanded
+            } }, index.h("ix-icon-button", { key: '8b1a984c693aae6838e0c502fa8002ca64d9ca45', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? index$1.iconClose
                     : this.expandIcon
                 : this.minimizeIcon, iconColor: this.expanded && (this.isMobile || this.hideOnCollapse)
                 ? 'color-soft-text'
-                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": paneButtonAriaLabel }), index.h("div", { key: '3b44fd29336d3f5c101a5d686980b2393a1f2c40', class: {
+                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": paneButtonAriaLabel }), index.h("div", { key: '794a1436c031004c6353bbaa0a6c232ac26fe173', class: {
                 'title-text': true,
                 rotate: rotate,
-            } }, this.icon && (index.h("ix-icon", { key: 'd34df615df28f1ae6914c0a857735116d77502bc', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), index.h("div", { key: '4d02fb8581426e62c241a2c1e6c5540831a367be', class: "title-text-overflow" }, index.h("ix-typography", { key: '203fa19a4972dc9c3ed8654c8c6d176fd168437d', format: "h4" }, this.heading)), this.expanded && (index.h("div", { key: 'd0aca67aed9c641414da008290ad12371561a569', class: "slot-header" }, index.h("slot", { key: '0ec16f51b61c80b66eb9e1b17045888db8be7d2c', name: "header" }))))), index.h("div", { key: 'fa06f41c546340e08a249774fbe9fea9aa8513b7', class: "side-pane-content", hidden: !this.showContent }, index.h("slot", { key: '7cca7b8b2c9198fbd1921ab7ff58ef2d31548f1e' })))));
+            } }, this.icon && (index.h("ix-icon", { key: 'ec37b0262e2c6b9111753e91388b82db166f7e4c', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), index.h("div", { key: '525da27f90b187e64800360a2e49ee3547ea23d6', class: "title-text-overflow" }, index.h("ix-typography", { key: 'b11a3a538ffb8db6be4dee5f64d18f9d9e0b78a3', format: "h4" }, this.heading)), this.expanded && (index.h("div", { key: 'eee6ca859602eb76be791238ca93eda110a61fd9', class: "slot-header" }, index.h("slot", { key: 'c494d88c9d5c58a2d69a6c95e520e1864a80a275', name: "header" }))))), index.h("div", { key: '0ce9b176670c9493b900ef86e2d6f1ff0719910b', class: "side-pane-content", hidden: !this.showContent }, index.h("slot", { key: '34491085f2d7ccacba88b177c7db695062e42b29' })))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "expanded": [{
                 "onExpandedChange": 0
@@ -548,9 +583,6 @@ const Pane = class {
             }]
     }; }
 };
-Pane.validPositions = ['top', 'left', 'bottom', 'right'];
-Pane.collapsedPane = '40px';
-Pane.collapsedPaneMobile = '48px';
 Pane.style = paneCss();
 
 exports.ix_pane = Pane;