@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.130

package/dist/cjs/qds-chip.cjs.entry.js

@@ -0,0 +1,285 @@
+/*!
+ * SPDX-FileCopyrightText: © 2026 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+'use strict';
+
+var index = require('./index-DIY7gpXM.js');
+var helpers = require('./helpers-D6srVOLt.js');
+
+const chipCss = ":host([hidden]){display:none!important}:host{display:block;outline:none}.qds-disabled,[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-container{min-width:0}.qds-container:not(.qds-closable-chip):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-container:not(.qds-closable-chip):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-target{-webkit-appearance:none;appearance:none;background-color:initial;border:none;color:inherit;cursor:pointer;display:flex;outline:none;padding:0;pointer-events:auto}.qds-target:disabled{pointer-events:none}.qds-alignment{align-items:center;display:flex}.qds-cursor{cursor:pointer}.qds-icon{flex-shrink:0}.qds-closable-chip,.qds-container{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:var(--qds-control-border-width) solid var(--qds-theme-control-border-default);border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-control-chip-gap-internal);justify-content:center;padding-block:0;-webkit-user-select:none;user-select:none}.qds-closable-chip:has(.qds-target:active),.qds-container.qds-pressed-state{background-color:var(--qds-theme-interactive-background-pressed)}.qds-container.qds-selected-state{background-color:var(--qds-theme-control-background-default-contrast)}.qds-container.qds-selected-state,.qds-container.qds-selected-state .qds-icon{color:var(--qds-theme-control-text-standard-contrast)}.qds-container.qds-selected-state:hover{background-color:var(--qds-theme-control-background-hover-contrast)}.qds-container.qds-selected-state:active{background-color:var(--qds-theme-control-background-pressed-contrast)}.qds-disabled{background-color:var(--qds-theme-control-background-default-contrast);color:var(--qds-theme-control-text-standard-contrast)}:host(:focus-visible) .qds-container:not(.qds-closable-chip){box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-closable-chip[data-size=small],.qds-container[data-size=small]{min-height:var(--qds-control-chip-small-height);padding-inline:var(--qds-control-chip-small-padding-horizontal)}.qds-closable-chip[data-size=small]{padding-inline-end:var(--qds-control-chip-closable-small-padding-end)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-text[data-size=small]{font:var(--qds-control-small-text);line-height:normal}.qds-closable-chip[data-size=standard],.qds-container[data-size=standard]{min-height:var(--qds-control-chip-standard-height);padding-inline:var(--qds-control-chip-standard-padding-horizontal)}.qds-closable-chip[data-size=standard]{padding-inline-end:var(--qds-control-chip-closable-standard-padding-end)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-text[data-size=standard]{font:var(--qds-control-standard-text);line-height:normal}.qds-closable-chip[data-size=large],.qds-container[data-size=large]{min-height:var(--qds-control-chip-large-height);padding-inline:var(--qds-control-chip-large-padding-horizontal)}.qds-closable-chip[data-size=large]{padding-inline-end:var(--qds-control-chip-closable-large-padding-end)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-text[data-size=large]{font:var(--qds-control-large-text);line-height:normal}";
+
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Chip_instances, _Chip_chip, _Chip_span, _Chip_ro, _Chip_savedTabIndex, _Chip_closableText_get, _Chip_computedDisabled_get, _Chip_computedSize_get, _Chip_computedType_get, _Chip_computedChecked_get, _Chip_computedValue_get, _Chip_onIconClick, _Chip_chipRef, _Chip_spanRef, _Chip_tooltipRef;
+const Chip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
+        this.closeEmitter = index.createEvent(this, "qdsClose", 6);
+        this.changeEmitter = index.createEvent(this, "qdsChange", 6);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        _Chip_instances.add(this);
+        /**
+         * The name of a registered icon library.
+         */
+        this.iconLibrary = 'default';
+        /**
+         * The chip's size.
+         */
+        this.size = 'standard';
+        /**
+         * The chip's type.
+         */
+        this.type = 'selectable';
+        /**
+         * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+         * element to associate the chip with (its form owner).
+         *
+         * The value of this property must be the id of a `<form>` in the same
+         * document. If this property is not set, the `<qds-chip>` is associated
+         * with its ancestor `<form>` element, if any.
+         *
+         * This property lets you associate `<qds-chip>` elements to `<form>`s
+         * anywhere in the document, not just inside a `<form>`. It can also override
+         *an ancestor `<form>` element.
+         *
+         * @webnative
+         */
+        // eslint-disable-next-line unicorn/no-null
+        this.form = null;
+        /**
+         * The value of the chip, submitted as a name/value pair with form data.
+         *
+         * @webnative
+         */
+        this.value = 'on';
+        this.isPressed = false;
+        this.isSelected = false;
+        this.tooltip = false;
+        _Chip_chip.set(this, void 0);
+        _Chip_span.set(this, void 0);
+        _Chip_ro.set(this, void 0);
+        _Chip_savedTabIndex.set(this, 0);
+        _Chip_onIconClick.set(this, (event) => {
+            if (!event.defaultPrevented && __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'closable')
+                this.closeEmitter.emit();
+        });
+        _Chip_chipRef.set(this, (chip) => {
+            __classPrivateFieldSet(this, _Chip_chip, chip, "f");
+        });
+        _Chip_spanRef.set(this, (span) => {
+            __classPrivateFieldSet(this, _Chip_span, span, "f");
+        });
+        _Chip_tooltipRef.set(this, (tooltip) => {
+            if (tooltip)
+                // eslint-disable-next-line no-param-reassign
+                tooltip.target = __classPrivateFieldGet(this, _Chip_chip, "f");
+        });
+    }
+    onBlur(event) {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
+        }
+    }
+    onFocus(event) {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
+        }
+    }
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        event.preventDefault();
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.checked = !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get);
+            this.changeEmitter.emit();
+        }
+    }
+    handleKeyDown(event) {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (event.key === ' ') {
+            this.isPressed = true;
+            event.preventDefault();
+        }
+        else if (event.key === 'Enter' && this.internals.form) {
+            this.internals.form.requestSubmit();
+            event.preventDefault();
+        }
+    }
+    handleKeyUp(event) {
+        if (event.key !== ' ')
+            return;
+        this.isPressed = false;
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.checked = !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get);
+            this.changeEmitter.emit();
+        }
+    }
+    checkedChanged() {
+        this.isSelected = __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get);
+        this.internals.ariaChecked = __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get).toString();
+        this.internals.setFormValue(__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get) && !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get)
+            ? __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedValue_get)
+            : // eslint-disable-next-line unicorn/no-null
+                null);
+    }
+    disabledChanged() {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.internals.ariaDisabled = __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get).toString();
+            if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get))
+                this.host.removeAttribute('tabindex');
+            else
+                this.host.tabIndex = __classPrivateFieldGet(this, _Chip_savedTabIndex, "f");
+        }
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get) && !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get))
+            this.internals.setFormValue(__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedValue_get));
+        // eslint-disable-next-line unicorn/no-null
+        else
+            this.internals.setFormValue(null);
+    }
+    tabindexChanged(newValue) {
+        if (newValue !== null) {
+            const parsedValue = Number.parseInt(newValue, 10);
+            __classPrivateFieldSet(this, _Chip_savedTabIndex, Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)
+                ? 0
+                : parsedValue, "f");
+        }
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get))
+                this.host.removeAttribute('tabindex');
+            else
+                this.host.tabIndex = __classPrivateFieldGet(this, _Chip_savedTabIndex, "f");
+        }
+        else {
+            this.host.removeAttribute('tabindex');
+        }
+    }
+    textChanged() {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.internals.ariaLabel = this.text ?? '';
+        }
+    }
+    valueChanged() {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get) && !__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get))
+            this.internals.setFormValue(__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedValue_get));
+    }
+    componentWillLoad() {
+        if (__classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable') {
+            this.internals.role = 'checkbox';
+            this.internals.ariaChecked = __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedChecked_get).toString();
+            this.internals.ariaLabel = this.text ?? '';
+            this.internals.ariaDisabled = __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get).toString();
+        }
+        this.valueChanged();
+        Object.defineProperty(this.host, 'form', {
+            enumerable: true,
+            get: () => this.internals.form,
+        });
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+    }
+    componentDidLoad() {
+        helpers.invariant(__classPrivateFieldGet(this, _Chip_span, "f"));
+        const span = __classPrivateFieldGet(this, _Chip_span, "f");
+        index.readTask(() => {
+            this.tooltip = helpers.isEllipsisActive(span);
+        });
+        __classPrivateFieldSet(this, _Chip_ro, new ResizeObserver(([spanEntry]) => {
+            this.tooltip = helpers.isEllipsisActive(spanEntry.target);
+        }), "f");
+        __classPrivateFieldGet(this, _Chip_ro, "f").observe(__classPrivateFieldGet(this, _Chip_span, "f"));
+    }
+    disconnectedCallback() {
+        if (__classPrivateFieldGet(this, _Chip_ro, "f"))
+            __classPrivateFieldGet(this, _Chip_ro, "f").disconnect();
+    }
+    render() {
+        return (index.h("div", { key: 'ceb94f6e3862e266203397c2065d23b8190fec1f', class: "qds-chip", ref: __classPrivateFieldGet(this, _Chip_chipRef, "f") }, __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'closable' && (index.h("div", { key: '1ac3c7fc5684dc1e663de722756a38f3cd663531', "aria-disabled": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get) ? 'true' : undefined, class: {
+                'qds-container': true,
+                'qds-closable-chip': true,
+            }, "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get) }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: 'c60500cc2c01f4c65002e8c25c3c8aebe3a45c45', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: this.iconLibrary, name: this.iconName })), index.h("span", { key: 'feb9e6f34753705f5b201021f453f6e885619ddd', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text), index.h("qds-mini-button", { key: '0a907f5bdcd58808b68b88e7594cdc2296eaffae', name: "clear", text: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_closableText_get), library: "core", class: "qds-cursor", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), disabled: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get), onClick: __classPrivateFieldGet(this, _Chip_onIconClick, "f"), tabIndex: __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get)
+                ? undefined
+                : __classPrivateFieldGet(this, _Chip_savedTabIndex, "f") || undefined }))), __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedType_get) === 'selectable' && (index.h("div", { key: '047181713d87e2cb320c7dfcdd23398d1444d597', "aria-hidden": "true", class: {
+                'qds-container': true,
+                'qds-pressed-state': this.isPressed,
+                'qds-selected-state': this.isSelected,
+                'qds-padding-end': true,
+                'qds-cursor': true,
+                'qds-disabled': __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedDisabled_get),
+            }, "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get) }, (this.checked ?? false) && (index.h("qds-icon", { key: '5ef7c87a93654f7e21cbcd67597cd6337d1059a2', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: "core", name: "checked" })), this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '6911b0b5c13a754917e4d48e7ac3737b0b5f9c8f', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), library: this.iconLibrary, name: this.iconName })), index.h("span", { key: '8fa735c988e124e76c0f53bfb2512d4919dd5f1b', class: "qds-text", "data-size": __classPrivateFieldGet(this, _Chip_instances, "a", _Chip_computedSize_get), ref: __classPrivateFieldGet(this, _Chip_spanRef, "f") }, this.text))), this.tooltip && (index.h("qds-tooltip", { key: '1efef725c1304299e4f31466c3c76d1c9b518849', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Chip_tooltipRef, "f"), trigger: "pointerenter focusin" }, this.text))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "text": ["textChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+_Chip_chip = new WeakMap(), _Chip_span = new WeakMap(), _Chip_ro = new WeakMap(), _Chip_savedTabIndex = new WeakMap(), _Chip_onIconClick = new WeakMap(), _Chip_chipRef = new WeakMap(), _Chip_spanRef = new WeakMap(), _Chip_tooltipRef = new WeakMap(), _Chip_instances = new WeakSet(), _Chip_closableText_get = function _Chip_closableText_get() {
+    return `Delete ${this.text} selection`;
+}, _Chip_computedDisabled_get = function _Chip_computedDisabled_get() {
+    return this.disabled ?? false;
+}, _Chip_computedSize_get = function _Chip_computedSize_get() {
+    switch (this.size) {
+        case 'standard':
+        case 'small':
+        case 'large': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _Chip_computedType_get = function _Chip_computedType_get() {
+    switch (this.type) {
+        case 'selectable':
+        case 'closable': {
+            return this.type;
+        }
+        default: {
+            return 'selectable';
+        }
+    }
+}, _Chip_computedChecked_get = function _Chip_computedChecked_get() {
+    return this.checked ?? false;
+}, _Chip_computedValue_get = function _Chip_computedValue_get() {
+    // eslint-disable-next-line unicorn/no-null
+    return this.value == null ? null : this.value.toString();
+};
+Chip.style = chipCss;
+
+exports.qds_chip = Chip;
+//# sourceMappingURL=qds-chip.entry.cjs.js.map

package/dist/cjs/qds-chip.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-chip.entry.cjs.js","sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n  outline: none;\n}\n\n[aria-disabled='true'],\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.qds-container {\n  /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n  min-width: 0;\n\n  &:not(.qds-closable-chip):hover {\n    background-color: var(--qds-theme-interactive-background-hover);\n  }\n\n  &:not(.qds-closable-chip):active {\n    background-color: var(--qds-theme-interactive-background-pressed);\n  }\n}\n\n.qds-target {\n  appearance: none;\n  display: flex;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n  pointer-events: auto;\n  outline: none;\n\n  &:disabled {\n    pointer-events: none;\n  }\n}\n\n.qds-alignment {\n  display: flex;\n  align-items: center;\n}\n\n.qds-cursor {\n  cursor: pointer;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding-block: 0;\n  user-select: none;\n  border: var(--qds-control-border-width) solid\n    var(--qds-theme-control-border-default);\n  border-radius: var(--qds-control-rounded-border-radius);\n  color: var(--qds-theme-control-text-standard);\n  background-color: initial;\n  appearance: none;\n  box-sizing: border-box;\n  gap: var(--qds-control-chip-gap-internal);\n}\n\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n  background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-container.qds-selected-state {\n  color: var(--qds-theme-control-text-standard-contrast);\n  background-color: var(--qds-theme-control-background-default-contrast);\n\n  .qds-icon {\n    color: var(--qds-theme-control-text-standard-contrast);\n  }\n\n  &:hover {\n    background-color: var(--qds-theme-control-background-hover-contrast);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-control-background-pressed-contrast);\n  }\n}\n\n.qds-disabled {\n  background-color: var(--qds-theme-control-background-default-contrast);\n  color: var(--qds-theme-control-text-standard-contrast);\n}\n\n:host(:focus-visible) .qds-container:not(.qds-closable-chip) {\n  /* inner ring */\n  outline: var(--qds-theme-focus-border-contrast) solid\n    var(--qds-focus-light-border-width);\n  outline-offset: 0;\n\n  /* outer ring */\n  box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n    var(--qds-theme-focus-border);\n}\n\n[data-size='small'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    min-height: var(--qds-control-chip-small-height);\n    padding-inline: var(--qds-control-chip-small-padding-horizontal);\n  }\n\n  &.qds-closable-chip {\n    padding-inline-end: var(--qds-control-chip-closable-small-padding-end);\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-small-text);\n    line-height: normal;\n  }\n}\n\n[data-size='standard'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    min-height: var(--qds-control-chip-standard-height);\n    padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n  }\n\n  &.qds-closable-chip {\n    padding-inline-end: var(--qds-control-chip-closable-standard-padding-end);\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-standard-text);\n    line-height: normal;\n  }\n}\n\n[data-size='large'] {\n  &.qds-closable-chip,\n  &.qds-container {\n    min-height: var(--qds-control-chip-large-height);\n    padding-inline: var(--qds-control-chip-large-padding-horizontal);\n  }\n\n  &.qds-closable-chip {\n    padding-inline-end: var(--qds-control-chip-closable-large-padding-end);\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-text {\n    font: var(--qds-control-large-text);\n    line-height: normal;\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n  invariant,\n  isEllipsisActive,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' | 'selectable'\n\n/**\n * `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n *\n * @see https://quartz.se.com/build/components/chip\n */\n@Component({\n  tag: 'qds-chip',\n  formAssociated: true,\n  shadow: true,\n  styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The chip's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The chip's type.\n   */\n  @Prop() public readonly type?: ChipType = 'selectable'\n\n  /**\n   * The chip's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Sets the selectable chip's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the chip with (its form owner).\n   *\n   * The value of this property must be the id of a `<form>` in the same\n   * document. If this property is not set, the `<qds-chip>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-chip>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   *an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Prevents the chip from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The name of the chip, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * The value of the chip, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: Value = 'on'\n\n  /**\n   * Emitted when the chip loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the chip gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the chip is closed.\n   */\n  @Event({ eventName: 'qdsClose', cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when a change to the selectable chip's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  @Element() private readonly host!: HTMLElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  @State() private isPressed = false\n\n  @State() private isSelected = false\n\n  @State() private tooltip = false\n\n  #chip?: HTMLDivElement\n\n  #span?: HTMLSpanElement\n\n  #ro?: ResizeObserver\n\n  #savedTabIndex = 0\n\n  get #closableText(): string {\n    return `Delete ${this.text} selection`\n  }\n\n  get #computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedType(): ChipType {\n    switch (this.type) {\n      case 'selectable':\n      case 'closable': {\n        return this.type\n      }\n      default: {\n        return 'selectable'\n      }\n    }\n  }\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  @Listen('blur')\n  protected onBlur(event: FocusEvent): void {\n    if (this.#computedType === 'selectable') {\n      this.blurEmitter.emit(pickFocusEventAttributes(event))\n    }\n  }\n\n  @Listen('focus')\n  protected onFocus(event: FocusEvent): void {\n    if (this.#computedType === 'selectable') {\n      this.focusEmitter.emit(pickFocusEventAttributes(event))\n    }\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    event.preventDefault()\n\n    if (this.#computedType === 'selectable') {\n      this.checked = !this.#computedChecked\n      this.changeEmitter.emit()\n    }\n  }\n\n  @Listen('keydown')\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.#computedDisabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    if (event.key === ' ') {\n      this.isPressed = true\n      event.preventDefault()\n    } else if (event.key === 'Enter' && this.internals.form) {\n      this.internals.form.requestSubmit()\n      event.preventDefault()\n    }\n  }\n\n  @Listen('keyup')\n  protected handleKeyUp(event: KeyboardEvent): void {\n    if (event.key !== ' ') return\n    this.isPressed = false\n    if (this.#computedType === 'selectable') {\n      this.checked = !this.#computedChecked\n      this.changeEmitter.emit()\n    }\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.isSelected = this.#computedChecked\n    this.internals.ariaChecked = this.#computedChecked.toString()\n    this.internals.setFormValue(\n      this.#computedChecked && !this.#computedDisabled\n        ? this.#computedValue\n        : // eslint-disable-next-line unicorn/no-null\n          null,\n    )\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.#computedType === 'selectable') {\n      this.internals.ariaDisabled = this.#computedDisabled.toString()\n      if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n      else this.host.tabIndex = this.#savedTabIndex\n    }\n\n    if (this.#computedChecked && !this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n    // eslint-disable-next-line unicorn/no-null\n    else this.internals.setFormValue(null)\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string | null): void {\n    if (newValue !== null) {\n      const parsedValue = Number.parseInt(newValue, 10)\n      this.#savedTabIndex =\n        Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n          ? 0\n          : parsedValue\n    }\n\n    if (this.#computedType === 'selectable') {\n      if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n      else this.host.tabIndex = this.#savedTabIndex\n    } else {\n      this.host.removeAttribute('tabindex')\n    }\n  }\n\n  @Watch('text')\n  protected textChanged(): void {\n    if (this.#computedType === 'selectable') {\n      this.internals.ariaLabel = this.text ?? ''\n    }\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    if (this.#computedChecked && !this.#computedDisabled)\n      this.internals.setFormValue(this.#computedValue)\n  }\n\n  public componentWillLoad(): void {\n    if (this.#computedType === 'selectable') {\n      this.internals.role = 'checkbox'\n      this.internals.ariaChecked = this.#computedChecked.toString()\n      this.internals.ariaLabel = this.text ?? ''\n      this.internals.ariaDisabled = this.#computedDisabled.toString()\n    }\n\n    this.valueChanged()\n\n    Object.defineProperty(this.host, 'form', {\n      enumerable: true,\n      get: () => this.internals.form,\n    })\n\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#span)\n\n    const span = this.#span\n    readTask(() => {\n      this.tooltip = isEllipsisActive(span)\n    })\n    this.#ro = new ResizeObserver(([spanEntry]) => {\n      this.tooltip = isEllipsisActive(spanEntry.target as HTMLSpanElement)\n    })\n    this.#ro.observe(this.#span)\n  }\n\n  public disconnectedCallback(): void {\n    if (this.#ro) this.#ro.disconnect()\n  }\n\n  public render() {\n    return (\n      <div class=\"qds-chip\" ref={this.#chipRef}>\n        {this.#computedType === 'closable' && (\n          <div\n            aria-disabled={this.#computedDisabled ? 'true' : undefined}\n            class={{\n              'qds-container': true,\n              'qds-closable-chip': true,\n            }}\n            data-size={this.#computedSize}\n          >\n            {this.iconName !== undefined && this.iconName !== '' && (\n              <qds-icon\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library={this.iconLibrary}\n                name={this.iconName}\n              />\n            )}\n            <span\n              class=\"qds-text\"\n              data-size={this.#computedSize}\n              ref={this.#spanRef}\n            >\n              {this.text}\n            </span>\n            <qds-mini-button\n              name=\"clear\"\n              text={this.#closableText}\n              library=\"core\"\n              class=\"qds-cursor\"\n              data-size={this.#computedSize}\n              disabled={this.#computedDisabled}\n              onClick={this.#onIconClick}\n              tabIndex={\n                this.#computedDisabled\n                  ? undefined\n                  : this.#savedTabIndex || undefined\n              }\n            />\n          </div>\n        )}\n        {this.#computedType === 'selectable' && (\n          <div\n            aria-hidden=\"true\"\n            class={{\n              'qds-container': true,\n              'qds-pressed-state': this.isPressed,\n              'qds-selected-state': this.isSelected,\n              'qds-padding-end': true,\n              'qds-cursor': true,\n              'qds-disabled': this.#computedDisabled,\n            }}\n            data-size={this.#computedSize}\n          >\n            {(this.checked ?? false) && (\n              <qds-icon\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library=\"core\"\n                name=\"checked\"\n              />\n            )}\n            {this.iconName !== undefined && this.iconName !== '' && (\n              <qds-icon\n                class=\"qds-icon\"\n                data-size={this.#computedSize}\n                library={this.iconLibrary}\n                name={this.iconName}\n              />\n            )}\n\n            <span\n              class=\"qds-text\"\n              data-size={this.#computedSize}\n              ref={this.#spanRef}\n            >\n              {this.text}\n            </span>\n          </div>\n        )}\n        {this.tooltip && (\n          <qds-tooltip\n            aria-hidden=\"true\"\n            ref={this.#tooltipRef}\n            trigger=\"pointerenter focusin\"\n          >\n            {this.text}\n          </qds-tooltip>\n        )}\n      </div>\n    )\n  }\n\n  readonly #onIconClick = (event: MouseEvent): void => {\n    if (!event.defaultPrevented && this.#computedType === 'closable')\n      this.closeEmitter.emit()\n  }\n\n  readonly #chipRef = (chip?: HTMLDivElement): void => {\n    this.#chip = chip\n  }\n\n  readonly #spanRef = (span?: HTMLSpanElement): void => {\n    this.#span = span\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.#chip\n  }\n}\n"],"names":["pickFocusEventAttributes","invariant","readTask","isEllipsisActive","h"],"mappings":"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"}

package/dist/cjs/qds-dialog.cjs.entry.js

@@ -1,90 +1,137 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2026 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DIY7gpXM.js');
+var helpers = require('./helpers-D6srVOLt.js');
 
-const index = require('./index-d181f952.js');
-const helpers = require('./helpers-452256e8.js');
-
-const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:none;position:fixed;inset:0}:host([open]){display:block}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
+const dialogCss = ":host([hidden]){display:none!important}:host{display:none;height:-moz-fit-content;height:fit-content;inset:0;position:fixed;width:-moz-fit-content;width:fit-content}:host([open]){display:block}.qds-dialog{background-color:var(--qds-theme-popup-background);border:var(--qds-popup-border-width) solid var(--qds-theme-popup-border);border-radius:var(--qds-popup-border-radius);box-shadow:var(--qds-popup-elevation);color:inherit;height:inherit;padding:0;width:inherit}.qds-dialog::backdrop{background:initial}.qds-dialog[open]~.qds-backdrop{backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.qds-heading{align-items:center;display:flex;padding:var(--qds-popup-padding-top) var(--qds-popup-padding-end) var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start)}.qds-close-button{margin-left:auto}.qds-footer{padding:var(--qds-popup-section-padding-top) var(--qds-popup-padding-end) var(--qds-popup-padding-bottom) var(--qds-popup-padding-start)}.qds-content{align-items:flex-start;display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);height:auto;padding:var(--qds-popup-section-padding-top) var(--qds-popup-padding-end) var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
 
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Dialog_inheritedAttributes, _Dialog_dialog, _Dialog_titleId, _Dialog_closeButton, _Dialog_ref, _Dialog_onCancel, _Dialog_onClose, _Dialog_handleCloseClick, _Dialog_onSubmit, _Dialog_closeButtonRef, _Dialog_handleFocus;
+let autoIncrementingId = 0;
 const Dialog = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cancelEmitter = index.createEvent(this, "qdsCancel", 1);
-    this.closeEmitter = index.createEvent(this, "qdsClose", 0);
-    this.inheritedAttributes = {};
-    this.boundSubmit = (event) => {
-      helpers.ignorePromise(this.handleSubmit(event));
-    };
-    this.onCancel = (event) => {
-      if (this.cancelEmitter.emit().defaultPrevented)
-        event.preventDefault();
-    };
-    this.onClose = () => {
-      helpers.invariant(this.dialog);
-      this.closeEmitter.emit();
-      this.open = this.dialog.open;
-    };
-    this.ref = (dialog) => {
-      this.dialog = dialog;
-    };
-    this.open = false;
-  }
-  /**
-   * Displays the dialog over the top of any other dialogs that might be
-   * present. Everything outside of the dialog is [inert][] with interactions
-   * outside of the dialog being blocked.
-   *
-   * [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert
-   */
-  async show() {
-    helpers.invariant(this.dialog);
-    this.dialog.showModal();
-    this.open = this.dialog.open;
-  }
-  /**
-   * Closes the dialog.
-   */
-  async close() {
-    helpers.invariant(this.dialog);
-    this.dialog.close();
-  }
-  async openChanged() {
-    await (this.open ? this.show() : this.close());
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = helpers.inheritAriaAttributes(this.element);
-  }
-  async componentDidLoad() {
-    if (this.open)
-      await this.show();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("dialog", { class: "dialog", ref: this.ref, onSubmit: this.boundSubmit, onCancel: this.onCancel, onClose: this.onClose, ...this.inheritedAttributes }, index.h("div", { class: "content" }, index.h("slot", null))), index.h("div", { class: "backdrop" })));
-  }
-  async handleSubmit(event) {
-    if ((event instanceof SubmitEvent &&
-      (event.submitter instanceof HTMLButtonElement ||
-        (event.submitter instanceof HTMLInputElement &&
-          event.submitter.formMethod === 'dialog'))) ||
-      (event.target instanceof HTMLFormElement &&
-        event.target.method === 'dialog')) {
-      event.preventDefault();
-      await this.close();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.cancelEmitter = index.createEvent(this, "qdsCancel", 1);
+        this.closeEmitter = index.createEvent(this, "qdsClose", 2);
+        /**
+         * Indicates whether or not the dialog is open. You can toggle this attribute
+         * to show and hide the dialog, or you can use the `show()` and `close()`
+         * methods and this attribute will reflect the dialog’s open state.
+         */
+        this.open = false;
+        this.hasTitleSlot = false;
+        this.hasFooterSlot = false;
+        _Dialog_inheritedAttributes.set(this, {});
+        _Dialog_dialog.set(this, void 0);
+        _Dialog_titleId.set(this, void 0);
+        _Dialog_closeButton.set(this, void 0);
+        _Dialog_ref.set(this, (dialog) => {
+            __classPrivateFieldSet(this, _Dialog_dialog, dialog, "f");
+        });
+        _Dialog_onCancel.set(this, (event) => {
+            if (this.cancelEmitter.emit().defaultPrevented)
+                event.preventDefault();
+        });
+        _Dialog_onClose.set(this, () => {
+            helpers.invariant(__classPrivateFieldGet(this, _Dialog_dialog, "f"));
+            this.closeEmitter.emit();
+            this.open = __classPrivateFieldGet(this, _Dialog_dialog, "f").open;
+        });
+        _Dialog_handleCloseClick.set(this, () => {
+            this.close();
+        });
+        _Dialog_onSubmit.set(this, (event) => {
+            if ((event instanceof SubmitEvent &&
+                (event.submitter instanceof HTMLButtonElement ||
+                    (event.submitter instanceof HTMLInputElement &&
+                        event.submitter.formMethod === 'dialog'))) ||
+                (event.target instanceof HTMLFormElement &&
+                    event.target.method === 'dialog')) {
+                event.preventDefault();
+                this.close();
+            }
+        });
+        _Dialog_closeButtonRef.set(this, (button) => {
+            __classPrivateFieldSet(this, _Dialog_closeButton, button, "f");
+        });
+        _Dialog_handleFocus.set(this, () => {
+            if (!this.open)
+                return;
+            const autofocusTarget = this.host.querySelector('[autofocus]');
+            if (autofocusTarget instanceof HTMLElement) {
+                autofocusTarget.focus();
+                return;
+            }
+            if (this.closable === true && __classPrivateFieldGet(this, _Dialog_closeButton, "f")) {
+                __classPrivateFieldGet(this, _Dialog_closeButton, "f").focus();
+            }
+        });
+    }
+    openChanged() {
+        if (this.open)
+            this.show();
+        else
+            this.close();
+    }
+    componentWillRender() {
+        this.hasTitleSlot = !!this.host.querySelector('[slot="title"]');
+        this.hasFooterSlot = !!this.host.querySelector('[slot="footer"]');
+    }
+    componentWillLoad() {
+        __classPrivateFieldSet(this, _Dialog_inheritedAttributes, helpers.inheritAriaAttributes(this.host), "f");
+        autoIncrementingId += 1;
+        __classPrivateFieldSet(this, _Dialog_titleId, `qds-dialog-title-${autoIncrementingId}`, "f");
     }
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["openChanged"]
-  }; }
+    componentDidLoad() {
+        if (this.open)
+            this.show();
+    }
+    render() {
+        const hasHeading = this.hasTitleSlot || this.closable === true;
+        return (index.h(index.Host, { key: 'bf4674798e66be27eb0b35cc098774afb8591916' }, index.h("dialog", { key: '3fcd5de1d60f22aa005744575d2226a527388385', class: "qds-dialog", ref: __classPrivateFieldGet(this, _Dialog_ref, "f"), onCancel: __classPrivateFieldGet(this, _Dialog_onCancel, "f"), onClose: __classPrivateFieldGet(this, _Dialog_onClose, "f"), onSubmit: __classPrivateFieldGet(this, _Dialog_onSubmit, "f"), ...__classPrivateFieldGet(this, _Dialog_inheritedAttributes, "f"), "aria-labelledby": this.hasTitleSlot ? __classPrivateFieldGet(this, _Dialog_titleId, "f") : undefined }, hasHeading && (index.h("div", { key: 'c78ad5071e914a9270f08d2e14ff42d7288b7789', class: "qds-heading" }, this.hasTitleSlot && (index.h("div", { key: '99d57b36bfc0dd20a1afc6d3ac62a5a7a2c6a83a', id: __classPrivateFieldGet(this, _Dialog_titleId, "f") }, index.h("slot", { key: 'fc071c652158f1b556a60692fe8a10135be37cef', name: "title" }))), this.closable === true && (index.h("qds-icon-button", { key: '301036e270f56a9bce5c35dda62452e5680c2434', "aria-label": "close dialog", class: "qds-close-button", importance: "subdued", iconName: "close", iconLibrary: "core", onClick: __classPrivateFieldGet(this, _Dialog_handleCloseClick, "f"), ref: __classPrivateFieldGet(this, _Dialog_closeButtonRef, "f") })))), index.h("div", { key: '533874075c54678654210741e139d2d9186512f7', class: "qds-content" }, index.h("slot", { key: '10c081a99bffd1fb40394bcb957a22329118b777' })), this.hasFooterSlot && (index.h("div", { key: '927fc31c531dff7ddc4d22869db5789cf47d759d', class: "qds-footer" }, index.h("slot", { key: '24764196502824137984f0838cb15fd4a1122566', name: "footer" })))), index.h("div", { key: '4448e7a0d02cada97f8f3fa93ec2bd08caf7d599', class: "qds-backdrop", "aria-hidden": "true" })));
+    }
+    show() {
+        helpers.invariant(__classPrivateFieldGet(this, _Dialog_dialog, "f"));
+        __classPrivateFieldGet(this, _Dialog_dialog, "f").showModal();
+        this.open = __classPrivateFieldGet(this, _Dialog_dialog, "f").open;
+        requestAnimationFrame(() => {
+            __classPrivateFieldGet(this, _Dialog_handleFocus, "f").call(this);
+        });
+    }
+    close() {
+        helpers.invariant(__classPrivateFieldGet(this, _Dialog_dialog, "f"));
+        __classPrivateFieldGet(this, _Dialog_dialog, "f").close();
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["openChanged"]
+    }; }
 };
+_Dialog_inheritedAttributes = new WeakMap(), _Dialog_dialog = new WeakMap(), _Dialog_titleId = new WeakMap(), _Dialog_closeButton = new WeakMap(), _Dialog_ref = new WeakMap(), _Dialog_onCancel = new WeakMap(), _Dialog_onClose = new WeakMap(), _Dialog_handleCloseClick = new WeakMap(), _Dialog_onSubmit = new WeakMap(), _Dialog_closeButtonRef = new WeakMap(), _Dialog_handleFocus = new WeakMap();
 Dialog.style = dialogCss;
 
 exports.qds_dialog = Dialog;
-
-//# sourceMappingURL=qds-dialog.cjs.entry.js.map
+//# sourceMappingURL=qds-dialog.entry.cjs.js.map

package/dist/cjs/qds-dialog.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-dialog.entry.cjs.js","sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: none;\n  position: fixed;\n  inset: 0;\n  width: fit-content;\n  height: fit-content;\n}\n\n:host([open]) {\n  display: block;\n}\n\n.qds-dialog {\n  background-color: var(--qds-theme-popup-background);\n  border-radius: var(--qds-popup-border-radius);\n  border: var(--qds-popup-border-width) solid var(--qds-theme-popup-border);\n  box-shadow: var(--qds-popup-elevation);\n  color: inherit;\n  height: inherit;\n  padding: 0;\n  width: inherit;\n\n  &::backdrop {\n    background: initial;\n  }\n\n  &[open] ~ .qds-backdrop {\n    backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n    background-color: var(--qds-theme-popup-overlay-background);\n    inset: 0;\n    opacity: var(--qds-theme-popup-overlay-opacity);\n    position: fixed;\n  }\n}\n\n.qds-heading {\n  display: flex;\n  align-items: center;\n  padding: var(--qds-popup-padding-top) var(--qds-popup-padding-end)\n    var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start);\n}\n\n.qds-close-button {\n  margin-left: auto;\n}\n\n.qds-footer {\n  padding: var(--qds-popup-section-padding-top) var(--qds-popup-padding-end)\n    var(--qds-popup-padding-bottom) var(--qds-popup-padding-start);\n}\n\n.qds-content {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--qds-popup-gap-children-related);\n  height: auto;\n  padding: var(--qds-popup-section-padding-top) var(--qds-popup-padding-end)\n    var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n  margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes, invariant } from '../../helpers'\n\nlet autoIncrementingId = 0\n\n/**\n * The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n *\n * @see https://quartz.se.com/build/components/dialog\n */\n@Component({\n  tag: 'qds-dialog',\n  shadow: true,\n  styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute\n   * to show and hide the dialog, or you can use the `show()` and `close()`\n   * methods and this attribute will reflect the dialog’s open state.\n   */\n  @Prop({ mutable: true, reflect: true }) public open = false\n\n  /**\n   * Adds a close button to the dialog.\n   */\n  @Prop() public closable?: boolean\n\n  @Element() private readonly host!: HTMLElement\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * currently open dialog. The browser fires this event when the user presses\n   * the `Esc` key.\n   *\n   * When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are fired.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /** Emitted when the dialog has been closed. */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @State() private hasTitleSlot = false\n\n  @State() private hasFooterSlot = false\n\n  #inheritedAttributes: Attributes = {}\n\n  #dialog?: HTMLDialogElement\n\n  #titleId?: string\n\n  #closeButton?: HTMLQdsIconButtonElement\n\n  @Watch('open')\n  protected openChanged(): void {\n    if (this.open) this.show()\n    else this.close()\n  }\n\n  public componentWillRender(): void {\n    this.hasTitleSlot = !!this.host.querySelector('[slot=\"title\"]')\n    this.hasFooterSlot = !!this.host.querySelector('[slot=\"footer\"]')\n  }\n\n  public componentWillLoad(): void {\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n\n    autoIncrementingId += 1\n    this.#titleId = `qds-dialog-title-${autoIncrementingId}`\n  }\n\n  public componentDidLoad(): void {\n    if (this.open) this.show()\n  }\n\n  public render() {\n    const hasHeading = this.hasTitleSlot || this.closable === true\n    return (\n      <Host>\n        <dialog\n          class=\"qds-dialog\"\n          ref={this.#ref}\n          onCancel={this.#onCancel}\n          onClose={this.#onClose}\n          onSubmit={this.#onSubmit}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n          aria-labelledby={this.hasTitleSlot ? this.#titleId : undefined}\n        >\n          {hasHeading && (\n            <div class=\"qds-heading\">\n              {this.hasTitleSlot && (\n                <div id={this.#titleId}>\n                  <slot name=\"title\" />\n                </div>\n              )}\n              {this.closable === true && (\n                <qds-icon-button\n                  aria-label=\"close dialog\"\n                  class=\"qds-close-button\"\n                  importance=\"subdued\"\n                  iconName=\"close\"\n                  iconLibrary=\"core\"\n                  onClick={this.#handleCloseClick}\n                  ref={this.#closeButtonRef}\n                />\n              )}\n            </div>\n          )}\n\n          <div class=\"qds-content\">\n            <slot />\n          </div>\n\n          {this.hasFooterSlot && (\n            <div class=\"qds-footer\">\n              <slot name=\"footer\" />\n            </div>\n          )}\n        </dialog>\n        <div class=\"qds-backdrop\" aria-hidden=\"true\" />\n      </Host>\n    )\n  }\n\n  public show(): void {\n    invariant(this.#dialog)\n\n    this.#dialog.showModal()\n    this.open = this.#dialog.open\n    requestAnimationFrame(() => {\n      this.#handleFocus()\n    })\n  }\n\n  public close(): void {\n    invariant(this.#dialog)\n\n    this.#dialog.close()\n  }\n\n  readonly #ref = (dialog?: HTMLDialogElement): void => {\n    this.#dialog = dialog\n  }\n\n  readonly #onCancel = (event: Event): void => {\n    if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n  }\n\n  readonly #onClose = (): void => {\n    invariant(this.#dialog)\n\n    this.closeEmitter.emit()\n    this.open = this.#dialog.open\n  }\n\n  readonly #handleCloseClick = (): void => {\n    this.close()\n  }\n\n  readonly #onSubmit = (event: Event): void => {\n    if (\n      (event instanceof SubmitEvent &&\n        (event.submitter instanceof HTMLButtonElement ||\n          (event.submitter instanceof HTMLInputElement &&\n            event.submitter.formMethod === 'dialog'))) ||\n      (event.target instanceof HTMLFormElement &&\n        event.target.method === 'dialog')\n    ) {\n      event.preventDefault()\n      this.close()\n    }\n  }\n\n  readonly #closeButtonRef = (button?: HTMLQdsIconButtonElement): void => {\n    this.#closeButton = button\n  }\n\n  readonly #handleFocus = (): void => {\n    if (!this.open) return\n\n    const autofocusTarget = this.host.querySelector('[autofocus]')\n    if (autofocusTarget instanceof HTMLElement) {\n      autofocusTarget.focus()\n      return\n    }\n    if (this.closable === true && this.#closeButton) {\n      this.#closeButton.focus()\n    }\n  }\n}\n"],"names":["invariant","inheritAriaAttributes","h","Host"],"mappings":"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"}