@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/content-switcher/content-switcher.css

@@ -0,0 +1,32 @@
+.ifx-content-switcher {
+  background-color: #ffffff;
+  border: 1px solid #bfbbbb;
+  border-radius: 9999px;
+  height: 36px;
+  width: fit-content;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ifx-content-switcher ::slotted(ifx-content-switcher-item) {
+  position: relative;
+}
+.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child) {
+  left: -1px;
+  margin-right: -1px;
+}
+.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child) {
+  right: -1px;
+  margin-left: -1px;
+}
+.ifx-content-switcher ::slotted(.ifx-content-switcher-divider) {
+  width: 1px;
+  height: 20px;
+  background-color: #8d8786;
+  margin: 0px 1px;
+  visibility: visible;
+}
+.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden) {
+  visibility: hidden;
+}

package/dist/collection/components/content-switcher/content-switcher.js

@@ -0,0 +1,223 @@
+import { Host, h, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class ContentSwitcher {
+    el;
+    items;
+    activeIndex = -1;
+    hoverIndex = -1;
+    focusIndex = -1;
+    dividers = [];
+    /** Fired when the selected option changes. */
+    ifxChange;
+    eventHandlers = new Map();
+    componentWillLoad() {
+        this.items = Array.from(this.el.children);
+        this.initializeDividers();
+        this.addEventListeners();
+        this.ensureSingleSelectedItem();
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-content-switcher", await framework);
+        }
+    }
+    disconnectedCallback() {
+        this.removeEventListeners();
+    }
+    /**
+     * Initialize the dividers between items.
+     */
+    initializeDividers() {
+        this.items.forEach((item, index) => {
+            if (index < this.items.length - 1) {
+                const divider = document.createElement("div");
+                divider.classList.add("ifx-content-switcher-divider");
+                item.after(divider);
+                this.dividers.push(divider);
+            }
+        });
+    }
+    /**
+     * Add event listeners for each item.
+     */
+    addEventListeners() {
+        this.items.forEach((item, index) => {
+            const handlers = {
+                click: () => this.selectItem(index),
+                mouseenter: () => this.handleHover(index, true),
+                mouseleave: () => this.handleHover(index, false),
+                focus: () => this.handleFocus(index, true),
+                blur: () => this.handleFocus(index, false),
+            };
+            Object.keys(handlers).forEach((event) => {
+                item.addEventListener(event, handlers[event]);
+            });
+            this.eventHandlers.set(item, handlers);
+        });
+    }
+    /**
+     * Remove all event listeners.
+     */
+    removeEventListeners() {
+        this.eventHandlers.forEach((handlers, item) => {
+            Object.keys(handlers).forEach((event) => {
+                item.removeEventListener(event, handlers[event]);
+            });
+        });
+        this.eventHandlers.clear();
+    }
+    ensureSingleSelectedItem() {
+        this.items.forEach((item, index) => {
+            const isSelected = item.getAttribute("selected") === "true" ||
+                item.selected;
+            if (isSelected) {
+                if (this.activeIndex < 0) {
+                    this.selectItem(index);
+                }
+                else {
+                    item.removeAttribute("selected");
+                    item.selected = false;
+                }
+            }
+        });
+    }
+    /**
+     * Handle hover events on an item.
+     * @param index - Index of the item.
+     * @param isActive - Whether the item is hovered.
+     */
+    handleHover(index, isActive) {
+        this.hoverIndex = isActive ? index : -1;
+        this.updateDividersOfItem(index);
+    }
+    /**
+     * Handle hover events on an item.
+     * @param index - Index of the item.
+     * @param isActive - Whether the item is focused.
+     */
+    handleFocus(index, isActive) {
+        this.focusIndex = isActive ? index : -1;
+        this.updateDividersOfItem(index);
+    }
+    /**
+     * Update visibility of dividers adjacent to a specific item.
+     * @param itemIndex - Index of the item.
+     */
+    updateDividersOfItem(itemIndex) {
+        if (itemIndex < this.items.length - 1) {
+            this.updateDividerVisibility(itemIndex);
+        }
+        if (itemIndex > 0) {
+            this.updateDividerVisibility(itemIndex - 1);
+        }
+    }
+    /**
+     * Update visibility of a specific divider.
+     * @param dividerIndex - Index of the divider.
+     */
+    updateDividerVisibility(dividerIndex) {
+        const hiddenDividers = new Set([
+            this.activeIndex,
+            this.activeIndex - 1,
+            this.hoverIndex,
+            this.hoverIndex - 1,
+            this.focusIndex,
+            this.focusIndex - 1,
+        ]);
+        this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));
+    }
+    /**
+     * Set the visibility of a specific divider.
+     * @param dividerIndex - Index of the divider.
+     * @param hidden - Whether the divider should be hidden.
+     */
+    setDividerVisibility(dividerIndex, hidden) {
+        if (this.dividers[dividerIndex]) {
+            this.dividers[dividerIndex].classList.toggle("hidden", hidden);
+        }
+    }
+    /**
+     * Select a specific item.
+     * @param itemIndex - Index of the item to be selected.
+     */
+    selectItem(itemIndex) {
+        if (itemIndex === this.activeIndex)
+            return;
+        const oldIndex = this.activeIndex;
+        if (oldIndex >= 0) {
+            this.items[oldIndex].removeAttribute("selected");
+        }
+        this.activeIndex = itemIndex;
+        this.items[itemIndex].setAttribute("selected", "true");
+        this.ifxChange.emit({
+            oldValue: this.getValueOfItem(oldIndex),
+            newValue: this.getValueOfItem(itemIndex),
+        });
+        this.updateDividersOfItem(oldIndex);
+        this.updateDividersOfItem(itemIndex);
+    }
+    /**
+     * Get the value property of the item at a specific index.
+     * Falls back to the index if no value is set.
+     *
+     * @param index - Index of the item.
+     * @returns The value of the item.
+     */
+    getValueOfItem(index) {
+        if (this.items[index] == null)
+            return index.toLocaleString();
+        return this.items[index].getAttribute("value") || index.toLocaleString();
+    }
+    render() {
+        return (h(Host, { key: 'e929f11dfd991a2ef368c31e6b4ccba98a535e86' }, h("div", { key: '4097344a1536530a7970264a8eb50743d863e667', class: "ifx-content-switcher", role: "group" }, h("slot", { key: '1577704c964d50f55451b037772261a24e39b3a6' }))));
+    }
+    static get is() { return "ifx-content-switcher"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./content-switcher.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["content-switcher.css"]
+        };
+    }
+    static get states() {
+        return {
+            "items": {},
+            "activeIndex": {},
+            "hoverIndex": {},
+            "focusIndex": {},
+            "dividers": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxChange",
+                "name": "ifxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the selected option changes."
+                },
+                "complexType": {
+                    "original": "ChangeEvent",
+                    "resolved": "{ oldValue: string; newValue: string; }",
+                    "references": {
+                        "ChangeEvent": {
+                            "location": "local",
+                            "path": "/home/fp/Dev/IFX/infineon-design-system-stencil/packages/components/src/components/content-switcher/content-switcher.tsx",
+                            "id": "src/components/content-switcher/content-switcher.tsx::ChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/counter/counter.css

@@ -0,0 +1,69 @@
+:host {
+  display: inline-block;
+  user-select: none;
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.counter__btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 1px solid #bfbbbb;
+  color: #bfbbbb;
+  font-family: var(--ifx-font-family);
+  padding: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.counter__btn ifx-icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+}
+.counter__btn--minus, .counter__btn--plus {
+  border-color: #0a8276;
+  color: #0a8276;
+}
+.counter__btn:focus-visible {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}
+.counter__btn:disabled {
+  border-color: #bfbbbb;
+  color: #bfbbbb;
+  cursor: default;
+}
+
+.counter__value {
+  width: 56px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: #1d1d1d;
+  font-family: var(--ifx-font-family);
+  font-size: var(--ifx-font-size-s);
+  font-style: normal;
+  font-weight: var(--ifx-font-weight-regular);
+  letter-spacing: var(--ifx-letter-spacing-default);
+  line-height: var(--ifx-line-height-s);
+  text-align: center;
+  border: 1px solid #575352;
+  border-radius: 1px;
+  background: #ffffff;
+  padding: 8px 12px;
+}
+.counter__value:focus-visible {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}

package/dist/collection/components/counter/counter.js

@@ -0,0 +1,131 @@
+import { h, } from "@stencil/core";
+export class Counter {
+    initialValue = 0;
+    /** The current value of the counter. Must be a non-negative number. */
+    value = 0;
+    /** Used as the form field name when the counter is in a form. */
+    name = "";
+    internals;
+    /** Emitted when the counter value changes. Returns the new value as a number. */
+    ifxChange;
+    valueChanged(value) {
+        const nextValue = Math.max(0, value);
+        if (nextValue !== value) {
+            this.value = nextValue;
+            return;
+        }
+        this.updateFormValue();
+    }
+    componentWillLoad() {
+        this.value = Math.max(0, this.value);
+        this.initialValue = this.value;
+        this.updateFormValue();
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.updateFormValue();
+    }
+    updateValue(value) {
+        const nextValue = Math.max(0, value);
+        if (nextValue === this.value) {
+            return;
+        }
+        this.value = nextValue;
+        this.ifxChange.emit(this.value);
+    }
+    updateFormValue() {
+        this.internals.setFormValue(String(this.value));
+    }
+    increment = () => {
+        this.updateValue(this.value + 1);
+    };
+    decrement = () => {
+        this.updateValue(this.value - 1);
+    };
+    render() {
+        const isDecrementDisabled = this.value === 0;
+        return (h("div", { key: 'ca004400b1e98c3ad0804228fc74a4db3c1a7b82', class: "counter" }, h("button", { key: 'e73683708ed0a50102f1cf202f46d5ce2192d471', class: "counter__btn counter__btn--minus", type: "button", "aria-label": "Decrease value", disabled: isDecrementDisabled, onClick: this.decrement }, h("ifx-icon", { key: '04aac1ab49d277faa5e9df43fd3b09f527b5ddf5', icon: "minus-16" })), h("output", { key: '5f9277a1ffa11e8205abf22b6e3538482933b169', class: "counter__value", "aria-label": "Counter value" }, h("span", { key: '7918088f5203bc1f6963f25cfc919f3e1c9c538d', class: "counter__value-inner" }, this.value)), h("button", { key: 'b04061984cd9d3dde05e3e140d1d494feca7689e', class: "counter__btn counter__btn--plus", type: "button", "aria-label": "Increase value", onClick: this.increment }, h("ifx-icon", { key: '9cd8bcf6edced6e11097e55c44c4811863b03c92', icon: "plus-16" }))));
+    }
+    static get is() { return "ifx-counter"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["counter.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["counter.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the counter. Must be a non-negative number."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used as the form field name when the counter is in a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxChange",
+                "name": "ifxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the counter value changes. Returns the new value as a number."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/date-picker/date-picker.css

@@ -0,0 +1,206 @@
+.date__picker-container {
+  display: flex;
+  flex-direction: column;
+}
+.date__picker-container .label__wrapper {
+  color: #1d1d1d;
+  font: 400 1rem/1.5rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+}
+.date__picker-container .label__wrapper .asterisk {
+  display: none;
+}
+.date__picker-container .label__wrapper .asterisk.required {
+  display: inline;
+  margin-left: 4px;
+}
+.date__picker-container .label__wrapper .asterisk.required.error {
+  color: #cd002f;
+}
+.date__picker-container.disabled .label__wrapper {
+  color: #bfbbbb;
+}
+.date__picker-container.error .caption__wrapper {
+  color: #cd002f;
+}
+.date__picker-container.disabled .caption__wrapper {
+  color: #bfbbbb;
+}
+.date__picker-container .caption__wrapper {
+  margin-top: 4px;
+  color: #1d1d1d;
+  font: 400 0.75rem/1rem "Source Sans 3";
+  font-family: var(--ifx-font-family);
+}
+
+.date__picker-input {
+  box-sizing: border-box;
+  font-family: var(--ifx-font-family);
+  outline: none;
+  width: 100%;
+  cursor: pointer;
+  border-radius: 1px;
+  border: 1px solid #8d8786;
+  height: 100%;
+}
+.date__picker-input.firefox__classes {
+  padding: 0px 14px;
+  box-sizing: border-box;
+  color: #8d8786;
+  font-size: 16px;
+  text-transform: uppercase;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  cursor: pointer;
+}
+.date__picker-input.firefox__classes:disabled {
+  color: #ffffff;
+}
+.date__picker-input:focus:not(.error, .success) {
+  border-color: #0a8276;
+}
+.date__picker-input:hover:not(:disabled, :focus, .error, .success) {
+  border-color: #575352;
+}
+.date__picker-input:disabled {
+  border-color: #bfbbbb;
+  background-color: #bfbbbb;
+  cursor: default;
+}
+.date__picker-input.readOnly {
+  border: none;
+  border-bottom: 1px solid #bfbbbb;
+  cursor: default;
+  pointer-events: none;
+}
+.date__picker-input.readOnly::-webkit-datetime-edit-fields-wrapper {
+  padding-left: 0;
+}
+.date__picker-input.readOnly::-webkit-datetime-edit, .date__picker-input.readOnly::-webkit-datetime-edit-text {
+  color: #1d1d1d;
+}
+.date__picker-input.error {
+  border-color: #cd002f;
+}
+.date__picker-input.success:not(.error) {
+  border-color: #4ca460;
+}
+.date__picker-input::-webkit-datetime-edit-text {
+  color: #8d8786;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+.date__picker-input:disabled::-webkit-datetime-edit, .date__picker-input:disabled::-webkit-datetime-edit-text {
+  color: #ffffff;
+}
+.date__picker-input.has-value::-webkit-datetime-edit-text {
+  color: #1d1d1d;
+}
+.date__picker-input.has-value::-webkit-datetime-edit {
+  color: #1d1d1d;
+}
+
+::-webkit-datetime-edit {
+  color: #8d8786;
+  font-size: 16px;
+  text-transform: uppercase;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 8px 16px;
+  padding-bottom: 9px;
+  transform: translateY(1px);
+}
+
+::-webkit-inner-spin-button {
+  display: none;
+}
+
+::-webkit-calendar-picker-indicator {
+  position: absolute;
+  right: 15px;
+  font-size: 19px;
+  cursor: pointer;
+  border-radius: 1px;
+}
+::-webkit-calendar-picker-indicator:focus-within {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}
+
+.input__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  background: #ffffff;
+  position: relative;
+}
+.input__wrapper.large {
+  height: 40px;
+}
+.input__wrapper.small {
+  height: 36px;
+}
+.input__wrapper.disabled .icon__wrapper {
+  background: none;
+  color: #ffffff;
+}
+.input__wrapper.disabled .icon__wrapper.firefox__classes {
+  display: none;
+}
+.input__wrapper.disabled .icon__wrapper {
+  background-color: #bfbbbb;
+  color: #ffffff;
+}
+.input__wrapper.readOnly .icon__wrapper {
+  color: #bfbbbb;
+}
+
+.icon__wrapper {
+  position: absolute;
+  right: 17px;
+  margin: 0;
+  border: 0;
+  padding: 2px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  pointer-events: none;
+  z-index: 100;
+  appearance: none;
+  background-color: #ffffff;
+  line-height: 16px;
+}
+.icon__wrapper span {
+  position: relative;
+  z-index: 1;
+}
+.icon__wrapper ifx-icon {
+  position: relative;
+  vertical-align: middle;
+  z-index: 1;
+}
+.icon__wrapper.firefox__classes:focus-visible::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border: 2px solid #0a8276;
+  border-radius: 15%;
+}
+.icon__wrapper.firefox__classes::before {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  z-index: 0;
+  background-color: #ffffff;
+}