@uh-design-system/component-library 0.4.0 → 0.4.1

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js

@@ -0,0 +1,114 @@
+import { Fragment, h } from "@stencil/core";
+import classNames from "classnames";
+export class DsInputValidity {
+    el;
+    text;
+    type = 'error';
+    role = 'status';
+    identifier;
+    componentDidLoad() {
+        this.identifier = this.el.getAttribute('id');
+        this.el.removeAttribute('id');
+    }
+    render() {
+        const classes = classNames('ds-input-validity', {
+            'ds-input-validity--error': this.type === 'error',
+            'ds-input-validity--success': this.type === 'success',
+        });
+        const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
+        if (!this.text) {
+            return null;
+        }
+        return (h(Fragment, null, this.text && (h("div", { class: classes, role: this.role }, h("ds-icon", { name: icon }), h("small", { id: this.identifier }, this.text)))));
+    }
+    static get is() { return "ds-input-validity"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-input-validity.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-input-validity.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputValidityType",
+                    "resolved": "\"error\" | \"success\"",
+                    "references": {
+                        "InputValidityType": {
+                            "location": "global",
+                            "id": "global::InputValidityType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'error'"
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputValidityRole",
+                    "resolved": "\"alert\" | \"status\"",
+                    "references": {
+                        "InputValidityRole": {
+                            "location": "global",
+                            "id": "global::InputValidityRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "role",
+                "reflect": false,
+                "defaultValue": "'status'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "identifier": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.features.stories.js

@@ -0,0 +1,17 @@
+const meta = {
+    title: 'Base Components/InputValidity/Features',
+    component: 'ds-input-validity',
+};
+export default meta;
+export const Error = {
+    args: {
+        text: 'Link text',
+        type: 'error'
+    },
+};
+export const Success = {
+    args: {
+        text: 'Link text',
+        type: 'success',
+    },
+};

package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.stories.js

@@ -0,0 +1,21 @@
+const meta = {
+    title: 'Base Components/InputValidity',
+    component: 'ds-input-validity',
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Error text',
+        type: 'error',
+    },
+};
+export const Playground = {
+    args: {
+        text: 'Error text',
+        type: 'error',
+    },
+    argTypes: {
+        text: { control: 'text' },
+        type: { control: 'select', options: ['error', 'success'] },
+    },
+};

package/dist/collection/components/01-base-components/ds-link/ds-link.css

@@ -161,7 +161,7 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link:focus-visible, .ds-link:focus-within {
+.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);
@@ -174,6 +174,24 @@
 .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;

package/dist/collection/components/01-base-components/ds-link/ds-link.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes } from "../../../utils/attributes";
-import { idGenerator } from "../ds-text-input/utils";
-import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { getAriaLabel, opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { idGenerator } from "../../../utils/utils";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 export class DsLink {
     inheritedAttributes = {};
@@ -15,12 +15,15 @@ export class DsLink {
     weight = 'regular';
     icon = '';
     iconPosition = 'end';
+    iconTitle;
+    iconHidden;
     href;
     target;
     download;
     language;
+    ariaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
         if (opensInNewTab(this.target)) {
             this.icon = 'open_in_new';
             this.iconPosition = 'end';
@@ -29,13 +32,13 @@ export class DsLink {
     }
     render() {
         const classes = classNames('ds-link', `ds-link--${this.weight}`, `ds-link--${this.variant}`, {
-            [`bodyText--${this.size}`]: Boolean(this.size),
+            [`ds-link--${this.size}`]: Boolean(this.size),
         });
         const iconClasses = classNames('ds-link__icon', {
             [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
             [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
         });
-        return (h("a", { key: 'd8922731378178b2c927796fdc636fc26d4cbaea', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, h("slot", { key: 'dfbd079b80132f7751501da7e47bb0f1aec4590a', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '2b3d864df8c04b340b0251c9ac185be918f7bb16', name: this.icon, class: iconClasses, size: "1em" })), this.text, h("slot", { key: '2fc2e4a3be8b83d545b27ae19096ffc5fbb72c0e', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '9592ce7c0222bd3c739943fb9b6a37b92e67618c', name: this.icon, class: iconClasses, size: "1em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '43c55dded281f4e3a084ceb64edf695707309494', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: '8ac4ff399eabfbe264f031b0cf7192ee1f9f2725', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '2301357ed75faeb5037c71f5da4fb8c3f8c76b6d', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '2d478d2cf110107d5ea31b1ea44b4904377d686b', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, h("slot", { key: 'a132464b8b41499c2f8b9da6f22f09d133d86219', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '5fff8019a4d810e4b686f09e204cf457783d1907', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'cc773ec9fb38d1aa042f812187389e75aab511b2', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -59,8 +62,8 @@ export class DsLink {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -189,6 +192,44 @@ export class DsLink {
                 "reflect": false,
                 "defaultValue": "'end'"
             },
+            "iconTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-title",
+                "reflect": false
+            },
+            "iconHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-hidden",
+                "reflect": false
+            },
             "href": {
                 "type": "string",
                 "mutable": false,
@@ -274,6 +315,25 @@ export class DsLink {
                 "setter": false,
                 "attribute": "lang",
                 "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/01-base-components/ds-link/stories/ds-link.examples.stories.js

@@ -19,15 +19,18 @@ export const Back = {
         text: 'Back',
         href: '#',
         icon: 'arrow_back',
-        iconPosition: 'start'
+        iconPosition: 'start',
+        iconTitle: 'Arrow back',
     }
 };
 export const Download = {
     args: {
-        text: 'Link to download a file',
+        text: 'Brand book (pdf)',
         href: '#',
         icon: 'download',
         iconPosition: 'start',
+        iconTitle: 'Download',
+        iconHidden: false,
         variant: 'standalone',
         size: 'xLarge',
         weight: 'semibold',
@@ -39,6 +42,7 @@ export const StandaloneBoldLinkWithIcon = {
         text: 'Standalone bold link with icon',
         href: '#',
         icon: 'arrow_forward',
+        iconTitle: 'Arrow forward',
         variant: 'standalone',
         size: '2xLarge',
         weight: 'bold'

package/dist/collection/components/01-base-components/ds-link/stories/ds-link.features.stories.js

@@ -66,8 +66,8 @@ export const OpensInANewTab = {
 export const IconPosition = {
     render: () => html `
     <div>
-      <div><ds-link href="#" text="Link text" icon="download" icon-position="start"></ds-link></div>
-      <div><ds-link href="#" text="Link text" icon="download" icon-position="end"></ds-link></div>
+      <div><ds-link href="#" text="Link text" icon="download" icon-position="start" icon-title="Download icon"></ds-link></div>
+      <div><ds-link href="#" text="Link text" icon="download" icon-position="end" icon-title="Download icon"></ds-link></div>
     </div>
   `
 };

package/dist/collection/components/01-base-components/ds-link/stories/ds-link.stories.js

@@ -1,16 +1,18 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const anchorAriaAttributes = [
     'aria-current',
-    'aria-describedby',
     'aria-haspopup',
     'aria-label',
-    'aria-labelledby'
 ];
 const anchorAriaAttributeArgTypes = getAriaAttributeArgTypes(anchorAriaAttributes);
 const meta = {
     title: 'Base Components/Link',
     component: 'ds-link',
+    argTypes: {
+        text: { control: 'text' },
+        href: { control: 'text' },
+    }
 };
 export default meta;
 export const Default = {
@@ -60,6 +62,12 @@ export const Playground = {
             control: 'select',
             options: ['start', 'end'],
         },
+        iconTitle: {
+            control: 'text',
+        },
+        iconHidden: {
+            control: 'boolean',
+        },
         download: {
             control: 'boolean'
         },

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css

@@ -157,7 +157,7 @@
   font-size: var(--ds-fontSize-16);
   text-decoration-line: none;
 }
-.ds-link-with-arrow:focus-visible, .ds-link-with-arrow:focus-within {
+.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);

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes } from "../../../utils/attributes";
-import { idGenerator } from "../ds-text-input/utils";
-import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { getAriaLabel, opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { idGenerator } from "../../../utils/utils";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 export class DsLinkWithArrow {
     inheritedAttributes = {};
@@ -15,8 +15,9 @@ export class DsLinkWithArrow {
     href;
     target;
     language;
+    ariaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
         if (opensInNewTab(this.target)) {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
@@ -28,7 +29,7 @@ export class DsLinkWithArrow {
             'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
         });
-        return (h("a", { key: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: 'a5773a53bca7c886919e79f668604db1b97f825b', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, h("slot", { key: '2205bd5ee34150f491824520278b8de44d73f44f', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: '56402edf3a1e50da213931530318f58bc5288b3b', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '5df46dff1abe8821533b0c09be9987ce32ea135c', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: 'a5c9a78865619a1bebbb0e3587466b2b77160c0c', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '9222ab3fd72b597b314e5bdb97b4467ec5ec41a9', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "shadow"; }
@@ -154,6 +155,25 @@ export class DsLinkWithArrow {
                 "setter": false,
                 "attribute": "lang",
                 "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }

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}

@@ -1,6 +1,7 @@
 import { expect } from "@storybook/test";
 import { html } from "lit";
 import { getShadowRoot } from "../../../../utils/tests/testUtils";
+import { litTemplateResultToString } from "../../../../utils/utils";
 const meta = {
     title: 'Base Components/LinkWithArrow/Examples',
     component: 'ds-link-with-arrow',
@@ -24,10 +25,32 @@ export const OpenInANewTab = {
         });
     }
 };
+const iconAtTheEndDOM = html `
+  <div class="ds-sb-icon-at-the-end">
+    <ds-link-with-arrow text="Link with arrow icon" href="#" icon-position="end"></ds-link-with-arrow>
+  </div>
+`;
 export const IconAtTheEnd = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(iconAtTheEndDOM),
+            },
+        },
+    },
     render: () => html `
-    <div style="display: flex; background-color: #F7F7F7; justify-content: end; align-items: end; outline: 1px solid; padding: 1em 0.6em; height: 200px; width: 100%;">
-      <ds-link-with-arrow text="Link with arrow icon" href="#" icon-position="end"></ds-link-with-arrow>
-    </div>
+    <style>
+      .ds-sb-icon-at-the-end {
+        display: flex;
+        background-color: #f7f7f7;
+        justify-content: end;
+        align-items: end;
+        outline: 1px solid;
+        padding: 1em 0.6em;
+        height: 200px;
+        width: 100%;
+      }
+    </style>
+    ${iconAtTheEndDOM}
   `
 };

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.stories.js → ds-link-with-arrow.stories.js}

@@ -1,10 +1,8 @@
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const anchorAriaAttributes = [
     'aria-current',
-    'aria-describedby',
     'aria-haspopup',
     'aria-label',
-    'aria-labelledby'
 ];
 const anchorAriaAttributeArgTypes = getAriaAttributeArgTypes(anchorAriaAttributes);
 const meta = {

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css

@@ -27,16 +27,6 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-input--label-container label.required::after {
-  content: " *";
-  color: var(--ds-textColor-secondary);
-}
-.ds-input--label-container label.optional::after {
-  content: " (" attr(data-optional-text, "optional") ")";
-  color: var(--ds-textColor-secondary);
-  font-size: var(--ds-fontSize-14);
-  font-weight: var(--ds-fontWeight-regular);
-}
 .ds-input--label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -58,7 +48,14 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-input--container:focus-visible, .ds-input--container:focus-within {
+.ds-input--container: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: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);

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -1,6 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
-import { idGenerator } from "./utils";
+import { idGenerator } from "../../../utils/utils";
+import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
 };
@@ -8,6 +9,7 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
     search: ({ clearButtonVisible }) => (clearButtonVisible ? 'cancel_fill' : ''),
     password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
 };
+const inputIdGenerator = idGenerator('ds-input');
 const assistiveTextIdGenerator = idGenerator('ds-assistive-text');
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 const successTextIdGenerator = idGenerator('success-text');
@@ -19,9 +21,12 @@ export class DsTextInput {
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     successTextId = successTextIdGenerator.next().value;
     errorTextId = errorTextIdGenerator.next().value;
+    hasPrefixSlot = false;
+    hasSuffixSlot = false;
+    el;
     label;
     placeholder;
-    dsId = 'input';
+    dsId = inputIdGenerator.next().value;
     name;
     disabled;
     optional;
@@ -58,6 +63,19 @@ export class DsTextInput {
         this.inputElement.focus();
         this.clearButtonVisible = false;
     }
+    getLabelText = () => {
+        if (this.required) {
+            return getRequiredText(this.label);
+        }
+        if (this.optional) {
+            return getOptionalText(this.label, this.optionalText);
+        }
+        return this.label;
+    };
+    componentWillLoad() {
+        this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
+        this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
+    }
     onActionButtonClicked = (e) => {
         e.stopPropagation();
         switch (this.type) {
@@ -77,6 +95,9 @@ export class DsTextInput {
         return (h("slot", { name: className }, text && (h("div", { class: `${className}--container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
     }
     renderPrefixContent() {
+        if (this.hasPrefixSlot) {
+            return h("slot", { name: "prefix" });
+        }
         if (this.prefixText) {
             return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.prefixText)));
         }
@@ -87,6 +108,9 @@ export class DsTextInput {
         return null;
     }
     renderSuffixContent() {
+        if (this.hasSuffixSlot) {
+            return h("slot", { name: "suffix" });
+        }
         if (this.suffixText) {
             return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.suffixText)));
         }
@@ -104,14 +128,14 @@ export class DsTextInput {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: 'fe9d038685d4912e0b760bed83e21a6ae8582535' }, h("div", { key: '4c4a662fcbcbf2c9a04986ad44b018736c8ba0d7', class: "ds-input--label-container" }, h("slot", { key: '8fea3c6a05e3f5314eae43c2f2eeedc47735278a', name: "label" }, h("label", { key: '33aa9fa1ab0eba6c36b0e882d8a71000a2a2ff40', "data-optional-text": this.optionalText, class: classNames({ required: this.required, optional: this.optional }), htmlFor: this.dsId }, this.label)), h("slot", { key: '13f7adf5a85a2f2d8d5f3e7b829ff86707f75a3d', name: "help-text" }, h("small", { key: '3595ee7deb43919aeabb938a2f0cc0ce78ca181d', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '001fd7a38ef2034f7e650e86d00d5a30ee217c17', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'ec9f2c0d6ff40bd6c8a4618ec238e966a0756c19', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
+        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', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: '1cd22b415c330cb50c4c9663f6dec3a1e99e256b', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, 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 ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.successTextId]: this.successText,
                     [this.errorTextId]: this.errorText,
@@ -187,7 +211,7 @@ export class DsTextInput {
                 "setter": false,
                 "attribute": "id",
                 "reflect": false,
-                "defaultValue": "'input'"
+                "defaultValue": "inputIdGenerator.next().value as string"
             },
             "name": {
                 "type": "string",
@@ -701,4 +725,5 @@ export class DsTextInput {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }