@scania/tegel 1.37.1-expose-filter-input-value-beta.1 → 1.38.0-aria-invalid-input-beta.0
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/dist/cjs/getAriaInvalid-66a2eade.js +25 -0
- package/dist/cjs/tds-folder-tab.cjs.entry.js +1 -1
- package/dist/cjs/tds-folder-tabs.cjs.entry.js +1 -1
- package/dist/cjs/tds-inline-tab.cjs.entry.js +1 -1
- package/dist/cjs/tds-message.cjs.entry.js +3 -4
- package/dist/cjs/tds-navigation-tab.cjs.entry.js +1 -1
- package/dist/cjs/tds-navigation-tabs.cjs.entry.js +1 -1
- package/dist/cjs/tds-text-field.cjs.entry.js +6 -5
- package/dist/cjs/tds-textarea.cjs.entry.js +5 -3
- package/dist/collection/components/message/message.css +0 -20
- package/dist/collection/components/message/message.js +2 -3
- package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css +34 -8
- package/dist/collection/components/tabs/folder-tabs/folder-tabs.css +12 -2
- package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css +14 -9
- package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css +16 -10
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +12 -2
- package/dist/collection/components/text-field/text-field.js +6 -5
- package/dist/collection/components/textarea/textarea.js +5 -3
- package/dist/collection/utils/getAriaInvalid.js +21 -0
- package/dist/components/p-bbf9492a.js +23 -0
- package/dist/components/tds-folder-tab.js +1 -1
- package/dist/components/tds-folder-tabs.js +1 -1
- package/dist/components/tds-inline-tab.js +1 -1
- package/dist/components/tds-message.js +3 -4
- package/dist/components/tds-navigation-tab.js +1 -1
- package/dist/components/tds-navigation-tabs.js +1 -1
- package/dist/components/tds-text-field.js +6 -5
- package/dist/components/tds-textarea.js +5 -3
- package/dist/esm/getAriaInvalid-a9944cb9.js +23 -0
- package/dist/esm/tds-folder-tab.entry.js +1 -1
- package/dist/esm/tds-folder-tabs.entry.js +1 -1
- package/dist/esm/tds-inline-tab.entry.js +1 -1
- package/dist/esm/tds-message.entry.js +3 -4
- package/dist/esm/tds-navigation-tab.entry.js +1 -1
- package/dist/esm/tds-navigation-tabs.entry.js +1 -1
- package/dist/esm/tds-text-field.entry.js +6 -5
- package/dist/esm/tds-textarea.entry.js +6 -4
- package/dist/tegel/{p-c0b26507.entry.js → p-25f4b4ca.entry.js} +1 -1
- package/dist/tegel/p-35293420.entry.js +1 -0
- package/dist/tegel/p-83e6e31f.entry.js +1 -0
- package/dist/tegel/p-8ae4e03c.entry.js +1 -0
- package/dist/tegel/p-b2b9561f.entry.js +1 -0
- package/dist/tegel/{p-52adc30c.entry.js → p-bb9445ff.entry.js} +1 -1
- package/dist/tegel/p-bbf9492a.js +1 -0
- package/dist/tegel/{p-8c841698.entry.js → p-d184a3f0.entry.js} +1 -1
- package/dist/tegel/p-db38b4f2.entry.js +1 -0
- package/dist/tegel/tegel.css +1 -1
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/textarea/textarea.d.ts +1 -0
- package/dist/types/utils/getAriaInvalid.d.ts +14 -0
- package/package.json +1 -1
- package/dist/tegel/p-106e048d.entry.js +0 -1
- package/dist/tegel/p-a98767ea.entry.js +0 -1
- package/dist/tegel/p-cd5103e3.entry.js +0 -1
- package/dist/tegel/p-dc375d3e.entry.js +0 -1
- package/dist/tegel/p-e3c2b6b4.entry.js +0 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import hasSlot from "../../utils/hasSlot";
|
|
3
3
|
import generateUniqueId from "../../utils/generateUniqueId";
|
|
4
|
+
import { getAriaInvalid } from "../../utils/getAriaInvalid";
|
|
4
5
|
/**
|
|
5
6
|
* @slot prefix - Slot for the prefix in the component.
|
|
6
7
|
* @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
|
|
@@ -71,7 +72,7 @@ export class TdsTextField {
|
|
|
71
72
|
var _a;
|
|
72
73
|
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
73
74
|
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
74
|
-
return (h("div", { key: '
|
|
75
|
+
return (h("div", { key: '323df30951c2ee070b043228f78c3045b33e2fc9', class: {
|
|
75
76
|
'form-text-field': true,
|
|
76
77
|
'form-text-field-nomin': this.noMinWidth,
|
|
77
78
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -89,12 +90,12 @@ export class TdsTextField {
|
|
|
89
90
|
'form-text-field-sm': this.size === 'sm',
|
|
90
91
|
'form-text-field-error': this.state === 'error',
|
|
91
92
|
'form-text-field-success': this.state === 'success',
|
|
92
|
-
} }, this.labelPosition === 'outside' && (h("div", { key: '
|
|
93
|
+
} }, this.labelPosition === 'outside' && (h("div", { key: 'fe9768bbf8999dc49f90e096bfd138710a91e7bb', class: "text-field-label-outside" }, h("label", { key: '91d39c768b49e7867a87f7fc78b50ec4034c4560', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'abb84b67da94a281e986891a00a8bd348ad3b131', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '4661114d6fe3e809ee7c0254686c9feb55fce6ad', class: {
|
|
93
94
|
'text-field-slot-wrap-prefix': true,
|
|
94
95
|
'text-field-error': this.state === 'error',
|
|
95
96
|
'text-field-success': this.state === 'success',
|
|
96
97
|
'text-field-default': this.state === 'default',
|
|
97
|
-
} }, h("slot", { key: '
|
|
98
|
+
} }, h("slot", { key: '40aac31a850fb3ad1d703834b578c73a35c9f255', name: "prefix" }))), h("div", { key: '1c85331cb4dd7a03527c3730996f07a5d25293d7', class: "text-field-input-container" }, h("input", { key: '498c3ae25cc2508c28dd2e5f8483c35adb9f8bb9', ref: (inputEl) => {
|
|
98
99
|
this.textInput = inputEl;
|
|
99
100
|
}, class: {
|
|
100
101
|
'text-field-input': true,
|
|
@@ -109,13 +110,13 @@ export class TdsTextField {
|
|
|
109
110
|
if (!this.readOnly) {
|
|
110
111
|
this.handleBlur(event);
|
|
111
112
|
}
|
|
112
|
-
}, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '
|
|
113
|
+
}, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '41a2f20f416c65fb2d7d9992286f4bc9c9dcc52c', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '2b7b63efd24c1398d2d40a3d5a48d3003931cff8', class: {
|
|
113
114
|
'text-field-slot-wrap-suffix': true,
|
|
114
115
|
'text-field-error': this.state === 'error',
|
|
115
116
|
'text-field-success': this.state === 'success',
|
|
116
117
|
'text-field-default': this.state === 'default',
|
|
117
118
|
'tds-u-display-none': this.readOnly,
|
|
118
|
-
} }, h("slot", { key: '
|
|
119
|
+
} }, h("slot", { key: 'b594b47a2ee6bfb393b44c8b704232881e53c119', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '5a9d4e1492b908a397881a42f9c0229d32e2a457', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '02bb93263fc40d5d6aeb2dda3ad5ac49f2e2ccf6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'e926eb2de3946822875badbcc7e325e9981b8271', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'ac28d59eb12ef9efe38cd940daf1299b06dd4446', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'd1b09c6f543f0e985476b798ee642c6a11cb7485', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '160ca65e021a3f313b828dbcf82b158036d748ad', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '34bb9eaa6c267d882fc28a9b80fd331523bd981b', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '6b1ad7dbce2e2fe37e116c1d8f0b11f2dfe00260', class: {
|
|
119
120
|
'text-field-textcounter-divider': true,
|
|
120
121
|
'text-field-textcounter-disabled': this.disabled,
|
|
121
122
|
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import generateUniqueId from "../../utils/generateUniqueId";
|
|
3
|
+
import { getAriaInvalid } from "../../utils/getAriaInvalid";
|
|
3
4
|
export class TdsTextarea {
|
|
4
5
|
constructor() {
|
|
5
6
|
this.uuid = generateUniqueId();
|
|
@@ -60,7 +61,7 @@ export class TdsTextarea {
|
|
|
60
61
|
}
|
|
61
62
|
render() {
|
|
62
63
|
var _a;
|
|
63
|
-
return (h("div", { key: '
|
|
64
|
+
return (h("div", { key: '68eb00fd2e149732b8d47b72e8b60b2a30dd4d76', class: {
|
|
64
65
|
'textarea-container': true,
|
|
65
66
|
'textarea-label-inside': this.labelPosition === 'inside',
|
|
66
67
|
'textarea-focus': this.focusInput,
|
|
@@ -70,7 +71,7 @@ export class TdsTextarea {
|
|
|
70
71
|
'textarea-data': this.value !== '',
|
|
71
72
|
[`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
|
|
72
73
|
'no-min-width': this.noMinWidth,
|
|
73
|
-
} }, this.labelPosition !== 'no-label' && (h("label", { key: '
|
|
74
|
+
} }, this.labelPosition !== 'no-label' && (h("label", { key: '883255abac1da6cec05779b200d5347b6fa740dc', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'c0eacdcf4b575d14ebd5905785dade6a3f151f0e', class: "textarea-wrapper" }, h("textarea", { key: '940ea2fc206cd567bd2f181e71236cce216ec669', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
|
|
74
75
|
this.textEl = inputEl;
|
|
75
76
|
}, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
|
|
76
77
|
if (!this.readOnly) {
|
|
@@ -80,7 +81,7 @@ export class TdsTextarea {
|
|
|
80
81
|
if (!this.readOnly) {
|
|
81
82
|
this.handleBlur(event);
|
|
82
83
|
}
|
|
83
|
-
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state
|
|
84
|
+
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'b821544e95ac75383e05d5fd54b605306f5c6790', class: "textarea-resizer-icon" }, h("svg", { key: '11d6fa83c05cc2511b391bab21d229d057516571', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '95e8fd6c73070e318d0c5c589fa326ef3480e282', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '8628c6ab7310a8dcf7bb2e9f95660a93dc4da3b4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '50f5e91b88f8e5e97ec656bed783949464ef8723', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '3c86f76ddfe425385c9c9b93b0ed3a1e0baf2b20', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '42d22b4fd71e5db663d775e930ae6cc7323a89ec', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '088af2b39b4864f48e751d4b44c6d069ebf8ccd6', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'f425416cfdaed26d6b7b7c619babe478bf63593b', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '4d68979b2b8a5601f3b62612f09eb5223cc0490b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
|
|
84
85
|
}
|
|
85
86
|
static get is() { return "tds-textarea"; }
|
|
86
87
|
static get encapsulation() { return "scoped"; }
|
|
@@ -503,4 +504,5 @@ export class TdsTextarea {
|
|
|
503
504
|
}
|
|
504
505
|
};
|
|
505
506
|
}
|
|
507
|
+
static get elementRef() { return "host"; }
|
|
506
508
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gets the appropriate aria-invalid value for form components.
|
|
3
|
+
*
|
|
4
|
+
* This utility handles cross-framework compatibility by checking for an explicit
|
|
5
|
+
* aria-invalid attribute on the host element first, then falling back to the
|
|
6
|
+
* component's state. It properly handles both string and boolean values that
|
|
7
|
+
* may be passed from different frameworks (especially React).
|
|
8
|
+
*
|
|
9
|
+
* @param host - The host element to check for aria-invalid attribute
|
|
10
|
+
* @param state - The component's state ('error', 'success', 'default')
|
|
11
|
+
* @returns The aria-invalid value as a string ('true' or 'false')
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
14
|
+
export const getAriaInvalid = (host, state) => {
|
|
15
|
+
const hostAriaInvalid = host.getAttribute('aria-invalid');
|
|
16
|
+
if (hostAriaInvalid !== null) {
|
|
17
|
+
return String(hostAriaInvalid);
|
|
18
|
+
}
|
|
19
|
+
// Fallback to state-based aria-invalid
|
|
20
|
+
return state === 'error' ? 'true' : 'false';
|
|
21
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gets the appropriate aria-invalid value for form components.
|
|
3
|
+
*
|
|
4
|
+
* This utility handles cross-framework compatibility by checking for an explicit
|
|
5
|
+
* aria-invalid attribute on the host element first, then falling back to the
|
|
6
|
+
* component's state. It properly handles both string and boolean values that
|
|
7
|
+
* may be passed from different frameworks (especially React).
|
|
8
|
+
*
|
|
9
|
+
* @param host - The host element to check for aria-invalid attribute
|
|
10
|
+
* @param state - The component's state ('error', 'success', 'default')
|
|
11
|
+
* @returns The aria-invalid value as a string ('true' or 'false')
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
14
|
+
const getAriaInvalid = (host, state) => {
|
|
15
|
+
const hostAriaInvalid = host.getAttribute('aria-invalid');
|
|
16
|
+
if (hostAriaInvalid !== null) {
|
|
17
|
+
return String(hostAriaInvalid);
|
|
18
|
+
}
|
|
19
|
+
// Fallback to state-based aria-invalid
|
|
20
|
+
return state === 'error' ? 'true' : 'false';
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { getAriaInvalid as g };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
|
|
3
|
-
const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none
|
|
3
|
+
const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none}:host ::slotted(*:focus-within)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host div:not(.selected){background-color:var(--tds-folder-tab-background);position:relative}:host div:not(.selected)::before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--tds-folder-tab-divider-color)}:host div:not(.selected) ::slotted(*){border-top:2px solid transparent;color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top:2px solid var(--tds-folder-tab-top-border-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled{background-color:var(--tds-folder-tab-item-background-disabled)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-divider-color);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host .selected:hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host .selected:hover:not(.disabled) ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) ::slotted(*){border-left-color:transparent}:host(.first) .selected{border-left:none}";
|
|
4
4
|
const TdsFolderTabStyle0 = folderTabCss;
|
|
5
5
|
|
|
6
6
|
const TdsFolderTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTab extends H {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { d as defineCustomElement$2 } from './p-b390ece5.js';
|
|
3
3
|
|
|
4
|
-
const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
4
|
+
const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
5
5
|
const TdsFolderTabsStyle0 = folderTabsCss;
|
|
6
6
|
|
|
7
7
|
const TdsFolderTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTabs extends H {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
|
|
3
|
-
const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:20px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:
|
|
3
|
+
const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:20px 4px}:host ::slotted(*:focus-visible)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;left:0;right:0;top:3px;bottom:3px}:host .inline-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover ::slotted(*){color:var(--tds-inline-tabs-tab-color-hover)}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-inline-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled::after{content:none}:host .disabled ::slotted(*){color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled ::slotted(*:hover){color:var(--tds-inline-tabs-tab-color-disabled);cursor:not-allowed}:host .disabled ::slotted(*:focus-visible){outline:none;box-shadow:none}:host(.last){margin-right:32px}";
|
|
4
4
|
const TdsInlineTabStyle0 = inlineTabCss;
|
|
5
5
|
|
|
6
6
|
const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab extends H {
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-b390ece5.js';
|
|
4
4
|
|
|
5
|
-
const messageCss = ":host
|
|
5
|
+
const messageCss = ":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--system-info-default)}:host .wrapper.information tds-icon{color:var(--system-info-default)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--system-success-default)}:host .wrapper.success tds-icon{color:var(--system-success-default)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--system-danger-default)}:host .wrapper.error tds-icon{color:var(--system-danger-default)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--system-warning-default)}:host .wrapper.warning tds-icon{color:var(--system-warning-default)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--system-danger-default)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
|
|
6
6
|
const TdsMessageStyle0 = messageCss;
|
|
7
7
|
|
|
8
8
|
const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H {
|
|
@@ -42,12 +42,11 @@ const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H
|
|
|
42
42
|
render() {
|
|
43
43
|
const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
|
|
44
44
|
const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
return (h(Host, { key: '752eb725898add9261df7460b3043642e7e6a7ef', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'd1346696f7f4d63d25cbacc0b3cbf60c39a54add', class: {
|
|
46
46
|
wrapper: true,
|
|
47
47
|
[this.variant]: true,
|
|
48
48
|
minimal: this.minimal,
|
|
49
|
-
|
|
50
|
-
} }, !this.noIcon && (h("tds-icon", { key: '7c95385da3ab0e887b6e955a302bc39b3aeaafe0', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'eed507b43c57eaafdeba40c25e9556bacbe0f166', class: `content` }, this.header && (h("div", { key: 'd6faa3f523f64f158a31e35a416f957c38bbcceb', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '03c724a2bdbee954b9c48aa27a18444abfacafbb', class: "extended-message", id: contentId }, h("slot", { key: '017b634e145a514a2315880db6cfb712ddb254b0' })))))));
|
|
49
|
+
} }, !this.noIcon && (h("tds-icon", { key: '39d83a70a25d5ac07c3786f47989ce77b1a9b386', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'aeb139399975656ee15493dab9c2ac77e4f295a0', class: `content` }, this.header && (h("div", { key: 'd9a1e8b5d2513630ff9c0a4363d346dfe2ecfd09', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: 'dffbcdb31b11c4f6313609fac311991202b9f462', class: "extended-message", id: contentId }, h("slot", { key: '38578271864c5884c5a4a4c105ae44ef6d2caf07' })))))));
|
|
51
50
|
}
|
|
52
51
|
static get style() { return TdsMessageStyle0; }
|
|
53
52
|
}, [1, "tds-message", {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
|
|
3
|
-
const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color)
|
|
3
|
+
const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 0}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover ::slotted(*){color:var(--tds-navigation-tabs-tab-color-hover)}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .navigation-tab-item:focus-visible::after{bottom:3px}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled ::slotted(*){color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed;color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}";
|
|
4
4
|
const TdsNavigationTabStyle0 = navigationTabCss;
|
|
5
5
|
|
|
6
6
|
const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab extends H {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { d as defineCustomElement$2 } from './p-b390ece5.js';
|
|
3
3
|
|
|
4
|
-
const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
4
|
+
const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:\"\";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
5
5
|
const TdsNavigationTabsStyle0 = navigationTabsCss;
|
|
6
6
|
|
|
7
7
|
const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends H {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
|
|
2
2
|
import { h as hasSlot } from './p-ae110fc2.js';
|
|
3
3
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
4
|
+
import { g as getAriaInvalid } from './p-bbf9492a.js';
|
|
4
5
|
import { d as defineCustomElement$4 } from './p-b390ece5.js';
|
|
5
6
|
import { d as defineCustomElement$3 } from './p-d3866be7.js';
|
|
6
7
|
import { d as defineCustomElement$2 } from './p-40253725.js';
|
|
@@ -80,7 +81,7 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
|
|
|
80
81
|
var _a;
|
|
81
82
|
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
82
83
|
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
83
|
-
return (h("div", { key: '
|
|
84
|
+
return (h("div", { key: '323df30951c2ee070b043228f78c3045b33e2fc9', class: {
|
|
84
85
|
'form-text-field': true,
|
|
85
86
|
'form-text-field-nomin': this.noMinWidth,
|
|
86
87
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -98,12 +99,12 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
|
|
|
98
99
|
'form-text-field-sm': this.size === 'sm',
|
|
99
100
|
'form-text-field-error': this.state === 'error',
|
|
100
101
|
'form-text-field-success': this.state === 'success',
|
|
101
|
-
} }, this.labelPosition === 'outside' && (h("div", { key: '
|
|
102
|
+
} }, this.labelPosition === 'outside' && (h("div", { key: 'fe9768bbf8999dc49f90e096bfd138710a91e7bb', class: "text-field-label-outside" }, h("label", { key: '91d39c768b49e7867a87f7fc78b50ec4034c4560', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'abb84b67da94a281e986891a00a8bd348ad3b131', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '4661114d6fe3e809ee7c0254686c9feb55fce6ad', class: {
|
|
102
103
|
'text-field-slot-wrap-prefix': true,
|
|
103
104
|
'text-field-error': this.state === 'error',
|
|
104
105
|
'text-field-success': this.state === 'success',
|
|
105
106
|
'text-field-default': this.state === 'default',
|
|
106
|
-
} }, h("slot", { key: '
|
|
107
|
+
} }, h("slot", { key: '40aac31a850fb3ad1d703834b578c73a35c9f255', name: "prefix" }))), h("div", { key: '1c85331cb4dd7a03527c3730996f07a5d25293d7', class: "text-field-input-container" }, h("input", { key: '498c3ae25cc2508c28dd2e5f8483c35adb9f8bb9', ref: (inputEl) => {
|
|
107
108
|
this.textInput = inputEl;
|
|
108
109
|
}, class: {
|
|
109
110
|
'text-field-input': true,
|
|
@@ -118,13 +119,13 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
|
|
|
118
119
|
if (!this.readOnly) {
|
|
119
120
|
this.handleBlur(event);
|
|
120
121
|
}
|
|
121
|
-
}, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '
|
|
122
|
+
}, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '41a2f20f416c65fb2d7d9992286f4bc9c9dcc52c', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '2b7b63efd24c1398d2d40a3d5a48d3003931cff8', class: {
|
|
122
123
|
'text-field-slot-wrap-suffix': true,
|
|
123
124
|
'text-field-error': this.state === 'error',
|
|
124
125
|
'text-field-success': this.state === 'success',
|
|
125
126
|
'text-field-default': this.state === 'default',
|
|
126
127
|
'tds-u-display-none': this.readOnly,
|
|
127
|
-
} }, h("slot", { key: '
|
|
128
|
+
} }, h("slot", { key: 'b594b47a2ee6bfb393b44c8b704232881e53c119', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '5a9d4e1492b908a397881a42f9c0229d32e2a457', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '02bb93263fc40d5d6aeb2dda3ad5ac49f2e2ccf6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'e926eb2de3946822875badbcc7e325e9981b8271', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'ac28d59eb12ef9efe38cd940daf1299b06dd4446', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'd1b09c6f543f0e985476b798ee642c6a11cb7485', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '160ca65e021a3f313b828dbcf82b158036d748ad', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '34bb9eaa6c267d882fc28a9b80fd331523bd981b', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '6b1ad7dbce2e2fe37e116c1d8f0b11f2dfe00260', class: {
|
|
128
129
|
'text-field-textcounter-divider': true,
|
|
129
130
|
'text-field-textcounter-disabled': this.disabled,
|
|
130
131
|
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
|
+
import { g as getAriaInvalid } from './p-bbf9492a.js';
|
|
3
4
|
import { d as defineCustomElement$4 } from './p-b390ece5.js';
|
|
4
5
|
import { d as defineCustomElement$3 } from './p-d3866be7.js';
|
|
5
6
|
import { d as defineCustomElement$2 } from './p-40253725.js';
|
|
@@ -73,7 +74,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
|
|
|
73
74
|
}
|
|
74
75
|
render() {
|
|
75
76
|
var _a;
|
|
76
|
-
return (h("div", { key: '
|
|
77
|
+
return (h("div", { key: '68eb00fd2e149732b8d47b72e8b60b2a30dd4d76', class: {
|
|
77
78
|
'textarea-container': true,
|
|
78
79
|
'textarea-label-inside': this.labelPosition === 'inside',
|
|
79
80
|
'textarea-focus': this.focusInput,
|
|
@@ -83,7 +84,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
|
|
|
83
84
|
'textarea-data': this.value !== '',
|
|
84
85
|
[`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
|
|
85
86
|
'no-min-width': this.noMinWidth,
|
|
86
|
-
} }, this.labelPosition !== 'no-label' && (h("label", { key: '
|
|
87
|
+
} }, this.labelPosition !== 'no-label' && (h("label", { key: '883255abac1da6cec05779b200d5347b6fa740dc', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'c0eacdcf4b575d14ebd5905785dade6a3f151f0e', class: "textarea-wrapper" }, h("textarea", { key: '940ea2fc206cd567bd2f181e71236cce216ec669', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
|
|
87
88
|
this.textEl = inputEl;
|
|
88
89
|
}, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
|
|
89
90
|
if (!this.readOnly) {
|
|
@@ -93,8 +94,9 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
|
|
|
93
94
|
if (!this.readOnly) {
|
|
94
95
|
this.handleBlur(event);
|
|
95
96
|
}
|
|
96
|
-
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state
|
|
97
|
+
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'b821544e95ac75383e05d5fd54b605306f5c6790', class: "textarea-resizer-icon" }, h("svg", { key: '11d6fa83c05cc2511b391bab21d229d057516571', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '95e8fd6c73070e318d0c5c589fa326ef3480e282', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '8628c6ab7310a8dcf7bb2e9f95660a93dc4da3b4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '50f5e91b88f8e5e97ec656bed783949464ef8723', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '3c86f76ddfe425385c9c9b93b0ed3a1e0baf2b20', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '42d22b4fd71e5db663d775e930ae6cc7323a89ec', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '088af2b39b4864f48e751d4b44c6d069ebf8ccd6', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'f425416cfdaed26d6b7b7c619babe478bf63593b', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '4d68979b2b8a5601f3b62612f09eb5223cc0490b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
|
|
97
98
|
}
|
|
99
|
+
get host() { return this; }
|
|
98
100
|
static get style() { return TdsTextareaStyle0; }
|
|
99
101
|
}, [2, "tds-textarea", {
|
|
100
102
|
"label": [1],
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gets the appropriate aria-invalid value for form components.
|
|
3
|
+
*
|
|
4
|
+
* This utility handles cross-framework compatibility by checking for an explicit
|
|
5
|
+
* aria-invalid attribute on the host element first, then falling back to the
|
|
6
|
+
* component's state. It properly handles both string and boolean values that
|
|
7
|
+
* may be passed from different frameworks (especially React).
|
|
8
|
+
*
|
|
9
|
+
* @param host - The host element to check for aria-invalid attribute
|
|
10
|
+
* @param state - The component's state ('error', 'success', 'default')
|
|
11
|
+
* @returns The aria-invalid value as a string ('true' or 'false')
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
14
|
+
const getAriaInvalid = (host, state) => {
|
|
15
|
+
const hostAriaInvalid = host.getAttribute('aria-invalid');
|
|
16
|
+
if (hostAriaInvalid !== null) {
|
|
17
|
+
return String(hostAriaInvalid);
|
|
18
|
+
}
|
|
19
|
+
// Fallback to state-based aria-invalid
|
|
20
|
+
return state === 'error' ? 'true' : 'false';
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { getAriaInvalid as g };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
|
|
2
2
|
|
|
3
|
-
const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none
|
|
3
|
+
const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none}:host ::slotted(*:focus-within)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host div:not(.selected){background-color:var(--tds-folder-tab-background);position:relative}:host div:not(.selected)::before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--tds-folder-tab-divider-color)}:host div:not(.selected) ::slotted(*){border-top:2px solid transparent;color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top:2px solid var(--tds-folder-tab-top-border-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled{background-color:var(--tds-folder-tab-item-background-disabled)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-divider-color);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host .selected:hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host .selected:hover:not(.disabled) ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) ::slotted(*){border-left-color:transparent}:host(.first) .selected{border-left:none}";
|
|
4
4
|
const TdsFolderTabStyle0 = folderTabCss;
|
|
5
5
|
|
|
6
6
|
const TdsFolderTab = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
|
|
2
2
|
|
|
3
|
-
const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
3
|
+
const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
4
4
|
const TdsFolderTabsStyle0 = folderTabsCss;
|
|
5
5
|
|
|
6
6
|
const TdsFolderTabs = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
|
|
2
2
|
|
|
3
|
-
const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:20px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:
|
|
3
|
+
const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:20px 4px}:host ::slotted(*:focus-visible)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;left:0;right:0;top:3px;bottom:3px}:host .inline-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover ::slotted(*){color:var(--tds-inline-tabs-tab-color-hover)}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-inline-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled::after{content:none}:host .disabled ::slotted(*){color:var(--tds-inline-tabs-tab-color-disabled)}:host .disabled ::slotted(*:hover){color:var(--tds-inline-tabs-tab-color-disabled);cursor:not-allowed}:host .disabled ::slotted(*:focus-visible){outline:none;box-shadow:none}:host(.last){margin-right:32px}";
|
|
4
4
|
const TdsInlineTabStyle0 = inlineTabCss;
|
|
5
5
|
|
|
6
6
|
const TdsInlineTab = class {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
|
|
2
2
|
import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
|
|
3
3
|
|
|
4
|
-
const messageCss = ":host
|
|
4
|
+
const messageCss = ":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--system-info-default)}:host .wrapper.information tds-icon{color:var(--system-info-default)}:host .wrapper.success{background-color:var(--tds-message-background-success);border-left:4px solid var(--system-success-default)}:host .wrapper.success tds-icon{color:var(--system-success-default)}:host .wrapper.error{background-color:var(--tds-message-background-error);border-left:4px solid var(--system-danger-default)}:host .wrapper.error tds-icon{color:var(--system-danger-default)}:host .wrapper.warning{background-color:var(--tds-message-background-warning);border-left:4px solid var(--system-warning-default)}:host .wrapper.warning tds-icon{color:var(--system-warning-default)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--system-danger-default)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
|
|
5
5
|
const TdsMessageStyle0 = messageCss;
|
|
6
6
|
|
|
7
7
|
const TdsMessage = class {
|
|
@@ -39,12 +39,11 @@ const TdsMessage = class {
|
|
|
39
39
|
render() {
|
|
40
40
|
const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
|
|
41
41
|
const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
|
|
42
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: '752eb725898add9261df7460b3043642e7e6a7ef', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'd1346696f7f4d63d25cbacc0b3cbf60c39a54add', class: {
|
|
43
43
|
wrapper: true,
|
|
44
44
|
[this.variant]: true,
|
|
45
45
|
minimal: this.minimal,
|
|
46
|
-
|
|
47
|
-
} }, !this.noIcon && (h("tds-icon", { key: '7c95385da3ab0e887b6e955a302bc39b3aeaafe0', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'eed507b43c57eaafdeba40c25e9556bacbe0f166', class: `content` }, this.header && (h("div", { key: 'd6faa3f523f64f158a31e35a416f957c38bbcceb', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '03c724a2bdbee954b9c48aa27a18444abfacafbb', class: "extended-message", id: contentId }, h("slot", { key: '017b634e145a514a2315880db6cfb712ddb254b0' })))))));
|
|
46
|
+
} }, !this.noIcon && (h("tds-icon", { key: '39d83a70a25d5ac07c3786f47989ce77b1a9b386', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'aeb139399975656ee15493dab9c2ac77e4f295a0', class: `content` }, this.header && (h("div", { key: 'd9a1e8b5d2513630ff9c0a4363d346dfe2ecfd09', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: 'dffbcdb31b11c4f6313609fac311991202b9f462', class: "extended-message", id: contentId }, h("slot", { key: '38578271864c5884c5a4a4c105ae44ef6d2caf07' })))))));
|
|
48
47
|
}
|
|
49
48
|
};
|
|
50
49
|
TdsMessage.style = TdsMessageStyle0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
|
|
2
2
|
|
|
3
|
-
const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color)
|
|
3
|
+
const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 0}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover ::slotted(*){color:var(--tds-navigation-tabs-tab-color-hover)}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .navigation-tab-item:focus-visible::after{bottom:3px}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled ::slotted(*){color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed;color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}";
|
|
4
4
|
const TdsNavigationTabStyle0 = navigationTabCss;
|
|
5
5
|
|
|
6
6
|
const TdsNavigationTab = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
|
|
2
2
|
|
|
3
|
-
const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
3
|
+
const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:\"\";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
|
|
4
4
|
const TdsNavigationTabsStyle0 = navigationTabsCss;
|
|
5
5
|
|
|
6
6
|
const TdsNavigationTabs = class {
|