@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/components/p-CBVGeMwV.js

@@ -0,0 +1,103 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host, F as Fragment } from './p-CtTl3_AV.js';
+import { a as anime } from './p-Ou74PMQs.js';
+import { B as BaseButton } from './p-CrQyJEVL.js';
+import { b as a11yHostAttributes } from './p-Bb7pDeaQ.js';
+import { b as iconChevronRightSmall } from './p-Dn_WjwtW.js';
+import { d as defineCustomElement$1 } from './p-DcqQbhTb.js';
+
+const breadcrumbItemCss = ":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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .icon{pointer-events:none}:host(.disabled){cursor:default}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger: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-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger: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-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}: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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .icon{pointer-events:none}: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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.itemClick = createEvent(this, "itemClick", 7);
+        /**@internal */
+        this.ghost = true;
+        /**@internal */
+        this.visible = true;
+        /**@internal */
+        this.showChevron = true;
+        /** @internal */
+        this.isDropdownTrigger = false;
+    }
+    componentDidLoad() {
+        this.animationFadeIn();
+    }
+    componentWillLoad() {
+        this.a11y = a11yHostAttributes(this.hostElement, [
+            'aria-describedby',
+            'aria-controls',
+            'aria-expanded',
+        ]);
+    }
+    animationFadeIn() {
+        anime({
+            targets: this.hostElement,
+            duration: 150,
+            opacity: [0, 1],
+            translateX: ['-100%', '0%'],
+            easing: 'linear',
+        });
+    }
+    render() {
+        const props = {
+            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 h(Host, { class: 'invisible' });
+        }
+        return (h(Host, { class: {
+                'hide-chevron': !this.showChevron,
+            }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
+    }
+    get hostElement() { return this; }
+    static get style() { return breadcrumbItemCss; }
+}, [1, "ix-breadcrumb-item", {
+        "label": [1],
+        "icon": [1],
+        "ghost": [4],
+        "visible": [4],
+        "showChevron": [4, "show-chevron"],
+        "isDropdownTrigger": [4, "is-dropdown-trigger"],
+        "a11y": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-breadcrumb-item", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-breadcrumb-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BreadcrumbItem);
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { BreadcrumbItem as B, defineCustomElement as d };
+//# sourceMappingURL=p-CBVGeMwV.js.map
+
+//# sourceMappingURL=p-CBVGeMwV.js.map

package/components/p-CBVGeMwV.js.map

@@ -0,0 +1 @@
+{"file":"p-CBVGeMwV.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,u4sCAAu4sC;;MCqCp5sC,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;;;AAmBU,QAAA,IAAK,CAAA,KAAA,GAAY,IAAI;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI;;AAGd,QAAA,IAAW,CAAA,WAAA,GAAG,IAAI;;AAGlB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAmFlC;IA5EC,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGxB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,kBAAkB;YAClB,eAAe;YACf,eAAe;AAChB,SAAA,CAAC;;IAGJ,eAAe,GAAA;AACb,QAAAC,KAAO,CAAC;YACN,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;AAC3B,YAAA,MAAM,EAAE,QAAQ;AACjB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAoB;YAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW;AAC7C,YAAA,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;AAClE,YAAA,YAAY,EAAE;gBACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;AAC3C,aAAA;YACD,cAAc,EAAE,IAAI,CAAC,IAAI;SAC1B;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,EAAC,IAAI,EAAA,EAAC,KAAK,EAAE,WAAW,GAAS;;AAG1C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;aAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAE9C,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,KAAK,EAAA,EACT,YAAY,EACV,CAAA,CAAC,QAAQ,EAAA,IAAA,EACN,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,EAAA,CAAA,EAGZ,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACF,CACV,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","animejs"],"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';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\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={iconChevronRightSmall}\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"],"version":3}

package/components/p-CDvg2uVS.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-CtTl3_AV.js';
+
+const dateTimeCardCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0 rgba(0, 0, 0, 0.1);border-radius:4px}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
+
+const DateTimeCard = /*@__PURE__*/ proxyCustomElement(class DateTimeCard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * set styles
+         */
+        this.individual = true;
+        /**
+         * Set corners style
+         */
+        this.corners = 'rounded';
+    }
+    cardClasses() {
+        var _a;
+        return {
+            card: true,
+            standaloneAppearance: (_a = this.standaloneAppearance) !== null && _a !== void 0 ? _a : this.individual,
+            rounded: this.corners === 'rounded',
+            left: this.corners === 'left',
+            right: this.corners === 'right',
+        };
+    }
+    render() {
+        return (h(Host, { key: '9310b246c56469a92bf77d955c88bb4005d6c5a1' }, h("div", { key: '041094bc9a9a9049bbcdc5f24f4987ee547bb7b0', class: this.cardClasses() }, h("div", { key: '80c76215cebf46bb7cb9cb3caf0ff74e9dc6cbda', class: "header" }, h("slot", { key: 'e1844c4fb35169db3a9077bc6dcabd260a99629f', name: "header" })), h("div", { key: '49cbbfa20d3a2e2751a974152efb03ecaa74b128', class: "separator" }), h("div", { key: '6583ffd0762ad265b6e2c8ba2a536af743669abe', class: "content" }, h("slot", { key: 'ee6202f5162c4972ee04cf548aa0e541e62f994d' })))));
+    }
+    static get style() { return dateTimeCardCss; }
+}, [1, "ix-date-time-card", {
+        "standaloneAppearance": [4, "standalone-appearance"],
+        "individual": [4],
+        "corners": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-date-time-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-date-time-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DateTimeCard);
+            }
+            break;
+    } });
+}
+
+export { DateTimeCard as D, defineCustomElement as d };
+//# sourceMappingURL=p-CDvg2uVS.js.map
+
+//# sourceMappingURL=p-CDvg2uVS.js.map

package/components/p-CDvg2uVS.js.map

@@ -0,0 +1 @@
+{"file":"p-CDvg2uVS.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g+CAAg+C;;MCqB3+C,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AASE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAElC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AA6BjD;IA3BS,WAAW,GAAA;;QACjB,OAAO;AACL,YAAA,IAAI,EAAE,IAAI;YACV,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,UAAU;AAClE,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAO,CAAA,EAE7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-CI5W8CAi.js

@@ -0,0 +1,110 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CtTl3_AV.js';
+
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
+
+const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabClick = createEvent(this, "tabClick", 7);
+        /**
+         * Set selected tab
+         */
+        this.selected = false;
+        /**
+         * Set disabled tab
+         */
+        this.disabled = false;
+        /**
+         * Set small size tab
+         */
+        this.small = false;
+        /**
+         * Set icon only tab
+         */
+        this.icon = false;
+        /**
+         * Set rounded tab
+         */
+        this.rounded = false;
+        /**
+         * Set layout width style
+         */
+        this.layout = 'auto';
+        /**
+         * Set selected placement
+         */
+        this.placement = 'bottom';
+    }
+    tabItemClasses(props) {
+        return {
+            selected: props.selected,
+            disabled: props.disabled,
+            'small-tab': props.small,
+            icon: props.small,
+            stretched: props.layout === 'stretched',
+            bottom: props.placement === 'bottom',
+            top: props.placement === 'top',
+            circle: props.circle,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'cbdfbecd0c8d59f2929fc30e19c771dc17477e9f', class: this.tabItemClasses({
+                selected: this.selected,
+                disabled: this.disabled,
+                small: this.small,
+                icon: this.icon,
+                layout: this.layout,
+                placement: this.placement,
+                circle: this.rounded,
+            }), tabIndex: 0, onClick: (event) => {
+                if (event.defaultPrevented)
+                    return;
+                const clientEvent = this.tabClick.emit({
+                    nativeEvent: event,
+                });
+                if (clientEvent.defaultPrevented) {
+                    event.stopPropagation();
+                }
+            } }, h("div", { key: 'a791bae7e669185abc5d17f590337e06969ac91b', class: {
+                circle: this.rounded,
+                text: !this.rounded,
+                selected: this.selected,
+                disabled: this.disabled,
+            } }, h("slot", { key: '4f107c1be1047b45603026cb3bb5dd9fa44ec816' })), h("div", { key: 'b0c60b8a83dbff18299be163d950f335e4806285', class: {
+                counter: true,
+                selected: this.selected,
+                hidden: !(this.rounded && this.counter !== undefined),
+                disabled: this.disabled,
+            } }, this.counter)));
+    }
+    static get style() { return tabItemCss; }
+}, [1, "ix-tab-item", {
+        "selected": [4],
+        "disabled": [4],
+        "small": [4],
+        "icon": [4],
+        "rounded": [4],
+        "counter": [2],
+        "layout": [1],
+        "placement": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-tab-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-tab-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TabItem);
+            }
+            break;
+    } });
+}
+
+export { TabItem as T, defineCustomElement as d };
+//# sourceMappingURL=p-CI5W8CAi.js.map
+
+//# sourceMappingURL=p-CI5W8CAi.js.map

package/components/p-CI5W8CAi.js.map

@@ -0,0 +1 @@
+{"file":"p-CI5W8CAi.js","mappings":";;AAAA,MAAM,UAAU,GAAG,szIAAszI;;MCoB5zI,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEpB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAyB,MAAM;AAE7C;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,QAAQ;AA8E/C;AArES,IAAA,cAAc,CAAC,KAQtB,EAAA;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;AACjB,YAAA,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;AACvC,YAAA,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;AACpC,YAAA,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,KAAI;gBAC7B,IAAI,KAAK,CAAC,gBAAgB;oBAAE;AAE5B,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrC,oBAAA,WAAW,EAAE,KAAK;AACnB,iBAAA,CAAC;AAEF,gBAAA,IAAI,WAAW,CAAC,gBAAgB,EAAE;oBAChC,KAAK,CAAC,eAAe,EAAE;;AAE3B,aAAC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,OAAO;AACpB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;gBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAEA,IAAI,CAAC,OAAO,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px $large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-pill-outline--background);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: $tiny-space;\n    padding-right: $tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  &::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  &::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: $default-space $tiny-space;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter?: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * Emitted when the tab is clicked.\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          if (event.defaultPrevented) return;\n\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-CIrU33UT.js

@@ -0,0 +1,33 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-CtTl3_AV.js';
+
+const cardContentCss = ":host{display:flex;padding:1rem;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .content-wrapper{box-sizing:border-box;height:100%;width:100%;overflow:hidden;gap:0.5rem;display:flex;flex-direction:column;align-items:flex-start}";
+
+const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: 'b158a08d7ca4779af659d4fa143e047dba41088e' }, h("div", { key: 'abd538339ad50ba6430c834eb1283c20788d78e2', class: "content-wrapper" }, h("slot", { key: '86494d2878e0cb36e417a5d5868fff7f551b4de7' }))));
+    }
+    static get style() { return cardContentCss; }
+}, [1, "ix-card-content"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-card-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-card-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardContent);
+            }
+            break;
+    } });
+}
+
+export { CardContent as C, defineCustomElement as d };
+//# sourceMappingURL=p-CIrU33UT.js.map
+
+//# sourceMappingURL=p-CIrU33UT.js.map

package/components/p-CIrU33UT.js.map

@@ -0,0 +1 @@
+{"file":"p-CIrU33UT.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+8BAA+8B;;MCUz9B,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;IACtB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 1rem;\n  height: 100%;\n  overflow: hidden;\n\n  .content-wrapper {\n    box-sizing: border-box;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    gap: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <div class=\"content-wrapper\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-CPbbOJ_i.js

@@ -0,0 +1,110 @@
+import { p as proxyCustomElement, H, r as readTask, h, F as Fragment, d as Host } from './p-CtTl3_AV.js';
+import { B as BaseButton } from './p-CrQyJEVL.js';
+import { a as closestElement, h as hasSlottedElements } from './p-Bi1VyG64.js';
+import { d as defineCustomElement$4 } from './p-jiOZu5Rs.js';
+import { d as defineCustomElement$3 } from './p-CV6yma_f.js';
+import { d as defineCustomElement$2 } from './p-DcqQbhTb.js';
+import { d as defineCustomElement$1 } from './p-C1wxjy2C.js';
+
+const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) 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;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .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(.avatar-button) .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(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .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(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .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(.avatar-button) .avatar{transform:scale(0.8)}";
+
+function DefaultAvatar(props) {
+    const { initials } = props;
+    if (initials) {
+        return h("div", { class: 'avatar-initials' }, initials);
+    }
+    return (h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))));
+}
+function AvatarImage(props) {
+    return (h("div", { class: "avatar" }, props.image ? (h("img", { src: props.image, class: "avatar-image" })) : (h(DefaultAvatar, { initials: props.initials }))));
+}
+function UserInfo(props) {
+    return (h(Fragment, null, h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, h(AvatarImage, { image: props.image, initials: props.initials }), h("div", { class: "user" }, h("div", { class: "username" }, props.userName), props.extra && (h("ix-typography", { class: "extra", "text-color": 'soft' }, props.extra))))));
+}
+const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.isClosestApplicationHeader = false;
+        this.hasSlottedElements = false;
+    }
+    componentWillLoad() {
+        const closest = closestElement('ix-application-header', this.hostElement);
+        this.isClosestApplicationHeader = closest !== null;
+    }
+    async slottedChanged() {
+        this.hasSlottedElements = hasSlottedElements(this.slotElement);
+    }
+    resolveAvatarTrigger() {
+        return new Promise((resolve, reject) => {
+            readTask(() => {
+                const button = this.hostElement.shadowRoot.querySelector('button');
+                if (button) {
+                    resolve(button);
+                }
+                else {
+                    reject(new Error('ix-avatar - trigger element not found'));
+                }
+            });
+        });
+    }
+    onDropdownClick(event) {
+        if (event.target === this.dropdownElement) {
+            event.preventDefault();
+        }
+    }
+    render() {
+        if (this.isClosestApplicationHeader) {
+            return (h(Host, { slot: "ix-application-header-avatar", class: 'avatar-button' }, h(BaseButton, { disabled: false, ghost: true, iconOval: false, icon: undefined, iconOnly: false, loading: false, outline: false, selected: false, type: "button", variant: "primary" }, h(AvatarImage, { image: this.image, initials: this.initials })), h("ix-dropdown", { ref: (ref) => (this.dropdownElement = ref), trigger: this.resolveAvatarTrigger(), class: "avatar-dropdown", onClick: (e) => this.onDropdownClick(e) }, this.username && (h(Fragment, null, h(UserInfo, { extra: this.extra, image: this.image, initials: this.initials, userName: this.username }), this.hasSlottedElements && (h("ix-divider", { onClick: (e) => e.preventDefault() })))), h("slot", { onSlotchange: () => this.slottedChanged(), ref: (ref) => (this.slotElement = ref) }))));
+        }
+        return (h(Host, null, h(AvatarImage, { image: this.image, initials: this.initials })));
+    }
+    get hostElement() { return this; }
+    static get style() { return avatarCss; }
+}, [1, "ix-avatar", {
+        "image": [1],
+        "initials": [1],
+        "username": [1],
+        "extra": [1],
+        "isClosestApplicationHeader": [32],
+        "hasSlottedElements": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-avatar", "ix-divider", "ix-dropdown", "ix-spinner", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Avatar);
+            }
+            break;
+        case "ix-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Avatar as A, defineCustomElement as d };
+//# sourceMappingURL=p-CPbbOJ_i.js.map
+
+//# sourceMappingURL=p-CPbbOJ_i.js.map

package/components/p-CPbbOJ_i.js.map

@@ -0,0 +1 @@
+{"file":"p-CPbbOJ_i.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,qpIAAqpI;;ACsBvqI,SAAS,aAAa,CAAC,KAA4B,EAAA;AACjD,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK;IAE1B,IAAI,QAAQ,EAAE;AACZ,QAAA,OAAO,WAAK,KAAK,EAAE,iBAAiB,EAAG,EAAA,QAAQ,CAAO;;AAGxD,IAAA,QACE,WACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EAAA,EAEnB,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAA,WAAA,EAAW,SAAS,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,EACnE,CAAA,EACF,CACE,CAAA,MAAA,EAAA,EAAA,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,EAClE,CAAA,CACA,CACA;AAEV;AAEA,SAAS,WAAW,CAAC,KAA4C,EAAA;IAC/D,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAChB,KAAK,CAAC,KAAK,IACV,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,EAAO,CAAA,KAElD,CAAC,CAAA,aAAa,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC5C,CACG;AAEV;AAEA,SAAS,QAAQ,CAAC,KAKjB,EAAA;IACC,QACE,EAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE,EAAA,EAC/D,CAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAI,CAAA,EAC7D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,UAAU,IAAE,KAAK,CAAC,QAAQ,CAAO,EAC3C,KAAK,CAAC,KAAK,KACV,qBAAe,KAAK,EAAC,OAAO,EAAa,YAAA,EAAA,MAAM,IAC5C,KAAK,CAAC,KAAK,CACE,CACjB,CACG,CACF,CACG;AAEf;MAUa,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,GAAA;;;;AAoCW,QAAA,IAA0B,CAAA,0BAAA,GAAG,KAAK;AAClC,QAAA,IAAkB,CAAA,kBAAA,GAAG,KAAK;AAqFpC;IAhFC,iBAAiB,GAAA;QACf,MAAM,OAAO,GAAG,cAAc,CAAC,uBAAuB,EAAE,IAAI,CAAC,WAAW,CAAC;AACzE,QAAA,IAAI,CAAC,0BAA0B,GAAG,OAAO,KAAK,IAAI;;AAG5C,IAAA,MAAM,cAAc,GAAA;QAC1B,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGxD,oBAAoB,GAAA;QAC1B,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO,EAAE,MAAM,KAAI;YAClD,QAAQ,CAAC,MAAK;AACZ,gBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAC;gBACnE,IAAI,MAAM,EAAE;oBACV,OAAO,CAAC,MAAM,CAAC;;qBACV;AACL,oBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;;AAE9D,aAAC,CAAC;AACJ,SAAC,CAAC;;AAGI,IAAA,eAAe,CAAC,KAAiB,EAAA;QACvC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,eAAe,EAAE;YACzC,KAAK,CAAC,cAAc,EAAE;;;IAI1B,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,0BAA0B,EAAE;YACnC,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,8BAA8B,EAAC,KAAK,EAAE,eAAe,EAAA,EAC9D,CAAA,CAAC,UAAU,EACT,EAAA,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,KAAK,EACf,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EAAA,EAEjB,CAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,EACb,CAAA,CAAA,aAAA,EAAA,EACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,eAAe,GAAG,GAA4B,CAAC,EACnE,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACpC,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAA,EAEtC,IAAI,CAAC,QAAQ,KACZ,EAAC,QAAQ,EAAA,IAAA,EACP,CAAC,CAAA,QAAQ,EACP,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA,EACD,IAAI,CAAC,kBAAkB,KACtB,CAAY,CAAA,YAAA,EAAA,EAAA,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,EAAe,CAAA,CAC9D,CACQ,CACZ,EACD,CAAA,CAAA,MAAA,EAAA,EACE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACzC,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,WAAW,GAAG,GAAsB,CAAC,EACnD,CAAA,CACI,CACT;;QAIX,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAC,WAAW,EAAC,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n@import 'mixins/scrollbar';\n\n:host {\n  @include scrollbar();\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill:var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    @include btn-base;\n    padding: 0px;\n\n    border-radius: 100px !important;\n  }\n\n  @include btn-base-variant('invisible-primary', false);\n\n  .avatar {\n    transform: scale(0.8);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(props: { image?: string; initials?: string }) {\n  return (\n    <div class=\"avatar\">\n      {props.image ? (\n        <img src={props.image} class=\"avatar-image\"></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} />\n      )}\n    </div>\n  );\n}\n\nfunction UserInfo(props: {\n  image?: string;\n  initials?: string;\n  userName: string;\n  extra?: string;\n}) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage image={props.image} initials={props.initials} />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" text-color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement!: HTMLIxAvatarElement;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials?: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() username?: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() extra?: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement?: HTMLSlotElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private async slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve, reject) => {\n      readTask(() => {\n        const button = this.hostElement.shadowRoot!.querySelector('button');\n        if (button) {\n          resolve(button);\n        } else {\n          reject(new Error('ix-avatar - trigger element not found'));\n        }\n      });\n    });\n  }\n\n  private onDropdownClick(event: MouseEvent) {\n    if (event.target === this.dropdownElement) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            ghost={true}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            outline={false}\n            selected={false}\n            type=\"button\"\n            variant=\"primary\"\n          >\n            <AvatarImage image={this.image} initials={this.initials} />\n          </BaseButton>\n          <ix-dropdown\n            ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n            onClick={(e) => this.onDropdownClick(e)}\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                />\n                {this.hasSlottedElements && (\n                  <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n                )}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <AvatarImage image={this.image} initials={this.initials} />\n      </Host>\n    );\n  }\n}\n"],"version":3}