npm - @siemens/ix - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1215) hide show

package/dist/components/ix-workflow-steps.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createMutationObserver } from './mutation-observer.js';
-const workflowStepsCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .steps{display:flex}:host .steps.vertical{display:block}";
+const workflowStepsCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .steps{display:flex}:host .steps.vertical{display:block}";
 const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps extends HTMLElement {
   constructor() {
@@ -10,7 +10,6 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
     this.__attachShadow();
     this.stepSelected = createEvent(this, "stepSelected", 7);
     this.vertical = false;
-    this.linear = false;
     this.clickable = false;
     this.selectedIndex = 0;
   }
@@ -39,11 +38,15 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
     });
   }
   onStepSelectionChanged(event) {
+    const eventTarget = event.detail;
     const steps = this.getSteps();
-    steps.forEach((element) => {
-      if (element !== event.target) {
-        element.selected = false;
-      }
+    const clickIndex = steps.findIndex((step) => step === eventTarget);
+    const clientEvent = this.stepSelected.emit(clickIndex);
+    if (clientEvent.defaultPrevented) {
+      return;
+    }
+    steps.forEach((step, index) => {
+      step.selected = index === clickIndex;
     });
   }
   componentDidLoad() {
@@ -71,7 +74,6 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
   static get style() { return workflowStepsCss; }
 }, [1, "ix-workflow-steps", {
     "vertical": [4],
-    "linear": [4],
     "clickable": [4],
     "selectedIndex": [2, "selected-index"]
   }, [[0, "selectedChanged", "onStepSelectionChanged"]]]);

package/dist/components/ix-workflow-steps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-workflow-steps.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,~~6HAA6H~~;;~~MC0BzI~~,aAAa;;;;;;oBAMI,KAAK;~~kBAMP~~,KAAK;~~qBAKF,KAAK;~~yBAKF,CAAC;;EAOzB,QAAQ;IACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;GAC1E;EAED,WAAW;IACT,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MAC3B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;MACjC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MACnC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC;MAEhD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC5B,OAAO;OACR;MAED,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC;OAC5B;WAAM,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACrC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;OAC3B;WAAM;QACL,OAAO,CAAC,QAAQ,GAAG,WAAW,CAAC;OAChC;KACF,CAAC,CAAC;GACJ;EAKD,sBAAsB,CAAC,KAA6C;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,KAAK,CAAC,~~OAAO~~,CAAC,CAAC,~~OAAO~~;~~MACpB~~,IAAI,OAAO,KAAK,~~KAAK~~,CAAC,~~MAAM~~,EAAE;~~QAC5B~~,~~OAAO~~,CAAC,QAAQ,GAAG,KAAK,CAAC;~~OAC1B;KACF~~,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,SAAS;MAC/C,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE;QAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;GAC9D;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAClD,eAAa,CACT,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=shadow","./src/components/workflow-steps/workflow-steps.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/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .steps {\n display: flex;\n\n &.vertical {\n display: block;\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 Listen,\n Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-workflow-steps',\n styleUrl: 'workflow-steps.scss',\n shadow: true,\n})\nexport class WorkflowSteps {\n @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n /\n Select orientation\n /\n @Prop() vertical: boolean = false;\n\n /\n Select linear mode\n * @deprecated Has no effect on component. Will get removed in 2.0.0\n /\n @Prop() linear: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() clickable: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() selectedIndex: number = 0;\n\n /\n On step selected event\n */\n @Event() stepSelected: EventEmitter<number>;\n\n private getSteps() {\n return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n }\n\n updateSteps() {\n let steps = this.getSteps();\n steps.forEach((element, index) => {\n element.vertical = this.vertical;\n element.clickable = this.clickable;\n element.selected = this.selectedIndex === index;\n\n if (steps.length === 1) {\n element.position = 'single';\n return;\n }\n\n if (index === 0) {\n element.position = 'first';\n } else if (index === steps.length - 1) {\n element.position = 'last';\n } else {\n element.position = 'undefined';\n }\n });\n }\n\n private observer: MutationObserver;\n\n @Listen('selectedChanged')\n onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n const steps = this.getSteps();\n steps.~~forEach~~((~~element~~) => {\n if (~~element~~ ~~!==~~ ~~event.target~~) {\n ~~element~~.selected = ~~false~~;\n ~~}\n~~ });\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.updateSteps();\n }\n }\n });\n\n this.observer.observe(this.hostElement, { childList: true });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n componentDidRender() {\n this.updateSteps();\n }\n\n render() {\n return (\n <Host>\n <div class={{ steps: true, vertical: this.vertical }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-workflow-steps.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,mqBAAmqB;;MC0B/qB,aAAa;;;;;;oBAMI,KAAK;qBAKJ,KAAK;yBAKF,CAAC;;EAOzB,QAAQ;IACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;GAC1E;EAED,WAAW;IACT,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MAC3B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;MACjC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MACnC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC;MAEhD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC5B,OAAO;OACR;MAED,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC;OAC5B;WAAM,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACrC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;OAC3B;WAAM;QACL,OAAO,CAAC,QAAQ,GAAG,WAAW,CAAC;OAChC;KACF,CAAC,CAAC;GACJ;EAKD,sBAAsB,CAAC,KAA6C;IAClE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IAEjC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,MAAM,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,WAAW,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEvD,IAAI,WAAW,CAAC,gBAAgB,EAAE;MAChC,OAAO;KACR;IAED,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;MACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,UAAU,CAAC;KACtC,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,SAAS;MAC/C,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE;QAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;GAC9D;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAClD,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=shadow","./src/components/workflow-steps/workflow-steps.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/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .steps {\n display: flex;\n\n &.vertical {\n display: block;\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 Listen,\n Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-workflow-steps',\n styleUrl: 'workflow-steps.scss',\n shadow: true,\n})\nexport class WorkflowSteps {\n @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n /\n Select orientation\n /\n @Prop() vertical: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() clickable: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() selectedIndex: number = 0;\n\n /\n On step selected event\n */\n @Event() stepSelected: EventEmitter<number>;\n\n private getSteps() {\n return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n }\n\n updateSteps() {\n let steps = this.getSteps();\n steps.forEach((element, index) => {\n element.vertical = this.vertical;\n element.clickable = this.clickable;\n element.selected = this.selectedIndex === index;\n\n if (steps.length === 1) {\n element.position = 'single';\n return;\n }\n\n if (index === 0) {\n element.position = 'first';\n } else if (index === steps.length - 1) {\n element.position = 'last';\n } else {\n element.position = 'undefined';\n }\n });\n }\n\n private observer: MutationObserver;\n\n @Listen('selectedChanged')\n onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n const eventTarget = event.detail;\n\n const steps = this.getSteps();\n const clickIndex = steps.findIndex((step) => step === eventTarget);\n const clientEvent = this.stepSelected.emit(clickIndex);\n\n if (clientEvent.defaultPrevented) {\n return;\n }\n\n steps.forEach((step, index) => {\n step.selected = index === clickIndex;\n });\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.updateSteps();\n }\n }\n });\n\n this.observer.observe(this.hostElement, { childList: true });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n componentDidRender() {\n this.updateSteps();\n }\n\n render() {\n return (\n <Host>\n <div class={{ steps: true, vertical: this.vertical }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/map-navigation-overlay.js CHANGED Viewed

@@ -4,12 +4,13 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './spinner.js';
-const mapNavigationOverlayCss = ".text-xs.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-map-navigation-overlay{-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)}.text-l-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-map-navigation-overlay{color:var(--theme-color-primary)}.sc-ix-map-navigation-overlay-h{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}.sc-ix-map-navigation-overlay-h .overlay-header.sc-ix-map-navigation-overlay{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay{display:flex;align-items:center;min-width:0}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay ix-icon.sc-ix-map-navigation-overlay{-webkit-margin-start:1rem;margin-inline-start:1rem;color:var(--theme-overlay-header--color)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay .overlay-header-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);-webkit-margin-start:1rem;margin-inline-start:1rem}.sc-ix-map-navigation-overlay-h .color-indicator.sc-ix-map-navigation-overlay{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}.sc-ix-map-navigation-overlay-h .overlay-close.sc-ix-map-navigation-overlay{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:1rem;margin-inline-end:1rem}";
+const mapNavigationOverlayCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-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)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .overlay-header{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}:host .overlay-header-content{display:flex;align-items:center;min-width:0}:host .overlay-header-content ix-icon{-webkit-margin-start:1rem;margin-inline-start:1rem;color:var(--theme-overlay-header--color)}:host .overlay-header-content .overlay-header-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);-webkit-margin-start:1rem;margin-inline-start:1rem}:host .color-indicator{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}:host .overlay-close{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:1rem;margin-inline-end:1rem}:host .d-none{display:none}:host(.d-none){display:none}";
 const MapNavigationOverlay = /*@__PURE__*/ proxyCustomElement(class MapNavigationOverlay extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.closeClick = createEvent(this, "closeClick", 7);
     this.name = undefined;
     this.icon = undefined;
@@ -54,7 +55,7 @@ const MapNavigationOverlay = /*@__PURE__*/ proxyCustomElement(class MapNavigatio
   }
   get hostElement() { return this; }
   static get style() { return mapNavigationOverlayCss; }
-}, [6, "ix-map-navigation-overlay", {
+}, [1, "ix-map-navigation-overlay", {
     "name": [1],
     "icon": [1],
     "color": [1]

package/dist/components/map-navigation-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"map-navigation-overlay.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,~~qzJAAqzJ~~;;~~MCyBx0J~~,oBAAoB~~;;;;;;;;;~~EAyB/B,iBAAiB;IACf,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE;QACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OAC7C;KACF,CAAC,CAAC;GACJ;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC1C;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;OACjE,EACD,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC1B,eAAe,IAAI,CAAC,KAAK,GAAG;YAC5B,EAAE;OACP,GACI,EACP,WAAK,KAAK,EAAC,wBAAwB,IACjC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAC9C,YAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH,EACN,sBACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClB,CACd,EAEN,eAAa,CACR,EACP;GACH;;;;;;;;AAtFuB,6BAAQ,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=~~scoped~~","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'common-variables';\n@import 'fonts';\n@import 'mixins/text-truncation';\n\n:host {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\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} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n ~~scoped~~: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /\n Title of overlay\n /\n @Prop() name: string;\n\n /\n Icon of overlay\n /\n @Prop() icon: string;\n\n /\n Color of icon\n /\n @Prop() color: string;\n\n /\n Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' \|\| this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon=\"close\"\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"map-navigation-overlay.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,unJAAunJ;;MCyB1oJ,oBAAoB;;;;;;;;;;EAyB/B,iBAAiB;IACf,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE;QACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OAC7C;KACF,CAAC,CAAC;GACJ;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC1C;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;OACjE,EACD,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC1B,eAAe,IAAI,CAAC,KAAK,GAAG;YAC5B,EAAE;OACP,GACI,EACP,WAAK,KAAK,EAAC,wBAAwB,IACjC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAC9C,YAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH,EACN,sBACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClB,CACd,EAEN,eAAa,CACR,EACP;GACH;;;;;;;;AAtFuB,6BAAQ,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=shadow","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\n }\n\n .d-none {\n display: none;\n }\n}\n\n:host(.d-none) {\n display: none;\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} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n shadow: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /\n Title of overlay\n /\n @Prop() name: string;\n\n /\n Icon of overlay\n /\n @Prop() icon: string;\n\n /\n Color of icon\n /\n @Prop() color: string;\n\n /\n Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' \|\| this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon=\"close\"\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/menu-avatar-item.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$2 } from './dropdown-item.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const menuAvatarItemCss = ":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}";
+const menuAvatarItemCss = ":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const MenuAvatarItem = /*@__PURE__*/ proxyCustomElement(class MenuAvatarItem extends HTMLElement {
   constructor() {

package/dist/components/menu-avatar-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-avatar-item.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,~~mFAAmF~~;;~~MCuBhG~~,cAAc;;;;;;;;;EAkBzB,MAAM;IACJ,QACE,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","./src/components/menu-avatar-item/menu-avatar-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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n */\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n render() {\n return (\n <ix-dropdown-item\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}
1	+ {"file":"menu-avatar-item.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,knBAAknB;;MCuB/nB,cAAc;;;;;;;;;EAkBzB,MAAM;IACJ,QACE,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","./src/components/menu-avatar-item/menu-avatar-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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n */\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n render() {\n return (\n <ix-dropdown-item\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}

package/dist/components/menu-item.js CHANGED Viewed

@@ -2,13 +2,14 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as createMutationObserver } from './mutation-observer.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host i.glyph{color:var(--theme-nav-item-primary-icon--color);position:relative}:host .tab:focus-visible{outline:none}:host:focus-visible{outline:none}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.glyph{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}";
+const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{all:unset;box-sizing:border-box;display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);width:100%;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .tab-icon{color:var(--theme-nav-item-primary-icon--color);position:relative}:host .tab:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:-1px}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.tab-icon{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.tab-nested) .tab::before{display:none}";
 const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.isHostedInsideCategory = false;
     this.home = false;
     this.bottom = false;
     this.tabIcon = 'document';
@@ -18,6 +19,10 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
     this.disabled = undefined;
     this.title = undefined;
   }
+  componentWillLoad() {
+    this.isHostedInsideCategory =
+      !!this.hostElement.closest('ix-menu-category');
+  }
   componentWillRender() {
     this.title = this.hostElement.innerText;
   }
@@ -54,7 +59,8 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
         'home-tab': this.home,
         'bottom-tab': this.bottom,
         active: this.active,
-      } }, extendedAttributes), h("li", { class: "tab", title: this.title }, h("ix-icon", { name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
+        'tab-nested': this.isHostedInsideCategory,
+      } }, extendedAttributes), h("button", { class: "tab", title: this.title, tabIndex: this.disabled ? -1 : 0, role: "listitem" }, h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
   }
   get hostElement() { return this; }
   static get style() { return menuItemCss; }

package/dist/components/menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-item.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,~~09FAA09F~~;;~~MCoBj+F~~,QAAQ;;;;;~~gBAIJ~~,KAAK;kBAOH,KAAK;mBAOJ,UAAU;;;;;;;~~EA4B5B~~,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;MACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;KACzC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;;IACJ,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,kBAAkB,GAAG;QACnB,IAAI,EAAE,MAAM;OACb,CAAC;KACH;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,kBAAkB,GAAG;QACnB,IAAI,EAAE,QAAQ;OACf,CAAC;KACH;IACD,QACE,EAAC,IAAI,kBACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;~~OACpB~~,IACG,kBAAkB,GAEtB,~~UAAI~~,KAAK,EAAC,KAAK,~~EAAC~~,KAAK,EAAE,IAAI,CAAC,KAAK,~~IAC/B~~,~~eAAS~~,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,~~GAAY~~,~~EACpD~~,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,EACN,YAAM,KAAK,EAAC,uBAAuB,IACjC,eAAa,CACR,CACJ,~~CACA,~~EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","./src/components/menu-item/menu-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$menuItemHeight: 3rem;\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: var(--ix-menu-item-height, $menuItemHeight);\n min-height: var(--ix-menu-item-height, $menuItemHeight);\n max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n .tab {\n display: flex;\n position: relative;\n align-items: center;\n height: var(--ix-menu-item-height, $menuItemHeight);\n z-index: 500;\n padding-left: ~~0.875rem~~;\n\n @include ghost-hover-pressed;\n }\n\n i.~~glyph~~ {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n }\n\n .tab:focus-visible {\n outline: ~~none;\n }\n\n &:~~focus-~~visible {\~~n outline: ~~none~~;\n }\n\n .tab:not(:last-child) {\n margin-bottom: $small-space;\n }\n\n .notification {\n display: inline-flex;\n position: absolute;\n top: 0.25rem;\n left: 1.75rem;\n\n .pill {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 0.5rem;\n min-width: 1rem;\n position: relative;\n border-radius: 6.25rem;\n background-color: var(--theme-color-primary);\n border-radius: 6.25rem;\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n font-family: Siemens Sans, Arial, sans-serif;\n color: var(--theme-color-primary--contrast);\n padding: $tiny-space;\n }\n }\n\n .tab-text {\n @include ellipsis;\n color: var(--theme-nav-item-primary--color);\n margin: 0 1.25rem;\n user-select: none;\n width: 100%;\n }\n}\n\n:host(.active),\n:host(.selected) {\n .tab {\n background-color: var(--theme-nav-item-primary--background--selected);\n }\n\n .tab::before {\n content: '';\n background-color: var(--theme-nav-item-primary--border-color--selected);\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: 0.25rem;\n left: 0;\n position: absolute;\n }\n\n .tab > .glyph {\n color: var(--theme-nav-item-primary-icon--color--selected);\n }\n}\n\n:host(.disabled) {\n color: var(--theme-color-weak-text);\n pointer-events: none;\n cursor: default;\n\n .tab > .~~glyph~~ {\n color: var(--theme-color-weak-text);\n }\n\n .tab-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n $bottom-height: 2.25rem;\n\n min-height: $bottom-height;\n height: $bottom-height;\n max-height: $bottom-height;\n\n .tab {\n height: $bottom-height;\n }\n\n .tab::before {\n height: $bottom-height;\n background-color: transparent;\n }\n\n &.active,\n &.selected {\n &:hover {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n\n &:active {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n .tab {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n/\n @slot menu-item-label Custom label\n /\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n /\n @Prop() bottom = false;\n\n /\n Icon name from @siemens/ix-icons\n \n @deprecated Use `icon` property. Will be removed in 3.0.0\n /\n @Prop() tabIcon = 'document';\n\n /\n Icon name from @siemens/ix-icons\n /\n @Prop() icon: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications: number;\n\n /\n State to display active\n /\n @Prop() active: boolean;\n\n /\n Disable tab and remove event handlers\n */\n @Prop() disabled: boolean;\n\n @Element() hostElement: HTMLIxMenuItemElement;\n\n @State() title: string;\n\n private observer: MutationObserver;\n\n componentWillRender() {\n this.title = this.hostElement.innerText;\n }\n\n connectedCallback() {\n this.observer = createMutationObserver(() => {\n this.title = this.hostElement.innerText;\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n let extendedAttributes = {};\n if (this.home) {\n extendedAttributes = {\n slot: 'home',\n };\n }\n\n if (this.bottom) {\n extendedAttributes = {\n slot: 'bottom',\n };\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n }}\n {...extendedAttributes}\n >\n <li class=\"tab\" title={this.title}>\n <ix-icon name={this.icon ?? this.tabIcon}></ix-icon>\n <div class=\"notification\">\n {this.notifications ? (\n <div class=\"pill\">{this.notifications}</div>\n ) : null}\n </div>\n <span class=\"tab-text text-default\">\n <slot></slot>\n </span>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"menu-item.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,4kGAA4kG;;MCoBnlG,QAAQ;;;;;IA6CX,2BAAsB,GAAG,KAAK,CAAC;gBAzCxB,KAAK;kBAOH,KAAK;mBAOJ,UAAU;;;;;;;EA6B5B,iBAAiB;IACf,IAAI,CAAC,sBAAsB;MACzB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;GAClD;EAED,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;MACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;KACzC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;;IACJ,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,kBAAkB,GAAG;QACnB,IAAI,EAAE,MAAM;OACb,CAAC;KACH;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,kBAAkB,GAAG;QACnB,IAAI,EAAE,QAAQ;OACf,CAAC;KACH;IACD,QACE,EAAC,IAAI,kBACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,YAAY,EAAE,IAAI,CAAC,sBAAsB;OAC1C,IACG,kBAAkB,GAEtB,cACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,IAAI,EAAC,UAAU,IAEf,eACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,GACtB,EACX,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,EACN,YAAM,KAAK,EAAC,uBAAuB,IACjC,eAAa,CACR,CACA,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","./src/components/menu-item/menu-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$menuItemHeight: 3rem;\n$menuItemPadding: 0.875rem;\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: var(--ix-menu-item-height, $menuItemHeight);\n min-height: var(--ix-menu-item-height, $menuItemHeight);\n max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n .tab {\n all: unset;\n box-sizing: border-box;\n display: flex;\n position: relative;\n align-items: center;\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: calc(100%);\n z-index: 500;\n padding-left: $menuItemPadding;\n\n @include ghost-hover-pressed;\n }\n\n .tab-icon {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n }\n\n .tab:focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: -1px;\n }\n\n .tab:not(:last-child) {\n margin-bottom: $small-space;\n }\n\n .notification {\n display: inline-flex;\n position: absolute;\n top: 0.25rem;\n left: 1.75rem;\n\n .pill {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 0.5rem;\n min-width: 1rem;\n position: relative;\n border-radius: 6.25rem;\n background-color: var(--theme-color-primary);\n border-radius: 6.25rem;\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n font-family: Siemens Sans, Arial, sans-serif;\n color: var(--theme-color-primary--contrast);\n padding: $tiny-space;\n }\n }\n\n .tab-text {\n @include ellipsis;\n color: var(--theme-nav-item-primary--color);\n margin: 0 1.25rem;\n user-select: none;\n width: 100%;\n }\n}\n\n:host(.active),\n:host(.selected) {\n .tab {\n background-color: var(--theme-nav-item-primary--background--selected);\n }\n\n .tab::before {\n content: '';\n background-color: var(--theme-nav-item-primary--border-color--selected);\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: 0.25rem;\n left: 0;\n position: absolute;\n }\n\n .tab > .glyph {\n color: var(--theme-nav-item-primary-icon--color--selected);\n }\n}\n\n:host(.disabled) {\n color: var(--theme-color-weak-text);\n pointer-events: none;\n cursor: default;\n\n .tab > .tab-icon {\n color: var(--theme-color-weak-text);\n }\n\n .tab-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n $bottom-height: 2.25rem;\n\n min-height: $bottom-height;\n height: $bottom-height;\n max-height: $bottom-height;\n\n .tab {\n height: $bottom-height;\n }\n\n .tab::before {\n height: $bottom-height;\n background-color: transparent;\n }\n\n &.active,\n &.selected {\n &:hover {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n\n &:active {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n .tab {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n}\n\n:host(.tab-nested) {\n .tab::before {\n display: none;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n/\n @slot menu-item-label Custom label\n /\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n /\n @Prop() bottom = false;\n\n /\n Icon name from @siemens/ix-icons\n \n @deprecated Use `icon` property. Will be removed in 3.0.0\n /\n @Prop() tabIcon = 'document';\n\n /\n Icon name from @siemens/ix-icons\n /\n @Prop() icon: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications: number;\n\n /\n State to display active\n /\n @Prop() active: boolean;\n\n /\n Disable tab and remove event handlers\n */\n @Prop() disabled: boolean;\n\n @Element() hostElement: HTMLIxMenuItemElement;\n\n @State() title: string;\n\n private observer: MutationObserver;\n private isHostedInsideCategory = false;\n\n componentWillLoad() {\n this.isHostedInsideCategory =\n !!this.hostElement.closest('ix-menu-category');\n }\n\n componentWillRender() {\n this.title = this.hostElement.innerText;\n }\n\n connectedCallback() {\n this.observer = createMutationObserver(() => {\n this.title = this.hostElement.innerText;\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n let extendedAttributes = {};\n if (this.home) {\n extendedAttributes = {\n slot: 'home',\n };\n }\n\n if (this.bottom) {\n extendedAttributes = {\n slot: 'bottom',\n };\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n 'tab-nested': this.isHostedInsideCategory,\n }}\n {...extendedAttributes}\n >\n <button\n class=\"tab\"\n title={this.title}\n tabIndex={this.disabled ? -1 : 0}\n role=\"listitem\"\n >\n <ix-icon\n class={'tab-icon'}\n name={this.icon ?? this.tabIcon}\n ></ix-icon>\n <div class=\"notification\">\n {this.notifications ? (\n <div class=\"pill\">{this.notifications}</div>\n ) : null}\n </div>\n <span class=\"tab-text text-default\">\n <slot></slot>\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/menu-service.js CHANGED Viewed

@@ -1,5 +1,83 @@
+import { m as matchBreakpoint } from './breakpoints.js';
 import { T as TypedEvent } from './typed-event.js';
+var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet$1 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ApplicationLayoutService_supportedBreakpoints, _ApplicationLayoutService_breakpointChangeListener, _ApplicationLayoutService_breakpoint, _ApplicationLayoutService_isDetectionEnabled;
+class ApplicationLayoutService {
+  constructor() {
+    // Keep order of breakpoints
+    _ApplicationLayoutService_supportedBreakpoints.set(this, ['sm', 'md', 'lg']);
+    _ApplicationLayoutService_breakpointChangeListener.set(this, new TypedEvent());
+    _ApplicationLayoutService_breakpoint.set(this, 'lg');
+    _ApplicationLayoutService_isDetectionEnabled.set(this, true);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this.onResize.bind(this));
+      this.onResize();
+    }
+  }
+  get breakpoint() {
+    return __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpoint, "f");
+  }
+  get onChange() {
+    return __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f");
+  }
+  get isDetectionEnabled() {
+    return __classPrivateFieldGet$1(this, _ApplicationLayoutService_isDetectionEnabled, "f");
+  }
+  onResize() {
+    if (!__classPrivateFieldGet$1(this, _ApplicationLayoutService_isDetectionEnabled, "f")) {
+      return;
+    }
+    if (!__classPrivateFieldGet$1(this, _ApplicationLayoutService_supportedBreakpoints, "f")) {
+      return;
+    }
+    const matchBreakpoints = [];
+    const breakpoints = __classPrivateFieldGet$1(this, _ApplicationLayoutService_supportedBreakpoints, "f");
+    breakpoints.forEach((breakpoint) => {
+      const match = matchBreakpoint(breakpoint);
+      matchBreakpoints.push([breakpoint, match]);
+    });
+    if (matchBreakpoints.every(([_, match]) => match === false)) {
+      __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoints[0]);
+      __classPrivateFieldSet$1(this, _ApplicationLayoutService_breakpoint, breakpoints[0], "f");
+      return;
+    }
+    for (const [breakpoint, match] of matchBreakpoints.reverse()) {
+      if (match) {
+        __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint);
+        __classPrivateFieldSet$1(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
+        break;
+      }
+    }
+  }
+  disableBreakpointDetection() {
+    __classPrivateFieldSet$1(this, _ApplicationLayoutService_isDetectionEnabled, false, "f");
+  }
+  enableBreakpointDetection() {
+    __classPrivateFieldSet$1(this, _ApplicationLayoutService_isDetectionEnabled, true, "f");
+  }
+  setBreakpoint(breakpoint) {
+    __classPrivateFieldSet$1(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
+    __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint);
+  }
+  setBreakpoints(breakpoints) {
+    __classPrivateFieldSet$1(this, _ApplicationLayoutService_supportedBreakpoints, breakpoints, "f");
+    this.onResize();
+  }
+}
+_ApplicationLayoutService_supportedBreakpoints = new WeakMap(), _ApplicationLayoutService_breakpointChangeListener = new WeakMap(), _ApplicationLayoutService_breakpoint = new WeakMap(), _ApplicationLayoutService_isDetectionEnabled = new WeakMap();
+const applicationLayoutService = new ApplicationLayoutService();
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -73,6 +151,6 @@ class MenuService {
 _MenuService_isPinned = new WeakMap();
 const menuController = new MenuService();
-export { menuController as m };
+export { applicationLayoutService as a, menuController as m };
 //# sourceMappingURL=menu-service.js.map

package/dist/components/menu-service.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-service.js","mappings":";;~~AAAA~~;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;IAC7C,gCAAY,KAAK,EAAC;GA0DnB;EAxDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B;MAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC1C,CACF,CAAC;GACH;EAEM,WAAW,CAAC,MAAe;IAChC,uBAAA,IAAI,yBAAa,MAAM,MAAA,CAAC;GACzB;EAEM,MAAM,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;GACzB;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;GAC9B;EAED,IAAI,QAAQ;IACV,OAAO,uBAAA,IAAI,6BAAU,CAAC;GACvB;CACF;;MAEY,cAAc,GAAG,IAAI,WAAW;;;;","names":[],"sources":["./src/components/utils/menu-service/menu-service.ts"],"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\nimport { TypedEvent } from '../typed-event';\n\nclass MenuService {\n menuElement: HTMLIxMenuElement \| null = null;\n menuExpandChange = new TypedEvent<boolean>();\n #isPinned = false;\n\n register(menuElement: HTMLIxMenuElement) {\n if (this.menuElement) {\n console.warn('Menu already defined');\n return;\n }\n this.menuElement = menuElement;\n this.menuElement.addEventListener(\n 'expandChange',\n (event: CustomEvent<boolean>) => {\n this.menuExpandChange.emit(event.detail);\n }\n );\n }\n\n public setIsPinned(pinned: boolean) {\n this.#isPinned = pinned;\n }\n\n public async open() {\n if (this.menuElement) {\n this.menuElement.toggleMenu(true);\n return true;\n }\n\n return false;\n }\n\n public async close() {\n if (this.menuElement) {\n this.menuElement.toggleMenu(false);\n return true;\n }\n\n return false;\n }\n\n public async toggle() {\n if (this.menuElement) {\n this.menuElement.toggleMenu();\n return true;\n }\n\n return false;\n }\n\n get nativeElement() {\n return this.menuElement;\n }\n\n get expandChange() {\n return this.menuExpandChange;\n }\n\n get isPinned() {\n return this.#isPinned;\n }\n}\n\nexport const menuController = new MenuService();\n"],"version":3}
1	+ {"file":"menu-service.js","mappings":";;;;;;;;;;;;;;;AAWA,MAAM,wBAAwB;EAQ5B;;IANA,yDAAsC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAC;IACzD,6DAA4B,IAAI,UAAU,EAAc,EAAC;IACzD,+CAA0B,IAAI,EAAC;IAE/B,uDAAsB,IAAI,EAAC;IAGzB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;MACjC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;MAC5D,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;GACF;EAED,IAAI,UAAU;IACZ,OAAOA,yBAAA,IAAI,4CAAY,CAAC;GACzB;EAED,IAAI,QAAQ;IACV,OAAOA,yBAAA,IAAI,0DAA0B,CAAC;GACvC;EAED,IAAI,kBAAkB;IACpB,OAAOA,yBAAA,IAAI,oDAAoB,CAAC;GACjC;EAEO,QAAQ;IACd,IAAI,CAACA,yBAAA,IAAI,oDAAoB,EAAE;MAC7B,OAAO;KACR;IACD,IAAI,CAACA,yBAAA,IAAI,sDAAsB,EAAE;MAC/B,OAAO;KACR;IACD,MAAM,gBAAgB,GAA4B,EAAE,CAAC;IAErD,MAAM,WAAW,GAAGA,yBAAA,IAAI,sDAAsB,CAAC;IAE/C,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU;MAC7B,MAAM,KAAK,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;MAC1C,gBAAgB,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;KAC5C,CAAC,CAAC;IAEH,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,KAAK,KAAK,KAAK,CAAC,EAAE;MAC3DA,yBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;MACpDC,yBAAA,IAAI,wCAAe,WAAW,CAAC,CAAC,CAAC,MAAA,CAAC;MAClC,OAAO;KACR;IAED,KAAK,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,gBAAgB,CAAC,OAAO,EAAE,EAAE;MAC5D,IAAI,KAAK,EAAE;QACTD,yBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAChDC,yBAAA,IAAI,wCAAe,UAAU,MAAA,CAAC;QAC9B,MAAM;OACP;KACF;GACF;EAEM,0BAA0B;IAC/BA,yBAAA,IAAI,gDAAuB,KAAK,MAAA,CAAC;GAClC;EAEM,yBAAyB;IAC9BA,yBAAA,IAAI,gDAAuB,IAAI,MAAA,CAAC;GACjC;EAEM,aAAa,CAAC,UAAsB;IACzCA,yBAAA,IAAI,wCAAe,UAAU,MAAA,CAAC;IAC9BD,yBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GACjD;EAEM,cAAc,CAAC,WAAyB;IAC7CC,yBAAA,IAAI,kDAAyB,WAAW,MAAA,CAAC;IACzC,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;CACF;;MAEY,wBAAwB,GAAG,IAAI,wBAAwB;;ACxFpE;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;IAC7C,gCAAY,KAAK,EAAC;GA0DnB;EAxDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B;MAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC1C,CACF,CAAC;GACH;EAEM,WAAW,CAAC,MAAe;IAChC,uBAAA,IAAI,yBAAa,MAAM,MAAA,CAAC;GACzB;EAEM,MAAM,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;GACzB;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;GAC9B;EAED,IAAI,QAAQ;IACV,OAAO,uBAAA,IAAI,6BAAU,CAAC;GACvB;CACF;;MAEY,cAAc,GAAG,IAAI,WAAW;;;;","names":["__classPrivateFieldGet","__classPrivateFieldSet"],"sources":["./src/components/utils/application-layout/service.ts","./src/components/utils/menu-service/menu-service.ts"],"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 /\nimport { Breakpoint, matchBreakpoint } from '../breakpoints';\nimport { TypedEvent } from '../typed-event';\n\nclass ApplicationLayoutService {\n // Keep order of breakpoints\n #supportedBreakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n #breakpointChangeListener = new TypedEvent<Breakpoint>();\n #breakpoint: Breakpoint = 'lg';\n\n #isDetectionEnabled = true;\n\n constructor() {\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', this.onResize.bind(this));\n this.onResize();\n }\n }\n\n get breakpoint() {\n return this.#breakpoint;\n }\n\n get onChange() {\n return this.#breakpointChangeListener;\n }\n\n get isDetectionEnabled() {\n return this.#isDetectionEnabled;\n }\n\n private onResize() {\n if (!this.#isDetectionEnabled) {\n return;\n }\n if (!this.#supportedBreakpoints) {\n return;\n }\n const matchBreakpoints: [Breakpoint, boolean][] = [];\n\n const breakpoints = this.#supportedBreakpoints;\n\n breakpoints.forEach((breakpoint) => {\n const match = matchBreakpoint(breakpoint);\n matchBreakpoints.push([breakpoint, match]);\n });\n\n if (matchBreakpoints.every(([_, match]) => match === false)) {\n this.#breakpointChangeListener.emit(breakpoints[0]);\n this.#breakpoint = breakpoints[0];\n return;\n }\n\n for (const [breakpoint, match] of matchBreakpoints.reverse()) {\n if (match) {\n this.#breakpointChangeListener.emit(breakpoint);\n this.#breakpoint = breakpoint;\n break;\n }\n }\n }\n\n public disableBreakpointDetection() {\n this.#isDetectionEnabled = false;\n }\n\n public enableBreakpointDetection() {\n this.#isDetectionEnabled = true;\n }\n\n public setBreakpoint(breakpoint: Breakpoint) {\n this.#breakpoint = breakpoint;\n this.#breakpointChangeListener.emit(breakpoint);\n }\n\n public setBreakpoints(breakpoints: Breakpoint[]) {\n this.#supportedBreakpoints = breakpoints;\n this.onResize();\n }\n}\n\nexport const applicationLayoutService = new ApplicationLayoutService();\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 { TypedEvent } from '../typed-event';\n\nclass MenuService {\n menuElement: HTMLIxMenuElement \| null = null;\n menuExpandChange = new TypedEvent<boolean>();\n #isPinned = false;\n\n register(menuElement: HTMLIxMenuElement) {\n if (this.menuElement) {\n console.warn('Menu already defined');\n return;\n }\n this.menuElement = menuElement;\n this.menuElement.addEventListener(\n 'expandChange',\n (event: CustomEvent<boolean>) => {\n this.menuExpandChange.emit(event.detail);\n }\n );\n }\n\n public setIsPinned(pinned: boolean) {\n this.#isPinned = pinned;\n }\n\n public async open() {\n if (this.menuElement) {\n this.menuElement.toggleMenu(true);\n return true;\n }\n\n return false;\n }\n\n public async close() {\n if (this.menuElement) {\n this.menuElement.toggleMenu(false);\n return true;\n }\n\n return false;\n }\n\n public async toggle() {\n if (this.menuElement) {\n this.menuElement.toggleMenu();\n return true;\n }\n\n return false;\n }\n\n get nativeElement() {\n return this.menuElement;\n }\n\n get expandChange() {\n return this.menuExpandChange;\n }\n\n get isPinned() {\n return this.#isPinned;\n }\n}\n\nexport const menuController = new MenuService();\n"],"version":3}

package/dist/components/my-component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"my-component.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0GAA0G;;MCepHA,aAAW;;;;;EACtB,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["MyComponent"],"sources":["./src/components/my-component/my-component.scss?tag=my-component&encapsulation=scoped","./src/components/my-component/my-component.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\n:host {\n display: block;\n position: relative;\n width: 100vw;\n height: 100vh;\n padding: 0rem 0rem 0rem 0rem;\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 { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'my-component',\n styleUrl: 'my-component.scss',\n scoped: true,\n})\nexport class MyComponent {\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}
1	+ {"file":"my-component.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0GAA0G;;MCepHA,aAAW;;;;;EACtB,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["MyComponent"],"sources":["./src/components/my-component/my-component.scss?tag=my-component&encapsulation=scoped","./src/components/my-component/my-component.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\n:host {\n display: block;\n position: relative;\n width: 100vw;\n height: 100vh;\n padding: 0rem 0rem 0rem 0rem;\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 * LICENxSE file in the root directory of this source tree.\n */\nimport { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'my-component',\n styleUrl: 'my-component.scss',\n scoped: true,\n})\nexport class MyComponent {\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}

package/dist/components/select-item.js CHANGED Viewed

@@ -19,12 +19,13 @@ class IxSelectItemLabelChangeEvent extends CustomEvent {
   }
 }
-const selectItemCss = ".sc-ix-select-item-h{display:block;position:relative}.sc-ix-select-item-h>ix-dropdown-item.sc-ix-select-item{width:100%}.sc-ix-select-item-h .select-item-checked.sc-ix-select-item{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}.d-none.sc-ix-select-item-h{display:none}";
+const selectItemCss = ":host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.d-none){display:none}";
 const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.itemClick = createEvent(this, "itemClick", 7);
     this.label = undefined;
     this.value = undefined;
@@ -61,7 +62,7 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTM
     "label": ["labelChange"]
   }; }
   static get style() { return selectItemCss; }
-}, [2, "ix-select-item", {
+}, [1, "ix-select-item", {
     "label": [513],
     "value": [520],
     "selected": [4],

package/dist/components/select-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"select-item.js","mappings":";;;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;EACA,YAAY,MAA8C;IACxD,KAAK,CAAC,4BAA4B,EAAE;MAClC,OAAO,EAAE,IAAI;MACb,MAAM;KACP,CAAC,CAAC;GACJ;;;ACjBH,MAAM,aAAa,GAAG,~~iWAAiW~~;;~~MC2B1W~~,UAAU~~;;;;;;;~~oBAgBF,KAAK;iBAKR,KAAK;;;;;;EAYrB,MAAM,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACjC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;GACF;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,wBACE,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=~~scoped~~","./src/components/select-item/select-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 /\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n oldValue: string;\n newValue: string;\n}> {\n constructor(detail: { oldValue: string; newValue: string }) {\n super('ix-select-item:labelChange', {\n bubbles: true,\n detail,\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 position: relative;\n\n > ix-dropdown-item {\n width: 100%;\n }\n\n .select-item-checked {\n background-color: var(--theme-select-list-item--background--selected);\n --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n }\n}\n\n:host(.d-none) {\n display: none;\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 Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n tag: 'ix-select-item',\n styleUrl: 'select-item.scss',\n ~~scoped~~: true,\n})\nexport class SelectItem {\n @Element() hostElement: HTMLIxSelectItemElement;\n\n /\n Displayed name of the item\n /\n @Prop({ reflect: true }) label: string;\n\n /\n Item value\n /\n @Prop({ reflect: true }) value!: any;\n\n /\n Whether the item is selected.\n /\n @Prop() selected = false;\n\n /\n @internal\n /\n @Prop() hover = false;\n\n /\n Item clicked\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n @internal\n * @param event\n */\n @Method()\n async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n event?.preventDefault();\n event?.stopPropagation();\n\n this.itemClick.emit(this.value);\n }\n\n componentDidRender() {\n if (!this.value) {\n throw Error('ix-select-item must have a `value` property');\n }\n }\n\n @Watch('label')\n labelChange(newValue: string, oldValue: string) {\n this.hostElement.dispatchEvent(\n new IxSelectItemLabelChangeEvent({\n newValue: newValue,\n oldValue: oldValue,\n })\n );\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown-item\n class={{\n 'select-item-checked': this.selected,\n }}\n checked={this.selected}\n label={this.label ? this.label : this.value}\n onItemClick={(e) => this.onItemClick(e)}\n ></ix-dropdown-item>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"select-item.js","mappings":";;;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;EACA,YAAY,MAA8C;IACxD,KAAK,CAAC,4BAA4B,EAAE;MAClC,OAAO,EAAE,IAAI;MACb,MAAM;KACP,CAAC,CAAC;GACJ;;;ACjBH,MAAM,aAAa,GAAG,mQAAmQ;;MC2B5Q,UAAU;;;;;;;;oBAgBF,KAAK;iBAKR,KAAK;;;;;;EAYrB,MAAM,WAAW,CAAC,KAA8C;IAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;IACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;IAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACjC;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;KAC5D;GACF;EAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;IAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;MAC/B,QAAQ,EAAE,QAAQ;MAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC,CACH,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,wBACE,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","./src/components/select-item/select-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 /\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n oldValue: string;\n newValue: string;\n}> {\n constructor(detail: { oldValue: string; newValue: string }) {\n super('ix-select-item:labelChange', {\n bubbles: true,\n detail,\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 position: relative;\n\n > ix-dropdown-item {\n width: 100%;\n }\n\n .select-item-checked {\n background-color: var(--theme-select-list-item--background--selected);\n --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n }\n}\n\n:host(.d-none) {\n display: none;\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 Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n tag: 'ix-select-item',\n styleUrl: 'select-item.scss',\n shadow: true,\n})\nexport class SelectItem {\n @Element() hostElement: HTMLIxSelectItemElement;\n\n /\n Displayed name of the item\n /\n @Prop({ reflect: true }) label: string;\n\n /\n Item value\n /\n @Prop({ reflect: true }) value!: any;\n\n /\n Whether the item is selected.\n /\n @Prop() selected = false;\n\n /\n @internal\n /\n @Prop() hover = false;\n\n /\n Item clicked\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n @internal\n * @param event\n */\n @Method()\n async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n event?.preventDefault();\n event?.stopPropagation();\n\n this.itemClick.emit(this.value);\n }\n\n componentDidRender() {\n if (!this.value) {\n throw Error('ix-select-item must have a `value` property');\n }\n }\n\n @Watch('label')\n labelChange(newValue: string, oldValue: string) {\n this.hostElement.dispatchEvent(\n new IxSelectItemLabelChangeEvent({\n newValue: newValue,\n oldValue: oldValue,\n })\n );\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown-item\n class={{\n 'select-item-checked': this.selected,\n }}\n checked={this.selected}\n label={this.label ? this.label : this.value}\n onItemClick={(e) => this.onItemClick(e)}\n ></ix-dropdown-item>\n </Host>\n );\n }\n}\n"],"version":3}