@siemens/ix 1.5.0-beta.0 → 1.5.0-beta.1

package/dist/types/components.d.ts

@@ -17,6 +17,7 @@ import { DropdownTriggerEvent } from "./components/dropdown/dropdown";
 import { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { IconButtonVariant } from "./components/icon-button/icon-button";
+import { IndexButtonVariant } from "./components/index-button/index-button";
 import { NotificationColor } from "./components/utils/notification-color";
 import { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
 import { SplitButtonVariant } from "./components/split-button/split-button";
@@ -38,6 +39,7 @@ export { DropdownTriggerEvent } from "./components/dropdown/dropdown";
 export { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
 export { FlipTileState } from "./components/flip-tile/flip-tile-state";
 export { IconButtonVariant } from "./components/icon-button/icon-button";
+export { IndexButtonVariant } from "./components/index-button/index-button";
 export { NotificationColor } from "./components/utils/notification-color";
 export { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
 export { SplitButtonVariant } from "./components/split-button/split-button";
@@ -90,6 +92,11 @@ export namespace Components {
           * Collapsed state
          */
         "collapsed": boolean;
+        /**
+          * Optional icon to be displayed next to the header label
+          * @since 1.5.0
+         */
+        "icon": string;
         /**
           * Label of blind
          */
@@ -635,12 +642,23 @@ export namespace Components {
     interface IxFlipTile {
         /**
           * Tmp property name
+          * @deprecated Will be removed in 2.0.0. Setting this property has no effect
          */
         "footer": string;
+        /**
+          * Height interpreted as REM
+          * @since 1.5.0
+         */
+        "height": number | 'auto';
         /**
           * Variation of the Flip
          */
         "state": FlipTileState;
+        /**
+          * Width interpreted as REM
+          * @since 1.5.0
+         */
+        "width": number | 'auto';
     }
     interface IxFlipTileContent {
     }
@@ -777,6 +795,16 @@ export namespace Components {
          */
         "variant": IconButtonVariant;
     }
+    interface IxIndexButton {
+        /**
+          * Selection state
+         */
+        "selected": boolean;
+        /**
+          * Button variant
+         */
+        "variant": IndexButtonVariant;
+    }
     interface IxInputGroup {
     }
     interface IxKpi {
@@ -1105,6 +1133,43 @@ export namespace Components {
     }
     interface IxModalExample {
     }
+    /**
+     * @since 1.5.0
+     */
+    interface IxPagination {
+        /**
+          * Advanced mode
+         */
+        "advanced": boolean;
+        /**
+          * Total number of pages
+         */
+        "count": number;
+        /**
+          * /**   i18n
+         */
+        "i18nItems": string;
+        /**
+          * i18n
+         */
+        "i18nOf": string;
+        /**
+          * i18n
+         */
+        "i18nPage": string;
+        /**
+          * Number of items shown at once. Can only be changed in advaced mode.
+         */
+        "itemCount": number;
+        /**
+          * Zero based index of currently selected page
+         */
+        "selectedPage": number;
+        /**
+          * Show item count in advanced mode
+         */
+        "showItemCount": boolean;
+    }
     interface IxPill {
         /**
           * Align pill content left
@@ -1395,7 +1460,7 @@ export namespace Components {
     interface IxToastContainer {
         "containerClass": string;
         "containerId": string;
-        "position": string;
+        "position": 'bottom-right' | 'top-right';
         /**
           * Display a toast message
           * @param config
@@ -1706,6 +1771,10 @@ export interface IxModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxModalElement;
 }
+export interface IxPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxPaginationElement;
+}
 export interface IxSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxSelectElement;
@@ -1958,6 +2027,12 @@ declare global {
         prototype: HTMLIxIconButtonElement;
         new (): HTMLIxIconButtonElement;
     };
+    interface HTMLIxIndexButtonElement extends Components.IxIndexButton, HTMLStencilElement {
+    }
+    var HTMLIxIndexButtonElement: {
+        prototype: HTMLIxIndexButtonElement;
+        new (): HTMLIxIndexButtonElement;
+    };
     interface HTMLIxInputGroupElement extends Components.IxInputGroup, HTMLStencilElement {
     }
     var HTMLIxInputGroupElement: {
@@ -2060,6 +2135,15 @@ declare global {
         prototype: HTMLIxModalExampleElement;
         new (): HTMLIxModalExampleElement;
     };
+    /**
+     * @since 1.5.0
+     */
+    interface HTMLIxPaginationElement extends Components.IxPagination, HTMLStencilElement {
+    }
+    var HTMLIxPaginationElement: {
+        prototype: HTMLIxPaginationElement;
+        new (): HTMLIxPaginationElement;
+    };
     interface HTMLIxPillElement extends Components.IxPill, HTMLStencilElement {
     }
     var HTMLIxPillElement: {
@@ -2229,6 +2313,7 @@ declare global {
         "ix-group-item": HTMLIxGroupItemElement;
         "ix-icon": HTMLIxIconElement;
         "ix-icon-button": HTMLIxIconButtonElement;
+        "ix-index-button": HTMLIxIndexButtonElement;
         "ix-input-group": HTMLIxInputGroupElement;
         "ix-kpi": HTMLIxKpiElement;
         "ix-map-navigation": HTMLIxMapNavigationElement;
@@ -2246,6 +2331,7 @@ declare global {
         "ix-modal": HTMLIxModalElement;
         "ix-modal-container": HTMLIxModalContainerElement;
         "ix-modal-example": HTMLIxModalExampleElement;
+        "ix-pagination": HTMLIxPaginationElement;
         "ix-pill": HTMLIxPillElement;
         "ix-select": HTMLIxSelectElement;
         "ix-select-item": HTMLIxSelectItemElement;
@@ -2316,6 +2402,11 @@ declare namespace LocalJSX {
           * Collapsed state
          */
         "collapsed"?: boolean;
+        /**
+          * Optional icon to be displayed next to the header label
+          * @since 1.5.0
+         */
+        "icon"?: string;
         /**
           * Label of blind
          */
@@ -2479,8 +2570,14 @@ declare namespace LocalJSX {
         "icon"?: string | undefined;
         /**
           * Fire event if close button is clicked
+          * @deprecated Will be removed in 2.0.0. Use `closeChip`
          */
         "onClose"?: (event: IxChipCustomEvent<any>) => void;
+        /**
+          * Fire event if close button is clicked
+          * @since 1.5.0
+         */
+        "onCloseChip"?: (event: IxChipCustomEvent<any>) => void;
         /**
           * Show chip with outline style
          */
@@ -2918,12 +3015,23 @@ declare namespace LocalJSX {
     interface IxFlipTile {
         /**
           * Tmp property name
+          * @deprecated Will be removed in 2.0.0. Setting this property has no effect
          */
         "footer"?: string;
+        /**
+          * Height interpreted as REM
+          * @since 1.5.0
+         */
+        "height"?: number | 'auto';
         /**
           * Variation of the Flip
          */
         "state"?: FlipTileState;
+        /**
+          * Width interpreted as REM
+          * @since 1.5.0
+         */
+        "width"?: number | 'auto';
     }
     interface IxFlipTileContent {
     }
@@ -3076,6 +3184,16 @@ declare namespace LocalJSX {
          */
         "variant"?: IconButtonVariant;
     }
+    interface IxIndexButton {
+        /**
+          * Selection state
+         */
+        "selected"?: boolean;
+        /**
+          * Button variant
+         */
+        "variant"?: IndexButtonVariant;
+    }
     interface IxInputGroup {
     }
     interface IxKpi {
@@ -3411,6 +3529,51 @@ declare namespace LocalJSX {
     }
     interface IxModalExample {
     }
+    /**
+     * @since 1.5.0
+     */
+    interface IxPagination {
+        /**
+          * Advanced mode
+         */
+        "advanced"?: boolean;
+        /**
+          * Total number of pages
+         */
+        "count"?: number;
+        /**
+          * /**   i18n
+         */
+        "i18nItems"?: string;
+        /**
+          * i18n
+         */
+        "i18nOf"?: string;
+        /**
+          * i18n
+         */
+        "i18nPage"?: string;
+        /**
+          * Number of items shown at once. Can only be changed in advaced mode.
+         */
+        "itemCount"?: number;
+        /**
+          * Item count change event
+         */
+        "onItemCountChanged"?: (event: IxPaginationCustomEvent<number>) => void;
+        /**
+          * Page selection event
+         */
+        "onPageSelected"?: (event: IxPaginationCustomEvent<number>) => void;
+        /**
+          * Zero based index of currently selected page
+         */
+        "selectedPage"?: number;
+        /**
+          * Show item count in advanced mode
+         */
+        "showItemCount"?: boolean;
+    }
     interface IxPill {
         /**
           * Align pill content left
@@ -3724,7 +3887,7 @@ declare namespace LocalJSX {
     interface IxToastContainer {
         "containerClass"?: string;
         "containerId"?: string;
-        "position"?: string;
+        "position"?: 'bottom-right' | 'top-right';
     }
     interface IxToggle {
         /**
@@ -3795,10 +3958,20 @@ declare namespace LocalJSX {
           * Context changed
          */
         "onContextChange"?: (event: IxTreeCustomEvent<TreeContext>) => void;
+        /**
+          * Node clicked event
+          * @since 1.5.0
+         */
+        "onNodeClicked"?: (event: IxTreeCustomEvent<string>) => void;
         /**
           * Emits removed nodes
          */
         "onNodeRemoved"?: (event: IxTreeCustomEvent<any>) => void;
+        /**
+          * Node toggled event
+          * @since 1.5.0
+         */
+        "onNodeToggled"?: (event: IxTreeCustomEvent<{ id: string; isExpaned: boolean }>) => void;
         /**
           * Render function of tree items
          */
@@ -3986,6 +4159,7 @@ declare namespace LocalJSX {
         "ix-group-item": IxGroupItem;
         "ix-icon": IxIcon;
         "ix-icon-button": IxIconButton;
+        "ix-index-button": IxIndexButton;
         "ix-input-group": IxInputGroup;
         "ix-kpi": IxKpi;
         "ix-map-navigation": IxMapNavigation;
@@ -4003,6 +4177,7 @@ declare namespace LocalJSX {
         "ix-modal": IxModal;
         "ix-modal-container": IxModalContainer;
         "ix-modal-example": IxModalExample;
+        "ix-pagination": IxPagination;
         "ix-pill": IxPill;
         "ix-select": IxSelect;
         "ix-select-item": IxSelectItem;
@@ -4073,6 +4248,7 @@ declare module "@stencil/core" {
             "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes<HTMLIxGroupItemElement>;
             "ix-icon": LocalJSX.IxIcon & JSXBase.HTMLAttributes<HTMLIxIconElement>;
             "ix-icon-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes<HTMLIxIconButtonElement>;
+            "ix-index-button": LocalJSX.IxIndexButton & JSXBase.HTMLAttributes<HTMLIxIndexButtonElement>;
             "ix-input-group": LocalJSX.IxInputGroup & JSXBase.HTMLAttributes<HTMLIxInputGroupElement>;
             "ix-kpi": LocalJSX.IxKpi & JSXBase.HTMLAttributes<HTMLIxKpiElement>;
             "ix-map-navigation": LocalJSX.IxMapNavigation & JSXBase.HTMLAttributes<HTMLIxMapNavigationElement>;
@@ -4090,6 +4266,10 @@ declare module "@stencil/core" {
             "ix-modal": LocalJSX.IxModal & JSXBase.HTMLAttributes<HTMLIxModalElement>;
             "ix-modal-container": LocalJSX.IxModalContainer & JSXBase.HTMLAttributes<HTMLIxModalContainerElement>;
             "ix-modal-example": LocalJSX.IxModalExample & JSXBase.HTMLAttributes<HTMLIxModalExampleElement>;
+            /**
+             * @since 1.5.0
+             */
+            "ix-pagination": LocalJSX.IxPagination & JSXBase.HTMLAttributes<HTMLIxPaginationElement>;
             "ix-pill": LocalJSX.IxPill & JSXBase.HTMLAttributes<HTMLIxPillElement>;
             "ix-select": LocalJSX.IxSelect & JSXBase.HTMLAttributes<HTMLIxSelectElement>;
             "ix-select-item": LocalJSX.IxSelectItem & JSXBase.HTMLAttributes<HTMLIxSelectItemElement>;

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/modal/modal-utils';
 export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
+export * from './components/upload/upload-file-state';
 export { NotificationColor } from './components/utils/notification-color';
 export { convertToAbbreviationString, convertToRemString, } from './components/utils/rwd.util';
 export * from './components/utils/theme-switcher';

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "1.5.0-beta.0",
+  "version": "1.5.0-beta.1",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -46,7 +46,8 @@
     "@stencil/core": "^3.1.0",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
-    "luxon": "^3.0.1"
+    "luxon": "^3.0.1",
+    "@types/luxon": "^3.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.24.1",

package/scss/components/_forms.scss

@@ -56,7 +56,7 @@
   &::-webkit-inner-spin-button {
     margin-right: -2px;
     margin-left: 2px;
-    //   display: none;
+    display: none;
   }
 
   text-align: right;

package/dist/siemens-ix/p-0d15aa1a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as e,g as s}from"./p-8fcd6f85.js";import{a as o,c as r,s as l,o as a,b as h,d as n}from"./p-f34a16c6.js";const c=':host{display:inline-block;position:absolute;left:0px;top:0px;max-width:18.25rem;opacity:0;visibility:collapse;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible}:host .arrow,:host .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .arrow{visibility:hidden}:host .arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}';const u=class{constructor(i){t(this,i);this.onMouseEnterBind=this.showTooltip.bind(this);this.onMouseLeaveBind=this.hideTooltip.bind(this);this.tooltipCloseTimeInMS=50;this.for=undefined;this.titleContent=undefined;this.interactive=false;this.visible=false}get arrowElement(){return this.hostElement.shadowRoot.querySelector(".arrow")}destroyAutoUpdate(){if(this.disposeAutoUpdate){this.disposeAutoUpdate()}}showTooltip(t){clearTimeout(this.hideTooltipTimeout);this.visible=true;this.computeTooltipPosition(t.target)}hideTooltip(){this.hideTooltipTimeout=setTimeout((()=>{this.visible=false}),this.tooltipCloseTimeInMS);this.destroyAutoUpdate()}async computeTooltipPosition(t){this.disposeAutoUpdate=o(t,this.hostElement,(async()=>{const i=await r(t,this.hostElement,{strategy:"absolute",placement:"top",middleware:[l(),a(8),h({element:this.arrowElement}),n({alignment:"start",allowedPlacements:["top","bottom","right","left"]})]});if(i.middlewareData.arrow){const{x:t,y:e}=i.middlewareData.arrow;Object.assign(this.arrowElement.style,{left:t!=null?`${t}px`:"",top:e!=null?`${e}px`:""})}const{x:e,y:s}=i;Object.assign(this.hostElement.style,{left:e!==null?`${e}px`:"",top:s!==null?`${s}px`:""})}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}queryAnchorElements(){return Array.from(document.querySelectorAll(this.for))}registerTriggerListener(){const t=this.queryAnchorElements();t.forEach((t=>{t.addEventListener("mouseenter",this.onMouseEnterBind);t.addEventListener("mouseleave",this.onMouseLeaveBind)}))}registerTooltipListener(){this.hostElement.addEventListener("mouseenter",(()=>{if(this.interactive){clearTimeout(this.hideTooltipTimeout)}}));this.hostElement.addEventListener("mouseleave",(()=>{this.hideTooltip()}))}componentDidLoad(){if(this.interactive){this.tooltipCloseTimeInMS=150}this.observer=new MutationObserver((()=>{this.registerTriggerListener()}));this.observer.observe(document.body,{attributes:true,attributeFilter:["data-ix-tooltip"],childList:true,subtree:true});this.registerTriggerListener();this.registerTooltipListener()}disconnectedCallback(){this.observer.disconnect();this.destroyAutoUpdate()}render(){const t={"tooltip-content":true};return i(e,{class:{visible:this.visible}},i("div",{class:"tooltip-title"},i("slot",{name:"title-icon"}),i("ix-typography",{variant:"default-title"},this.titleContent,i("slot",{name:"title-content"}))),i("div",{class:t},i("slot",null)),i("div",{class:"arrow"}))}get hostElement(){return s(this)}};u.style=c;export{u as ix_tooltip};
-//# sourceMappingURL=p-0d15aa1a.entry.js.map

package/dist/siemens-ix/p-0d15aa1a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","Tooltip","this","onMouseEnterBind","showTooltip","bind","onMouseLeaveBind","hideTooltip","tooltipCloseTimeInMS","arrowElement","hostElement","shadowRoot","querySelector","destroyAutoUpdate","disposeAutoUpdate","e","clearTimeout","hideTooltipTimeout","visible","computeTooltipPosition","target","setTimeout","async","autoUpdate","computeResponse","computePosition","strategy","placement","middleware","shift","offset","arrow","element","autoPlacement","alignment","allowedPlacements","middlewareData","x","y","Object","assign","style","left","top","ancestorResize","ancestorScroll","elementResize","queryAnchorElements","Array","from","document","querySelectorAll","for","registerTriggerListener","elements","forEach","addEventListener","registerTooltipListener","interactive","componentDidLoad","observer","MutationObserver","observe","body","attributes","attributeFilter","childList","subtree","disconnectedCallback","disconnect","render","tooltipContentClass","h","Host","class","name","variant","titleContent"],"sources":["./src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: absolute;\n  left: 0px;\n  top: 0px;\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible;\n}\n\n:host {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\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 */\nimport {\n  arrow,\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.showTooltip.bind(this);\n  private onMouseLeaveBind = this.hideTooltip.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private showTooltip(e: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(e.target);\n  }\n\n  private hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private async computeTooltipPosition(target: HTMLElement) {\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        const computeResponse = await computePosition(\n          target,\n          this.hostElement,\n          {\n            strategy: 'absolute',\n            placement: 'top',\n            middleware: [\n              shift(),\n              offset(8),\n              arrow({\n                element: this.arrowElement,\n              }),\n              autoPlacement({\n                alignment: 'start',\n                allowedPlacements: ['top', 'bottom', 'right', 'left'],\n              }),\n            ],\n          }\n        );\n\n        if (computeResponse.middlewareData.arrow) {\n          const { x, y } = computeResponse.middlewareData.arrow;\n\n          Object.assign(this.arrowElement.style, {\n            left: x != null ? `${x}px` : '',\n            top: y != null ? `${y}px` : '',\n          });\n        }\n\n        const { x, y } = computeResponse;\n        Object.assign(this.hostElement.style, {\n          left: x !== null ? `${x}px` : '',\n          top: y !== null ? `${y}px` : '',\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.hideTooltip();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gIAAA,MAAMA,EAAa,srB,MC6BNC,EAAO,M,yBAsBVC,KAAAC,iBAAmBD,KAAKE,YAAYC,KAAKH,MACzCA,KAAAI,iBAAmBJ,KAAKK,YAAYF,KAAKH,MAEzCA,KAAAM,qBAAuB,G,gEAXT,M,aAEH,K,CAWPC,mBACV,OAAOP,KAAKQ,YAAYC,WAAWC,cAAc,S,CAG3CC,oBACN,GAAIX,KAAKY,kBAAmB,CAC1BZ,KAAKY,mB,EAIDV,YAAYW,GAClBC,aAAad,KAAKe,oBAClBf,KAAKgB,QAAU,KACfhB,KAAKiB,uBAAuBJ,EAAEK,O,CAGxBb,cACNL,KAAKe,mBAAqBI,YAAW,KACnCnB,KAAKgB,QAAU,KAAK,GACnBhB,KAAKM,sBACRN,KAAKW,mB,CAGCS,6BAA6BF,GACnClB,KAAKY,kBAAoBS,EACvBH,EACAlB,KAAKQ,aACLY,UACE,MAAME,QAAwBC,EAC5BL,EACAlB,KAAKQ,YACL,CACEgB,SAAU,WACVC,UAAW,MACXC,WAAY,CACVC,IACAC,EAAO,GACPC,EAAM,CACJC,QAAS9B,KAAKO,eAEhBwB,EAAc,CACZC,UAAW,QACXC,kBAAmB,CAAC,MAAO,SAAU,QAAS,aAMtD,GAAIX,EAAgBY,eAAeL,MAAO,CACxC,MAAMM,EAAEA,EAACC,EAAEA,GAAMd,EAAgBY,eAAeL,MAEhDQ,OAAOC,OAAOtC,KAAKO,aAAagC,MAAO,CACrCC,KAAML,GAAK,KAAO,GAAGA,MAAQ,GAC7BM,IAAKL,GAAK,KAAO,GAAGA,MAAQ,I,CAIhC,MAAMD,EAAEA,EAACC,EAAEA,GAAMd,EACjBe,OAAOC,OAAOtC,KAAKQ,YAAY+B,MAAO,CACpCC,KAAML,IAAM,KAAO,GAAGA,MAAQ,GAC9BM,IAAKL,IAAM,KAAO,GAAGA,MAAQ,IAC7B,GAEJ,CACEM,eAAgB,KAChBC,eAAgB,KAChBC,cAAe,M,CAKbC,sBACN,OAAOC,MAAMC,KAAKC,SAASC,iBAAiBjD,KAAKkD,K,CAG3CC,0BACN,MAAMC,EAAWpD,KAAK6C,sBACtBO,EAASC,SAASxC,IAChBA,EAAEyC,iBAAiB,aAActD,KAAKC,kBACtCY,EAAEyC,iBAAiB,aAActD,KAAKI,iBAAiB,G,CAInDmD,0BACNvD,KAAKQ,YAAY8C,iBAAiB,cAAc,KAC9C,GAAItD,KAAKwD,YAAa,CACpB1C,aAAad,KAAKe,mB,KAGtBf,KAAKQ,YAAY8C,iBAAiB,cAAc,KAC9CtD,KAAKK,aAAa,G,CAItBoD,mBACE,GAAIzD,KAAKwD,YAAa,CACpBxD,KAAKM,qBAAuB,G,CAG9BN,KAAK0D,SAAW,IAAIC,kBAAiB,KACnC3D,KAAKmD,yBAAyB,IAGhCnD,KAAK0D,SAASE,QAAQZ,SAASa,KAAM,CACnCC,WAAY,KACZC,gBAAiB,CAAC,mBAClBC,UAAW,KACXC,QAAS,OAGXjE,KAAKmD,0BACLnD,KAAKuD,yB,CAGPW,uBACElE,KAAK0D,SAASS,aACdnE,KAAKW,mB,CAGPyD,SACE,MAAMC,EAAsB,CAC1B,kBAAmB,MAGrB,OACEC,EAACC,EAAI,CACHC,MAAO,CACLxD,QAAShB,KAAKgB,UAGhBsD,EAAA,OAAKE,MAAO,iBACVF,EAAA,QAAMG,KAAK,eACXH,EAAA,iBAAeI,QAAQ,iBACpB1E,KAAK2E,aACNL,EAAA,QAAMG,KAAK,oBAGfH,EAAA,OAAKE,MAAOH,GACVC,EAAA,cAEFA,EAAA,OAAKE,MAAM,U"}

package/dist/siemens-ix/p-11af475f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownCss","Dropdown","constructor","hostRef","this","autoUpdateCleanup","toggleBind","toggle","bind","openBind","open","dropdownItems","Array","from","hostElement","querySelectorAll","addEventListenersFor","triggerEvent","closeBehavior","triggerElement","addEventListener","removeEventListenersFor","removeEventListener","async","element","resolveElement","isArray","forEach","trigger","Promise","resolve","selector","document","querySelector","observer","MutationObserver","disconnect","observe","body","childList","subtree","newShow","anchorElement","anchor","applyDropdownPosition","changedTrigger","newTriggerValue","oldTriggerValue","registerListener","unregisterListener","clickOutside","event","target","show","_a","contains","_b","dropdownRef","close","isNestedDropdown","closest","isAnchorSubmenu","preventDefault","stopPropagation","showChanged","emit","defaultPrevented","isSubmenu","positionConfig","strategy","positioningStrategy","middleware","placement","includes","push","flip","inline","shift","offset","autoUpdate","computeResponse","computePosition","Object","assign","style","top","left","transform","Math","round","x","y","overwriteDropdownStyle","overwriteStyle","triggerRef","ancestorResize","ancestorScroll","elementResize","disconnectedCallback","render","h","Host","ref","class","overflow","margin","minWidth","position","display","header","dropdownItemCss","DropdownItem","itemClick","checked","label","undefined","icon","disabled","hover","onClick","emitItemClick","name","size","glyph"],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx","./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=scoped","./src/components/dropdown-item/dropdown-item.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 '~bootstrap/scss/functions';\n@import 'common-variables';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n@import '~bootstrap/scss/dropdown';\n\n@import 'mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'components/dropdown';\n\n:host {\n  min-width: 0px;\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BasePlacement, Placement, PlacementWithAlignment } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Close behavior\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * Adjust dropdown width to the parent width\n   * @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.\n   */\n  @Prop() adjustDropdownWidthToReferenceWith = false;\n\n  /**\n   * Adjust dropdown width to the parent width\n   *\n   * @deprecated Will be removed. Not used anymore\n   */\n  @Prop() adjustDropdownWidthToReferenceWidth = false;\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          this.triggerElement.addEventListener('click', this.openBind);\n        } else {\n          this.triggerElement.addEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: Event) {\n    const target = event.target as HTMLElement;\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!this.dropdownRef.contains(target)) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (this.dropdownRef.contains(target) && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) this.close();\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = !this.show;\n    this.showChanged.emit(this.show);\n  }\n\n  private open(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = true;\n    this.showChanged.emit(true);\n  }\n\n  private close(event?: Event) {\n    if (event?.defaultPrevented) {\n      return;\n    }\n\n    this.show = false;\n    this.showChanged.emit(false);\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (isSubmenu) {\n      positionConfig.placement = 'right-start';\n    }\n\n    if (this.placement.includes('auto') || isSubmenu) {\n      positionConfig.middleware.push(flip());\n    } else {\n      positionConfig.placement = this.placement as\n        | BasePlacement\n        | PlacementWithAlignment;\n    }\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    if (this.trigger) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  min-width: 10rem;\n\n  &.icon-only {\n    min-width: 0;\n\n    .dropdown-item > .glyph {\n      margin-inline-end: 0;\n    }\n\n    .dropdown-item {\n      padding: $tiny-space $small-space;\n\n      @include focus-visible {\n        border-color: #199fff;\n      }\n    }\n  }\n\n  :focus {\n    background-color: transparent;\n    color: var(--theme-menu-item--color);\n  }\n\n  .checkmark {\n    position: absolute;\n    left: $small-space;\n  }\n\n  &.checked {\n    background-color: var(--theme-select-list-item--background--selected);\n  }\n\n  .label {\n    @include ellipsis;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n::slotted(ix-icon) {\n  margin-inline-start: auto;\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  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  scoped: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          checked: this.checked,\n          'icon-text': this.label !== undefined && this.icon !== undefined,\n          'icon-only': this.label === undefined && this.icon !== undefined,\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          class={{\n            'dropdown-item': true,\n            hover: this.hover,\n            disabled: this.disabled,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {this.checked ? (\n            <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n          ) : null}\n\n          {this.icon ? (\n            <span\n              class={{\n                glyph: true,\n                [`glyph-${this.icon}`]: true,\n                disabled: this.disabled,\n              }}\n            ></span>\n          ) : null}\n\n          {this.label ? <span class=\"label\">{this.label}</span> : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-1259ea24.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as p,g as s}from"./p-8fcd6f85.js";const o=".sc-ix-input-group-h{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.sc-ix-input-group-h .group.sc-ix-input-group{display:flex;position:absolute;align-items:center;height:100%}.sc-ix-input-group-h .group-start.sc-ix-input-group{left:0px}.sc-ix-input-group-h .group-end.sc-ix-input-group{right:0px}";const n=class{constructor(i){t(this,i)}componentDidRender(){let t=15;let i=15;this.host.querySelectorAll('[slot="input-end"]').forEach((i=>{i.classList.add("input-group-label");t+=i.getBoundingClientRect().width}));this.host.querySelectorAll('[slot="input-start"]').forEach((t=>{t.classList.add("input-group-label");i+=t.getBoundingClientRect().width}));const p=this.host.querySelector("input.form-control");if(p){p.style.paddingRight=t+"px";p.style.paddingLeft=i+"px"}else{console.warn('You used the ix-input-group without an input-tag, e.g. <input class="form-control" />')}}render(){return i(p,null,i("div",{class:"group group-start"},i("slot",{name:"input-start"})),i("slot",null),i("div",{class:"group group-end"},i("slot",{name:"input-end"})))}get host(){return s(this)}};n.style=o;export{n as ix_input_group};
-//# sourceMappingURL=p-1259ea24.entry.js.map

package/dist/siemens-ix/p-1259ea24.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inputGroupCss","InputGroup","componentDidRender","paddingRight","paddingLeft","this","host","querySelectorAll","forEach","item","classList","add","getBoundingClientRect","width","inputElement","querySelector","style","console","warn","render","h","Host","class","name"],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=scoped","./src/components/input-group/input-group.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  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n  }\n\n  .group-end {\n    right: 0px;\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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  scoped: true,\n})\nexport class InputGroup {\n  @Element() host!: HTMLIxInputGroupElement;\n\n  componentDidRender() {\n    let paddingRight = 15;\n    let paddingLeft = 15;\n    this.host.querySelectorAll('[slot=\"input-end\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingRight += item.getBoundingClientRect().width;\n    });\n\n    this.host.querySelectorAll('[slot=\"input-start\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingLeft += item.getBoundingClientRect().width;\n    });\n\n    const inputElement = this.host.querySelector(\n      'input.form-control'\n    ) as HTMLInputElement;\n\n    if (inputElement) {\n      inputElement.style.paddingRight = paddingRight + 'px';\n      inputElement.style.paddingLeft = paddingLeft + 'px';\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input-tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,0U,MCgBTC,EAAU,M,yBAGrBC,qBACE,IAAIC,EAAe,GACnB,IAAIC,EAAc,GAClBC,KAAKC,KAAKC,iBAAiB,sBAAsBC,SAASC,IACxDA,EAAKC,UAAUC,IAAI,qBACnBR,GAAgBM,EAAKG,wBAAwBC,KAAK,IAGpDR,KAAKC,KAAKC,iBAAiB,wBAAwBC,SAASC,IAC1DA,EAAKC,UAAUC,IAAI,qBACnBP,GAAeK,EAAKG,wBAAwBC,KAAK,IAGnD,MAAMC,EAAeT,KAAKC,KAAKS,cAC7B,sBAGF,GAAID,EAAc,CAChBA,EAAaE,MAAMb,aAAeA,EAAe,KACjDW,EAAaE,MAAMZ,YAAcA,EAAc,I,KAC1C,CACLa,QAAQC,KACN,wF,EAKNC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,qBACTF,EAAA,QAAMG,KAAK,iBAEbH,EAAA,aACAA,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMG,KAAK,e"}

package/dist/siemens-ix/p-1811d669.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toastCss","Toast","getIcon","this","icon","h","name","color","iconColor","size","type","close","host","classList","add","setTimeout","closeToast","emit","render","progressBarElement","progressBarStyle","progressBarClass","touched","animationDuration","autoCloseDelay","animationPlayState","isRunning","push","updateProgress","requestAnimationFrame","style","transform","progress","Host","class","onPointerLeave","onPointerEnter","toastTitle","ghost","onClick","autoClose","join","ref","r","onAnimationEnd","onTransitionEnd","ToastContainer","hostContainer","document","getElementById","containerId","componentDidLoad","toastContainer","createElement","id","containerClass","position","body","appendChild","async","config","toast","onClose","TypedEvent","removeToast","result","remove","title","addEventListener","event","detail","message","innerText"],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=scoped","./src/components/toast/toast.tsx","./src/components/toast/toast-container.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/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    width: 100%;\n    flex-grow: 1;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n      max-width: 10.25rem;\n      margin-top: calc(\n        #{$default-space} + var(--theme-toast--border-thickness)\n      );\n      margin-bottom: $medium-space;\n\n      .toast-message {\n        min-width: 0;\n      }\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    margin: $medium-space;\n    pointer-events: all;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n\n    &--touched {\n      transition: transform 1s;\n    }\n  }\n\n  @include hover {\n    .toast-progress-bar {\n      visibility: hidden;\n      transition: none;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  scoped: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() isRunning = true;\n  @State() touched = false;\n\n  @Element() host!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.host) {\n      this.host.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarElement: HTMLElement;\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    if (!this.touched) {\n      progressBarStyle = {\n        animationDuration: `${this.autoCloseDelay}ms`,\n        animationPlayState: this.isRunning ? 'running' : 'paused',\n      };\n\n      progressBarClass.push('toast-progress-bar--animated');\n    } else {\n      progressBarClass.push('toast-progress-bar--touched');\n    }\n\n    const updateProgress = () => {\n      requestAnimationFrame(() => {\n        if (progressBarElement) {\n          progressBarElement.style.transform = `scaleX(${this.progress})`;\n        }\n      });\n    };\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.progress = 0;\n            updateProgress();\n          }}\n          onPointerEnter={() => {\n            this.isRunning = false;\n            this.touched = true;\n            this.progress = 1;\n            updateProgress();\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title text-default-title-single\">\n                {this.toastTitle}\n              </div>\n            ) : null}\n            <div class=\"toast-message text-default\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            ref={(r) => (progressBarElement = r)}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast-container',\n  scoped: true,\n})\nexport class ToastContainer {\n  @Element() host!: HTMLIxToastContainerElement;\n\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position = 'bottom-right';\n\n  get hostContainer() {\n    return document.getElementById(this.containerId);\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(`toast-container--${this.position}`);\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig) {\n    const toast = document.createElement('ix-toast');\n\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose;\n    toast.autoCloseDelay = config.autoCloseDelay;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    this.hostContainer.appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-29bd1814.entry.js

@@ -1,2 +0,0 @@
-import{r,c as e,h as c,H as b,g as i}from"./p-8fcd6f85.js";import{a as t}from"./p-810b5232.js";import{c as a}from"./p-c0454c9a.js";const s=".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.25rem;margin-inline-start:0.25rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}";const o=class{constructor(c){r(this,c);this.itemClick=e(this,"itemClick",7);this.nextClick=e(this,"nextClick",7);this.visibleItemCount=9;this.nextItems=[];this.ghost=false;this.previousButtonRef=undefined;this.nextButtonRef=undefined;this.items=[]}get breadcrumbItems(){return Array.from(this.hostElement.querySelectorAll("ix-breadcrumb-item"))}get crumbItems(){return Array.from(this.hostElement.querySelectorAll(".crumb-items .crumb"))}onItemClick(r){this.itemClick.emit(r)}componentDidLoad(){this.mutationObserver=a((()=>{const r=this.getItems();const e=()=>{this.items=r};if(r.length>=this.items.length){e()}else if(r.length<this.items.length){const r=this.crumbItems[this.crumbItems.length-1];this.animationFadeOut(r,(()=>e()))}}));this.mutationObserver.observe(this.hostElement.querySelector(".crumb-items"),{subtree:true,childList:true})}componentWillLoad(){this.items=this.getItems()}getItems(){return this.breadcrumbItems.map((r=>({label:r.label,icon:r.icon})))}disconnectedCallback(){var r;(r=this.mutationObserver)===null||r===void 0?void 0:r.disconnect()}animationFadeOut(r,e){t({targets:r,translateX:"-100%",duration:150,opacity:[1,0],easing:"linear",complete:()=>e()})}animationFadeIn(r){t({targets:r,duration:150,opacity:[0,1],translateX:["-100%","0%"],easing:"linear"})}handleLastButtonRef(r,e){var c;if(e){this.animationFadeIn(r)}if(e&&((c=this.nextItems)===null||c===void 0?void 0:c.length)){this.nextButtonRef=r}}sliceHiddenItems(){let r=0;if(this.items.length>this.visibleItemCount){r=this.items.length-this.visibleItemCount}return this.items.slice(r)}clickItem(r,e){if(!e){this.onItemClick(r)}}renderBreadcrumbItems(){return this.sliceHiddenItems().map(((r,e,b)=>{var i;const t=e===b.length-1;const a=t&&!((i=this.nextItems)===null||i===void 0?void 0:i.length);return c("div",{ref:r=>this.handleLastButtonRef(r,t),"data-breadcrumb":e,class:{crumb:true,clickable:true,ghost:this.ghost,btn:!this.ghost,last:a,"remove-hover":a},onClick:()=>this.clickItem(r.label,t),"data-testid":"item"},c("span",{class:"crumb-text remove-anchor"},r.icon?c("ix-icon",{name:r.icon,size:"16"}):"",r.label),!a?c("span",{class:"glyph glyph-18 glyph-chevron-right-small text-default-text"}):null)}))}render(){var r,e,i;return c(b,null,c("ix-dropdown",{trigger:((r=this.items)===null||r===void 0?void 0:r.length)>this.visibleItemCount?this.previousButtonRef:null},this.items.slice(0,this.items.length-this.visibleItemCount).map((r=>c("ix-dropdown-item",{label:r.label,onClick:()=>this.onItemClick(r.label)})))),((e=this.items)===null||e===void 0?void 0:e.length)>this.visibleItemCount?c("div",{class:"crumb crumb-dropdown",ref:r=>this.previousButtonRef=r},c("span",{class:"remove-anchor more-text"},c("span",{class:"more-text-ellipsis"},"..."),c("span",{class:"glyph glyph-16 glyph-chevron-right"}))):null,c("div",{class:"crumb-items"},this.renderBreadcrumbItems(),c("slot",null)),c("ix-dropdown",{trigger:this.nextButtonRef},(i=this.nextItems)===null||i===void 0?void 0:i.map((r=>c("ix-dropdown-item",{label:r,onClick:e=>{this.nextClick.emit({event:e,item:r})}})))))}get hostElement(){return i(this)}};o.style=s;const d=".sc-ix-breadcrumb-item-h{display:block}";const m=class{constructor(e){r(this,e);this.label=undefined;this.icon=undefined}render(){return c(b,null,c("slot",null))}};m.style=d;export{o as ix_breadcrumb,m as ix_breadcrumb_item};
-//# sourceMappingURL=p-29bd1814.entry.js.map

package/dist/siemens-ix/p-29bd1814.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbCss","Breadcrumb","breadcrumbItems","Array","from","this","hostElement","querySelectorAll","crumbItems","onItemClick","item","itemClick","emit","componentDidLoad","mutationObserver","createMutationObserver","updatedItems","getItems","update","items","length","last","animationFadeOut","observe","querySelector","subtree","childList","componentWillLoad","map","label","icon","disconnectedCallback","_a","disconnect","ref","complete","animejs","targets","translateX","duration","opacity","easing","animationFadeIn","handleLastButtonRef","nextItems","nextButtonRef","sliceHiddenItems","sliceIndex","visibleItemCount","slice","clickItem","renderBreadcrumbItems","index","array","isLastItem","h","class","crumb","clickable","ghost","btn","onClick","name","size","render","Host","trigger","previousButtonRef","_b","_c","e","nextClick","event","breadcrumbItemCss","BreadcrumbItem"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=scoped","./src/components/breadcrumb/breadcrumb.tsx","./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=scoped","./src/components/breadcrumb-item/breadcrumb-item.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/text-truncation';\n\n@mixin crumb-hover($variant) {\n  @include hover {\n    background-color: var(--theme-breadcrumb-#{$variant}--background--hover);\n\n    .crumb-text,\n    .glyph {\n      color: var(--theme-breadcrumb-#{$variant}--color--hover);\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n    }\n  }\n\n  @include active {\n    background-color: var(--theme-breadcrumb-#{$variant}--background--active);\n\n    .crumb-text,\n    .glyph {\n      color: var(--theme-breadcrumb-#{$variant}--color--active);\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n    }\n  }\n}\n\n@mixin breadcrumb($variant) {\n  .crumb.#{$variant} {\n    background-color: var(--theme-breadcrumb-#{$variant}--background);\n    border: var(--theme-btn--#{$variant}-thickness) solid transparent;\n    transition: $default-time;\n\n    .crumb-text,\n    .glyph {\n      color: var(--theme-breadcrumb-#{$variant}--color);\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      color: var(--theme-breadcrumb-#{$variant}-arrow--color);\n    }\n\n    &.last .crumb-text {\n      color: var(--theme-breadcrumb-#{$variant}-last--color);\n    }\n\n    &.clickable:not(.remove-hover) {\n      @include hover {\n        background-color: var(\n          --theme-breadcrumb-#{$variant}--background--hover\n        );\n\n        .crumb-text,\n        .glyph {\n          color: var(--theme-breadcrumb-#{$variant}--color--hover);\n        }\n\n        .crumb-text + .glyph-chevron-right-small {\n          color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(\n          --theme-breadcrumb-#{$variant}--background--active\n        );\n\n        .crumb-text,\n        .glyph {\n          color: var(--theme-breadcrumb-#{$variant}--color--active);\n        }\n\n        .crumb-text + .glyph-chevron-right-small {\n          color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n        }\n      }\n    }\n  }\n}\n\n:host {\n  display: flex;\n  height: $large-control-height;\n  justify-content: flex-start;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  .crumb {\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    white-space: nowrap;\n    border-radius: var(--theme-breadcrumb--border-radius);\n    height: $default-control-height;\n    max-height: $default-control-height;\n    min-width: 0;\n    margin-inline-end: $tiny-space;\n    padding: $small-space 0 $small-space $tiny-space;\n    outline: none;\n    cursor: pointer;\n\n    @include crumb-hover('btn');\n\n    .crumb-text {\n      @include ellipsis;\n      display: flex;\n      align-items: center;\n      min-width: 0;\n      font-weight: $font-weight-bold;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .crumb-text + .glyph-chevron-right-small {\n      margin-inline-start: $tiny-space;\n      margin-inline-end: 0; // Overwrite global selector: .btn .glyph\n    }\n\n    &.last {\n      background-color: transparent !important;\n      cursor: default;\n      padding-inline-end: $tiny-space;\n    }\n\n    &.clickable:not(.remove-hover) {\n      @include focus-visible {\n        border-color: var(--theme-focus--border-color);\n      }\n    }\n\n    &:not(:last-of-type) {\n      flex-shrink: 0;\n      max-width: 14rem;\n    }\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n\n    .glyph::after {\n      display: none;\n    }\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: $font-weight-bold;\n    }\n\n    .glyph {\n      line-height: unset;\n    }\n  }\n\n  .crumb-items {\n    display: contents;\n  }\n\n  @include breadcrumb('btn');\n  @include breadcrumb('ghost');\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} from '@stencil/core';\nimport animejs from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  scoped: true,\n})\nexport class Breadcrumb {\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n  @State() previousButtonRef: HTMLElement;\n\n  @State() nextButtonRef: HTMLElement;\n\n  @Element() hostElement: HTMLIxBreadcrumbElement;\n\n  get breadcrumbItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  get crumbItems() {\n    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));\n  }\n\n  @State() items: { label: string; icon?: string }[] = [];\n\n  private mutationObserver: MutationObserver;\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() => {\n      const updatedItems = this.getItems();\n      const update = () => {\n        this.items = updatedItems;\n      };\n\n      if (updatedItems.length >= this.items.length) {\n        update();\n      } else if (updatedItems.length < this.items.length) {\n        const last = this.crumbItems[this.crumbItems.length - 1] as HTMLElement;\n        this.animationFadeOut(last, () => update());\n      }\n    });\n\n    this.mutationObserver.observe(\n      this.hostElement.querySelector('.crumb-items'),\n      {\n        subtree: true,\n        childList: true,\n      }\n    );\n  }\n\n  componentWillLoad() {\n    this.items = this.getItems();\n  }\n\n  private getItems() {\n    return this.breadcrumbItems.map((item) => {\n      return { label: item.label, icon: item.icon };\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private animationFadeOut(ref: HTMLElement, complete: () => void) {\n    animejs({\n      targets: ref,\n      translateX: '-100%',\n      duration: 150,\n      opacity: [1, 0],\n      easing: 'linear',\n      complete: () => complete(),\n    });\n  }\n\n  private animationFadeIn(ref: HTMLElement) {\n    animejs({\n      targets: ref,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  private handleLastButtonRef(ref: HTMLDivElement, last: boolean) {\n    if (last) {\n      this.animationFadeIn(ref);\n    }\n    if (last && this.nextItems?.length) {\n      this.nextButtonRef = ref;\n    }\n  }\n\n  private sliceHiddenItems() {\n    let sliceIndex = 0;\n\n    if (this.items.length > this.visibleItemCount) {\n      sliceIndex = this.items.length - this.visibleItemCount;\n    }\n\n    return this.items.slice(sliceIndex);\n  }\n\n  private clickItem(item: string, last: boolean) {\n    if (!last) {\n      this.onItemClick(item);\n    }\n  }\n\n  private renderBreadcrumbItems() {\n    return this.sliceHiddenItems().map((item, index, array) => {\n      const last = index === array.length - 1;\n\n      const isLastItem = last && !this.nextItems?.length;\n      return (\n        <div\n          ref={(ref) => this.handleLastButtonRef(ref, last)}\n          data-breadcrumb={index}\n          class={{\n            crumb: true,\n            clickable: true,\n            ghost: this.ghost,\n            btn: !this.ghost,\n            last: isLastItem,\n            'remove-hover': isLastItem,\n          }}\n          onClick={() => this.clickItem(item.label, last)}\n          data-testid=\"item\"\n        >\n          <span class=\"crumb-text remove-anchor\">\n            {item.icon ? <ix-icon name={item.icon} size=\"16\"></ix-icon> : ''}\n            {item.label}\n          </span>\n          {!isLastItem ? (\n            <span class=\"glyph glyph-18 glyph-chevron-right-small text-default-text\"></span>\n          ) : null}\n        </div>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef\n              : null\n          }\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => (\n              <ix-dropdown-item\n                label={item.label}\n                onClick={() => this.onItemClick(item.label)}\n              ></ix-dropdown-item>\n            ))}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <div\n            class=\"crumb crumb-dropdown\"\n            ref={(ref) => (this.previousButtonRef = ref)}\n          >\n            <span class=\"remove-anchor more-text\">\n              <span class=\"more-text-ellipsis\">...</span>\n              <span class=\"glyph glyph-16 glyph-chevron-right\"></span>\n            </span>\n          </div>\n        ) : null}\n        <div class=\"crumb-items\">\n          {this.renderBreadcrumbItems()}\n          <slot></slot>\n        </div>\n        <ix-dropdown trigger={this.nextButtonRef}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\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';\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  scoped: true,\n})\nexport class BreadcrumbItem {\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-5845a03c.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as d,H as n,g as l}from"./p-8fcd6f85.js";import{a as o}from"./p-810b5232.js";const r=".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-custom-header.sc-ix-blind{display:flex;align-items:center}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";const s=class{constructor(d){i(this,d);this.collapsedChange=e(this,"collapsedChange",7);this.collapsed=false;this.label=undefined}onHeaderClick(i){i.preventDefault();i.stopImmediatePropagation();this.collapsed=!this.collapsed;this.collapsedChange.emit(this.collapsed)}componentDidLoad(){this.animateCollapse(this.collapsed)}get content(){return this.hostElement.querySelector(".blind-content")}animation(i){this.animateCollapse(i)}animateCollapse(i){if(i){this.rotateChevronRight()}else{this.rotateChevronDown()}}rotateChevronDown(){o({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:90});o({targets:this.content,duration:150,easing:"easeInOutSine",opacity:1})}rotateChevronRight(){o({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:0});o({targets:this.content,duration:150,easing:"easeInOutSine",opacity:0})}render(){return d(n,null,d("div",{class:{"blind-header":true,closed:this.collapsed},onClick:i=>this.onHeaderClick(i)},d("span",{ref:i=>this.chevronRef=i,class:{glyph:true,"glyph-chevron-right-small":true}}),d("div",{class:"blind-header-title"},this.label!==undefined?d("span",{class:"blind-header-title-default"},this.label):d("slot",{name:"custom-header"}))),d("div",{class:{"blind-content":true,hide:this.collapsed}},d("slot",null)))}get hostElement(){return l(this)}static get watchers(){return{collapsed:["animation"]}}};s.style=r;export{s as ix_blind};
-//# sourceMappingURL=p-5845a03c.entry.js.map