@siemens/ix 2.6.0 → 2.7.0

package/components/ix-checkbox.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { H as HookValidationLifecycle } from './validation.js';
 import { m as makeRef } from './make-ref.js';
+import { a as a11yBoolean } from './a11y.js';
 import { d as defineCustomElement$2 } from './typography.js';
 
-const checkboxCss = ":host{--ix-checkbox-check-color:var(--theme-color-primary--contrast);display:inline-block;position:relative}: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;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;margin-right:0.5rem}:host button:disabled{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-checkbox--focus--outline-offset)}:host input[type=checkbox]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host ix-typography{margin-top:0.125rem}:host button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.checked) button,:host(.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.checked:hover) button,:host(.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.checked:active) button,:host(.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(:disabled) button,:host(.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.checked:disabled) button,:host(.checked.disabled) button,:host(.indeterminate:disabled) button,:host(.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-info) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--info);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--info--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--info--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--info);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--info--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--info--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--info);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--info--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--info--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--info);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--info--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--info--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--info);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--info--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--info--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--info);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--info--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--info--active);background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-info:disabled) button,:host(.ix-info.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-info.checked:disabled) button,:host(.ix-info.checked.disabled) button,:host(.ix-info.indeterminate:disabled) button,:host(.ix-info.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-warning) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--warning);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--warning--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--warning--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--warning);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--warning--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--warning--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--warning);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--warning--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--warning--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--warning);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--warning--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--warning--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--warning);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--warning--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--warning--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--warning);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--warning--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--warning--active);background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-warning:disabled) button,:host(.ix-warning.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-warning.checked:disabled) button,:host(.ix-warning.checked.disabled) button,:host(.ix-warning.indeterminate:disabled) button,:host(.ix-warning.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid--required) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--invalid);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--invalid--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--invalid--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--invalid);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--invalid--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--invalid--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--invalid);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--invalid--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--invalid--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--invalid);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--invalid--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--invalid--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--invalid);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--invalid--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--invalid--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--invalid);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--invalid--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--invalid--active);background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid--required:disabled) button,:host(.ix-invalid--required.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked:disabled) button,:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required.indeterminate:disabled) button,:host(.ix-invalid--required.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--invalid);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--invalid--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--invalid--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--invalid);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--invalid--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--invalid--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--invalid);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--invalid--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--invalid--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--invalid);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--invalid--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--invalid--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--invalid);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--invalid--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--invalid--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--invalid);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--invalid--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--invalid--active);background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid:disabled) button,:host(.ix-invalid.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid.checked:disabled) button,:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid.indeterminate:disabled) button,:host(.ix-invalid.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(:disabled),:host(.disabled){pointer-events:none}:host(:disabled) button,:host(:disabled) label,:host(:disabled) input,:host(.disabled) button,:host(.disabled) label,:host(.disabled) input{pointer-events:none}";
+const checkboxCss = ":host{--ix-checkbox-check-color:var(--theme-color-primary--contrast);display:inline-block;position:relative}: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;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;margin-right:0.5rem}:host button:disabled{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-checkbox--focus--outline-offset)}:host input[type=checkbox]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host ix-typography{margin-top:0.125rem}:host button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.checked) button,:host(.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.checked:hover) button,:host(.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.checked:active) button,:host(.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.checked.disabled) button,:host(.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-info) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--info\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--info--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--info--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--info\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--info--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--info--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--info\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--info--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--info--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--info\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--info--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--info--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--info\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--info--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--info--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--info\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--info--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--info--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-info.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) button,:host(.ix-info.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-warning) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--warning\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--warning--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--warning--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--warning\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--warning--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--warning--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--warning\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--warning--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--warning--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--warning\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--warning--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--warning--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--warning\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--warning--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--warning--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--warning\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--warning--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--warning--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-warning.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) button,:host(.ix-warning.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid--required) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid--required.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.disabled){pointer-events:none}:host(.disabled) button,:host(.disabled) label,:host(.disabled) input{pointer-events:none}";
 const IxCheckboxStyle0 = checkboxCss;
 
 /*
@@ -85,13 +86,13 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '2b7e1abca080e177d16c5b4a38e6a6da3d43a934', "aria-checked": `${this.checked}`, "aria-disabled": `${this.disabled}`, role: "checkbox", class: {
+        return (h(Host, { key: '9f2dfb28e104211b4c74190ce34782e927c359be', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
                 disabled: this.disabled,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            } }, h("label", { key: '22875af8489648471425485045e0d4833c942a2e' }, h("input", { key: 'd3a8ea36c89114bec173f48d777c0cc9b7b4beea', "aria-checked": `${this.checked}`, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: 'a013746af7808d088de26dfad03bdb38ed47b879', disabled: this.disabled, class: {
+            } }, h("label", { key: 'f5e2ae66239974ec5f91c1898b3c82a8efc06178' }, h("input", { key: '465622f5215ebb9bf62f7d6a44adfd55dbeb251a', "aria-checked": a11yBoolean(this.checked), disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: '3e16d5cb70ecdb1c46f3ec05d87708dce31cc32a', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: '57871c7f84a4bdf917e3f833063bac1881412b64', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '7273efd58eaf8fcadd8d30184ef817659e23f476' })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: 'a525f43a85e83bb23ddb204afa2b5600a0441c2d', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '531c5b1a6bb0748e59e378c898de733cc13da0c5' })))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return this; }

package/components/ix-checkbox.js.map

@@ -1 +1 @@
-{"file":"ix-checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=ix-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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  --ix-checkbox-check-color: var(--theme-color-primary--contrast);\n\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  button {\n    all: unset;\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    margin-right: 0.5rem;\n  }\n\n  button:disabled {\n    background-color: var(--theme-checkbox-unchecked--background--disabled);\n    border: var(--theme-checkbox--border-thickness) solid\n      var(--theme-checkbox-unchecked--border-color--disabled);\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-checkbox--focus--outline-offset);\n  }\n\n  input[type=\"checkbox\"] {\n    display: none;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-typography {\n    margin-top: 0.125rem;\n  }\n}\n\n@mixin checkbox-base() {\n  :host {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host(.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host(.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host(.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(:disabled),\n  :host(.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked:disabled),\n  :host(.checked.disabled),\n  :host(.indeterminate:disabled),\n  :host(.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin checkbox-variant($selector) {\n  :host(#{$selector}) {\n    button {\n      @content;\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}:disabled),\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked:disabled),\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}.indeterminate:disabled),\n  :host(#{$selector}.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-checkbox-vars($state, $type) {\n  --theme-checkbox-#{$state}--background: var(--theme-checkbox-#{$state}--background--#{$type});\n  --theme-checkbox-#{$state}--background--hover: var(--theme-checkbox-#{$state}--background--#{$type}--hover);\n  --theme-checkbox-#{$state}--background--active: var(--theme-checkbox-#{$state}--background--#{$type}--active);\n\n  --theme-checkbox-#{$state}--border-color: var(--theme-checkbox-#{$state}--border-color--#{$type});\n  --theme-checkbox-#{$state}--border-color--hover: var(--theme-checkbox-#{$state}--border-color--#{$type}--hover);\n  --theme-checkbox-#{$state}--border-color--active: var(--theme-checkbox-#{$state}--border-color--#{$type}--active);\n}\n\n@include checkbox-base();\n@include checkbox-variant(\n  $selector: '.ix-info',\n) {\n  @include define-checkbox-vars('unchecked', 'info');\n  @include define-checkbox-vars('checked', 'info');\n  @include define-checkbox-vars('mixed', 'info');\n}\n\n@include checkbox-variant(\n  $selector: '.ix-warning',\n) {\n  @include define-checkbox-vars('unchecked', 'warning');\n  @include define-checkbox-vars('checked', 'warning');\n  @include define-checkbox-vars('mixed', 'warning');\n}\n\n@include checkbox-variant(\n  $selector: '.ix-invalid--required',\n) {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n@include checkbox-variant(\n  $selector: '.ix-invalid',\n) {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n:host(:disabled),\n:host(.disabled) {\n  pointer-events: none;\n\n  button,\n  label,\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Element,\n  Method,\n} from '@stencil/core';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxCheckboxElement;\n\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Label for the checkbox component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Checked state of the checkbox component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Disabled state of the checkbox component\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Indeterminate state of the checkbox component\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Event emitted when the checked state of the checkbox changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the checkbox changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n    checkboxRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  @Watch('checked')\n  onCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  private renderCheckmark() {\n    if (this.checked) {\n      return (\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n            stroke=\"var(--ix-checkbox-check-color)\"\n            stroke-width=\"2\"\n          />\n        </svg>\n      );\n    }\n\n    if (this.indeterminate) {\n      return (\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n          <rect\n            x=\"3\"\n            y=\"8\"\n            width=\"12\"\n            height=\"2\"\n            fill=\"var(--ix-checkbox-check-color)\"\n          />\n        </svg>\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={`${this.checked}`}\n        aria-disabled={`${this.disabled}`}\n        role=\"checkbox\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate,\n        }}\n      >\n        <label>\n          <input\n            aria-checked={`${this.checked}`}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"checkbox\"\n            onChange={() => this.setCheckedState(!this.checked)}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.renderCheckmark()}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=ix-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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  --ix-checkbox-check-color: var(--theme-color-primary--contrast);\n\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  button {\n    all: unset;\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    margin-right: 0.5rem;\n  }\n\n  button:disabled {\n    background-color: var(--theme-checkbox-unchecked--background--disabled);\n    border: var(--theme-checkbox--border-thickness) solid\n      var(--theme-checkbox-unchecked--border-color--disabled);\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-checkbox--focus--outline-offset);\n  }\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-typography {\n    margin-top: 0.125rem;\n  }\n}\n\n@mixin checkbox-base() {\n  :host {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host(.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host(.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host(.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked.disabled),\n  :host(.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin checkbox-variant($selector) {\n  :host(#{$selector}) {\n    button {\n      @content;\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-checkbox-vars($state, $type) {\n  --theme-checkbox-#{$state}--background: var(\n    --theme-checkbox-#{$state}--background--#{$type}\n  );\n  --theme-checkbox-#{$state}--background--hover: var(\n    --theme-checkbox-#{$state}--background--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--background--active: var(\n    --theme-checkbox-#{$state}--background--#{$type}--active\n  );\n\n  --theme-checkbox-#{$state}--border-color: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}\n  );\n  --theme-checkbox-#{$state}--border-color--hover: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--border-color--active: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include checkbox-base();\n@include checkbox-variant($selector: '.ix-info') {\n  @include define-checkbox-vars('unchecked', 'info');\n  @include define-checkbox-vars('checked', 'info');\n  @include define-checkbox-vars('mixed', 'info');\n}\n\n@include checkbox-variant($selector: '.ix-warning') {\n  @include define-checkbox-vars('unchecked', 'warning');\n  @include define-checkbox-vars('checked', 'warning');\n  @include define-checkbox-vars('mixed', 'warning');\n}\n\n@include checkbox-variant($selector: '.ix-invalid--required') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n@include checkbox-variant($selector: '.ix-invalid') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  button,\n  label,\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Element,\n  Method,\n} from '@stencil/core';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxCheckboxElement;\n\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Label for the checkbox component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Checked state of the checkbox component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Disabled state of the checkbox component\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Indeterminate state of the checkbox component\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Event emitted when the checked state of the checkbox changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the checkbox changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n    checkboxRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  @Watch('checked')\n  onCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  private renderCheckmark() {\n    if (this.checked) {\n      return (\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n            stroke=\"var(--ix-checkbox-check-color)\"\n            stroke-width=\"2\"\n          />\n        </svg>\n      );\n    }\n\n    if (this.indeterminate) {\n      return (\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n          <rect\n            x=\"3\"\n            y=\"8\"\n            width=\"12\"\n            height=\"2\"\n            fill=\"var(--ix-checkbox-check-color)\"\n          />\n        </svg>\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"checkbox\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate,\n        }}\n      >\n        <label>\n          <input\n            aria-checked={a11yBoolean(this.checked)}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"checkbox\"\n            onChange={() => this.setCheckedState(!this.checked)}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.renderCheckmark()}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-chip.js

@@ -39,11 +39,11 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '78707bdc8237c0c42c0b06619252b8bcc3c76c93', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        return (h(Host, { key: '8828e86173edb2fd394b6ef3f3ad72e6f195357d', tabIndex: "-1", title: this.hostElement.textContent, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.chipColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {} }, h("div", { key: '7b4f1f24b5cbf433a1a4dfeb70842a90f80e465f', style: Object.assign({}, customStyle), class: {
+                : {} }, h("div", { key: '4260ced6a9b756468acb9806474c2035b98e9dcc', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -57,12 +57,12 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: 'd3c9f18794fb6be415daf55328392facbd9abce9', class: {
+            } }, h("ix-icon", { key: '561bdadfa0eda55b25ac61788417fd7545652d46', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: '5400c34a7f21b6a822b470f2e95acae1c59d3d48', class: "slot-container" }, h("slot", { key: '1f874b0145ed5d81373eead0f2b19f0e5306e716' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
+            }, name: this.icon, size: '24' }), h("span", { key: '6b4454a2e6bd160923c89382c8da334e27f6f2df', class: "slot-container" }, h("slot", { key: 'a18be9b41aa18f17343586fed0e4f31bbe1037c5' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
     }
-    get el() { return this; }
+    get hostElement() { return this; }
     static get style() { return IxChipStyle0; }
 }, [1, "ix-chip", {
         "variant": [513],

package/components/ix-chip.js.map

@@ -1 +1 @@
-{"file":"ix-chip.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,s6XAAs6X,CAAC;AACv7X,qBAAe,OAAO;;MCuBT,IAAI;;;;;;uBAcA,SAAS;sBAMP,IAAI;wBAKF,KAAK;;;;;uBA+BN,KAAK;;IASf,cAAc;;QACpB,QACE,WAAK,KAAK,EAAC,wBAAwB,IACjC,sBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,cAAc,EACpB,IAAI,QACJ,IAAI,EAAC,IAAI,EACT,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,EAAE;kBACvC,EAAE,EAER,KAAK,QACL,OAAO,EAAE,CAAC,KAAK;gBACb,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB,GACe,CACd,EACN;KACH;IAED,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC;QAEzC,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QAED,QACE,EAAC,IAAI,qDACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,IAGR,4DACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAED,gEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;aACnB,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAa,CACR,EACN,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CACjE,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/chip/chip.scss?tag=ix-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import './chip-mixin';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 2rem;\n  max-height: 2rem;\n  margin-left: $tiny-space;\n}\n\n:host(.inactive) {\n  pointer-events: none;\n}\n\n@include chip-container;\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  shadow: true,\n})\nexport class Chip {\n  @Element() el: HTMLIxChipElement;\n\n  /**\n   * Chip variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Custom background color.\n   * Only has an effect on chips with `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font and icon color.\n   * Only has an effect on chips with `variant='custom'`\n   *\n   * @deprecated since 2.1.0 use `chip-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string | undefined;\n\n  /**\n   * Custom font and icon color.\n   * Only has an effect on chips with `variant='custom'`\n   */\n  @Prop() chipColor: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Fire event if close button is clicked\n   *\n   * @since 1.5.0\n   */\n  @Event() closeChip: EventEmitter;\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <ix-icon-button\n          type=\"button\"\n          variant=\"secondary\"\n          icon={'close-small'}\n          class=\"close-button\"\n          oval\n          size=\"16\"\n          style={\n            this.variant === 'custom'\n              ? { color: this.chipColor ?? this.color }\n              : {}\n          }\n          ghost\n          onClick={(event) => {\n            this.closeChip.emit(event);\n            event.stopPropagation();\n          }}\n        ></ix-icon-button>\n      </div>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.chipColor ?? this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n\n    return (\n      <Host\n        tabIndex=\"-1\"\n        title={this.el.textContent}\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.chipColor ?? this.color,\n              }\n            : {}\n        }\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: isInactive,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: this.closable,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: !this.icon,\n            }}\n            name={this.icon}\n            size={'24'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n          {isInactive === false && this.closable ? this.getCloseButton() : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-chip.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,s6XAAs6X,CAAC;AACv7X,qBAAe,OAAO;;MCuBT,IAAI;;;;;;uBAcA,SAAS;sBAMP,IAAI;wBAKF,KAAK;;;;;uBA+BN,KAAK;;IASf,cAAc;;QACpB,QACE,WAAK,KAAK,EAAC,wBAAwB,IACjC,sBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,cAAc,EACpB,IAAI,QACJ,IAAI,EAAC,IAAI,EACT,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,EAAE;kBACvC,EAAE,EAER,KAAK,QACL,OAAO,EAAE,CAAC,KAAK;gBACb,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB,GACe,CACd,EACN;KACH;IAED,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC;QAEzC,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QAED,QACE,EAAC,IAAI,qDACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,WAAW,EACnC,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,IAGR,4DACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAED,gEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;aACnB,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAa,CACR,EACN,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CACjE,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/chip/chip.scss?tag=ix-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import './chip-mixin';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 2rem;\n  max-height: 2rem;\n  margin-left: $tiny-space;\n}\n\n:host(.inactive) {\n  pointer-events: none;\n}\n\n@include chip-container;\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  shadow: true,\n})\nexport class Chip {\n  @Element() hostElement!: HTMLIxChipElement;\n\n  /**\n   * Chip variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Custom background color.\n   * Only has an effect on chips with `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font and icon color.\n   * Only has an effect on chips with `variant='custom'`\n   *\n   * @deprecated since 2.1.0 use `chip-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string | undefined;\n\n  /**\n   * Custom font and icon color.\n   * Only has an effect on chips with `variant='custom'`\n   */\n  @Prop() chipColor: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Fire event if close button is clicked\n   *\n   * @since 1.5.0\n   */\n  @Event() closeChip!: EventEmitter;\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <ix-icon-button\n          type=\"button\"\n          variant=\"secondary\"\n          icon={'close-small'}\n          class=\"close-button\"\n          oval\n          size=\"16\"\n          style={\n            this.variant === 'custom'\n              ? { color: this.chipColor ?? this.color }\n              : {}\n          }\n          ghost\n          onClick={(event) => {\n            this.closeChip.emit(event);\n            event.stopPropagation();\n          }}\n        ></ix-icon-button>\n      </div>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.chipColor ?? this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n\n    return (\n      <Host\n        tabIndex=\"-1\"\n        title={this.hostElement.textContent}\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.chipColor ?? this.color,\n              }\n            : {}\n        }\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: isInactive,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: this.closable,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: !this.icon,\n            }}\n            name={this.icon}\n            size={'24'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n          {isInactive === false && this.closable ? this.getCloseButton() : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-content.js

@@ -15,12 +15,12 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: 'd507034393e0da4a209198ee007bcbda9d949acf' }, h("div", { key: 'be4b20dad2d73b80dbdbd7720e608fcc063ae227', class: {
+        return (h(Host, { key: '5ff3dde4c94bd5f40598a6b8fc9043ab2755c9a7' }, h("div", { key: 'cb2d5d8d011649e5f2cb67d8b7857b7bd096ca44', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '7053f639f4f42fdad91e82e6cd78022d703d7097', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: '1a0c6b612ff4364e6bdd10b15745160925b61efd', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '2a9e27c0685f5dd52a848764e937af1cc06b50d7', class: "content" }, h("slot", { key: '302af1dd73eda0b3b990545e986ed8c1b3182236' }))));
+            } })), h("div", { key: '5eabaf6bcd0c33d982bd1b88862873383b58fae6', class: "content" }, h("slot", { key: '25fa713021e9c01c08282da185c2fc14b6d06b3f' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxContentStyle0; }

package/components/ix-css-grid-item.js

@@ -13,7 +13,7 @@ const CssGridItem = /*@__PURE__*/ proxyCustomElement(class CssGridItem extends H
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: 'c613f8ec7d3ad26ebc21c4f96fe4f11a0a76f2cb', style: style }, h("slot", { key: '4e16707e1177f5800f457f84127601aa6aae9f3b' })));
+        return (h(Host, { key: 'bc5b71e095a35738800e7b95baca2c4a7874205e', style: style }, h("slot", { key: 'dd2a9bc3a5eecc1d539820a72dd9de51e5466923' })));
     }
     static get style() { return IxCssGridItemStyle0; }
 }, [1, "ix-css-grid-item", {

package/components/ix-css-grid-item.js.map

@@ -1 +1 @@
-{"file":"ix-css-grid-item.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kFAAkF,CAAC;AAC1G,4BAAe,cAAc;;MCkBhB,WAAW;;;;;;;IAMtB,MAAM;QACJ,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAEnC,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK,IAChB,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/css-grid/css-grid-item.scss?tag=ix-css-grid-item&encapsulation=shadow","src/components/css-grid/css-grid-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:host {\n  display: block;\n  position: relative;\n\n  ::slotted(*) {\n    height: 100%;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-css-grid-item',\n  styleUrl: 'css-grid-item.scss',\n  shadow: true,\n})\nexport class CssGridItem {\n  /**\n   * Grid item name\n   */\n  @Prop() itemName: string;\n\n  render() {\n    const style = {};\n    style['grid-area'] = this.itemName;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-css-grid-item.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kFAAkF,CAAC;AAC1G,4BAAe,cAAc;;MCkBhB,WAAW;;;;;;;IAMtB,MAAM;QACJ,MAAM,KAAK,GAA2B,EAAE,CAAC;QACzC,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAEnC,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK,IAChB,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/css-grid/css-grid-item.scss?tag=ix-css-grid-item&encapsulation=shadow","src/components/css-grid/css-grid-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:host {\n  display: block;\n  position: relative;\n\n  ::slotted(*) {\n    height: 100%;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-css-grid-item',\n  styleUrl: 'css-grid-item.scss',\n  shadow: true,\n})\nexport class CssGridItem {\n  /**\n   * Grid item name\n   */\n  @Prop() itemName!: string;\n\n  render() {\n    const style: Record<string, string> = {};\n    style['grid-area'] = this.itemName;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-custom-field.js

@@ -51,7 +51,7 @@ const CustomField = /*@__PURE__*/ proxyCustomElement(class CustomField extends H
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: 'ee9ed8e36ffa3f55295e0e4fda3d2b1acb90c2e3' }, h("ix-field-wrapper", { key: '19cfaca80d58b6aa2b9d8a29e33777f4be9b238a', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: 'b3e5d6efbfa3279de1e0ffe2d9322ac14c985911' }))));
+        return (h(Host, { key: 'bb181d52fe217d477896a57dec475edcc6b6e5df' }, h("ix-field-wrapper", { key: '3a164633b9955fbd86efefdaa9926b61dc45d39f', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: 'd9b814b0f59dbc837443826bb5513172aba0b0a3' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxCustomFieldStyle0; }

package/components/ix-date-dropdown.js

@@ -31,6 +31,10 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
         this.minDate = '';
         this.maxDate = '';
         this.dateRangeId = 'custom';
+        this.variant = 'primary';
+        this.outline = false;
+        this.ghost = false;
+        this.loading = false;
         this.customRangeAllowed = true;
         this.dateRangeOptions = [];
         this.locale = undefined;
@@ -39,7 +43,7 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
         this.i18nDone = 'Done';
         this.i18nNoRange = 'No range set';
         this.today = DateTime_1.now().toISO();
-        this.selectedDateRangeId = undefined;
+        this.selectedDateRangeId = '';
         this.currentRangeValue = undefined;
     }
     onDateRangeIdChange() {
@@ -148,21 +152,21 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '2d701ae652e6a2d69bc662cd9e18edff90f72edd' }, h("ix-button", { key: 'e5b0982166e57ef0beb50dcbc1980ccc35a0c450', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: "primary", icon: "history", ref: this.triggerRef, disabled: this.disabled }, this.getButtonLabel()), h("ix-dropdown", { key: '8557bc89aaf87e603fe776c261a9292e0efed772', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+        return (h(Host, { key: 'b4d969756a441b41db705ed2e0e3c869923df58a' }, h("ix-button", { key: 'aa79503137737514e6c3ff00a89beebdc6020600', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, ghost: this.ghost, outline: this.outline, loading: this.loading, icon: "history", ref: this.triggerRef, disabled: this.disabled }, this.getButtonLabel()), h("ix-dropdown", { key: 'e812b148194e5c0d28137b1f9acae0be678c37da', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
                 if (!show &&
                     this.selectedDateRangeId === 'custom' &&
                     this.datePickerTouched &&
                     this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, h("ix-layout-grid", { key: 'dd9eb5b7f91bd61ec735e52f00ded59e02f5493d', "no-margin": "true" }, h("ix-row", { key: 'ab39a5e672e4fdf432651c0c51bb703a3bb2b05a' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { key: '9414368bad83465b5fa64837f0571c0995649d63', class: {
+            } }, h("ix-layout-grid", { key: 'bd671f13b233e9286a707895622c77350b54f993', "no-margin": "true" }, h("ix-row", { key: 'f4f88f2b7c70afc88968aa3ccaf635dc5d011c09' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { key: '4509fe366560787efcef157279900475640a7d1c', class: {
                 'no-margin': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: 'd35bd95d8fb119e56adfb52c57878c0561ef42db', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: 'df5fc3f68fcbfb612d66fe96d26efab3ff0ef268', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: '7a2652405ac4bc9d7d4b27e53d451b307dcbfbd2', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, { key: '474c990aa37777ae4f13b9e3ee9a7646741c97a2' }, h("ix-date-picker", { key: 'd02653d8ee654f2d2d65bcfb35c6b69977b7cda2', standaloneAppearance: false, locale: this.locale, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: '25ebfe04bab64152ce9c901a7899e95964891b8a', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: '9ea2297749b7c20743e592129e3c03a6c96ae3dc', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: 'de1b089479091b6daf75a3c575dbfc14b378b808', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, { key: 'ff476d3ea38df74580130098b3ae1a46b2e4f99c' }, h("ix-date-picker", { key: 'b45fba5a5fdf01f2bdbe774f1123012b98eeb2ab', standaloneAppearance: false, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
                 this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex }), h("div", { key: 'a9e297c52708e1d4ff682579c98909fb79adab31', class: "pull-right" }, h("ix-button", { key: '657fe51f463e6ff9b622f227ced97f3f0ec8da31', onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex }), h("div", { key: '66e6a835d23b3308df952ad924fc8a095893a9e9', class: "pull-right" }, h("ix-button", { key: 'facd509b601f962bcca5e8363320ce392dd9e582', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
@@ -186,6 +190,10 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
         "minDate": [1, "min-date"],
         "maxDate": [1, "max-date"],
         "dateRangeId": [1, "date-range-id"],
+        "variant": [1],
+        "outline": [4],
+        "ghost": [4],
+        "loading": [4],
         "customRangeAllowed": [4, "custom-range-allowed"],
         "dateRangeOptions": [16],
         "locale": [1],

package/components/ix-date-dropdown.js.map

@@ -1 +1 @@
-{"file":"ix-date-dropdown.js","mappings":"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","names":["DateTime"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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  display: inline-block;\n  position: relative;\n\n  @media (max-width: 48em) {\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  @media (min-width: 48em) {\n    .border-right {\n      border-right: var(--theme-x-weak-bdr-2);\n    }\n  }\n\n  ix-button {\n    width: 100%;\n  }\n\n  .max-height {\n    max-height: max-content;\n  }\n\n  .no-margin {\n    margin: 0;\n    padding: 0;\n  }\n\n  .pull-right {\n    float: right;\n    padding: 0 $default-space $medium-space $default-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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { type LiteralStringUnion } from '../utils/type-helper';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport { makeRef } from '../utils/make-ref';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown implements Omit<IxDatePickerComponent, 'corners'> {\n  @Element() hostElement!: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from = '';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to = '';\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    if (!this.currentRangeValue) {\n      return;\n    }\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.6.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event()\n  private readonly dateRangeChange!: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: LiteralStringUnion<'custom'>;\n  @State() private currentRangeValue?: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  private readonly triggerRef = makeRef<HTMLElement>();\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue || { id: '', from: '', to: '' };\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id) && this.currentRangeValue) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n\n    if (dropdown) {\n      dropdown.show = false;\n    }\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant=\"primary\"\n          icon=\"history\"\n          ref={this.triggerRef}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef.waitForCurrent()}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched &&\n              this.currentRangeValue\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      locale={this.locale}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                      weekStartIndex={this.weekStartIndex}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          if (this.currentRangeValue) {\n                            this.onDateSelect(this.currentRangeValue);\n                          }\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-date-dropdown.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,8oCAA8oC,CAAC;AACvqC,6BAAe,eAAe;;MCiDjB,YAAY;;;;;;QA8KN,eAAU,GAAG,OAAO,EAAe,CAAC;QAS7C,sBAAiB,GAAG,KAAK,CAAC;wBA3Kf,KAAK;sBAMP,YAAY;qBAKb,IAAI;oBAQL,EAAE;kBAQJ,EAAE;uBAMG,EAAE;uBAMF,EAAE;2BAME,QAAQ;uBAKG,SAAS;uBAKxB,KAAK;qBAKP,KAAK;uBAKM,KAAK;kCA0BH,IAAI;gCAegB,EAAE;;8BAqB1B,CAAC;8BAKgC,WAAW;wBAKxB,MAAM;2BAKC,cAAc;qBAGlDA,UAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE;mCAW+B,EAAE;;;IAtFvE,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE7C,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI;YACjC,EAAE,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAAE;YAC7B,EAAE,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAAE;SAC9B,CAAC,CAAC;KACJ;IAyBD,wBAAwB;QACtB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAqDD,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAID,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC9C;;;;;IAOM,MAAM,YAAY;QACvB,OAAO,IAAI,CAAC,iBAAiB,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;KAC/D;IAEO,UAAU;QAChB,MAAM,aAAa,GACjB,IAAI,CAAC,WAAW,KAAK,QAAQ;aAC5B,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAElD,IAAI,aAAa,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC5C,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;YACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAEzB,OAAO;SACR;QACD,MAAM,oBAAoB,GAAG,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QAC1D,IAAI,CAAC,oBAAoB,EAAE;YACzB,OAAO,CAAC,IAAI,CACV,wFAAwF,CACzF,CAAC;YAEF,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;YACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAEzB,OAAO;SACR;KACF;IAEO,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG;YACvB,EAAE,EAAE,IAAI,CAAC,mBAAmB;YAC5B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,EAAE,EAAE,IAAI,CAAC,EAAE;SACZ,CAAC;KACH;IAEO,YAAY,CAClB,UAAoD,EACpD,gBAAgB,GAAG,IAAI;QAEvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEtC,IAAI,gBAAgB,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAED,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;KAChC;IAEO,iBAAiB,CAAC,EAAU;QAClC,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC5D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC3C;KACF;IAEO,qBAAqB,CAAC,EAAU;QACtC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;QAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC;SACjC;QAED,OAAO,MAAM,CAAC;KACf;IAEO,aAAa;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAE3E,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;SACvB;KACF;IAEO,cAAc;;QACpB,IAAI,IAAI,CAAC,mBAAmB,KAAK,QAAQ,KAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,IAAI,CAAA,EAAE;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAExC,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,EAAE;gBAC7B,KAAK,IAAI,MAAM,IAAI,CAAC,iBAAiB,CAAC,EAAE,EAAE,CAAC;aAC5C;YAED,OAAO,KAAK,CAAC;SACd;QAED,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,MAAM,MAAK,CAAC,EAAE;YACjE,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CACvC,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,mBAAmB,CACnD,CAAC;QAEF,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,CAAC,KAAK,CACX,oCAAoC,IAAI,CAAC,mBAAmB,EAAE,CAC/D,CAAC;YACF,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QAED,OAAO,MAAM,CAAC,KAAK,CAAC;KACrB;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,iFACc,uBAAuB,sCAEnC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEtB,IAAI,CAAC,cAAc,EAAE,CACZ,EACZ,mFACc,eAAe,8BAE3B,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EACzC,aAAa,EAAC,SAAS,EACvB,SAAS,EAAC,cAAc,EACxB,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE;gBAC9B,IACE,CAAC,IAAI;oBACL,IAAI,CAAC,mBAAmB,KAAK,QAAQ;oBACrC,IAAI,CAAC,iBAAiB;oBACtB,IAAI,CAAC,iBAAiB,EACtB;oBACA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;iBAC3C;aACF,IAED,oFAA0B,MAAM,IAC9B,iEACG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,MAAM,IAAG,CAAC,KAChC,+DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,cAAc,EAAE,IAAI,CAAC,mBAAmB,KAAK,QAAQ;aACtD,IAEA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,eAAe,MACzC,wBACE,KAAK,EAAE,eAAe,CAAC,KAAK,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,EAAE,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,mBAAmB,KAAK,eAAe,CAAC,EAAE,GACtC,CACrB,CAAC,EACF,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,kBAAkB,IACnC,yEACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,OAAO,EAAE,IAAI,CAAC,mBAAmB,KAAK,QAAQ,EAC9C,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GAC7B,CAChB,CACC,CACV,EACD,+DAAQ,KAAK,EAAC,WAAW,IACtB,IAAI,CAAC,mBAAmB,KAAK,QAAQ,KACpC,EAAC,QAAQ,uDACP,uEACE,oBAAoB,EAAE,KAAK,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,CAAC,CAAC;gBACd,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,iBAAiB,mCACjB,CAAC,CAAC,MAAM,KACX,EAAE,EAAE,QAAQ,GACb,CAAC;gBACF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;aAC/B,EACD,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,KAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,IAAI,CAAA,EAC/C,EAAE,EAAE,IAAI,CAAC,EAAE,KAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,EAAE,CAAA,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,IAAI,CAAC,cAAc,GACnB,EAClB,4DAAK,KAAK,EAAC,YAAY,IACrB,kEACE,OAAO,EAAE;gBACP,IAAI,IAAI,CAAC,iBAAiB,EAAE;oBAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;iBAC3C;aACF,IAEA,IAAI,CAAC,QAAQ,CACJ,CACR,CACG,CACZ,CACM,CACF,CACM,CACL,CACT,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DateTime"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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  display: inline-block;\n  position: relative;\n\n  @media (max-width: 48em) {\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  @media (min-width: 48em) {\n    .border-right {\n      border-right: var(--theme-x-weak-bdr-2);\n    }\n  }\n\n  ix-button {\n    width: 100%;\n  }\n\n  .max-height {\n    max-height: max-content;\n  }\n\n  .no-margin {\n    margin: 0;\n    padding: 0;\n  }\n\n  .pull-right {\n    float: right;\n    padding: 0 $default-space $medium-space $default-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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { type LiteralStringUnion } from '../utils/type-helper';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport { makeRef } from '../utils/make-ref';\nimport { ButtonVariant } from '../button/button';\nimport { IxButtonComponent } from '../button/button-component';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown\n  implements\n    Omit<IxDatePickerComponent, 'corners'>,\n    Omit<IxButtonComponent, 'type' | 'icon'>\n{\n  @Element() hostElement!: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from = '';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to = '';\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    if (!this.currentRangeValue) {\n      return;\n    }\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.6.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event()\n  private readonly dateRangeChange!: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: LiteralStringUnion<'custom'> = '';\n  @State() private currentRangeValue?: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  private readonly triggerRef = makeRef<HTMLElement>();\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue || { id: '', from: '', to: '' };\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id) && this.currentRangeValue) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n\n    if (dropdown) {\n      dropdown.show = false;\n    }\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant={this.variant}\n          ghost={this.ghost}\n          outline={this.outline}\n          loading={this.loading}\n          icon=\"history\"\n          ref={this.triggerRef}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef.waitForCurrent()}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched &&\n              this.currentRangeValue\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      locale={this.locale}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                      weekStartIndex={this.weekStartIndex}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          if (this.currentRangeValue) {\n                            this.onDateSelect(this.currentRangeValue);\n                          }\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}