@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,118 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* SPDX-FileCopyrightText: © 2025 Schneider Electric
|
|
3
|
-
*
|
|
4
|
-
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
-
*/
|
|
6
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D8Hb0u1k.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, b as inheritAriaAttributes } from './helpers-CDZIefsI.js';
|
|
8
|
-
|
|
9
|
-
const navListItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-button,.qds-nav-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-texts{flex-direction:column}.qds-button[data-size=small]{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size=small]>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size=small]>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-text{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtext{font:var(--qds-list-item-small-subtitle)}.qds-button[data-size=standard]{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard]>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size=standard]>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-text{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}.qds-button[data-size=large]{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size=large]>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size=large]>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-text{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtext{font:var(--qds-list-item-large-subtitle)}.qds-selected.qds-nav-list-item{background-color:var(\n --qds-theme-navigation-subsection-standard-background\n )}.qds-selected.qds-nav-list-item:after{background-color:var(--qds-theme-signature-color-default);border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";cursor:pointer;margin-right:calc(var(--qds-signature-line-connection-width)*-1/2);width:var(--qds-signature-line-connection-width)}.qds-selected .qds-icon{color:var(--qds-theme-signature-color-default)}.qds-selected[data-size=small] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-text{font:var(--qds-list-item-large-title-emphasized)}";
|
|
10
|
-
|
|
11
|
-
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
12
|
-
//
|
|
13
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
14
|
-
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
15
|
-
if (kind === "a" && !f)
|
|
16
|
-
throw new TypeError("Private accessor was defined without a getter");
|
|
17
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
18
|
-
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
19
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
20
|
-
};
|
|
21
|
-
var _NavListItem_instances, _NavListItem_computedSize_get, _NavListItem_shouldCollapse_get, _NavListItem_liRef, _NavListItem_tooltipRef, _NavListItem_onBlur, _NavListItem_onFocus;
|
|
22
|
-
const NavListItem = class {
|
|
23
|
-
constructor(hostRef) {
|
|
24
|
-
registerInstance(this, hostRef);
|
|
25
|
-
this.blurEmitter = createEvent(this, "qdsBlur", 2);
|
|
26
|
-
this.focusEmitter = createEvent(this, "qdsFocus", 2);
|
|
27
|
-
_NavListItem_instances.add(this);
|
|
28
|
-
/**
|
|
29
|
-
* Displays the navigation list item in a collapsed state without its text.
|
|
30
|
-
* The text will be displayed in a tooltip instead.
|
|
31
|
-
*
|
|
32
|
-
* This property has no effect if the navigation list item does not have an
|
|
33
|
-
* icon set.
|
|
34
|
-
*/
|
|
35
|
-
this.collapsed = false;
|
|
36
|
-
/**
|
|
37
|
-
* Prevents the navigation list item from being interacted with: it cannot be
|
|
38
|
-
* selected or focused.
|
|
39
|
-
*/
|
|
40
|
-
this.disabled = false;
|
|
41
|
-
/**
|
|
42
|
-
* The name of a registered icon library.
|
|
43
|
-
*/
|
|
44
|
-
this.iconLibrary = 'default';
|
|
45
|
-
/**
|
|
46
|
-
* The navigation list items's size.
|
|
47
|
-
*/
|
|
48
|
-
this.size = 'standard';
|
|
49
|
-
/**
|
|
50
|
-
* Whether or not the navigation list item is selected.
|
|
51
|
-
*/
|
|
52
|
-
this.selected = false;
|
|
53
|
-
this.inheritedAttributes = {};
|
|
54
|
-
_NavListItem_liRef.set(this, (li) => {
|
|
55
|
-
this.li = li;
|
|
56
|
-
});
|
|
57
|
-
_NavListItem_tooltipRef.set(this, (tooltip) => {
|
|
58
|
-
if (tooltip)
|
|
59
|
-
// eslint-disable-next-line no-param-reassign
|
|
60
|
-
tooltip.target = this.li;
|
|
61
|
-
});
|
|
62
|
-
_NavListItem_onBlur.set(this, (event) => {
|
|
63
|
-
this.blurEmitter.emit(pickFocusEventAttributes(event));
|
|
64
|
-
});
|
|
65
|
-
_NavListItem_onFocus.set(this, (event) => {
|
|
66
|
-
this.focusEmitter.emit(pickFocusEventAttributes(event));
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
onClick(event) {
|
|
70
|
-
if (this.disabled)
|
|
71
|
-
event.stopImmediatePropagation();
|
|
72
|
-
}
|
|
73
|
-
tabindexChanged(newValue) {
|
|
74
|
-
const parsedValue = Number.parseInt(newValue, 10);
|
|
75
|
-
this.tabIndex =
|
|
76
|
-
parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
|
|
77
|
-
}
|
|
78
|
-
componentWillLoad() {
|
|
79
|
-
this.inheritedAttributes = inheritAriaAttributes(this.host);
|
|
80
|
-
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
81
|
-
}
|
|
82
|
-
render() {
|
|
83
|
-
return (h(Host, { key: '4e51db3364c0e5f747196dd12bf0ea7f34c200eb' }, h("li", { key: 'ed735bb7c6868bb94af5de2d7de2b54ea02d7f08', class: {
|
|
84
|
-
'qds-nav-list-item': true,
|
|
85
|
-
'qds-disabled': this.disabled,
|
|
86
|
-
'qds-selected': this.selected,
|
|
87
|
-
}, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, h("button", { key: 'd9a7a799486ca5836b480d1ffaab2d376d6388e0', class: {
|
|
88
|
-
'qds-button': true,
|
|
89
|
-
'qds-selected': this.selected,
|
|
90
|
-
}, "data-size": __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_computedSize_get), disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _NavListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _NavListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '331c36aab5ea40cca48f35f796e3d8ab3c4e44a1', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && this.renderText())), __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && (h("qds-tooltip", { key: '57fad87d2567e8a3c4e7c7fcdf09be5faac38553', placement: "right", ref: __classPrivateFieldGet(this, _NavListItem_tooltipRef, "f") }, this.renderText()))));
|
|
91
|
-
}
|
|
92
|
-
renderText() {
|
|
93
|
-
return (h("div", { class: "qds-texts" }, h("div", { class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (h("div", { class: "qds-subtext" }, this.subtext))));
|
|
94
|
-
}
|
|
95
|
-
static get delegatesFocus() { return true; }
|
|
96
|
-
get host() { return getElement(this); }
|
|
97
|
-
static get watchers() { return {
|
|
98
|
-
"tabindex": ["tabindexChanged"]
|
|
99
|
-
}; }
|
|
100
|
-
};
|
|
101
|
-
_NavListItem_liRef = new WeakMap(), _NavListItem_tooltipRef = new WeakMap(), _NavListItem_onBlur = new WeakMap(), _NavListItem_onFocus = new WeakMap(), _NavListItem_instances = new WeakSet(), _NavListItem_computedSize_get = function _NavListItem_computedSize_get() {
|
|
102
|
-
switch (this.size) {
|
|
103
|
-
case 'standard':
|
|
104
|
-
case 'small':
|
|
105
|
-
case 'large': {
|
|
106
|
-
return this.size;
|
|
107
|
-
}
|
|
108
|
-
default: {
|
|
109
|
-
return 'standard';
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}, _NavListItem_shouldCollapse_get = function _NavListItem_shouldCollapse_get() {
|
|
113
|
-
return this.collapsed && this.iconName !== undefined && this.iconName !== '';
|
|
114
|
-
};
|
|
115
|
-
NavListItem.style = navListItemCss;
|
|
116
|
-
|
|
117
|
-
export { NavListItem as qds_nav_list_item };
|
|
118
|
-
//# sourceMappingURL=qds-nav-list-item.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"qds-nav-list-item.entry.js","sources":["src/components/nav-list-item/nav-list-item.css?tag=qds-nav-list-item&encapsulation=shadow","src/components/nav-list-item/nav-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-button,\n.qds-nav-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-icon,\n.qds-text {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n align-items: center;\n appearance: none;\n background: none;\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n border-radius: var(--qds-focus-border-radius);\n }\n\n &:not(.qds-selected) {\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}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-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-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-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-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-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-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n}\n\n.qds-selected {\n &.qds-nav-list-item {\n background-color: var(\n --qds-theme-navigation-subsection-standard-background\n );\n\n &::after {\n background-color: var(--qds-theme-signature-color-default);\n border-radius: var(--qds-signature-line-connection-cap-radius);\n content: '';\n cursor: pointer;\n margin-right: calc(-1 * var(--qds-signature-line-connection-width) / 2);\n width: var(--qds-signature-line-connection-width);\n }\n }\n\n & .qds-icon {\n color: var(--qds-theme-signature-color-default);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\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, JSX } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/nav-list-item\n */\n@Component({\n tag: 'qds-nav-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'nav-list-item.css',\n})\nexport class NavListItem implements ComponentInterface {\n /**\n * Displays the navigation list item in a collapsed state without its text.\n * The text will be displayed in a tooltip instead.\n *\n * This property has no effect if the navigation list item does not have an\n * icon set.\n */\n @Prop() public readonly collapsed: boolean = false\n\n /**\n * Prevents the navigation list item from being interacted with: it cannot be\n * selected 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 navigation list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the navigation list item is selected.\n */\n @Prop() public readonly selected: boolean = false\n\n /**\n * Text to display for the subtext.\n */\n @Prop() public readonly subtext?: string\n\n /**\n * Primary text to display.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the navigation list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the navigation list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n private inheritedAttributes: Attributes = {}\n\n private li?: HTMLLIElement\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #shouldCollapse(): boolean {\n return this.collapsed && this.iconName !== undefined && this.iconName !== ''\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n <Host>\n <li\n class={{\n 'qds-nav-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n ref={this.#liRef}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-selected': this.selected,\n }}\n data-size={this.#computedSize}\n disabled={this.disabled}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n tabIndex={this.disabled ? undefined : this.tabIndex}\n type=\"button\"\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {!this.#shouldCollapse && this.text && this.renderText()}\n </button>\n </li>\n {this.#shouldCollapse && this.text && (\n <qds-tooltip placement=\"right\" ref={this.#tooltipRef}>\n {this.renderText()}\n </qds-tooltip>\n )}\n </Host>\n )\n }\n\n private renderText(): JSX.Element {\n return (\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n </div>\n )\n }\n\n readonly #liRef = (li?: HTMLLIElement): void => {\n this.li = li\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.li\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"],"names":[],"mappings":"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"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import type { ComponentInterface } from '../../stencil-public-runtime';
|
|
2
|
-
import type { Size } from '../shared';
|
|
3
|
-
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* @see https://quartz.se.com/build/components/nav-list-item
|
|
7
|
-
*/
|
|
8
|
-
export declare class NavListItem implements ComponentInterface {
|
|
9
|
-
#private;
|
|
10
|
-
/**
|
|
11
|
-
* Displays the navigation list item in a collapsed state without its text.
|
|
12
|
-
* The text will be displayed in a tooltip instead.
|
|
13
|
-
*
|
|
14
|
-
* This property has no effect if the navigation list item does not have an
|
|
15
|
-
* icon set.
|
|
16
|
-
*/
|
|
17
|
-
readonly collapsed: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Prevents the navigation list item from being interacted with: it cannot be
|
|
20
|
-
* selected or focused.
|
|
21
|
-
*/
|
|
22
|
-
readonly disabled: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* The name of the icon to render.
|
|
25
|
-
*
|
|
26
|
-
* Available names depend on the icon library being used.
|
|
27
|
-
*/
|
|
28
|
-
readonly iconName?: string;
|
|
29
|
-
/**
|
|
30
|
-
* The name of a registered icon library.
|
|
31
|
-
*/
|
|
32
|
-
readonly iconLibrary: string;
|
|
33
|
-
/**
|
|
34
|
-
* The navigation list items's size.
|
|
35
|
-
*/
|
|
36
|
-
readonly size?: Size;
|
|
37
|
-
/**
|
|
38
|
-
* Whether or not the navigation list item is selected.
|
|
39
|
-
*/
|
|
40
|
-
readonly selected: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* Text to display for the subtext.
|
|
43
|
-
*/
|
|
44
|
-
readonly subtext?: string;
|
|
45
|
-
/**
|
|
46
|
-
* Primary text to display.
|
|
47
|
-
*/
|
|
48
|
-
readonly text: string;
|
|
49
|
-
/**
|
|
50
|
-
* Emitted when the navigation list item loses focus.
|
|
51
|
-
*/
|
|
52
|
-
private readonly blurEmitter;
|
|
53
|
-
/**
|
|
54
|
-
* Emitted when the navigation list item gains focus.
|
|
55
|
-
*/
|
|
56
|
-
private readonly focusEmitter;
|
|
57
|
-
private readonly host;
|
|
58
|
-
private tabIndex?;
|
|
59
|
-
private inheritedAttributes;
|
|
60
|
-
private li?;
|
|
61
|
-
protected onClick(event: MouseEvent): void;
|
|
62
|
-
protected tabindexChanged(newValue: string): void;
|
|
63
|
-
componentWillLoad(): void;
|
|
64
|
-
render(): any;
|
|
65
|
-
private renderText;
|
|
66
|
-
}
|
|
67
|
-
//# sourceMappingURL=nav-list-item.d.ts.map
|