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

@siemens/ix 1.6.3 → 2.0.0-beta.0

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

Files changed (1110) hide show

package/dist/cjs/index.cjs.js CHANGED Viewed

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-require('./icon-4c954853.js');
+require('./icon-eeb2940a.js');
 const logicalFilterOperator = require('./logical-filter-operator-20233f71.js');
-const flipTileState = require('./flip-tile-state-b5ff5ea0.js');
-const modalUtils = require('./modal-utils-b645989b.js');
+const flipTileState = require('./flip-tile-state-183236a1.js');
 const defaultTreeItem = require('./default-tree-item-89cd1f3f.js');
 const uploadFileState = require('./upload-file-state-a79acf2b.js');
+const modal = require('./modal-26ae4715.js');
+const animation = require('./animation-d5cc0bec.js');
 const rwd_util = require('./rwd.util-9480f0b5.js');
 const themeSwitcher = require('./theme-switcher-bdbd0d30.js');
-require('./index-c978628a.js');
+require('./index-e56a1d39.js');
 require('./typed-event-f0f051da.js');
 /*
@@ -67,6 +68,39 @@ toast.warning = (config) => {
   return toast(Object.assign(Object.assign({}, config), { type: 'warning' }));
 };
+/*
+ * 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 showModalLoading(message) {
+  const modal$1 = document.createElement('ix-modal');
+  modal$1.keyboard = false;
+  const loading = document.createElement('ix-modal-loading');
+  loading.innerText = message;
+  modal$1.appendChild(loading);
+  modal.getCoreDelegate().attachView(modal$1);
+  modal$1.showModal();
+  return {
+    update: (text) => (loading.innerHTML = text),
+    finish: (text, timeout = 250) => {
+      if (text !== undefined) {
+        loading.innerText = text;
+      }
+      else {
+        timeout = 0;
+      }
+      setTimeout(() => {
+        modal$1.closeModal(null);
+        setTimeout(async () => await modal.getCoreDelegate().removeView(modal$1), animation.Animation.mediumTime);
+      }, timeout);
+    },
+  };
+}
 exports.InputState = logicalFilterOperator.InputState;
 Object.defineProperty(exports, 'LogicalFilterOperator', {
   enumerable: true,
@@ -80,9 +114,6 @@ Object.defineProperty(exports, 'FlipTileState', {
     return flipTileState.FlipTileState;
   }
 });
-exports.closeModal = modalUtils.closeModal;
-exports.dismissModal = modalUtils.dismissModal;
-exports.modal = modalUtils.modal;
 exports.renderDefaultItem = defaultTreeItem.renderDefaultItem;
 Object.defineProperty(exports, 'UploadFileState', {
   enumerable: true,
@@ -90,6 +121,13 @@ Object.defineProperty(exports, 'UploadFileState', {
     return uploadFileState.UploadFileState;
   }
 });
+exports.closeModal = modal.closeModal;
+exports.dismissModal = modal.dismissModal;
+exports.getCoreDelegate = modal.getCoreDelegate;
+exports.registerFrameworkDelegate = modal.registerFrameworkDelegate;
+exports.resolveDelegate = modal.resolveDelegate;
+exports.showMessage = modal.showMessage;
+exports.showModal = modal.showModal;
 exports.convertToAbbreviationString = rwd_util.convertToAbbreviationString;
 exports.convertToRemString = rwd_util.convertToRemString;
 exports.ThemeSwitcher = themeSwitcher.ThemeSwitcher;
@@ -97,6 +135,7 @@ exports.themeSwitcher = themeSwitcher.themeSwitcher;
 exports.FilterState = FilterState;
 exports.getToastContainer = getToastContainer;
 exports.setToastPosition = setToastPosition;
+exports.showModalLoading = showModalLoading;
 exports.toast = toast;
 //# sourceMappingURL=index.cjs.js.map

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

	@@ -1 +1 @@
1	- {"file":"index.cjs.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.cjs.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,MAAMA,OAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;EACjDA,OAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;EAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;EAC5BA,OAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;EAE3BC,qBAAe,EAAE,CAAC,UAAU,CAACD,OAAK,CAAC,CAAC;EACpCA,OAAK,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;QACTA,OAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACvB,UAAU,CACR,YAAY,MAAMC,qBAAe,EAAE,CAAC,UAAU,CAACD,OAAK,CAAC,EACrDE,mBAAS,CAAC,UAAU,CACrB,CAAC;OACH,EAAE,OAAO,CAAC,CAAC;KACb;GACF,CAAC;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["modal","getCoreDelegate","Animation"],"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/cjs/ix-action-card.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.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)}";

package/dist/cjs/ix-animated-tab_2.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
 const anime_es = require('./anime.es-8822f296.js');
 const animation = require('./animation-d5cc0bec.js');
 const rwd_util = require('./rwd.util-9480f0b5.js');

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

@@ -2,29 +2,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
-const context = require('./context-a0900b95.js');
-const service = require('./service-18dc5907.js');
+const index = require('./index-e56a1d39.js');
+const menuService = require('./menu-service-d1b87142.js');
 require('./typed-event-f0f051da.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;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-small){padding-left:0.5rem}:host(.mode-small) .logo{margin-left:0.5rem}";
 const ApplicationHeader = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.name = undefined;
-    this.mode = 'desktop';
+    this.mode = 'large';
     this.menuExpanded = false;
   }
   componentWillLoad() {
-    const layout = context.hostContext('ix-basic-navigation', this.host);
-    if (context.isBasicNavigationLayout(layout)) {
-      this.modeDisposable = service.screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = service.screenMode.mode;
-      this.menuDisposable = context.menuController.expandChange.on((show) => {
-        this.menuExpanded = show;
-      });
-    }
+    this.menuDisposable = menuService.menuController.expandChange.on((show) => {
+      this.menuExpanded = show;
+    });
   }
   componentDidLoad() {
     this.attachSiemensLogoIfLoaded();
@@ -34,20 +28,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() {
-    context.menuController.toggle();
+    menuService.menuController.toggle();
   }
   render() {
-    return (index.h(index.Host, { class: { [`mode-${this.mode}`]: true } }, this.mode === 'mobile' ? (index.h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, index.h("div", { class: "logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "name" }, this.name), index.h("slot", null)));
+    return (index.h(index.Host, { class: { [`mode-${this.mode}`]: true } }, this.mode === 'small' ? (index.h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, index.h("div", { class: "logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "name" }, this.name), index.h("slot", null)));
   }
-  get host() { return index.getElement(this); }
+  get hostElement() { return index.getElement(this); }
 };
 ApplicationHeader.style = applicationHeaderCss;

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

	@@ -1 +1 @@
1	- {"file":"ix-application-header.entry.cjs.js","mappings":"~~;;;;;;;;;~~AAAA,MAAM,oBAAoB,GAAG,~~ymBAAymB~~;;~~MCqBznB~~,iBAAiB;;;;~~gBAQN~~,~~SAAS~~;~~wBAEP~~,KAAK;;EAK7B,iBAAiB;IACf,~~MAAM~~,~~MAAM,GAAGA,mBAAW,~~CAAC,~~qBAAqB~~,~~EAAE~~,~~IAAI~~,CAAC,~~IAAI~~,CAAC,~~CAAC;IAC7D~~,~~IAAIC,+BAAuB,~~CAAC,~~MAAM,~~CAAC,~~EAAE~~;~~MACnC~~,IAAI,CAAC,~~cAAc~~,~~GAAGC~~,~~kBAAU~~,CAAC,~~QAAQ,~~CAAC,~~EAAE,CAC1C,~~CAAC,~~IAAI~~,~~MAAM,~~IAAI,CAAC,~~IAAI~~,~~GAAG~~,~~IAAI,~~CAAC,~~CAC7B~~,~~CAAC;MACF~~,IAAI,CAAC,~~IAAI~~,~~GAAGA~~,~~kBAAU~~,~~CAAC~~,~~IAAI,~~CAAC;~~MAE5B~~,IAAI,CAAC,cAAc,~~GAAGC~~,~~sBAAc~~,~~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;IACvBA,~~sBAAc~~,CAAC,MAAM,EAAE,CAAC;GACzB;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,IACzC,IAAI,CAAC,IAAI,KAAK,~~QAAQ~~,~~IACrBD~~,4BACE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,IAChB,IAAI,EACRA,iBAAK,KAAK,EAAC,MAAM,IACfA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACNA,iBAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnCA,qBAAa,CACR,EACP;GACH;;;;;;;","names":["~~hostContext","isBasicNavigationLayout","screenMode","~~menuController","h","Host"],"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.cjs.js","mappings":";;;;;;;;AAAA,MAAM,oBAAoB,GAAG,umBAAumB;;MCmBvnB,iBAAiB;;;;gBAWP,OAAO;wBAEJ,KAAK;;EAK7B,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAGA,0BAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI;MACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B,CAAC,CAAC;GACJ;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;IACvBA,0BAAc,CAAC,MAAM,EAAE,CAAC;GACzB;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,IACzC,IAAI,CAAC,IAAI,KAAK,OAAO,IACpBD,4BACE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,IAChB,IAAI,EACRA,iBAAK,KAAK,EAAC,MAAM,IACfA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACNA,iBAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO,EACnCA,qBAAa,CACR,EACP;GACH;;;;;;;","names":["menuController","h","Host"],"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-small) {\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 { Mode } from '../utils/screen/mode';\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 /\n @internal\n */\n @Prop() mode: Mode = 'large';\n\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\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 class={{ [`mode-${this.mode}`]: true }}>\n {this.mode === 'small' ? (\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/cjs/ix-avatar.cjs.entry.js ADDED Viewed

@@ -0,0 +1,39 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-e56a1d39.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 index.h("div", { class: 'avatar-initials' }, initials);
+  }
+  return (index.h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.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" }), index.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) {
+    index.registerInstance(this, hostRef);
+    this.image = undefined;
+    this.initials = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("li", { class: "avatar" }, this.image ? (index.h("img", { src: this.image, class: "avatar-image" })) : (index.h(DefaultAvatar, { initials: this.initials })))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Avatar.style = avatarCss;
+exports.ix_avatar = Avatar;
+//# sourceMappingURL=ix-avatar.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-avatar.entry.cjs.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,OAAOA,iBAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;GACxD;EAED,QACEA,iBACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IAEnBA,eAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChCA,kBACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE,EACFA,kBACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,EACN;AACJ,CAAC;MAYY,MAAM;;;;;;EAejB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,gBAAI,KAAK,EAAC,QAAQ,IACf,IAAI,CAAC,KAAK,IACTA,iBAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,KAEjDA,QAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC3C,CACE,CACA,EACP;GACH;;;;;;;","names":["h","Host"],"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/cjs/ix-basic-navigation.cjs.entry.js CHANGED Viewed

@@ -2,22 +2,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
-const service = require('./service-18dc5907.js');
+const index = require('./index-e56a1d39.js');
+const menuService = require('./menu-service-d1b87142.js');
+const service = require('./service-0e27b06b.js');
 require('./typed-event-f0f051da.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 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) .content{height:100%}:host(.mode-large) .content{margin-left:0rem}:host(.mode-small) .content{margin-left:0px;width:100%}";
 const BasicNavigation = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.applicationName = undefined;
     this.hideHeader = false;
-    this.mode = 'desktop';
+    this.mode = 'large';
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
   }
+  onContentClick() {
+    var _a;
+    if (menuService.menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
   componentWillLoad() {
     if (this.hideHeader === false) {
       this.modeDisposable = service.screenMode.onChange.on((mode) => (this.mode = mode));
@@ -26,8 +34,6 @@ const BasicNavigation = class {
   }
   componentDidRender() {
     if (this.menu) {
-      this.appendMenu();
-      this.adjustMenuHeight();
       this.menu.applicationName = this.applicationName;
     }
   }
@@ -35,19 +41,11 @@ 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 (index.h(index.Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
         [`mode-${this.mode}`]: true,
-      } }, !this.hideHeader ? (index.h("ix-application-header", { name: this.applicationName }, index.h("slot", { name: "logo" }))) : null, index.h("div", { id: "menu-placeholder" }), index.h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, index.h("slot", null))));
+      } }, !this.hideHeader ? (index.h("ix-application-header", { name: this.applicationName, mode: this.mode }, index.h("slot", { name: "logo", slot: "logo" }))) : null, index.h("div", { class: "navigation-content" }, index.h("slot", { name: "menu" }), index.h("div", { class: "content", onClick: () => this.onContentClick() }, index.h("slot", null)))));
   }
   get hostElement() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"ix-basic-navigation.entry.cjs.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,~~GAAGA~~,kBAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAGA,kBAAU,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,QACEC,QAACC,UAAI,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,IACfD,mCAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,~~IAC/CA~~,kBAAM,IAAI,EAAC,MAAM,GAAQ,~~CACH~~,IACtB,IAAI,EACRA,iBAAK,~~EAAE~~,EAAC,~~kBAAkB~~,~~GAAO~~,~~EACjCA~~,iBAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,~~IAAI~~,~~CAAC~~,~~UAAU~~,~~CAAC,KAAK,CAAC,IAC7DA,~~qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["screenMode","h","Host"],"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.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,umBAAumB;;MCoBrnB,eAAe;;;;sBAWL,KAAK;gBAEJ,OAAO;;EAE7B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;GAClD;EAIO,cAAc;;IACpB,IAAIA,0BAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;GAC9B;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAGC,kBAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAGA,kBAAU,CAAC,IAAI,CAAC;KAC7B;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,QACEC,QAACC,UAAI,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,IACfD,mCAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAChEA,kBAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACRA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kBAAM,IAAI,EAAC,MAAM,GAAQ,EACzBA,iBAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvDA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":["menuController","screenMode","h","Host"],"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 .content {\n height: 100%;\n }\n}\n\n:host(.mode-large) {\n .content {\n margin-left: 0rem;\n }\n}\n\n:host(.mode-small) {\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 { menuController } from '../utils/menu-service/menu-service';\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 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\n @State() mode: Mode = 'large';\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\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 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.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 [`mode-${this.mode}`]: true,\n }}\n >\n {!this.hideHeader ? (\n <ix-application-header name={this.applicationName} mode={this.mode}>\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}

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

@@ -2,18 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
 const anime_es = require('./anime.es-8822f296.js');
-/*
- * 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.
- */
-const a11yBoolean = (value) => (value ? 'true' : 'false');
+const a11y = require('./a11y-fa9abd92.js');
 const blindCss = ":host{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}:host .blind-header .collapse-icon{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}:host .blind-header .blind-header-title .blind-header-title-default,:host .blind-header .blind-header-title-basic .blind-header-title-default{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}:host .blind-header .blind-header-title-basic ix-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-open--color--hover)}:host .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-open--color--active)}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header.closed{border-radius:var(--theme-blind--border-radius)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon{color:var(--theme-blind-header-icon-closed--color--hover)}:host .blind-header.closed:not(.disabled):not(:disabled){cursor:pointer}:host .blind-header.closed:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon{color:var(--theme-blind-header-icon-closed--color--active)}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}";
@@ -85,7 +76,7 @@ const Blind = class {
     return (index.h(index.Host, null, index.h("button", { class: {
         'blind-header': true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, index.h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), index.h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (index.h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (index.h("ix-icon", { name: this.icon })) : (''), index.h("span", { class: "blind-header-title-default" }, this.label), index.h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, index.h("slot", { name: "header-actions" })))) : (index.h("slot", { name: "custom-header" })))), index.h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, index.h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11y.a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, index.h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), index.h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (index.h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (index.h("ix-icon", { name: this.icon })) : (''), index.h("span", { class: "blind-header-title-default" }, this.label), index.h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, index.h("slot", { name: "header-actions" })))) : (index.h("slot", { name: "custom-header" })))), index.h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, index.h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, index.h("slot", null)))));

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

	@@ -1 +1 @@
1	- {"file":"ix-blind.entry.cjs.js","mappings":"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","names":["anime","h","Host"],"sources":["./src/components/utils/a11y.ts","./src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","./src/components/blind/blind.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 const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n display: flex;\n flex-direction: column;\n background-color: var(--theme-blind-base--background);\n border: solid var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: flex;\n align-items: center;\n min-height: 3rem;\n height: 3rem;\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n padding-right: $small-space;\n transition: border-radius $default-time;\n cursor: pointer;\n\n z-index: 1;\n\n color: var(--theme-blind-header-closed--color);\n background-color: var(--theme-blind-header-closed--background);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color);\n padding: $tiny-space $small-space;\n }\n\n .blind-header-title,\n .blind-header-title-basic {\n @include ellipsis;\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n\n .blind-header-title-default {\n @include ellipsis;\n @include text-l-title;\n margin-inline-end: $small-space;\n flex-grow: 1;\n }\n }\n\n .blind-header-title-basic ix-icon {\n margin-inline-end: $small-space;\n }\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--active);\n }\n }\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n\n &.closed {\n border-radius: var(--theme-blind--border-radius);\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--active);\n }\n }\n }\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: $default-time;\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private id = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick(e: Event) {\n if ((e.target as Element).closest('.header-actions')) {\n return;\n }\n\n e.preventDefault();\n e.stopImmediatePropagation();\n\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host>\n <button\n class={{\n 'blind-header': true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n aria-controls={`ix-blind-content-section-${this.id}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={(e) => this.onHeaderClick(e)}\n >\n <ix-icon\n class={'collapse-icon'}\n name=\"chevron-right-small\"\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.id}`}\n >\n {this.label !== undefined ? (\n <span class=\"blind-header-title-basic\">\n {this.icon !== undefined ? (\n <ix-icon name={this.icon}></ix-icon>\n ) : (\n ''\n )}\n <span class=\"blind-header-title-default\">{this.label}</span>\n <span\n class=\"header-actions\"\n onClick={(e) => e.stopImmediatePropagation()}\n >\n <slot name=\"header-actions\"></slot>\n </span>\n </span>\n ) : (\n <slot name=\"custom-header\"></slot>\n )}\n </div>\n </button>\n <section\n id={`ix-blind-content-section-${this.id}`}\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n <slot></slot>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-blind.entry.cjs.js","mappings":"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","names":["anime","h","Host","a11yBoolean"],"sources":["./src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","./src/components/blind/blind.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/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n display: flex;\n flex-direction: column;\n background-color: var(--theme-blind-base--background);\n border: solid var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: flex;\n align-items: center;\n min-height: 3rem;\n height: 3rem;\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n padding-right: $small-space;\n transition: border-radius $default-time;\n cursor: pointer;\n\n z-index: 1;\n\n color: var(--theme-blind-header-closed--color);\n background-color: var(--theme-blind-header-closed--background);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color);\n padding: $tiny-space $small-space;\n }\n\n .blind-header-title,\n .blind-header-title-basic {\n @include ellipsis;\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n\n .blind-header-title-default {\n @include ellipsis;\n @include text-l-title;\n margin-inline-end: $small-space;\n flex-grow: 1;\n }\n }\n\n .blind-header-title-basic ix-icon {\n margin-inline-end: $small-space;\n }\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-open--color--active);\n }\n }\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n\n &.closed {\n border-radius: var(--theme-blind--border-radius);\n\n @include hover {\n background-color: var(--theme-blind-header-open--background--hover);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-blind-header-open--background--active);\n\n .collapse-icon {\n color: var(--theme-blind-header-icon-closed--color--active);\n }\n }\n }\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: $default-time;\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private id = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick(e: Event) {\n if ((e.target as Element).closest('.header-actions')) {\n return;\n }\n\n e.preventDefault();\n e.stopImmediatePropagation();\n\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host>\n <button\n class={{\n 'blind-header': true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n aria-controls={`ix-blind-content-section-${this.id}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={(e) => this.onHeaderClick(e)}\n >\n <ix-icon\n class={'collapse-icon'}\n name=\"chevron-right-small\"\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.id}`}\n >\n {this.label !== undefined ? (\n <span class=\"blind-header-title-basic\">\n {this.icon !== undefined ? (\n <ix-icon name={this.icon}></ix-icon>\n ) : (\n ''\n )}\n <span class=\"blind-header-title-default\">{this.label}</span>\n <span\n class=\"header-actions\"\n onClick={(e) => e.stopImmediatePropagation()}\n >\n <slot name=\"header-actions\"></slot>\n </span>\n </span>\n ) : (\n <slot name=\"custom-header\"></slot>\n )}\n </div>\n </button>\n <section\n id={`ix-blind-content-section-${this.id}`}\n aria-labelledby={`ix-blind-header-title-${this.id}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n <slot></slot>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
 const anime_es = require('./anime.es-8822f296.js');
 const mutationObserver = require('./mutation-observer-eaaa5399.js');

package/dist/cjs/ix-burger-menu.cjs.entry.js CHANGED Viewed

@@ -2,19 +2,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
+const baseButton = require('./base-button-497db257.js');
+const a11y = require('./a11y-fa9abd92.js');
-const burgerMenuCss = ":host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius)}:host svg{display:inline-block;position:relative}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:hover){background-color:var(--theme-menu-btn--background--hover);border-radius:var(--theme-btn--border-radius)}:host(:active){background-color:var(--theme-menu-btn--background--active);border-radius:var(--theme-btn--border-radius)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}";
+const burgerMenuCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-btn-primary--background--selected)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover) !important;background-color:var(--theme-btn-primary--background--hover) !important;color:var(--theme-btn-primary--color--hover) !important}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-btn-primary--background--selected-hover);color:var(--theme-btn-primary--color--selected-hover)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active) !important;background-color:var(--theme-btn-primary--background--active) !important;color:var(--theme-btn-primary--color--active) !important}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-btn-primary--background--selected-active);color:var(--theme-btn-primary--color--selected-active)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-btn-outline-primary--background--selected)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover) !important;background-color:var(--theme-btn-outline-primary--background--hover) !important;color:var(--theme-btn-outline-primary--color--hover) !important}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-btn-outline-primary--background--selected-hover);color:var(--theme-btn-outline-primary--color--selected-hover)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active) !important;background-color:var(--theme-btn-outline-primary--background--active) !important;color:var(--theme-btn-outline-primary--color--active) !important}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-primary--background--selected-active);color:var(--theme-btn-outline-primary--color--selected-active)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-btn-invisible-primary--background--selected)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover) !important;color:var(--theme-btn-invisible-primary--color--hover) !important}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-btn-invisible-primary--background--selected-hover);color:var(--theme-btn-invisible-primary--color--selected-hover)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active) !important;color:var(--theme-btn-invisible-primary--color--active) !important}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--selected-active);color:var(--theme-btn-invisible-primary--color--selected-active)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-btn-secondary--background--selected)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover) !important;background-color:var(--theme-btn-secondary--background--hover) !important;color:var(--theme-btn-secondary--color--hover) !important}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-btn-secondary--background--selected-hover);color:var(--theme-btn-secondary--color--selected-hover)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active) !important;background-color:var(--theme-btn-secondary--background--active) !important;color:var(--theme-btn-secondary--color--active) !important}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-secondary--background--selected-active);color:var(--theme-btn-secondary--color--selected-active)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-btn-outline-secondary--background--selected)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover) !important;background-color:var(--theme-btn-outline-secondary--background--hover) !important;color:var(--theme-btn-outline-secondary--color--hover) !important}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-btn-outline-secondary--background--selected-hover);color:var(--theme-btn-outline-secondary--color--selected-hover)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active) !important;background-color:var(--theme-btn-outline-secondary--background--active) !important;color:var(--theme-btn-outline-secondary--color--active) !important}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-secondary--background--selected-active);color:var(--theme-btn-outline-secondary--color--selected-active)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-btn-invisible-secondary--background--selected)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover) !important;color:var(--theme-btn-invisible-secondary--color--hover) !important}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-btn-invisible-secondary--background--selected-hover);color:var(--theme-btn-invisible-secondary--color--selected-hover)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active) !important;color:var(--theme-btn-invisible-secondary--color--active) !important}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--selected-active);color:var(--theme-btn-invisible-secondary--color--selected-active)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}:host *,:host *::after,:host *::before{box-sizing:border-box}:host svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--hover)}.burger-menu-button{width:40px;padding:0}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}:host(.expanded) ix-icon-button{transform:rotate(180deg)}";
 const BurgerMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.ixAriaLabel = 'Expand';
     this.expanded = false;
+    this.pinned = false;
   }
   render() {
     return (index.h(index.Host, { class: {
         expanded: this.expanded,
-      } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), index.h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), index.h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
+      } }, this.pinned ? (index.h("ix-icon-button", { icon: "double-chevron-right", ghost: true })) : (index.h("button", { class: Object.assign(Object.assign({}, baseButton.getButtonClasses('secondary', false, true, true, false, false, false)), { 'burger-menu-button': true }), type: "button", "aria-label": this.ixAriaLabel ? this.ixAriaLabel : null, "aria-pressed": a11y.a11yBoolean(this.expanded) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), index.h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), index.h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))))));
   }
 };
 BurgerMenu.style = burgerMenuCss;

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

	@@ -1 +1 @@
1	- {"file":"ix-burger-menu.entry.cjs.js","mappings":"~~;;;;;;~~AAAA,MAAM,aAAa,GAAG,~~8yBAA8yB~~;;~~MC2BvzB~~,UAAU;;;~~oBAIe~~,KAAK;;~~EAEzC~~,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,~~IAEDD~~,iBACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEXA,~~kBAAM~~,KAAK,EAAC,aAAa,~~EAAC~~,CAAC,EAAC,GAAG,~~EAAC~~,CAAC,EAAC,GAAG,~~EAAC~~,KAAK,EAAC,IAAI,~~EAAC~~,MAAM,EAAC,GAAG,~~GAAQ~~,~~EACnEA~~,~~kBAAM~~,KAAK,EAAC,aAAa,~~EAAC~~,CAAC,EAAC,GAAG,~~EAAC~~,CAAC,EAAC,IAAI,~~EAAC~~,KAAK,EAAC,IAAI,~~EAAC~~,MAAM,EAAC,GAAG,~~GAAQ~~,~~EACpEA~~,~~kBAAM~~,KAAK,EAAC,aAAa,~~EAAC~~,CAAC,EAAC,GAAG,~~EAAC~~,CAAC,EAAC,IAAI,~~EAAC~~,KAAK,EAAC,IAAI,~~EAAC~~,MAAM,EAAC,GAAG,~~GAAQ~~,~~CAChE~~,~~CACD~~,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.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 'mixins/hover';\n\n:host {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 2rem;\n width: 2.5rem;\n border-radius: var(--theme-btn--border-radius);\n\n svg {\n display: inline-block;\n ~~position~~: ~~relative~~;\n }\n\n .line {\n fill: var(--theme-menu-btn--color);\n opacity: 1;\n x: 2px;\n transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n transform-origin: center;\n }\n}\n\n:host(:hover) {\n background-color: var(--theme-menu-btn--background--hover);\n ~~border~~-~~radius~~: ~~var(--theme-btn--border-radius)~~;\n}\n\n:host(:active) {\n background-color: var(--theme-menu-btn--background--active);\n ~~border-radius: var(--theme-btn--border-radius);\~~n}\n\n:host(.expanded) {\n svg .line-1 {\n opacity: 1;\n transform: rotate(-45deg);\n y: 11px;\n }\n\n svg .line-2 {\n opacity: 0;\n x: 9;\n }\n\n svg .line-3 {\n opacity: 1;\n transform: rotate(45deg);\n y: 11px;\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 * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-burger-menu',\n styleUrl: './burger-menu.scss',\n shadow: true,\n})\nexport class BurgerMenu {\n /\n Is menu ~~displayed~~ as expanded\n */\n @Prop({ reflect: true }) expanded = false;\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n >\n <rect class=\"line line-1\" x=\"2\" y=\"5\" width=\"20\" height=\"2\"></rect>\n <rect class=\"line line-2\" x=\"2\" y=\"11\" width=\"13\" height=\"2\"></rect>\n <rect class=\"line line-3\" x=\"2\" y=\"17\" width=\"20\" height=\"2\"></rect>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-burger-menu.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,o4cAAo4c;;MC8B74c,UAAU;;;uBAIS,QAAQ;oBAKF,KAAK;kBAKxB,KAAK;;EAEtB,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,MAAM,IACVD,4BAAgB,IAAI,EAAC,sBAAsB,EAAC,KAAK,SAAkB,KAEnEA,oBACE,KAAK,kCACAE,2BAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,kBACxCC,gBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAExCH,iBACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEXA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACRA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACRA,kBACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,CACJ,CACC,CACV,CACI,EACP;GACH;;;;;;","names":["h","Host","getButtonClasses","a11yBoolean"],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.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 'components/buttons';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$focus-bdr-width: 0.0625rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n justify-content: center;\n align-items: center;\n height: 2rem;\n width: 2.5rem;\n border-radius: var(--theme-btn--border-radius);\n pointer-events: all;\n\n svg {\n display: inline-block;\n vertical-align: middle;\n }\n\n .line {\n fill: var(--theme-menu-btn--color);\n opacity: 1;\n x: 2px;\n transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n transform-origin: center;\n }\n}\n\n@include host-hover {\n .burger-menu-button {\n background-color: var(--theme-menu-btn--background--hover);\n }\n}\n\n.burger-menu-button {\n width: 40px;\n padding: 0;\n}\n\n@include host-active {\n .burger-menu-button {\n background-color: var(--theme-menu-btn--background--active);\n }\n}\n\n:host(.expanded) {\n svg .line-1 {\n opacity: 1;\n transform: rotate(-45deg);\n y: 11px;\n }\n\n svg .line-2 {\n opacity: 0;\n x: 9;\n }\n\n svg .line-3 {\n opacity: 1;\n transform: rotate(45deg);\n y: 11px;\n }\n\n ix-icon-button {\n transform: rotate(180deg);\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 * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-burger-menu',\n styleUrl: './burger-menu.scss',\n shadow: true,\n})\nexport class BurgerMenu {\n /\n Accessibility label for the burger menu button (MANDATORY)\n /\n @Prop() ixAriaLabel: string = 'Expand';\n\n /\n Does burger menu button display the expanded or the not expanded state\n /\n @Prop({ reflect: true }) expanded = false;\n\n /\n Display as pinned\n */\n @Prop() pinned = false;\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n }}\n >\n {this.pinned ? (\n <ix-icon-button icon=\"double-chevron-right\" ghost></ix-icon-button>\n ) : (\n <button\n class={{\n ...getButtonClasses(\n 'secondary',\n false,\n true,\n true,\n false,\n false,\n false\n ),\n 'burger-menu-button': true,\n }}\n type=\"button\"\n aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n aria-pressed={a11yBoolean(this.expanded)}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n >\n <rect\n class=\"line line-1\"\n x=\"2\"\n y=\"5\"\n width=\"20\"\n height=\"2\"\n ></rect>\n <rect\n class=\"line line-2\"\n x=\"2\"\n y=\"11\"\n width=\"13\"\n height=\"2\"\n ></rect>\n <rect\n class=\"line line-3\"\n x=\"2\"\n y=\"17\"\n width=\"20\"\n height=\"2\"\n ></rect>\n </svg>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}