@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627142646

package/components/ix-workflow-step.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxWorkflowStep extends Components.IxWorkflowStep, HTMLElement {}
+export const IxWorkflowStep: {
+    prototype: IxWorkflowStep;
+    new (): IxWorkflowStep;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-workflow-step.js

@@ -0,0 +1,147 @@
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, d as Host } from './p-BuJ6BWIi.js';
+import { Q as iconCircleDot, R as iconCircle, p as iconError, o as iconWarning, S as iconCircleFilled, q as iconSuccess, T as iconTriangleFilled } from './p-CGwHQeMX.js';
+
+const workflowStepCss = ":host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{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 .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";
+
+const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.selectedChanged = createEvent(this, "selectedChanged", 7);
+        /**
+         * Select orientation
+         */
+        this.vertical = false;
+        /**
+         * Set disabled
+         */
+        this.disabled = false;
+        /**
+         * Set status
+         */
+        this.status = 'open';
+        /**
+         * Activate navigation click
+         */
+        this.clickable = false;
+        /**
+         * Set selected
+         */
+        this.selected = false;
+        /**
+         * Activate navigation click
+         *
+         * @internal
+         */
+        this.position = 'undefined';
+        this.iconColor = 'workflow-step-icon-default--color';
+        this.customIconSlot = false;
+    }
+    selectedHandler() {
+        const selectedStyle = this.selected ? '--selected' : '';
+        if (this.status === 'open') {
+            this.iconName = this.selected ? iconCircleDot : iconCircle;
+            this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;
+        }
+        if (this.status === 'done' && !this.disabled) {
+            this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;
+        }
+    }
+    watchPropHandler() {
+        switch (this.status) {
+            case 'open':
+                this.iconName = iconCircle;
+                this.iconColor = 'workflow-step-icon-default--color';
+                break;
+            case 'success':
+                this.iconName = iconSuccess;
+                this.iconColor = 'color-success';
+                break;
+            case 'done':
+                this.iconName = iconCircleFilled;
+                this.iconColor = 'workflow-step-icon-done--color';
+                break;
+            case 'warning':
+                this.iconName = iconWarning;
+                this.iconColor = 'color-warning';
+                break;
+            case 'error':
+                this.iconName = iconError;
+                this.iconColor = 'color-alarm';
+                break;
+            default:
+                this.iconName = iconCircle;
+                break;
+        }
+        if (this.disabled) {
+            this.iconColor = 'workflow-step-icon-success--color--disabled';
+        }
+    }
+    componentWillLoad() {
+        this.watchPropHandler();
+        this.selectedHandler();
+        this.customIconSlot = !!this.hostElement.querySelector('[slot="custom-icon"]');
+    }
+    onStepClick() {
+        if (!this.disabled && this.clickable) {
+            this.selectedChanged.emit(this.hostElement);
+        }
+    }
+    render() {
+        const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.status === 'warning' ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : null;
+        return (h(Host, { key: 'da87aa8ee423349ce9a4f67cf18d672cc0c699ad', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: 'd8527bf05a70d059750fb1942e25a552f6512e9c', tabIndex: 0, class: {
+                step: true,
+                selected: this.selected,
+                vertical: this.vertical,
+                disabled: this.disabled,
+                clickable: this.clickable && !this.disabled,
+            } }, h("div", { key: '6210f0dda1a3c28b0452511bbcb192b077fd2430', class: "wrapper" }, h("div", { key: 'ac115d567dd7d8e9cd2c8a5be0fad3b5138e1eb0', class: {
+                line: true,
+                selected: this.selected,
+                [this.status]: true,
+                [this.position]: true,
+            } }), h("div", { key: '56a9abb29057882d199deb15a1ff563b277301be', class: "iconWrapper" }, icons, h("slot", { key: 'cebe111aadb1cae69717679e4175a8d2ed848183', name: "custom-icon" }))), h("div", { key: '08a0bc27cfa1604e105f5533ca17c1e6432e3f7c', class: "text" }, h("slot", { key: '034dbb9fc7256e363df377e784e27f01a18bd88d' })))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "selected": ["selectedHandler"],
+        "disabled": ["watchPropHandler"],
+        "status": ["watchPropHandler"]
+    }; }
+    static get style() { return workflowStepCss; }
+}, [1, "ix-workflow-step", {
+        "vertical": [4],
+        "disabled": [4],
+        "status": [1],
+        "clickable": [4],
+        "selected": [4],
+        "position": [1],
+        "iconName": [32],
+        "iconColor": [32]
+    }, undefined, {
+        "selected": ["selectedHandler"],
+        "disabled": ["watchPropHandler"],
+        "status": ["watchPropHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-workflow-step"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-workflow-step":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, WorkflowStep);
+            }
+            break;
+    } });
+}
+
+const IxWorkflowStep = WorkflowStep;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxWorkflowStep, defineCustomElement };
+//# sourceMappingURL=ix-workflow-step.js.map
+
+//# sourceMappingURL=ix-workflow-step.js.map

package/components/ix-workflow-step.js.map

@@ -0,0 +1 @@
+{"file":"ix-workflow-step.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=shadow","src/components/workflow-step/workflow-step.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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host(:not(.host-vertical)) {\n  width: 12rem;\n  height: 4rem;\n  min-width: 2rem;\n  min-height: 4rem;\n  max-width: 12rem;\n}\n\n:host(.host-vertical) {\n  width: 100%;\n  height: 4rem;\n  min-width: 4rem;\n  min-height: 2rem;\n  max-height: 12rem;\n}\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--theme-workflow-step--background);\n    border-radius: var(--theme-workflow--border-radius);\n    padding: 1.125rem 0 $small-space 0;\n\n    .wrapper {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n\n      .line {\n        width: 100%;\n        height: 0.125rem;\n        background-color: var(--theme-workflow-step-icon-default--color);\n\n        &.first,\n        &.last {\n          width: 50%;\n          margin: 0 0 0 auto;\n        }\n\n        &.last {\n          margin: 0 auto 0 0;\n        }\n\n        &.single {\n          width: 0;\n        }\n\n        &.selected {\n          background-color: var(\n              --theme-workflow-step-icon-default--color--selected\n          );\n        }\n\n        &.done {\n          background-color: var(--theme-workflow-step-icon-done--color);\n\n          &.selected {\n            background-color: var(\n                --theme-workflow-step-icon-done--color--selected\n            );\n          }\n        }\n\n        &.warning {\n          background-color: var(--theme-color-warning);\n        }\n\n        &.success {\n          background-color: var(--theme-color-success);\n        }\n\n        &.error {\n          background-color: var(--theme-color-alarm);\n        }\n      }\n\n      .iconWrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n\n        .absolute {\n          position: absolute;\n        }\n      }\n    }\n\n    .text {\n      margin-top: $default-space;\n      width: 100%;\n      padding: 0 $small-space;\n\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      text-align: center;\n    }\n\n    &.vertical {\n      flex-direction: row;\n      padding: 0;\n      height: 100%;\n\n      .wrapper {\n        width: auto;\n        padding-left: 1.125rem;\n        height: 100%;\n\n        .line {\n          width: 0.125rem;\n          height: 100%;\n\n          &.first,\n          &.last {\n            height: 50%;\n            margin: auto 0 0 0;\n          }\n\n          &.last {\n            margin: 0 0 auto 0;\n          }\n\n          &.single {\n            width: 0;\n          }\n        }\n      }\n\n      .text {\n        margin: 0 $default-space;\n        padding: 0;\n        width: auto;\n      }\n    }\n\n    &.clickable {\n      &:hover {\n        background-color: var(--theme-workflow-step--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-workflow-step--background--active);\n      }\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--focus--border-color);\n      border-radius: 0;\n    }\n\n    &.selected {\n      background-color: var(--theme-workflow-step--background--selected);\n    }\n\n    &.disabled {\n      background-color: var(--theme-workflow-step--background--disabled);\n\n      .line {\n        background-color: var(\n          --theme-workflow-step-icon-default--color--disabled\n        ) !important;\n      }\n\n      .text {\n        color: var(--theme-workflow-step--color--disabled);\n      }\n    }\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  iconCircle,\n  iconCircleDot,\n  iconCircleFilled,\n  iconError,\n  iconSuccess,\n  iconTriangleFilled,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  shadow: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement!: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   *\n   * @internal\n   */\n  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';\n\n  @State() iconName?: string;\n\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  /**\n   * @internal\n   */\n  @Event() selectedChanged!: EventEmitter<HTMLIxWorkflowStepElement>;\n\n  private customIconSlot: boolean = false;\n\n  @Watch('selected')\n  selectedHandler() {\n    const selectedStyle = this.selected ? '--selected' : '';\n\n    if (this.status === 'open') {\n      this.iconName = this.selected ? iconCircleDot : iconCircle;\n      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n    }\n\n    if (this.status === 'done' && !this.disabled) {\n      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('status')\n  watchPropHandler() {\n    switch (this.status) {\n      case 'open':\n        this.iconName = iconCircle;\n        this.iconColor = 'workflow-step-icon-default--color';\n        break;\n      case 'success':\n        this.iconName = iconSuccess;\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = iconCircleFilled;\n        this.iconColor = 'workflow-step-icon-done--color';\n        break;\n      case 'warning':\n        this.iconName = iconWarning;\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = iconError;\n        this.iconColor = 'color-alarm';\n        break;\n\n      default:\n        this.iconName = iconCircle;\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentWillLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  onStepClick() {\n    if (!this.disabled && this.clickable) {\n      this.selectedChanged.emit(this.hostElement);\n    }\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.status === 'warning' ? iconTriangleFilled : iconCircleFilled\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n      </Fragment>\n    ) : null;\n\n    return (\n      <Host\n        class={{ 'host-vertical': this.vertical }}\n        onClick={() => this.onStepClick()}\n      >\n        <div\n          tabIndex={0}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n            clickable: this.clickable && !this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-workflow-steps.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxWorkflowSteps extends Components.IxWorkflowSteps, HTMLElement {}
+export const IxWorkflowSteps: {
+    prototype: IxWorkflowSteps;
+    new (): IxWorkflowSteps;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-workflow-steps.js

@@ -0,0 +1,112 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { c as createMutationObserver } from './p-CX81WQtk.js';
+
+const workflowStepsCss = ":host{display:block;position:relative;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;min-width:2rem}: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 .steps{display:flex;height:100%}:host .steps.vertical{flex-direction:column}";
+
+const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stepSelected = createEvent(this, "stepSelected", 7);
+        /**
+         * Select orientation
+         */
+        this.vertical = false;
+        /**
+         * Activate navigation click
+         */
+        this.clickable = false;
+        /**
+         * Activate navigation click
+         */
+        this.selectedIndex = 0;
+    }
+    getSteps() {
+        return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
+    }
+    updateSteps() {
+        let steps = this.getSteps();
+        steps.forEach((element, index) => {
+            element.vertical = this.vertical;
+            element.clickable = this.clickable;
+            element.selected = this.selectedIndex === index;
+            if (steps.length === 1) {
+                element.position = 'single';
+                return;
+            }
+            if (index === 0) {
+                element.position = 'first';
+            }
+            else if (index === steps.length - 1) {
+                element.position = 'last';
+            }
+            else {
+                element.position = 'undefined';
+            }
+        });
+    }
+    onStepSelectionChanged(event) {
+        const eventTarget = event.detail;
+        const steps = this.getSteps();
+        const clickIndex = steps.findIndex((step) => step === eventTarget);
+        const clientEvent = this.stepSelected.emit(clickIndex);
+        if (clientEvent.defaultPrevented) {
+            return;
+        }
+        steps.forEach((step, index) => {
+            step.selected = index === clickIndex;
+        });
+    }
+    componentWillLoad() {
+        this.updateSteps();
+    }
+    componentDidLoad() {
+        this.observer = createMutationObserver((mutations) => {
+            for (let mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    this.updateSteps();
+                }
+            }
+        });
+        this.observer.observe(this.hostElement, { childList: true });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    componentDidRender() {
+        this.updateSteps();
+    }
+    render() {
+        return (h(Host, { key: 'f8b17414e0483043ca19ea615424edd9d1186d65' }, h("div", { key: '7e5e437796034eec9fca0f49d066649314e00ed6', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '80c3e814489566858fdd37d254ecb04a6be50846' }))));
+    }
+    get hostElement() { return this; }
+    static get style() { return workflowStepsCss; }
+}, [1, "ix-workflow-steps", {
+        "vertical": [4],
+        "clickable": [4],
+        "selectedIndex": [2, "selected-index"]
+    }, [[0, "selectedChanged", "onStepSelectionChanged"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-workflow-steps"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-workflow-steps":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, WorkflowSteps);
+            }
+            break;
+    } });
+}
+
+const IxWorkflowSteps = WorkflowSteps;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxWorkflowSteps, defineCustomElement };
+//# sourceMappingURL=ix-workflow-steps.js.map
+
+//# sourceMappingURL=ix-workflow-steps.js.map

package/components/ix-workflow-steps.js.map

@@ -0,0 +1 @@
+{"file":"ix-workflow-steps.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=shadow","src/components/workflow-steps/workflow-steps.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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  min-width: 2rem;\n\n  .steps {\n    display: flex;\n    height: 100%;\n\n    &.vertical {\n      flex-direction: column;\n    }\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  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-workflow-steps',\n  styleUrl: 'workflow-steps.scss',\n  shadow: true,\n})\nexport class WorkflowSteps {\n  @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() selectedIndex: number = 0;\n\n  /**\n   * On step selected event\n   */\n  @Event() stepSelected!: EventEmitter<number>;\n\n  private getSteps() {\n    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n  }\n\n  updateSteps() {\n    let steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.vertical = this.vertical;\n      element.clickable = this.clickable;\n      element.selected = this.selectedIndex === index;\n\n      if (steps.length === 1) {\n        element.position = 'single';\n        return;\n      }\n\n      if (index === 0) {\n        element.position = 'first';\n      } else if (index === steps.length - 1) {\n        element.position = 'last';\n      } else {\n        element.position = 'undefined';\n      }\n    });\n  }\n\n  private observer?: MutationObserver;\n\n  @Listen('selectedChanged')\n  onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n    const eventTarget = event.detail;\n\n    const steps = this.getSteps();\n    const clickIndex = steps.findIndex((step) => step === eventTarget);\n    const clientEvent = this.stepSelected.emit(clickIndex);\n\n    if (clientEvent.defaultPrevented) {\n      return;\n    }\n\n    steps.forEach((step, index) => {\n      step.selected = index === clickIndex;\n    });\n  }\n\n  componentWillLoad() {\n    this.updateSteps();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver((mutations) => {\n      for (let mutation of mutations) {\n        if (mutation.type === 'childList') {\n          this.updateSteps();\n        }\n      }\n    });\n\n    this.observer.observe(this.hostElement, { childList: true });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentDidRender() {\n    this.updateSteps();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ steps: true, vertical: this.vertical }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p--2LOMK-5.js

@@ -0,0 +1,105 @@
+import { T as TypedEvent } from './p-BdCnOrqW.js';
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * A function which creates a Context value object
+ */
+function createContext(name, initialValue) {
+    return {
+        name,
+        initialValue,
+    };
+}
+/**
+ * An event fired by a context requester to signal it desires a named context.
+ *
+ * A provider should inspect the `context` property of the event to determine if it has a value that can
+ * satisfy the request, calling the `callback` with the requested value if so.
+ *
+ * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback
+ * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`
+ * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
+ */
+class ContextEvent extends Event {
+    constructor(context, callback, subscribe) {
+        super('context-request', { bubbles: true, composed: true });
+        this.context = context;
+        this.callback = callback;
+        this.subscribe = subscribe;
+    }
+}
+function useContextConsumer(hostElement, context, onContextReceived, subscribe) {
+    let _unsubscribe;
+    hostElement.dispatchEvent(new ContextEvent(context, (ctx, unSub) => {
+        onContextReceived(ctx, unSub);
+        _unsubscribe = unSub;
+    }, subscribe));
+    return {
+        unsubscribe: () => {
+            if (_unsubscribe) {
+                _unsubscribe();
+            }
+        },
+    };
+}
+function useContextProvider(hostElement, context, contextPayload) {
+    const requestContext = new TypedEvent();
+    const updateContext = new TypedEvent();
+    const requests = new Set();
+    hostElement.addEventListener('context-request', (event) => {
+        const requestContextEvent = event;
+        if ((requestContextEvent === null || requestContextEvent === void 0 ? void 0 : requestContextEvent.context.name) !== context.name) {
+            return;
+        }
+        requestContextEvent.stopPropagation();
+        if (requestContextEvent.subscribe) {
+            requests.add(requestContextEvent);
+        }
+        requestContext.emit(requestContextEvent);
+        if (contextPayload) {
+            requestContextEvent.callback(contextPayload, () => {
+                requests.delete(requestContextEvent);
+            });
+        }
+    });
+    updateContext.on((context) => {
+        requests.forEach((r) => r.callback(context, () => {
+            requests.delete(r);
+        }));
+    });
+    return {
+        emit: (context) => {
+            updateContext.emit(context);
+        },
+    };
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const closestIxMenu = (element) => {
+    const menuElement = element.closest('ix-menu');
+    return menuElement;
+};
+const ApplicationLayoutContext = createContext('application-layout-context', {
+    hideHeader: false,
+    host: null,
+    sidebar: false,
+});
+
+export { ApplicationLayoutContext as A, useContextConsumer as a, closestIxMenu as c, useContextProvider as u };
+//# sourceMappingURL=p--2LOMK-5.js.map
+
+//# sourceMappingURL=p--2LOMK-5.js.map

package/components/p--2LOMK-5.js.map

@@ -0,0 +1 @@
+{"file":"p--2LOMK-5.js","mappings":";;AAAA;;;;;;;AAOG;AAuBH;;AAEG;AACa,SAAA,aAAa,CAC3B,IAAY,EACZ,YAAgB,EAAA;IAEhB,OAAO;QACL,IAAI;QACJ,YAAY;KACb;AACH;AAWA;;;;;;;;;AASG;AACG,MAAO,YAAuC,SAAQ,KAAK,CAAA;AAC/D,IAAA,WAAA,CACkB,OAAU,EACV,QAAyC,EACzC,SAAmB,EAAA;AAEnC,QAAA,KAAK,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAJ3C,IAAO,CAAA,OAAA,GAAP,OAAO;QACP,IAAQ,CAAA,QAAA,GAAR,QAAQ;QACR,IAAS,CAAA,SAAA,GAAT,SAAS;;AAI5B;AAgBK,SAAU,kBAAkB,CAIhC,WAAc,EACd,OAAU,EACV,iBAGS,EACT,SAAmB,EAAA;AAEnB,IAAA,IAAI,YAAsC;AAC1C,IAAA,WAAW,CAAC,aAAa,CACvB,IAAI,YAAY,CACd,OAAO,EACP,CAAC,GAAG,EAAE,KAAK,KAAI;AACb,QAAA,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC;QAC7B,YAAY,GAAG,KAAK;AACtB,KAAC,EACD,SAAS,CACV,CACF;IAED,OAAO;QACL,WAAW,EAAE,MAAK;YAChB,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,EAAE;;SAEjB;KACF;AACH;SAKgB,kBAAkB,CAKhC,WAAc,EACd,OAAU,EACV,cAA+B,EAAA;AAE/B,IAAA,MAAM,cAAc,GAAG,IAAI,UAAU,EAAmB;AACxD,IAAA,MAAM,aAAa,GAAG,IAAI,UAAU,EAAkB;AAEtD,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAgC;IAExD,WAAW,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC,KAAY,KAAI;QAC/D,MAAM,mBAAmB,GAAG,KAAwB;AACpD,QAAA,IAAI,CAAA,mBAAmB,KAAnB,IAAA,IAAA,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,IAAI,MAAK,OAAO,CAAC,IAAI,EAAE;YACtD;;QAGF,mBAAmB,CAAC,eAAe,EAAE;AAErC,QAAA,IAAI,mBAAmB,CAAC,SAAS,EAAE;AACjC,YAAA,QAAQ,CAAC,GAAG,CAAC,mBAAmB,CAAC;;AAEnC,QAAA,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC;QAExC,IAAI,cAAc,EAAE;AAClB,YAAA,mBAAmB,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAK;AAChD,gBAAA,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC;AACtC,aAAC,CAAC;;AAEN,KAAC,CAAC;AAEF,IAAA,aAAa,CAAC,EAAE,CAAC,CAAC,OAAuB,KAAI;AAC3C,QAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KACjB,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAK;AACvB,YAAA,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;SACnB,CAAC,CACH;AACH,KAAC,CAAC;IAEF,OAAO;AACL,QAAA,IAAI,EAAE,CAAC,OAAuB,KAAI;AAChC,YAAA,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;SAC5B;KACF;AACH;;ACzKA;;;;;;;AAOG;AAKU,MAAA,aAAa,GAAG,CAAC,OAAgB,KAAI;IAChD,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;AAC9C,IAAA,OAAO,WAAW;AACpB;AAoBa,MAAA,wBAAwB,GAAG,aAAa,CAKlD,4BAA4B,EAAE;AAC/B,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,OAAO,EAAE,KAAK;AACf,CAAA;;;;","names":[],"sources":["src/components/utils/context.ts","src/components/utils/application-layout/context.ts"],"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\nimport { TypedEvent } from './typed-event';\n\n/**\n * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.\n */\nexport type Context<T> = {\n  name: string;\n  initialValue?: T;\n};\n\n/**\n * An unknown context type\n */\nexport type UnknownContext = Context<unknown>;\n\n/**\n * A helper type which can extract a Context value type from a Context type\n */\nexport type ContextType<T extends UnknownContext> =\n  T extends Context<infer Y> ? Y : never;\n\n/**\n * A function which creates a Context value object\n */\nexport function createContext<T>(\n  name: string,\n  initialValue?: T\n): Readonly<Context<T>> {\n  return {\n    name,\n    initialValue,\n  };\n}\n\n/**\n * A callback which is provided by a context requester and is called with the value satisfying the request.\n * This callback can be called multiple times by context providers as the requested value is changed.\n */\nexport type ContextCallback<ValueType> = (\n  value: ValueType,\n  unsubscribe?: () => void\n) => void;\n\n/**\n * An event fired by a context requester to signal it desires a named context.\n *\n * A provider should inspect the `context` property of the event to determine if it has a value that can\n * satisfy the request, calling the `callback` with the requested value if so.\n *\n * If the requested context event contains a truthy `subscribe` value, then a provider can call the callback\n * multiple times if the value is changed, if this is the case the provider should pass an `unsubscribe`\n * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.\n */\nexport class ContextEvent<T extends UnknownContext> extends Event {\n  public constructor(\n    public readonly context: T,\n    public readonly callback: ContextCallback<ContextType<T>>,\n    public readonly subscribe?: boolean\n  ) {\n    super('context-request', { bubbles: true, composed: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementEventMap {\n    /**\n     * A 'context-request' event can be emitted by any element which desires\n     * a context value to be injected by an external provider.\n     */\n    'context-request': ContextEvent<UnknownContext>;\n  }\n}\n\nexport type ContextConsumerSubscription = {\n  unsubscribe: () => void;\n};\n\nexport function useContextConsumer<\n  T extends HTMLElement,\n  C extends UnknownContext,\n>(\n  hostElement: T,\n  context: C,\n  onContextReceived: (\n    context: ContextType<C>,\n    unsubscribe?: () => void\n  ) => void,\n  subscribe?: boolean\n): ContextConsumerSubscription {\n  let _unsubscribe: (() => void) | undefined;\n  hostElement.dispatchEvent(\n    new ContextEvent(\n      context,\n      (ctx, unSub) => {\n        onContextReceived(ctx, unSub);\n        _unsubscribe = unSub;\n      },\n      subscribe\n    )\n  );\n\n  return {\n    unsubscribe: () => {\n      if (_unsubscribe) {\n        _unsubscribe();\n      }\n    },\n  };\n}\nexport type ContextProvider<C extends Context<{}> = Context<any>> = {\n  emit: (context: ContextType<C>) => void;\n};\n\nexport function useContextProvider<\n  X extends {},\n  C extends Context<X>,\n  T extends HTMLElement = HTMLElement,\n>(\n  hostElement: T,\n  context: C,\n  contextPayload?: ContextType<C>\n): ContextProvider<C> {\n  const requestContext = new TypedEvent<ContextEvent<C>>();\n  const updateContext = new TypedEvent<ContextType<C>>();\n\n  const requests = new Set<ContextEvent<UnknownContext>>();\n\n  hostElement.addEventListener('context-request', (event: Event) => {\n    const requestContextEvent = event as ContextEvent<C>;\n    if (requestContextEvent?.context.name !== context.name) {\n      return;\n    }\n\n    requestContextEvent.stopPropagation();\n\n    if (requestContextEvent.subscribe) {\n      requests.add(requestContextEvent);\n    }\n    requestContext.emit(requestContextEvent);\n\n    if (contextPayload) {\n      requestContextEvent.callback(contextPayload, () => {\n        requests.delete(requestContextEvent);\n      });\n    }\n  });\n\n  updateContext.on((context: ContextType<C>) => {\n    requests.forEach((r) =>\n      r.callback(context, () => {\n        requests.delete(r);\n      })\n    );\n  });\n\n  return {\n    emit: (context: ContextType<C>) => {\n      updateContext.emit(context);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { createContext } from '../context';\nimport { type LiteralStringUnion } from '../type-helper';\n\nexport const closestIxMenu = (element: Element) => {\n  const menuElement = element.closest('ix-menu');\n  return menuElement;\n};\n\nexport type AppSwitchConfigurationTarget = LiteralStringUnion<\n  '_self' | '_blank' | '_parent' | '_top'\n>;\n\nexport type AppSwitchConfiguration = {\n  currentAppId: string;\n  apps: {\n    id: string;\n    name: string;\n    description: string;\n    url: string;\n    target: AppSwitchConfigurationTarget;\n    iconSrc: string;\n  }[];\n  i18nAppSwitch?: string;\n  i18nLoadingApps?: string;\n};\n\nexport const ApplicationLayoutContext = createContext<{\n  hideHeader: boolean;\n  host: 'basic-navigation' | 'map-navigation' | null;\n  appSwitchConfig?: AppSwitchConfiguration;\n  sidebar?: boolean;\n}>('application-layout-context', {\n  hideHeader: false,\n  host: null,\n  sidebar: false,\n});\n"],"version":3}

package/components/p-5uA5ifmT.js

@@ -0,0 +1,72 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+
+const dateTimeCardCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:var(--theme-shadow-4);border-radius:0.25rem}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card.straight{border-radius:0}:host .card .header-container{width:100%}:host .card .header-container .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}:host .card .content--time-picker{padding:0 1rem}:host .card .footer-container{width:100%}:host .card .footer-container .footer{padding:1rem}";
+
+const DateTimeCard = /*@__PURE__*/ proxyCustomElement(class DateTimeCard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Timepicker specific styling */
+        this.timePickerAppearance = false;
+        /**
+         * Hide header
+         */
+        this.hideHeader = false;
+        /**
+         * Display footer
+         */
+        this.hasFooter = false;
+        /**
+         * set styles
+         */
+        this.individual = true;
+        /**
+         * Set corners style
+         */
+        this.corners = 'rounded';
+    }
+    cardClasses() {
+        var _a;
+        return {
+            card: true,
+            standaloneAppearance: (_a = this.standaloneAppearance) !== null && _a !== void 0 ? _a : this.individual,
+            rounded: this.corners === 'rounded',
+            left: this.corners === 'left',
+            right: this.corners === 'right',
+            straight: this.corners === 'straight',
+        };
+    }
+    render() {
+        return (h(Host, { key: '31c1aa02530819d8bd9896ca625c3c8930ea8268' }, h("div", { key: '31432252f1ce901e76a92423719d24bc621e3e83', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: 'dd4b7346375f87a43b2969dba7c5b4a9cc10f0ac', class: "header-container" }, h("div", { key: '8dc14769929ce6e0d2f2095ca4904ee8beb2018b', class: "header" }, h("slot", { key: '9f5357cb413d5ccf9f6a15ecb10040034ad5e1b0', name: "header" })), h("div", { key: 'b7c55ccf1c1f655240d817ed838de53a67a8d4f0', class: "separator" }))), h("div", { key: '6ddf415abf2a5174a796e3e9a15441aef0f9c14a', class: {
+                content: true,
+                'content--time-picker': this.timePickerAppearance,
+            } }, h("slot", { key: '953b62d7631d68c1061798d6259836110c368095' })), this.hasFooter && (h("div", { key: 'd39e55a300835320ef737cd28bce660a846500de', class: "footer-container" }, h("div", { key: 'e44823acab4d5a87bcb77ab812e1a31ff6a2b2c7', class: "separator" }), h("div", { key: 'e8118c065ed36b219e04a91ec2fe4455585ea2e0', class: "footer" }, h("slot", { key: 'f49f852f5b7c6d5bc2052d37593a69e13f78ce0f', name: "footer" })))))));
+    }
+    static get style() { return dateTimeCardCss; }
+}, [1, "ix-date-time-card", {
+        "standaloneAppearance": [4, "standalone-appearance"],
+        "timePickerAppearance": [4, "time-picker-appearance"],
+        "hideHeader": [4, "hide-header"],
+        "hasFooter": [4, "has-footer"],
+        "individual": [4],
+        "corners": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-date-time-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-date-time-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DateTimeCard);
+            }
+            break;
+    } });
+}
+
+export { DateTimeCard as D, defineCustomElement as d };
+//# sourceMappingURL=p-5uA5ifmT.js.map
+
+//# sourceMappingURL=p-5uA5ifmT.js.map

package/components/p-5uA5ifmT.js.map

@@ -0,0 +1 @@
+{"file":"p-5uA5ifmT.js","mappings":";;AAAA,MAAM,eAAe,GAAG,woDAAwoD;;MCoBnpD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;AAUU,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;AAE7C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAElC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AA+CjD;IA7CS,WAAW,GAAA;;QACjB,OAAO;AACL,YAAA,IAAI,EAAE,IAAI;YACV,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,UAAU;AAClE,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC/B,YAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SACtC;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAC3B,CAAC,IAAI,CAAC,UAAU,KACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,CAAO,CACzB,CACP,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,sBAAsB,EAAE,IAAI,CAAC,oBAAoB;AAClD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEL,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAO,CAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB,CACF,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: var(--theme-shadow-4);\n      border-radius: 0.25rem;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    &.straight {\n      border-radius: 0;\n    }\n\n    .header-container {\n      width: 100%;\n\n      .header {\n        padding: $default-space;\n        flex: 0 1 auto;\n      }\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      &--time-picker {\n        padding: 0 $default-space;\n      }\n\n      padding: 0 $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .footer-container {\n      width: 100%;\n\n      .footer {\n        padding: $default-space;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { DateTimeCardCorners } from './date-time-card.types';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /** Timepicker specific styling */\n  @Prop() timePickerAppearance: boolean = false;\n\n  /**\n   * Hide header\n   */\n  @Prop() hideHeader: boolean = false;\n\n  /**\n   * Display footer\n   */\n  @Prop() hasFooter: boolean = false;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n      straight: this.corners === 'straight',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          {!this.hideHeader && (\n            <div class=\"header-container\">\n              <div class=\"header\">\n                <slot name=\"header\"></slot>\n              </div>\n              <div class=\"separator\"></div>\n            </div>\n          )}\n\n          <div\n            class={{\n              content: true,\n              'content--time-picker': this.timePickerAppearance,\n            }}\n          >\n            <slot></slot>\n          </div>\n\n          {this.hasFooter && (\n            <div class=\"footer-container\">\n              <div class=\"separator\"></div>\n              <div class=\"footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-9dLpp1OQ.js

@@ -0,0 +1,71 @@
+import { h } from './p-BuJ6BWIi.js';
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const isDanger = (variant) => {
+    return variant.toUpperCase() === 'Danger'.toUpperCase();
+};
+const isPrimary = (variant) => {
+    return variant.toUpperCase() === 'Primary'.toUpperCase();
+};
+const isSecondary = (variant) => {
+    return variant.toUpperCase() === 'Secondary'.toUpperCase();
+};
+const getButtonClasses = (variant, outline, ghost, iconOnly = false, iconOval = false, selected, disabled) => {
+    return {
+        btn: true,
+        'btn-danger': isDanger(variant) && !outline && !ghost,
+        'btn-outline-danger': isDanger(variant) && outline && !ghost,
+        'btn-invisible-danger': isDanger(variant) && !outline && ghost,
+        'btn-primary': isPrimary(variant) && !outline && !ghost,
+        'btn-outline-primary': isPrimary(variant) && outline && !ghost,
+        'btn-invisible-primary': isPrimary(variant) && !outline && ghost,
+        'btn-secondary': isSecondary(variant) && !outline && !ghost,
+        'btn-outline-secondary': isSecondary(variant) && outline && !ghost,
+        'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,
+        'btn-icon': iconOnly,
+        'btn-oval': iconOval,
+        selected: selected,
+        disabled: disabled,
+    };
+};
+const getSpinnerSize = (btnProps) => {
+    if (!btnProps.icon) {
+        return 'small';
+    }
+    switch (btnProps.iconSize) {
+        case '12':
+            return 'xx-small';
+        case '16':
+            return 'x-small';
+        default:
+            return 'small';
+    }
+};
+const BaseButton = (props, children) => {
+    var _a, _b, _c;
+    const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
+    const ariaAttributes = (_b = props.ariaAttributes) !== null && _b !== void 0 ? _b : {};
+    if (!ariaAttributes['aria-disabled'] && props.disabled) {
+        ariaAttributes['aria-disabled'] = 'true';
+    }
+    return (h("button", Object.assign({}, ariaAttributes, { onClick: (e) => (props.onClick ? props.onClick(e) : undefined), tabindex: props.disabled ? -1 : ((_c = props.tabIndex) !== null && _c !== void 0 ? _c : 0), type: props.type, class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.outline, props.ghost, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) }),
+        props.loading ? (h("ix-spinner", { size: getSpinnerSize(props), hideTrack: true })) : null,
+        props.icon && !props.loading ? (h("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor })) : null,
+        h("div", { class: {
+                content: true,
+                [`content-${props.alignment}`]: !!props.alignment,
+            } }, children),
+        props.afterContent ? props.afterContent : null));
+};
+
+export { BaseButton as B, getButtonClasses as g };
+//# sourceMappingURL=p-9dLpp1OQ.js.map
+
+//# sourceMappingURL=p-9dLpp1OQ.js.map

package/components/p-9dLpp1OQ.js.map

@@ -0,0 +1 @@
+{"file":"p-9dLpp1OQ.js","mappings":"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","names":[],"sources":["src/components/button/base-button.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 */\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isDanger = (variant: string) => {\n  return variant.toUpperCase() === 'Danger'.toUpperCase();\n};\n\nconst isPrimary = (variant: string) => {\n  return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n  return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  outline: boolean,\n  ghost: boolean,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    'btn-danger': isDanger(variant) && !outline && !ghost,\n    'btn-outline-danger': isDanger(variant) && outline && !ghost,\n    'btn-invisible-danger': isDanger(variant) && !outline && ghost,\n    'btn-primary': isPrimary(variant) && !outline && !ghost,\n    'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n    'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n    'btn-secondary': isSecondary(variant) && !outline && !ghost,\n    'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n    'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  outline: boolean;\n  ghost: boolean;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon?: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n};\n\nconst getSpinnerSize = (btnProps: BaseButtonProps) => {\n  if (!btnProps.icon) {\n    return 'small';\n  }\n\n  switch (btnProps.iconSize) {\n    case '12':\n      return 'xx-small';\n    case '16':\n      return 'x-small';\n    default:\n      return 'small';\n  }\n};\n\nexport const BaseButton: FunctionalComponent<BaseButtonProps> = (\n  props: BaseButtonProps,\n  children\n) => {\n  const extraClasses = props.extraClasses ?? {};\n\n  const ariaAttributes = props.ariaAttributes ?? {};\n  if (!ariaAttributes['aria-disabled'] && props.disabled) {\n    ariaAttributes['aria-disabled'] = 'true';\n  }\n\n  return (\n    <button\n      {...ariaAttributes}\n      onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n      tabindex={props.disabled ? -1 : (props.tabIndex ?? 0)}\n      type={props.type}\n      class={{\n        ...getButtonClasses(\n          props.variant,\n          props.outline,\n          props.ghost,\n          props.iconOnly,\n          props.iconOval,\n          props.selected,\n          props.disabled || props.loading\n        ),\n        ...extraClasses,\n      }}\n    >\n      {props.loading ? (\n        <ix-spinner size={getSpinnerSize(props)} hideTrack></ix-spinner>\n      ) : null}\n      {props.icon && !props.loading ? (\n        <ix-icon\n          class=\"icon\"\n          name={props.icon}\n          size={props.iconSize as any}\n          color={props.iconColor}\n        ></ix-icon>\n      ) : null}\n      <div\n        class={{\n          content: true,\n          [`content-${props.alignment}`]: !!props.alignment,\n        }}\n      >\n        {children}\n      </div>\n      {props.afterContent ? props.afterContent : null}\n    </button>\n  );\n};\n"],"version":3}