@quartzds/core 1.0.0-beta.5 → 1.0.0-beta.51

package/README.md

@@ -1,7 +1,7 @@
 <!--
-SPDX-FileCopyrightText: © 2023 Schneider Electric
+SPDX-FileCopyrightText: © 2024 Schneider Electric
 
-SPDX-License-Identifier: LGPL-2.1-only
+SPDX-License-Identifier: Apache-2.0
 -->
 
 # `@quartzds/core`
@@ -40,11 +40,11 @@ Next, the platform and theme CSS custom properties:
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@quartzds/generic-tokens-core/dist/platform/desktop.css"
+  href="https://unpkg.com/@quartzds/generic-tokens/core/dist/platform/desktop.css"
 />
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@quartzds/generic-tokens-core/dist/theme/light.css"
+  href="https://unpkg.com/@quartzds/generic-tokens/core/dist/theme/light.css"
 />
 ```
 
@@ -53,7 +53,7 @@ Optionally, the dark theme:
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@quartzds/generic-tokens-core/dist/theme/dark.css"
+  href="https://unpkg.com/@quartzds/generic-tokens/core/dist/theme/dark.css"
 />
 ```
 

package/components/checkbox.js

@@ -0,0 +1,208 @@
+/*!
+ * SPDX-FileCopyrightText: © 2024 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
+import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './controls.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './label.js';
+
+const checkboxCss = ":host([hidden]){display:none !important}:host{display:inline-block;line-height:0}.qds-checkbox,.qds-box,.qds-icon{grid-area:checkbox;place-self:center}.qds-icon,.qds-box{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{display:grid;align-self:flex-start;grid-template-areas:'checkbox'}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:hover~.qds-box,.qds-checkbox:active~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:transparent}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size='small']{width:var(--qds-control-toggle-box-small-size);height:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size='small']{width:var(--qds-control-toggle-indicator-small-size);height:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size='small']{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size='small']{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size='standard']{width:var(--qds-control-toggle-box-standard-size);height:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size='standard']{width:var(--qds-control-toggle-indicator-standard-size);height:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size='standard']{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size='standard']{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size='large']{width:var(--qds-control-toggle-box-large-size);height:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size='large']{width:var(--qds-control-toggle-indicator-large-size);height:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size='large']{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size='large']{gap:var(--qds-control-large-gap-siblings-related)}";
+const QdsCheckboxStyle0 = checkboxCss;
+
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.changeEmitter = createEvent(this, "qdsChange", 6);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.internals = this.attachInternals();
+        this.inheritedAttributes = {};
+        this.ref = (checkbox) => {
+            this.input = checkbox;
+        };
+        this.onBlur = (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        };
+        this.onFocus = (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        };
+        this.checkValidity = () => this.internals.checkValidity();
+        this.reportValidity = () => this.internals.reportValidity();
+        this.setCustomValidity = (error) => {
+            if (error)
+                this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.input);
+            else
+                this.internals.setValidity(NO_ERROR_FLAGS);
+        };
+        this.inline = false;
+        this.size = 'standard';
+        this.text = undefined;
+        this.autoFocus = undefined;
+        this.checked = undefined;
+        this.disabled = undefined;
+        this.form = null;
+        this.indeterminate = undefined;
+        this.name = undefined;
+        this.required = undefined;
+        this.validationMessage = '';
+        this.validity = VALID_STATE;
+        this.value = 'on';
+        this.willValidate = false;
+        this.tabIndex = undefined;
+    }
+    get computedChecked() {
+        return this.checked ?? false;
+    }
+    get computedDisabled() {
+        return ((this.element.matches(':disabled') || (this.disabled ?? false)) &&
+            this.element.getAttribute('disabled') !== 'false');
+    }
+    get computedIndeterminate() {
+        return this.indeterminate ?? false;
+    }
+    get computedSize() {
+        switch (this.size) {
+            case 'standard':
+            case 'small':
+            case 'large': {
+                return this.size;
+            }
+            default: {
+                return 'standard';
+            }
+        }
+    }
+    get computedValue() {
+        // eslint-disable-next-line unicorn/no-null
+        return this.value == null ? null : this.value.toString();
+    }
+    get hasText() {
+        return ((this.text !== undefined && this.text !== '') || this.required === true);
+    }
+    onClick(event) {
+        if (this.computedDisabled) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        event.preventDefault();
+        this.checked = this.computedIndeterminate ? true : !this.computedChecked;
+        this.changeEmitter.emit();
+        this.indeterminate = false;
+    }
+    checkedChanged() {
+        this.internals.setFormValue(this.computedChecked && !this.computedDisabled
+            ? this.computedValue
+            : // eslint-disable-next-line unicorn/no-null
+                null);
+    }
+    disabledChanged() {
+        if (this.computedChecked && !this.computedDisabled)
+            this.internals.setFormValue(this.computedValue);
+        // eslint-disable-next-line unicorn/no-null
+        else
+            this.internals.setFormValue(null);
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    valueChanged() {
+        if (this.computedChecked && !this.computedDisabled)
+            this.internals.setFormValue(this.computedValue);
+    }
+    componentWillLoad() {
+        this.valueChanged();
+        this.defineGetter('form', () => this.internals.form);
+        this.defineGetter('willValidate', () => this.internals.willValidate);
+        this.defineGetter('validity', () => this.internals.validity);
+        this.defineGetter('validationMessage', () => this.internals.validationMessage);
+        this.defineGetter('checkValidity', () => this.checkValidity);
+        this.defineGetter('reportValidity', () => this.reportValidity);
+        this.defineGetter('setCustomValidity', () => this.setCustomValidity);
+        this.inheritedAttributes = inheritAriaAttributes(this.element);
+        this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0');
+    }
+    render() {
+        return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        h("label", { key: 'cd4689a54ca17ef1544e56cd5cd0e82f3efd84b8', "aria-disabled": this.computedDisabled ? 'true' : undefined, class: {
+                'qds-inline': this.inline,
+                'qds-label': true,
+            }, "data-size": this.computedSize }, h("div", { key: '58e279291650ed3f8257f32f1e226062db326c51', class: "qds-container" }, h("input", { key: '470c04f8e97e5b63224f86114940389574171c7b',
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "qds-checkbox", "data-size": this.computedSize, disabled: this.computedDisabled, indeterminate: this.indeterminate, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, tabIndex: this.computedDisabled ? undefined : this.tabIndex, type: "checkbox", ...this.inheritedAttributes }), h("qds-icon", { key: 'e44208a9d7fd03be8653cf1c02a4ee11f9cffd63', "aria-hidden": "true", class: {
+                'qds-icon': true,
+                'qds-checked': true,
+            }, "data-size": this.computedSize, library: "core", name: "checked" }), h("div", { key: 'd36bf69de5e032cc2d764834292fcc481745d163', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: '3404a948a2ebda3364b0e7b9302437c54ae1e3d3', "aria-hidden": "true", class: {
+                'qds-icon': true,
+                'qds-indeterminate': true,
+            }, "data-size": this.computedSize, library: "core", name: "indeterminate" })), this.hasText && (h("qds-label", { key: '636810006f8fd9664e201ee2f5f4d7f9b19a289c', required: this.required, size: this.size, text: this.text }))));
+    }
+    defineGetter(p, get) {
+        Object.defineProperty(this.element, p, { enumerable: true, get });
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get element() { return this; }
+    static get watchers() { return {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return QdsCheckboxStyle0; }
+}, [81, "qds-checkbox", {
+        "inline": [4],
+        "size": [1],
+        "text": [1],
+        "autoFocus": [4, "autofocus"],
+        "checked": [1028],
+        "disabled": [4],
+        "form": [1],
+        "indeterminate": [1028],
+        "name": [1],
+        "required": [4],
+        "validationMessage": [1, "validation-message"],
+        "validity": [16],
+        "value": [8],
+        "willValidate": [4, "will-validate"],
+        "tabIndex": [32]
+    }, [[0, "click", "onClick"]], {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "value": ["valueChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-checkbox", "qds-icon", "qds-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Checkbox);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "qds-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Checkbox as C, defineCustomElement as d };
+
+//# sourceMappingURL=checkbox.js.map

package/components/checkbox.js.map

@@ -0,0 +1 @@
+{"file":"checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.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: inline-block;\n  line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n  grid-area: checkbox;\n  place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n  display: none;\n  pointer-events: none;\n}\n\n.qds-box {\n  border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n  display: grid;\n  align-self: flex-start;\n  grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n  color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n  cursor: pointer;\n  display: inline-flex;\n}\n\n.qds-checkbox {\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  cursor: pointer;\n  margin: 0;\n  print-color-adjust: exact;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:hover ~ .qds-box,\n  &:active ~ .qds-box {\n    display: block;\n  }\n\n  &:hover ~ .qds-box {\n    background-color: var(--qds-theme-signature-color-hover);\n  }\n\n  &:active ~ .qds-box {\n    background-color: var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked ~ .qds-checked,\n  &:indeterminate ~ .qds-indeterminate {\n    display: block;\n  }\n\n  &:checked,\n  &:indeterminate {\n    background-color: var(--qds-theme-signature-color-default);\n    border-color: transparent;\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-small-size);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-small-size);\n    height: var(--qds-control-toggle-indicator-small-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-standard-size);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-standard-size);\n    height: var(--qds-control-toggle-indicator-standard-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &.qds-checkbox {\n    width: var(--qds-control-toggle-box-large-size);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-box {\n    width: var(--qds-control-toggle-indicator-large-size);\n    height: var(--qds-control-toggle-indicator-large-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-large-gap-siblings-related);\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  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number | string | null\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n  tag: 'qds-checkbox',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n  /**\n   * Adds vertical margin to the checkbox for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * The checkbox's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * The checkbox's text.\n   */\n  @Prop() public readonly text?: string\n\n  /**\n   * Specify whether the checkbox should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Sets the checkbox's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Prevents the checkbox from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The [`<form>`][] element to associate the checkbox with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-checkbox>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-checkbox>` 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   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Sets the checkbox to an indeterminate state. This is usually applied to\n   * checkboxes that represent a \"select all/none\" behavior when associated\n   * checkboxes have a mix of checked and unchecked states.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public indeterminate?: boolean\n\n  /**\n   * The name of the checkbox, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * A value must be specified for the checkbox before the owning form can be\n   * submitted.\n   *\n   * See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * and the\n   * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The error message that would be shown to the user if the `<qds-checkbox>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-checkbox>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n  /**\n   * The value of the checkbox, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: CheckboxValue = 'on'\n\n  /**\n   * True if `<qds-checkbox>` will be validated when the form is submitted;\n   * false otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the checkbox gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsCheckboxElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  private get computedDisabled(): boolean {\n    return (\n      (this.element.matches(':disabled') || (this.disabled ?? false)) &&\n      this.element.getAttribute('disabled') !== 'false'\n    )\n  }\n\n  private get computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  private 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  private get computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\n  }\n\n  private get hasText(): boolean {\n    return (\n      (this.text !== undefined && this.text !== '') || this.required === true\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    this.checked = this.computedIndeterminate ? true : !this.computedChecked\n    this.changeEmitter.emit()\n    this.indeterminate = false\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\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.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): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\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    this.valueChanged()\n\n    this.defineGetter('form', () => this.internals.form)\n    this.defineGetter('willValidate', () => this.internals.willValidate)\n    this.defineGetter('validity', () => this.internals.validity)\n    this.defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.defineGetter('checkValidity', () => this.checkValidity)\n    this.defineGetter('reportValidity', () => this.reportValidity)\n    this.defineGetter('setCustomValidity', () => this.setCustomValidity)\n\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n    this.tabindexChanged(this.element.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label\n        aria-disabled={this.computedDisabled ? 'true' : undefined}\n        class={{\n          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.computedSize}\n      >\n        <div class=\"qds-container\">\n          <input\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={this.autoFocus}\n            checked={this.computedIndeterminate ? false : this.checked}\n            class=\"qds-checkbox\"\n            data-size={this.computedSize}\n            disabled={this.computedDisabled}\n            indeterminate={this.indeterminate}\n            onBlur={this.onBlur}\n            onFocus={this.onFocus}\n            ref={this.ref}\n            required={this.required}\n            tabIndex={this.computedDisabled ? undefined : this.tabIndex}\n            type=\"checkbox\"\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...this.inheritedAttributes}\n          />\n          <qds-icon\n            aria-hidden=\"true\"\n            class={{\n              'qds-icon': true,\n              'qds-checked': true,\n            }}\n            data-size={this.computedSize}\n            library=\"core\"\n            name=\"checked\"\n          />\n          <div class=\"qds-box\" data-size={this.computedSize} />\n          <qds-icon\n            aria-hidden=\"true\"\n            class={{\n              'qds-icon': true,\n              'qds-indeterminate': true,\n            }}\n            data-size={this.computedSize}\n            library=\"core\"\n            name=\"indeterminate\"\n          />\n        </div>\n        {this.hasText && (\n          <qds-label\n            required={this.required}\n            size={this.size}\n            text={this.text}\n          />\n        )}\n      </label>\n    )\n  }\n\n  private readonly ref = (checkbox?: HTMLInputElement): void => {\n    this.input = checkbox\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.element, p, { enumerable: true, get })\n  }\n\n  private readonly checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  private readonly reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  private readonly setCustomValidity: HTMLInputElement['setCustomValidity'] = (\n    error,\n  ) => {\n    if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.input)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n}\n"],"version":3}

package/components/controls.js

@@ -0,0 +1,27 @@
+/*!
+ * SPDX-FileCopyrightText: © 2024 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+const CUSTOM_ERROR_FLAGS = { customError: true };
+const NO_ERROR_FLAGS = {};
+const VALID_STATE = {
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valid: true,
+    valueMissing: false,
+};
+
+export { CUSTOM_ERROR_FLAGS as C, NO_ERROR_FLAGS as N, VALID_STATE as V };
+
+//# sourceMappingURL=controls.js.map

package/components/controls.js.map

@@ -0,0 +1 @@
+{"file":"controls.js","mappings":";;;;;AAAA;AACA;AACA;MAmFa,kBAAkB,GAAuB,EAAE,WAAW,EAAE,IAAI,GAAE;MAC9D,cAAc,GAAuB,GAAE;MACvC,WAAW,GAAkB;IACxC,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,KAAK;IAClB,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,KAAK;IACrB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,KAAK;;;;;","names":[],"sources":["src/components/controls.ts"],"sourcesContent":["// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nexport type AutoComplete =\n  | 'additional-name'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'bday'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-exp'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country-name'\n  | 'country'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'tel'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'\nexport type AutoCapitalize =\n  | 'characters'\n  | 'none'\n  | 'off'\n  | 'on'\n  | 'sentences'\n  | 'words'\nexport type EnterKeyHint =\n  | 'done'\n  | 'enter'\n  | 'go'\n  | 'next'\n  | 'previous'\n  | 'search'\n  | 'send'\nexport type InputMode =\n  | 'decimal'\n  | 'email'\n  | 'none'\n  | 'numeric'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'url'\nexport type Value = number | string | null\n\nexport const CUSTOM_ERROR_FLAGS: ValidityStateFlags = { customError: true }\nexport const NO_ERROR_FLAGS: ValidityStateFlags = {}\nexport const VALID_STATE: ValidityState = {\n  badInput: false,\n  customError: false,\n  patternMismatch: false,\n  rangeOverflow: false,\n  rangeUnderflow: false,\n  stepMismatch: false,\n  tooLong: false,\n  tooShort: false,\n  typeMismatch: false,\n  valid: true,\n  valueMissing: false,\n}\n"],"version":3}