@uh-design-system/component-library 0.4.0 → 0.4.2
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/component-library.cjs.js +3 -3
- package/dist/cjs/controlUtils-041de0fd.js +7 -0
- package/dist/cjs/ds-accordion_3.cjs.entry.js +27 -20
- package/dist/cjs/ds-checkbox-group.cjs.entry.js +156 -0
- package/dist/cjs/ds-checkbox.cjs.entry.js +153 -0
- package/dist/cjs/ds-input-validity.cjs.entry.js +38 -0
- package/dist/cjs/ds-link-with-arrow.cjs.entry.js +8 -7
- package/dist/cjs/ds-link.cjs.entry.js +11 -8
- package/dist/cjs/ds-text-input.cjs.entry.js +30 -6
- package/dist/cjs/ds-visually-hidden.cjs.entry.js +2 -2
- package/dist/cjs/{index-bfa0f441.js → index-b2bddcf4.js} +326 -125
- package/dist/cjs/{linkUtils-695da37c.js → linkUtils-e911e899.js} +10 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/utils-c9113835.js +18 -0
- package/dist/collection/accessibility/accessibility.stories.js +10 -0
- package/dist/collection/accessibility/stories/ariaLabel.stories.js +19 -0
- package/dist/collection/accessibility/stories/ariaLabelledBy.stories.js +49 -0
- package/dist/collection/accessibility/stories/naming.stories.js +39 -0
- package/dist/collection/collection-manifest.json +4 -1
- package/dist/collection/components/00-foundations/icons/categories/information.js +4 -0
- package/dist/collection/components/00-foundations/typography/stories/typography.stories.js +133 -48
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css +1 -1
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js +6 -6
- package/dist/collection/components/01-base-components/ds-button/ds-button.css +9 -9
- package/dist/collection/components/01-base-components/ds-button/ds-button.js +2 -2
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js +53 -12
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js +88 -55
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.stories.js +1 -1
- package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.css +144 -0
- package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.js +429 -0
- package/dist/collection/components/01-base-components/ds-checkbox/stories/ds-checkbox.features.stories.js +115 -0
- package/dist/collection/components/01-base-components/ds-checkbox/stories/ds-checkbox.stories.js +37 -0
- package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.css +38 -0
- package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.js +445 -0
- package/dist/collection/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.features.stories.js +89 -0
- package/dist/collection/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.stories.js +47 -0
- package/dist/collection/components/01-base-components/ds-icon/ds-icon.js +1 -1
- package/dist/collection/components/01-base-components/ds-icon/{ds-icon.stories.js → stories/ds-icon.stories.js} +12 -2
- package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css +31 -0
- package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js +114 -0
- package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.features.stories.js +17 -0
- package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.stories.js +21 -0
- package/dist/collection/components/01-base-components/ds-link/ds-link.css +19 -139
- package/dist/collection/components/01-base-components/ds-link/ds-link.js +68 -8
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.examples.stories.js +6 -2
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.features.stories.js +2 -2
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.stories.js +15 -4
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css +1 -139
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js +25 -5
- package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.examples.stories.js → ds-link-with-arrow.examples.stories.js} +26 -3
- package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.stories.js → ds-link-with-arrow.stories.js} +5 -4
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css +8 -11
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js +30 -5
- package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.js +29 -7
- package/dist/collection/components/01-base-components/ds-text-input/utils.js +0 -6
- package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js +1 -1
- package/dist/collection/utils/controls/controlUtils.js +2 -0
- package/dist/collection/utils/link/linkUtils.js +9 -0
- package/dist/collection/utils/typography/typographyUtils.js +39 -0
- package/dist/collection/utils/utils.js +24 -6
- package/dist/component-library/component-library.css +1 -1
- package/dist/component-library/component-library.esm.js +1 -1
- package/dist/component-library/controlUtils-9ca4087b.js +1 -0
- package/dist/component-library/ds-accordion_3.entry.js +1 -1
- package/dist/component-library/ds-checkbox-group.entry.js +1 -0
- package/dist/component-library/ds-checkbox.entry.js +1 -0
- package/dist/component-library/ds-input-validity.entry.js +1 -0
- package/dist/component-library/ds-link-with-arrow.entry.js +1 -1
- package/dist/component-library/ds-link.entry.js +1 -1
- package/dist/component-library/ds-text-input.entry.js +1 -1
- package/dist/component-library/ds-visually-hidden.entry.js +1 -1
- package/dist/component-library/index-50783b0c.js +2 -0
- package/dist/component-library/{linkUtils-3d1b28cf.js → linkUtils-fe63ff72.js} +1 -1
- package/dist/component-library/utils-b5843ae1.js +1 -0
- package/dist/components/attributes.js +1 -80
- package/dist/components/controlUtils.js +4 -0
- package/dist/components/ds-accordion.js +8 -8
- package/dist/components/ds-button2.js +4 -3
- package/dist/components/ds-checkbox-group.d.ts +11 -0
- package/dist/components/ds-checkbox-group.js +206 -0
- package/dist/components/ds-checkbox.d.ts +11 -0
- package/dist/components/ds-checkbox.js +6 -0
- package/dist/components/ds-checkbox2.js +185 -0
- package/dist/components/ds-icon2.js +24 -4
- package/dist/components/ds-input-validity.d.ts +11 -0
- package/dist/components/ds-input-validity.js +6 -0
- package/dist/components/ds-input-validity2.js +59 -0
- package/dist/components/ds-link-with-arrow.js +10 -8
- package/dist/components/ds-link.js +15 -9
- package/dist/components/ds-text-input.js +30 -7
- package/dist/components/ds-visually-hidden2.js +1 -1
- package/dist/components/index2.js +298 -130
- package/dist/components/index3.js +80 -0
- package/dist/components/linkUtils.js +10 -1
- package/dist/esm/component-library.js +4 -4
- package/dist/esm/controlUtils-9ca4087b.js +4 -0
- package/dist/esm/ds-accordion_3.entry.js +25 -18
- package/dist/esm/ds-checkbox-group.entry.js +152 -0
- package/dist/esm/ds-checkbox.entry.js +149 -0
- package/dist/esm/ds-input-validity.entry.js +34 -0
- package/dist/esm/ds-link-with-arrow.entry.js +8 -7
- package/dist/esm/ds-link.entry.js +11 -8
- package/dist/esm/ds-text-input.entry.js +30 -6
- package/dist/esm/ds-visually-hidden.entry.js +2 -2
- package/dist/esm/{index-42701395.js → index-50783b0c.js} +326 -126
- package/dist/esm/{linkUtils-3d1b28cf.js → linkUtils-fe63ff72.js} +10 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/utils-b5843ae1.js +15 -0
- package/dist/types/accessibility/accessibility.stories.d.ts +3 -0
- package/dist/types/accessibility/stories/ariaLabel.stories.d.ts +5 -0
- package/dist/types/accessibility/stories/ariaLabelledBy.stories.d.ts +4 -0
- package/dist/types/accessibility/stories/naming.stories.d.ts +4 -0
- package/dist/types/components/00-foundations/typography/stories/typography.stories.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts +2 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts +4 -1
- package/dist/types/components/01-base-components/ds-checkbox/ds-checkbox.d.ts +49 -0
- package/dist/types/components/01-base-components/ds-checkbox/stories/ds-checkbox.features.stories.d.ts +13 -0
- package/dist/types/components/01-base-components/ds-checkbox/stories/ds-checkbox.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-checkbox-group/ds-checkbox-group.d.ts +56 -0
- package/dist/types/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.features.stories.d.ts +11 -0
- package/dist/types/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-icon/{ds-icon.stories.d.ts → stories/ds-icon.stories.d.ts} +2 -1
- package/dist/types/components/01-base-components/ds-input-validity/ds-input-validity.d.ts +12 -0
- package/dist/types/components/01-base-components/ds-input-validity/stories/ds-input-validity.features.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-input-validity/stories/ds-input-validity.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-link/ds-link.d.ts +4 -1
- package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-text-input/ds-text-input.d.ts +5 -0
- package/dist/types/components/01-base-components/ds-text-input/utils.d.ts +0 -1
- package/dist/types/components.d.ts +142 -2
- package/dist/types/utils/controls/controlUtils.d.ts +2 -0
- package/dist/types/utils/link/linkUtils.d.ts +1 -0
- package/dist/types/utils/typography/typographyUtils.d.ts +5 -0
- package/dist/types/utils/utils.d.ts +10 -3
- package/package.json +19 -18
- package/dist/cjs/utils-8b73aa91.js +0 -10
- package/dist/collection/components/00-foundations/typography/typography.stories.js +0 -68
- package/dist/component-library/index-42701395.js +0 -2
- package/dist/component-library/utils-cca2a41a.js +0 -1
- package/dist/components/utils.js +0 -8
- package/dist/esm/utils-cca2a41a.js +0 -8
- package/dist/types/components/00-foundations/typography/typography.stories.d.ts +0 -7
- /package/dist/cjs/{attributes-f7831329.js → attributes-5f5b58be.js} +0 -0
- /package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.features.stories.js → ds-link-with-arrow.features.stories.js} +0 -0
- /package/dist/collection/utils/{attributes.js → attributes/attributes.js} +0 -0
- /package/dist/component-library/{attributes-9419ac39.js → attributes-7d09be1b.js} +0 -0
- /package/dist/esm/{attributes-9419ac39.js → attributes-7d09be1b.js} +0 -0
- /package/dist/types/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.examples.stories.d.ts → ds-link-with-arrow.examples.stories.d.ts} +0 -0
- /package/dist/types/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.features.stories.d.ts → ds-link-with-arrow.features.stories.d.ts} +0 -0
- /package/dist/types/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.stories.d.ts → ds-link-with-arrow.stories.d.ts} +0 -0
- /package/dist/types/utils/{attributes.d.ts → attributes/attributes.d.ts} +0 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { r as registerInstance, g as getElement, h, F as Fragment } from './index-50783b0c.js';
|
|
2
|
+
import { c as classNames } from './index-72ac5051.js';
|
|
3
|
+
|
|
4
|
+
const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-textColor-danger)}.ds-input-validity--success{color:var(--ds-textColor-success)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}";
|
|
5
|
+
const DsInputValidityStyle0 = dsInputValidityCss;
|
|
6
|
+
|
|
7
|
+
const DsInputValidity = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
registerInstance(this, hostRef);
|
|
10
|
+
}
|
|
11
|
+
get el() { return getElement(this); }
|
|
12
|
+
text;
|
|
13
|
+
type = 'error';
|
|
14
|
+
validityRole = 'status';
|
|
15
|
+
identifier;
|
|
16
|
+
componentDidLoad() {
|
|
17
|
+
this.identifier = this.el.getAttribute('id');
|
|
18
|
+
this.el.removeAttribute('id');
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
const classes = classNames('ds-input-validity', {
|
|
22
|
+
'ds-input-validity--error': this.type === 'error',
|
|
23
|
+
'ds-input-validity--success': this.type === 'success',
|
|
24
|
+
});
|
|
25
|
+
const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
|
|
26
|
+
if (!this.text) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
return (h(Fragment, null, this.text && (h("div", { class: classes, role: this.validityRole }, h("ds-icon", { name: icon }), h("small", { id: this.identifier }, this.text)))));
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
DsInputValidity.style = DsInputValidityStyle0;
|
|
33
|
+
|
|
34
|
+
export { DsInputValidity as ds_input_validity };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { r as registerInstance, g as getElement, h } from './index-
|
|
1
|
+
import { r as registerInstance, g as getElement, h } from './index-50783b0c.js';
|
|
2
2
|
import { c as classNames } from './index-72ac5051.js';
|
|
3
|
-
import { i as inheritAriaAttributes } from './attributes-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
3
|
+
import { i as inheritAriaAttributes } from './attributes-7d09be1b.js';
|
|
4
|
+
import { o as opensInNewTab, v as visuallyHiddenAssistiveText, g as getAriaLabel } from './linkUtils-fe63ff72.js';
|
|
5
|
+
import { i as idGenerator } from './utils-b5843ae1.js';
|
|
6
6
|
|
|
7
|
-
const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:
|
|
7
|
+
const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";
|
|
8
8
|
const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
|
|
9
9
|
|
|
10
10
|
const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
|
|
@@ -22,8 +22,9 @@ const DsLinkWithArrow = class {
|
|
|
22
22
|
href;
|
|
23
23
|
target;
|
|
24
24
|
language;
|
|
25
|
+
linkAriaLabel;
|
|
25
26
|
componentWillLoad() {
|
|
26
|
-
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
27
|
+
this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
|
|
27
28
|
if (opensInNewTab(this.target)) {
|
|
28
29
|
this.icon = 'arrow_outward';
|
|
29
30
|
this.rel = 'noopener noreferrer';
|
|
@@ -35,7 +36,7 @@ const DsLinkWithArrow = class {
|
|
|
35
36
|
'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
|
|
36
37
|
'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
|
|
37
38
|
});
|
|
38
|
-
return (h("a", { key: '
|
|
39
|
+
return (h("a", { key: '5f43cc989011db22bd8f547957c76289e7bbbf45', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.linkAriaLabel), ...this.inheritedAttributes }, h("slot", { key: '26615467438d0ae98a8138165cf5152796f2ab00', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'f34a2d05ed9c991e98aaa89f547bde0c1b677115', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: 'be1ccadeaca632961ed3d44d1d94a26bf35d2963', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '7bccce249754d661d9faeddbad2f9c4d8c207cfb', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '4e864244ee939591f435715889e2f9a240f86d36', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
|
|
39
40
|
}
|
|
40
41
|
};
|
|
41
42
|
DsLinkWithArrow.style = DsLinkWithArrowStyle0;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { r as registerInstance, g as getElement, h } from './index-
|
|
1
|
+
import { r as registerInstance, g as getElement, h } from './index-50783b0c.js';
|
|
2
2
|
import { c as classNames } from './index-72ac5051.js';
|
|
3
|
-
import { i as inheritAriaAttributes } from './attributes-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
3
|
+
import { i as inheritAriaAttributes } from './attributes-7d09be1b.js';
|
|
4
|
+
import { o as opensInNewTab, v as visuallyHiddenAssistiveText, g as getAriaLabel } from './linkUtils-fe63ff72.js';
|
|
5
|
+
import { i as idGenerator } from './utils-b5843ae1.js';
|
|
6
6
|
|
|
7
|
-
const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:
|
|
7
|
+
const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-textColor-link);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";
|
|
8
8
|
const DsLinkStyle0 = dsLinkCss;
|
|
9
9
|
|
|
10
10
|
const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
|
|
@@ -22,12 +22,15 @@ const DsLink = class {
|
|
|
22
22
|
weight = 'regular';
|
|
23
23
|
icon = '';
|
|
24
24
|
iconPosition = 'end';
|
|
25
|
+
iconTitle;
|
|
26
|
+
iconHidden;
|
|
25
27
|
href;
|
|
26
28
|
target;
|
|
27
29
|
download;
|
|
28
30
|
language;
|
|
31
|
+
linkAriaLabel;
|
|
29
32
|
componentWillLoad() {
|
|
30
|
-
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
33
|
+
this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
|
|
31
34
|
if (opensInNewTab(this.target)) {
|
|
32
35
|
this.icon = 'open_in_new';
|
|
33
36
|
this.iconPosition = 'end';
|
|
@@ -36,13 +39,13 @@ const DsLink = class {
|
|
|
36
39
|
}
|
|
37
40
|
render() {
|
|
38
41
|
const classes = classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
|
|
39
|
-
[`
|
|
42
|
+
[`ds-link--${this.size}`]: Boolean(this.size),
|
|
40
43
|
});
|
|
41
44
|
const iconClasses = classNames('ds-link__icon', {
|
|
42
45
|
[`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
|
|
43
46
|
[`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
|
|
44
47
|
});
|
|
45
|
-
return (h("a", { key: '
|
|
48
|
+
return (h("a", { key: '92b52d7b61888dd8d39841afe9823286356ec231', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.linkAriaLabel), ...this.inheritedAttributes }, h("slot", { key: '9125a3b98ed37f1e71a922a071c07f2ad270a661', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '5d08c8501703a7d8cf4bb3386d6368047e75f8fe', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: '6bd3f8fda1ad927ceba8612503dddabb188be692', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'e6b7de1ca80eb3485083f5ff1902ebf66821c707', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'b7ffb5a0cfa2e02ef793150bd9ea6886e02c7cac', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
|
|
46
49
|
}
|
|
47
50
|
};
|
|
48
51
|
DsLink.style = DsLinkStyle0;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { r as registerInstance, h, F as Fragment } from './index-
|
|
1
|
+
import { r as registerInstance, g as getElement, h, F as Fragment } from './index-50783b0c.js';
|
|
2
2
|
import { c as classNames } from './index-72ac5051.js';
|
|
3
|
-
import { i as idGenerator } from './utils-
|
|
3
|
+
import { i as idGenerator } from './utils-b5843ae1.js';
|
|
4
|
+
import { g as getRequiredText, a as getOptionalText } from './controlUtils-9ca4087b.js';
|
|
4
5
|
|
|
5
|
-
const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input--label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input--label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-input--label-container.sc-ds-text-input
|
|
6
|
+
const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input--label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input--label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-input--label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.ds-input--container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-input--container.sc-ds-text-input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-input--container.sc-ds-text-input:has(input:active){outline:none}.ds-input--container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-borderColor-default)}.ds-input--container.active.sc-ds-text-input:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid).sc-ds-text-input{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-input--container.sc-ds-text-input:hover:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.active.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid.sc-ds-text-input,.ds-input--container.sc-ds-text-input:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-input--container.sc-ds-text-input:focus-within:not(.ds-input--container:focus-within.invalid,.ds-input--container.sc-ds-text-input:focus-within.valid,.ds-input--container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-borderColor-primary)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input--container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-appearance:textfield}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.ds-input--container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input-s>[slot=prefix],.ds-input--container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";
|
|
6
7
|
const DsTextInputStyle0 = dsTextInputCss;
|
|
7
8
|
|
|
8
9
|
const INPUT_TYPE_ICONS_MAP = {
|
|
@@ -12,6 +13,7 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
|
|
|
12
13
|
search: ({ clearButtonVisible }) => (clearButtonVisible ? 'cancel_fill' : ''),
|
|
13
14
|
password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
|
|
14
15
|
};
|
|
16
|
+
const inputIdGenerator = idGenerator('ds-input');
|
|
15
17
|
const assistiveTextIdGenerator = idGenerator('ds-assistive-text');
|
|
16
18
|
const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
|
|
17
19
|
const successTextIdGenerator = idGenerator('success-text');
|
|
@@ -26,9 +28,12 @@ const DsTextInput = class {
|
|
|
26
28
|
visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
|
|
27
29
|
successTextId = successTextIdGenerator.next().value;
|
|
28
30
|
errorTextId = errorTextIdGenerator.next().value;
|
|
31
|
+
hasPrefixSlot = false;
|
|
32
|
+
hasSuffixSlot = false;
|
|
33
|
+
get el() { return getElement(this); }
|
|
29
34
|
label;
|
|
30
35
|
placeholder;
|
|
31
|
-
dsId =
|
|
36
|
+
dsId = inputIdGenerator.next().value;
|
|
32
37
|
name;
|
|
33
38
|
disabled;
|
|
34
39
|
optional;
|
|
@@ -65,6 +70,19 @@ const DsTextInput = class {
|
|
|
65
70
|
this.inputElement.focus();
|
|
66
71
|
this.clearButtonVisible = false;
|
|
67
72
|
}
|
|
73
|
+
getLabelText = () => {
|
|
74
|
+
if (this.required) {
|
|
75
|
+
return getRequiredText(this.label);
|
|
76
|
+
}
|
|
77
|
+
if (this.optional) {
|
|
78
|
+
return getOptionalText(this.label, this.optionalText);
|
|
79
|
+
}
|
|
80
|
+
return this.label;
|
|
81
|
+
};
|
|
82
|
+
componentWillLoad() {
|
|
83
|
+
this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
|
|
84
|
+
this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
|
|
85
|
+
}
|
|
68
86
|
onActionButtonClicked = (e) => {
|
|
69
87
|
e.stopPropagation();
|
|
70
88
|
switch (this.type) {
|
|
@@ -84,6 +102,9 @@ const DsTextInput = class {
|
|
|
84
102
|
return (h("slot", { name: className }, text && (h("div", { class: `${className}--container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
|
|
85
103
|
}
|
|
86
104
|
renderPrefixContent() {
|
|
105
|
+
if (this.hasPrefixSlot) {
|
|
106
|
+
return h("slot", { name: "prefix" });
|
|
107
|
+
}
|
|
87
108
|
if (this.prefixText) {
|
|
88
109
|
return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.prefixText)));
|
|
89
110
|
}
|
|
@@ -94,6 +115,9 @@ const DsTextInput = class {
|
|
|
94
115
|
return null;
|
|
95
116
|
}
|
|
96
117
|
renderSuffixContent() {
|
|
118
|
+
if (this.hasSuffixSlot) {
|
|
119
|
+
return h("slot", { name: "suffix" });
|
|
120
|
+
}
|
|
97
121
|
if (this.suffixText) {
|
|
98
122
|
return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.suffixText)));
|
|
99
123
|
}
|
|
@@ -111,14 +135,14 @@ const DsTextInput = class {
|
|
|
111
135
|
}
|
|
112
136
|
render() {
|
|
113
137
|
const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
|
|
114
|
-
return (h(Fragment, { key: '
|
|
138
|
+
return (h(Fragment, { key: '4d3ad7cc3f0d7c6aba4bcb8e5b05d0794b614f32' }, h("div", { key: '1cad6e50d1a9c0f4214824d1ff46a8418a095790', class: "ds-input--label-container" }, h("slot", { key: '67d096bb1eecd6ac492a5dcd14bd6f9bda21eb2c', name: "label" }, h("label", { key: 'cfffb9b06f2122dd80e4ad94831ca69b71e5a0de', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: '2256dfda0cf19eae50307b9badc2a2a97d9e190b', name: "help-text" }, h("small", { key: 'b9496a9afec60a4a64a0ff66505a7572362387ac', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '23026b2453728e607802aabb7760f07229edeb7c', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: '161a4d4eed706c5fd6ba2af90029e68b1c6b95c9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
|
|
115
139
|
disabled: this.disabled,
|
|
116
140
|
readonly: this.readonly,
|
|
117
141
|
valid: !!this.successText,
|
|
118
142
|
invalid: !!this.errorText,
|
|
119
143
|
focus: this.hasFocus,
|
|
120
144
|
active: !!this.inputActive,
|
|
121
|
-
}) }, this.renderPrefixContent(), h("input", { key: '
|
|
145
|
+
}) }, this.renderPrefixContent(), h("input", { key: 'a04e9ed4de86a65290206ca62efde1c27d76aa80', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
|
|
122
146
|
classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
|
|
123
147
|
[this.successTextId]: this.successText,
|
|
124
148
|
[this.errorTextId]: this.errorText,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-50783b0c.js';
|
|
2
2
|
|
|
3
3
|
const dsVisuallyHiddenCss = ":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
4
4
|
const DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
|
|
@@ -8,7 +8,7 @@ const DsVisuallyHidden = class {
|
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h("slot", { key: '
|
|
11
|
+
return (h("slot", { key: '4307602964aa15c8d3f4fb0f4b89188cf0a8b55e' }));
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
|