@siemens/ix 2.0.1 → 2.0.3
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.
- package/components/a11y.js +1 -1
- package/components/a11y.js.map +1 -1
- package/components/application-header.js +17 -3
- package/components/application-header.js.map +1 -1
- package/components/breadcrumb-item.js +12 -4
- package/components/breadcrumb-item.js.map +1 -1
- package/components/button.js +1 -1
- package/components/button.js.map +1 -1
- package/components/dropdown.js +9 -4
- package/components/dropdown.js.map +1 -1
- package/components/icon-button.js +1 -1
- package/components/icon-button.js.map +1 -1
- package/components/ix-breadcrumb.js +4 -1
- package/components/ix-breadcrumb.js.map +1 -1
- package/components/ix-category-filter.js +1 -1
- package/components/ix-category-filter.js.map +1 -1
- package/components/ix-drawer.js +1 -1
- package/components/ix-drawer.js.map +1 -1
- package/components/ix-icon-toggle-button.js +1 -1
- package/components/ix-icon-toggle-button.js.map +1 -1
- package/components/ix-input-group.js +16 -3
- package/components/ix-input-group.js.map +1 -1
- package/components/ix-menu.js.map +1 -1
- package/components/ix-modal.js +1 -2
- package/components/ix-modal.js.map +1 -1
- package/components/ix-pagination.js +2 -2
- package/components/ix-pagination.js.map +1 -1
- package/dist/cjs/{a11y-4fdcefb4.js → a11y-7e1c1b86.js} +2 -2
- package/dist/cjs/a11y-7e1c1b86.js.map +1 -0
- package/dist/cjs/ix-application-header.cjs.entry.js +15 -2
- package/dist/cjs/ix-application-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-blind.cjs.entry.js +1 -1
- package/dist/cjs/ix-breadcrumb-item.cjs.entry.js +11 -4
- package/dist/cjs/ix-breadcrumb-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-breadcrumb.cjs.entry.js +5 -2
- package/dist/cjs/ix-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-burger-menu.cjs.entry.js +1 -1
- package/dist/cjs/ix-button.cjs.entry.js +1 -1
- package/dist/cjs/ix-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-category-filter.cjs.entry.js +1 -1
- package/dist/cjs/ix-category-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-drawer.cjs.entry.js +1 -1
- package/dist/cjs/ix-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-dropdown.cjs.entry.js +9 -4
- package/dist/cjs/ix-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-icon-button_2.cjs.entry.js +1 -1
- package/dist/cjs/ix-icon-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-icon-toggle-button.cjs.entry.js +2 -2
- package/dist/cjs/ix-icon-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-input-group.cjs.entry.js +16 -3
- package/dist/cjs/ix-input-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-modal.cjs.entry.js +2 -3
- package/dist/cjs/ix-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-pagination.cjs.entry.js +3 -3
- package/dist/cjs/ix-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-slider.cjs.entry.js +1 -1
- package/dist/cjs/ix-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/ix-toggle.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/siemens-ix.cjs.js +1 -1
- package/dist/collection/components/application-header/application-header.js +18 -3
- package/dist/collection/components/application-header/application-header.js.map +1 -1
- package/dist/collection/components/application-header/test/application-headet.ct.js +16 -1
- package/dist/collection/components/application-header/test/application-headet.ct.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +4 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/collection/components/breadcrumb-item/breadcrumb-item.css +36 -0
- package/dist/collection/components/breadcrumb-item/breadcrumb-item.js +14 -2
- package/dist/collection/components/breadcrumb-item/breadcrumb-item.js.map +1 -1
- package/dist/collection/components/button/button.css +18 -0
- package/dist/collection/components/button/test/button.ct.js +6 -0
- package/dist/collection/components/button/test/button.ct.js.map +1 -1
- package/dist/collection/components/category-filter/category-filter.css +18 -0
- package/dist/collection/components/drawer/drawer.css +4 -0
- package/dist/collection/components/dropdown/dropdown.js +9 -4
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/dropdown/test/dropdown.ct.js +21 -0
- package/dist/collection/components/dropdown/test/dropdown.ct.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.css +18 -0
- package/dist/collection/components/icon-toggle-button/icon-toggle-button.css +18 -0
- package/dist/collection/components/input-group/input-group.js +16 -3
- package/dist/collection/components/input-group/input-group.js.map +1 -1
- package/dist/collection/components/input-group/tests/input-group.ct.js +86 -0
- package/dist/collection/components/input-group/tests/input-group.ct.js.map +1 -0
- package/dist/collection/components/menu/menu.js +4 -1
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/modal/modal.js +1 -2
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/collection/components/pagination/pagination.css +18 -0
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/pagination/pagination.js.map +1 -1
- package/dist/collection/components/pagination/test/pagination.ct.js +20 -0
- package/dist/collection/components/pagination/test/pagination.ct.js.map +1 -1
- package/dist/collection/components/utils/a11y.js +1 -1
- package/dist/collection/components/utils/a11y.js.map +1 -1
- package/dist/esm/{a11y-d5dd20ad.js → a11y-115b6a36.js} +2 -2
- package/dist/esm/a11y-115b6a36.js.map +1 -0
- package/dist/esm/ix-application-header.entry.js +15 -2
- package/dist/esm/ix-application-header.entry.js.map +1 -1
- package/dist/esm/ix-blind.entry.js +1 -1
- package/dist/esm/ix-breadcrumb-item.entry.js +11 -4
- package/dist/esm/ix-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/ix-breadcrumb.entry.js +5 -2
- package/dist/esm/ix-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ix-burger-menu.entry.js +1 -1
- package/dist/esm/ix-button.entry.js +1 -1
- package/dist/esm/ix-button.entry.js.map +1 -1
- package/dist/esm/ix-category-filter.entry.js +1 -1
- package/dist/esm/ix-category-filter.entry.js.map +1 -1
- package/dist/esm/ix-drawer.entry.js +1 -1
- package/dist/esm/ix-drawer.entry.js.map +1 -1
- package/dist/esm/ix-dropdown.entry.js +9 -4
- package/dist/esm/ix-dropdown.entry.js.map +1 -1
- package/dist/esm/ix-icon-button_2.entry.js +1 -1
- package/dist/esm/ix-icon-button_2.entry.js.map +1 -1
- package/dist/esm/ix-icon-toggle-button.entry.js +2 -2
- package/dist/esm/ix-icon-toggle-button.entry.js.map +1 -1
- package/dist/esm/ix-input-group.entry.js +16 -3
- package/dist/esm/ix-input-group.entry.js.map +1 -1
- package/dist/esm/ix-menu.entry.js.map +1 -1
- package/dist/esm/ix-modal.entry.js +2 -3
- package/dist/esm/ix-modal.entry.js.map +1 -1
- package/dist/esm/ix-pagination.entry.js +3 -3
- package/dist/esm/ix-pagination.entry.js.map +1 -1
- package/dist/esm/ix-slider.entry.js +1 -1
- package/dist/esm/ix-toggle-button.entry.js +1 -1
- package/dist/esm/ix-toggle.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/siemens-ix.js +1 -1
- package/dist/siemens-ix/{p-4796a3ae.entry.js → p-042b8889.entry.js} +2 -2
- package/dist/siemens-ix/{p-b53bed3a.entry.js → p-228c5657.entry.js} +2 -2
- package/dist/siemens-ix/{p-fa0d5f4e.entry.js → p-28d29e36.entry.js} +2 -2
- package/dist/siemens-ix/p-2fd30d79.js +2 -0
- package/dist/siemens-ix/p-2fd30d79.js.map +1 -0
- package/dist/siemens-ix/p-302cd093.entry.js +2 -0
- package/dist/siemens-ix/{p-eb29049a.entry.js.map → p-302cd093.entry.js.map} +1 -1
- package/dist/siemens-ix/p-32265ee2.entry.js +2 -0
- package/dist/siemens-ix/p-32265ee2.entry.js.map +1 -0
- package/dist/siemens-ix/p-355f9085.entry.js +2 -0
- package/dist/siemens-ix/{p-74a7d191.entry.js.map → p-355f9085.entry.js.map} +1 -1
- package/dist/siemens-ix/p-574e3cd1.entry.js +2 -0
- package/dist/siemens-ix/p-574e3cd1.entry.js.map +1 -0
- package/dist/siemens-ix/p-59dc0873.entry.js +2 -0
- package/dist/siemens-ix/{p-90efad65.entry.js.map → p-59dc0873.entry.js.map} +1 -1
- package/dist/siemens-ix/p-7cc23245.entry.js +2 -0
- package/dist/siemens-ix/p-7cc23245.entry.js.map +1 -0
- package/dist/siemens-ix/p-9249df8d.entry.js +2 -0
- package/dist/siemens-ix/{p-d78cd3f4.entry.js.map → p-9249df8d.entry.js.map} +1 -1
- package/dist/siemens-ix/p-ad94f795.entry.js +2 -0
- package/dist/siemens-ix/p-ad94f795.entry.js.map +1 -0
- package/dist/siemens-ix/{p-0ebc6c4d.entry.js → p-b2042a15.entry.js} +2 -2
- package/dist/siemens-ix/p-b2042a15.entry.js.map +1 -0
- package/dist/siemens-ix/p-bd873b87.entry.js +2 -0
- package/dist/siemens-ix/p-bd873b87.entry.js.map +1 -0
- package/dist/siemens-ix/{p-6ae65cac.entry.js → p-c1318e16.entry.js} +2 -2
- package/dist/siemens-ix/p-c7e502d7.entry.js +2 -0
- package/dist/siemens-ix/p-c7e502d7.entry.js.map +1 -0
- package/dist/siemens-ix/p-dcb957d8.entry.js.map +1 -1
- package/dist/siemens-ix/{p-77b14ca1.entry.js → p-f304f7ce.entry.js} +2 -2
- package/dist/siemens-ix/p-fa7f3eef.entry.js +2 -0
- package/dist/siemens-ix/p-fa7f3eef.entry.js.map +1 -0
- package/dist/siemens-ix/siemens-ix-core.css +1 -1
- package/dist/siemens-ix/siemens-ix.css +12 -0
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/siemens-ix/siemens-ix.esm.js.map +1 -1
- package/dist/types/components/application-header/application-header.d.ts +1 -0
- package/dist/types/components/breadcrumb-item/breadcrumb-item.d.ts +2 -0
- package/dist/types/components/input-group/input-group.d.ts +1 -0
- package/dist/types/components/input-group/tests/input-group.ct.d.ts +1 -0
- package/dist/types/components/menu/menu.d.ts +2 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/scss/components/_checkboxes.scss +3 -0
- package/scss/components/_radiobuttons.scss +5 -0
- package/dist/cjs/a11y-4fdcefb4.js.map +0 -1
- package/dist/esm/a11y-d5dd20ad.js.map +0 -1
- package/dist/siemens-ix/p-0ebc6c4d.entry.js.map +0 -1
- package/dist/siemens-ix/p-2e75f0e4.entry.js +0 -2
- package/dist/siemens-ix/p-2e75f0e4.entry.js.map +0 -1
- package/dist/siemens-ix/p-66d7fbd9.entry.js +0 -2
- package/dist/siemens-ix/p-66d7fbd9.entry.js.map +0 -1
- package/dist/siemens-ix/p-74a7d191.entry.js +0 -2
- package/dist/siemens-ix/p-774eca79.entry.js +0 -2
- package/dist/siemens-ix/p-774eca79.entry.js.map +0 -1
- package/dist/siemens-ix/p-78c9489b.js +0 -2
- package/dist/siemens-ix/p-78c9489b.js.map +0 -1
- package/dist/siemens-ix/p-7a884056.entry.js +0 -2
- package/dist/siemens-ix/p-7a884056.entry.js.map +0 -1
- package/dist/siemens-ix/p-7b362f58.entry.js +0 -2
- package/dist/siemens-ix/p-7b362f58.entry.js.map +0 -1
- package/dist/siemens-ix/p-90efad65.entry.js +0 -2
- package/dist/siemens-ix/p-d78cd3f4.entry.js +0 -2
- package/dist/siemens-ix/p-d9c99b88.entry.js +0 -2
- package/dist/siemens-ix/p-d9c99b88.entry.js.map +0 -1
- package/dist/siemens-ix/p-eb29049a.entry.js +0 -2
- package/dist/siemens-ix/p-f7b95fd7.entry.js +0 -2
- package/dist/siemens-ix/p-f7b95fd7.entry.js.map +0 -1
- /package/dist/siemens-ix/{p-4796a3ae.entry.js.map → p-042b8889.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-b53bed3a.entry.js.map → p-228c5657.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-fa0d5f4e.entry.js.map → p-28d29e36.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-6ae65cac.entry.js.map → p-c1318e16.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-77b14ca1.entry.js.map → p-f304f7ce.entry.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as i,h as d,H as o,g as t}from"./p-76a509c7.js";import{a as l}from"./p-810b5232.js";import{a as n}from"./p-78c9489b.js";const a=":host{display:flex;flex-direction:column;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;cursor:pointer;z-index:1}:host .blind-header .collapse-icon{padding:0.25rem 0.5rem}:host .blind-header .blind-header-title-col{flex-grow:1;flex-basis:0;display:inline-flex;align-items:center;min-width:0}:host .blind-header ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host .blind-header .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .blind-header .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}: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):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}: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}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header .blind-header-title-label,:host(.blind-alarm) .blind-header .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header .blind-header-title-label,:host(.blind-critical) .blind-header .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header .blind-header-title-label,:host(.blind-info) .blind-header .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header .blind-header-title-label,:host(.blind-neutral) .blind-header .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header .blind-header-title-label,:host(.blind-notification) .blind-header .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header .blind-header-title-label,:host(.blind-success) .blind-header .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header .blind-header-title-label,:host(.blind-warning) .blind-header .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header .blind-header-title-label,:host(.blind-primary) .blind-header .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}";let r=0;const s=class{constructor(d){e(this,d);this.collapsedChange=i(this,"collapsedChange",7);this.blindId=++r;this.collapsed=false;this.label=undefined;this.sublabel=undefined;this.icon=undefined;this.variant="insight"}onHeaderClick(e){if(e.target.closest(".header-actions")){return}e.preventDefault();e.stopImmediatePropagation();this.collapsed=!this.collapsed;this.collapsedChange.emit(this.collapsed)}componentDidLoad(){this.animateCollapse(this.collapsed)}get content(){return this.hostElement.shadowRoot.querySelector(".blind-content")}animation(e){this.animateCollapse(e)}animateCollapse(e){if(e){this.rotateChevronRight()}else{this.rotateChevronDown()}}rotateChevronDown(){l({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:90});l({targets:this.content,duration:150,easing:"easeInOutSine",opacity:1})}rotateChevronRight(){l({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:0});l({targets:this.content,duration:150,easing:"easeInOutSine",opacity:0})}render(){return d(o,{class:{[`blind-${this.variant}`]:true}},d("button",{class:{"blind-header":true,[`blind-${this.variant}`]:true,closed:this.collapsed},type:"button","aria-labelledby":`ix-blind-header-title-${this.blindId}`,"aria-controls":`ix-blind-content-section-${this.blindId}`,"aria-expanded":n(!this.collapsed),onClick:e=>this.onHeaderClick(e)},d("ix-icon",{class:"collapse-icon",name:"chevron-right-small",color:this.variant==="insight"||this.variant==="outline"?"color-primary":`color-${this.variant}--contrast`,ref:e=>this.chevronRef=e}),d("div",{class:"blind-header-title",id:`ix-blind-header-title-${this.blindId}`},this.label!==undefined?d("span",{class:"blind-header-title-basic"},d("div",{class:"blind-header-title-col"},this.icon!==undefined?d("ix-icon",{name:this.icon,color:this.variant==="insight"||this.variant==="outline"?"color-std-text":`color-${this.variant}--contrast`}):"",d("ix-typography",{title:this.label,format:"label-lg",bold:true},d("div",{class:"blind-header-title-label",title:this.label},this.label))),d("div",{class:"blind-header-title-col"},this.sublabel!==undefined?d("ix-typography",{title:this.sublabel},d("div",{class:"blind-header-title-sublabel"},this.sublabel)):"",d("span",{class:"header-actions",onClick:e=>e.stopImmediatePropagation()},d("slot",{name:"header-actions"})))):d("slot",{name:"custom-header"}))),d("section",{id:`ix-blind-content-section-${this.blindId}`,"aria-labelledby":`ix-blind-header-title-${this.blindId}`},d("div",{class:{"blind-content":true,hide:this.collapsed}},!this.collapsed?d("slot",null):null)))}get hostElement(){return t(this)}static get watchers(){return{collapsed:["animation"]}}};s.style=a;export{s as ix_blind};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as i,h as d,H as o,g as t}from"./p-76a509c7.js";import{a as l}from"./p-810b5232.js";import{a as n}from"./p-2fd30d79.js";const a=":host{display:flex;flex-direction:column;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;cursor:pointer;z-index:1}:host .blind-header .collapse-icon{padding:0.25rem 0.5rem}:host .blind-header .blind-header-title-col{flex-grow:1;flex-basis:0;display:inline-flex;align-items:center;min-width:0}:host .blind-header ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host .blind-header .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .blind-header .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}: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):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}: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}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header .blind-header-title-label,:host(.blind-alarm) .blind-header .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header .blind-header-title-label,:host(.blind-critical) .blind-header .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header .blind-header-title-label,:host(.blind-info) .blind-header .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header .blind-header-title-label,:host(.blind-neutral) .blind-header .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header .blind-header-title-label,:host(.blind-notification) .blind-header .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header .blind-header-title-label,:host(.blind-success) .blind-header .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header .blind-header-title-label,:host(.blind-warning) .blind-header .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header .blind-header-title-label,:host(.blind-primary) .blind-header .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}";let r=0;const s=class{constructor(d){e(this,d);this.collapsedChange=i(this,"collapsedChange",7);this.blindId=++r;this.collapsed=false;this.label=undefined;this.sublabel=undefined;this.icon=undefined;this.variant="insight"}onHeaderClick(e){if(e.target.closest(".header-actions")){return}e.preventDefault();e.stopImmediatePropagation();this.collapsed=!this.collapsed;this.collapsedChange.emit(this.collapsed)}componentDidLoad(){this.animateCollapse(this.collapsed)}get content(){return this.hostElement.shadowRoot.querySelector(".blind-content")}animation(e){this.animateCollapse(e)}animateCollapse(e){if(e){this.rotateChevronRight()}else{this.rotateChevronDown()}}rotateChevronDown(){l({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:90});l({targets:this.content,duration:150,easing:"easeInOutSine",opacity:1})}rotateChevronRight(){l({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:0});l({targets:this.content,duration:150,easing:"easeInOutSine",opacity:0})}render(){return d(o,{class:{[`blind-${this.variant}`]:true}},d("button",{class:{"blind-header":true,[`blind-${this.variant}`]:true,closed:this.collapsed},type:"button","aria-labelledby":`ix-blind-header-title-${this.blindId}`,"aria-controls":`ix-blind-content-section-${this.blindId}`,"aria-expanded":n(!this.collapsed),onClick:e=>this.onHeaderClick(e)},d("ix-icon",{class:"collapse-icon",name:"chevron-right-small",color:this.variant==="insight"||this.variant==="outline"?"color-primary":`color-${this.variant}--contrast`,ref:e=>this.chevronRef=e}),d("div",{class:"blind-header-title",id:`ix-blind-header-title-${this.blindId}`},this.label!==undefined?d("span",{class:"blind-header-title-basic"},d("div",{class:"blind-header-title-col"},this.icon!==undefined?d("ix-icon",{name:this.icon,color:this.variant==="insight"||this.variant==="outline"?"color-std-text":`color-${this.variant}--contrast`}):"",d("ix-typography",{title:this.label,format:"label-lg",bold:true},d("div",{class:"blind-header-title-label",title:this.label},this.label))),d("div",{class:"blind-header-title-col"},this.sublabel!==undefined?d("ix-typography",{title:this.sublabel},d("div",{class:"blind-header-title-sublabel"},this.sublabel)):"",d("span",{class:"header-actions",onClick:e=>e.stopImmediatePropagation()},d("slot",{name:"header-actions"})))):d("slot",{name:"custom-header"}))),d("section",{id:`ix-blind-content-section-${this.blindId}`,"aria-labelledby":`ix-blind-header-title-${this.blindId}`},d("div",{class:{"blind-content":true,hide:this.collapsed}},!this.collapsed?d("slot",null):null)))}get hostElement(){return t(this)}static get watchers(){return{collapsed:["animation"]}}};s.style=a;export{s as ix_blind};
|
|
2
|
+
//# sourceMappingURL=p-c1318e16.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as s,f as r,H as e,g as o}from"./p-76a509c7.js";import{b as h,a as n}from"./p-2fd30d79.js";import{c as a}from"./p-c0454c9a.js";const l=":host{display:flex;justify-content:flex-start;height:2.5rem;align-items:center;background-color:transparent;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .previous-button{width:3rem;min-width:0px}:host .crumb-dropdown{overflow:visible}:host .remove-anchor::after{display:none}:host .more-text{display:flex}:host .more-text .more-text-ellipsis{width:1rem;display:inline-block;font-weight:700}:host .more-text ix-icon{padding-top:2px}:host nav,:host ol,:host .crumb-items{display:contents}";let c=0;const d=(t="breadcrumb-")=>`${t}-${c++}`;const b=class{constructor(s){t(this,s);this.itemClick=i(this,"itemClick",7);this.nextClick=i(this,"nextClick",7);this.previousButtonId=d();this.previousDropdownId=d();this.visibleItemCount=9;this.nextItems=[];this.ghost=true;this.ariaLabelPreviousButton="previous";this.previousButtonRef=undefined;this.nextButtonRef=undefined;this.items=[];this.isPreviousDropdownExpanded=false}onNextItemsChange(){this.onChildMutation()}onItemClick(t){this.itemClick.emit(t)}componentDidLoad(){this.mutationObserver=a((()=>this.onChildMutation()));this.mutationObserver.observe(this.hostElement,{subtree:true,childList:true})}componentWillLoad(){this.onChildMutation()}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect()}async onChildMutation(){const t=this.getItems();t.forEach(((i,s)=>{const r=this.nextItems.length!==0&&t.length-1===s;i.ghost=this.ghost;i.showChevron=t.length-1!==s||r;i.isDropdownTrigger=r;if(r){this.nextButtonRef=i}if(t.length<this.visibleItemCount){return}i.visible=s>=t.length-this.visibleItemCount}));this.items=t}getItems(){return Array.from(this.hostElement.querySelectorAll("ix-breadcrumb-item"))}render(){var t,i,o,a;const l=h(this.hostElement);return s(e,null,s("ix-dropdown",{id:this.previousDropdownId,"aria-label":this.ariaLabelPreviousButton,trigger:((t=this.items)===null||t===void 0?void 0:t.length)>this.visibleItemCount?this.previousButtonRef:null,onShowChanged:({detail:t})=>{this.isPreviousDropdownExpanded=t;const i=this.hostElement.shadowRoot.getElementById(this.previousButtonId);if(i){r(this.hostElement.shadowRoot.getElementById(this.previousButtonId))}}},this.items.slice(0,this.items.length-this.visibleItemCount).map((t=>{var i;const r=(i=t.label)!==null&&i!==void 0?i:t.innerText;return s("ix-dropdown-item",{label:r,onClick:()=>{this.onItemClick(r)},onItemClick:t=>t.stopPropagation()})}))),((i=this.items)===null||i===void 0?void 0:i.length)>this.visibleItemCount?s("ix-breadcrumb-item",{id:this.previousButtonId,ref:t=>this.previousButtonRef=t,label:"...",tabIndex:1,onItemClick:t=>t.stopPropagation(),"aria-describedby":this.previousDropdownId,"aria-controls":this.previousDropdownId,"aria-expanded":n(this.isPreviousDropdownExpanded),class:"previous-button"}):null,s("nav",{class:"crumb-items","aria-label":(o=l["aria-label"])!==null&&o!==void 0?o:"breadcrumbs"},s("ol",null,s("slot",null))),s("ix-dropdown",{trigger:this.nextButtonRef},(a=this.nextItems)===null||a===void 0?void 0:a.map((t=>s("ix-dropdown-item",{label:t,onClick:i=>{this.nextClick.emit({event:i,item:t})},onItemClick:t=>t.stopPropagation()})))))}get hostElement(){return o(this)}static get watchers(){return{nextItems:["onNextItemsChange"]}}};b.style=l;export{b as ix_breadcrumb};
|
|
2
|
+
//# sourceMappingURL=p-c7e502d7.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["breadcrumbCss","sequenceId","createId","prefix","Breadcrumb","this","previousButtonId","previousDropdownId","onNextItemsChange","onChildMutation","onItemClick","item","itemClick","emit","componentDidLoad","mutationObserver","createMutationObserver","observe","hostElement","subtree","childList","componentWillLoad","disconnectedCallback","_a","disconnect","async","updatedItems","getItems","forEach","bc","index","shouldShowDropdown","nextItems","length","ghost","showChevron","isDropdownTrigger","nextButtonRef","visibleItemCount","visible","items","Array","from","querySelectorAll","render","a11y","a11yHostAttributes","h","Host","id","ariaLabelPreviousButton","trigger","previousButtonRef","onShowChanged","detail","isPreviousDropdownExpanded","previousButton","shadowRoot","getElementById","forceUpdate","slice","map","label","innerText","onClick","event","stopPropagation","_b","ref","tabIndex","a11yBoolean","class","_c","_d","e","nextClick"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n justify-content: flex-start;\n height: 2.5rem;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .previous-button {\n width: 3rem;\n min-width: 0px;\n }\n\n .crumb-dropdown {\n overflow: visible;\n }\n\n .remove-anchor::after {\n display: none;\n }\n\n .more-text {\n display: flex;\n\n .more-text-ellipsis {\n width: 1rem;\n display: inline-block;\n font-weight: $font-weight-bold;\n }\n\n ix-icon {\n // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n // using padding-top to achieve same position as before\n padding-top: 2px;\n }\n }\n\n nav,\n ol,\n .crumb-items {\n display: contents;\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 forceUpdate,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n tag: 'ix-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true,\n})\nexport class Breadcrumb {\n @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n /**\n * Excess items will get hidden inside of dropdown\n */\n @Prop() visibleItemCount = 9;\n\n /**\n * Items will be accessible through a dropdown\n */\n @Prop() nextItems: string[] = [];\n @Watch('nextItems')\n onNextItemsChange() {\n this.onChildMutation();\n }\n\n /**\n * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n */\n @Prop() ghost = true;\n\n /**\n * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n * with conditionally hidden previous items\n *\n * @since 2.0.0\n */\n @Prop() ariaLabelPreviousButton = 'previous';\n\n /**\n * Crumb item clicked event\n */\n @Event() itemClick: EventEmitter<string>;\n\n /**\n * Next item clicked event\n */\n @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n @State() previousButtonRef: HTMLElement;\n @State() nextButtonRef: HTMLElement;\n @State() items: HTMLIxBreadcrumbItemElement[] = [];\n @State() isPreviousDropdownExpanded = false;\n\n private mutationObserver: MutationObserver;\n\n private previousButtonId = createId();\n private previousDropdownId = createId();\n\n private onItemClick(item: string) {\n this.itemClick.emit(item);\n }\n\n componentDidLoad() {\n this.mutationObserver = createMutationObserver(() =>\n this.onChildMutation()\n );\n\n this.mutationObserver.observe(this.hostElement, {\n subtree: true,\n childList: true,\n });\n }\n\n componentWillLoad() {\n this.onChildMutation();\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n private async onChildMutation() {\n const updatedItems = this.getItems();\n\n updatedItems.forEach((bc, index) => {\n const shouldShowDropdown =\n this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n bc.ghost = this.ghost;\n bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n bc.isDropdownTrigger = shouldShowDropdown;\n\n if (shouldShowDropdown) {\n this.nextButtonRef = bc;\n }\n\n if (updatedItems.length < this.visibleItemCount) {\n return;\n }\n\n bc.visible = index >= updatedItems.length - this.visibleItemCount;\n });\n\n this.items = updatedItems;\n }\n\n private getItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n }\n\n render() {\n const a11y = a11yHostAttributes(this.hostElement);\n return (\n <Host>\n <ix-dropdown\n id={this.previousDropdownId}\n aria-label={this.ariaLabelPreviousButton}\n trigger={\n this.items?.length > this.visibleItemCount\n ? this.previousButtonRef\n : null\n }\n onShowChanged={({ detail }) => {\n this.isPreviousDropdownExpanded = detail;\n\n const previousButton = this.hostElement.shadowRoot.getElementById(\n this.previousButtonId\n );\n\n // Need to force update previous button to change `aria-expanded`\n if (previousButton) {\n forceUpdate(\n this.hostElement.shadowRoot.getElementById(\n this.previousButtonId\n )\n );\n }\n }}\n >\n {this.items\n .slice(0, this.items.length - this.visibleItemCount)\n .map((item) => {\n const label = item.label ?? item.innerText;\n\n return (\n <ix-dropdown-item\n label={label}\n onClick={() => {\n this.onItemClick(label);\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n );\n })}\n </ix-dropdown>\n {this.items?.length > this.visibleItemCount ? (\n <ix-breadcrumb-item\n id={this.previousButtonId}\n ref={(ref) => (this.previousButtonRef = ref)}\n label=\"...\"\n tabIndex={1}\n onItemClick={(event) => event.stopPropagation()}\n aria-describedby={this.previousDropdownId}\n aria-controls={this.previousDropdownId}\n aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n class={'previous-button'}\n ></ix-breadcrumb-item>\n ) : null}\n <nav\n class=\"crumb-items\"\n aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n >\n <ol>\n <slot></slot>\n </ol>\n </nav>\n <ix-dropdown trigger={this.nextButtonRef}>\n {this.nextItems?.map((item) => (\n <ix-dropdown-item\n label={item}\n onClick={(e) => {\n this.nextClick.emit({\n event: e,\n item,\n });\n }}\n onItemClick={(event) => event.stopPropagation()}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ApplicationSidebarToggleEvent","Event","constructor","force","super","bubbles","composed","this","menuCss","Menu","isTransitionDisabled","isVisible","elm","style","display","_b","_a","parentElement","pinnedChange","newPinned","applicationLayoutContext","host","console","warn","setPinned","pinned","applicationLayoutService","disableBreakpointDetection","setBreakpoint","enableBreakpointDetection","popoverArea","hostElement","shadowRoot","querySelector","menu","menuItemsContainer","overlayContainer","menuItems","Array","from","querySelectorAll","filter","menuBottomItems","homeTab","moreItemsDropdown","isMoreItemsDropdownEmpty","length","moreItemsDropdownItems","activeMoreTabContainer","activeMoreTab","aboutPopoverContainer","aboutNewsPopover","document","aboutTab","about","settings","isSettingsEmpty","tabsContainer","componentDidLoad","requestAnimationFrame","handleOverflowIndicator","componentWillLoad","useContextConsumer","ApplicationLayoutContext","ctx","hideHeader","onBreakpointChange","breakpoint","menuController","register","onChange","on","componentWillRender","appendTabs","componentDidRender","appendFragments","showPinned","setIsPinned","mode","toggleMenu","appendAboutNewsPopover","resetActiveTab","activeTab","getAboutPopoverVerticalPosition","heightArrow","offsetArrow","rectAbout","getBoundingClientRect","offset","window","innerHeight","bottom","height","convertToRemString","contains","showMore","aboutItemLabel","activeTabLabel","toggleAbout","addEventListener","bind","body","appendChild","async","show","undefined","mapExpand","expand","expanded","expandChange","emit","checkTransition","container","transitionProperty","isOverlayVisible","showAbout","showSettings","animateOverlayFadeIn","resetOverlay","onOverlayClose","getCollapseText","i18nCollapse","i18nExpand","getCollapseIcon","isMenuItemClicked","event","target","HTMLElement","tagName","clientHeight","scrollTop","scrollHeight","itemsScrollShadowTop","itemsScrollShadowBottom","Math","round","animateOverlayFadeOut","anime","targets","duration","backdropFilter","translateX","opacity","easing","begin","onComplete","complete","onMenuItemsClick","isHiddenFromViewport","sidebarToggle","mapExpandChange","dispatchEvent","render","h","Host","class","slot","onClick","ixAriaLabel","i18nExpandSidebar","name","id","e","onScroll","disabled","active","icon","toggleSettings","i18nSettings","i18nLegal","enableToggleTheme","themeSwitcher","toggleMode","i18nToggleTheme","enableMapExpand","sidebar","visible","onTransitionEnd"],"sources":["./src/components/application-sidebar/events.ts","./src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","./src/components/menu/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\nexport class ApplicationSidebarToggleEvent extends Event {\n public constructor(public readonly force?: boolean) {\n super('application-sidebar-toggle', { bubbles: true, composed: true });\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: row;\n position: absolute;\n height: 100%;\n min-height: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\n }\n\n .tabs--shadow {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 0.625rem;\n\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n pointer-events: none;\n z-index: var(--theme-z-index-sticky);\n\n transition: opacity var(--theme-default-time);\n }\n .tabs--shadow-top {\n top: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\n background: linear-gradient(transparent, var(--theme-color-shadow-1));\n }\n\n .tabs--shadow--show {\n opacity: 1;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 3.25rem;\n height: 100%;\n padding-block-end: 1rem;\n overflow: hidden;\n\n &.expanded {\n box-shadow: var(--theme-navigation--box-shadow);\n }\n\n background-color: var(--theme-nav--background);\n transition: width var(--animate-duration) ease-in-out;\n\n .burger-menu {\n margin: 0.75rem 0 1rem 0.35rem;\n }\n }\n\n .menu-overlay {\n display: none;\n position: absolute;\n width: calc(100vw - 3.25rem);\n height: 100%;\n left: 3.25rem;\n z-index: -1;\n backdrop-filter: blur(1rem);\n background-color: var(--theme-sidebar-overlay-blur);\n transition: left var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay.visible {\n display: block;\n }\n\n .menu.expanded {\n width: $menu-expanded-width;\n }\n\n .menu-overlay.expanded {\n width: calc(100vw - $menu-expanded-width);\n left: $menu-expanded-width;\n }\n\n .menu-overlay-container {\n display: contents;\n }\n\n .menu-avatar {\n max-height: 3rem;\n }\n\n .avatar {\n margin-bottom: 2rem;\n }\n\n #cui-imprint {\n .cui-imprint-product-name {\n margin-bottom: $default-space;\n }\n\n .cui-imprint-product-description {\n margin-bottom: $x-large-space;\n }\n\n .cui-imprint-link-container {\n display: flex;\n align-items: center;\n }\n }\n\n .bottom-tab-divider {\n margin-top: auto;\n }\n}\n\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 2rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\n width: 100vw;\n }\n}\n\n:host(.breakpoint-lg) {\n position: relative;\n\n .menu.expanded {\n box-shadow: none;\n }\n}\n\n:host {\n ::slotted(a[href]) {\n all: unset;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n tag: 'ix-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n @Element() hostElement!: HTMLIxMenuElement;\n\n /**\n * Is settings tab visible\n */\n @Prop({ mutable: true }) showSettings = false;\n\n /**\n * Is about tab visible\n */\n @Prop({ mutable: true }) showAbout = false;\n\n /**\n * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n */\n @Prop() enableToggleTheme = false;\n\n /**\n * Is settings tab is visible\n */\n @Prop() enableSettings = true;\n\n /**\n * Internal\n */\n @Prop() enableMapExpand = false;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationName: string;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationDescription = '';\n\n /**\n * Maximum number of menu items to show in case enough vertical space is available.\n * Extra menu items will be collapsed to 'show more' menu item.\n */\n @Prop() maxVisibleMenuItems = 9;\n\n /**\n * Accessibility i18n label for the burger menu of the sidebar\n */\n @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n /**\n */\n @Prop({ mutable: true, reflect: true }) expand = false;\n\n /**\n * Menu stays pinned to the left\n */\n @Prop() pinned = false;\n @Watch('pinned')\n pinnedChange(newPinned: boolean) {\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n console.warn('ix-map-navigation does not support pinning of the menu');\n return;\n }\n this.setPinned(this.pinned);\n if (newPinned) {\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint('lg');\n return;\n }\n\n applicationLayoutService.enableBreakpointDetection();\n }\n\n /**\n */\n @Prop() i18nLegal = 'About & legal information';\n\n /**\n */\n @Prop() i18nSettings = 'Settings';\n\n /**\n */\n @Prop() i18nToggleTheme = 'Toggle theme';\n\n /**\n */\n @Prop() i18nExpand = ' Expand';\n\n /**\n */\n @Prop() i18nCollapse = 'Collapse';\n\n /**\n * Menu expanded\n */\n @Event() expandChange: EventEmitter<boolean>;\n\n /**\n * Map Sidebar expanded\n */\n @Event() mapExpandChange: EventEmitter<boolean>;\n\n @State() showPinned = false;\n @State() mapExpand = true;\n @State() activeTab: HTMLIxMenuItemElement | null;\n @State() breakpoint: Breakpoint = 'lg';\n @State() itemsScrollShadowTop = false;\n @State() itemsScrollShadowBottom = false;\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n private isTransitionDisabled = false;\n\n // FBC IAM workaround #488\n private readonly isVisible = (elm: HTMLElement) => {\n return (\n elm.style.display !== 'none' &&\n elm.parentElement?.parentElement?.style.display !== 'none'\n );\n };\n\n get popoverArea() {\n return this.hostElement.shadowRoot!.querySelector('#popover-area');\n }\n\n get menu() {\n return this.hostElement.shadowRoot!.querySelector('.menu');\n }\n\n get menuItemsContainer(): HTMLDivElement {\n return this.menu!.querySelector('.tabs')!;\n }\n\n get overlayContainer() {\n return this.hostElement.shadowRoot.querySelector(\n '.menu-overlay'\n ) as HTMLDivElement;\n }\n\n get menuItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n )\n ).filter(this.isVisible);\n }\n\n get menuBottomItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n )\n ).filter(this.isVisible);\n }\n\n get homeTab() {\n return this.hostElement.querySelector('ix-menu-item.home-tab');\n }\n\n get moreItemsDropdown(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector(\n '.internal-tab ix-dropdown'\n )!;\n }\n\n get isMoreItemsDropdownEmpty(): boolean {\n return (\n this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown .appended'\n ).length === 0\n );\n }\n\n get moreItemsDropdownItems() {\n return this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown ix-menu-item'\n );\n }\n\n get activeMoreTabContainer() {\n return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n }\n\n get activeMoreTab() {\n return this.hostElement.shadowRoot!.querySelector(\n '.active-more-tab ix-menu-item'\n );\n }\n\n get aboutPopoverContainer(): HTMLElement {\n return this.hostElement.querySelector('.about-news')!;\n }\n\n get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n return (\n document.querySelector('ix-menu-about-news') ??\n this.hostElement.querySelector('ix-menu-about-news')!\n );\n }\n\n get aboutTab(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n }\n\n get about(): HTMLIxMenuAboutElement | null {\n return this.hostElement.querySelector('ix-menu-about');\n }\n\n get settings(): HTMLIxMenuSettingsElement | null {\n return this.hostElement.querySelector('ix-menu-settings');\n }\n\n get isSettingsEmpty(): boolean {\n return (\n Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n ).length === 0\n );\n }\n\n get tabsContainer() {\n return this.hostElement;\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.handleOverflowIndicator();\n });\n\n if (this.pinned) {\n this.pinnedChange(this.pinned);\n }\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n this.applicationLayoutContext = ctx;\n if (ctx.hideHeader === true) {\n this.onBreakpointChange('md');\n return;\n }\n\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n },\n true\n );\n\n menuController.register(this.hostElement);\n applicationLayoutService.onChange.on((breakpoint) =>\n this.onBreakpointChange(breakpoint)\n );\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n }\n\n componentWillRender() {\n this.appendTabs();\n }\n\n componentDidRender() {\n this.appendFragments();\n }\n\n private setPinned(pinned: boolean) {\n this.showPinned = pinned;\n menuController.setIsPinned(pinned);\n }\n\n private onBreakpointChange(mode: Breakpoint) {\n if (!this.applicationLayoutContext && mode === 'sm') {\n return;\n }\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n this.breakpoint = 'md';\n return;\n }\n if (!this.applicationLayoutContext) {\n return;\n }\n\n if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n return;\n }\n\n this.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\n }\n\n private appendFragments() {\n this.appendAboutNewsPopover();\n }\n\n private resetActiveTab() {\n this.activeTab = null;\n }\n\n private appendTabs() {\n this.activeTab = null;\n }\n\n private getAboutPopoverVerticalPosition() {\n const heightArrow = 12;\n const offsetArrow = 6;\n const rectAbout = this.aboutTab.getBoundingClientRect();\n const offset =\n window.innerHeight -\n (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n return convertToRemString(offset);\n }\n\n private appendAboutNewsPopover() {\n if (!this.aboutNewsPopover) {\n return;\n }\n\n this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n const showMore = () => {\n if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n this.toggleAbout(true);\n }\n };\n\n this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n document.body.appendChild(this.aboutNewsPopover);\n }\n }\n\n /**\n * Toggle map sidebar expand\n * @param show\n */\n @Method()\n async toggleMapExpand(show?: boolean) {\n if (show !== undefined) {\n this.mapExpand = show;\n } else {\n this.mapExpand = !this.mapExpand;\n }\n }\n\n /**\n * Toggle menu\n * @param show\n */\n @Method()\n async toggleMenu(show?: boolean) {\n if (show !== undefined) {\n this.expand = show;\n } else {\n this.expand = !this.expand;\n }\n\n if (this.aboutNewsPopover) {\n this.aboutNewsPopover.expanded = this.expand;\n }\n\n this.expandChange.emit(this.expand);\n\n this.isTransitionDisabled = false;\n this.checkTransition();\n }\n\n /**\n * Disable transition of overlay while menu animation is running.\n */\n private checkTransition() {\n const container = this.overlayContainer;\n\n if (!container) {\n return;\n }\n\n if (this.isTransitionDisabled) {\n container.style.transitionProperty = 'left';\n } else {\n container.style.transitionProperty = 'all';\n }\n }\n\n private isOverlayVisible() {\n return this.showAbout || this.showSettings;\n }\n\n /**\n * Toggle Settings tabs\n * @param show\n */\n @Method()\n async toggleSettings(show: boolean) {\n if (!this.settings) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showSettings = show;\n this.settings.show = this.showSettings;\n } else {\n this.onOverlayClose();\n }\n }\n\n /**\n * Toggle About tabs\n * @param show\n */\n @Method()\n async toggleAbout(show: boolean) {\n if (!this.about) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showAbout = show;\n this.about.show = this.showAbout;\n } else {\n this.onOverlayClose();\n }\n }\n\n private resetOverlay() {\n this.showSettings = false;\n this.showAbout = false;\n\n if (this.settings) {\n this.settings.show = false;\n }\n\n if (this.about) {\n this.about.show = false;\n }\n }\n\n private getCollapseText() {\n return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n }\n\n private getCollapseIcon() {\n return this.mapExpand ? 'navigation-left' : 'navigation-right';\n }\n\n private isMenuItemClicked(event: Event) {\n if (event.target instanceof HTMLElement) {\n return event.target.tagName === 'IX-MENU-ITEM';\n }\n\n return false;\n }\n\n @Listen('resize', { target: 'window' })\n private handleOverflowIndicator() {\n const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n this.itemsScrollShadowTop = scrollTop > 0;\n this.itemsScrollShadowBottom =\n Math.round(scrollTop + clientHeight) < scrollHeight;\n }\n\n @Listen('close')\n onOverlayClose() {\n this.animateOverlayFadeOut(() => {\n this.resetOverlay();\n });\n }\n\n private animateOverlayFadeIn() {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeInSine',\n begin: () => {\n if (this.showPinned) {\n return;\n }\n\n this.toggleMenu(false);\n },\n });\n });\n }\n\n private animateOverlayFadeOut(onComplete: Function) {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => onComplete(),\n });\n });\n }\n\n private onMenuItemsClick(event: Event) {\n if (this.isMenuItemClicked(event)) {\n if (!this.showPinned) {\n this.toggleMenu(false);\n }\n this.onOverlayClose();\n }\n }\n\n private isHiddenFromViewport() {\n return this.breakpoint === 'sm' && this.expand === false;\n }\n\n private sidebarToggle() {\n this.mapExpandChange.emit(this.mapExpand);\n\n this.hostElement.dispatchEvent(\n new ApplicationSidebarToggleEvent(this.mapExpand)\n );\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expand,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"menu\"\n >\n <aside\n class={{\n menu: true,\n expanded: this.expand,\n }}\n onClick={() => {\n this.resetActiveTab();\n }}\n >\n <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\n </div>\n\n <div\n id=\"menu-tabs\"\n style={{\n display: 'contents',\n }}\n onClick={(e) => this.onMenuItemsClick(e)}\n >\n <div class=\"tabs-top\">\n <slot name=\"home\"></slot>\n </div>\n <div class=\"tabs-shadow-container\">\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-top': true,\n 'tabs--shadow--show': this.itemsScrollShadowTop,\n }}\n ></div>\n <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n <slot></slot>\n ) : null}\n </div>\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-bottom': true,\n 'tabs--shadow--show': this.itemsScrollShadowBottom,\n }}\n ></div>\n </div>\n </div>\n <div class=\"bottom-tab-divider\"></div>\n {this.settings ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"settings\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showSettings,\n }}\n icon={'cogwheel'}\n onClick={async () => this.toggleSettings(!this.showSettings)}\n >\n {this.i18nSettings}\n </ix-menu-item>\n ) : null}\n <div onClick={(e) => this.onMenuItemsClick(e)}>\n <slot name=\"bottom\"></slot>\n </div>\n\n <div id=\"popover-area\"></div>\n {this.about ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"aboutAndLegal\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showAbout,\n }}\n icon={'info'}\n onClick={async () => this.toggleAbout(!this.showAbout)}\n >\n {this.i18nLegal}\n </ix-menu-item>\n ) : null}\n {this.enableToggleTheme ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"toggleTheme\"\n onClick={() => themeSwitcher.toggleMode()}\n class=\"internal-tab bottom-tab\"\n icon={'bulb'}\n >\n {this.i18nToggleTheme}\n </ix-menu-item>\n ) : null}\n {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"menu-collapse\"\n onClick={() => this.sidebarToggle()}\n class=\"internal-tab bottom-tab\"\n icon={`${this.getCollapseIcon()}`}\n >\n {this.getCollapseText()}\n </ix-menu-item>\n ) : null}\n </aside>\n <div\n class={{\n 'menu-overlay': true,\n visible: this.isOverlayVisible(),\n expanded: this.expand,\n }}\n onTransitionEnd={() => {\n this.isTransitionDisabled = true;\n this.checkTransition();\n }}\n >\n <div class={'menu-overlay-container'}>\n {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n </div>\n <div class={'menu-overlay-container'}>\n {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["ApplicationSidebarToggleEvent","Event","constructor","force","super","bubbles","composed","this","menuCss","Menu","isTransitionDisabled","isVisible","elm","style","display","_b","_a","parentElement","pinnedChange","newPinned","applicationLayoutContext","host","console","warn","setPinned","pinned","applicationLayoutService","disableBreakpointDetection","setBreakpoint","enableBreakpointDetection","popoverArea","hostElement","shadowRoot","querySelector","menu","menuItemsContainer","overlayContainer","menuItems","Array","from","querySelectorAll","filter","menuBottomItems","homeTab","moreItemsDropdown","isMoreItemsDropdownEmpty","length","moreItemsDropdownItems","activeMoreTabContainer","activeMoreTab","aboutPopoverContainer","aboutNewsPopover","document","aboutTab","about","settings","isSettingsEmpty","tabsContainer","componentDidLoad","requestAnimationFrame","handleOverflowIndicator","componentWillLoad","useContextConsumer","ApplicationLayoutContext","ctx","hideHeader","onBreakpointChange","breakpoint","menuController","register","onChange","on","componentWillRender","appendTabs","componentDidRender","appendFragments","showPinned","setIsPinned","mode","toggleMenu","appendAboutNewsPopover","resetActiveTab","activeTab","getAboutPopoverVerticalPosition","heightArrow","offsetArrow","rectAbout","getBoundingClientRect","offset","window","innerHeight","bottom","height","convertToRemString","contains","showMore","aboutItemLabel","activeTabLabel","toggleAbout","addEventListener","bind","body","appendChild","async","show","undefined","mapExpand","expand","expanded","expandChange","emit","checkTransition","container","transitionProperty","isOverlayVisible","showAbout","showSettings","animateOverlayFadeIn","resetOverlay","onOverlayClose","getCollapseText","i18nCollapse","i18nExpand","getCollapseIcon","isMenuItemClicked","event","target","HTMLElement","tagName","clientHeight","scrollTop","scrollHeight","itemsScrollShadowTop","itemsScrollShadowBottom","Math","round","animateOverlayFadeOut","anime","targets","duration","backdropFilter","translateX","opacity","easing","begin","onComplete","complete","onMenuItemsClick","isHiddenFromViewport","sidebarToggle","mapExpandChange","dispatchEvent","render","h","Host","class","slot","onClick","ixAriaLabel","i18nExpandSidebar","name","id","e","onScroll","disabled","active","icon","toggleSettings","i18nSettings","i18nLegal","enableToggleTheme","themeSwitcher","toggleMode","i18nToggleTheme","enableMapExpand","sidebar","visible","onTransitionEnd"],"sources":["./src/components/application-sidebar/events.ts","./src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","./src/components/menu/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\nexport class ApplicationSidebarToggleEvent extends Event {\n public constructor(public readonly force?: boolean) {\n super('application-sidebar-toggle', { bubbles: true, composed: true });\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: row;\n position: absolute;\n height: 100%;\n min-height: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\n }\n\n .tabs--shadow {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 0.625rem;\n\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n pointer-events: none;\n z-index: var(--theme-z-index-sticky);\n\n transition: opacity var(--theme-default-time);\n }\n .tabs--shadow-top {\n top: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\n background: linear-gradient(transparent, var(--theme-color-shadow-1));\n }\n\n .tabs--shadow--show {\n opacity: 1;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 3.25rem;\n height: 100%;\n padding-block-end: 1rem;\n overflow: hidden;\n\n &.expanded {\n box-shadow: var(--theme-navigation--box-shadow);\n }\n\n background-color: var(--theme-nav--background);\n transition: width var(--animate-duration) ease-in-out;\n\n .burger-menu {\n margin: 0.75rem 0 1rem 0.35rem;\n }\n }\n\n .menu-overlay {\n display: none;\n position: absolute;\n width: calc(100vw - 3.25rem);\n height: 100%;\n left: 3.25rem;\n z-index: -1;\n backdrop-filter: blur(1rem);\n background-color: var(--theme-sidebar-overlay-blur);\n transition: left var(--animate-duration) ease-in-out;\n }\n\n .menu-overlay.visible {\n display: block;\n }\n\n .menu.expanded {\n width: $menu-expanded-width;\n }\n\n .menu-overlay.expanded {\n width: calc(100vw - $menu-expanded-width);\n left: $menu-expanded-width;\n }\n\n .menu-overlay-container {\n display: contents;\n }\n\n .menu-avatar {\n max-height: 3rem;\n }\n\n .avatar {\n margin-bottom: 2rem;\n }\n\n #cui-imprint {\n .cui-imprint-product-name {\n margin-bottom: $default-space;\n }\n\n .cui-imprint-product-description {\n margin-bottom: $x-large-space;\n }\n\n .cui-imprint-link-container {\n display: flex;\n align-items: center;\n }\n }\n\n .bottom-tab-divider {\n margin-top: auto;\n }\n}\n\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 2rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\n width: 100vw;\n }\n}\n\n:host(.breakpoint-lg) {\n position: relative;\n\n .menu.expanded {\n box-shadow: none;\n }\n}\n\n:host {\n ::slotted(a[href]) {\n all: unset;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n tag: 'ix-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n @Element() hostElement!: HTMLIxMenuElement;\n\n /**\n * Is settings tab visible\n */\n @Prop({ mutable: true }) showSettings = false;\n\n /**\n * Is about tab visible\n */\n @Prop({ mutable: true }) showAbout = false;\n\n /**\n * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n */\n @Prop() enableToggleTheme = false;\n\n /**\n * Is settings tab is visible\n */\n @Prop() enableSettings = true;\n\n /**\n * Internal\n */\n @Prop() enableMapExpand = false;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationName: string;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationDescription = '';\n\n /**\n * Maximum number of menu items to show in case enough vertical space is available.\n * Extra menu items will be collapsed to 'show more' menu item.\n *\n * @deprecated - Has no effect on component. Will get removed with next major release (v3)\n */\n @Prop() maxVisibleMenuItems = 9;\n\n /**\n * Accessibility i18n label for the burger menu of the sidebar\n */\n @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n /**\n */\n @Prop({ mutable: true, reflect: true }) expand = false;\n\n /**\n * Menu stays pinned to the left\n */\n @Prop() pinned = false;\n @Watch('pinned')\n pinnedChange(newPinned: boolean) {\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n console.warn('ix-map-navigation does not support pinning of the menu');\n return;\n }\n this.setPinned(this.pinned);\n if (newPinned) {\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint('lg');\n return;\n }\n\n applicationLayoutService.enableBreakpointDetection();\n }\n\n /**\n */\n @Prop() i18nLegal = 'About & legal information';\n\n /**\n */\n @Prop() i18nSettings = 'Settings';\n\n /**\n */\n @Prop() i18nToggleTheme = 'Toggle theme';\n\n /**\n */\n @Prop() i18nExpand = ' Expand';\n\n /**\n */\n @Prop() i18nCollapse = 'Collapse';\n\n /**\n * Menu expanded\n */\n @Event() expandChange: EventEmitter<boolean>;\n\n /**\n * Map Sidebar expanded\n */\n @Event() mapExpandChange: EventEmitter<boolean>;\n\n @State() showPinned = false;\n @State() mapExpand = true;\n @State() activeTab: HTMLIxMenuItemElement | null;\n @State() breakpoint: Breakpoint = 'lg';\n @State() itemsScrollShadowTop = false;\n @State() itemsScrollShadowBottom = false;\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n private isTransitionDisabled = false;\n\n // FBC IAM workaround #488\n private readonly isVisible = (elm: HTMLElement) => {\n return (\n elm.style.display !== 'none' &&\n elm.parentElement?.parentElement?.style.display !== 'none'\n );\n };\n\n get popoverArea() {\n return this.hostElement.shadowRoot!.querySelector('#popover-area');\n }\n\n get menu() {\n return this.hostElement.shadowRoot!.querySelector('.menu');\n }\n\n get menuItemsContainer(): HTMLDivElement {\n return this.menu!.querySelector('.tabs')!;\n }\n\n get overlayContainer() {\n return this.hostElement.shadowRoot.querySelector(\n '.menu-overlay'\n ) as HTMLDivElement;\n }\n\n get menuItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n )\n ).filter(this.isVisible);\n }\n\n get menuBottomItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n )\n ).filter(this.isVisible);\n }\n\n get homeTab() {\n return this.hostElement.querySelector('ix-menu-item.home-tab');\n }\n\n get moreItemsDropdown(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector(\n '.internal-tab ix-dropdown'\n )!;\n }\n\n get isMoreItemsDropdownEmpty(): boolean {\n return (\n this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown .appended'\n ).length === 0\n );\n }\n\n get moreItemsDropdownItems() {\n return this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown ix-menu-item'\n );\n }\n\n get activeMoreTabContainer() {\n return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n }\n\n get activeMoreTab() {\n return this.hostElement.shadowRoot!.querySelector(\n '.active-more-tab ix-menu-item'\n );\n }\n\n get aboutPopoverContainer(): HTMLElement {\n return this.hostElement.querySelector('.about-news')!;\n }\n\n get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n return (\n document.querySelector('ix-menu-about-news') ??\n this.hostElement.querySelector('ix-menu-about-news')!\n );\n }\n\n get aboutTab(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n }\n\n get about(): HTMLIxMenuAboutElement | null {\n return this.hostElement.querySelector('ix-menu-about');\n }\n\n get settings(): HTMLIxMenuSettingsElement | null {\n return this.hostElement.querySelector('ix-menu-settings');\n }\n\n get isSettingsEmpty(): boolean {\n return (\n Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n ).length === 0\n );\n }\n\n get tabsContainer() {\n return this.hostElement;\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.handleOverflowIndicator();\n });\n\n if (this.pinned) {\n this.pinnedChange(this.pinned);\n }\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n this.applicationLayoutContext = ctx;\n if (ctx.hideHeader === true) {\n this.onBreakpointChange('md');\n return;\n }\n\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n },\n true\n );\n\n menuController.register(this.hostElement);\n applicationLayoutService.onChange.on((breakpoint) =>\n this.onBreakpointChange(breakpoint)\n );\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n }\n\n componentWillRender() {\n this.appendTabs();\n }\n\n componentDidRender() {\n this.appendFragments();\n }\n\n private setPinned(pinned: boolean) {\n this.showPinned = pinned;\n menuController.setIsPinned(pinned);\n }\n\n private onBreakpointChange(mode: Breakpoint) {\n if (!this.applicationLayoutContext && mode === 'sm') {\n return;\n }\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n this.breakpoint = 'md';\n return;\n }\n if (!this.applicationLayoutContext) {\n return;\n }\n\n if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n return;\n }\n\n this.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\n }\n\n private appendFragments() {\n this.appendAboutNewsPopover();\n }\n\n private resetActiveTab() {\n this.activeTab = null;\n }\n\n private appendTabs() {\n this.activeTab = null;\n }\n\n private getAboutPopoverVerticalPosition() {\n const heightArrow = 12;\n const offsetArrow = 6;\n const rectAbout = this.aboutTab.getBoundingClientRect();\n const offset =\n window.innerHeight -\n (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n return convertToRemString(offset);\n }\n\n private appendAboutNewsPopover() {\n if (!this.aboutNewsPopover) {\n return;\n }\n\n this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n const showMore = () => {\n if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n this.toggleAbout(true);\n }\n };\n\n this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n document.body.appendChild(this.aboutNewsPopover);\n }\n }\n\n /**\n * Toggle map sidebar expand\n * @param show\n */\n @Method()\n async toggleMapExpand(show?: boolean) {\n if (show !== undefined) {\n this.mapExpand = show;\n } else {\n this.mapExpand = !this.mapExpand;\n }\n }\n\n /**\n * Toggle menu\n * @param show\n */\n @Method()\n async toggleMenu(show?: boolean) {\n if (show !== undefined) {\n this.expand = show;\n } else {\n this.expand = !this.expand;\n }\n\n if (this.aboutNewsPopover) {\n this.aboutNewsPopover.expanded = this.expand;\n }\n\n this.expandChange.emit(this.expand);\n\n this.isTransitionDisabled = false;\n this.checkTransition();\n }\n\n /**\n * Disable transition of overlay while menu animation is running.\n */\n private checkTransition() {\n const container = this.overlayContainer;\n\n if (!container) {\n return;\n }\n\n if (this.isTransitionDisabled) {\n container.style.transitionProperty = 'left';\n } else {\n container.style.transitionProperty = 'all';\n }\n }\n\n private isOverlayVisible() {\n return this.showAbout || this.showSettings;\n }\n\n /**\n * Toggle Settings tabs\n * @param show\n */\n @Method()\n async toggleSettings(show: boolean) {\n if (!this.settings) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showSettings = show;\n this.settings.show = this.showSettings;\n } else {\n this.onOverlayClose();\n }\n }\n\n /**\n * Toggle About tabs\n * @param show\n */\n @Method()\n async toggleAbout(show: boolean) {\n if (!this.about) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showAbout = show;\n this.about.show = this.showAbout;\n } else {\n this.onOverlayClose();\n }\n }\n\n private resetOverlay() {\n this.showSettings = false;\n this.showAbout = false;\n\n if (this.settings) {\n this.settings.show = false;\n }\n\n if (this.about) {\n this.about.show = false;\n }\n }\n\n private getCollapseText() {\n return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n }\n\n private getCollapseIcon() {\n return this.mapExpand ? 'navigation-left' : 'navigation-right';\n }\n\n private isMenuItemClicked(event: Event) {\n if (event.target instanceof HTMLElement) {\n return event.target.tagName === 'IX-MENU-ITEM';\n }\n\n return false;\n }\n\n @Listen('resize', { target: 'window' })\n private handleOverflowIndicator() {\n const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n this.itemsScrollShadowTop = scrollTop > 0;\n this.itemsScrollShadowBottom =\n Math.round(scrollTop + clientHeight) < scrollHeight;\n }\n\n @Listen('close')\n onOverlayClose() {\n this.animateOverlayFadeOut(() => {\n this.resetOverlay();\n });\n }\n\n private animateOverlayFadeIn() {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeInSine',\n begin: () => {\n if (this.showPinned) {\n return;\n }\n\n this.toggleMenu(false);\n },\n });\n });\n }\n\n private animateOverlayFadeOut(onComplete: Function) {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => onComplete(),\n });\n });\n }\n\n private onMenuItemsClick(event: Event) {\n if (this.isMenuItemClicked(event)) {\n if (!this.showPinned) {\n this.toggleMenu(false);\n }\n this.onOverlayClose();\n }\n }\n\n private isHiddenFromViewport() {\n return this.breakpoint === 'sm' && this.expand === false;\n }\n\n private sidebarToggle() {\n this.mapExpandChange.emit(this.mapExpand);\n\n this.hostElement.dispatchEvent(\n new ApplicationSidebarToggleEvent(this.mapExpand)\n );\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expand,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"menu\"\n >\n <aside\n class={{\n menu: true,\n expanded: this.expand,\n }}\n onClick={() => {\n this.resetActiveTab();\n }}\n >\n <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\n </div>\n\n <div\n id=\"menu-tabs\"\n style={{\n display: 'contents',\n }}\n onClick={(e) => this.onMenuItemsClick(e)}\n >\n <div class=\"tabs-top\">\n <slot name=\"home\"></slot>\n </div>\n <div class=\"tabs-shadow-container\">\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-top': true,\n 'tabs--shadow--show': this.itemsScrollShadowTop,\n }}\n ></div>\n <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n <slot></slot>\n ) : null}\n </div>\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-bottom': true,\n 'tabs--shadow--show': this.itemsScrollShadowBottom,\n }}\n ></div>\n </div>\n </div>\n <div class=\"bottom-tab-divider\"></div>\n {this.settings ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"settings\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showSettings,\n }}\n icon={'cogwheel'}\n onClick={async () => this.toggleSettings(!this.showSettings)}\n >\n {this.i18nSettings}\n </ix-menu-item>\n ) : null}\n <div onClick={(e) => this.onMenuItemsClick(e)}>\n <slot name=\"bottom\"></slot>\n </div>\n\n <div id=\"popover-area\"></div>\n {this.about ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"aboutAndLegal\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showAbout,\n }}\n icon={'info'}\n onClick={async () => this.toggleAbout(!this.showAbout)}\n >\n {this.i18nLegal}\n </ix-menu-item>\n ) : null}\n {this.enableToggleTheme ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"toggleTheme\"\n onClick={() => themeSwitcher.toggleMode()}\n class=\"internal-tab bottom-tab\"\n icon={'bulb'}\n >\n {this.i18nToggleTheme}\n </ix-menu-item>\n ) : null}\n {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"menu-collapse\"\n onClick={() => this.sidebarToggle()}\n class=\"internal-tab bottom-tab\"\n icon={`${this.getCollapseIcon()}`}\n >\n {this.getCollapseText()}\n </ix-menu-item>\n ) : null}\n </aside>\n <div\n class={{\n 'menu-overlay': true,\n visible: this.isOverlayVisible(),\n expanded: this.expand,\n }}\n onTransitionEnd={() => {\n this.isTransitionDisabled = true;\n this.checkTransition();\n }}\n >\n <div class={'menu-overlay-container'}>\n {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n </div>\n <div class={'menu-overlay-container'}>\n {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as o,F as r,H as i,g as s}from"./p-76a509c7.js";import{a as h}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as o,F as r,H as i,g as s}from"./p-76a509c7.js";import{a as h}from"./p-2fd30d79.js";const c=':host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:150ms;border-radius:1.5rem}:host .slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:150ms;border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}';const a=class{constructor(o){t(this,o);this.checkedChange=e(this,"checkedChange",7);this.checked=false;this.disabled=false;this.indeterminate=false;this.textOn="On";this.textOff="Off";this.textIndeterminate="Mixed";this.hideText=false}onCheckedChange(t){if(this.indeterminate){this.indeterminate=false}this.checked=t;this.checkedChange.emit(this.checked)}render(){return o(i,{class:{disabled:this.disabled},onClick:()=>this.onCheckedChange(!this.checked)},o("input",{disabled:this.disabled,indeterminate:this.indeterminate,checked:this.checked,role:"switch",tabindex:0,type:"checkbox","aria-checked":h(this.checked),onChange:t=>this.onCheckedChange(t.target.checked)}),o("label",{class:"switch",tabIndex:-1},o("span",{class:"slider"})),!this.hideText?o(r,null,!this.indeterminate?o("span",{class:"toggle-text","aria-hidden":h(true)},this.checked?this.textOn:this.textOff):o("span",{class:"toggle-text","aria-hidden":h(true)},this.textIndeterminate)):null)}get hostElement(){return s(this)}};a.style=c;export{a as ix_toggle};
|
|
2
|
+
//# sourceMappingURL=p-f304f7ce.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as e,h as r,F as t,H as n,g as i}from"./p-76a509c7.js";import{a as s}from"./p-810b5232.js";import{B as a}from"./p-ab452b82.js";import{b as d}from"./p-2fd30d79.js";const l=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .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}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;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)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .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}:host .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)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;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)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .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}:host .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)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;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)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .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}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;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)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .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}:host .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)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;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)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .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}:host .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)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;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)}:host{min-width:5rem}:host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .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}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;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)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .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}:host .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)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;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)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .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}:host .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)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;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)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .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}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;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)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .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}:host .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)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;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)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .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}:host .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)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;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)}:host{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;margin-right:0.25rem;max-width:15rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host li{display:contents}:host .btn{pointer-events:all;width:-moz-fit-content;width:fit-content;padding-right:0;padding-left:0.25rem}:host .chevron{pointer-events:none;margin-left:0.5rem;margin-right:0rem;color:var(--theme-color-soft-text)}:host ::slotted(a[href]){text-decoration:none !important}:host ::slotted(a[href]:active){text-decoration:none !important}:host(:last-child) .btn:not(.dropdown-trigger){color:var(--theme-color-soft-text)}:host(.hide-chevron){cursor:default}:host(.hide-chevron) .btn{padding-right:0.5rem;pointer-events:none}:host(.invisible){display:none}:host(:focus-visible){outline:none}";const b=class{constructor(r){o(this,r);this.itemClick=e(this,"itemClick",7);this.label=undefined;this.icon=undefined;this.ghost=true;this.visible=true;this.showChevron=true;this.isDropdownTrigger=false;this.a11y=undefined}componentDidLoad(){this.animationFadeIn()}componentWillLoad(){this.a11y=d(this.hostElement,["aria-describedby","aria-controls","aria-expanded"])}animationFadeIn(){s({targets:this.hostElement,duration:150,opacity:[0,1],translateX:["-100%","0%"],easing:"linear"})}render(){const o={variant:this.ghost?"primary":"secondary",outline:false,ghost:this.ghost,iconOnly:false,iconOval:false,disabled:false,icon:this.icon,iconSize:"16",loading:false,selected:false,type:"button",tabIndex:this.hostElement.tabIndex!==-1?this.hostElement.tabIndex:0,extraClasses:{"dropdown-trigger":this.isDropdownTrigger},ariaAttributes:this.a11y};if(!this.visible){return r(n,{class:"invisible"})}return r(n,{class:{"hide-chevron":!this.showChevron},onClick:()=>this.itemClick.emit(this.label)},r("li",null,r(a,Object.assign({},o,{afterContent:r(t,null,this.showChevron?r("ix-icon",{name:"chevron-right-small",size:"16",class:"chevron"}):null)}),this.label,r("slot",null))))}get hostElement(){return i(this)}};b.style=l;export{b as ix_breadcrumb_item};
|
|
2
|
+
//# sourceMappingURL=p-fa7f3eef.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["breadcrumbItemCss","BreadcrumbItem","componentDidLoad","this","animationFadeIn","componentWillLoad","a11y","a11yHostAttributes","hostElement","animejs","targets","duration","opacity","translateX","easing","render","props","variant","ghost","outline","iconOnly","iconOval","disabled","icon","iconSize","loading","selected","type","tabIndex","extraClasses","isDropdownTrigger","ariaAttributes","visible","h","Host","class","showChevron","onClick","itemClick","emit","label","BaseButton","Object","assign","afterContent","Fragment","name","size"],"sources":["./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n margin-right: 0.25rem;\n max-width: 15rem;\n min-width: 0;\n\n li {\n display: contents;\n }\n\n .btn {\n pointer-events: all;\n width: fit-content;\n padding-right: 0;\n padding-left: 0.25rem;\n }\n\n .chevron {\n pointer-events: none;\n margin-left: 0.5rem;\n margin-right: 0rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n\n ::slotted(a[href]:active) {\n text-decoration: none !important;\n }\n}\n\n:host(:last-child) {\n .btn:not(.dropdown-trigger) {\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.hide-chevron) {\n cursor: default;\n\n .btn {\n padding-right: 0.5rem;\n pointer-events: none;\n }\n}\n\n:host(.invisible) {\n display: none;\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n | '_self'\n | '_blank'\n | '_parent'\n | '_top'\n | string;\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n /**\n * Breadcrumb label\n */\n @Prop() label: string;\n\n /**\n * Icon to be displayed next ot the label\n */\n @Prop() icon: string;\n\n /**@internal */\n @Prop() ghost: boolean = true;\n\n /**@internal */\n @Prop() visible = true;\n\n /**@internal */\n @Prop() showChevron = true;\n\n /** @internal */\n @Prop() isDropdownTrigger = false;\n\n /**@internal */\n @Event() itemClick: EventEmitter<string>;\n\n @State() a11y: any;\n\n componentDidLoad() {\n this.animationFadeIn();\n }\n\n componentWillLoad() {\n this.a11y = a11yHostAttributes(this.hostElement, [\n 'aria-describedby',\n 'aria-controls',\n 'aria-expanded',\n ]);\n }\n\n animationFadeIn() {\n animejs({\n targets: this.hostElement,\n duration: 150,\n opacity: [0, 1],\n translateX: ['-100%', '0%'],\n easing: 'linear',\n });\n }\n\n render() {\n const props: BaseButtonProps = {\n variant: this.ghost ? 'primary' : 'secondary',\n outline: false,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n disabled: false,\n icon: this.icon,\n iconSize: '16',\n loading: false,\n selected: false,\n type: 'button',\n tabIndex:\n this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n extraClasses: {\n 'dropdown-trigger': this.isDropdownTrigger,\n },\n ariaAttributes: this.a11y,\n };\n\n if (!this.visible) {\n return <Host class={'invisible'}></Host>;\n }\n\n return (\n <Host\n class={{\n 'hide-chevron': !this.showChevron,\n }}\n onClick={() => this.itemClick.emit(this.label)}\n >\n <li>\n <BaseButton\n {...props}\n afterContent={\n <Fragment>\n {this.showChevron ? (\n <ix-icon\n name={'chevron-right-small'}\n size=\"16\"\n class={'chevron'}\n ></ix-icon>\n ) : null}\n </Fragment>\n }\n >\n {this.label}\n <slot></slot>\n </BaseButton>\n </li>\n </Host>\n );\n }\n}\n"],"mappings":"mLAAA,MAAMA,EAAoB,ku+B,MCoCbC,EAAc,M,kHAcA,K,aAGP,K,iBAGI,K,uBAGM,M,oBAO5BC,mBACEC,KAAKC,iB,CAGPC,oBACEF,KAAKG,KAAOC,EAAmBJ,KAAKK,YAAa,CAC/C,mBACA,gBACA,iB,CAIJJ,kBACEK,EAAQ,CACNC,QAASP,KAAKK,YACdG,SAAU,IACVC,QAAS,CAAC,EAAG,GACbC,WAAY,CAAC,QAAS,MACtBC,OAAQ,U,CAIZC,SACE,MAAMC,EAAyB,CAC7BC,QAASd,KAAKe,MAAQ,UAAY,YAClCC,QAAS,MACTD,MAAOf,KAAKe,MACZE,SAAU,MACVC,SAAU,MACVC,SAAU,MACVC,KAAMpB,KAAKoB,KACXC,SAAU,KACVC,QAAS,MACTC,SAAU,MACVC,KAAM,SACNC,SACEzB,KAAKK,YAAYoB,YAAc,EAAIzB,KAAKK,YAAYoB,SAAW,EACjEC,aAAc,CACZ,mBAAoB1B,KAAK2B,mBAE3BC,eAAgB5B,KAAKG,MAGvB,IAAKH,KAAK6B,QAAS,CACjB,OAAOC,EAACC,EAAI,CAACC,MAAO,a,CAGtB,OACEF,EAACC,EAAI,CACHC,MAAO,CACL,gBAAiBhC,KAAKiC,aAExBC,QAAS,IAAMlC,KAAKmC,UAAUC,KAAKpC,KAAKqC,QAExCP,EAAA,UACEA,EAACQ,EAAUC,OAAAC,OAAA,GACL3B,EAAK,CACT4B,aACEX,EAACY,EAAQ,KACN1C,KAAKiC,YACJH,EAAA,WACEa,KAAM,sBACNC,KAAK,KACLZ,MAAO,YAEP,QAIPhC,KAAKqC,MACNP,EAAA,e"}
|