@quartzds/core 1.0.0-beta.125 → 1.0.0-beta.127
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 +27 -0
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -1
- package/components/index.js.map +1 -1
- package/components/{p-2tdMcXmA.js → p--fUtCWTJ.js} +6 -6
- package/components/{p-2tdMcXmA.js.map → p--fUtCWTJ.js.map} +1 -1
- package/components/{p-B_CYrw-t.js → p-B2794xy3.js} +3 -3
- package/components/{p-B_CYrw-t.js.map → p-B2794xy3.js.map} +1 -1
- package/components/{p-BRpaYGSM.js → p-BIt0dDIJ.js} +4 -4
- package/components/{p-BRpaYGSM.js.map → p-BIt0dDIJ.js.map} +1 -1
- package/components/p-CHINI0hi.js +124 -0
- package/components/p-CHINI0hi.js.map +1 -0
- package/components/{p-CgQQYnEy.js → p-CIoYTw7w.js} +23 -12
- package/components/p-CIoYTw7w.js.map +1 -0
- package/components/{p-ox2syNht.js → p-CS-MebAm.js} +6 -6
- package/components/{p-ox2syNht.js.map → p-CS-MebAm.js.map} +1 -1
- package/components/{p-DTMrBXCl.js → p-CVa_aaUh.js} +20 -11
- package/components/p-CVa_aaUh.js.map +1 -0
- package/components/{p-B6ToH-uM.js → p-CeqWiFUg.js} +3 -3
- package/components/{p-B6ToH-uM.js.map → p-CeqWiFUg.js.map} +1 -1
- package/components/{p-CG_jPYOl.js → p-CgD-5rh_.js} +39 -19
- package/components/p-CgD-5rh_.js.map +1 -0
- package/components/{p-EjoVBa5a.js → p-CtPHn4AQ.js} +3 -3
- package/components/{p-EjoVBa5a.js.map → p-CtPHn4AQ.js.map} +1 -1
- package/components/{p-BuCcV5P1.js → p-D03cCQ_7.js} +8 -8
- package/components/{p-BuCcV5P1.js.map → p-D03cCQ_7.js.map} +1 -1
- package/components/{p-BceRDckL.js → p-epc3kt-8.js} +25 -21
- package/components/p-epc3kt-8.js.map +1 -0
- package/components/qds-action-item.js +2 -2
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-avatar.d.ts +11 -0
- package/components/qds-avatar.js +120 -0
- package/components/qds-avatar.js.map +1 -0
- package/components/qds-badge-indicator.js +1 -1
- package/components/qds-breadcrumb-item.js +5 -5
- package/components/qds-button.js +34 -10
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +8 -8
- package/components/qds-dialog.js +5 -5
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +3 -3
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.js +7 -7
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +3 -3
- package/components/qds-input.js +5 -5
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.js +3 -3
- package/components/qds-list-item.js +13 -13
- package/components/qds-loader.js +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 +11 -15
- package/components/qds-select.js.map +1 -1
- package/components/qds-standalone-link.js +3 -3
- package/components/qds-switch.js +4 -4
- package/components/qds-tab.js +7 -7
- package/components/qds-tabbar.js +10 -10
- 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-textarea.js.map +1 -1
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-avatar-media.cjs.entry.js +105 -0
- package/dist/cjs/qds-avatar-media.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-avatar.cjs.entry.js +70 -0
- package/dist/cjs/qds-avatar.entry.cjs.js.map +1 -0
- package/dist/cjs/qds-badge-counter.qds-badge-indicator.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js +27 -5
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +3 -3
- package/dist/cjs/qds-button.cjs.entry.js +30 -7
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-checkbox.qds-radio.entry.cjs.js.map +1 -0
- package/dist/cjs/{qds-avatar-media_3.cjs.entry.js → qds-checkbox_2.cjs.entry.js} +22 -104
- package/dist/cjs/qds-chip.cjs.entry.js +5 -5
- package/dist/cjs/qds-dialog.cjs.entry.js +1 -1
- package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +33 -14
- package/dist/cjs/qds-dropdown.cjs.entry.js +18 -9
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +2 -2
- package/dist/cjs/qds-icon-tab.cjs.entry.js +3 -3
- package/dist/cjs/qds-icon.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +2 -2
- package/dist/cjs/qds-input.cjs.entry.js +3 -3
- package/dist/cjs/qds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +2 -2
- package/dist/cjs/qds-list-item.cjs.entry.js +4 -4
- package/dist/cjs/qds-menu-item.cjs.entry.js +5 -5
- 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 +10 -14
- package/dist/cjs/qds-select.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-standalone-link.cjs.entry.js +2 -2
- package/dist/cjs/qds-switch.cjs.entry.js +3 -3
- package/dist/cjs/qds-tab.cjs.entry.js +3 -3
- 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.cjs.entry.js +2 -2
- package/dist/cjs/qds-textarea.cjs.entry.js +3 -3
- package/dist/cjs/qds-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-title.cjs.entry.js +3 -3
- package/dist/cjs/qds-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +338 -14
- package/dist/docs.json +468 -19
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-avatar-media.entry.js +103 -0
- package/dist/esm/qds-avatar-media.entry.js.map +1 -0
- package/dist/esm/qds-avatar.entry.js +68 -0
- package/dist/esm/qds-avatar.entry.js.map +1 -0
- package/dist/esm/qds-badge-counter.qds-badge-indicator.entry.js.map +1 -1
- package/dist/esm/qds-badge-counter_2.entry.js +27 -5
- package/dist/esm/qds-breadcrumb-item.entry.js +3 -3
- package/dist/esm/qds-button.entry.js +30 -7
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-checkbox.qds-radio.entry.js.map +1 -0
- package/dist/esm/{qds-avatar-media_3.entry.js → qds-checkbox_2.entry.js} +24 -105
- package/dist/esm/qds-chip.entry.js +5 -5
- package/dist/esm/qds-dialog.entry.js +1 -1
- package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +33 -14
- package/dist/esm/qds-dropdown.entry.js +18 -9
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +2 -2
- package/dist/esm/qds-icon-tab.entry.js +3 -3
- package/dist/esm/qds-icon.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js +2 -2
- package/dist/esm/qds-input.entry.js +3 -3
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +2 -2
- package/dist/esm/qds-list-item.entry.js +4 -4
- 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 +10 -14
- package/dist/esm/qds-select.entry.js.map +1 -1
- package/dist/esm/qds-standalone-link.entry.js +2 -2
- package/dist/esm/qds-switch.entry.js +3 -3
- package/dist/esm/qds-tab.entry.js +3 -3
- 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.entry.js +2 -2
- package/dist/esm/qds-textarea.entry.js +3 -3
- package/dist/esm/qds-textarea.entry.js.map +1 -1
- package/dist/esm/qds-title.entry.js +3 -3
- package/dist/esm/qds-tooltip.entry.js +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/avatar/avatar.d.ts +61 -0
- package/dist/types/components/avatar-media/avatar-media.d.ts +0 -1
- package/dist/types/components/badge-indicator/badge-indicator.d.ts +1 -1
- package/dist/types/components/button/button.d.ts +1 -0
- package/dist/types/components/checkbox/checkbox.d.ts +1 -0
- package/dist/types/components/icon-button/icon-button.d.ts +1 -0
- package/dist/types/components/select/select.d.ts +1 -1
- package/dist/types/components.d.ts +139 -6
- package/dist/vscode.html-custom-data.json +99 -0
- package/hydrate/index.js +312 -143
- package/hydrate/index.mjs +312 -143
- package/package.json +1 -1
- package/components/p-BceRDckL.js.map +0 -1
- package/components/p-CG_jPYOl.js.map +0 -1
- package/components/p-CgQQYnEy.js.map +0 -1
- package/components/p-DTMrBXCl.js.map +0 -1
- package/components/p-U2Q0vF-d.js +0 -96
- package/components/p-U2Q0vF-d.js.map +0 -1
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +0 -1
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-avatar-media.entry.cjs.js","sources":["src/components/avatar-media/avatar-media.css?tag=qds-avatar-media&encapsulation=shadow","src/components/avatar-media/avatar-media.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 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-container {\n display: flex;\n justify-content: center;\n align-self: stretch;\n border-radius: var(--qds-display-rounded-border-radius);\n border: var(--qds-display-border-width) solid\n var(--qds-theme-display-background-contrast);\n background: var(--qds-theme-display-background);\n width: inherit;\n height: inherit;\n align-items: center;\n}\n\n.qds-picture {\n height: 100%;\n width: 100%;\n object-fit: cover;\n border-radius: inherit;\n flex-shrink: 0;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-display-background-contrast);\n}\n\n.qds-text {\n text-align: center;\n font: var(--qds-display-standard);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n","// SPDX-FileCopyrightText: © 2025 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Event,\n Fragment,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\n/**\n * @experimental\n */\n@Component({\n tag: 'qds-avatar-media',\n shadow: true,\n styleUrl: 'avatar-media.css',\n})\nexport class AvatarMedia implements ComponentInterface {\n /**\n * The avatar-media's image source.\n * @webnative\n */\n @Prop() public readonly src?: string\n\n /**\n * The alt text for the avatar-media's image.\n * @webnative\n */\n @Prop() public readonly alt?: string\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 avatar-media's text content.\n */\n @Prop() public readonly text?: string\n\n /**\n * Emitted when the avatar-media's image has loaded.\n */\n @Event({ eventName: 'qdsLoad', cancelable: false })\n private readonly loadEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the avatar-media's image fails to load due to an error.\n */\n @Event({ eventName: 'qdsError', cancelable: false })\n private readonly errorEmitter!: EventEmitter<void>\n\n @State() private initials?: string\n\n @State() private hasImageError = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @Watch('text')\n private textChanged(): void {\n if (this.text === undefined || this.text === '') {\n this.initials = undefined\n return\n }\n const words = this.text.trim().split(' ')\n const [first = '', second = ''] = words.filter(Boolean)\n this.initials = (\n first.charAt(0) + (second.charAt(0) || '')\n ).toLocaleUpperCase()\n }\n\n @Watch('src')\n @Watch('text')\n @Watch('iconName')\n @Watch('alt')\n private roleChanged(): void {\n const hasSource =\n this.src !== undefined && this.src !== '' && !this.hasImageError\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasText = this.text !== undefined && this.text !== ''\n const hasFallbackIcon = !hasSource && !hasIcon && !hasText\n const isImgMode = hasSource || hasIcon || hasFallbackIcon\n\n if (isImgMode) this.internals.role = 'img'\n else if (hasText) this.internals.role = 'generic'\n else this.internals.role = 'presentation'\n\n this.internals.ariaLabel =\n isImgMode && this.alt !== undefined && this.alt !== ''\n ? this.alt\n : // eslint-disable-next-line unicorn/no-null\n null\n }\n\n public componentWillLoad(): Promise<void> | void {\n this.textChanged()\n this.roleChanged()\n }\n\n public render() {\n return <div class=\"qds-container\">{this.#renderContent()}</div>\n }\n\n readonly #renderContent = (): HTMLElement | undefined => {\n if (this.src !== undefined && this.src !== '' && !this.hasImageError)\n return (\n <img\n aria-hidden=\"true\"\n class=\"qds-picture\"\n src={this.src}\n alt={this.alt}\n onError={this.#handleImageError}\n onLoad={this.#handleImageLoad}\n />\n )\n if (this.iconName !== undefined && this.iconName !== '')\n return (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )\n if (this.text !== undefined && this.text !== '')\n return (\n <span aria-hidden=\"true\" class=\"qds-text\">\n {this.initials}\n </span>\n )\n return <qds-icon class=\"qds-icon\" name=\"user\" library=\"core\" />\n }\n\n readonly #handleImageError = (): void => {\n this.hasImageError = true\n this.roleChanged()\n this.errorEmitter.emit()\n }\n\n readonly #handleImageLoad = (): void => {\n this.hasImageError = false\n this.roleChanged()\n this.loadEmitter.emit()\n }\n}\n"],"names":["h"],"mappings":"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"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
var index = require('./index-DIY7gpXM.js');
|
|
9
|
+
|
|
10
|
+
const avatarCss = ":host([hidden]){display:none!important}:host{display:block}.qds-avatar,.qds-label-container{display:inline-flex;position:relative}.qds-avatar-vertical,.qds-label-container{flex-direction:column}.qds-avatar-vertical,.qds-avatar-vertical .qds-label-container{align-items:center}.qds-avatar-media-wrapper{flex-shrink:0;position:relative}.qds-label{color:var(--qds-theme-title)}.qds-kicker{color:var(--qds-theme-kicker)}.qds-indicator{inset-block-start:0;inset-inline-end:0;position:absolute;transform:translate(50%,-50%)}.qds-avatar[data-size=large]{gap:var(--qds-list-item-large-gap-internal)}[data-size=large] .qds-avatar-media{height:var(--qds-display-avatar-large-size);width:var(--qds-display-avatar-large-size)}[data-size=large] .qds-label-container{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-label{font:var(--qds-list-item-large-title)}[data-size=large] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-avatar[data-size=standard]{gap:var(--qds-list-item-standard-gap-internal);height:var(--qds-control-standard-height)}[data-size=standard] .qds-avatar-media{height:var(--qds-display-avatar-standard-size);width:var(--qds-display-avatar-standard-size)}[data-size=standard] .qds-label-container{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-label{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-avatar[data-size=small]{gap:var(--qds-list-item-small-gap-internal)}[data-size=small] .qds-avatar-media{height:var(--qds-display-avatar-small-size);width:var(--qds-display-avatar-small-size)}[data-size=small] .qds-label-container{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-label{font:var(--qds-list-item-small-title)}[data-size=small] .qds-kicker{font:var(--qds-list-item-small-kicker)}";
|
|
11
|
+
|
|
12
|
+
// SPDX-FileCopyrightText: © 2026 Schneider Electric
|
|
13
|
+
//
|
|
14
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
15
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
16
|
+
if (kind === "a" && !f)
|
|
17
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
18
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
19
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
20
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
21
|
+
};
|
|
22
|
+
var _Avatar_instances, _Avatar_computedSize_get;
|
|
23
|
+
const Avatar = class {
|
|
24
|
+
constructor(hostRef) {
|
|
25
|
+
index.registerInstance(this, hostRef);
|
|
26
|
+
_Avatar_instances.add(this);
|
|
27
|
+
/**
|
|
28
|
+
* The name of a registered icon library.
|
|
29
|
+
*/
|
|
30
|
+
this.iconLibrary = 'default';
|
|
31
|
+
/**
|
|
32
|
+
* The avatar's size.
|
|
33
|
+
*/
|
|
34
|
+
this.size = 'standard';
|
|
35
|
+
/**
|
|
36
|
+
* Display the avatar in a vertical direction.
|
|
37
|
+
*/
|
|
38
|
+
this.vertical = false;
|
|
39
|
+
/**
|
|
40
|
+
* Displays an indicator if `true`.
|
|
41
|
+
*/
|
|
42
|
+
this.badge = false;
|
|
43
|
+
/**
|
|
44
|
+
* The indicator's status.
|
|
45
|
+
*/
|
|
46
|
+
this.badgeIndicatorStatus = 'success';
|
|
47
|
+
}
|
|
48
|
+
render() {
|
|
49
|
+
const hasLabel = this.label !== undefined && this.label !== '';
|
|
50
|
+
const hasAlt = this.avatarAlt !== undefined && this.avatarAlt !== '';
|
|
51
|
+
const hasKicker = this.kicker !== undefined && this.kicker !== '';
|
|
52
|
+
return (index.h("div", { key: '9e5afc4f296453da0caffe97ff460fc270de5f19', class: { 'qds-avatar': true, 'qds-avatar-vertical': this.vertical }, "data-size": __classPrivateFieldGet(this, _Avatar_instances, "a", _Avatar_computedSize_get) }, index.h("div", { key: '5b3161d52ce3b5be827a814eb70d9e8c92e2b019', class: "qds-avatar-media-wrapper" }, index.h("qds-avatar-media", { key: '953b17155bb70a5771487c3440d040230241152c', class: "qds-avatar-media", "aria-hidden": hasAlt ? undefined : 'true', src: this.avatarSrc, alt: this.avatarAlt, iconName: this.iconName, iconLibrary: this.iconLibrary, text: this.label }), (this.badge ?? false) && (index.h("qds-badge-indicator", { key: '95445d863e6d5080b6e999d5c57eca457a759874', class: "qds-indicator", status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Avatar_instances, "a", _Avatar_computedSize_get), strokeRing: true }))), (hasLabel || hasKicker) && (index.h("div", { key: '1b894e10450d016473472ddd117642a99d0c7a57', class: "qds-label-container" }, hasLabel && index.h("strong", { key: 'b1eb9a51cdf20a03b4857dc7e81cd40449d2913d', class: "qds-label" }, this.label), hasKicker && index.h("div", { key: '0baf3adbae5e906b2fb27c289066bfe43fb4b86c', class: "qds-kicker" }, this.kicker)))));
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
_Avatar_instances = new WeakSet(), _Avatar_computedSize_get = function _Avatar_computedSize_get() {
|
|
56
|
+
switch (this.size) {
|
|
57
|
+
case 'standard':
|
|
58
|
+
case 'small':
|
|
59
|
+
case 'large': {
|
|
60
|
+
return this.size;
|
|
61
|
+
}
|
|
62
|
+
default: {
|
|
63
|
+
return 'standard';
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
Avatar.style = avatarCss;
|
|
68
|
+
|
|
69
|
+
exports.qds_avatar = Avatar;
|
|
70
|
+
//# sourceMappingURL=qds-avatar.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-avatar.entry.cjs.js","sources":["src/components/avatar/avatar.css?tag=qds-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2026 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-label-container,\n.qds-avatar {\n display: inline-flex;\n position: relative;\n}\n\n.qds-label-container {\n flex-direction: column;\n}\n\n.qds-avatar-vertical {\n flex-direction: column;\n align-items: center;\n}\n\n.qds-avatar-vertical .qds-label-container {\n align-items: center;\n}\n\n.qds-avatar-media-wrapper {\n position: relative;\n flex-shrink: 0;\n}\n\n.qds-label {\n color: var(--qds-theme-title);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n}\n\n.qds-indicator {\n position: absolute;\n transform: translate(50%, -50%);\n inset-block-start: 0;\n inset-inline-end: 0;\n}\n\n[data-size='large'] {\n &.qds-avatar {\n gap: var(--qds-list-item-large-gap-internal);\n }\n\n .qds-avatar-media {\n width: var(--qds-display-avatar-large-size);\n height: var(--qds-display-avatar-large-size);\n }\n\n .qds-label-container {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n .qds-label {\n font: var(--qds-list-item-large-title);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-avatar {\n gap: var(--qds-list-item-standard-gap-internal);\n height: var(--qds-control-standard-height);\n }\n\n .qds-avatar-media {\n width: var(--qds-display-avatar-standard-size);\n height: var(--qds-display-avatar-standard-size);\n }\n\n .qds-label-container {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n .qds-label {\n font: var(--qds-list-item-standard-title);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='small'] {\n &.qds-avatar {\n gap: var(--qds-list-item-small-gap-internal);\n }\n\n .qds-avatar-media {\n width: var(--qds-display-avatar-small-size);\n height: var(--qds-display-avatar-small-size);\n }\n\n .qds-label-container {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n .qds-label {\n font: var(--qds-list-item-small-title);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n","// SPDX-FileCopyrightText: © 2026 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, Watch } from '@stencil/core'\n\nimport type { Size } from '../shared'\n\n/**\n * The avatar component is a visual representation of a user or entity, typically through a profile picture, icon, or initials.\n * It is used to provide a consistent way to identify users across different parts of an interface,\n * such as messages, comments, or user profiles.\n *\n * @see https://quartz.se.com/build/components/avatar\n */\n@Component({\n tag: 'qds-avatar',\n shadow: true,\n styleUrl: 'avatar.css',\n})\nexport class Avatar implements ComponentInterface {\n /**\n * The URL of the avatar image to display.\n */\n @Prop() public readonly avatarSrc?: string\n\n /**\n * The alt text for the avatar's image.\n */\n @Prop() public readonly avatarAlt?: string\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 * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * Text to display for the label.\n */\n @Prop() public readonly label?: string\n\n /**\n * The avatar's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Display the avatar in a vertical direction.\n */\n @Prop() public readonly vertical: boolean = false\n\n /**\n * Displays an indicator if `true`.\n */\n @Prop() public readonly badge?: boolean = false\n\n /**\n * The indicator badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * The indicator's status.\n */\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'success'\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 public render() {\n const hasLabel = this.label !== undefined && this.label !== ''\n const hasAlt = this.avatarAlt !== undefined && this.avatarAlt !== ''\n const hasKicker = this.kicker !== undefined && this.kicker !== ''\n\n return (\n <div\n class={{ 'qds-avatar': true, 'qds-avatar-vertical': this.vertical }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-avatar-media-wrapper\">\n <qds-avatar-media\n class=\"qds-avatar-media\"\n aria-hidden={hasAlt ? undefined : 'true'}\n src={this.avatarSrc}\n alt={this.avatarAlt}\n iconName={this.iconName}\n iconLibrary={this.iconLibrary}\n text={this.label}\n />\n\n {(this.badge ?? false) && (\n <qds-badge-indicator\n class=\"qds-indicator\"\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n </div>\n\n {(hasLabel || hasKicker) && (\n <div class=\"qds-label-container\">\n {hasLabel && <strong class=\"qds-label\">{this.label}</strong>}\n {hasKicker && <div class=\"qds-kicker\">{this.kicker}</div>}\n </div>\n )}\n </div>\n )\n }\n}\n"],"names":["h"],"mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,0yDAA0yD;;ACA5zD;AACA;AACA;;;;;;;;;MAmBa,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAuBE;;AAEG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAY,SAAS;AAYxD;;AAEG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAU,UAAU;AAEhD;;AAEG;AACqB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjD;;AAEG;AACqB,QAAA,IAAK,CAAA,KAAA,GAAa,KAAK;AAQ/C;;AAEG;AAEa,QAAA,IAAoB,CAAA,oBAAA,GAClC,SAAS;AAwDZ;IAzCQ,MAAM,GAAA;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;AAC9D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,EAAE;AACpE,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE;QAEjE,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,QAAQ,EAAE,EACxD,WAAA,EAAA,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,wBAAA,CAAA,EAAA,EAE7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,kBAAkB,iBACX,MAAM,GAAG,SAAS,GAAG,MAAM,EACxC,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,CAAA,EAED,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,MACnBA,OAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,IAAI,CAAC,oBAAoB,EACjC,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAE,sBAAA,CAAA,IAAI,EAAc,iBAAA,EAAA,GAAA,EAAA,wBAAA,CAAA,EACxB,UAAU,EAAA,IAAA,EAAA,CACV,CACH,CACG,EAEL,CAAC,QAAQ,IAAI,SAAS,MACrBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC7B,QAAQ,IAAIA,qEAAQ,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,KAAK,CAAU,EAC3D,SAAS,IAAIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,MAAM,CAAO,CACrD,CACP,CACG;;;;AAlDR,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;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-badge-counter.qds-badge-indicator.entry.cjs.js","sources":["src/components/badge-counter/badge-counter.css?tag=qds-badge-counter&encapsulation=shadow","src/components/badge-counter/badge-counter.tsx","src/components/badge-indicator/badge-indicator.css?tag=qds-badge-indicator&encapsulation=shadow","src/components/badge-indicator/badge-indicator.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-badge-counter {\n align-items: center;\n background-color: var(--qds-theme-feedback-message-neutral);\n border-radius: var(--qds-feedback-rounded-border-radius);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n display: flex;\n font: var(--qds-feedback-badge-counter-standard-text);\n height: var(--qds-feedback-badge-counter-standard-height);\n min-width: var(--qds-feedback-badge-counter-standard-min-width);\n justify-content: center;\n margin: 0;\n padding-inline: var(--qds-feedback-badge-counter-standard-padding-horizontal);\n text-align: center;\n}\n\n.qds-stroke-ring {\n border: var(--qds-feedback-badge-border-width) solid\n var(--qds-theme-feedback-message-neutral-contrast);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-signature-color-default);\n }\n}\n\n[data-importance='subdued'] {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-informational-contrast);\n }\n}\n\n[data-importance='destructive'] {\n background-color: var(--qds-theme-feedback-message-critical-contrast);\n color: var(--qds-theme-feedback-message-critical);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical);\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-message-critical-contrast);\n background-color: var(--qds-theme-feedback-message-critical);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical-contrast);\n }\n}\n\n[data-size='small'] {\n font: var(--qds-feedback-badge-counter-small-text);\n height: var(--qds-feedback-badge-counter-small-height);\n min-width: var(--qds-feedback-badge-counter-small-min-width);\n padding-inline: var(--qds-feedback-badge-counter-small-padding-horizontal);\n}\n\n[data-size='large'] {\n font: var(--qds-feedback-badge-counter-large-text);\n height: var(--qds-feedback-badge-counter-large-height);\n min-width: var(--qds-feedback-badge-counter-large-min-width);\n padding-inline: var(--qds-feedback-badge-counter-large-padding-horizontal);\n}\n\n[data-size='hero'] {\n font: var(--qds-feedback-badge-counter-hero-text);\n height: var(--qds-feedback-badge-counter-hero-height);\n padding-inline: var(--qds-feedback-badge-counter-hero-padding-horizontal);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop } from '@stencil/core'\n\nimport type { Importance, Size } from '../shared'\n\nexport type BadgeCounterImportance =\n | Importance\n | 'destructive'\n | 'subdued-destructive'\nexport type BadgeCounterSize = Size | 'hero'\n\n/**\n * The `<qds-badge-counter>` element is a small, rounded UI element used to\n * display numerical values or counts. It is designed to draw the user's eye to\n * important or dynamic content by providing a visual cue that a countable\n * event or item has occurred or is waiting to be addressed.\n */\n@Component({\n tag: 'qds-badge-counter',\n shadow: true,\n styleUrl: 'badge-counter.css',\n})\nexport class BadgeCounter implements ComponentInterface {\n /**\n * Adds accessible text to the qds-badge-counter that will be used by screen\n * readers.\n *\n * @example\n * <qds-badge-counter value={2} description=\"new notifications\"></qds-badge-counter>\n * // This qds-badge-counter will be read by screen readers as \"two new notifications\"\n */\n @Prop() public readonly description?: string\n\n /**\n * The badge counter's importance.\n */\n @Prop() public readonly importance?: BadgeCounterImportance = 'standard'\n\n /**\n * The badge counter's size.\n */\n @Prop() public readonly size?: BadgeCounterSize = 'standard'\n\n /**\n * Shows a stroke ring around the component for better visibility\n */\n @Prop() public readonly strokeRing: boolean = false\n\n /**\n * The badge-counter's value.\n */\n @Prop() public readonly value!: number | string\n\n get #computedValue(): string {\n const value =\n typeof this.value === 'string'\n ? Number.parseInt(this.value, 10)\n : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n (this.value ?? Number.NaN)\n if (Number.isNaN(value) || value < 0) return ''\n\n return value < 100 ? value.toString() : '99+'\n }\n\n get #computedImportance(): BadgeCounterImportance {\n switch (this.importance) {\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): BadgeCounterSize {\n switch (this.size) {\n case 'hero':\n case 'large':\n case 'small': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-badge-counter': true,\n 'qds-stroke-ring': this.strokeRing,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n >\n {this.#computedValue}\n <span class=\"qds-sr-only\">{this.description}</span>\n </span>\n )\n }\n}\n","/*\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-badge-indicator {\n align-items: center;\n background-color: var(--qds-theme-feedback-message-neutral);\n border-radius: var(--qds-feedback-rounded-border-radius);\n display: flex;\n height: var(--qds-badge-indicator-standard-height);\n justify-content: center;\n width: var(--qds-badge-indicator-standard-height);\n}\n\n.qds-stroke-ring {\n border: var(--qds-feedback-badge-border-width) solid\n var(--qds-theme-feedback-message-neutral-contrast);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n[data-status='error'] {\n background-color: var(--qds-theme-feedback-message-critical);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='info'] {\n background-color: var(--qds-theme-feedback-message-informational);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='neutral'] {\n background-color: var(--qds-theme-feedback-message-neutral);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='success'] {\n background-color: var(--qds-theme-signature-color-default);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='warning'] {\n background-color: var(--qds-theme-feedback-message-important);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-size='small'] {\n height: var(--qds-feedback-badge-indicator-small-size);\n width: var(--qds-feedback-badge-indicator-small-size);\n}\n\n[data-size='standard'] {\n height: var(--qds-feedback-badge-indicator-standard-size);\n width: var(--qds-feedback-badge-indicator-standard-size);\n}\n\n[data-size='large'] {\n height: var(--qds-feedback-badge-indicator-large-size);\n width: var(--qds-feedback-badge-indicator-large-size);\n}\n\n[data-size='hero'] {\n height: var(--qds-feedback-badge-indicator-hero-size);\n width: var(--qds-feedback-badge-indicator-hero-size);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop } from '@stencil/core'\n\nimport type { Size, Status } from '../shared'\n\nexport type BadgeIndicatorSize = Size | 'hero'\nexport type BadgeIndicatorStatus = Status | 'neutral'\n\n/**\n * The `<qds-badge-indicator>` element is a small, rounded UI element used to\n * display status indicators. It is designed to draw the user's eye to\n * important or dynamic content by providing a visual cue that an event has\n * occurred or is waiting to be addressed.\n */\n@Component({\n tag: 'qds-badge-indicator',\n shadow: true,\n styleUrl: 'badge-indicator.css',\n})\nexport class BadgeIndicator implements ComponentInterface {\n /**\n * Adds accessible text to the qds-badge-indicator that will be used by\n * screen readers.\n *\n * @example\n * <qds-badge-indicator description=\"success\"></qds-badge-indicator>\n * // This qds-badge-indicator will be read by screen readers as \"success\"\n */\n @Prop() public readonly description?: string\n\n /**\n * The badge indicator's size.\n */\n @Prop() public readonly size?: BadgeIndicatorSize = 'standard'\n\n /**\n * The badge indicator's status.\n */\n @Prop() public readonly status?: BadgeIndicatorStatus = 'neutral'\n\n /**\n * Shows a stroke ring around the badge indicator for better visibility.\n */\n @Prop() public readonly strokeRing: boolean = false\n\n get #computedStatus(): BadgeIndicatorStatus {\n switch (this.status) {\n case 'error':\n case 'info':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return 'neutral'\n }\n }\n }\n\n get #computedSize(): BadgeIndicatorSize {\n switch (this.size) {\n case 'hero':\n case 'large':\n case 'small': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-badge-indicator': true,\n 'qds-stroke-ring': this.strokeRing,\n }}\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n >\n <span class=\"qds-sr-only\">{this.description}</span>\n </div>\n )\n }\n}\n"],"names":["h","__classPrivateFieldGet"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-badge-counter.qds-badge-indicator.entry.cjs.js","sources":["src/components/badge-counter/badge-counter.css?tag=qds-badge-counter&encapsulation=shadow","src/components/badge-counter/badge-counter.tsx","src/components/badge-indicator/badge-indicator.css?tag=qds-badge-indicator&encapsulation=shadow","src/components/badge-indicator/badge-indicator.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-badge-counter {\n align-items: center;\n background-color: var(--qds-theme-feedback-message-neutral);\n border-radius: var(--qds-feedback-rounded-border-radius);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n display: flex;\n font: var(--qds-feedback-badge-counter-standard-text);\n height: var(--qds-feedback-badge-counter-standard-height);\n min-width: var(--qds-feedback-badge-counter-standard-min-width);\n justify-content: center;\n margin: 0;\n padding-inline: var(--qds-feedback-badge-counter-standard-padding-horizontal);\n text-align: center;\n}\n\n.qds-stroke-ring {\n border: var(--qds-feedback-badge-border-width) solid\n var(--qds-theme-feedback-message-neutral-contrast);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-signature-color-default);\n }\n}\n\n[data-importance='subdued'] {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-informational-contrast);\n }\n}\n\n[data-importance='destructive'] {\n background-color: var(--qds-theme-feedback-message-critical-contrast);\n color: var(--qds-theme-feedback-message-critical);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical);\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-message-critical-contrast);\n background-color: var(--qds-theme-feedback-message-critical);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical-contrast);\n }\n}\n\n[data-size='small'] {\n font: var(--qds-feedback-badge-counter-small-text);\n height: var(--qds-feedback-badge-counter-small-height);\n min-width: var(--qds-feedback-badge-counter-small-min-width);\n padding-inline: var(--qds-feedback-badge-counter-small-padding-horizontal);\n}\n\n[data-size='large'] {\n font: var(--qds-feedback-badge-counter-large-text);\n height: var(--qds-feedback-badge-counter-large-height);\n min-width: var(--qds-feedback-badge-counter-large-min-width);\n padding-inline: var(--qds-feedback-badge-counter-large-padding-horizontal);\n}\n\n[data-size='hero'] {\n font: var(--qds-feedback-badge-counter-hero-text);\n height: var(--qds-feedback-badge-counter-hero-height);\n padding-inline: var(--qds-feedback-badge-counter-hero-padding-horizontal);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop } from '@stencil/core'\n\nimport type { Importance, Size } from '../shared'\n\nexport type BadgeCounterImportance =\n | Importance\n | 'destructive'\n | 'subdued-destructive'\nexport type BadgeCounterSize = Size | 'hero'\n\n/**\n * The `<qds-badge-counter>` element is a small, rounded UI element used to\n * display numerical values or counts. It is designed to draw the user's eye to\n * important or dynamic content by providing a visual cue that a countable\n * event or item has occurred or is waiting to be addressed.\n */\n@Component({\n tag: 'qds-badge-counter',\n shadow: true,\n styleUrl: 'badge-counter.css',\n})\nexport class BadgeCounter implements ComponentInterface {\n /**\n * Adds accessible text to the qds-badge-counter that will be used by screen\n * readers.\n *\n * @example\n * <qds-badge-counter value={2} description=\"new notifications\"></qds-badge-counter>\n * // This qds-badge-counter will be read by screen readers as \"two new notifications\"\n */\n @Prop() public readonly description?: string\n\n /**\n * The badge counter's importance.\n */\n @Prop() public readonly importance?: BadgeCounterImportance = 'standard'\n\n /**\n * The badge counter's size.\n */\n @Prop() public readonly size?: BadgeCounterSize = 'standard'\n\n /**\n * Shows a stroke ring around the component for better visibility\n */\n @Prop() public readonly strokeRing: boolean = false\n\n /**\n * The badge-counter's value.\n */\n @Prop() public readonly value!: number | string\n\n get #computedValue(): string {\n const value =\n typeof this.value === 'string'\n ? Number.parseInt(this.value, 10)\n : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n (this.value ?? Number.NaN)\n if (Number.isNaN(value) || value < 0) return ''\n\n return value < 100 ? value.toString() : '99+'\n }\n\n get #computedImportance(): BadgeCounterImportance {\n switch (this.importance) {\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): BadgeCounterSize {\n switch (this.size) {\n case 'hero':\n case 'large':\n case 'small': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-badge-counter': true,\n 'qds-stroke-ring': this.strokeRing,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n >\n {this.#computedValue}\n <span class=\"qds-sr-only\">{this.description}</span>\n </span>\n )\n }\n}\n","/*\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-badge-indicator {\n align-items: center;\n border-radius: var(--qds-feedback-rounded-border-radius);\n display: flex;\n height: var(--qds-feedback-badge-indicator-standard-size);\n justify-content: center;\n width: var(--qds-feedback-badge-indicator-standard-size);\n}\n\n.qds-stroke-ring {\n border: var(--qds-feedback-badge-border-width) solid\n var(--qds-theme-feedback-message-neutral-contrast);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.qds-icon {\n height: 100%;\n width: 100%;\n}\n\n[data-status='error'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-critical-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-critical);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical-contrast);\n }\n}\n\n[data-status='info'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-informational);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-informational-contrast);\n }\n}\n\n[data-status='neutral'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-neutral);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='unavailable'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-availability-unavailable);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-status='success'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-success-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-success);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-success-contrast);\n }\n}\n\n[data-status='warning'] {\n &.qds-badge-indicator {\n background-color: var(--qds-theme-feedback-message-important-contrast);\n }\n\n &.qds-icon {\n color: var(--qds-theme-feedback-message-important);\n }\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-important-contrast);\n }\n}\n\n[data-size='small'] {\n height: var(--qds-feedback-badge-indicator-small-size);\n width: var(--qds-feedback-badge-indicator-small-size);\n}\n\n[data-size='standard'] {\n height: var(--qds-feedback-badge-indicator-standard-size);\n width: var(--qds-feedback-badge-indicator-standard-size);\n}\n\n[data-size='large'] {\n height: var(--qds-feedback-badge-indicator-large-size);\n width: var(--qds-feedback-badge-indicator-large-size);\n}\n\n[data-size='hero'] {\n height: var(--qds-feedback-badge-indicator-hero-size);\n width: var(--qds-feedback-badge-indicator-hero-size);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop } from '@stencil/core'\n\nimport type { Size, Status } from '../shared'\n\nexport type BadgeIndicatorSize = Size | 'hero'\nexport type BadgeIndicatorStatus = Status | 'neutral' | 'unavailable'\n\n/**\n * The `<qds-badge-indicator>` element is a small, rounded UI element used to\n * display status indicators. It is designed to draw the user's eye to\n * important or dynamic content by providing a visual cue that an event has\n * occurred or is waiting to be addressed.\n */\n@Component({\n tag: 'qds-badge-indicator',\n shadow: true,\n styleUrl: 'badge-indicator.css',\n})\nexport class BadgeIndicator implements ComponentInterface {\n /**\n * Adds accessible text to the qds-badge-indicator that will be used by\n * screen readers.\n *\n * @example\n * <qds-badge-indicator description=\"success\"></qds-badge-indicator>\n * // This qds-badge-indicator will be read by screen readers as \"success\"\n */\n @Prop() public readonly description?: string\n\n /**\n * The badge indicator's size.\n */\n @Prop() public readonly size?: BadgeIndicatorSize = 'standard'\n\n /**\n * The badge indicator's status.\n */\n @Prop() public readonly status?: BadgeIndicatorStatus = 'neutral'\n\n /**\n * Shows a stroke ring around the badge indicator for better visibility.\n */\n @Prop() public readonly strokeRing: boolean = false\n\n get #computedStatus(): BadgeIndicatorStatus {\n switch (this.status) {\n case 'error':\n case 'info':\n case 'success':\n case 'warning':\n case 'unavailable': {\n return this.status\n }\n default: {\n return 'neutral'\n }\n }\n }\n\n get #computedSize(): BadgeIndicatorSize {\n switch (this.size) {\n case 'hero':\n case 'large':\n case 'small': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedIconName(): string {\n switch (this.#computedStatus) {\n case 'error': {\n return 'status-error-solid'\n }\n case 'info': {\n return 'status-info-solid'\n }\n case 'success': {\n return 'status-success-solid'\n }\n case 'warning': {\n return 'status-warning-solid'\n }\n case 'unavailable': {\n return 'checked-radio'\n }\n default: {\n return ''\n }\n }\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-badge-indicator': true,\n 'qds-stroke-ring': this.strokeRing,\n }}\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n >\n <span class=\"qds-sr-only\">{this.description}</span>\n {this.#computedStatus !== 'neutral' && (\n <qds-icon\n library=\"core\"\n class=\"qds-icon\"\n name={this.#computedIconName}\n data-status={this.#computedStatus}\n />\n )}\n </div>\n )\n }\n}\n"],"names":["h","__classPrivateFieldGet"],"mappings":"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"}
|
|
@@ -78,7 +78,7 @@ _BadgeCounter_instances = new WeakSet(), _BadgeCounter_computedValue_get = funct
|
|
|
78
78
|
};
|
|
79
79
|
BadgeCounter.style = badgeCounterCss;
|
|
80
80
|
|
|
81
|
-
const badgeIndicatorCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-badge-indicator{align-items:center;
|
|
81
|
+
const badgeIndicatorCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-badge-indicator{align-items:center;border-radius:var(--qds-feedback-rounded-border-radius);display:flex;height:var(--qds-feedback-badge-indicator-standard-size);justify-content:center;width:var(--qds-feedback-badge-indicator-standard-size)}.qds-stroke-ring{border:var(--qds-feedback-badge-border-width) solid var(--qds-theme-feedback-message-neutral-contrast)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.qds-icon{height:100%;width:100%}.qds-badge-indicator[data-status=error]{background-color:var(--qds-theme-feedback-message-critical-contrast)}.qds-icon[data-status=error]{color:var(--qds-theme-feedback-message-critical)}.qds-stroke-ring[data-status=error]{border-color:var(--qds-theme-feedback-message-critical-contrast)}.qds-badge-indicator[data-status=info]{background-color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon[data-status=info]{color:var(--qds-theme-feedback-message-informational)}.qds-stroke-ring[data-status=info]{border-color:var(--qds-theme-feedback-message-informational-contrast)}.qds-badge-indicator[data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral)}.qds-stroke-ring[data-status=neutral]{border-color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-badge-indicator[data-status=unavailable]{background-color:var(--qds-theme-feedback-availability-unavailable)}.qds-icon[data-status=unavailable]{color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-stroke-ring[data-status=unavailable]{border-color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-badge-indicator[data-status=success]{background-color:var(--qds-theme-feedback-message-success-contrast)}.qds-icon[data-status=success]{color:var(--qds-theme-feedback-message-success)}.qds-stroke-ring[data-status=success]{border-color:var(--qds-theme-feedback-message-success-contrast)}.qds-badge-indicator[data-status=warning]{background-color:var(--qds-theme-feedback-message-important-contrast)}.qds-icon[data-status=warning]{color:var(--qds-theme-feedback-message-important)}.qds-stroke-ring[data-status=warning]{border-color:var(--qds-theme-feedback-message-important-contrast)}[data-size=small]{height:var(--qds-feedback-badge-indicator-small-size);width:var(--qds-feedback-badge-indicator-small-size)}[data-size=standard]{height:var(--qds-feedback-badge-indicator-standard-size);width:var(--qds-feedback-badge-indicator-standard-size)}[data-size=large]{height:var(--qds-feedback-badge-indicator-large-size);width:var(--qds-feedback-badge-indicator-large-size)}[data-size=hero]{height:var(--qds-feedback-badge-indicator-hero-size);width:var(--qds-feedback-badge-indicator-hero-size)}";
|
|
82
82
|
|
|
83
83
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
84
84
|
//
|
|
@@ -90,7 +90,7 @@ var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) ||
|
|
|
90
90
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
91
91
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
92
92
|
};
|
|
93
|
-
var _BadgeIndicator_instances, _BadgeIndicator_computedStatus_get, _BadgeIndicator_computedSize_get;
|
|
93
|
+
var _BadgeIndicator_instances, _BadgeIndicator_computedStatus_get, _BadgeIndicator_computedSize_get, _BadgeIndicator_computedIconName_get;
|
|
94
94
|
const BadgeIndicator = class {
|
|
95
95
|
constructor(hostRef) {
|
|
96
96
|
index.registerInstance(this, hostRef);
|
|
@@ -109,10 +109,10 @@ const BadgeIndicator = class {
|
|
|
109
109
|
this.strokeRing = false;
|
|
110
110
|
}
|
|
111
111
|
render() {
|
|
112
|
-
return (index.h("div", { key: '
|
|
112
|
+
return (index.h("div", { key: '55e0899fbd29f2fc33608976f5a3d75a8e65d099', class: {
|
|
113
113
|
'qds-badge-indicator': true,
|
|
114
114
|
'qds-stroke-ring': this.strokeRing,
|
|
115
|
-
}, "data-size": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedSize_get), "data-status": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get) }, index.h("span", { key: '
|
|
115
|
+
}, "data-size": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedSize_get), "data-status": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get) }, index.h("span", { key: 'ebfd2b40bc09fa1fca45981bac18301aa16a971c', class: "qds-sr-only" }, this.description), __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get) !== 'neutral' && (index.h("qds-icon", { key: '528334a07ff8235ef199433f4997a43d47b9dcf4', library: "core", class: "qds-icon", name: __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedIconName_get), "data-status": __classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get) }))));
|
|
116
116
|
}
|
|
117
117
|
};
|
|
118
118
|
_BadgeIndicator_instances = new WeakSet(), _BadgeIndicator_computedStatus_get = function _BadgeIndicator_computedStatus_get() {
|
|
@@ -120,7 +120,8 @@ _BadgeIndicator_instances = new WeakSet(), _BadgeIndicator_computedStatus_get =
|
|
|
120
120
|
case 'error':
|
|
121
121
|
case 'info':
|
|
122
122
|
case 'success':
|
|
123
|
-
case 'warning':
|
|
123
|
+
case 'warning':
|
|
124
|
+
case 'unavailable': {
|
|
124
125
|
return this.status;
|
|
125
126
|
}
|
|
126
127
|
default: {
|
|
@@ -138,6 +139,27 @@ _BadgeIndicator_instances = new WeakSet(), _BadgeIndicator_computedStatus_get =
|
|
|
138
139
|
return 'standard';
|
|
139
140
|
}
|
|
140
141
|
}
|
|
142
|
+
}, _BadgeIndicator_computedIconName_get = function _BadgeIndicator_computedIconName_get() {
|
|
143
|
+
switch (__classPrivateFieldGet(this, _BadgeIndicator_instances, "a", _BadgeIndicator_computedStatus_get)) {
|
|
144
|
+
case 'error': {
|
|
145
|
+
return 'status-error-solid';
|
|
146
|
+
}
|
|
147
|
+
case 'info': {
|
|
148
|
+
return 'status-info-solid';
|
|
149
|
+
}
|
|
150
|
+
case 'success': {
|
|
151
|
+
return 'status-success-solid';
|
|
152
|
+
}
|
|
153
|
+
case 'warning': {
|
|
154
|
+
return 'status-warning-solid';
|
|
155
|
+
}
|
|
156
|
+
case 'unavailable': {
|
|
157
|
+
return 'checked-radio';
|
|
158
|
+
}
|
|
159
|
+
default: {
|
|
160
|
+
return '';
|
|
161
|
+
}
|
|
162
|
+
}
|
|
141
163
|
};
|
|
142
164
|
BadgeIndicator.style = badgeIndicatorCss;
|
|
143
165
|
|
|
@@ -104,12 +104,12 @@ const QdsBreadcrumbItem = class {
|
|
|
104
104
|
__classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").disconnect();
|
|
105
105
|
}
|
|
106
106
|
render() {
|
|
107
|
-
return (index.h("div", { key: '
|
|
107
|
+
return (index.h("div", { key: '65821313d94031e8ab4f4f75f4367293ed19019d', class: {
|
|
108
108
|
'qds-breadcrumb-item': true,
|
|
109
109
|
'qds-disabled': __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "a", _QdsBreadcrumbItem_computedDisabled_get),
|
|
110
|
-
}, ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '
|
|
110
|
+
}, ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '22b6c15d9996796f006cb386189f288cacd810f8', class: "qds-icon", library: this.iconLibrary, name: this.iconName })), this.href === undefined || __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "a", _QdsBreadcrumbItem_isCurrentPage_get)
|
|
111
111
|
? __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderText).call(this)
|
|
112
|
-
: __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (index.h("qds-tooltip", { key: '
|
|
112
|
+
: __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (index.h("qds-tooltip", { key: 'a717340ee06542ecd2a3db3d945345f130de91e1', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _QdsBreadcrumbItem_tooltipRef, "f") }, this.text))));
|
|
113
113
|
}
|
|
114
114
|
static get delegatesFocus() { return true; }
|
|
115
115
|
static get watchers() { return {
|
|
@@ -9,7 +9,7 @@ var index = require('./index-DIY7gpXM.js');
|
|
|
9
9
|
var helpers = require('./helpers-DjUgyTKn.js');
|
|
10
10
|
var controls = require('./controls-DKGeNyr5.js');
|
|
11
11
|
|
|
12
|
-
const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"b\"}.qds-focus-ring{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:b;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width));isolation:isolate;outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0;pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n --qds-form-input-border-width-inline-end,\n var(--qds-control-border-width)\n ))}:host(:focus-visible) .qds-focus-ring{visibility:visible}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:b;justify-content:center;min-width:0;outline:none;padding-block:0;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:center;-webkit-user-select:none;user-select:none}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-icon{flex-shrink:0}.qds-indicator{position:absolute;transform:translate(50%,-50%)}[data-size=small]{font:var(--qds-control-small-text)}.qds-button[data-size=small]{gap:var(--qds-control-small-gap-internal);min-height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size=small]{width:var(--qds-control-small-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-indicator{inset-block-start:var(--qds-control-button-small-badge-padding-top);inset-inline-end:var(--qds-control-button-small-badge-padding-end)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-button[data-size=standard]{gap:var(--qds-control-standard-gap-internal);min-height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size=standard]{width:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-indicator{inset-block-start:var(--qds-control-button-standard-badge-padding-top);inset-inline-end:var(--qds-control-button-standard-badge-padding-end)}[data-size=large]{font:var(--qds-control-large-text)}.qds-button[data-size=large]{gap:var(--qds-control-large-gap-internal);min-height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size=large]{width:var(--qds-control-large-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-indicator{inset-block-start:var(--qds-control-button-large-badge-padding-top);inset-inline-end:var(--qds-control-button-large-badge-padding-end)}[data-size=large],[data-size=small],[data-size=standard]{line-height:normal}.qds-button.qds-icon-only[data-size=large],.qds-button.qds-icon-only[data-size=small],.qds-button.qds-icon-only[data-size=standard]{padding-inline:0}[data-size=hero]{font:var(--qds-control-hero-text)}.qds-button[data-size=hero]{border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n );gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-size=hero]{min-height:var(--qds-control-hero-height);padding-inline:0;width:var(--qds-control-hero-height)}.qds-button[data-size=hero] .qds-indicator{inset-block-start:var(--qds-control-button-hero-badge-padding-top);inset-inline-end:var(--qds-control-button-hero-badge-padding-end)}.qds-focus-ring[data-size=hero]{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n ))}.qds-icon[data-size=hero]{height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}[data-importance=subdued]{border-radius:0;color:var(--qds-theme-link-standard-default)}.qds-button[data-importance=subdued]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance=subdued]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance=subdued]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued]{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance=standard]{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width)}.qds-button[data-importance=standard]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance=standard]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance=emphasized]{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance=emphasized]:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance=emphasized]:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{border-radius:0;color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-importance=subdued-destructive]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued-destructive]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-hover);color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=subdued-destructive]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-pressed);color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-importance=subdued-destructive]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued-destructive]{border:none}.qds-button.qds-icon-only[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button.qds-icon-only[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}[data-action=dropdown-close] .qds-action{transform:rotate(-180deg)}:is([data-action=dropdown],[data-action=dropdown-close]) .qds-action{transition-duration:.3s;transition-property:transform}:is([data-action=dropdown],[data-action=dropdown-close]):not(:has(qds-badge-counter)) .qds-action{margin-inline-start:auto}:is([data-action=dropdown],[data-action=dropdown-close]) qds-badge-counter{margin-inline-start:auto}[data-importance]:is([data-action=dropdown],[data-action=dropdown-close]){padding-inline:var(--qds-control-input-padding-horizontal)}";
|
|
12
|
+
const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"c\"}.qds-focus-ring{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:c;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width));isolation:isolate;outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0;pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n --qds-form-input-border-width-inline-end,\n var(--qds-control-border-width)\n ))}:host(:focus-visible) .qds-focus-ring{visibility:visible}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:c;justify-content:center;letter-spacing:inherit;min-width:0;outline:none;padding-block:0;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:center;-webkit-user-select:none;user-select:none;word-spacing:inherit}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-icon{flex-shrink:0}.qds-indicator{position:absolute;transform:translate(50%,-50%)}[data-size=small]{font:var(--qds-control-small-text)}.qds-button[data-size=small]{gap:var(--qds-control-small-gap-internal);min-height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size=small]{width:var(--qds-control-small-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-indicator{inset-block-start:var(--qds-control-button-small-badge-padding-top);inset-inline-end:var(--qds-control-button-small-badge-padding-end)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-button[data-size=standard]{gap:var(--qds-control-standard-gap-internal);min-height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size=standard]{width:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-indicator{inset-block-start:var(--qds-control-button-standard-badge-padding-top);inset-inline-end:var(--qds-control-button-standard-badge-padding-end)}[data-size=large]{font:var(--qds-control-large-text)}.qds-button[data-size=large]{gap:var(--qds-control-large-gap-internal);min-height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size=large]{width:var(--qds-control-large-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-indicator{inset-block-start:var(--qds-control-button-large-badge-padding-top);inset-inline-end:var(--qds-control-button-large-badge-padding-end)}[data-size=large],[data-size=small],[data-size=standard]{line-height:normal}.qds-button.qds-icon-only[data-size=large],.qds-button.qds-icon-only[data-size=small],.qds-button.qds-icon-only[data-size=standard]{padding-inline:0}[data-size=hero]{font:var(--qds-control-hero-text)}.qds-button[data-size=hero]{border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n );gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-size=hero]{min-height:var(--qds-control-hero-height);padding-inline:0;width:var(--qds-control-hero-height)}.qds-button[data-size=hero] .qds-indicator{inset-block-start:var(--qds-control-button-hero-badge-padding-top);inset-inline-end:var(--qds-control-button-hero-badge-padding-end)}.qds-focus-ring[data-size=hero]{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n ))}.qds-icon[data-size=hero]{height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}[data-importance=subdued]{border-radius:0;color:var(--qds-theme-link-standard-default)}.qds-button[data-importance=subdued]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance=subdued]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance=subdued]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued]{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance=standard]{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width)}.qds-button[data-importance=standard]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance=standard]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance=emphasized]{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance=emphasized]:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance=emphasized]:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{border-radius:0;color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-importance=subdued-destructive]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued-destructive]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-hover);color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=subdued-destructive]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-pressed);color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-importance=subdued-destructive]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued-destructive]{border:none}.qds-button.qds-icon-only[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button.qds-icon-only[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}[data-action=dropdown-close] .qds-action{transform:rotate(-180deg)}:is([data-action=dropdown],[data-action=dropdown-close]) .qds-action{transition-duration:.3s;transition-property:transform}:is([data-action=dropdown],[data-action=dropdown-close]):not(:has(qds-badge-counter)) .qds-action{margin-inline-start:auto}:is([data-action=dropdown],[data-action=dropdown-close]) qds-badge-counter{margin-inline-start:auto}[data-importance]:is([data-action=dropdown],[data-action=dropdown-close]){padding-inline:var(--qds-control-input-padding-horizontal)}";
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
15
15
|
//
|
|
@@ -237,6 +237,22 @@ const Button = class {
|
|
|
237
237
|
if (event.key === ' ')
|
|
238
238
|
this.host.click();
|
|
239
239
|
}
|
|
240
|
+
actionChanged() {
|
|
241
|
+
switch (this.action) {
|
|
242
|
+
case 'dropdown': {
|
|
243
|
+
this.internals.ariaExpanded = 'false';
|
|
244
|
+
break;
|
|
245
|
+
}
|
|
246
|
+
case 'dropdown-close': {
|
|
247
|
+
this.internals.ariaExpanded = 'true';
|
|
248
|
+
break;
|
|
249
|
+
}
|
|
250
|
+
default: {
|
|
251
|
+
// eslint-disable-next-line unicorn/no-null
|
|
252
|
+
this.internals.ariaExpanded = null;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
240
256
|
disabledChanged() {
|
|
241
257
|
this.internals.ariaDisabled = __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get).toString();
|
|
242
258
|
if (__classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get))
|
|
@@ -287,6 +303,7 @@ const Button = class {
|
|
|
287
303
|
this.hrefChanged();
|
|
288
304
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
289
305
|
this.disabledChanged();
|
|
306
|
+
this.actionChanged();
|
|
290
307
|
}
|
|
291
308
|
componentDidLoad() {
|
|
292
309
|
this.textChanged();
|
|
@@ -299,25 +316,26 @@ const Button = class {
|
|
|
299
316
|
}
|
|
300
317
|
render() {
|
|
301
318
|
const Tag = this.href === undefined ? 'button' : 'a';
|
|
302
|
-
return (index.h("div", { key: '
|
|
319
|
+
return (index.h("div", { key: '14fceb5cfd1343e93d7f4685ec746b72b8809790', class: "qds-container", onClick: __classPrivateFieldGet(this, _Button_onClick, "f"), onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, "aria-hidden": "true" }, index.h(Tag, { key: '9a9cc25be17af49a5e56adef9730b49b712272e7', class: {
|
|
303
320
|
'qds-button': true,
|
|
304
321
|
'qds-disabled': Tag === 'a' ? __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get) : false,
|
|
305
322
|
/* DEPRECATED: will be removed by september 2026 */
|
|
306
323
|
'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
307
|
-
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), "data-action": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedAction_get), disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, formAction: this.formAction, formMethod: this.formMethod, formNoValidate: this.formNoValidate, formTarget: this.formTarget, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, ref: __classPrivateFieldGet(this, _Button_buttonRef, "f"), rel: Tag === 'a' ? this.rel : undefined, tabIndex: -1, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get), value: Tag === 'a' ? undefined : this.value }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '
|
|
324
|
+
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), "data-action": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedAction_get), disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, formAction: this.formAction, formMethod: this.formMethod, formNoValidate: this.formNoValidate, formTarget: this.formTarget, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, ref: __classPrivateFieldGet(this, _Button_buttonRef, "f"), rel: Tag === 'a' ? this.rel : undefined, tabIndex: -1, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get), value: Tag === 'a' ? undefined : this.value }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: 'd29f1c83acadfb07b3ab612be5e7aaad47b65444', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get) && (
|
|
308
325
|
/* DEPRECATED: will be removed by september 2026 */
|
|
309
|
-
index.h("span", { key: '
|
|
326
|
+
index.h("span", { key: '704bd42590686493e6d683bb25684663511bd4fc', class: "qds-overflow", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), ref: __classPrivateFieldGet(this, _Button_spanRef, "f") }, this.text)), isIndicator(this.badge) && (index.h("qds-badge-indicator", { key: '004db3a8a9cb007aa1135cb81cd64a92744d3a25', class: "qds-indicator", status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true })), isCounter(this.badge) && (index.h("qds-badge-counter", { key: '85bb751c4c3d529cd4b45aee4d4671567b09816a', class: {
|
|
310
327
|
/* DEPRECATED: will be removed by september 2026 */
|
|
311
328
|
'qds-indicator': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
312
|
-
}, description: this.badgeDescription, importance: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) !== undefined && (index.h("qds-icon", { key: '
|
|
329
|
+
}, description: this.badgeDescription, importance: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) !== undefined && (index.h("qds-icon", { key: '3cb73d92892eeabe0f19361b2a0debd930315966', class: "qds-icon qds-action", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), library: "core", name: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) }))), index.h("div", { key: '4b8b51fad5f2d1a22eb7fcf37c3a09ed2451c464', class: {
|
|
313
330
|
'qds-focus-ring': true,
|
|
314
331
|
/* DEPRECATED: will be removed by september 2026 */
|
|
315
332
|
'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
316
|
-
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) }), this.tooltip && (index.h("qds-tooltip", { key: '
|
|
333
|
+
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) }), this.tooltip && (index.h("qds-tooltip", { key: 'a0027a6eb6412bbdc3184d0df86c82f5e3bd93f6', ref: __classPrivateFieldGet(this, _Button_tooltipRef, "f"), placement: this.tooltipPlacement }, this.text))));
|
|
317
334
|
}
|
|
318
335
|
static get formAssociated() { return true; }
|
|
319
336
|
get host() { return index.getElement(this); }
|
|
320
337
|
static get watchers() { return {
|
|
338
|
+
"action": ["actionChanged"],
|
|
321
339
|
"disabled": ["disabledChanged"],
|
|
322
340
|
"href": ["hrefChanged"],
|
|
323
341
|
"tabindex": ["tabindexChanged"],
|
|
@@ -382,10 +400,15 @@ _Button_savedTabIndex = new WeakMap(), _Button_button = new WeakMap(), _Button_s
|
|
|
382
400
|
}
|
|
383
401
|
}
|
|
384
402
|
}, _Button_updateAriaLabel = function _Button_updateAriaLabel() {
|
|
385
|
-
|
|
403
|
+
const hasBadge = this.badge !== undefined;
|
|
404
|
+
if (hasBadge && this.badgeDescription !== undefined) {
|
|
386
405
|
this.internals.ariaLabel = `${this.text} ${isIndicator(this.badge) ? '' : this.badge} ${this.badgeDescription}`;
|
|
387
406
|
return;
|
|
388
407
|
}
|
|
408
|
+
if (hasBadge && !isIndicator(this.badge)) {
|
|
409
|
+
this.internals.ariaLabel = `${this.text} ${this.badge}`;
|
|
410
|
+
return;
|
|
411
|
+
}
|
|
389
412
|
if (this.target !== undefined &&
|
|
390
413
|
this.target === '_blank' &&
|
|
391
414
|
this.href !== undefined) {
|