@quartzds/core 1.0.0-beta.113 → 1.0.0-beta.115
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +50 -0
- package/components/index.d.ts +2 -2
- package/components/index.js +2 -2
- package/components/{p-CB1GgGmx.js → p--vOFwWP9.js} +4 -4
- package/components/{p-CB1GgGmx.js.map → p--vOFwWP9.js.map} +1 -1
- package/{dist/esm/helpers-CDZIefsI.js → components/p-Bs-thw7N.js} +24 -8
- package/components/{p-CzJQDr3N.js.map → p-Bs-thw7N.js.map} +1 -1
- package/components/{p-9fm05BrQ.js → p-D6kEwmWw.js} +16 -9
- package/components/p-D6kEwmWw.js.map +1 -0
- package/components/{p-jzP-octC.js → p-DG13nyez.js} +13 -13
- package/components/p-DG13nyez.js.map +1 -0
- package/components/{p-oYV2Vg_F.js → p-DHsQa63F.js} +6 -6
- package/components/{p-oYV2Vg_F.js.map → p-DHsQa63F.js.map} +1 -1
- package/components/{p-GGIVf4ry.js → p-DQ0iArwG.js} +12 -12
- package/components/p-DQ0iArwG.js.map +1 -0
- package/components/{p-Cin_uEzc.js → p-DRvYbv4e.js} +6 -6
- package/components/{p-Cin_uEzc.js.map → p-DRvYbv4e.js.map} +1 -1
- package/components/p-DabDNFFa.js +112 -0
- package/components/p-DabDNFFa.js.map +1 -0
- package/components/{p-CPvTGxdE.js → p-DeLdhUte.js} +9 -9
- package/components/p-DeLdhUte.js.map +1 -0
- package/components/{p-CK_Yxg3A.js → p-Df4zqimN.js} +11 -9
- package/components/p-Df4zqimN.js.map +1 -0
- package/components/{p-Dqnx5weA.js → p-Dmky30vp.js} +3 -3
- package/components/{p-Dqnx5weA.js.map → p-Dmky30vp.js.map} +1 -1
- package/components/{p-CSR3ZAEX.js → p-I5PkZmy8.js} +4 -4
- package/components/{p-CSR3ZAEX.js.map → p-I5PkZmy8.js.map} +1 -1
- package/components/qds-action-item.js +7 -7
- package/components/qds-action-item.js.map +1 -1
- package/components/{qds-nav-list-item.d.ts → qds-avatar-media.d.ts} +4 -4
- package/components/qds-avatar-media.js +14 -0
- package/components/qds-avatar-media.js.map +1 -0
- package/components/qds-breadcrumb-item.js +7 -7
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +11 -11
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +26 -7
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +5 -5
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.js +10 -8
- package/components/qds-icon-button.js.map +1 -1
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +43 -13
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +6 -6
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +22 -16
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +3 -3
- package/components/qds-loader.js.map +1 -1
- package/components/qds-menu-item.js +9 -9
- package/components/qds-menu-item.js.map +1 -1
- package/components/qds-mini-button.js +1 -1
- package/components/qds-progress-bar.js +1 -1
- package/components/qds-radio.js +1 -1
- package/components/qds-select.js +5 -5
- package/components/qds-standalone-link.js +43 -13
- package/components/qds-standalone-link.js.map +1 -1
- package/components/qds-switch.js +5 -5
- package/components/qds-tab.js +11 -11
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +8 -8
- package/components/qds-table-cell.js +2 -2
- package/components/qds-table-head-cell.js +2 -2
- package/components/qds-table-row.js +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-tag.js +1 -1
- package/components/qds-textarea.js +3 -3
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/{helpers-D--0PcCT.js → helpers-BH_NFaV-.js} +24 -8
- package/dist/cjs/helpers-BH_NFaV-.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/{library-CF8K3bIq.js → library-C_NJJiFI.js} +15 -8
- package/dist/cjs/library-C_NJJiFI.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +5 -5
- package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -0
- package/dist/cjs/{qds-checkbox_2.cjs.entry.js → qds-avatar-media_3.cjs.entry.js} +79 -8
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +5 -5
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +8 -8
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +8 -8
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +23 -4
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +4 -4
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon-button.cjs.entry.js +8 -6
- package/dist/cjs/qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +2 -2
- package/dist/cjs/qds-inline-link.cjs.entry.js +39 -8
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +4 -4
- package/dist/cjs/qds-label.cjs.entry.js +9 -9
- package/dist/cjs/qds-label.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +10 -10
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-loader.cjs.entry.js +2 -2
- package/dist/cjs/qds-loader.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +6 -6
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +4 -4
- package/dist/cjs/qds-standalone-link.cjs.entry.js +39 -8
- package/dist/cjs/qds-standalone-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-switch.cjs.entry.js +4 -4
- package/dist/cjs/qds-tab.cjs.entry.js +7 -7
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +5 -5
- package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag_2.cjs.entry.js +6 -6
- package/dist/cjs/qds-textarea.cjs.entry.js +3 -3
- package/dist/cjs/qds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +311 -367
- package/dist/docs.json +223 -331
- package/{components/p-CzJQDr3N.js → dist/esm/helpers-t9FQ7Vl_.js} +24 -8
- package/dist/esm/helpers-t9FQ7Vl_.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/{library-B2PJ_ZJB.js → library-C7n28y3j.js} +15 -8
- package/dist/esm/library-C7n28y3j.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +5 -5
- package/dist/esm/qds-action-item.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -0
- package/dist/esm/{qds-checkbox_2.entry.js → qds-avatar-media_3.entry.js} +79 -9
- package/dist/esm/qds-breadcrumb-item.entry.js +5 -5
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +8 -8
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +8 -8
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +23 -4
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-dropdown.entry.js +1 -1
- package/dist/esm/qds-form-message.entry.js +4 -4
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-button.entry.js +8 -6
- package/dist/esm/qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-icon.entry.js +2 -2
- package/dist/esm/qds-inline-link.entry.js +39 -8
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +4 -4
- package/dist/esm/qds-label.entry.js +9 -9
- package/dist/esm/qds-label.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +10 -10
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-loader.entry.js +2 -2
- package/dist/esm/qds-loader.entry.js.map +1 -1
- package/dist/esm/qds-menu-item.entry.js +6 -6
- package/dist/esm/qds-menu-item.entry.js.map +1 -1
- package/dist/esm/qds-mini-button.entry.js +1 -1
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +4 -4
- package/dist/esm/qds-standalone-link.entry.js +39 -8
- package/dist/esm/qds-standalone-link.entry.js.map +1 -1
- package/dist/esm/qds-switch.entry.js +4 -4
- package/dist/esm/qds-tab.entry.js +7 -7
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-tabbar.entry.js +5 -5
- package/dist/esm/qds-table-cell.entry.js +2 -2
- package/dist/esm/qds-table-head-cell.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag_2.entry.js +6 -6
- package/dist/esm/qds-textarea.entry.js +3 -3
- package/dist/esm/qds-tooltip.entry.js +2 -2
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/avatar-media/avatar-media.d.ts +39 -0
- package/dist/types/components/icon-button/icon-button.d.ts +1 -1
- package/dist/types/components/inline-link/inline-link.d.ts +1 -1
- package/dist/types/components/label/label.d.ts +1 -1
- package/dist/types/components/standalone-link/standalone-link.d.ts +1 -1
- package/dist/types/components.d.ts +94 -125
- package/dist/types/helpers.d.ts +3 -3
- package/dist/vscode.html-custom-data.json +29 -52
- package/hydrate/index.js +694 -632
- package/hydrate/index.mjs +694 -632
- package/package.json +1 -1
- package/components/p-9fm05BrQ.js.map +0 -1
- package/components/p-CK_Yxg3A.js.map +0 -1
- package/components/p-CPvTGxdE.js.map +0 -1
- package/components/p-GGIVf4ry.js.map +0 -1
- package/components/p-jzP-octC.js.map +0 -1
- package/components/qds-nav-list-item.js +0 -164
- package/components/qds-nav-list-item.js.map +0 -1
- package/dist/cjs/helpers-D--0PcCT.js.map +0 -1
- package/dist/cjs/library-CF8K3bIq.js.map +0 -1
- package/dist/cjs/qds-checkbox.qds-radio.entry.cjs.js.map +0 -1
- package/dist/cjs/qds-nav-list-item.cjs.entry.js +0 -120
- package/dist/cjs/qds-nav-list-item.entry.cjs.js.map +0 -1
- package/dist/esm/helpers-CDZIefsI.js.map +0 -1
- package/dist/esm/library-B2PJ_ZJB.js.map +0 -1
- package/dist/esm/qds-checkbox.qds-radio.entry.js.map +0 -1
- package/dist/esm/qds-nav-list-item.entry.js +0 -118
- package/dist/esm/qds-nav-list-item.entry.js.map +0 -1
- package/dist/types/components/nav-list-item/nav-list-item.d.ts +0 -67
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-inline-link.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-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 {\n height: 1.25em;\n padding-left: var(--qds-text-icon-gap);\n vertical-align: middle;\n}\n\n.qds-inline-link {\n border-radius: var(--qds-focus-border-radius);\n display: inline-block;\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\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited {\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 {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\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 {\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 {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\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 {\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 {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\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'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { determineLinkIcon, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, LinkIcon, Target } from '../shared'\n\n/**\n * `<qds-inline-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-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n tag: 'qds-inline-link',\n shadow: { delegatesFocus: true },\n styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n /**\n * Prevents the inline 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 inline link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\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 inline link points to. Inline 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 inline 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 inline link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the inline 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 @AttachInternals() private readonly internals!: ElementInternals\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 #openInNewTab(): boolean {\n return this.target === '_blank'\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('rel')\n @Watch('target')\n protected hrefTargetChanged(): void {\n this.linkIcon = determineLinkIcon(this.target, this.rel)\n this.#updateAriaLabelElements()\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.#updateAriaLabelElements()\n }\n\n public render() {\n return (\n <a\n aria-hidden=\"true\"\n class={{\n 'qds-inline-link': true,\n 'qds-disabled': this.disabled,\n }}\n data-importance={this.#computedImportance}\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 <qds-icon\n class=\"qds-icon\"\n aria-hidden=\"true\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n {this.linkIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library=\"core\"\n name={this.linkIcon}\n />\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 #updateAriaLabelElements = (): void => {\n this.internals.ariaLabel = `${this.host.textContent} ${\n this.#openInNewTab ? 'Opens in a new tab' : ''\n }`.trim()\n }\n\n readonly #onSlotchange = (): void => {\n this.#updateAriaLabelElements()\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-inline-link.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-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 border-radius: var(--qds-focus-border-radius);\n}\n\n:host(: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.qds-icon {\n height: var(--qds-control-hero-icon-size);\n width: var(--qds-control-hero-icon-size);\n}\n\n.qds-inline-link {\n display: flex;\n gap: var(--qds-text-icon-gap);\n align-items: center;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited {\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 {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\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 {\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 {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\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 {\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 {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active {\n color: var(--qds-theme-link-visited-pressed);\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'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n determineLinkIcon,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, LinkIcon, Target } from '../shared'\n\n/**\n * `<qds-inline-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-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n tag: 'qds-inline-link',\n shadow: true,\n styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n /**\n * Prevents the inline 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 inline link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\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 inline link points to. Inline 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 inline 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 inline link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the inline 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 @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n #link?: HTMLAnchorElement\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 #openInNewTab(): boolean {\n return this.target === '_blank'\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n invariant(this.#link)\n if (this.disabled) event.stopImmediatePropagation()\n else this.#link.click()\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n invariant(this.#link)\n if (this.disabled) return\n if (event.key === 'Enter') this.#link.click()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n if (this.disabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\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.#savedTabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n if (this.disabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('rel')\n @Watch('target')\n protected hrefTargetChanged(): void {\n this.linkIcon = determineLinkIcon(this.target, this.rel)\n this.#updateAriaLabelElements()\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'link'\n this.disabledChanged()\n this.hrefTargetChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n this.#updateAriaLabelElements()\n }\n\n public render() {\n return (\n <a\n aria-hidden=\"true\"\n class={{\n 'qds-inline-link': true,\n 'qds-disabled': this.disabled,\n }}\n data-importance={this.#computedImportance}\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={-1}\n target={this.target}\n ref={this.#linkRef}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n aria-hidden=\"true\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n {this.linkIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library=\"core\"\n name={this.linkIcon}\n />\n )}\n </a>\n )\n }\n\n readonly #linkRef = (link?: HTMLAnchorElement): void => {\n this.#link = link\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 #updateAriaLabelElements = (): void => {\n this.internals.ariaLabel = `${this.host.textContent} ${\n this.#openInNewTab ? 'Opens in a new tab' : ''\n }`.trim()\n }\n\n readonly #onSlotchange = (): void => {\n this.#updateAriaLabelElements()\n }\n}\n"],"version":3}
|
package/components/qds-input.js
CHANGED
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-BEWDu8_P.js';
|
|
7
|
-
import { i as invariant, p as pickFocusEventAttributes, c as pickInputEventAttributes, b as inheritAriaAttributes } from './p-
|
|
7
|
+
import { i as invariant, p as pickFocusEventAttributes, c as pickInputEventAttributes, b as inheritAriaAttributes } from './p-Bs-thw7N.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-DQLjJn7-.js';
|
|
9
|
-
import { d as defineCustomElement$3 } from './p-
|
|
10
|
-
import { d as defineCustomElement$2 } from './p-
|
|
9
|
+
import { d as defineCustomElement$3 } from './p-D6kEwmWw.js';
|
|
10
|
+
import { d as defineCustomElement$2 } from './p-I5PkZmy8.js';
|
|
11
11
|
|
|
12
12
|
const inputCss = ":host([hidden]){display:none!important}:host{display:inline-block}@-moz-document url-prefix(){[type=date]~.qds-icon-container,[type=datetime-local]~.qds-icon-container,[type=month]~.qds-icon-container,[type=time]~.qds-icon-container,[type=week]~.qds-icon-container{display:none}}input[type=password]::-ms-reveal{display:none}.qds-container,.qds-input{max-width:inherit;width:inherit}.qds-container{align-content:flex-start;align-items:center;box-sizing:border-box;display:grid;grid-template-areas:\"c\"}.qds-icon-container,.qds-input{grid-area:c}.qds-icon-container{align-items:center;display:flex;justify-content:center;justify-self:end;padding-inline-end:var(--qds-control-input-padding-horizontal)}.qds-icon-container.no-padding{padding-inline-end:0}.qds-focus-ring{border-radius:max(1px,var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n ));grid-area:c;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-control-input-focus-border-width) solid var(--qds-theme-control-input-focus-border);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n ))}[data-size=small]{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}.qds-password-padding[data-size=small],[data-size=small][type=date],[data-size=small][type=datetime-local],[data-size=small][type=month],[data-size=small][type=time],[data-size=small][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-small-height))}[data-size=small][type=file]::file-selector-button{font:var(--qds-control-small-text);height:var(--qds-control-small-height);margin-inline-end:var(--qds-control-small-gap-siblings-related);padding-inline:var(--qds-control-button-small-padding-horizontal)}[data-size=small][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-small-gap-internal))}[data-size=small][type=search]~.qds-icon-container{gap:var(--qds-control-small-gap-internal)}[data-size=standard]{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}.qds-password-padding[data-size=standard],[data-size=standard][type=date],[data-size=standard][type=datetime-local],[data-size=standard][type=month],[data-size=standard][type=time],[data-size=standard][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-height))}[data-size=standard][type=file]::file-selector-button{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height);margin-inline-end:var(--qds-control-standard-gap-siblings-related);padding-inline:var(--qds-control-button-standard-padding-horizontal)}[data-size=standard][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-standard-gap-internal))}[data-size=standard][type=search]~.qds-icon-container{gap:var(--qds-control-standard-gap-internal)}[data-size=large]{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}.qds-password-padding[data-size=large],[data-size=large][type=date],[data-size=large][type=datetime-local],[data-size=large][type=month],[data-size=large][type=time],[data-size=large][type=week]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-large-height))}[data-size=large][type=file]::file-selector-button{font:var(--qds-control-large-text);height:var(--qds-control-large-height);margin-inline-end:var(--qds-control-large-gap-siblings-related);padding-inline:var(--qds-control-button-large-padding-horizontal)}[data-size=large][type=search]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-mini-button-standard-size) + var(--qds-control-input-padding-horizontal) + var(--qds-control-large-gap-internal))}[data-size=large][type=search]~.qds-icon-container{gap:var(--qds-control-large-gap-internal)}.qds-input{-webkit-appearance:textfield;appearance:textfield;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);box-sizing:border-box;color:var(--qds-theme-control-text-standard);grid-area:c;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input.qds-hide~.qds-icon-container{display:none}.qds-input:disabled,.qds-input:disabled~.qds-icon-container{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-input:focus-visible{outline:none}.qds-input:focus-visible~.qds-focus-ring{visibility:visible}.qds-input:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}.qds-input:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-input::-webkit-search-cancel-button,.qds-input:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week])::-webkit-calendar-picker-indicator{display:none}.qds-input[type=file]{padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=file]::file-selector-button{background-color:initial;border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard)}.qds-input[type=file]::file-selector-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=file]::file-selector-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input[type=color],.qds-input[type=number]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]{-webkit-appearance:none;appearance:none;cursor:pointer;min-width:50px;padding-block:var(--qds-control-input-padding-horizontal)}.qds-input[type=color]::-webkit-color-swatch-wrapper{padding:0}.qds-input[type=color]::-webkit-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]::-moz-color-swatch{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type=color]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type=color]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input.qds-search-padding[data-size=large],.qds-input.qds-search-padding[data-size=small],.qds-input.qds-search-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal) calc(var(--qds-control-small-height) + var(--qds-control-input-padding-horizontal))}.qds-input[data-size=large][type=file],.qds-input[data-size=small][type=file],.qds-input[data-size=standard][type=file]{height:auto}.qds-input.qds-padding[data-size=large],.qds-input.qds-padding[data-size=small],.qds-input.qds-padding[data-size=standard]{padding-inline:var(--qds-control-input-padding-horizontal)}.qds-input[data-size=large],.qds-input[data-size=small],.qds-input[data-size=standard]{@-moz-document url-prefix(){&[type=date],&[type=datetime-local],&[type=month],&[type=time],&[type=week]{padding-inline-end:var(--qds-control-input-padding-horizontal)}}}.qds-input{@-moz-document url-prefix(){&[type=number]{appearance:none}}}";
|
|
13
13
|
|
|
@@ -370,7 +370,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
|
370
370
|
const shouldShowSearchButton = isSearchType && this.noIcon === false;
|
|
371
371
|
const shouldHideIcon = !isSearchType && this.noIcon === true;
|
|
372
372
|
const shouldRemoveSearchPadding = isSearchType && this.noIcon === true;
|
|
373
|
-
return (h("div", { key: '
|
|
373
|
+
return (h("div", { key: '0c081010a5ec6cf8c04d7d1dd649075b16bddd7c', class: "qds-container" }, h("input", { key: '2716262c8cee8b5de80cce4801d94de3e1e64931', accept: this.accept, autoCapitalize: this.host.autocapitalize, autoComplete: this.autoComplete,
|
|
374
374
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
375
375
|
autoFocus: this.host.autofocus, capture: this.capture, class: {
|
|
376
376
|
'qds-search-padding': shouldRemoveSearchPadding,
|
|
@@ -379,10 +379,10 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
|
|
|
379
379
|
'qds-padding': shouldHideIcon,
|
|
380
380
|
'qds-password-padding': this.type === 'password' ||
|
|
381
381
|
(this.isPasswordVisible && this.type === 'text'),
|
|
382
|
-
}, "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: __classPrivateFieldGet(this, _Input_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Input_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Input_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Input_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _Input_ref, "f"), spellcheck: this.host.spellcheck, step: this.step, tabIndex: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedDisabled_get) ? undefined : this.tabIndex, type: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedType_get), ...__classPrivateFieldGet(this, _Input_inheritedAttributes, "f") }), h("div", { key: '
|
|
382
|
+
}, "data-size": __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedSize_get), disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, onBlur: __classPrivateFieldGet(this, _Input_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Input_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Input_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Input_onInput, "f"), placeholder: this.placeholder, ref: __classPrivateFieldGet(this, _Input_ref, "f"), spellcheck: this.host.spellcheck, step: this.step, tabIndex: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedDisabled_get) ? undefined : this.tabIndex, type: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedType_get), ...__classPrivateFieldGet(this, _Input_inheritedAttributes, "f") }), h("div", { key: '1ced5059ea467ce205d76c9bc85b26fde42329ab', class: "qds-focus-ring" }), __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get) && (h("div", { key: '7761afacfb1101f0e15a1a5eae2e0119c6820a5c', class: {
|
|
383
383
|
'qds-icon-container': true,
|
|
384
384
|
'no-padding': shouldRemoveSearchPadding,
|
|
385
|
-
} }, shouldShowClearButton && (h("qds-mini-button", { key: '
|
|
385
|
+
} }, shouldShowClearButton && (h("qds-mini-button", { key: 'f208406b016ce83602cf6532d742699568f52e7c', class: "qds-hide", text: "clear input", library: "core", name: "clear", disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Input_onClear, "f"), tabindex: -1, onQdsFocus: stopImmediatePropagation })), __classPrivateFieldGet(this, _Input_instances, "a", _Input_hasInteractiveIcon_get) && (h("qds-mini-button", { key: 'a33c82673216d84620eee4bc9e08f2e4ca080eaf', disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Input_instances, "a", _Input_iconClickHandler_get), text: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedInteractiveIconAriaLabel_get), library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get), tabindex: -1, onQdsFocus: stopImmediatePropagation })), shouldShowSearchButton ? (h("qds-mini-button", { text: "search", library: "core", name: __classPrivateFieldGet(this, _Input_instances, "a", _Input_computedIconName_get), disabled: this.disabled, onClick: __classPrivateFieldGet(this, _Input_onSearch, "f"), tabindex: -1, onQdsFocus: stopImmediatePropagation })) : (h("div", null))))));
|
|
386
386
|
}
|
|
387
387
|
static get delegatesFocus() { return true; }
|
|
388
388
|
static get formAssociated() { return true; }
|
package/components/qds-label.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { L as Label, d as defineCustomElement$1 } from './p-
|
|
6
|
+
import { L as Label, d as defineCustomElement$1 } from './p-DG13nyez.js';
|
|
7
7
|
|
|
8
8
|
const QdsLabel = Label;
|
|
9
9
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -4,16 +4,17 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, d as readTask, h, e as Host } from './p-BEWDu8_P.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, i as invariant, a as
|
|
7
|
+
import { p as pickFocusEventAttributes, i as invariant, a as isEllipsisActive } from './p-Bs-thw7N.js';
|
|
8
|
+
import { d as defineCustomElement$9 } from './p-DabDNFFa.js';
|
|
8
9
|
import { d as defineCustomElement$8 } from './p-BfIOTt4N.js';
|
|
9
|
-
import { d as defineCustomElement$7 } from './p-
|
|
10
|
+
import { d as defineCustomElement$7 } from './p-DeLdhUte.js';
|
|
10
11
|
import { d as defineCustomElement$6 } from './p-C-IkQWNh.js';
|
|
11
|
-
import { d as defineCustomElement$5 } from './p-
|
|
12
|
-
import { d as defineCustomElement$4 } from './p-
|
|
13
|
-
import { d as defineCustomElement$3 } from './p-
|
|
14
|
-
import { d as defineCustomElement$2 } from './p
|
|
12
|
+
import { d as defineCustomElement$5 } from './p-D6kEwmWw.js';
|
|
13
|
+
import { d as defineCustomElement$4 } from './p-DG13nyez.js';
|
|
14
|
+
import { d as defineCustomElement$3 } from './p-Df4zqimN.js';
|
|
15
|
+
import { d as defineCustomElement$2 } from './p--vOFwWP9.js';
|
|
15
16
|
|
|
16
|
-
const listItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-indented-content,.qds-list-item{align-items:center;border-radius:var(--qds-control-border-radius);box-sizing:border-box}.qds-list-action{pointer-events:none}.qds-indented-content{align-self:stretch;display:flex;flex:1 0}.qds-destination{transform:scaleX(var(--qds-direction-factor,1))}.qds-icon{color:var(--qds-theme-text-standard)}.qds-
|
|
17
|
+
const listItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-indented-content,.qds-list-item{align-items:center;border-radius:var(--qds-control-border-radius);box-sizing:border-box}.qds-list-action{pointer-events:none}.qds-indented-content{align-self:stretch;display:flex;flex:1 0}.qds-destination{transform:scaleX(var(--qds-direction-factor,1))}.qds-icon,.qds-main-icon{color:var(--qds-theme-text-standard)}.qds-picture{flex-shrink:0}.qds-texts{display:flex;flex:1 0;flex-direction:column;justify-items:center;padding:0;position:relative}.qds-input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--qds-control-border-radius);inset:0;margin:0;outline:none;position:absolute}.qds-title{color:var(--qds-theme-title);-webkit-line-clamp:2}.qds-subtitle,.qds-title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.qds-subtitle{color:var(--qds-theme-subtitle);-webkit-line-clamp:5}.qds-kicker{color:var(--qds-theme-kicker);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}[data-size=small] .qds-indented-content{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding:var(--qds-list-item-small-padding-vertical) var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-icon{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-main-icon{height:var(--qds-list-item-small-icon-size);width:var(--qds-list-item-small-icon-size)}[data-size=small] .qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-kicker{font:var(--qds-list-item-small-kicker)}[data-size=small] .qds-title{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-list-item-small-subtitle)}[data-size=small] .qds-picture{height:var(--qds-list-item-small-picture-size);width:var(--qds-list-item-small-picture-size)}[data-size=standard] .qds-indented-content{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding:var(--qds-list-item-standard-padding-vertical) var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-icon{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-main-icon{height:var(--qds-list-item-standard-icon-size);width:var(--qds-list-item-standard-icon-size)}[data-size=standard] .qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-kicker{font:var(--qds-list-item-standard-kicker)}[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-list-item-standard-subtitle)}[data-size=standard] .qds-picture{height:var(--qds-list-item-standard-picture-size);width:var(--qds-list-item-standard-picture-size)}[data-size=large] .qds-indented-content{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding:var(--qds-list-item-large-padding-vertical) var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-icon{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-main-icon{height:var(--qds-list-item-large-icon-size);width:var(--qds-list-item-large-icon-size)}[data-size=large] .qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-kicker{font:var(--qds-list-item-large-kicker)}[data-size=large] .qds-title{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtitle{font:var(--qds-list-item-large-subtitle)}[data-size=large] .qds-picture{height:var(--qds-list-item-large-picture-size);width:var(--qds-list-item-large-picture-size)}.qds-list-item{display:block}.qds-list-item:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-list-item:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-list-item:has(input:focus-visible){outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected.qds-list-item:hover{background-color:var(--qds-theme-interactive-background-selected-hover)}.qds-selected.qds-list-item:active{background-color:var(\n --qds-theme-interactive-background-selected-pressed\n )}.qds-selected[data-size=small] .qds-title{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-title{font:var(--qds-list-item-large-title-emphasized)}";
|
|
17
18
|
|
|
18
19
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
19
20
|
//
|
|
@@ -153,10 +154,10 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends H {
|
|
|
153
154
|
invariant(__classPrivateFieldGet(this, _ListItem_text, "f"));
|
|
154
155
|
const div = __classPrivateFieldGet(this, _ListItem_text, "f");
|
|
155
156
|
readTask(() => {
|
|
156
|
-
this.textTooltip =
|
|
157
|
+
this.textTooltip = isEllipsisActive(div);
|
|
157
158
|
});
|
|
158
159
|
__classPrivateFieldSet(this, _ListItem_roText, new ResizeObserver(([divEntry]) => {
|
|
159
|
-
this.textTooltip =
|
|
160
|
+
this.textTooltip = isEllipsisActive(divEntry.target);
|
|
160
161
|
}), "f");
|
|
161
162
|
__classPrivateFieldGet(this, _ListItem_roText, "f").observe(__classPrivateFieldGet(this, _ListItem_text, "f"));
|
|
162
163
|
}
|
|
@@ -168,10 +169,10 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends H {
|
|
|
168
169
|
invariant(__classPrivateFieldGet(this, _ListItem_subtitle, "f"));
|
|
169
170
|
const div = __classPrivateFieldGet(this, _ListItem_subtitle, "f");
|
|
170
171
|
readTask(() => {
|
|
171
|
-
this.subtitleTooltip =
|
|
172
|
+
this.subtitleTooltip = isEllipsisActive(div);
|
|
172
173
|
});
|
|
173
|
-
__classPrivateFieldSet(this, _ListItem_roSubTitle, new ResizeObserver(([
|
|
174
|
-
this.subtitleTooltip =
|
|
174
|
+
__classPrivateFieldSet(this, _ListItem_roSubTitle, new ResizeObserver(([divEntry]) => {
|
|
175
|
+
this.subtitleTooltip = isEllipsisActive(divEntry.target);
|
|
175
176
|
}), "f");
|
|
176
177
|
__classPrivateFieldGet(this, _ListItem_roSubTitle, "f").observe(__classPrivateFieldGet(this, _ListItem_subtitle, "f"));
|
|
177
178
|
}
|
|
@@ -204,13 +205,13 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends H {
|
|
|
204
205
|
render() {
|
|
205
206
|
return (
|
|
206
207
|
/* eslint-disable jsx-a11y/label-has-associated-control */
|
|
207
|
-
h(Host, { key: '
|
|
208
|
+
h(Host, { key: 'eb643cc1b548667a3d67f994f118091e65483964', onBlur: __classPrivateFieldGet(this, _ListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _ListItem_onFocus, "f"), tabIndex: this.tabIndex, "aria-label": this.text }, h("div", { key: '5f1109254dc3403308d8e0222a09efb38630e248', class: {
|
|
208
209
|
'qds-list-item': true,
|
|
209
210
|
'qds-disabled': this.disabled,
|
|
210
211
|
'qds-selected': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSelected_get),
|
|
211
|
-
}, "data-size": __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get) }, h("div", { key: '
|
|
212
|
+
}, "data-size": __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get) }, h("div", { key: '92388e22d3afd96458c4381045e09fd2fb0e854d', class: {
|
|
212
213
|
'qds-indented-content': true,
|
|
213
|
-
} }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: '
|
|
214
|
+
} }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: '14231ea877cc08acdf4d8317c765d80b63908e64', checked: this.selected, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabindex: -1, text: this.text, disabled: this.disabled, "aria-hidden": "true", checkboxOnly: true })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'radio' && (h("qds-radio", { key: '742dfe21f2cedfbdbed36ab4b84f1ddb52601486', checked: this.selected, class: "qds-list-action", size: this.size, tabindex: -1, "aria-hidden": "true", disabled: this.disabled })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'reorder' && (h("qds-icon", { key: '7b1621883c9a1603899eb3ea6c99b1b62b3a18b1', "aria-hidden": "true", class: "qds-icon qds-list-action", library: "core", name: "draggable" })), this.imageSrc !== undefined && this.imageSrc !== '' && (h("img", { key: '5b3342a6edd2638b48a8a4bd4f5ed0b618645681', class: "qds-picture", src: this.imageSrc, alt: "" })), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '240bdc74537b49a5549532a064f0a9dcb86f2403', "aria-hidden": "true", class: "qds-main-icon", library: this.iconLibrary, name: this.iconName })), this.avatarSrc !== undefined && this.avatarSrc !== '' && (h("qds-avatar-media", { key: '846fe9687d812abba5746be6be72df97c6cf1296', class: "qds-picture", src: this.avatarSrc })), h("label", { key: 'b0a7a4008c27f7d25a136d4c1d4b1865c475fbb6', class: "qds-texts" }, this.kicker !== undefined && this.kicker !== '' && (h("div", { key: 'd1fa1c3d7ad575bf0a34ad35980df4f81246b43f', class: "qds-kicker" }, this.kicker)), h("div", { key: '17b8a7a1ff250b62ce47358eb781f85062392e12', class: "qds-title", ref: __classPrivateFieldGet(this, _ListItem_divTitleRef, "f") }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (h("div", { key: '75d43bb788000dffd0b079bdcf20bf7260ec25e2', class: "qds-subtitle", ref: __classPrivateFieldGet(this, _ListItem_divSubtitleRef, "f") }, this.subtitle))), this.badge !== undefined && this.badge !== '' && (h("qds-badge-counter", { key: 'b2158f3a39e040fe2eebe88f5353c4b5d5ae66e6', size: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get), strokeRing: true, value: this.badge, description: this.badgeDescription })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) !== undefined && (h("qds-icon", { key: '556fe79cc687a40bf954602888740497ae77250b', "aria-hidden": "true", class: "qds-icon qds-destination", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) }))), this.showDivider && h("qds-divider", { key: '95190118f21c209ea22c9fbb158c23f01780b38a' }), this.textTooltip && (h("qds-tooltip", { key: 'f2babf99ea3084f52b06d206963922af4c20f4ed', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _ListItem_textTooltipRef, "f") }, this.text)), this.subtitleTooltip && (h("qds-tooltip", { key: '18d3fdb6bb2d53a98818e5d82b9ac973b9c315e3', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _ListItem_subtitleTooltipRef, "f") }, this.subtitle))))
|
|
214
215
|
/* eslint-enable jsx-a11y/label-has-associated-control */
|
|
215
216
|
);
|
|
216
217
|
}
|
|
@@ -292,13 +293,18 @@ function defineCustomElement$1() {
|
|
|
292
293
|
if (typeof customElements === "undefined") {
|
|
293
294
|
return;
|
|
294
295
|
}
|
|
295
|
-
const components = ["qds-list-item", "qds-badge-counter", "qds-checkbox", "qds-divider", "qds-icon", "qds-label", "qds-radio", "qds-tooltip"];
|
|
296
|
+
const components = ["qds-list-item", "qds-avatar-media", "qds-badge-counter", "qds-checkbox", "qds-divider", "qds-icon", "qds-label", "qds-radio", "qds-tooltip"];
|
|
296
297
|
components.forEach(tagName => { switch (tagName) {
|
|
297
298
|
case "qds-list-item":
|
|
298
299
|
if (!customElements.get(tagName)) {
|
|
299
300
|
customElements.define(tagName, ListItem);
|
|
300
301
|
}
|
|
301
302
|
break;
|
|
303
|
+
case "qds-avatar-media":
|
|
304
|
+
if (!customElements.get(tagName)) {
|
|
305
|
+
defineCustomElement$9();
|
|
306
|
+
}
|
|
307
|
+
break;
|
|
302
308
|
case "qds-badge-counter":
|
|
303
309
|
if (!customElements.get(tagName)) {
|
|
304
310
|
defineCustomElement$8();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-list-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-list-action {\n pointer-events: none;\n}\n\n.qds-indented-content {\n display: flex;\n flex: 1 0;\n align-self: stretch;\n}\n\n.qds-destination {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-avatar {\n border-radius: var(--qds-control-rounded-border-radius);\n flex-shrink: 0;\n}\n\n.qds-picture {\n flex-shrink: 0;\n}\n\n.qds-texts {\n justify-items: center;\n display: flex;\n flex: 1 0;\n flex-direction: column;\n padding: 0;\n position: relative;\n}\n\n.qds-input {\n appearance: none;\n background: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n inset: 0;\n margin: 0;\n outline: none;\n position: absolute;\n}\n\n.qds-title {\n color: var(--qds-theme-title);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n overflow: hidden;\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n overflow: hidden;\n}\n\n[data-size='small'] {\n .qds-indented-content {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding: var(--qds-list-item-small-padding-vertical)\n var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-small-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-small-subtitle);\n }\n\n .qds-avatar,\n .qds-picture {\n height: var(--qds-list-item-small-picture-size);\n width: var(--qds-list-item-small-picture-size);\n }\n}\n\n[data-size='standard'] {\n .qds-indented-content {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding: var(--qds-list-item-standard-padding-vertical)\n var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-standard-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n .qds-avatar,\n .qds-picture {\n height: var(--qds-list-item-standard-picture-size);\n width: var(--qds-list-item-standard-picture-size);\n }\n}\n\n[data-size='large'] {\n .qds-indented-content {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding: var(--qds-list-item-large-padding-vertical)\n var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-large-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-large-subtitle);\n }\n\n .qds-avatar,\n .qds-picture {\n height: var(--qds-list-item-large-picture-size);\n width: var(--qds-list-item-large-picture-size);\n }\n}\n\n.qds-list-item {\n display: block;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:has(input: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\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(\n --qds-theme-interactive-background-selected-pressed\n );\n }\n }\n\n &[data-size='small'] .qds-title {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-title {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-title {\n font: var(--qds-list-item-large-title-emphasized);\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 Host,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n invariant,\n isOverflowing,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'radio' | 'reorder'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: false },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * The destination action that the list item denotes through its rightmost icon.\n */\n @Prop() public readonly destination?: Destination\n\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Control how to display the bottom divider line.\n *\n * By default, the divider is not visible.\n */\n @Prop() public readonly showDivider: 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 URL of the avatar image to display.\n */\n @Prop() public readonly avatarSrc?: string\n\n /**\n * The URL of the picture to display.\n *\n * This is used to display a picture in the list item.\n * It is not used for the avatar image.\n */\n @Prop() public readonly imageSrc?: string\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The type of list-level action that the list item supports\n */\n @Prop() public readonly listAction?: ListAction\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop({ mutable: true }) public selected?: boolean\n\n /**\n * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n * This is usually applied to items that represent a \"select all/none\" behavior when associated\n * items have a mix of selected and unselected states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The primary text of the list item.\n */\n @Prop() public readonly text!: string\n\n /**\n * Text to display below the primary text.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Displays a counter badge if a number or string representing a number is used.\n *\n * @webnative\n */\n @Prop() public readonly badge?: number | string\n\n /**\n * The counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * Emitted when the list item 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 list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n @State() private textTooltip = false\n\n @State() private subtitleTooltip = false\n\n #roText?: ResizeObserver\n\n #roSubTitle?: ResizeObserver\n\n #text?: HTMLDivElement\n\n #subtitle?: HTMLDivElement\n\n get #computedDestination(): Destination | undefined {\n switch (this.destination) {\n case 'navigation': {\n return this.destination\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedListAction(): ListAction | undefined {\n switch (this.listAction) {\n case 'reorder':\n case 'radio':\n case 'multiselect': {\n return this.listAction\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSelected(): boolean {\n return this.selected ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.stopImmediatePropagation()\n return\n }\n\n // Always prevent default behavior to avoid the internal `<input>`\n // to toggle `checked` state inappropriately.\n //\n // Note that this will need adjustments once we add the `item-action` slot.\n event.preventDefault()\n\n if (this.listAction === 'multiselect') {\n event.stopImmediatePropagation()\n this.selected = this.#computedIndeterminate\n ? true\n : !this.#computedSelected\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n if (this.listAction === 'radio' && !this.#computedSelected) {\n event.stopImmediatePropagation()\n this.selected = !this.#computedSelected\n }\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') this.host.click()\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('listAction')\n protected listActionChanged(newValue: ListAction | undefined): void {\n this.internals.ariaChecked =\n (newValue === 'radio' || newValue === 'multiselect') &&\n this.#computedSelected\n ? 'true'\n : 'false'\n }\n\n @Watch('selected')\n protected selectedChanged(): void {\n if (this.listAction === 'multiselect') {\n this.internals.ariaChecked = this.#computedSelected.toString()\n }\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#roText) this.#roText.disconnect()\n\n if (!this.#text || !this.text) return\n\n invariant(this.#text)\n\n const div = this.#text\n readTask(() => {\n this.textTooltip = isOverflowing(div)\n })\n this.#roText = new ResizeObserver(([divEntry]) => {\n this.textTooltip = isOverflowing(divEntry.target)\n })\n this.#roText.observe(this.#text)\n }\n\n @Watch('subtitle')\n protected subtitleChanged(): void {\n if (this.#roSubTitle) this.#roSubTitle.disconnect()\n\n if (!this.#subtitle || this.subtitle === undefined || this.subtitle === '')\n return\n\n invariant(this.#subtitle)\n const div = this.#subtitle\n readTask(() => {\n this.subtitleTooltip = isOverflowing(div)\n })\n this.#roSubTitle = new ResizeObserver(([subtitleEntry]) => {\n this.subtitleTooltip = isOverflowing(subtitleEntry.target)\n })\n this.#roSubTitle.observe(this.#subtitle)\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n switch (this.listAction) {\n case 'radio': {\n this.internals.role = 'menuitemradio'\n break\n }\n case 'multiselect': {\n this.internals.role = 'menuitemcheckbox'\n break\n }\n case undefined: {\n this.internals.role = 'option'\n break\n }\n default: {\n this.internals.role = 'listitem'\n break\n }\n }\n this.disabledChanged()\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n this.subtitleChanged()\n }\n\n public render() {\n return (\n /* eslint-disable jsx-a11y/label-has-associated-control */\n <Host\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n tabIndex={this.tabIndex}\n aria-label={this.text}\n >\n <div\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.#computedSelected,\n }}\n data-size={this.#computedSize}\n >\n <div\n class={{\n 'qds-indented-content': true,\n }}\n >\n {this.#computedListAction === 'multiselect' && (\n <qds-checkbox\n checked={this.selected}\n class=\"qds-list-action\"\n indeterminate={this.indeterminate}\n size={this.size}\n tabindex={-1}\n text={this.text}\n disabled={this.disabled}\n aria-hidden=\"true\"\n checkboxOnly\n />\n )}\n\n {this.#computedListAction === 'radio' && (\n <qds-radio\n checked={this.selected}\n class=\"qds-list-action\"\n size={this.size}\n tabindex={-1}\n aria-hidden=\"true\"\n disabled={this.disabled}\n />\n )}\n\n {this.#computedListAction === 'reorder' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-list-action\"\n library=\"core\"\n name=\"draggable\"\n />\n )}\n\n {this.imageSrc !== undefined && this.imageSrc !== '' && (\n <img class=\"qds-picture\" src={this.imageSrc} alt=\"\" />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-main-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.avatarSrc !== undefined && this.avatarSrc !== '' && (\n <img class=\"qds-avatar\" src={this.avatarSrc} alt=\"\" />\n )}\n\n <label class=\"qds-texts\">\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n <div class=\"qds-title\" ref={this.#divTitleRef}>\n {this.text}\n </div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\" ref={this.#divSubtitleRef}>\n {this.subtitle}\n </div>\n )}\n </label>\n\n {this.badge !== undefined && this.badge !== '' && (\n <qds-badge-counter\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n description={this.badgeDescription}\n />\n )}\n\n {this.#computedDestination !== undefined && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-destination qds-main-icon\"\n library=\"core\"\n name={this.#computedDestination}\n />\n )}\n </div>\n {this.showDivider && <qds-divider />}\n {this.textTooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#textTooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n {this.subtitleTooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#subtitleTooltipRef}>\n {this.subtitle}\n </qds-tooltip>\n )}\n </div>\n </Host>\n\n /* eslint-enable jsx-a11y/label-has-associated-control */\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 #divTitleRef = (div?: HTMLDivElement): void => {\n this.#text = div\n }\n\n readonly #divSubtitleRef = (div?: HTMLDivElement): void => {\n this.#subtitle = div\n }\n\n readonly #textTooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#text\n }\n\n readonly #subtitleTooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#subtitle\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-list-item.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,4oJAA4oJ;;ACAhqJ;AACA;AACA;;;;;;;;;;;;;;;;;;MAsCa,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;;;AAWE;;;AAGG;AACqB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjD;;;;AAIG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AASpD;;AAEG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAW,SAAS;AAyBvD;;AAEG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAU,UAAU;AA+D/B,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAEnB,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;QAExC,gBAAwB,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAExB,oBAA4B,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAE5B,cAAsB,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAEtB,kBAA0B,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QA0SjB,gBAAU,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAiB,KAAU;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AACxD,SAAC,CAAA;QAEQ,iBAAW,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,KAAiB,KAAU;YAC9C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AACzD,SAAC,CAAA;QAEQ,qBAAe,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,GAAoB,KAAU;YACrD,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAS,GAAG,EAAA,GAAA,CAAA;AAClB,SAAC,CAAA;QAEQ,wBAAkB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,GAAoB,KAAU;YACxD,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAa,GAAG,EAAA,GAAA,CAAA;AACtB,SAAC,CAAA;QAEQ,wBAAkB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,OAA+B,KAAU;AACnE,YAAA,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,sBAAA,CAAA,IAAI,sBAAM;AAC/B,SAAC,CAAA;QAEQ,4BAAsB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,OAA+B,KAAU;AACvE,YAAA,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,sBAAA,CAAA,IAAI,0BAAU;AACnC,SAAC,CAAA;AACF;AArRW,IAAA,OAAO,CAAC,KAAiB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,wBAAwB,EAAE;YAChC;;;;;;QAOF,KAAK,CAAC,cAAc,EAAE;AAEtB,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,aAAa,EAAE;YACrC,KAAK,CAAC,wBAAwB,EAAE;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,sBAAA,CAAA,IAAI,EAAuB,mBAAA,EAAA,GAAA,EAAA,mCAAA;AACzC,kBAAE;AACF,kBAAE,CAAC,sBAAA,CAAA,IAAI,2DAAkB;AAC3B,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAG5B,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,IAAI,CAAC,sBAAA,CAAA,IAAI,EAAkB,mBAAA,EAAA,GAAA,EAAA,8BAAA,CAAA,EAAE;YAC1D,KAAK,CAAC,wBAAwB,EAAE;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,sBAAA,CAAA,IAAI,2DAAkB;;;AAKjC,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;AAIpC,IAAA,OAAO,CAAC,KAAoB,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;AAIhC,IAAA,eAAe,CAAC,QAAgB,EAAA;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC;AACjD,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,WAAW;;IAI3D,eAAe,GAAA;QACvB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;;AAI9C,IAAA,iBAAiB,CAAC,QAAgC,EAAA;QAC1D,IAAI,CAAC,SAAS,CAAC,WAAW;AACxB,YAAA,CAAC,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,aAAa;gBACnD,sBAAA,CAAA,IAAI,EAAkB,mBAAA,EAAA,GAAA,EAAA,8BAAA;AACpB,kBAAE;kBACA,OAAO;;IAIL,eAAe,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,aAAa,EAAE;AACrC,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,sBAAA,CAAA,IAAI,EAAkB,mBAAA,EAAA,GAAA,EAAA,8BAAA,CAAA,CAAC,QAAQ,EAAE;;;IAKxD,WAAW,GAAA;AACnB,QAAA,IAAI,sBAAA,CAAA,IAAI,EAAQ,gBAAA,EAAA,GAAA,CAAA;YAAE,sBAAA,CAAA,IAAI,EAAA,gBAAA,EAAA,GAAA,CAAQ,CAAC,UAAU,EAAE;AAE3C,QAAA,IAAI,CAAC,uBAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAM,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;QAE/B,SAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,cAAA,EAAA,GAAA,CAAM,CAAC;QAErB,MAAM,GAAG,GAAG,sBAAA,CAAA,IAAI,sBAAM;QACtB,QAAQ,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,GAAG,CAAC;AAC1C,SAAC,CAAC;AACF,QAAA,sBAAA,CAAA,IAAI,EAAW,gBAAA,EAAA,IAAI,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAI;YAC/C,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAwB,CAAC;AACxE,SAAC,CAAC,MAAA;AACF,QAAA,sBAAA,CAAA,IAAI,wBAAQ,CAAC,OAAO,CAAC,sBAAA,CAAA,IAAI,EAAM,cAAA,EAAA,GAAA,CAAA,CAAC;;IAIxB,eAAe,GAAA;AACvB,QAAA,IAAI,sBAAA,CAAA,IAAI,EAAY,oBAAA,EAAA,GAAA,CAAA;YAAE,sBAAA,CAAA,IAAI,EAAA,oBAAA,EAAA,GAAA,CAAY,CAAC,UAAU,EAAE;QAEnD,IAAI,CAAC,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAU,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;YACxE;QAEF,SAAS,CAAC,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAU,CAAC;QACzB,MAAM,GAAG,GAAG,sBAAA,CAAA,IAAI,0BAAU;QAC1B,QAAQ,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,GAAG,CAAC;AAC9C,SAAC,CAAC;AACF,QAAA,sBAAA,CAAA,IAAI,EAAe,oBAAA,EAAA,IAAI,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAI;YACnD,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAwB,CAAC;AAC5E,SAAC,CAAC,MAAA;AACF,QAAA,sBAAA,CAAA,IAAI,4BAAY,CAAC,OAAO,CAAC,sBAAA,CAAA,IAAI,EAAU,kBAAA,EAAA,GAAA,CAAA,CAAC;;IAGnC,iBAAiB,GAAA;AACtB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC;AAC/D,QAAA,QAAQ,IAAI,CAAC,UAAU;YACrB,KAAK,OAAO,EAAE;AACZ,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,eAAe;gBACrC;;YAEF,KAAK,aAAa,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,kBAAkB;gBACxC;;YAEF,KAAK,SAAS,EAAE;AACd,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,QAAQ;gBAC9B;;YAEF,SAAS;AACP,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU;gBAChC;;;QAGJ,IAAI,CAAC,eAAe,EAAE;;IAGjB,gBAAgB,GAAA;QACrB,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,eAAe,EAAE;;IAGjB,MAAM,GAAA;QACX;;QAEE,CAAC,CAAA,IAAI,qDACH,MAAM,EAAE,uBAAA,IAAI,EAAA,gBAAA,EAAA,GAAA,CAAQ,EACpB,OAAO,EAAE,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,IAAI,EAAA,EAErB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,cAAc,EAAE,IAAI,CAAC,QAAQ;gBAC7B,cAAc,EAAE,sBAAA,CAAA,IAAI,EAAkB,mBAAA,EAAA,GAAA,EAAA,8BAAA,CAAA;aACvC,EACU,WAAA,EAAA,sBAAA,CAAA,IAAI,EAAc,mBAAA,EAAA,GAAA,EAAA,0BAAA,CAAA,EAAA,EAE7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,sBAAsB,EAAE,IAAI;AAC7B,aAAA,EAAA,EAEA,sBAAA,CAAA,IAAI,6DAAoB,KAAK,aAAa,KACzC,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAC,iBAAiB,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,iBACX,MAAM,EAClB,YAAY,EAAA,IAAA,EAAA,CACZ,CACH,EAEA,sBAAA,CAAA,IAAI,EAAoB,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA,KAAK,OAAO,KACnC,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,EAAE,EAAA,aAAA,EACA,MAAM,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,EAEA,sBAAA,CAAA,IAAI,6DAAoB,KAAK,SAAS,KACrC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,WAAW,EAAA,CAChB,CACH,EAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACvD,EAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gFACc,MAAM,EAClB,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACA,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,EAAE,KACpD,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAA,CAAI,CAC9D,EAED,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,KAC9C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAO,CAC5C,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAa,qBAAA,EAAA,GAAA,CAAA,EAAA,EAC1C,IAAI,CAAC,IAAI,CACN,EACL,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAA,wBAAA,EAAA,GAAA,CAAgB,EAChD,EAAA,IAAI,CAAC,QAAQ,CACV,CACP,CACK,EAEP,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,KAC5C,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,sBAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,0BAAA,CAAc,EACxB,UAAU,EACV,IAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GAClC,CACH,EAEA,sBAAA,CAAA,IAAI,EAAqB,mBAAA,EAAA,GAAA,EAAA,iCAAA,CAAA,KAAK,SAAS,KACtC,CACc,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,MAAM,EAClB,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,uBAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,iCAAA,CAAqB,EAC/B,CAAA,CACH,CACG,EACL,IAAI,CAAC,WAAW,IAAI,CAAe,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACnC,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAyB,MAAM,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAgB,wBAAA,EAAA,GAAA,CAAA,EAAA,EACtD,IAAI,CAAC,IAAI,CACE,CACf,EACA,IAAI,CAAC,eAAe,KACnB,CAAyB,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,EAAA,4BAAA,EAAA,GAAA,CAAoB,IAC1D,IAAI,CAAC,QAAQ,CACF,CACf,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhSV,IAAA,QAAQ,IAAI,CAAC,WAAW;QACtB,KAAK,YAAY,EAAE;YACjB,OAAO,IAAI,CAAC,WAAW;;QAEzB,SAAS;AACP,YAAA,OAAO,SAAS;;;AAGtB,CAAC,EAAA,mCAAA,GAAA,SAAA,mCAAA,GAAA;AAGC,IAAA,OAAO,IAAI,CAAC,aAAa,IAAI,KAAK;AACpC,CAAC,EAAA,gCAAA,GAAA,SAAA,gCAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,UAAU;AACrB,QAAA,KAAK,SAAS;AACd,QAAA,KAAK,OAAO;QACZ,KAAK,aAAa,EAAE;YAClB,OAAO,IAAI,CAAC,UAAU;;QAExB,SAAS;AACP,YAAA,OAAO,SAAS;;;AAGtB,CAAC,EAAA,8BAAA,GAAA,SAAA,8BAAA,GAAA;AAGC,IAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK;AAC/B,CAAC,EAAA,0BAAA,GAAA,SAAA,0BAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,IAAI;AACf,QAAA,KAAK,UAAU;AACf,QAAA,KAAK,OAAO;QACZ,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI;;QAElB,SAAS;AACP,YAAA,OAAO,UAAU;;;AAGvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--qds-control-border-radius);\n}\n\n.qds-list-action {\n pointer-events: none;\n}\n\n.qds-indented-content {\n display: flex;\n flex: 1 0;\n align-self: stretch;\n}\n\n.qds-destination {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-icon,\n.qds-main-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-picture {\n flex-shrink: 0;\n}\n\n.qds-texts {\n justify-items: center;\n display: flex;\n flex: 1 0;\n flex-direction: column;\n padding: 0;\n position: relative;\n}\n\n.qds-input {\n appearance: none;\n background: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n inset: 0;\n margin: 0;\n outline: none;\n position: absolute;\n}\n\n.qds-title {\n color: var(--qds-theme-title);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n overflow: hidden;\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n overflow: hidden;\n}\n\n[data-size='small'] {\n .qds-indented-content {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding: var(--qds-list-item-small-padding-vertical)\n var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-small-icon-size);\n width: var(--qds-list-item-small-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-small-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-small-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-small-picture-size);\n width: var(--qds-list-item-small-picture-size);\n }\n}\n\n[data-size='standard'] {\n .qds-indented-content {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding: var(--qds-list-item-standard-padding-vertical)\n var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-standard-icon-size);\n width: var(--qds-list-item-standard-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-standard-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-standard-picture-size);\n width: var(--qds-list-item-standard-picture-size);\n }\n}\n\n[data-size='large'] {\n .qds-indented-content {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding: var(--qds-list-item-large-padding-vertical)\n var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n .qds-main-icon {\n height: var(--qds-list-item-large-icon-size);\n width: var(--qds-list-item-large-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-large-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-large-subtitle);\n }\n\n .qds-picture {\n height: var(--qds-list-item-large-picture-size);\n width: var(--qds-list-item-large-picture-size);\n }\n}\n\n.qds-list-item {\n display: block;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:has(input: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\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-selected-hover);\n }\n\n &:active {\n background-color: var(\n --qds-theme-interactive-background-selected-pressed\n );\n }\n }\n\n &[data-size='small'] .qds-title {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-title {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-title {\n font: var(--qds-list-item-large-title-emphasized);\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 Host,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n invariant,\n isEllipsisActive,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'radio' | 'reorder'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: false },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * The destination action that the list item denotes through its rightmost icon.\n */\n @Prop() public readonly destination?: Destination\n\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Control how to display the bottom divider line.\n *\n * By default, the divider is not visible.\n */\n @Prop() public readonly showDivider: 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 URL of the avatar image to display.\n */\n @Prop() public readonly avatarSrc?: string\n\n /**\n * The URL of the picture to display.\n *\n * This is used to display a picture in the list item.\n * It is not used for the avatar image.\n */\n @Prop() public readonly imageSrc?: string\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The type of list-level action that the list item supports\n */\n @Prop() public readonly listAction?: ListAction\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop({ mutable: true }) public selected?: boolean\n\n /**\n * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n * This is usually applied to items that represent a \"select all/none\" behavior when associated\n * items have a mix of selected and unselected states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The primary text of the list item.\n */\n @Prop() public readonly text!: string\n\n /**\n * Text to display below the primary text.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Displays a counter badge if a number or string representing a number is used.\n *\n * @webnative\n */\n @Prop() public readonly badge?: number | string\n\n /**\n * The counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * Emitted when the list item 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 list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n @State() private textTooltip = false\n\n @State() private subtitleTooltip = false\n\n #roText?: ResizeObserver\n\n #roSubTitle?: ResizeObserver\n\n #text?: HTMLDivElement\n\n #subtitle?: HTMLDivElement\n\n get #computedDestination(): Destination | undefined {\n switch (this.destination) {\n case 'navigation': {\n return this.destination\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedListAction(): ListAction | undefined {\n switch (this.listAction) {\n case 'reorder':\n case 'radio':\n case 'multiselect': {\n return this.listAction\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSelected(): boolean {\n return this.selected ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.stopImmediatePropagation()\n return\n }\n\n // Always prevent default behavior to avoid the internal `<input>`\n // to toggle `checked` state inappropriately.\n //\n // Note that this will need adjustments once we add the `item-action` slot.\n event.preventDefault()\n\n if (this.listAction === 'multiselect') {\n event.stopImmediatePropagation()\n this.selected = this.#computedIndeterminate\n ? true\n : !this.#computedSelected\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n if (this.listAction === 'radio' && !this.#computedSelected) {\n event.stopImmediatePropagation()\n this.selected = !this.#computedSelected\n }\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') this.host.click()\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('listAction')\n protected listActionChanged(newValue: ListAction | undefined): void {\n this.internals.ariaChecked =\n (newValue === 'radio' || newValue === 'multiselect') &&\n this.#computedSelected\n ? 'true'\n : 'false'\n }\n\n @Watch('selected')\n protected selectedChanged(): void {\n if (this.listAction === 'multiselect') {\n this.internals.ariaChecked = this.#computedSelected.toString()\n }\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#roText) this.#roText.disconnect()\n\n if (!this.#text || !this.text) return\n\n invariant(this.#text)\n\n const div = this.#text\n readTask(() => {\n this.textTooltip = isEllipsisActive(div)\n })\n this.#roText = new ResizeObserver(([divEntry]) => {\n this.textTooltip = isEllipsisActive(divEntry.target as HTMLDivElement)\n })\n this.#roText.observe(this.#text)\n }\n\n @Watch('subtitle')\n protected subtitleChanged(): void {\n if (this.#roSubTitle) this.#roSubTitle.disconnect()\n\n if (!this.#subtitle || this.subtitle === undefined || this.subtitle === '')\n return\n\n invariant(this.#subtitle)\n const div = this.#subtitle\n readTask(() => {\n this.subtitleTooltip = isEllipsisActive(div)\n })\n this.#roSubTitle = new ResizeObserver(([divEntry]) => {\n this.subtitleTooltip = isEllipsisActive(divEntry.target as HTMLDivElement)\n })\n this.#roSubTitle.observe(this.#subtitle)\n }\n\n public componentWillLoad(): void {\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n switch (this.listAction) {\n case 'radio': {\n this.internals.role = 'menuitemradio'\n break\n }\n case 'multiselect': {\n this.internals.role = 'menuitemcheckbox'\n break\n }\n case undefined: {\n this.internals.role = 'option'\n break\n }\n default: {\n this.internals.role = 'listitem'\n break\n }\n }\n this.disabledChanged()\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n this.subtitleChanged()\n }\n\n public render() {\n return (\n /* eslint-disable jsx-a11y/label-has-associated-control */\n <Host\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n tabIndex={this.tabIndex}\n aria-label={this.text}\n >\n <div\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.#computedSelected,\n }}\n data-size={this.#computedSize}\n >\n <div\n class={{\n 'qds-indented-content': true,\n }}\n >\n {this.#computedListAction === 'multiselect' && (\n <qds-checkbox\n checked={this.selected}\n class=\"qds-list-action\"\n indeterminate={this.indeterminate}\n size={this.size}\n tabindex={-1}\n text={this.text}\n disabled={this.disabled}\n aria-hidden=\"true\"\n checkboxOnly\n />\n )}\n\n {this.#computedListAction === 'radio' && (\n <qds-radio\n checked={this.selected}\n class=\"qds-list-action\"\n size={this.size}\n tabindex={-1}\n aria-hidden=\"true\"\n disabled={this.disabled}\n />\n )}\n\n {this.#computedListAction === 'reorder' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-list-action\"\n library=\"core\"\n name=\"draggable\"\n />\n )}\n\n {this.imageSrc !== undefined && this.imageSrc !== '' && (\n <img class=\"qds-picture\" src={this.imageSrc} alt=\"\" />\n )}\n\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-main-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.avatarSrc !== undefined && this.avatarSrc !== '' && (\n <qds-avatar-media class=\"qds-picture\" src={this.avatarSrc} />\n )}\n\n <label class=\"qds-texts\">\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n <div class=\"qds-title\" ref={this.#divTitleRef}>\n {this.text}\n </div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\" ref={this.#divSubtitleRef}>\n {this.subtitle}\n </div>\n )}\n </label>\n\n {this.badge !== undefined && this.badge !== '' && (\n <qds-badge-counter\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n description={this.badgeDescription}\n />\n )}\n\n {this.#computedDestination !== undefined && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-destination\"\n library=\"core\"\n name={this.#computedDestination}\n />\n )}\n </div>\n {this.showDivider && <qds-divider />}\n {this.textTooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#textTooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n {this.subtitleTooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#subtitleTooltipRef}>\n {this.subtitle}\n </qds-tooltip>\n )}\n </div>\n </Host>\n\n /* eslint-enable jsx-a11y/label-has-associated-control */\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 #divTitleRef = (div?: HTMLDivElement): void => {\n this.#text = div\n }\n\n readonly #divSubtitleRef = (div?: HTMLDivElement): void => {\n this.#subtitle = div\n }\n\n readonly #textTooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#text\n }\n\n readonly #subtitleTooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#subtitle\n }\n}\n"],"version":3}
|
package/components/qds-loader.js
CHANGED
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, h } from './p-BEWDu8_P.js';
|
|
7
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
+
import { d as defineCustomElement$2 } from './p-D6kEwmWw.js';
|
|
8
8
|
|
|
9
|
-
const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-feedback-loader-small-size);
|
|
9
|
+
const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-feedback-loader-small-size);width:var(--qds-feedback-loader-small-size)}[data-size=small][data-status=loading]{padding:var(--qds-signature-circle-progress-small-border-width)}[data-size=standard]{height:var(--qds-feedback-loader-standard-size);width:var(--qds-feedback-loader-standard-size)}[data-size=standard][data-status=loading]{padding:var(--qds-signature-circle-progress-standard-border-width)}[data-size=large]{height:var(--qds-feedback-loader-large-size);width:var(--qds-feedback-loader-large-size)}[data-size=large][data-status=loading]{padding:var(--qds-signature-circle-progress-large-border-width)}[data-size=jumbo]{height:var(--qds-feedback-loader-jumbo-size);width:var(--qds-feedback-loader-jumbo-size)}[data-size=jumbo][data-status=loading]{padding:var(--qds-signature-circle-progress-jumbo-border-width)}[data-size=hero]{height:var(--qds-feedback-loader-hero-size);width:var(--qds-feedback-loader-hero-size)}[data-size=hero][data-status=loading]{padding:var(--qds-signature-circle-progress-hero-border-width)}[data-status=loading]{animation:a 1s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}[data-status=loading][data-importance=standard]{background-image:var(--qds-theme-feedback-loader-standard-indeterminate)}[data-status=loading][data-importance=destructive]{background-image:var(\n --qds-theme-feedback-loader-destructive-indeterminate\n )}[data-status=loading][data-importance=informative]{background-image:var(\n --qds-theme-feedback-loader-informational-indeterminate\n )}[data-status=loading][data-importance=neutral-contrast]{background-image:var(\n --qds-theme-feedback-loader-neutral-on-dark-indeterminate\n );border:var(--qds-theme-feedback-loader-neutral-on-dark-indeterminate)}[data-status=loading][data-importance=neutral]{background-image:var(\n --qds-theme-feedback-loader-neutral-on-light-indeterminate\n );border:var(--qds-theme-feedback-loader-neutral-on-light-indeterminate)}@keyframes a{to{transform:rotate(1turn)}}[data-status=success]{color:var(--qds-theme-feedback-result-success)}[data-status=warning]{color:var(--qds-theme-feedback-result-partial-success)}[data-status=error]{color:var(--qds-theme-feedback-result-failure)}";
|
|
10
10
|
|
|
11
11
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
12
12
|
//
|
|
@@ -70,7 +70,7 @@ const Loader = /*@__PURE__*/ proxyCustomElement(class Loader extends H {
|
|
|
70
70
|
this.statusChanged();
|
|
71
71
|
}
|
|
72
72
|
render() {
|
|
73
|
-
return __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get) ? (h("qds-icon", { "aria-hidden": "true", class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get), library: "core", name: `status-${this.status}` })) : (h("div", { "aria-hidden": "true", class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": "loading", "data-importance": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedImportance_get) }));
|
|
73
|
+
return __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get) ? (h("qds-icon", { "aria-hidden": "true", class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get), library: "core", name: `status-${this.status}-solid` })) : (h("div", { "aria-hidden": "true", class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": "loading", "data-importance": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedImportance_get) }));
|
|
74
74
|
}
|
|
75
75
|
static get formAssociated() { return true; }
|
|
76
76
|
get host() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-loader.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"qds-loader.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/loader/loader.css?tag=qds-loader&encapsulation=shadow","src/components/loader/loader.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-loader {\n border-radius: var(--qds-control-rounded-border-radius);\n box-sizing: border-box;\n color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n[data-size='small'] {\n height: var(--qds-feedback-loader-small-size);\n width: var(--qds-feedback-loader-small-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-small-border-width);\n }\n}\n\n[data-size='standard'] {\n height: var(--qds-feedback-loader-standard-size);\n width: var(--qds-feedback-loader-standard-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-standard-border-width);\n }\n}\n\n[data-size='large'] {\n height: var(--qds-feedback-loader-large-size);\n width: var(--qds-feedback-loader-large-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-large-border-width);\n }\n}\n\n[data-size='jumbo'] {\n height: var(--qds-feedback-loader-jumbo-size);\n width: var(--qds-feedback-loader-jumbo-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-jumbo-border-width);\n }\n}\n\n[data-size='hero'] {\n height: var(--qds-feedback-loader-hero-size);\n width: var(--qds-feedback-loader-hero-size);\n\n &[data-status='loading'] {\n padding: var(--qds-signature-circle-progress-hero-border-width);\n }\n}\n\n[data-status='loading'] {\n animation: loading 1s linear infinite;\n /* stylelint-disable color-no-hex, declaration-property-value-no-unknown */\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex, declaration-property-value-no-unknown */\n mask-composite: exclude;\n\n &[data-importance='standard'] {\n background-image: var(--qds-theme-feedback-loader-standard-indeterminate);\n }\n\n &[data-importance='destructive'] {\n background-image: var(\n --qds-theme-feedback-loader-destructive-indeterminate\n );\n }\n\n &[data-importance='informative'] {\n background-image: var(\n --qds-theme-feedback-loader-informational-indeterminate\n );\n }\n\n &[data-importance='neutral-contrast'] {\n background-image: var(\n --qds-theme-feedback-loader-neutral-on-dark-indeterminate\n );\n border: var(--qds-theme-feedback-loader-neutral-on-dark-indeterminate);\n }\n\n &[data-importance='neutral'] {\n background-image: var(\n --qds-theme-feedback-loader-neutral-on-light-indeterminate\n );\n border: var(--qds-theme-feedback-loader-neutral-on-light-indeterminate);\n }\n}\n\n@keyframes loading {\n to {\n transform: rotate(1turn);\n }\n}\n\n[data-status='success'] {\n color: var(--qds-theme-feedback-result-success);\n}\n\n[data-status='warning'] {\n color: var(--qds-theme-feedback-result-partial-success);\n}\n\n[data-status='error'] {\n color: var(--qds-theme-feedback-result-failure);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n h,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\nexport type LoaderSize = Size | 'hero' | 'jumbo'\nexport type LoaderStatus = 'error' | 'success' | 'warning'\nexport type LoaderImportance =\n | 'destructive'\n | 'informative'\n | 'neutral-contrast'\n | 'neutral'\n | 'standard'\n/**\n * The `<qds-loader>` element displays an indicator showing that content is\n * being loaded or processed.\n *\n * @see https://quartz.se.com/build/components/loader\n */\n@Component({\n tag: 'qds-loader',\n formAssociated: true,\n shadow: true,\n styleUrl: 'loader.css',\n})\nexport class Loader implements ComponentInterface {\n /**\n * The loader's size.\n */\n @Prop() public readonly size?: LoaderSize = 'standard'\n\n /**\n * The loader's status.\n */\n @Prop() public readonly status?: LoaderStatus\n\n /**\n * The loader's importance.\n */\n @Prop() public readonly importance?: LoaderImportance = 'standard'\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n get #computedSize(): LoaderSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero':\n case 'jumbo': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedStatus(): LoaderStatus | undefined {\n switch (this.status) {\n case 'error':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedImportance(): LoaderImportance {\n switch (this.importance) {\n case 'destructive':\n case 'informative':\n case 'neutral':\n case 'neutral-contrast':\n case 'standard': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Watch('status')\n protected statusChanged(): void {\n const status = this.#computedStatus\n\n this.internals.ariaValueNow =\n status === undefined\n ? // eslint-disable-next-line unicorn/no-null\n null\n : this.internals.ariaValueMax\n\n switch (status) {\n case 'error': {\n this.internals.ariaLabel = 'Error'\n break\n }\n case 'success': {\n this.internals.ariaLabel = 'Loaded'\n break\n }\n case 'warning': {\n this.internals.ariaLabel = 'Warning'\n break\n }\n default: {\n this.internals.ariaLabel = 'Loading'\n }\n }\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'progressbar'\n this.internals.ariaValueMin = this.host.ariaValueMin ?? '0'\n this.internals.ariaValueMax = this.host.ariaValueMax ?? '1'\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.statusChanged()\n }\n\n public render() {\n return this.#computedStatus ? (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-loader\"\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n library=\"core\"\n name={`status-${this.status}-solid`}\n />\n ) : (\n <div\n aria-hidden=\"true\"\n class=\"qds-loader\"\n data-size={this.#computedSize}\n data-status=\"loading\"\n data-importance={this.#computedImportance}\n />\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
|