@quartzds/core 1.0.0-beta.9 → 1.0.0-beta.90

package/dist/esm/qds-standalone-link.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-standalone-link.entry.js","mappings":"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","names":[],"sources":["src/components/standalone-link/standalone-link.css?tag=qds-standalone-link&encapsulation=shadow","src/components/standalone-link/standalone-link.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}\n\n.qds-icon-crop {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n\n.qds-icon {\n  flex-shrink: 0;\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-standalone-link {\n  border-radius: var(--qds-focus-border-radius);\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  print-color-adjust: exact;\n  text-decoration: none;\n  width: 100%;\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,\n  &:active {\n    text-decoration: underline;\n  }\n}\n\n.qds-text {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n}\n\n[data-importance='subdued'] {\n  color: var(--qds-theme-link-subdued-default);\n\n  &:visited.qds-visitable {\n    color: var(--qds-theme-link-visited-default);\n  }\n\n  &:hover {\n    color: var(--qds-theme-link-subdued-hover);\n  }\n\n  &:active {\n    color: var(--qds-theme-link-subdued-pressed);\n  }\n\n  &:visited:hover.qds-visitable {\n    color: var(--qds-theme-link-visited-hover);\n  }\n\n  &:visited:active.qds-visitable {\n    color: var(--qds-theme-link-visited-pressed);\n  }\n}\n\n[data-importance='standard'] {\n  color: var(--qds-theme-link-standard-default);\n\n  &:visited.qds-visitable {\n    color: var(--qds-theme-link-visited-default);\n  }\n\n  &:hover {\n    color: var(--qds-theme-link-standard-hover);\n  }\n\n  &:active {\n    color: var(--qds-theme-link-standard-pressed);\n  }\n\n  &:visited:hover.qds-visitable {\n    color: var(--qds-theme-link-visited-hover);\n  }\n\n  &:visited:active.qds-visitable {\n    color: var(--qds-theme-link-visited-pressed);\n  }\n}\n\n[data-importance='emphasized'] {\n  color: var(--qds-theme-link-emphasized-default);\n\n  &:visited.qds-visitable {\n    color: var(--qds-theme-link-visited-default);\n  }\n\n  &:hover {\n    color: var(--qds-theme-link-emphasized-hover);\n  }\n\n  &:active {\n    color: var(--qds-theme-link-emphasized-pressed);\n  }\n\n  &:visited:hover.qds-visitable {\n    color: var(--qds-theme-link-visited-hover);\n  }\n\n  &:visited:active.qds-visitable {\n    color: var(--qds-theme-link-visited-pressed);\n  }\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.qds-standalone-link {\n    font: var(--qds-control-small-link);\n    gap: var(--qds-control-small-gap-internal);\n    padding-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &[data-importance='subdued'] {\n    font: var(--qds-control-small-text);\n  }\n\n  &.qds-icon-crop {\n    height: var(--qds-control-small-icon-crop-height);\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-standalone-link {\n    font: var(--qds-control-standard-link);\n    gap: var(--qds-control-standard-gap-internal);\n    padding-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &[data-importance='subdued'] {\n    font: var(--qds-control-standard-text);\n  }\n\n  &.qds-icon-crop {\n    height: var(--qds-control-standard-icon-crop-height);\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-standalone-link {\n    font: var(--qds-control-large-link);\n    gap: var(--qds-control-large-gap-internal);\n    padding-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &[data-importance='subdued'] {\n    font: var(--qds-control-large-text);\n  }\n\n  &.qds-icon-crop {\n    height: var(--qds-control-large-icon-crop-height);\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\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  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n  attachInternals,\n  determineLinkIcon,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, LinkIcon, Size, Target } from '../shared'\n\n/**\n * `<qds-standalone-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-standalone-link>` *should* indicate the standalone link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-standalone-link>` element will activate it.\n *\n * @slot Content to display for the standalone link.\n * @see https://quartz.se.com/build/components/standalone-link\n */\n@Component({\n  tag: 'qds-standalone-link',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'standalone-link.css',\n})\nexport class StandaloneLink implements ComponentInterface {\n  /**\n   * Prevents the standalone link from being interacted with: it cannot be pressed\n   * or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\n\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 standalone link's importance.\n   */\n  @Prop() public readonly importance?: Importance = 'standard'\n\n  /**\n   * The standalone link's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Defines if the standalone link will display the visited state.\n   */\n  @Prop() public readonly visitable: boolean = false\n\n  /**\n   * Causes the browser to treat the linked URL as a download. Can be used with\n   * or without a `filename` value:\n   *\n   * - Without a value, the browser will suggest a filename/extension,\n   * generated from various sources:\n   *\n   *   - The\n   *   [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n   *   HTTP header\n   *   - The final segment in the URL\n   *   [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n   *   - The\n   *   [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n   *   (from the\n   *   [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n   *   header, the start of a\n   *   [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n   *   or\n   *   [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n   *   for a\n   *   [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n   * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n   * characters are converted to underscores (`_`). Filesystems may forbid\n   * other characters in filenames, so browsers will adjust the suggested name\n   * if necessary.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: boolean | string\n\n  /**\n   * The URL that the standalone link points to. Standalone links are not restricted to\n   * HTTP-based URLs — they can use any URL scheme supported by browsers:\n   *\n   * - Sections of a page with document fragments\n   * - Specific text portions with\n   * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n   * - Pieces of media files with media fragments\n   * - Telephone numbers with `tel:` URLs\n   * - Email addresses with `mailto:` URLs\n   * - While web browsers may not support other URL schemes, websites can with\n   * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: URL | string\n\n  /**\n   * Hints at the human language of the linked URL. No built-in functionality.\n   * Allowed values are the same as\n   * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n   *\n   * @webnative\n   */\n  @Prop() public readonly hreflang?: string\n\n  /**\n   * How much of the\n   * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * to send when following the standalone link.\n   *\n   * - `no-referrer`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent.\n   * - `no-referrer-when-downgrade`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent to\n   * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n   * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n   * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n   * - `origin`: The sent referrer will be limited to the origin of the\n   * referring page: its\n   * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n   * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n   * [port](https://developer.mozilla.org/docs/Glossary/Port).\n   * - `origin-when-cross-origin`: The referrer sent to other origins will be\n   * limited to the scheme, the host, and the port. Navigations on the same\n   * origin will still include the path.\n   * - `same-origin`: A referrer will be sent for\n   * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n   * but cross-origin requests will contain no referrer information.\n   * - `strict-origin`: Only send the origin of the document as the referrer\n   * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n   * send it to a less secure destination (HTTPS→HTTP).\n   * - `strict-origin-when-cross-origin` (default): Send a full URL when\n   * performing a same-origin request, only send the origin when the protocol\n   * security level stays the same (HTTPS→HTTPS), and send no header to a less\n   * secure destination (HTTPS→HTTP).\n   * - `unsafe-url`: The referrer will include the origin and the path (but not the\n   * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n   * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n   * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n   * **This value is unsafe** because it leaks origins and paths from\n   * TLS-protected resources to insecure origins.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'referrerpolicy' })\n  public readonly referrerPolicy?: ReferrerPolicy\n\n  /**\n   * The relationship of the linked URL as space-separated\n   * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n   *\n   * The following list includes some of the most important existing keywords.\n   * Every keyword within a space-separated value should be unique within that\n   * value.\n   *\n   * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n   * Alternate representations of the current document.\n   * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n   * Author of the current document or article.\n   * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n   * Permalink for the nearest ancestor section.\n   * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n   * The referenced document is not part of the same site as the current\n   * document. An icon will be rendered next to the text if this value is\n   * specified.\n   * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n   * Link to context-sensitive help.\n   * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n   * Indicates that the main content of the current document is covered by the\n   * copyright license described by the referenced document.\n   * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n   * Indicates that the current document represents the person who owns the\n   * linked content.\n   * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n   * Indicates that the current document is a part of a series and that the\n   * next document in the series is the referenced document.\n   * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n   * Indicates that the current document's original author or publisher does\n   * not endorse the referenced document.\n   * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n   * Creates a top-level browsing context that is not an auxiliary browsing\n   * context if the hyperlink would create either of those, to begin with (i.e.,\n   * has an appropriate `target` attribute value).\n   * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n   * No `Referer` header will be included. Additionally, has the same effect as\n   * `noopener`.\n   * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n   * Creates an auxiliary browsing context if the hyperlink would otherwise\n   * create a top-level browsing context that is not an auxiliary browsing\n   * context (i.e., has \"`_blank`\" as `target` attribute value).\n   * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n   * Indicates that the current document is a part of a series and that the\n   * previous document in the series is the referenced document.\n   * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n   * Gives a link to a resource that can be used to search through the current\n   * document and its related pages.\n   * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n   * Gives a tag (identified by the given address) that applies to the current\n   * document.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target?: LiteralUnion<Target, string>\n\n  /**\n   * Emitted when the standalone link loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the standalone link gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private linkIcon?: LinkIcon\n\n  @State() private tabIndex?: number\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  readonly #internals: ElementInternals = attachInternals.call(this)\n\n  get #computedImportance(): Importance {\n    switch (this.importance) {\n      case 'subdued':\n      case 'emphasized': {\n        return this.importance\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedSize(): Size | undefined {\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  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.#internals.ariaDisabled = this.disabled.toString()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    // FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests\n    // to fail, but it's not clear why this is the case since it works for\n    // other components.\n    this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  @Watch('href')\n  @Watch('target')\n  protected hrefTargetChanged(): void {\n    this.linkIcon = determineLinkIcon(this.href, this.target)\n  }\n\n  public componentWillLoad(): void {\n    this.#internals.role = 'link'\n\n    this.disabledChanged()\n    this.hrefTargetChanged()\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    this.#internals.ariaLabel = this.host.textContent\n  }\n\n  public render() {\n    return (\n      <a\n        aria-hidden=\"true\"\n        class={{\n          'qds-standalone-link': true,\n          'qds-disabled': this.disabled,\n          'qds-visitable': this.visitable,\n        }}\n        data-importance={this.#computedImportance}\n        data-size={this.#computedSize}\n        download={this.download}\n        href={this.href?.toString()}\n        hrefLang={this.hreflang}\n        onBlur={this.#onBlur}\n        onFocus={this.#onFocus}\n        referrerPolicy={this.referrerPolicy}\n        rel={this.rel}\n        tabIndex={this.disabled ? -1 : this.tabIndex}\n        target={this.target}\n      >\n        {this.iconName !== undefined && this.iconName !== '' && (\n          <span class=\"qds-icon-crop\" data-size={this.#computedSize}>\n            <qds-icon\n              class=\"qds-icon\"\n              data-size={this.#computedSize}\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          </span>\n        )}\n        <span class=\"qds-text\">\n          <slot onSlotchange={this.#onSlotchange} />\n        </span>\n        {this.linkIcon && (\n          <span class=\"qds-icon-crop\" data-size={this.#computedSize}>\n            <qds-icon\n              class=\"qds-icon\"\n              library=\"core\"\n              data-size={this.#computedSize}\n              name={this.linkIcon}\n            />\n          </span>\n        )}\n        {this.importance === 'emphasized' && (\n          <span class=\"qds-icon-crop\" data-size={this.#computedSize}>\n            <qds-icon\n              class=\"qds-icon\"\n              data-size={this.#computedSize}\n              library=\"core\"\n              name=\"next\"\n            />\n          </span>\n        )}\n      </a>\n    )\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onSlotchange = (): void => {\n    this.#internals.ariaLabel = this.host.textContent\n  }\n}\n"],"version":3}

package/dist/esm/qds-switch.entry.js

@@ -1,74 +1,203 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-d7183092.js';
-import { p as pickFocusEventAttributes, i as inheritAriaAttributes, b as inheritAttributes } from './helpers-76b84f45.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
+import { p as pickFocusEventAttributes, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
+import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-a4768aaf.js';
 
-const switchCss = ".sc-qds-switch-h{box-sizing:border-box}[hidden].sc-qds-switch-h{display:none !important}.sc-qds-switch-h *.sc-qds-switch,.sc-qds-switch-h *.sc-qds-switch::before,.sc-qds-switch-h *.sc-qds-switch::after{box-sizing:inherit}.sc-qds-switch-h{display:inline-block}.track.sc-qds-switch,.knob.sc-qds-switch{-webkit-print-color-adjust:exact;print-color-adjust:exact}.unchecked-text.sc-qds-switch{text-align:end}.icon.sc-qds-switch{color:var(--qds-theme-control-text-standard);flex-shrink:0}.track.sc-qds-switch{align-items:center;border-radius:var(--qds-control-rounded-border-radius);display:flex;flex-shrink:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:var(--qds-theme-control-slider-track-inactive)}.knob.sc-qds-switch{background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-control-rounded-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:content-box}.label.sc-qds-switch{cursor:pointer;display:flex}.switch.sc-qds-switch{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0;position:absolute;white-space:nowrap;width:1px}.switch.sc-qds-switch:hover~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-hover)}.switch.sc-qds-switch:active~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-pressed)}.switch.sc-qds-switch:checked~.track.sc-qds-switch{justify-content:flex-end;background-color:var(--qds-theme-signature-color-default)}.switch.sc-qds-switch:checked~.track.sc-qds-switch>.knob.sc-qds-switch{border-color:transparent;box-sizing:border-box;-webkit-margin-end:var(--qds-control-border-width);margin-inline-end:var(--qds-control-border-width)}.switch.sc-qds-switch:checked:hover~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-hover)}.switch.sc-qds-switch:checked:active~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-pressed)}.switch.sc-qds-switch:focus-visible~.track.sc-qds-switch{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}[aria-disabled='true'].sc-qds-switch{opacity:var(--qds-theme-disabled);pointer-events:none}.icon[data-size='small'].sc-qds-switch{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.inline[data-size='small'].sc-qds-switch{margin-block:var(--qds-control-small-padding-auto-height)}.label[data-size='small'].sc-qds-switch{gap:var(--qds-control-small-gap-siblings-related)}.track[data-size='small'].sc-qds-switch{width:calc(var(--qds-control-slider-knob-small-size) * 2);height:var(--qds-control-toggle-box-small-size)}.knob[data-size='small'].sc-qds-switch{height:var(--qds-control-slider-knob-small-size);width:var(--qds-control-slider-knob-small-size)}.icon[data-size='standard'].sc-qds-switch{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.inline[data-size='standard'].sc-qds-switch{margin-block:var(--qds-control-standard-padding-auto-height)}.label[data-size='standard'].sc-qds-switch{gap:var(--qds-control-standard-gap-siblings-related)}.track[data-size='standard'].sc-qds-switch{width:calc(var(--qds-control-slider-knob-standard-size) * 2);height:var(--qds-control-toggle-box-standard-size)}.knob[data-size='standard'].sc-qds-switch{height:var(--qds-control-slider-knob-standard-size);width:var(--qds-control-slider-knob-standard-size)}.icon[data-size='large'].sc-qds-switch{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.inline[data-size='large'].sc-qds-switch{margin-block:var(--qds-control-large-padding-auto-height)}.label[data-size='large'].sc-qds-switch{gap:var(--qds-control-large-gap-siblings-related)}.track[data-size='large'].sc-qds-switch{width:calc(var(--qds-control-slider-knob-large-size) * 2);height:var(--qds-control-toggle-box-large-size)}.knob[data-size='large'].sc-qds-switch{height:var(--qds-control-slider-knob-large-size);width:var(--qds-control-slider-knob-large-size)}";
+const switchCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-knob,.qds-track{-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-track{align-items:center;background-color:var(--qds-theme-control-toggle-track-default);border-radius:var(--qds-control-toggle-track-border-radius);box-sizing:border-box;display:flex;flex-shrink:0;padding:var(--qds-control-toggle-track-padding)}.qds-track:hover{background-color:var(--qds-theme-control-toggle-track-hover)}.qds-track:active{background-color:var(--qds-theme-control-toggle-track-pressed)}.qds-knob{background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-knob-border-radius);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:border-box;margin:0}.qds-container{box-sizing:border-box;cursor:pointer;display:flex}.qds-switch{clip-path:inset(50%);height:1px;margin:0;position:absolute;white-space:nowrap;width:1px}.qds-switch:focus-visible~.qds-track{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-switch:checked~.qds-track{background-color:var(--qds-theme-signature-color-default);justify-content:flex-end}.qds-switch:checked~.qds-track:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-switch:checked~.qds-track:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-track[data-size=small]{height:var(--qds-control-toggle-track-small-size);width:var(--qds-control-toggle-track-small-width)}.qds-knob[data-size=small]{height:var(--qds-control-knob-small-size);width:var(--qds-control-knob-small-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-track[data-size=standard]{height:var(--qds-control-toggle-track-standard-height);width:var(--qds-control-toggle-track-standard-width)}.qds-knob[data-size=standard]{height:var(--qds-control-knob-standard-size);width:var(--qds-control-knob-standard-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-track[data-size=large]{height:var(--qds-control-toggle-track-large-height);width:calc(var(--qds-control-toggle-track-large-height)*2)}.qds-knob[data-size=large]{height:var(--qds-control-knob-large-size);width:var(--qds-control-knob-large-size)}";
+const QdsSwitchStyle0 = switchCss;
 
-let autoIncrementingId = 1;
+// 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 _Switch_instances, _Switch_computedChecked_get, _Switch_computedDisabled_get, _Switch_computedSize_get, _Switch_computedValue_get, _Switch_onBlur, _Switch_onFocus, _Switch_defineGetter, _Switch_updateFormValue;
 const Switch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.blurEmitter = createEvent(this, "qdsBlur", 2);
-    this.changeEmitter = createEvent(this, "qdsChange", 6);
-    this.focusEmitter = createEvent(this, "qdsFocus", 2);
-    this.inheritedAttributes = {};
-    this.onBlur = (event) => {
-      this.blurEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.onFocus = (event) => {
-      this.focusEmitter.emit(pickFocusEventAttributes(event));
-    };
-    this.inline = false;
-    this.iconCheckedName = undefined;
-    this.iconCheckedLibrary = 'default';
-    this.iconUncheckedName = undefined;
-    this.iconUncheckedLibrary = 'default';
-    this.size = 'standard';
-    this.textChecked = undefined;
-    this.textUnchecked = undefined;
-    this.autoFocus = undefined;
-    this.checked = undefined;
-    this.disabled = undefined;
-    this.form = undefined;
-    this.name = `qds-switch-${autoIncrementingId}`;
-    this.value = undefined;
-  }
-  get computedDisabled() {
-    return this.disabled ?? false;
-  }
-  onClick(event) {
-    if (this.computedDisabled)
-      return;
-    event.preventDefault();
-    this.checked = !(this.checked ?? false);
-    this.changeEmitter.emit();
-  }
-  componentWillLoad() {
-    autoIncrementingId += 1;
-    this.inheritedAttributes = {
-      ...inheritAriaAttributes(this.element),
-      ...inheritAttributes(this.element, ['tabindex']),
-    };
-  }
-  render() {
-    return (
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    h("label", { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
-        inline: this.inline,
-        label: true,
-      }, "data-size": this.size }, this.textUnchecked !== undefined && this.textUnchecked !== '' && (h("qds-label", { class: "unchecked-text", size: this.size, text: this.textUnchecked })), this.iconUncheckedName !== undefined &&
-      this.iconUncheckedName !== '' && (h("qds-icon", { class: "icon", "data-size": this.size, library: this.iconUncheckedLibrary, name: this.iconUncheckedName })), h("input", {
-      // eslint-disable-next-line jsx-a11y/no-autofocus
-      autoFocus: this.autoFocus, checked: this.checked, class: "switch", disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes
-    }), h("div", { class: "track", "data-size": this.size }, h("div", { class: "knob", "data-size": this.size })), this.iconCheckedName !== undefined && this.iconCheckedName !== '' && (h("qds-icon", { class: "icon", "data-size": this.size, library: this.iconCheckedLibrary, name: this.iconCheckedName })), this.textChecked !== undefined && this.textChecked !== '' && (h("qds-label", { size: this.size, text: this.textChecked }))));
-  }
-  get element() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.changeEmitter = createEvent(this, "qdsChange", 6);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        _Switch_instances.add(this);
+        /**
+         * Adds vertical margin to the switch for alignment.
+         *
+         * This is useful when creating inline layouts so that the first lines have
+         * the correct vertical centering.
+         */
+        this.inline = false;
+        /**
+         * The switches's size.
+         */
+        this.size = 'standard';
+        /**
+         * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+         * element to associate the switch 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-switch>` is associated
+         * with its ancestor `<form>` element, if any.
+         *
+         * This property lets you associate `<qds-switch>` 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;
+        /**
+         * Returns a list of the [`<label>`][] elements associated with the
+         * `qds-switch` element.
+         *
+         * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
+         *
+         * @readonly
+         * @webnative
+         */
+        // eslint-disable-next-line unicorn/no-null
+        this.labels = null;
+        /**
+         * The error message that would be shown to the user if the `<qds-switch>`
+         * was to be checked for validity.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validationMessage = '';
+        /**
+         * The [`ValidityState`][] object for this `<qds-switch>`.
+         *
+         * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validity = VALID_STATE;
+        /**
+         * True if `<qds-switch>` will be validated when the form is submitted;
+         * false otherwise.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.willValidate = false;
+        this.inheritedAttributes = {};
+        this.checkValidity = () => this.internals.checkValidity();
+        this.reportValidity = () => this.internals.reportValidity();
+        this.setCustomValidity = (error) => {
+            if (error)
+                this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host);
+            else
+                this.internals.setValidity(NO_ERROR_FLAGS);
+        };
+        _Switch_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _Switch_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        });
+    }
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        event.preventDefault();
+        this.checked = !__classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedChecked_get);
+        this.changeEmitter.emit();
+    }
+    checkedChanged() {
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_updateFormValue).call(this);
+        this.internals.ariaChecked = __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedChecked_get).toString();
+    }
+    disabledChanged() {
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_updateFormValue).call(this);
+        this.internals.ariaDisabled = __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get).toString();
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    valueChanged() {
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_updateFormValue).call(this);
+    }
+    componentWillLoad() {
+        this.internals.role = 'switch';
+        this.checkedChanged();
+        this.disabledChanged();
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_defineGetter).call(this, 'form', () => this.internals.form);
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_defineGetter).call(this, 'labels', () => this.internals.labels);
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_defineGetter).call(this, 'validationMessage', () => this.internals.validationMessage);
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_defineGetter).call(this, 'validity', () => this.internals.validity);
+        __classPrivateFieldGet(this, _Switch_instances, "m", _Switch_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+    }
+    render() {
+        return (h("div", { key: '342bf6f92bda0c26d06847b697962507f44ba66f', class: {
+                'qds-container': true,
+                'qds-disabled': __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get),
+                'qds-inline': this.inline,
+            }, "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("input", { key: '101c463e6970cd79c3776cf7d8e9328e3c4d8fee', "aria-hidden": "true",
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: this.host.autofocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _Switch_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Switch_onFocus, "f"), tabIndex: __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '58a9e90c1b9df6aec5c7dec6b95544003bc82def', class: "qds-track", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("div", { key: '14745582855113a1015c7d076cb8e157298af6b9', class: "qds-knob", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+_Switch_onBlur = new WeakMap(), _Switch_onFocus = new WeakMap(), _Switch_instances = new WeakSet(), _Switch_computedChecked_get = function _Switch_computedChecked_get() {
+    return this.checked ?? false;
+}, _Switch_computedDisabled_get = function _Switch_computedDisabled_get() {
+    return ((this.host.matches(':disabled') || (this.disabled ?? false)) &&
+        this.host.getAttribute('disabled') !== 'false');
+}, _Switch_computedSize_get = function _Switch_computedSize_get() {
+    switch (this.size) {
+        case 'standard':
+        case 'small':
+        case 'large': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _Switch_computedValue_get = function _Switch_computedValue_get() {
+    // eslint-disable-next-line unicorn/no-null
+    return this.value == null ? null : this.value.toString();
+}, _Switch_defineGetter = function _Switch_defineGetter(p, get) {
+    Object.defineProperty(this.host, p, { enumerable: true, get });
+}, _Switch_updateFormValue = function _Switch_updateFormValue() {
+    this.internals.setFormValue(__classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedChecked_get) && !__classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get)
+        ? __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedValue_get)
+        : // eslint-disable-next-line unicorn/no-null
+            null);
 };
-Switch.style = switchCss;
+Switch.style = QdsSwitchStyle0;
 
 export { Switch as qds_switch };
 

package/dist/esm/qds-switch.entry.js.map

@@ -1 +1 @@
-{"file":"qds-switch.entry.js","mappings":"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","names":[],"sources":["src/components/switch/switch.css?tag=qds-switch&encapsulation=scoped","src/components/switch/switch.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.track,\n.knob {\n  print-color-adjust: exact;\n}\n\n.unchecked-text {\n  text-align: end;\n}\n\n.icon {\n  color: var(--qds-theme-control-text-standard);\n  flex-shrink: 0;\n}\n\n.track {\n  align-items: center;\n  border-radius: var(--qds-control-rounded-border-radius);\n  display: flex;\n  flex-shrink: 0;\n  print-color-adjust: exact;\n  background-color: var(--qds-theme-control-slider-track-inactive);\n}\n\n.knob {\n  background-color: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-control-rounded-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: content-box;\n}\n\n.label {\n  cursor: pointer;\n  display: flex;\n}\n\n.switch {\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n\n  &:hover ~ .track > .knob {\n    background-color: var(--qds-theme-interactive-background-hover);\n  }\n\n  &:active ~ .track > .knob {\n    background-color: var(--qds-theme-interactive-background-pressed);\n  }\n\n  &:checked {\n    & ~ .track {\n      justify-content: flex-end;\n      background-color: var(--qds-theme-signature-color-default);\n\n      & > .knob {\n        border-color: transparent;\n        box-sizing: border-box;\n        margin-inline-end: var(--qds-control-border-width);\n      }\n    }\n\n    &:hover ~ .track > .knob {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active ~ .track > .knob {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n\n  &:focus-visible ~ .track {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.icon {\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n\n  &.track {\n    width: calc(var(--qds-control-slider-knob-small-size) * 2);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.knob {\n    height: var(--qds-control-slider-knob-small-size);\n    width: var(--qds-control-slider-knob-small-size);\n  }\n}\n\n[data-size='standard'] {\n  &.icon {\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n\n  &.track {\n    width: calc(var(--qds-control-slider-knob-standard-size) * 2);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.knob {\n    height: var(--qds-control-slider-knob-standard-size);\n    width: var(--qds-control-slider-knob-standard-size);\n  }\n}\n\n[data-size='large'] {\n  &.icon {\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n\n  &.track {\n    width: calc(var(--qds-control-slider-knob-large-size) * 2);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.knob {\n    height: var(--qds-control-slider-knob-large-size);\n    width: var(--qds-control-slider-knob-large-size);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\n\nexport type SwitchSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * @see https://quartz.se.com/build/components/switch\n */\n@Component({\n  tag: 'qds-switch',\n  scoped: true,\n  styleUrl: 'switch.css',\n})\nexport class Switch implements ComponentInterface {\n  /**\n   * Adds vertical margin to the switch 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 name of the checked icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconCheckedName?: string\n\n  /**\n   * The name of a registered checked icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconCheckedLibrary: string =\n    'default'\n\n  /**\n   * The name of the unchecked icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconUncheckedName?: string\n\n  /**\n   * The name of a registered unchecked icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconUncheckedLibrary: string =\n    'default'\n\n  /**\n   * The switches's size.\n   */\n  @Prop({ reflect: true }) public readonly size: SwitchSize = 'standard'\n\n  /**\n   * The switch's checked text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly textChecked?: string\n\n  /**\n   * The switch's unchecked text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly textUnchecked?: string\n\n  /**\n   * Specify whether the switch should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   *Sets the switch's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public checked?: boolean\n\n  /**\n   * Prevents the switch from being interacted with: it cannot be pressed or\n   *focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the switch 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-switch>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-switch>` 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  @Prop() public readonly form?: string\n\n  /**\n   * The name of the switch, which is submitted with the form data. An\n   *incrementing ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-switch-${autoIncrementingId}`\n\n  /**\n   * The value of the switch, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Emitted when the switch 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 switch'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 switch gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsSwitchElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) return\n\n    event.preventDefault()\n\n    this.checked = !(this.checked ?? false)\n    this.changeEmitter.emit()\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\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' : 'false'}\n        class={{\n          inline: this.inline,\n          label: true,\n        }}\n        data-size={this.size}\n      >\n        {this.textUnchecked !== undefined && this.textUnchecked !== '' && (\n          <qds-label\n            class=\"unchecked-text\"\n            size={this.size}\n            text={this.textUnchecked}\n          />\n        )}\n        {this.iconUncheckedName !== undefined &&\n          this.iconUncheckedName !== '' && (\n            <qds-icon\n              class=\"icon\"\n              data-size={this.size}\n              library={this.iconUncheckedLibrary}\n              name={this.iconUncheckedName}\n            />\n          )}\n        <input\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          checked={this.checked}\n          class=\"switch\"\n          disabled={this.disabled}\n          form={this.form}\n          name={this.name}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          type=\"checkbox\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <div class=\"track\" data-size={this.size}>\n          <div class=\"knob\" data-size={this.size} />\n        </div>\n        {this.iconCheckedName !== undefined && this.iconCheckedName !== '' && (\n          <qds-icon\n            class=\"icon\"\n            data-size={this.size}\n            library={this.iconCheckedLibrary}\n            name={this.iconCheckedName}\n          />\n        )}\n        {this.textChecked !== undefined && this.textChecked !== '' && (\n          <qds-label size={this.size} text={this.textChecked} />\n        )}\n      </label>\n    )\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"],"version":3}
+{"file":"qds-switch.entry.js","mappings":"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","names":[],"sources":["src/components/switch/switch.css?tag=qds-switch&encapsulation=shadow","src/components/switch/switch.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}\n\n.qds-track,\n.qds-knob {\n  print-color-adjust: exact;\n}\n\n.qds-track {\n  align-items: center;\n  border-radius: var(--qds-control-toggle-track-border-radius);\n  display: flex;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  padding: var(--qds-control-toggle-track-padding);\n  print-color-adjust: exact;\n  background-color: var(--qds-theme-control-toggle-track-default);\n\n  &:hover {\n    background-color: var(--qds-theme-control-toggle-track-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-control-toggle-track-pressed);\n  }\n}\n\n.qds-knob {\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-knob-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.qds-container {\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n}\n\n.qds-switch {\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n\n  &:focus-visible ~ .qds-track {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:checked ~ .qds-track {\n    justify-content: flex-end;\n    background-color: var(--qds-theme-signature-color-default);\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.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: var(--qds-control-toggle-track-small-width);\n    height: var(--qds-control-toggle-track-small-size);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-knob-small-size);\n    width: var(--qds-control-knob-small-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: var(--qds-control-toggle-track-standard-width);\n    height: var(--qds-control-toggle-track-standard-height);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-knob-standard-size);\n    width: var(--qds-control-knob-standard-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-toggle-track-large-height) * 2);\n    height: var(--qds-control-toggle-track-large-height);\n  }\n\n  &.qds-knob {\n    height: var(--qds-control-knob-large-size);\n    width: var(--qds-control-knob-large-size);\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 type { Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * @see https://quartz.se.com/build/components/switch\n */\n@Component({\n  tag: 'qds-switch',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'switch.css',\n})\nexport class Switch implements ComponentInterface {\n  /**\n   * Adds vertical margin to the switch 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 switches's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   *Sets the switch's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Prevents the switch 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>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the switch 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-switch>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-switch>` 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   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-switch` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly labels: HTMLInputElement['labels'] = null\n\n  /**\n   * The name of the switch, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * The value of the switch, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: Value\n\n  /**\n   * The error message that would be shown to the user if the `<qds-switch>`\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-switch>`.\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   * True if `<qds-switch>` 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 switch 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 switch'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 switch gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  @State() private inheritedAttributes: Attributes = {}\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedDisabled(): boolean {\n    return (\n      (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n      this.host.getAttribute('disabled') !== 'false'\n    )\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 #computedValue(): string | null {\n    // eslint-disable-next-line unicorn/no-null\n    return this.value == null ? null : this.value.toString()\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.#computedChecked\n    this.changeEmitter.emit()\n  }\n\n  @Watch('checked')\n  protected checkedChanged(): void {\n    this.#updateFormValue()\n    this.internals.ariaChecked = this.#computedChecked.toString()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    this.#updateFormValue()\n    this.internals.ariaDisabled = this.#computedDisabled.toString()\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    this.#updateFormValue()\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'switch'\n    this.checkedChanged()\n    this.disabledChanged()\n\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('labels', () => this.internals.labels)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n\n    this.inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      <div\n        class={{\n          'qds-container': true,\n          'qds-disabled': this.#computedDisabled,\n          'qds-inline': this.inline,\n        }}\n        data-size={this.#computedSize}\n      >\n        <input\n          aria-hidden=\"true\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.host.autofocus}\n          checked={this.checked}\n          class=\"qds-switch\"\n          disabled={this.disabled}\n          onBlur={this.#onBlur}\n          onFocus={this.#onFocus}\n          tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n          type=\"checkbox\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <div class=\"qds-track\" data-size={this.#computedSize}>\n          <div class=\"qds-knob\" data-size={this.#computedSize} />\n        </div>\n      </div>\n    )\n  }\n\n  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n    if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n\n  #updateFormValue(): 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"],"version":3}