@scania/tegel 1.37.1-dropdown-filter.beta.0 → 1.37.1-dropdown-filter.beta.1
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/tds-dropdown_2.cjs.entry.js +6 -6
- 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/collection/components/dropdown/dropdown.js +6 -6
- 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/components/{p-7691d7e5.js → p-13ea2752.js} +6 -6
- package/dist/components/tds-dropdown.js +1 -1
- 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-table-footer.js +1 -1
- package/dist/esm/tds-dropdown_2.entry.js +6 -6
- 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/tegel/{p-c0b26507.entry.js → p-25f4b4ca.entry.js} +1 -1
- package/dist/tegel/p-48497993.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-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/package.json +1 -1
- package/dist/tegel/p-106e048d.entry.js +0 -1
- package/dist/tegel/p-a3ac2bbe.entry.js +0 -1
- package/dist/tegel/p-dc375d3e.entry.js +0 -1
- package/dist/tegel/p-e3c2b6b4.entry.js +0 -1
|
@@ -214,7 +214,7 @@ const TdsDropdown = class {
|
|
|
214
214
|
this.handleFocus = (event) => {
|
|
215
215
|
this.open = true;
|
|
216
216
|
this.filterFocus = true;
|
|
217
|
-
if (this.
|
|
217
|
+
if (this.inputElement) {
|
|
218
218
|
this.inputElement.value = '';
|
|
219
219
|
}
|
|
220
220
|
this.tdsFocus.emit(event);
|
|
@@ -540,9 +540,9 @@ const TdsDropdown = class {
|
|
|
540
540
|
// Generate unique IDs for associating labels and helpers with the input/button
|
|
541
541
|
const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId.generateUniqueId()}` : undefined;
|
|
542
542
|
const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId.generateUniqueId()}` : undefined;
|
|
543
|
-
return (index.h(index.Host, { key: '
|
|
543
|
+
return (index.h(index.Host, { key: '2d22e0fc03ce6838f753f1d19d6af8070d612626', class: {
|
|
544
544
|
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
|
|
545
|
-
} }, this.label && this.labelPosition === 'outside' && (index.h("div", { key: '
|
|
545
|
+
} }, this.label && this.labelPosition === 'outside' && (index.h("div", { key: '04293570a4db1178efd4274cf8ec3afadc591b56', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: 'cfa21f047c6978ed941e87de33daffb2551babe8', class: {
|
|
546
546
|
'dropdown-select': true,
|
|
547
547
|
[this.size]: true,
|
|
548
548
|
'disabled': this.disabled,
|
|
@@ -590,7 +590,7 @@ const TdsDropdown = class {
|
|
|
590
590
|
label-inside-as-placeholder
|
|
591
591
|
${this.size}
|
|
592
592
|
${this.selectedOptions.length ? 'selected' : ''}
|
|
593
|
-
` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), index.h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), index.h("div", { key: '
|
|
593
|
+
` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), index.h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), index.h("div", { key: '0b612f63c3de29f83c43c6331c0d1df8e7606e01', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
|
|
594
594
|
this.dropdownList = element;
|
|
595
595
|
}, class: {
|
|
596
596
|
'dropdown-list': true,
|
|
@@ -601,11 +601,11 @@ const TdsDropdown = class {
|
|
|
601
601
|
'closed': !this.open,
|
|
602
602
|
[`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
|
|
603
603
|
[`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
|
|
604
|
-
} }, index.h("slot", { key: '
|
|
604
|
+
} }, index.h("slot", { key: '903020684ba2d64255b7f0d65c58ce16f1460405', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (index.h("div", { key: '7489340633f37a28944dd2077d2c3c7f6716427a', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (index.h("div", { key: 'b300011165a486d9dfa92f5f441a5acd0cc838aa', id: helperId, class: {
|
|
605
605
|
helper: true,
|
|
606
606
|
error: this.error,
|
|
607
607
|
disabled: this.disabled,
|
|
608
|
-
} }, this.error && index.h("tds-icon", { key: '
|
|
608
|
+
} }, this.error && index.h("tds-icon", { key: '2524b365c32aa92eb5a5d16988585bf922e569a8', name: "error", size: "16px" }), this.helper))));
|
|
609
609
|
}
|
|
610
610
|
get host() { return index.getElement(this); }
|
|
611
611
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
|
|
7
|
-
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
|
|
7
|
+
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}";
|
|
8
8
|
const TdsFolderTabStyle0 = folderTabCss;
|
|
9
9
|
|
|
10
10
|
const TdsFolderTab = class {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
|
|
7
|
-
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)}";
|
|
7
|
+
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)}";
|
|
8
8
|
const TdsFolderTabsStyle0 = folderTabsCss;
|
|
9
9
|
|
|
10
10
|
const TdsFolderTabs = class {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
|
|
7
|
-
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:
|
|
7
|
+
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}";
|
|
8
8
|
const TdsInlineTabStyle0 = inlineTabCss;
|
|
9
9
|
|
|
10
10
|
const TdsInlineTab = class {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
|
|
7
7
|
|
|
8
|
-
const messageCss = ":host
|
|
8
|
+
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)}";
|
|
9
9
|
const TdsMessageStyle0 = messageCss;
|
|
10
10
|
|
|
11
11
|
const TdsMessage = class {
|
|
@@ -43,12 +43,11 @@ const TdsMessage = class {
|
|
|
43
43
|
render() {
|
|
44
44
|
const headerId = this.header ? `tds-message-header-${generateUniqueId.generateUniqueId()}` : undefined;
|
|
45
45
|
const contentId = !this.minimal ? `tds-message-content-${generateUniqueId.generateUniqueId()}` : undefined;
|
|
46
|
-
return (index.h(index.Host, { key: '
|
|
46
|
+
return (index.h(index.Host, { key: '752eb725898add9261df7460b3043642e7e6a7ef', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, index.h("div", { key: 'd1346696f7f4d63d25cbacc0b3cbf60c39a54add', class: {
|
|
47
47
|
wrapper: true,
|
|
48
48
|
[this.variant]: true,
|
|
49
49
|
minimal: this.minimal,
|
|
50
|
-
|
|
51
|
-
} }, !this.noIcon && (index.h("tds-icon", { key: '7c95385da3ab0e887b6e955a302bc39b3aeaafe0', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), index.h("div", { key: 'eed507b43c57eaafdeba40c25e9556bacbe0f166', class: `content` }, this.header && (index.h("div", { key: 'd6faa3f523f64f158a31e35a416f957c38bbcceb', class: "header", id: headerId }, this.header)), !this.minimal && (index.h("div", { key: '03c724a2bdbee954b9c48aa27a18444abfacafbb', class: "extended-message", id: contentId }, index.h("slot", { key: '017b634e145a514a2315880db6cfb712ddb254b0' })))))));
|
|
50
|
+
} }, !this.noIcon && (index.h("tds-icon", { key: '39d83a70a25d5ac07c3786f47989ce77b1a9b386', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), index.h("div", { key: 'aeb139399975656ee15493dab9c2ac77e4f295a0', class: `content` }, this.header && (index.h("div", { key: 'd9a1e8b5d2513630ff9c0a4363d346dfe2ecfd09', class: "header", id: headerId }, this.header)), !this.minimal && (index.h("div", { key: 'dffbcdb31b11c4f6313609fac311991202b9f462', class: "extended-message", id: contentId }, index.h("slot", { key: '38578271864c5884c5a4a4c105ae44ef6d2caf07' })))))));
|
|
52
51
|
}
|
|
53
52
|
};
|
|
54
53
|
TdsMessage.style = TdsMessageStyle0;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
|
|
7
|
-
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)
|
|
7
|
+
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}";
|
|
8
8
|
const TdsNavigationTabStyle0 = navigationTabCss;
|
|
9
9
|
|
|
10
10
|
const TdsNavigationTab = class {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
|
|
7
|
-
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)}";
|
|
7
|
+
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)}";
|
|
8
8
|
const TdsNavigationTabsStyle0 = navigationTabsCss;
|
|
9
9
|
|
|
10
10
|
const TdsNavigationTabs = class {
|
|
@@ -135,7 +135,7 @@ export class TdsDropdown {
|
|
|
135
135
|
this.handleFocus = (event) => {
|
|
136
136
|
this.open = true;
|
|
137
137
|
this.filterFocus = true;
|
|
138
|
-
if (this.
|
|
138
|
+
if (this.inputElement) {
|
|
139
139
|
this.inputElement.value = '';
|
|
140
140
|
}
|
|
141
141
|
this.tdsFocus.emit(event);
|
|
@@ -461,9 +461,9 @@ export class TdsDropdown {
|
|
|
461
461
|
// Generate unique IDs for associating labels and helpers with the input/button
|
|
462
462
|
const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
|
|
463
463
|
const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
|
|
464
|
-
return (h(Host, { key: '
|
|
464
|
+
return (h(Host, { key: '2d22e0fc03ce6838f753f1d19d6af8070d612626', class: {
|
|
465
465
|
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
|
|
466
|
-
} }, this.label && this.labelPosition === 'outside' && (h("div", { key: '
|
|
466
|
+
} }, this.label && this.labelPosition === 'outside' && (h("div", { key: '04293570a4db1178efd4274cf8ec3afadc591b56', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'cfa21f047c6978ed941e87de33daffb2551babe8', class: {
|
|
467
467
|
'dropdown-select': true,
|
|
468
468
|
[this.size]: true,
|
|
469
469
|
'disabled': this.disabled,
|
|
@@ -511,7 +511,7 @@ export class TdsDropdown {
|
|
|
511
511
|
label-inside-as-placeholder
|
|
512
512
|
${this.size}
|
|
513
513
|
${this.selectedOptions.length ? 'selected' : ''}
|
|
514
|
-
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '
|
|
514
|
+
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '0b612f63c3de29f83c43c6331c0d1df8e7606e01', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
|
|
515
515
|
this.dropdownList = element;
|
|
516
516
|
}, class: {
|
|
517
517
|
'dropdown-list': true,
|
|
@@ -522,11 +522,11 @@ export class TdsDropdown {
|
|
|
522
522
|
'closed': !this.open,
|
|
523
523
|
[`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
|
|
524
524
|
[`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
|
|
525
|
-
} }, h("slot", { key: '
|
|
525
|
+
} }, h("slot", { key: '903020684ba2d64255b7f0d65c58ce16f1460405', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '7489340633f37a28944dd2077d2c3c7f6716427a', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'b300011165a486d9dfa92f5f441a5acd0cc838aa', id: helperId, class: {
|
|
526
526
|
helper: true,
|
|
527
527
|
error: this.error,
|
|
528
528
|
disabled: this.disabled,
|
|
529
|
-
} }, this.error && h("tds-icon", { key: '
|
|
529
|
+
} }, this.error && h("tds-icon", { key: '2524b365c32aa92eb5a5d16988585bf922e569a8', name: "error", size: "16px" }), this.helper))));
|
|
530
530
|
}
|
|
531
531
|
static get is() { return "tds-dropdown"; }
|
|
532
532
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,26 +1,6 @@
|
|
|
1
1
|
/* Typography Usage mixins */
|
|
2
2
|
/* Centralized map of typography types */
|
|
3
3
|
/* Utility mixin */
|
|
4
|
-
:host {
|
|
5
|
-
/* Default values */
|
|
6
|
-
--tds-message-background: var(--background-elevation-layer-03);
|
|
7
|
-
--tds-message-background-error: var(--system-danger-subtle-03);
|
|
8
|
-
--tds-message-background-warning: var(--background-elevation-layer-03);
|
|
9
|
-
--tds-message-background-success: var(--background-elevation-layer-03);
|
|
10
|
-
/* Variant values */
|
|
11
|
-
}
|
|
12
|
-
:host .tds-mode-variant-primary {
|
|
13
|
-
--tds-message-background: var(--background-elevation-layer-03);
|
|
14
|
-
--tds-message-background-error: var(--system-danger-subtle-03);
|
|
15
|
-
--tds-message-background-warning: var(--background-elevation-layer-03);
|
|
16
|
-
--tds-message-background-success: var(--background-elevation-layer-03);
|
|
17
|
-
}
|
|
18
|
-
:host .tds-mode-variant-secondary {
|
|
19
|
-
--tds-message-background: var(--background-elevation-layer-02);
|
|
20
|
-
--tds-message-background-error: var(--system-danger-subtle-02);
|
|
21
|
-
--tds-message-background-warning: var(--background-elevation-layer-02);
|
|
22
|
-
--tds-message-background-success: var(--background-elevation-layer-02);
|
|
23
|
-
}
|
|
24
4
|
:host .wrapper {
|
|
25
5
|
display: flex;
|
|
26
6
|
padding: 16px;
|
|
@@ -37,12 +37,11 @@ export class TdsMessage {
|
|
|
37
37
|
render() {
|
|
38
38
|
const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
|
|
39
39
|
const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
|
|
40
|
-
return (h(Host, { key: '
|
|
40
|
+
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: {
|
|
41
41
|
wrapper: true,
|
|
42
42
|
[this.variant]: true,
|
|
43
43
|
minimal: this.minimal,
|
|
44
|
-
|
|
45
|
-
} }, !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' })))))));
|
|
44
|
+
} }, !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' })))))));
|
|
46
45
|
}
|
|
47
46
|
static get is() { return "tds-message"; }
|
|
48
47
|
static get encapsulation() { return "shadow"; }
|
|
@@ -20,21 +20,34 @@
|
|
|
20
20
|
text-align: left;
|
|
21
21
|
outline: none;
|
|
22
22
|
border: none;
|
|
23
|
-
border-left: 1px solid;
|
|
24
|
-
border-left-color: transparent;
|
|
25
23
|
}
|
|
26
|
-
:host ::slotted(*:focus-
|
|
24
|
+
:host ::slotted(*:focus-within)::before {
|
|
27
25
|
outline: 2px solid var(--tds-focus-outline-color);
|
|
28
26
|
box-shadow: 0 0 0 1px var(--tds-white);
|
|
29
27
|
outline-offset: 1px;
|
|
30
28
|
z-index: 1;
|
|
29
|
+
content: "";
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 3px;
|
|
32
|
+
bottom: 3px;
|
|
33
|
+
left: 3px;
|
|
34
|
+
right: 3px;
|
|
31
35
|
}
|
|
32
36
|
:host div:not(.selected) {
|
|
33
37
|
background-color: var(--tds-folder-tab-background);
|
|
38
|
+
position: relative;
|
|
39
|
+
}
|
|
40
|
+
:host div:not(.selected)::before {
|
|
41
|
+
content: "";
|
|
42
|
+
position: absolute;
|
|
43
|
+
left: 0;
|
|
44
|
+
top: 0;
|
|
45
|
+
bottom: 0;
|
|
46
|
+
width: 1px;
|
|
47
|
+
background-color: var(--tds-folder-tab-divider-color);
|
|
34
48
|
}
|
|
35
49
|
:host div:not(.selected) ::slotted(*) {
|
|
36
|
-
border-
|
|
37
|
-
border-top: 2px solid var(--tds-folder-tab-background);
|
|
50
|
+
border-top: 2px solid transparent;
|
|
38
51
|
color: var(--tds-folder-tab-item-color);
|
|
39
52
|
}
|
|
40
53
|
:host div:not(.selected):hover:not(.disabled) {
|
|
@@ -42,9 +55,12 @@
|
|
|
42
55
|
cursor: pointer;
|
|
43
56
|
}
|
|
44
57
|
:host div:not(.selected):hover:not(.disabled) ::slotted(*) {
|
|
45
|
-
border-top
|
|
58
|
+
border-top: 2px solid var(--tds-folder-tab-top-border-hover);
|
|
46
59
|
color: var(--tds-folder-tab-color);
|
|
47
60
|
}
|
|
61
|
+
:host div:not(.selected).disabled {
|
|
62
|
+
background-color: var(--tds-folder-tab-item-background-disabled);
|
|
63
|
+
}
|
|
48
64
|
:host div:not(.selected).disabled ::slotted(*) {
|
|
49
65
|
color: var(--tds-folder-tab-item-color-disabled);
|
|
50
66
|
}
|
|
@@ -63,7 +79,7 @@
|
|
|
63
79
|
}
|
|
64
80
|
:host .selected::after {
|
|
65
81
|
content: " ";
|
|
66
|
-
background-color: var(--tds-folder-tab-
|
|
82
|
+
background-color: var(--tds-folder-tab-divider-color);
|
|
67
83
|
width: 1px;
|
|
68
84
|
top: 0;
|
|
69
85
|
bottom: 0;
|
|
@@ -75,7 +91,17 @@
|
|
|
75
91
|
:host .selected ::slotted(*) {
|
|
76
92
|
color: var(--tds-folder-tab-color);
|
|
77
93
|
}
|
|
94
|
+
:host .selected:hover:not(.disabled) {
|
|
95
|
+
background-color: var(--tds-folder-tab-background-hover);
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
}
|
|
98
|
+
:host .selected:hover:not(.disabled) ::slotted(*) {
|
|
99
|
+
color: var(--tds-folder-tab-color);
|
|
100
|
+
}
|
|
78
101
|
|
|
79
|
-
:host(.first)
|
|
102
|
+
:host(.first) ::slotted(*) {
|
|
80
103
|
border-left-color: transparent;
|
|
104
|
+
}
|
|
105
|
+
:host(.first) .selected {
|
|
106
|
+
border-left: none;
|
|
81
107
|
}
|
|
@@ -53,12 +53,22 @@
|
|
|
53
53
|
:host .scroll-left-button:active {
|
|
54
54
|
background-color: var(--tds-folder-tabs-scroll-btn-background-active);
|
|
55
55
|
}
|
|
56
|
-
:host .scroll-right-button:focus,
|
|
57
|
-
:host .scroll-left-button:focus {
|
|
56
|
+
:host .scroll-right-button:focus-within::before,
|
|
57
|
+
:host .scroll-left-button:focus-within::before {
|
|
58
58
|
outline: 2px solid var(--tds-focus-outline-color);
|
|
59
59
|
box-shadow: 0 0 0 1px var(--tds-white);
|
|
60
60
|
outline-offset: 1px;
|
|
61
61
|
z-index: 1;
|
|
62
|
+
content: "";
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 3px;
|
|
65
|
+
bottom: 3px;
|
|
66
|
+
left: 3px;
|
|
67
|
+
right: 3px;
|
|
68
|
+
}
|
|
69
|
+
:host .scroll-right-button:focus,
|
|
70
|
+
:host .scroll-left-button:focus {
|
|
71
|
+
outline: 0;
|
|
62
72
|
}
|
|
63
73
|
:host .scroll-right-button svg,
|
|
64
74
|
:host .scroll-left-button svg {
|
|
@@ -23,13 +23,16 @@
|
|
|
23
23
|
padding: 20px 4px;
|
|
24
24
|
}
|
|
25
25
|
:host ::slotted(*:focus-visible)::before {
|
|
26
|
+
outline: 2px solid var(--tds-focus-outline-color);
|
|
27
|
+
box-shadow: 0 0 0 1px var(--tds-white);
|
|
28
|
+
outline-offset: 1px;
|
|
29
|
+
z-index: 1;
|
|
26
30
|
content: "";
|
|
27
31
|
position: absolute;
|
|
28
32
|
left: 0;
|
|
29
33
|
right: 0;
|
|
30
|
-
top:
|
|
31
|
-
bottom:
|
|
32
|
-
outline: 2px solid var(--tds-blue-400);
|
|
34
|
+
top: 3px;
|
|
35
|
+
bottom: 3px;
|
|
33
36
|
}
|
|
34
37
|
:host .inline-tab-item:not(.selected)::after {
|
|
35
38
|
width: 0%;
|
|
@@ -42,6 +45,9 @@
|
|
|
42
45
|
:host .inline-tab-item:hover {
|
|
43
46
|
cursor: pointer;
|
|
44
47
|
}
|
|
48
|
+
:host .inline-tab-item:hover ::slotted(*) {
|
|
49
|
+
color: var(--tds-inline-tabs-tab-color-hover);
|
|
50
|
+
}
|
|
45
51
|
:host .inline-tab-item:hover::after {
|
|
46
52
|
width: 100%;
|
|
47
53
|
}
|
|
@@ -65,20 +71,19 @@
|
|
|
65
71
|
width: 100%;
|
|
66
72
|
background-color: var(--tds-inline-tabs-tab-indicator-background-active);
|
|
67
73
|
}
|
|
68
|
-
:host .disabled {
|
|
69
|
-
color: var(--tds-inline-tabs-tab-color-disabled);
|
|
70
|
-
}
|
|
71
|
-
:host .disabled ::slotted(*) {
|
|
72
|
-
opacity: var(--tds-inline-tabs-tab-color-opacity-disabled);
|
|
73
|
-
}
|
|
74
74
|
:host .disabled::after {
|
|
75
75
|
content: none;
|
|
76
76
|
}
|
|
77
|
+
:host .disabled ::slotted(*) {
|
|
78
|
+
color: var(--tds-inline-tabs-tab-color-disabled);
|
|
79
|
+
}
|
|
77
80
|
:host .disabled ::slotted(*:hover) {
|
|
81
|
+
color: var(--tds-inline-tabs-tab-color-disabled);
|
|
78
82
|
cursor: not-allowed;
|
|
79
83
|
}
|
|
80
84
|
:host .disabled ::slotted(*:focus-visible) {
|
|
81
85
|
outline: none;
|
|
86
|
+
box-shadow: none;
|
|
82
87
|
}
|
|
83
88
|
|
|
84
89
|
:host(.last) {
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
/* !important is needed here to prevent this from being overwritten by our CSS-reset. */
|
|
11
11
|
font: var(--tds-headline-07) !important;
|
|
12
12
|
letter-spacing: var(--tds-headline-07-ls) !important;
|
|
13
|
-
color: var(--tds-navigation-tabs-tab-color)
|
|
13
|
+
color: var(--tds-navigation-tabs-tab-color);
|
|
14
14
|
text-decoration: none;
|
|
15
15
|
display: block;
|
|
16
16
|
position: relative;
|
|
@@ -19,16 +19,19 @@
|
|
|
19
19
|
background-color: transparent;
|
|
20
20
|
border: 0;
|
|
21
21
|
width: 100%;
|
|
22
|
-
padding: 26px
|
|
22
|
+
padding: 26px 0;
|
|
23
23
|
}
|
|
24
24
|
:host ::slotted(*:focus-visible)::before {
|
|
25
25
|
content: "";
|
|
26
26
|
position: absolute;
|
|
27
27
|
left: 0;
|
|
28
28
|
right: 0;
|
|
29
|
-
top:
|
|
30
|
-
bottom:
|
|
31
|
-
outline: 2px solid var(--tds-
|
|
29
|
+
top: 3px;
|
|
30
|
+
bottom: 3px;
|
|
31
|
+
outline: 2px solid var(--tds-focus-outline-color);
|
|
32
|
+
box-shadow: 0 0 0 1px var(--tds-white);
|
|
33
|
+
outline-offset: 1px;
|
|
34
|
+
z-index: 1;
|
|
32
35
|
}
|
|
33
36
|
:host .navigation-tab-item:not(.selected)::after {
|
|
34
37
|
width: 0%;
|
|
@@ -36,11 +39,13 @@
|
|
|
36
39
|
}
|
|
37
40
|
:host .navigation-tab-item {
|
|
38
41
|
position: relative;
|
|
39
|
-
margin-right: 32px;
|
|
40
42
|
}
|
|
41
43
|
:host .navigation-tab-item:hover {
|
|
42
44
|
cursor: pointer;
|
|
43
45
|
}
|
|
46
|
+
:host .navigation-tab-item:hover ::slotted(*) {
|
|
47
|
+
color: var(--tds-navigation-tabs-tab-color-hover);
|
|
48
|
+
}
|
|
44
49
|
:host .navigation-tab-item:hover::after {
|
|
45
50
|
width: 100%;
|
|
46
51
|
}
|
|
@@ -57,6 +62,9 @@
|
|
|
57
62
|
background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
|
|
58
63
|
z-index: 1;
|
|
59
64
|
}
|
|
65
|
+
:host .navigation-tab-item:focus-visible::after {
|
|
66
|
+
bottom: 3px;
|
|
67
|
+
}
|
|
60
68
|
:host .selected ::slotted(*) {
|
|
61
69
|
color: var(--tds-navigation-tabs-tab-color-selected);
|
|
62
70
|
}
|
|
@@ -64,17 +72,15 @@
|
|
|
64
72
|
width: 100%;
|
|
65
73
|
background-color: var(--tds-navigation-tabs-tab-indicator-background-active);
|
|
66
74
|
}
|
|
67
|
-
:host .disabled {
|
|
68
|
-
color: var(--tds-navigation-tabs-tab-color-disabled);
|
|
69
|
-
}
|
|
70
75
|
:host .disabled ::slotted(*) {
|
|
71
|
-
|
|
76
|
+
color: var(--tds-navigation-tabs-tab-color-disabled);
|
|
72
77
|
}
|
|
73
78
|
:host .disabled::after {
|
|
74
79
|
content: none;
|
|
75
80
|
}
|
|
76
81
|
:host .disabled ::slotted(*:hover) {
|
|
77
82
|
cursor: not-allowed;
|
|
83
|
+
color: var(--tds-navigation-tabs-tab-color-disabled);
|
|
78
84
|
}
|
|
79
85
|
:host .disabled ::slotted(*:focus-visible) {
|
|
80
86
|
outline: none;
|
|
@@ -65,13 +65,23 @@
|
|
|
65
65
|
:host .scroll-left-button:active {
|
|
66
66
|
background-color: var(--tds-folder-tabs-scroll-btn-background-active);
|
|
67
67
|
}
|
|
68
|
-
:host .scroll-right-button:focus,
|
|
69
|
-
:host .scroll-left-button:focus {
|
|
68
|
+
:host .scroll-right-button:focus::before,
|
|
69
|
+
:host .scroll-left-button:focus::before {
|
|
70
|
+
content: "";
|
|
71
|
+
position: absolute;
|
|
72
|
+
left: 3px;
|
|
73
|
+
right: 3px;
|
|
74
|
+
top: 3px;
|
|
75
|
+
bottom: 3px;
|
|
70
76
|
outline: 2px solid var(--tds-focus-outline-color);
|
|
71
77
|
box-shadow: 0 0 0 1px var(--tds-white);
|
|
72
78
|
outline-offset: 1px;
|
|
73
79
|
z-index: 1;
|
|
74
80
|
}
|
|
81
|
+
:host .scroll-right-button:focus,
|
|
82
|
+
:host .scroll-left-button:focus {
|
|
83
|
+
outline: 0;
|
|
84
|
+
}
|
|
75
85
|
:host .scroll-right-button svg,
|
|
76
86
|
:host .scroll-left-button svg {
|
|
77
87
|
fill: var(--tds-folder-tabs-scroll-btn-color);
|
|
@@ -199,7 +199,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
199
199
|
this.handleFocus = (event) => {
|
|
200
200
|
this.open = true;
|
|
201
201
|
this.filterFocus = true;
|
|
202
|
-
if (this.
|
|
202
|
+
if (this.inputElement) {
|
|
203
203
|
this.inputElement.value = '';
|
|
204
204
|
}
|
|
205
205
|
this.tdsFocus.emit(event);
|
|
@@ -525,9 +525,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
525
525
|
// Generate unique IDs for associating labels and helpers with the input/button
|
|
526
526
|
const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
|
|
527
527
|
const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
|
|
528
|
-
return (h(Host, { key: '
|
|
528
|
+
return (h(Host, { key: '2d22e0fc03ce6838f753f1d19d6af8070d612626', class: {
|
|
529
529
|
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
|
|
530
|
-
} }, this.label && this.labelPosition === 'outside' && (h("div", { key: '
|
|
530
|
+
} }, this.label && this.labelPosition === 'outside' && (h("div", { key: '04293570a4db1178efd4274cf8ec3afadc591b56', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'cfa21f047c6978ed941e87de33daffb2551babe8', class: {
|
|
531
531
|
'dropdown-select': true,
|
|
532
532
|
[this.size]: true,
|
|
533
533
|
'disabled': this.disabled,
|
|
@@ -575,7 +575,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
575
575
|
label-inside-as-placeholder
|
|
576
576
|
${this.size}
|
|
577
577
|
${this.selectedOptions.length ? 'selected' : ''}
|
|
578
|
-
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '
|
|
578
|
+
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '0b612f63c3de29f83c43c6331c0d1df8e7606e01', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
|
|
579
579
|
this.dropdownList = element;
|
|
580
580
|
}, class: {
|
|
581
581
|
'dropdown-list': true,
|
|
@@ -586,11 +586,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
|
|
|
586
586
|
'closed': !this.open,
|
|
587
587
|
[`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
|
|
588
588
|
[`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
|
|
589
|
-
} }, h("slot", { key: '
|
|
589
|
+
} }, h("slot", { key: '903020684ba2d64255b7f0d65c58ce16f1460405', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '7489340633f37a28944dd2077d2c3c7f6716427a', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'b300011165a486d9dfa92f5f441a5acd0cc838aa', id: helperId, class: {
|
|
590
590
|
helper: true,
|
|
591
591
|
error: this.error,
|
|
592
592
|
disabled: this.disabled,
|
|
593
|
-
} }, this.error && h("tds-icon", { key: '
|
|
593
|
+
} }, this.error && h("tds-icon", { key: '2524b365c32aa92eb5a5d16988585bf922e569a8', name: "error", size: "16px" }), this.helper))));
|
|
594
594
|
}
|
|
595
595
|
get host() { return this; }
|
|
596
596
|
static get watchers() { return {
|
|
@@ -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 {
|