@uh-design-system/component-library 0.1.0 → 0.2.0-alpha.0

package/dist/components/ds-text-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsTextInput extends Components.DsTextInput, HTMLElement {}
+export const DsTextInput: {
+    prototype: DsTextInput;
+    new (): DsTextInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-text-input.js

@@ -0,0 +1,200 @@
+import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
+import { c as classNames } from './index3.js';
+import { d as defineCustomElement$4 } from './ds-button2.js';
+import { d as defineCustomElement$3 } from './ds-icon2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
+
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
+}
+
+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}}.label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.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)}.label-container.sc-ds-text-input label.required.sc-ds-text-input::after{content:\" *\";color:var(--ds-textColor-secondary)}.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)}.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)}.input-container.invalid.sc-ds-text-input{background-color:var(--ds-palette-danger-light);border-color:var(--ds-borderColor-danger)}.input-container.valid.sc-ds-text-input{background-color:var(--ds-palette-success-light);border-color:var(--ds-borderColor-success)}.input-container.readonly.sc-ds-text-input,.input-container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.input-container.sc-ds-text-input:has(input:active){outline:none}.input-container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-borderColor-primary)}.input-container.active.sc-ds-text-input:not(.input-container.disabled,.input-container.readonly).sc-ds-text-input{border-color:var(--ds-borderColor-primary)}.input-container.sc-ds-text-input:hover:not(.input-container.disabled,.input-container.readonly.sc-ds-text-input,.input-container.active).sc-ds-text-input{border-color:var(--ds-borderColor-black)}.input-container.sc-ds-text-input:focus-within{outline-width:var(--ds-borderWidth-thin);outline-offset:1px;outline-style:solid;outline-color:var(--ds-palette-black)}.input-container.sc-ds-text-input:focus-within:not(.input-container:focus-within.invalid,.input-container.sc-ds-text-input:focus-within.valid,.input-container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-borderColor-primary)}.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)}.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);padding-block:var(--ds-spacing-4xSmall);border:none}.input-container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.input-container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.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)}.input-container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.input-container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-appearance:textfield}.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.input-container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.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)}.input-container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.input-container.sc-ds-text-input span.prefix.sc-ds-text-input,.input-container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.input-container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.input-container.sc-ds-text-input-s>[slot=prefix],.input-container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.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)}";
+const DsTextInputStyle0 = dsTextInputCss;
+
+const INPUT_TYPE_ICONS_MAP = {
+    search: 'search',
+};
+const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
+    search: ({ clearButtonVisible }) => (clearButtonVisible ? 'cancel_fill' : ''),
+    password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
+};
+const assistiveTextIdGenerator = idGenerator('ds-assistive-text');
+const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
+const successTextIdGenerator = idGenerator('success-text');
+const errorTextIdGenerator = idGenerator('error-text');
+const DsTextInput$1 = /*@__PURE__*/ proxyCustomElement(class DsTextInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.assistiveTextId = assistiveTextIdGenerator.next().value;
+        this.visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+        this.successTextId = successTextIdGenerator.next().value;
+        this.errorTextId = errorTextIdGenerator.next().value;
+        this.onActionButtonClicked = (e) => {
+            e.stopPropagation();
+            switch (this.type) {
+                case 'password':
+                    return this.togglePasswordVisibility();
+                case 'search':
+                    this.clearInput();
+                default:
+                    return;
+            }
+        };
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.id = 'input';
+        this.name = undefined;
+        this.disabled = undefined;
+        this.required = undefined;
+        this.readonly = undefined;
+        this.value = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.maxlength = undefined;
+        this.pattern = undefined;
+        this.autocomplete = undefined;
+        this.errorText = undefined;
+        this.successText = undefined;
+        this.assistiveText = undefined;
+        this.actionButtonAriaLabel = undefined;
+        this.hiddenAssistiveText = undefined;
+        this.prefixText = undefined;
+        this.suffixText = undefined;
+        this.icon = '';
+        this.type = 'text';
+        this.ariaLabel = undefined;
+        this.ariaLabelledBy = undefined;
+        this.ariaDescribedby = undefined;
+        this.hasFocus = false;
+        this.clearButtonVisible = false;
+        this.passwordInputVisible = false;
+        this.inputActive = false;
+    }
+    async togglePasswordVisibility() {
+        return (this.passwordInputVisible = !this.passwordInputVisible);
+    }
+    async clearInput() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+        this.clearButtonVisible = false;
+    }
+    renderValidityMessage(type) {
+        const textId = type === 'success' ? this.successTextId : this.errorTextId;
+        const text = type === 'success' ? this.successText : this.errorText;
+        const icon = type === 'success' ? 'check_circle_fill' : 'warning_fill';
+        const className = type + '-text';
+        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.prefixText) {
+            return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.prefixText)));
+        }
+        const prefixIcon = this.icon || INPUT_TYPE_ICONS_MAP[this.type];
+        if (prefixIcon) {
+            return (h("slot", { name: "prefix" }, h("ds-icon", { class: "prefix", name: prefixIcon })));
+        }
+        return null;
+    }
+    renderSuffixContent() {
+        var _a, _b;
+        if (this.suffixText) {
+            return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.suffixText)));
+        }
+        const actionButtonIcon = (_b = (_a = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.type]) === null || _a === void 0 ? void 0 : _a.call(INPUT_TYPE_ACTION_BUTTON_ICON_MAP, this)) !== null && _b !== void 0 ? _b : '';
+        const ariaPressed = this.type === 'password' ? this.passwordInputVisible : undefined;
+        if (actionButtonIcon) {
+            return (h("slot", { name: "suffix" }, h("ds-button", { ref: e => (this.suffixButtonElement = e), variant: "supplementary", colour: "black", class: "suffix", disabled: false, icon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.actionButtonAriaLabel })));
+        }
+        return null;
+    }
+    handleInputContainerClick(e) {
+        if (e.target === this.suffixButtonElement)
+            return;
+        this.inputElement.focus();
+    }
+    render() {
+        const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
+        return (h(Fragment, { key: '6d7c594001a3103009b407b8ff83d2c1280d014a' }, h("div", { key: '76051b2e72023d0a11fe07f10390b787e7466f02', class: "label-container" }, h("slot", { key: '3c6aa9d9ad95523cd241fddf19be9f3b61cc6a5e', name: "label" }, h("label", { key: '9adea3cfcbd36030bdf66dd9ddc64a1483910c0f', class: classNames({ required: this.required }), htmlFor: this.id }, this.label)), h("slot", { key: '12466889750015207ac3f56159c70795e797d433', name: "help-text" }, h("small", { key: '4c4ae48f06cb9633d5f306ae14da8ccc5d09699e', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '899469a328caf988e955bc2f3e4bc15664f01de3', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'b8afbafcafc45a83b9bf177a09d585745ff2d7bf', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('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: '75b925eced73863f039c31f7c8abaf8996532f7c', ref: e => (this.inputElement = e), id: this.id, 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,
+                }), disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: e => (this.clearButtonVisible = !!e.target.value), onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false) }), this.renderSuffixContent()), this.renderValidityMessage('error'), this.renderValidityMessage('success')));
+    }
+    static get style() { return DsTextInputStyle0; }
+}, [6, "ds-text-input", {
+        "label": [1],
+        "placeholder": [1],
+        "id": [1],
+        "name": [1],
+        "disabled": [4],
+        "required": [4],
+        "readonly": [4],
+        "value": [1],
+        "min": [2],
+        "max": [2],
+        "maxlength": [2],
+        "pattern": [1],
+        "autocomplete": [1],
+        "errorText": [1, "error-text"],
+        "successText": [1, "success-text"],
+        "assistiveText": [1, "assistive-text"],
+        "actionButtonAriaLabel": [1, "action-button-aria-label"],
+        "hiddenAssistiveText": [1, "hidden-assistive-text"],
+        "prefixText": [1, "prefix-text"],
+        "suffixText": [1, "suffix-text"],
+        "icon": [1],
+        "type": [1],
+        "ariaLabel": [1, "aria-label"],
+        "ariaLabelledBy": [1, "aria-labelledby"],
+        "ariaDescribedby": [1, "aria-describedby"],
+        "hasFocus": [32],
+        "clearButtonVisible": [32],
+        "passwordInputVisible": [32],
+        "inputActive": [32],
+        "togglePasswordVisibility": [64],
+        "clearInput": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-text-input", "ds-button", "ds-icon", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-text-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsTextInput$1);
+            }
+            break;
+        case "ds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsTextInput = DsTextInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsTextInput, defineCustomElement };

package/dist/components/ds-visually-hidden.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsVisuallyHidden extends Components.DsVisuallyHidden, HTMLElement {}
+export const DsVisuallyHidden: {
+    prototype: DsVisuallyHidden;
+    new (): DsVisuallyHidden;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-visually-hidden.js

@@ -0,0 +1,6 @@
+import { D as DsVisuallyHidden$1, d as defineCustomElement$1 } from './ds-visually-hidden2.js';
+
+const DsVisuallyHidden = DsVisuallyHidden$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsVisuallyHidden, defineCustomElement };

package/dist/components/ds-visually-hidden2.js

@@ -0,0 +1,31 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+
+const dsVisuallyHiddenCss = ":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+const DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
+
+const DsVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class DsVisuallyHidden extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("slot", { key: '390610148832811748f7700f0d438b257bdb354d' }));
+    }
+    static get style() { return DsVisuallyHiddenStyle0; }
+}, [1, "ds-visually-hidden"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsVisuallyHidden);
+            }
+            break;
+    } });
+}
+
+export { DsVisuallyHidden as D, defineCustomElement as d };

package/dist/components/index.js

@@ -1,9 +1 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-dcfb6eb2.js';
-
-function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
-
-export { format };
-
-//# sourceMappingURL=index.js.map
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './index2.js';