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

@siemens/ix 1.6.3 → 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 (1549) hide show

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"~~;;;;;;;;;;;~~AAAA;;;;;;;;MAUa,WAAW;;;ACVxB;;;;;;;;SAsBgB,iBAAiB;EAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;EACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;EAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,CACV,+DAA+D,CAChE,CAAC;IACF,OAAO,SAAS,CAAC;GAClB;EACD,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE1C,OAAO,cAAc,CAAC;GACvB;EACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;EACtD,iBAAiB,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1C,CAAC;AAED,eAAe,KAAK,CAAC,MAAmB;EACtC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;EACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;EAC9C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;EAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;EAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;;;","names":[],"sources":["./src/components/category-filter/filter-state.ts","./src/components/toast/toast-utils.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 { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n public tokens: string[];\n public categories: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\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\nexport type ToastType = 'info' \| 'success' \| 'error' \| 'warning';\nexport type ToastPosition = 'bottom-right' \| 'top-right';\n\nexport interface ToastConfig {\n title?: string;\n message: string \| HTMLElement;\n type?: ToastType;\n autoClose?: boolean;\n autoCloseDelay?: number;\n icon?: string;\n iconColor?: string;\n}\n\nexport function getToastContainer() {\n const containerList = Array.from(\n document.querySelectorAll('ix-toast-container')\n );\n const [container] = containerList;\n if (containerList.length > 1) {\n console.warn(\n 'Multiple toast container are found. Only there first is used.'\n );\n return container;\n }\n if (!container) {\n const toastContainer = document.createElement('ix-toast-container');\n document.body.appendChild(toastContainer);\n\n return toastContainer;\n }\n return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n getToastContainer().position = position;\n}\n\nasync function toast(config: ToastConfig) {\n const context = getToastContainer();\n const toast = await context.showToast(config);\n return toast;\n}\n\ntoast.info = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'info',\n });\n};\n\ntoast.error = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'error',\n });\n};\n\ntoast.success = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'success',\n });\n};\n\ntoast.warning = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'warning',\n });\n};\n\nexport { toast };\n"],"version":3}
1	+ {"file":"index.js","mappings":";;;;;;;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;ACVxB;;;;;;;;SAsBgB,iBAAiB;EAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;EACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;EAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;IAC5B,OAAO,CAAC,IAAI,CACV,+DAA+D,CAChE,CAAC;IACF,OAAO,SAAS,CAAC;GAClB;EACD,IAAI,CAAC,SAAS,EAAE;IACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE1C,OAAO,cAAc,CAAC;GACvB;EACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;EACtD,iBAAiB,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1C,CAAC;AAED,eAAe,KAAK,CAAC,MAAmB;EACtC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;EACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;EAC9C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;EAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;EAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;EAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;AC9ED;;;;;;;;SAYgB,gBAAgB,CAAC,OAAe;EAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;EACjD,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;EAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;EAC5B,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;EAE3B,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;EACpC,KAAK,CAAC,SAAS,EAAE,CAAC;EAElB,OAAO;IACL,MAAM,EAAE,CAAC,IAAY,MAAM,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IACpD,MAAM,EAAE,CAAC,IAAa,EAAE,UAAkB,GAAG;MAC3C,IAAI,IAAI,KAAK,SAAS,EAAE;QACtB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;OAC1B;WAAM;QACL,OAAO,GAAG,CAAC,CAAC;OACb;MACD,UAAU,CAAC;QACT,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACvB,UAAU,CACR,YAAY,MAAM,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACrD,SAAS,CAAC,UAAU,CACrB,CAAC;OACH,EAAE,OAAO,CAAC,CAAC;KACb;GACF,CAAC;AACJ;;;;","names":[],"sources":["./src/components/category-filter/filter-state.ts","./src/components/toast/toast-utils.ts","./src/components/utils/modal/loading.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 { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n public tokens: string[];\n public categories: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\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\nexport type ToastType = 'info' \| 'success' \| 'error' \| 'warning';\nexport type ToastPosition = 'bottom-right' \| 'top-right';\n\nexport interface ToastConfig {\n title?: string;\n message: string \| HTMLElement;\n type?: ToastType;\n autoClose?: boolean;\n autoCloseDelay?: number;\n icon?: string;\n iconColor?: string;\n}\n\nexport function getToastContainer() {\n const containerList = Array.from(\n document.querySelectorAll('ix-toast-container')\n );\n const [container] = containerList;\n if (containerList.length > 1) {\n console.warn(\n 'Multiple toast container are found. Only there first is used.'\n );\n return container;\n }\n if (!container) {\n const toastContainer = document.createElement('ix-toast-container');\n document.body.appendChild(toastContainer);\n\n return toastContainer;\n }\n return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n getToastContainer().position = position;\n}\n\nasync function toast(config: ToastConfig) {\n const context = getToastContainer();\n const toast = await context.showToast(config);\n return toast;\n}\n\ntoast.info = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'info',\n });\n};\n\ntoast.error = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'error',\n });\n};\n\ntoast.success = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'success',\n });\n};\n\ntoast.warning = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'warning',\n });\n};\n\nexport { toast };\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 Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n const modal = document.createElement('ix-modal');\n modal.keyboard = false;\n\n const loading = document.createElement('ix-modal-loading');\n loading.innerText = message;\n modal.appendChild(loading);\n\n getCoreDelegate().attachView(modal);\n modal.showModal();\n\n return {\n update: (text: string) => (loading.innerHTML = text),\n finish: (text?: string, timeout: number = 250) => {\n if (text !== undefined) {\n loading.innerText = text;\n } else {\n timeout = 0;\n }\n setTimeout(() => {\n modal.closeModal(null);\n setTimeout(\n async () => await getCoreDelegate().removeView(modal),\n Animation.mediumTime\n );\n }, timeout);\n },\n };\n}\n"],"version":3}

package/dist/esm/ix-action-card.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-8ddfb6d8.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
-const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ix-card{width:100%;height:100%}:host ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(.selected) ix-card{--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected) ix-card.card-insight{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-notification{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-alarm{--ix-card-background:var(--theme-color-alarm--active)}:host(.selected) ix-card.card-critical{--ix-card-background:var(--theme-color-critical--active)}:host(.selected) ix-card.card-warning{--ix-card-background:var(--theme-color-warning--active)}:host(.selected) ix-card.card-success{--ix-card-background:var(--theme-color-success--active)}:host(.selected) ix-card.card-info{--ix-card-background:var(--theme-color-info--active)}:host(.selected) ix-card.card-neutral{--ix-card-background:var(--theme-color-neutral--active)}";
+const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}: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 ix-card{width:100%;height:100%}:host ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(.selected) ix-card{--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected) ix-card.card-insight{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-notification{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-alarm{--ix-card-background:var(--theme-color-alarm--active)}:host(.selected) ix-card.card-critical{--ix-card-background:var(--theme-color-critical--active)}:host(.selected) ix-card.card-warning{--ix-card-background:var(--theme-color-warning--active)}:host(.selected) ix-card.card-success{--ix-card-background:var(--theme-color-success--active)}:host(.selected) ix-card.card-info{--ix-card-background:var(--theme-color-info--active)}:host(.selected) ix-card.card-neutral{--ix-card-background:var(--theme-color-neutral--active)}";
 const IxActionCard = class {
   constructor(hostRef) {
@@ -14,7 +14,7 @@ const IxActionCard = class {
   render() {
     return (h(Host, { class: {
         selected: this.selected,
-      } }, h("ix-card", { variant: this.variant, class: 'pointer' }, h("ix-card-content", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "24" })) : (''), this.heading ? (h("ix-typography", { variant: "large-title" }, this.heading)) : (''), this.subheading ? (h("ix-typography", { variant: "default-title-single", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", null)))));
+      } }, h("ix-card", { variant: this.variant, class: 'pointer' }, h("ix-card-content", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "24" })) : null, h("div", null, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", null))))));
   }
 };
 IxActionCard.style = actionCardCss;

package/dist/esm/ix-action-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-action-card.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,~~08HAA08H~~;;~~MCsBn9H~~,YAAY;;;mBAIc,SAAS;gBAKX,SAAS;;;oBAezB,KAAK;;EAExB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,IAC9C,2BACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,~~KAE7D~~,~~EAAE~~,~~CACH~~,~~EACA~~,IAAI,CAAC,OAAO,IACX,qBAAe,~~OAAO~~,EAAC,~~aAAa~~,~~IACjC~~,IAAI,CAAC,OAAO,~~CACC~~,~~KAEhB~~,~~EAAE~~,~~CACH~~,~~EACA,~~IAAI,CAAC,UAAU,IACd,qBACE,~~OAAO~~,EAAC,~~sBAAsB~~,~~EAC9B~~,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,eAAa,~~CACG~~,CACV,CACL,EACP;GACH;;;;;;","names":[],"sources":["./src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","./src/components/action-card/action-card.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n min-width: 13.375rem;\n width: 13.375rem;\n height: 7.5rem;\n min-height: 7.5rem;\n cursor: pointer;\n\n margin: 0.25rem 0;\n\n ix-card {\n width: 100%;\n height: 100%;\n }\n\n ix-card.card-insight:hover {\n --ix-card-background: var(--theme-color-ghost--hover);\n }\n\n ix-card.card-insight:active {\n --ix-card-background: var(--theme-color-ghost--active);\n }\n\n ix-card.card-notification:hover {\n --ix-card-background: var(--theme-color-component-1--hover);\n }\n\n ix-card.card-notification:active {\n --ix-card-background: var(--theme-color-component-1--active);\n }\n\n ix-card.card-alarm:hover {\n --ix-card-background: var(--theme-color-alarm--hover);\n }\n\n ix-card.card-alarm:active {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical:hover {\n --ix-card-background: var(--theme-color-critical--hover);\n }\n\n ix-card.card-critical:active {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning:hover {\n --ix-card-background: var(--theme-color-warning--hover);\n }\n\n ix-card.card-warning:active {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success:hover {\n --ix-card-background: var(--theme-color-success--hover);\n }\n\n ix-card.card-success:active {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info:hover {\n --ix-card-background: var(--theme-color-info--hover);\n }\n\n ix-card.card-info:active {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral:hover {\n --ix-card-background: var(--theme-color-neutral--hover);\n }\n\n ix-card.card-neutral:active {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n}\n\n:host(:hover) {\n ix-card.card-insight:hover {\n --ix-card-background: var(--theme-color-ghost--hover);\n }\n\n ix-card.card-notification:hover {\n --ix-card-background: var(--theme-color-component-1--hover);\n }\n\n ix-card.card-alarm:hover {\n --ix-card-background: var(--theme-color-alarm--hover);\n }\n\n ix-card.card-critical:hover {\n --ix-card-background: var(--theme-color-critical--hover);\n }\n\n ix-card.card-warning:hover {\n --ix-card-background: var(--theme-color-warning--hover);\n }\n\n ix-card.card-success:hover {\n --ix-card-background: var(--theme-color-success--hover);\n }\n\n ix-card.card-info:hover {\n --ix-card-background: var(--theme-color-info--hover);\n }\n\n ix-card.card-neutral:hover {\n --ix-card-background: var(--theme-color-neutral--hover);\n }\n}\n\n:host(:active) {\n ix-card.card-insight:active {\n --ix-card-background: var(--theme-color-ghost--active);\n }\n\n ix-card.card-notification:active {\n --ix-card-background: var(--theme-color-component-1--active);\n }\n\n ix-card.card-alarm:active {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical:active {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning:active {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success:active {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info:active {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral:active {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n}\n\n:host(.selected) {\n ix-card {\n --ix-card-border-color: var(--theme-color-dynamic);\n }\n\n ix-card.card-insight {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n ix-card.card-notification {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n ix-card.card-alarm {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-action-card',\n styleUrl: 'action-card.scss',\n shadow: true,\n})\nexport class IxActionCard {\n /\n Card variant\n /\n @Prop() variant: ActionCardVariant = 'insight';\n\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card heading\n /\n @Prop() heading: string;\n\n /\n Card subheading\n /\n @Prop() subheading: string;\n\n /\n Card selection\n */\n @Prop() selected = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n }}\n >\n <ix-card variant={this.variant} class={'pointer'}>\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n ) : (\n ~~''\n~~ ~~)}\~~n {this.heading ? (\n <ix-typography ~~variant~~=\"~~large-title~~\"~~>\n~~ {this.heading}\n </ix-typography>\n ) : (\n ~~''\n )}\n~~ {this.subheading ? (\n <ix-typography\n ~~variant~~=\"~~default-title-single~~\"\n color={this.variant === 'insight' ? 'soft' : undefined}\n >\n {this.subheading}\n </ix-typography>\n ) : null}\n <slot></slot>\n </ix-card-content>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-action-card.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,y+IAAy+I;;MCsBl/I,YAAY;;;mBAIc,SAAS;gBAKX,SAAS;;;oBAezB,KAAK;;EAExB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,IAC9C,2BACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,eACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBACE,MAAM,EAAC,IAAI,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,eAAa,CACT,CACU,CACV,CACL,EACP;GACH;;;;;;","names":[],"sources":["./src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","./src/components/action-card/action-card.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n min-width: 13.375rem;\n width: 13.375rem;\n height: 7.5rem;\n min-height: 7.5rem;\n cursor: pointer;\n\n margin: 0.25rem 0;\n\n ix-card {\n width: 100%;\n height: 100%;\n }\n\n ix-card.card-insight:hover {\n --ix-card-background: var(--theme-color-ghost--hover);\n }\n\n ix-card.card-insight:active {\n --ix-card-background: var(--theme-color-ghost--active);\n }\n\n ix-card.card-notification:hover {\n --ix-card-background: var(--theme-color-component-1--hover);\n }\n\n ix-card.card-notification:active {\n --ix-card-background: var(--theme-color-component-1--active);\n }\n\n ix-card.card-alarm:hover {\n --ix-card-background: var(--theme-color-alarm--hover);\n }\n\n ix-card.card-alarm:active {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical:hover {\n --ix-card-background: var(--theme-color-critical--hover);\n }\n\n ix-card.card-critical:active {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning:hover {\n --ix-card-background: var(--theme-color-warning--hover);\n }\n\n ix-card.card-warning:active {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success:hover {\n --ix-card-background: var(--theme-color-success--hover);\n }\n\n ix-card.card-success:active {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info:hover {\n --ix-card-background: var(--theme-color-info--hover);\n }\n\n ix-card.card-info:active {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral:hover {\n --ix-card-background: var(--theme-color-neutral--hover);\n }\n\n ix-card.card-neutral:active {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n}\n\n:host(:hover) {\n ix-card.card-insight:hover {\n --ix-card-background: var(--theme-color-ghost--hover);\n }\n\n ix-card.card-notification:hover {\n --ix-card-background: var(--theme-color-component-1--hover);\n }\n\n ix-card.card-alarm:hover {\n --ix-card-background: var(--theme-color-alarm--hover);\n }\n\n ix-card.card-critical:hover {\n --ix-card-background: var(--theme-color-critical--hover);\n }\n\n ix-card.card-warning:hover {\n --ix-card-background: var(--theme-color-warning--hover);\n }\n\n ix-card.card-success:hover {\n --ix-card-background: var(--theme-color-success--hover);\n }\n\n ix-card.card-info:hover {\n --ix-card-background: var(--theme-color-info--hover);\n }\n\n ix-card.card-neutral:hover {\n --ix-card-background: var(--theme-color-neutral--hover);\n }\n}\n\n:host(:active) {\n ix-card.card-insight:active {\n --ix-card-background: var(--theme-color-ghost--active);\n }\n\n ix-card.card-notification:active {\n --ix-card-background: var(--theme-color-component-1--active);\n }\n\n ix-card.card-alarm:active {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical:active {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning:active {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success:active {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info:active {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral:active {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n}\n\n:host(.selected) {\n ix-card {\n --ix-card-border-color: var(--theme-color-dynamic);\n }\n\n ix-card.card-insight {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n ix-card.card-notification {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n ix-card.card-alarm {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-action-card',\n styleUrl: 'action-card.scss',\n shadow: true,\n})\nexport class IxActionCard {\n /\n Card variant\n /\n @Prop() variant: ActionCardVariant = 'insight';\n\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card heading\n /\n @Prop() heading: string;\n\n /\n Card subheading\n /\n @Prop() subheading: string;\n\n /\n Card selection\n */\n @Prop() selected = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n }}\n >\n <ix-card variant={this.variant} class={'pointer'}>\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography\n format=\"h5\"\n color={this.variant === 'insight' ? 'soft' : undefined}\n >\n {this.subheading}\n </ix-typography>\n ) : null}\n <slot></slot>\n </div>\n </ix-card-content>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-application-header.entry.js CHANGED Viewed

@@ -1,26 +1,25 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
-import { h as hostContext, i as isBasicNavigationLayout, m as menuController } from './context-f6a2b727.js';
-import { s as screenMode } from './service-fc436c5b.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { m as menuController, a as applicationLayoutService } from './menu-service-12a09006.js';
+import './breakpoints-b8d59fd9.js';
 import './typed-event-a230184a.js';
-const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;padding-left:1rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color)}:host .name{margin-left:2.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color)}:host(.mode-mobile){padding-left:0.5rem}:host(.mode-mobile) .logo{margin-left:0.5rem}";
+const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;min-height:2.75rem;padding-left:1rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}:host .name{margin-left:2.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color)}:host(.breakpoint-sm){padding-left:0.5rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";
 const ApplicationHeader = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.name = undefined;
-    this.mode = 'desktop';
+    this.breakpoint = 'lg';
     this.menuExpanded = false;
   }
   componentWillLoad() {
-    const layout = hostContext('ix-basic-navigation', this.host);
-    if (isBasicNavigationLayout(layout)) {
-      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = screenMode.mode;
-      this.menuDisposable = menuController.expandChange.on((show) => {
-        this.menuExpanded = show;
-      });
-    }
+    this.menuDisposable = menuController.expandChange.on((show) => {
+      this.menuExpanded = show;
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
   }
   componentDidLoad() {
     this.attachSiemensLogoIfLoaded();
@@ -30,20 +29,29 @@ const ApplicationHeader = class {
     (_a = this.menuDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     (_b = this.modeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
   }
+  isLogoSlotted() {
+    const slotElement = this.hostElement.shadowRoot.querySelector('slot[name="logo"]');
+    const nodes = slotElement.assignedNodes({
+      flatten: true,
+    });
+    return nodes.length !== 0;
+  }
   async attachSiemensLogoIfLoaded() {
     await window.customElements.whenDefined('ix-siemens-logo');
     const logoElement = document.createElement('ix-siemens-logo');
-    if (!this.host.querySelector('[slot="logo"]')) {
-      this.host.shadowRoot.querySelector('.logo').appendChild(logoElement);
+    if (!this.isLogoSlotted()) {
+      this.hostElement.shadowRoot
+        .querySelector('.logo')
+        .appendChild(logoElement);
     }
   }
   async onMenuClick() {
     menuController.toggle();
   }
   render() {
-    return (h(Host, { class: { [`mode-${this.mode}`]: true } }, this.mode === 'mobile' ? (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "name" }, this.name), h("slot", null)));
+    return (h(Host, { class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' ? (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "name" }, this.name), h("slot", null)));
   }
-  get host() { return getElement(this); }
+  get hostElement() { return getElement(this); }
 };
 ApplicationHeader.style = applicationHeaderCss;

package/dist/esm/ix-application-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-application-header.entry.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,~~ymBAAymB~~;;~~MCqBznB~~,iBAAiB;;;;~~gBAQN~~,~~SAAS~~;~~wBAEP~~,KAAK;;EAK7B,iBAAiB;IACf,~~MAAM~~,~~MAAM~~,GAAG,~~WAAW~~,CAAC,~~qBAAqB~~,~~EAAE,IAAI,~~CAAC,~~IAAI~~,CAAC,CAAC~~;IAC7D~~,IAAI~~,uBAAuB,CAAC,MAAM,CAAC,EAAE~~;~~MACnC~~,IAAI,CAAC,~~cAAc~~,GAAG,~~UAAU~~,CAAC,~~QAAQ,~~CAAC,~~EAAE,CAC1C,~~CAAC,IAAI,~~MAAM,IAAI,~~CAAC,~~IAAI~~,GAAG,~~IAAI~~,CAAC,~~CAC7B~~,CAAC~~;MACF~~,~~IAAI~~,CAAC,~~IAAI,GAAG,UAAU,~~CAAC,IAAI~~,CAAC~~;~~MAE5B~~,IAAI,CAAC,~~cAAc~~,GAAG,~~cAAc~~,CAAC,~~YAAY,~~CAAC,~~EAAE,~~CAAC~~,CAAC,IAAI~~;~~QACxD~~,IAAI,CAAC,~~YAAY~~,GAAG,~~IAAI~~,CAAC~~;OAC1B~~,~~CAAC~~,CAAC;~~KACJ~~;~~GACF;~~EAED,gBAAgB;IACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;GAClC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,MAAM,yBAAyB;IACrC,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;~~IAE9D~~,IAAI,CAAC,IAAI,CAAC,~~IAAI,CAAC,~~aAAa,~~CAAC~~,~~eAAe,CAAC,~~EAAE;~~MAC7C~~,IAAI,CAAC,~~IAAI~~,CAAC,UAAU,~~CAAC,~~aAAa,CAAC,OAAO,CAAC,~~CAAC,~~WAAW,CAAC,WAAW,CAAC,CAAC;~~KACtE~~;GACF;EAEO,MAAM,WAAW;IACvB,cAAc,CAAC,MAAM,EAAE,CAAC;GACzB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,~~IAAC~~,KAAK,EAAE,EAAE,CAAC,~~QAAQ~~,IAAI,CAAC,~~IAAI~~,EAAE,GAAG,IAAI,EAAE,~~IACzC~~,IAAI,~~CAAC~~,IAAI,KAAK,~~QAAQ~~,~~IACrB~~,sBACE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,IAChB,IAAI,EACR,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,eAAa,CACR,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","./src/components/application-header/application-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n:host {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n height: 2.75rem;\n padding-left: 1rem;\n\n color: var(--theme-app-header--color);\n background-color: var(--theme-app-header--background);\n\n border-bottom: var(--theme-app-header--border-width) solid\n var(--theme-app-header--border-color);\n\n .name {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n color: var(--theme-app-header--color);\n }\n\n .logo {\n display: inline-flex;\n align-items: center;\n position: relative;\n height: 32px;\n overflow: hidden;\n line-height: 0rem;\n color: var(--theme-app-header-logo--color);\n }\n}\n\n:host(.~~mode~~-~~mobile~~) {\n padding-left: 0.5rem;\n\n .logo {\n margin-left: 0.5rem;\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 { ~~menuController~~ } from '../utils/~~menu~~-~~service/menu-service~~';\nimport { ~~hostContext,~~ ~~isBasicNavigationLayout~~ } from '../utils/~~screen/context~~';\nimport { ~~Mode~~ } from '../utils/~~screen~~/~~mode';\nimport { screenMode } from '../utils/screen/~~service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-application-header',\n styleUrl: 'application-header.scss',\n shadow: true,\n})\nexport class ApplicationHeader {\n @Element() ~~host~~!: HTMLIxApplicationHeaderElement;\n\n /\n Application name\n */\n @Prop() name: string;\n\n @State() ~~mode~~: ~~Mode~~ = '~~desktop~~';\n\n @State() menuExpanded = false;\n\n private menuDisposable?: Disposable;\n private modeDisposable?: Disposable;\n\n componentWillLoad() {\n ~~const layout = hostContext('ix-basic-navigation',~~ this.~~host);\n if~~ ~~(isBasicNavigationLayout(layout)) {\n this.modeDisposable~~ = ~~screenMode~~.~~onChange~~.on(\n (~~mode~~) => ~~(this.mode = mode)~~\n ~~);\n~~ this.~~mode~~ = ~~screenMode.mode~~;\n\n this.~~menuDisposable~~ = ~~menuController~~.~~expandChange~~.on((~~show~~) => {\n this.~~menuExpanded~~ = ~~show~~;\n });\n }\n }\n\n componentDidLoad() {\n this.attachSiemensLogoIfLoaded();\n }\n\n disconnectedCallback() {\n this.menuDisposable?.dispose();\n this.modeDisposable?.dispose();\n }\n\n private async attachSiemensLogoIfLoaded() {\n await window.customElements.whenDefined('ix-siemens-logo');\n const logoElement = document.createElement('ix-siemens-logo');\n\n if (!this.~~host.querySelector~~(~~'[slot=\"logo\"]'~~)) {\n this.~~host~~.shadowRoot.querySelector('.logo').appendChild(logoElement);\n }\n }\n\n private async onMenuClick() {\n menuController.toggle();\n }\n\n render() {\n return (\n <Host class={{ [`~~mode~~-${this.~~mode~~}`]: true }}>\n {this.~~mode~~ === '~~mobile~~' ? (\n <ix-burger-menu\n onClick={() => this.onMenuClick()}\n expanded={this.menuExpanded}\n ></ix-burger-menu>\n ) : null}\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n <div class=\"name\">{this.name}</div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-application-header.entry.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,mqBAAmqB;;MCoBnrB,iBAAiB;;;;sBAQM,IAAI;wBACd,KAAK;;EAK7B,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI;MACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;GACvD;EAED,gBAAgB;IACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;GAClC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAEO,aAAa;IACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC3D,mBAAmB,CACD,CAAC;IACrB,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;MACtC,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,yBAAyB;IACrC,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,IAAI,CAAC,WAAW,CAAC,UAAU;SACxB,aAAa,CAAC,OAAO,CAAC;SACtB,WAAW,CAAC,WAAW,CAAC,CAAC;KAC7B;GACF;EAEO,MAAM,WAAW;IACvB,cAAc,CAAC,MAAM,EAAE,CAAC;GACzB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,EAAE,EAClD,IAAI,EAAC,oBAAoB,IAExB,IAAI,CAAC,UAAU,KAAK,IAAI,IACvB,sBACE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,IAChB,IAAI,EACR,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnC,eAAa,CACR,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","./src/components/application-header/application-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n:host {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n height: 2.75rem;\n min-height: 2.75rem;\n padding-left: 1rem;\n\n color: var(--theme-app-header--color);\n background-color: var(--theme-app-header--background);\n\n border-bottom: var(--theme-app-header--border-width) solid\n var(--theme-app-header--border-color);\n\n z-index: var(--theme-z-index-fixed);\n\n .name {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n color: var(--theme-app-header--color);\n }\n\n .logo {\n display: inline-flex;\n align-items: center;\n position: relative;\n height: 32px;\n overflow: hidden;\n line-height: 0rem;\n color: var(--theme-app-header-logo--color);\n }\n}\n\n:host(.breakpoint-sm) {\n padding-left: 0.5rem;\n\n .logo {\n margin-left: 0.5rem;\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 { applicationLayoutService } from '../utils/application-layout';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-application-header',\n styleUrl: 'application-header.scss',\n shadow: true,\n})\nexport class ApplicationHeader {\n @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n /\n Application name\n */\n @Prop() name: string;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() menuExpanded = false;\n\n private menuDisposable?: Disposable;\n private modeDisposable?: Disposable;\n\n componentWillLoad() {\n this.menuDisposable = menuController.expandChange.on((show) => {\n this.menuExpanded = show;\n });\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n }\n\n componentDidLoad() {\n this.attachSiemensLogoIfLoaded();\n }\n\n disconnectedCallback() {\n this.menuDisposable?.dispose();\n this.modeDisposable?.dispose();\n }\n\n private isLogoSlotted() {\n const slotElement = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"logo\"]'\n ) as HTMLSlotElement;\n const nodes = slotElement.assignedNodes({\n flatten: true,\n });\n\n return nodes.length !== 0;\n }\n\n private async attachSiemensLogoIfLoaded() {\n await window.customElements.whenDefined('ix-siemens-logo');\n const logoElement = document.createElement('ix-siemens-logo');\n if (!this.isLogoSlotted()) {\n this.hostElement.shadowRoot\n .querySelector('.logo')\n .appendChild(logoElement);\n }\n }\n\n private async onMenuClick() {\n menuController.toggle();\n }\n\n render() {\n return (\n <Host\n class={{ [`breakpoint-${this.breakpoint}`]: true }}\n slot=\"application-header\"\n >\n {this.breakpoint === 'sm' ? (\n <ix-burger-menu\n onClick={() => this.onMenuClick()}\n expanded={this.menuExpanded}\n ></ix-burger-menu>\n ) : null}\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n <div class=\"name\">{this.name}</div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-application-sidebar.entry.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { a as anime } from './anime.es-185e9087.js';
+import { A as Animation } from './animation-268dce50.js';
+const applicationSidebarCss = ":host{display:block;position:relative;width:22rem;height:100%;padding:0}: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(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}";
+const ApplicationSidebar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.visible = true;
+  }
+  listenToggleEvent() {
+    const visibility = !this.visible;
+    const animation = {
+      targets: this.hostElement,
+      width: visibility ? ['0', '22rem'] : ['22rem', '0'],
+      opacity: visibility ? [0, 1] : [1, 0],
+      easing: 'easeInSine',
+      duration: Animation.defaultTime,
+    };
+    const changeVisibility = () => {
+      this.visible = visibility;
+    };
+    if (visibility) {
+      animation.begin = changeVisibility.bind(this);
+    }
+    else {
+      animation.complete = changeVisibility.bind(this);
+    }
+    anime(animation);
+  }
+  render() {
+    return (h(Host, { slot: "application-sidebar", class: {
+        visible: this.visible,
+      } }, this.visible ? h("slot", null) : null));
+  }
+  get hostElement() { return getElement(this); }
+};
+ApplicationSidebar.style = applicationSidebarCss;
+export { ApplicationSidebar as ix_application_sidebar };
+//# sourceMappingURL=ix-application-sidebar.entry.js.map

package/dist/esm/ix-application-sidebar.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-application-sidebar.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,iwBAAiwB;;MCmBlxB,kBAAkB;;;mBAGV,IAAI;;EAKvB,iBAAiB;IACf,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IACjC,MAAM,SAAS,GAAsB;MACnC,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC;MACnD,OAAO,EAAE,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;MACrC,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,SAAS,CAAC,WAAW;KAChC,CAAC;IAEF,MAAM,gBAAgB,GAAG;MACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;KAC3B,CAAC;IAEF,IAAI,UAAU,EAAE;MACd,SAAS,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/C;SAAM;MACL,SAAS,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,KAAK,CAAC,SAAS,CAAC,CAAC;GAClB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,IAEA,IAAI,CAAC,OAAO,GAAG,eAAa,GAAG,IAAI,CAC/B,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/application-sidebar/application-sidebar.scss?tag=ix-application-sidebar&encapsulation=shadow","./src/components/application-sidebar/application-sidebar.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\n display: block;\n position: relative;\n\n width: 22rem;\n height: 100%;\n\n padding: 0;\n}\n\n:host(.visible) {\n border-right: 2px solid var(--theme-color-soft-bdr);\n padding: 1.5rem 0.5rem 0;\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, Listen, State } from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\n\n/** @internal */\n@Component({\n tag: 'ix-application-sidebar',\n styleUrl: 'application-sidebar.scss',\n shadow: true,\n})\nexport class ApplicationSidebar {\n @Element() hostElement!: HTMLIxApplicationSidebarElement;\n\n @State() visible = true;\n\n @Listen('application-sidebar-toggle', {\n target: 'window',\n })\n listenToggleEvent() {\n const visibility = !this.visible;\n const animation: anime.AnimeParams = {\n targets: this.hostElement,\n width: visibility ? ['0', '22rem'] : ['22rem', '0'],\n opacity: visibility ? [0, 1] : [1, 0],\n easing: 'easeInSine',\n duration: Animation.defaultTime,\n };\n\n const changeVisibility = () => {\n this.visible = visibility;\n };\n\n if (visibility) {\n animation.begin = changeVisibility.bind(this);\n } else {\n animation.complete = changeVisibility.bind(this);\n }\n\n anime(animation);\n }\n\n render() {\n return (\n <Host\n slot=\"application-sidebar\"\n class={{\n visible: this.visible,\n }}\n >\n {this.visible ? <slot></slot> : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-application.entry.js ADDED Viewed

@@ -0,0 +1,105 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { u as useContextProvider, A as ApplicationLayoutContext } from './context-6a3bc77f.js';
+import { a as applicationLayoutService, m as menuController } from './menu-service-12a09006.js';
+import { h as hasSlottedElements } from './shadow-dom-b9df3d9b.js';
+import { t as themeSwitcher } from './theme-switcher-9ede3823.js';
+import './typed-event-a230184a.js';
+import './breakpoints-b8d59fd9.js';
+const applicationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host main{display:block;position:relative;height:100%;width:100%;overflow:hidden}:host(.breakpoint-md){--ix-application-menu-margin-left:3.25rem}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+main{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+main{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:0}";
+const Application = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = undefined;
+    this.themeSystemAppearance = false;
+    this.forceBreakpoint = undefined;
+    this.breakpoints = ['sm', 'md', 'lg'];
+    this.breakpoint = 'lg';
+    this.applicationSidebarSlotted = false;
+  }
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
+  }
+  get menu() {
+    return this.hostElement.querySelector('ix-menu');
+  }
+  get applicationSidebarSlot() {
+    return this.hostElement.shadowRoot.querySelector('.application-sidebar slot');
+  }
+  onContentClick() {
+    var _a;
+    if (menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
+  componentWillLoad() {
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: false,
+      host: 'basic-navigation',
+      sidebar: this.applicationSidebarSlotted,
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
+    }
+    this.changeTheme();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+  }
+  changeTheme() {
+    if (!this.theme) {
+      if (this.themeSystemAppearance) {
+        themeSwitcher.setVariant();
+      }
+      return;
+    }
+    if (themeSwitcher.hasVariantSuffix(this.theme)) {
+      themeSwitcher.setTheme(`theme-${this.theme}`);
+      return;
+    }
+    themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+  }
+  onApplicationSidebarChange() {
+    this.contextProvider.emit({
+      hideHeader: false,
+      host: 'basic-navigation',
+      sidebar: this.applicationSidebarSlotted,
+    });
+  }
+  render() {
+    return (h(Host, { "data-role": "", class: {
+        [`breakpoint-${this.breakpoint}`]: true,
+      } }, h("slot", { name: "application-header" }), h("div", { class: "application" }, h("slot", { name: "menu" }), h("aside", { class: {
+        'application-sidebar': true,
+        slotted: this.applicationSidebarSlotted,
+      }, onClick: () => this.onContentClick() }, h("slot", { name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "breakpoints": ["onBreakpointsChange"],
+    "theme": ["changeTheme"],
+    "themeSystemAppearance": ["changeTheme"],
+    "applicationSidebarSlotted": ["onApplicationSidebarChange"]
+  }; }
+};
+Application.style = applicationCss;
+export { Application as ix_application };
+//# sourceMappingURL=ix-application.entry.js.map

package/dist/esm/ix-application.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-application.entry.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,i4CAAi4C;;MCyB34C,WAAW;;;;iCAWU,KAAK;;uBAmBD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;sBAMpB,IAAI;qCACD,KAAK;;EApB1C,iBAAiB,CAAC,OAA+B;IAC/C,IAAI,CAAC,OAAO,EAAE;MACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;MACrD,OAAO;KACR;IAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;IACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;GACjD;EAOD,mBAAmB,CAAC,WAAyB;IAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;GACtD;EAOD,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAED,IAAI,sBAAsB;IACxB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC9C,2BAA2B,CACT,CAAC;GACtB;EAIO,cAAc;;IACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,iBAAiB;IACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;MACE,UAAU,EAAE,KAAK;MACjB,IAAI,EAAE,kBAAkB;MACxB,OAAO,EAAE,IAAI,CAAC,yBAAyB;KACxC,CACF,CAAC;IAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;IAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC9C;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAIO,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,aAAa,CAAC,UAAU,EAAE,CAAC;OAC5B;MAED,OAAO;KACR;IAED,IAAI,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MAC9C,aAAa,CAAC,QAAQ,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;MAC9C,OAAO;KACR;IAED,aAAa,CAAC,QAAQ,CACpB,SAAS,IAAI,CAAC,KAAK,OAAO,EAC1B,IAAI,CAAC,qBAAqB,CAC3B,CAAC;GACH;EAGD,0BAA0B;IACxB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,UAAU,EAAE,KAAK;MACjB,IAAI,EAAE,kBAAkB;MACxB,OAAO,EAAE,IAAI,CAAC,yBAAyB;KACxC,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;OACxC,IAED,YAAM,IAAI,EAAC,oBAAoB,GAAQ,EACvC,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,aACE,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI;QAC3B,OAAO,EAAE,IAAI,CAAC,yBAAyB;OACxC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpC,YACE,IAAI,EAAC,qBAAqB,EAC1B,YAAY,EAAE,OACX,IAAI,CAAC,yBAAyB,GAAG,kBAAkB,CAClD,IAAI,CAAC,sBAAsB,CAC5B,CAAC,GAEE,CACF,EACR,YAAM,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACxD,eAAa,CACR,CACH,CACD,EACP;GACH;;;;;;;;;;;;;","names":[],"sources":["./src/components/application/application.scss?tag=ix-application&encapsulation=shadow","./src/components/application/application.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .application {\n display: flex;\n position: relative;\n flex-direction: row;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n\n main {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n}\n\n:host(.breakpoint-md) {\n --ix-application-menu-margin-left: 3.25rem;\n\n aside.slotted {\n margin-left: var(--ix-application-menu-margin-left);\n }\n\n aside.slotted + main {\n margin-left: 0;\n }\n\n aside:not(.slotted) + main {\n margin-left: var(--ix-application-menu-margin-left);\n }\n}\n\n:host(.breakpoint-lg) {\n --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n --ix-application-menu-margin-left: 0;\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, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/** @internal */\n@Component({\n tag: 'ix-application',\n styleUrl: 'application.scss',\n shadow: true,\n})\nexport class Application {\n @Element() hostElement: HTMLIxApplicationElement;\n\n /**\n * Application theme\n */\n @Prop() theme: IxTheme;\n\n /**\n * Use the system appearance dark or light\n */\n @Prop() themeSystemAppearance = false;\n\n /**\n * Change the responsive layout of the menu structure\n */\n @Prop() forceBreakpoint: Breakpoint | undefined;\n forceLayoutChange(newMode: Breakpoint | undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /**\n * Supported layouts\n */\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() applicationSidebarSlotted = false;\n\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n get menu(): HTMLIxMenuElement | null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get applicationSidebarSlot() {\n return this.hostElement.shadowRoot.querySelector(\n '.application-sidebar slot'\n ) as HTMLSlotElement;\n }\n\n private modeDisposable: Disposable;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n\n this.changeTheme();\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n @Watch('theme')\n @Watch('themeSystemAppearance')\n private changeTheme() {\n if (!this.theme) {\n if (this.themeSystemAppearance) {\n themeSwitcher.setVariant();\n }\n\n return;\n }\n\n if (themeSwitcher.hasVariantSuffix(this.theme)) {\n themeSwitcher.setTheme(`theme-${this.theme}`);\n return;\n }\n\n themeSwitcher.setTheme(\n `theme-${this.theme}-dark`,\n this.themeSystemAppearance\n );\n }\n\n @Watch('applicationSidebarSlotted')\n onApplicationSidebarChange() {\n this.contextProvider.emit({\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n });\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n <slot name=\"application-header\"></slot>\n <div class=\"application\">\n <slot name=\"menu\"></slot>\n <aside\n class={{\n 'application-sidebar': true,\n slotted: this.applicationSidebarSlotted,\n }}\n onClick={() => this.onContentClick()}\n >\n <slot\n name=\"application-sidebar\"\n onSlotchange={() =>\n (this.applicationSidebarSlotted = hasSlottedElements(\n this.applicationSidebarSlot\n ))\n }\n ></slot>\n </aside>\n <main class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </main>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-avatar.entry.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
+const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}";
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function DefaultAvatar(props) {
+  const { initials } = props;
+  if (initials) {
+    return h("div", { class: 'avatar-initials' }, initials);
+  }
+  return (h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))));
+}
+const Avatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.image = undefined;
+    this.initials = undefined;
+  }
+  render() {
+    return (h(Host, null, h("li", { class: "avatar" }, this.image ? (h("img", { src: this.image, class: "avatar-image" })) : (h(DefaultAvatar, { initials: this.initials })))));
+  }
+  get hostElement() { return getElement(this); }
+};
+Avatar.style = avatarCss;
+export { Avatar as ix_avatar };
+//# sourceMappingURL=ix-avatar.entry.js.map

package/dist/esm/ix-avatar.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-avatar.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,2jBAA2jB;;ACA7kB;;;;;;;;AASA,SAAS,aAAa,CAAC,KAA4B;EACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAE3B,IAAI,QAAQ,EAAE;IACZ,OAAO,WAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;GACxD;EAED,QACE,WACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IAEnB,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,YACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE,EACF,YACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,EACN;AACJ,CAAC;MAYY,MAAM;;;;;;EAejB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UAAI,KAAK,EAAC,QAAQ,IACf,IAAI,CAAC,KAAK,IACT,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,KAEjD,EAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC3C,CACE,CACA,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","./src/components/avatar/avatar.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/text-truncation';\n@import 'mixins/hover';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-color-component-3);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill: var(--theme-color-4);\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\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /**\n * Display a avatar image\n *\n */\n @Prop() image: string;\n\n /**\n * Display the initials of the user. Will be overwritten by image\n *\n */\n @Prop() initials: string;\n\n render() {\n return (\n <Host>\n <li class=\"avatar\">\n {this.image ? (\n <img src={this.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={this.initials} />\n )}\n </li>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-basic-navigation.entry.js CHANGED Viewed

@@ -1,29 +1,65 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8ddfb6d8.js';
-import { s as screenMode } from './service-fc436c5b.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { u as useContextProvider, A as ApplicationLayoutContext } from './context-6a3bc77f.js';
+import { a as applicationLayoutService, m as menuController } from './menu-service-12a09006.js';
 import './typed-event-a230184a.js';
+import './breakpoints-b8d59fd9.js';
-const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 3.25rem);position:relative;margin-left:3.25rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}.mode-mobile.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{margin-left:0px;width:100%}";
+const basicNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";
 const BasicNavigation = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.applicationName = undefined;
     this.hideHeader = false;
-    this.mode = 'desktop';
+    this.forceBreakpoint = undefined;
+    this.breakpoints = ['sm', 'md', 'lg'];
+    this.breakpoint = 'lg';
+  }
+  onHideHeaderChange() {
+    var _a;
+    (_a = this.contextProvider) === null || _a === void 0 ? void 0 : _a.emit({
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+  }
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
   }
+  onContentClick() {
+    var _a;
+    if (menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
   componentWillLoad() {
-    if (this.hideHeader === false) {
-      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = screenMode.mode;
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
     }
   }
   componentDidRender() {
     if (this.menu) {
-      this.appendMenu();
-      this.adjustMenuHeight();
       this.menu.applicationName = this.applicationName;
     }
   }
@@ -31,21 +67,17 @@ const BasicNavigation = class {
     var _a;
     (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
   }
-  appendMenu() {
-    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
-  }
-  adjustMenuHeight() {
-    if (!this.hideHeader) {
-      this.menu.style.height = 'calc(100% - 2.75rem)';
-    }
-  }
   render() {
     return (h(Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
-        [`mode-${this.mode}`]: true,
-      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo" }))) : null, h("div", { id: "menu-placeholder" }), h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, h("slot", null))));
+        [`breakpoint-${this.breakpoint}`]: true,
+      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { class: "navigation-content" }, h("slot", { name: "menu" }), h("div", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "hideHeader": ["onHideHeaderChange"],
+    "breakpoints": ["onBreakpointsChange"]
+  }; }
 };
 BasicNavigation.style = basicNavigationCss;

package/dist/esm/ix-basic-navigation.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-basic-navigation.entry.js","mappings":"~~;;;;~~AAAA,MAAM,kBAAkB,GAAG,~~kkBAAkkB~~;;~~MCmBhlB~~,eAAe;;;;sBAWL,KAAK;~~gBAEJ~~,~~SAAS~~;;~~EAE/B~~,IAAI,IAAI;~~IACN~~,~~OAAO~~,IAAI,CAAC,~~WAAW~~,CAAC,~~aAAa~~,CAAC,~~SAAS~~,CAAC,CAAC;~~GAClD~~;~~EAID~~,iBAAiB;~~IACf~~,IAAI,~~IAAI,~~CAAC,~~UAAU~~,~~KAAK~~,~~KAAK~~,EAAE;~~MAC7B~~,~~IAAI~~,CAAC,~~cAAc~~,~~GAAG~~,~~UAAU~~,CAAC,~~QAAQ~~,CAAC,~~EAAE~~,~~CAC1C~~,CAAC,~~IAAI~~,~~MAAM~~,~~IAAI~~,CAAC,~~IAAI~~,~~GAAG~~,~~IAAI~~,CAAC,~~CAC7B,~~CAAC;~~MACF~~,IAAI,~~CAAC~~,IAAI,~~GAAG~~,~~UAAU~~,CAAC,~~IAAI~~,CAAC;~~KAC7B~~;~~GACF;EAED~~,~~kBAAkB;IAChB~~,IAAI,~~IAAI~~,CAAC,~~IAAI~~,EAAE;~~MACb~~,IAAI,CAAC,UAAU,~~EAAE~~,CAAC;~~MAClB~~,~~IAAI~~,CAAC,~~gBAAgB~~,~~EAAE,~~CAAC~~;MACxB~~,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,~~eAAe~~,CAAC;~~KAClD~~;~~GACF;EAED~~,~~oBAAoB;;IAClB~~,~~MAAA~~,IAAI,CAAC,cAAc,~~0CAAE~~,~~OAAO~~,EAAE,CAAC;~~GAChC;EAEO~~,UAAU~~;IAChB~~,IAAI,CAAC,~~WAAW~~,CAAC,~~aAAa~~,CAAC,~~mBAAmB~~,CAAC,CAAC,~~WAAW~~,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;~~GAC5E~~;~~EAEO~~,~~gBAAgB~~;~~IACtB~~,IAAI,~~CAAC,~~IAAI,CAAC,~~UAAU~~,EAAE;~~MACpB~~,IAAI,CAAC,IAAI,CAAC,~~KAAK~~,~~CAAC~~,~~MAAM~~,~~GAAG~~,~~sBAAsB~~,CAAC;~~KACjD~~;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,~~QAAQ~~,IAAI,CAAC,~~IAAI~~,EAAE,GAAG,IAAI;~~OAC5B~~,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,GAAQ,~~CACH~~,IACtB,IAAI,EACR,WAAK,~~EAAE~~,EAAC,~~kBAAkB~~,~~GAAO~~,~~EACjC~~,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,~~IAAI~~,~~CAAC~~,~~UAAU~~,~~CAAC,KAAK,CAAC,IAC7D,~~eAAa,CACT,CACD,EACP;GACH~~;;;;;;;~~","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=~~scoped~~","./src/components/basic-navigation/basic-navigation.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n:host {\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .content {\n display: flex;\n height: ~~calc(~~100~~% - 2.75rem);\~~n width: ~~calc(~~100~~% - 3.25rem);\~~n position: relative;\n margin-left: 3.25rem;\n overflow: auto;\n }\n\n &.hide-header {\n .content {\n height: 100%;\n }\n }\n}\n\n:host(.~~mode~~-~~mobile~~) {\n .content {\n margin-left: 0px;\n width: 100%;\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 { ~~Mode~~ } from '../utils/~~screen~~/~~mode~~';\nimport { ~~screenMode~~ } from '../utils/~~screen~~/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-basic-navigation',\n styleUrl: 'basic-navigation.scss',\n ~~scoped~~: true,\n})\nexport class BasicNavigation {\n @Element() hostElement: HTMLIxBasicNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Hide application header. Will disable responsive feature of basic navigation.\n */\n @Prop() hideHeader = false;\n\n @State() ~~mode~~: ~~Mode~~ = '~~desktop~~';\n\n get menu(): HTMLIxMenuElement {\n return this.hostElement.querySelector('ix-menu');\n }\n\n private modeDisposable: Disposable;\n\n ~~componentWillLoad~~() {\n if (~~this~~.~~hideHeader === false~~) {\n ~~this.modeDisposable = screenMode.onChange.on(~~\n ~~(mode) => (~~this.~~mode = mode~~)~~\n )~~;\n ~~this.mode = screenMode.mode;\n }\n~~ }\n\n ~~componentDidRender~~() {\n if (this.~~menu~~) {\n this.~~appendMenu~~(~~);\~~n this.~~adjustMenuHeight();\~~n ~~this.menu.applicationName~~ = this.~~applicationName;\~~n }\n }\n\n ~~disconnectedCallback~~() {\n this.~~modeDisposable?.dispose()~~;\n }\n\n ~~private~~ ~~appendMenu~~() {\n this.~~hostElement.querySelector~~(~~'#menu-placeholder').appendChild(~~this.~~menu~~);\n }\n\n ~~private adjustMenuHeight~~() {\n if (!this.~~hideHeader~~) {\n this.menu.~~style.height~~ = ~~'calc(100% - 2~~.~~75rem)'~~;\n }\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n 'hide-header': this.hideHeader,\n [`~~mode~~-${this.~~mode~~}`]: true,\n }}\n >\n {!this.hideHeader ? (\n <ix-application-header name={this.applicationName}>\n <slot name=\"logo\"></slot>\n </ix-application-header>\n ) : null}\n <div id=\"~~menu~~-~~placeholder~~\"></~~div~~>\n <div class=\"content\" onClick={() => this.~~menu.toggleMenu~~(~~false~~)}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-basic-navigation.entry.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,orCAAorC;;MCsBlsC,eAAe;;;;sBAWL,KAAK;;uBA4BU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;sBAMpB,IAAI;;EAhCtC,kBAAkB;;IAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;MACzB,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,kBAAkB;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;GACvD;EAMD,iBAAiB,CAAC,OAA+B;IAC/C,IAAI,CAAC,OAAO,EAAE;MACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;MACrD,OAAO;KACR;IAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;IACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;GACjD;EAOD,mBAAmB,CAAC,WAAyB;IAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;GACtD;EAID,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAKO,cAAc;;IACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,iBAAiB;IACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;MACE,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,kBAAkB;KACzB,CACF,CAAC;IAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;IAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC9C;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;OACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;","names":[],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","./src/components/basic-navigation/basic-navigation.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .content {\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n margin-left: 3.25rem;\n overflow: auto;\n }\n\n .navigation-content {\n display: flex;\n position: relative;\n\n flex-direction: row;\n\n height: calc(100% - 2.75rem);\n width: 100%;\n }\n}\n\n:host(.hide-header) {\n .navigation-content,\n .content {\n height: 100%;\n }\n}\n\n:host(.breakpoint-lg) {\n .content {\n margin-left: 0rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .content {\n margin-left: 0px;\n width: 100%;\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, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-basic-navigation',\n styleUrl: 'basic-navigation.scss',\n shadow: true,\n})\nexport class BasicNavigation {\n @Element() hostElement: HTMLIxBasicNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Hide application header. Will disable responsive feature of basic navigation.\n /\n @Prop() hideHeader = false;\n @Watch('hideHeader')\n onHideHeaderChange() {\n this.contextProvider?.emit({\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n });\n\n this.breakpoint = applicationLayoutService.breakpoint;\n }\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n */\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n @State() breakpoint: Breakpoint = 'lg';\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n private modeDisposable: Disposable;\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n }\n\n componentDidRender() {\n if (this.menu) {\n this.menu.applicationName = this.applicationName;\n }\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n 'hide-header': this.hideHeader,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n {!this.hideHeader ? (\n <ix-application-header name={this.applicationName}>\n <slot name=\"logo\" slot=\"logo\"></slot>\n </ix-application-header>\n ) : null}\n <div class=\"navigation-content\">\n <slot name=\"menu\"></slot>\n <div class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}