@scania/tegel 1.37.1 → 1.38.0-text-field-support-aria-invalid-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/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 +33 -5
- 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/utils/getAriaInvalid.js +27 -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 +33 -5
- 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 +33 -5
- package/dist/tegel/{p-c0b26507.entry.js → p-25f4b4ca.entry.js} +1 -1
- package/dist/tegel/p-3233451c.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/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-dc375d3e.entry.js +0 -1
- package/dist/tegel/p-e3c2b6b4.entry.js +0 -1
|
@@ -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 {
|
|
@@ -6,6 +6,34 @@ const index = require('./index-ca8040ad.js');
|
|
|
6
6
|
const hasSlot = require('./hasSlot-1c90e9ba.js');
|
|
7
7
|
const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Gets the appropriate aria-invalid value for form components.
|
|
11
|
+
*
|
|
12
|
+
* This utility handles cross-framework compatibility by checking for an explicit
|
|
13
|
+
* aria-invalid attribute on the host element first, then falling back to the
|
|
14
|
+
* component's state. It properly handles both string and boolean values that
|
|
15
|
+
* may be passed from different frameworks (especially React).
|
|
16
|
+
*
|
|
17
|
+
* @param host - The host element to check for aria-invalid attribute
|
|
18
|
+
* @param state - The component's state ('error', 'success', 'default')
|
|
19
|
+
* @returns The aria-invalid value as a string ('true' or 'false')
|
|
20
|
+
*
|
|
21
|
+
*/
|
|
22
|
+
const getAriaInvalid = (host, state) => {
|
|
23
|
+
// Check if aria-invalid is explicitly set on the host element
|
|
24
|
+
const hostAriaInvalid = host.getAttribute('aria-invalid');
|
|
25
|
+
if (hostAriaInvalid !== null) {
|
|
26
|
+
// Handle boolean values from React (true/false as strings)
|
|
27
|
+
if (hostAriaInvalid === 'true' || hostAriaInvalid === 'false') {
|
|
28
|
+
return hostAriaInvalid;
|
|
29
|
+
}
|
|
30
|
+
// Handle other string values (convert to string for consistency)
|
|
31
|
+
return String(hostAriaInvalid);
|
|
32
|
+
}
|
|
33
|
+
// Fallback to state-based aria-invalid
|
|
34
|
+
return state === 'error' ? 'true' : 'false';
|
|
35
|
+
};
|
|
36
|
+
|
|
9
37
|
const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);border-top:1px solid transparent;transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
|
|
10
38
|
const TdsTextFieldStyle0 = textFieldCss;
|
|
11
39
|
|
|
@@ -80,7 +108,7 @@ const TdsTextField = class {
|
|
|
80
108
|
var _a;
|
|
81
109
|
const usesPrefixSlot = hasSlot.hasSlot('prefix', this.host);
|
|
82
110
|
const usesSuffixSlot = hasSlot.hasSlot('suffix', this.host);
|
|
83
|
-
return (index.h("div", { key: '
|
|
111
|
+
return (index.h("div", { key: '323df30951c2ee070b043228f78c3045b33e2fc9', class: {
|
|
84
112
|
'form-text-field': true,
|
|
85
113
|
'form-text-field-nomin': this.noMinWidth,
|
|
86
114
|
'text-field-focus': this.focusInput && !this.disabled,
|
|
@@ -98,12 +126,12 @@ const TdsTextField = class {
|
|
|
98
126
|
'form-text-field-sm': this.size === 'sm',
|
|
99
127
|
'form-text-field-error': this.state === 'error',
|
|
100
128
|
'form-text-field-success': this.state === 'success',
|
|
101
|
-
} }, this.labelPosition === 'outside' && (index.h("div", { key: '
|
|
129
|
+
} }, this.labelPosition === 'outside' && (index.h("div", { key: 'fe9768bbf8999dc49f90e096bfd138710a91e7bb', class: "text-field-label-outside" }, index.h("label", { key: '91d39c768b49e7867a87f7fc78b50ec4034c4560', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), index.h("div", { key: 'abb84b67da94a281e986891a00a8bd348ad3b131', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (index.h("div", { key: '4661114d6fe3e809ee7c0254686c9feb55fce6ad', class: {
|
|
102
130
|
'text-field-slot-wrap-prefix': true,
|
|
103
131
|
'text-field-error': this.state === 'error',
|
|
104
132
|
'text-field-success': this.state === 'success',
|
|
105
133
|
'text-field-default': this.state === 'default',
|
|
106
|
-
} }, index.h("slot", { key: '
|
|
134
|
+
} }, index.h("slot", { key: '40aac31a850fb3ad1d703834b578c73a35c9f255', name: "prefix" }))), index.h("div", { key: '1c85331cb4dd7a03527c3730996f07a5d25293d7', class: "text-field-input-container" }, index.h("input", { key: '498c3ae25cc2508c28dd2e5f8483c35adb9f8bb9', ref: (inputEl) => {
|
|
107
135
|
this.textInput = inputEl;
|
|
108
136
|
}, class: {
|
|
109
137
|
'text-field-input': true,
|
|
@@ -118,13 +146,13 @@ const TdsTextField = class {
|
|
|
118
146
|
if (!this.readOnly) {
|
|
119
147
|
this.handleBlur(event);
|
|
120
148
|
}
|
|
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' && (index.h("label", { key: '
|
|
149
|
+
}, "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' && (index.h("label", { key: '41a2f20f416c65fb2d7d9992286f4bc9c9dcc52c', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (index.h("div", { key: '2b7b63efd24c1398d2d40a3d5a48d3003931cff8', class: {
|
|
122
150
|
'text-field-slot-wrap-suffix': true,
|
|
123
151
|
'text-field-error': this.state === 'error',
|
|
124
152
|
'text-field-success': this.state === 'success',
|
|
125
153
|
'text-field-default': this.state === 'default',
|
|
126
154
|
'tds-u-display-none': this.readOnly,
|
|
127
|
-
} }, index.h("slot", { key: '
|
|
155
|
+
} }, index.h("slot", { key: 'b594b47a2ee6bfb393b44c8b704232881e53c119', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (index.h("span", { key: '5a9d4e1492b908a397881a42f9c0229d32e2a457', class: "text-field-icon__readonly" }, index.h("tds-tooltip", { key: '02bb93263fc40d5d6aeb2dda3ad5ac49f2e2ccf6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: 'e926eb2de3946822875badbcc7e325e9981b8271', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), index.h("div", { key: 'ac28d59eb12ef9efe38cd940daf1299b06dd4446', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (index.h("div", { key: 'd1b09c6f543f0e985476b798ee642c6a11cb7485', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (index.h("div", { key: '160ca65e021a3f313b828dbcf82b158036d748ad', class: "text-field-helper-error-state" }, !this.readOnly && index.h("tds-icon", { key: '34bb9eaa6c267d882fc28a9b80fd331523bd981b', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (index.h("span", { key: '6b1ad7dbce2e2fe37e116c1d8f0b11f2dfe00260', class: {
|
|
128
156
|
'text-field-textcounter-divider': true,
|
|
129
157
|
'text-field-textcounter-disabled': this.disabled,
|
|
130
158
|
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
@@ -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);
|
|
@@ -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)))))));
|
|
@@ -0,0 +1,27 @@
|
|
|
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
|
+
// Check if aria-invalid is explicitly set on the host element
|
|
16
|
+
const hostAriaInvalid = host.getAttribute('aria-invalid');
|
|
17
|
+
if (hostAriaInvalid !== null) {
|
|
18
|
+
// Handle boolean values from React (true/false as strings)
|
|
19
|
+
if (hostAriaInvalid === 'true' || hostAriaInvalid === 'false') {
|
|
20
|
+
return hostAriaInvalid;
|
|
21
|
+
}
|
|
22
|
+
// Handle other string values (convert to string for consistency)
|
|
23
|
+
return String(hostAriaInvalid);
|
|
24
|
+
}
|
|
25
|
+
// Fallback to state-based aria-invalid
|
|
26
|
+
return state === 'error' ? 'true' : 'false';
|
|
27
|
+
};
|