@politiet/sheriff-web-components 2.9.0 → 2.10.0

package/dist/sds-textfield/sds-textfield.component.js

@@ -0,0 +1,249 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';
+import { styles } from './sds-textfield.styles';
+export class SDSTextFieldComponent extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        this.type = 'text';
+        this.required = false;
+        this.size = 'md';
+        // State
+        this.hasIcon = false;
+        /** Tracks whether the `label` slot has assigned content. */
+        this._hasSlottedLabel = false;
+        this._defaultValue = null;
+        this.handleSlotChange = (e) => {
+            const slot = e.target;
+            this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+        };
+        this._handleLabelSlotChange = (e) => {
+            this._hasSlottedLabel = e.target.assignedNodes().length > 0;
+        };
+        this._handleInputChange = (event) => {
+            event.stopImmediatePropagation();
+            if (this.disabled || !(event.target instanceof HTMLInputElement)) {
+                return;
+            }
+            this.value = event.target.value;
+            this.internals.setFormValue(this.value === '' ? null : this.value);
+            this.updateValidity();
+            this.dispatchSheriffEvent(event.type);
+        };
+        this._handleSelect = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                this.dispatchSheriffEvent('select');
+            }
+        };
+        this._handleFocus = (event) => {
+            event.stopImmediatePropagation();
+            this.dispatchSheriffEvent('focus');
+        };
+        this._handleBlur = (event) => {
+            event.stopImmediatePropagation();
+            this.updateValidity();
+            this.dispatchSheriffEvent('blur');
+        };
+        this._handleKeyDown = (event) => {
+            event.stopImmediatePropagation();
+            const shouldContinue = this.dispatchKeyboardEvent('keydown', event);
+            if (!shouldContinue) {
+                return;
+            }
+            if (event.key !== 'Enter') {
+                return;
+            }
+            for (const element of Array.from(this.form?.elements ?? [])) {
+                if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement) {
+                    if (element.type !== 'submit') {
+                        continue;
+                    }
+                    if (element.disabled) {
+                        return;
+                    }
+                    element.click();
+                    return;
+                }
+            }
+            this.form?.requestSubmit();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._defaultValue = this.value ?? null;
+        this.internals.setFormValue(this._defaultValue);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.internals.setFormValue(this.value ?? '');
+            if (this.control) {
+                this.control.value = this.value ?? '';
+            }
+        }
+    }
+    updateValidity() {
+        if (!this.control) {
+            return;
+        }
+        if (this.control.checkValidity()) {
+            this.internals.setValidity({});
+        }
+        else {
+            this.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);
+        }
+    }
+    formResetCallback() {
+        this.internals.setFormValue(this._defaultValue);
+        const newValue = this._defaultValue ?? '';
+        this.control.value = newValue;
+        this.value = newValue;
+        this.updateValidity();
+    }
+    select() {
+        if (!this.disabled)
+            this.control.select();
+    }
+    get selectionStart() {
+        return this.control ? this.control.selectionStart : null;
+    }
+    set selectionStart(value) {
+        if (this.control && value !== null) {
+            this.control.selectionStart = value;
+        }
+    }
+    get selectionEnd() {
+        return this.control ? this.control.selectionEnd : null;
+    }
+    set selectionEnd(value) {
+        if (this.control && value !== null) {
+            this.control.selectionEnd = value;
+        }
+    }
+    setSelectionRange(start, end, direction) {
+        if (this.control) {
+            this.control.setSelectionRange(start, end, direction);
+        }
+    }
+    checkValidity() {
+        return this.control.checkValidity();
+    }
+    reportValidity() {
+        return this.control.reportValidity();
+    }
+    setCustomValidity(message) {
+        this.control.setCustomValidity(message);
+        this.updateValidity();
+    }
+    render() {
+        const textfieldClasses = {
+            'sds-textfield': true,
+            'sds-textfield--error': Boolean(this.errorMessage),
+            'sds-textfield--has-icon': this.hasIcon,
+        };
+        const describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;
+        const showLabel = this._hasSlottedLabel || Boolean(this.label);
+        return html `
+			<div class="${classMap(textfieldClasses)}">
+				<label for="sds-textfield" class="sds-textfield__label" ?hidden="${!showLabel}">
+					${this.readOnly ? html `<sds-icon name="lock-material-filled" size="m"></sds-icon>` : nothing}
+					<slot name="label" @slotchange="${this._handleLabelSlotChange}">${this.label}</slot>
+				</label>
+				${this.helpText ? html `<p id="help-text" class="sds-textfield__help-text">${this.helpText}</p>` : nothing}
+				<div class="sds-textfield__input-container">
+					<input
+						part="input"
+						class="sds-textfield__input"
+						type="${ifDefined(this.type)}"
+						id="sds-textfield"
+						?disabled="${this.disabled}"
+						?readonly="${this.readOnly}"
+						placeholder="${ifDefined(this.placeholder)}"
+						.value="${this.value ?? ''}"
+						name="${ifDefined(this.name)}"
+						autocomplete="${ifDefined(this.autocomplete)}"
+						?required="${this.required}"
+						pattern="${ifDefined(this.pattern)}"
+						min="${ifDefined(this.min)}"
+						minlength="${ifDefined(this.minlength)}"
+						max="${ifDefined(this.max)}"
+						maxlength="${ifDefined(this.maxlength)}"
+						aria-describedby="${ifDefined(describedBy)}"
+						aria-invalid="${this.errorMessage ? 'true' : 'false'}"
+						@input="${this._handleInputChange}"
+						@change="${this._handleInputChange}"
+						@select="${this._handleSelect}"
+						@focus="${this._handleFocus}"
+						@blur="${this._handleBlur}"
+						@keydown="${this._handleKeyDown}"
+					/>
+					<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
+				</div>
+				${this.errorMessage ? html `<sds-alert id="error-message" variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
+			</div>
+		`;
+    }
+}
+// Styling
+SDSTextFieldComponent.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], SDSTextFieldComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text', reflect: true })
+], SDSTextFieldComponent.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message', reflect: true })
+], SDSTextFieldComponent.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSTextFieldComponent.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "pattern", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSTextFieldComponent.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSTextFieldComponent.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "min", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "max", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextFieldComponent.prototype, "size", void 0);
+__decorate([
+    state()
+], SDSTextFieldComponent.prototype, "hasIcon", void 0);
+__decorate([
+    state()
+], SDSTextFieldComponent.prototype, "_hasSlottedLabel", void 0);
+__decorate([
+    query('#sds-textfield')
+], SDSTextFieldComponent.prototype, "control", void 0);
+//# sourceMappingURL=sds-textfield.component.js.map

package/dist/sds-textfield/sds-textfield.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textfield.component.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\nimport { styles } from './sds-textfield.styles';\nimport { SDS_SIZES } from '../types';\n\ntype InputType =\n\t| 'hidden'\n\t| 'text'\n\t| 'search'\n\t| 'tel'\n\t| 'url'\n\t| 'email'\n\t| 'password'\n\t| 'datetime'\n\t| 'date'\n\t| 'month'\n\t| 'week'\n\t| 'time'\n\t| 'datetime-local'\n\t| 'number'\n\t| 'range'\n\t| 'color'\n\t| 'checkbox'\n\t| 'radio'\n\t| 'file'\n\t| 'submit'\n\t| 'image'\n\t| 'reset'\n\t| 'button';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps extends SDSFormControlAttributes {\n\tautocomplete?: AutocompleteTypes;\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tlabel?: string;\n\tmaxlength?: number;\n\tminlength?: number;\n\tmin?: number | string;\n\tmax?: number | string;\n\tpattern?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tsize?: InputSize;\n\ttype?: InputType;\n\tvalue?: string;\n}\n\nexport class SDSTextFieldComponent extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: SDSTextFieldProps['type'] = 'text';\n\t@property({ type: String }) value?: SDSTextFieldProps['value'];\n\t@property({ type: String, reflect: true }) label?: SDSTextFieldProps['label'];\n\t@property({ type: String, reflect: true }) placeholder?: SDSTextFieldProps['placeholder'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSTextFieldProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSTextFieldProps['error-message'];\n\t@property({ type: String, reflect: true }) autocomplete?: SDSTextFieldProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: SDSTextFieldProps['required'] = false;\n\t@property({ type: String, reflect: true }) pattern?: SDSTextFieldProps['pattern'];\n\t@property({ type: Number, reflect: true }) minlength?: SDSTextFieldProps['minlength'];\n\t@property({ type: Number, reflect: true }) maxlength?: SDSTextFieldProps['maxlength'];\n\t@property({ type: String, reflect: true }) min?: SDSTextFieldProps['min'];\n\t@property({ type: String, reflect: true }) max?: SDSTextFieldProps['max'];\n\t@property({ type: String, reflect: true }) size: SDSTextFieldProps['size'] = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\t/** Tracks whether the `label` slot has assigned content. */\n\t@state() private _hasSlottedLabel = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? null;\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.internals.setFormValue(this.value ?? '');\n\n\t\t\tif (this.control) {\n\t\t\t\tthis.control.value = this.value ?? '';\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate readonly _handleLabelSlotChange = (e: Event) => {\n\t\tthis._hasSlottedLabel = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n\t};\n\n\toverride updateValidity() {\n\t\tif (!this.control) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || !(event.target instanceof HTMLInputElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\t\tthis.internals.setFormValue(this.value === '' ? null : this.value);\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent(event.type);\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('select');\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tevent.stopImmediatePropagation();\n\n\t\tconst shouldContinue = this.dispatchKeyboardEvent('keydown', event);\n\t\tif (!shouldContinue) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key !== 'Enter') {\n\t\t\treturn;\n\t\t}\n\n\t\tfor (const element of Array.from(this.form?.elements ?? [])) {\n\t\t\tif (element instanceof HTMLButtonElement || element instanceof HTMLInputElement) {\n\t\t\t\tif (element.type !== 'submit') {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (element.disabled) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\telement.click();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tthis.form?.requestSubmit();\n\t};\n\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tthis.control.value = newValue;\n\t\tthis.value = newValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\tconst describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;\n\n\t\tconst showLabel = this._hasSlottedLabel || Boolean(this.label);\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t<label for=\"sds-textfield\" class=\"sds-textfield__label\" ?hidden=\"${!showLabel}\">\n\t\t\t\t\t${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}\n\t\t\t\t\t<slot name=\"label\" @slotchange=\"${this._handleLabelSlotChange}\">${this.label}</slot>\n\t\t\t\t</label>\n\t\t\t\t${this.helpText ? html`<p id=\"help-text\" class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${ifDefined(this.type)}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tmin=\"${ifDefined(this.min)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmax=\"${ifDefined(this.max)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\taria-describedby=\"${ifDefined(describedBy)}\"\n\t\t\t\t\t\taria-invalid=\"${this.errorMessage ? 'true' : 'false'}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\t@keydown=\"${this._handleKeyDown}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert id=\"error-message\" variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n"]}

package/dist/sds-textfield/sds-textfield.d.ts

@@ -1,75 +1,12 @@
-import { LitElement } from 'lit';
-import type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';
+import { SDSTextFieldComponent } from './sds-textfield.component';
 import '../sds-alert/sds-alert';
 import '../sds-icon/sds-icon';
-import { SDS_SIZES } from '../types';
-type InputType = 'hidden' | 'text' | 'search' | 'tel' | 'url' | 'email' | 'password' | 'datetime' | 'date' | 'month' | 'week' | 'time' | 'datetime-local' | 'number' | 'range' | 'color' | 'checkbox' | 'radio' | 'file' | 'submit' | 'image' | 'reset' | 'button';
-type InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
-export type AutocompleteTypes = 'off' | 'on' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo';
-export interface SDSTextFieldProps extends SDSFormControlAttributes {
-    autocomplete?: AutocompleteTypes;
-    'error-message'?: string;
-    'help-text'?: string;
-    label?: string;
-    maxlength?: number;
-    minlength?: number;
-    min?: number | string;
-    max?: number | string;
-    pattern?: string;
-    placeholder?: string;
-    required?: boolean;
-    size?: InputSize;
-    type?: InputType;
-    value?: string;
-}
-declare const SDSTextField_base: import("../mixins/types").Constructable<import("../mixins/sds-delegate-interaction-mixin").DelegateInteractionMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-form-control-mixin").SDSFormControlMixinInterface> & typeof LitElement;
-export declare class SDSTextField extends SDSTextField_base {
-    static styles: import("lit").CSSResult[];
-    type: SDSTextFieldProps['type'];
-    value?: SDSTextFieldProps['value'];
-    label?: SDSTextFieldProps['label'];
-    placeholder?: SDSTextFieldProps['placeholder'];
-    helpText?: SDSTextFieldProps['help-text'];
-    errorMessage?: SDSTextFieldProps['error-message'];
-    autocomplete?: SDSTextFieldProps['autocomplete'];
-    required: SDSTextFieldProps['required'];
-    pattern?: SDSTextFieldProps['pattern'];
-    minlength?: SDSTextFieldProps['minlength'];
-    maxlength?: SDSTextFieldProps['maxlength'];
-    min?: SDSTextFieldProps['min'];
-    max?: SDSTextFieldProps['max'];
-    size: SDSTextFieldProps['size'];
-    private hasIcon;
-    /** Tracks whether the `label` slot has assigned content. */
-    private _hasSlottedLabel;
-    control: HTMLInputElement;
-    private _defaultValue;
-    connectedCallback(): void;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    private readonly handleSlotChange;
-    private readonly _handleLabelSlotChange;
-    updateValidity(): void;
-    private readonly _handleInputChange;
-    private readonly _handleSelect;
-    private readonly _handleFocus;
-    private readonly _handleBlur;
-    private readonly _handleKeyDown;
-    formResetCallback(): void;
-    select(): void;
-    get selectionStart(): number | null;
-    set selectionStart(value: number | null);
-    get selectionEnd(): number | null;
-    set selectionEnd(value: number | null);
-    setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    setCustomValidity(message: string): void;
-    render(): import("lit-html").TemplateResult<1>;
+export type { AutocompleteTypes, SDSTextFieldProps } from './sds-textfield.component';
+export declare class SDSTextField extends SDSTextFieldComponent {
 }
 declare global {
     interface HTMLElementTagNameMap {
         'sds-textfield': SDSTextField;
     }
 }
-export {};
 //# sourceMappingURL=sds-textfield.d.ts.map

package/dist/sds-textfield/sds-textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEtF,qBACa,YAAa,SAAQ,qBAAqB;CAAG;AAE1D,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/dist/sds-textfield/sds-textfield.js

@@ -4,251 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
-import { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';
-import { styles } from './sds-textfield.styles';
+import { SDSTextFieldComponent } from './sds-textfield.component';
 import '../sds-alert/sds-alert';
 import '../sds-icon/sds-icon';
-let SDSTextField = class SDSTextField extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {
-    constructor() {
-        super(...arguments);
-        this.type = 'text';
-        this.required = false;
-        this.size = 'md';
-        // State
-        this.hasIcon = false;
-        /** Tracks whether the `label` slot has assigned content. */
-        this._hasSlottedLabel = false;
-        this._defaultValue = null;
-        this.handleSlotChange = (e) => {
-            const slot = e.target;
-            this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
-        };
-        this._handleLabelSlotChange = (e) => {
-            this._hasSlottedLabel = e.target.assignedNodes().length > 0;
-        };
-        this._handleInputChange = (event) => {
-            event.stopImmediatePropagation();
-            if (this.disabled || !(event.target instanceof HTMLInputElement)) {
-                return;
-            }
-            this.value = event.target.value;
-            this.internals.setFormValue(this.value === '' ? null : this.value);
-            this.updateValidity();
-            this.dispatchSheriffEvent(event.type);
-        };
-        this._handleSelect = (event) => {
-            event.stopImmediatePropagation();
-            if (!this.disabled) {
-                this.dispatchSheriffEvent('select');
-            }
-        };
-        this._handleFocus = (event) => {
-            event.stopImmediatePropagation();
-            this.dispatchSheriffEvent('focus');
-        };
-        this._handleBlur = (event) => {
-            event.stopImmediatePropagation();
-            this.updateValidity();
-            this.dispatchSheriffEvent('blur');
-        };
-        this._handleKeyDown = (event) => {
-            event.stopImmediatePropagation();
-            const shouldContinue = this.dispatchKeyboardEvent('keydown', event);
-            if (!shouldContinue) {
-                return;
-            }
-            if (event.key !== 'Enter') {
-                return;
-            }
-            for (const element of Array.from(this.form?.elements ?? [])) {
-                if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement) {
-                    if (element.type !== 'submit') {
-                        continue;
-                    }
-                    if (element.disabled) {
-                        return;
-                    }
-                    element.click();
-                    return;
-                }
-            }
-            this.form?.requestSubmit();
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._defaultValue = this.value ?? null;
-        this.internals.setFormValue(this._defaultValue);
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('value')) {
-            this.internals.setFormValue(this.value ?? '');
-            if (this.control) {
-                this.control.value = this.value ?? '';
-            }
-        }
-    }
-    updateValidity() {
-        if (!this.control) {
-            return;
-        }
-        if (this.control.checkValidity()) {
-            this.internals.setValidity({});
-        }
-        else {
-            this.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);
-        }
-    }
-    formResetCallback() {
-        this.internals.setFormValue(this._defaultValue);
-        const newValue = this._defaultValue ?? '';
-        this.control.value = newValue;
-        this.value = newValue;
-        this.updateValidity();
-    }
-    select() {
-        if (!this.disabled)
-            this.control.select();
-    }
-    get selectionStart() {
-        return this.control ? this.control.selectionStart : null;
-    }
-    set selectionStart(value) {
-        if (this.control && value !== null) {
-            this.control.selectionStart = value;
-        }
-    }
-    get selectionEnd() {
-        return this.control ? this.control.selectionEnd : null;
-    }
-    set selectionEnd(value) {
-        if (this.control && value !== null) {
-            this.control.selectionEnd = value;
-        }
-    }
-    setSelectionRange(start, end, direction) {
-        if (this.control) {
-            this.control.setSelectionRange(start, end, direction);
-        }
-    }
-    checkValidity() {
-        return this.control.checkValidity();
-    }
-    reportValidity() {
-        return this.control.reportValidity();
-    }
-    setCustomValidity(message) {
-        this.control.setCustomValidity(message);
-        this.updateValidity();
-    }
-    render() {
-        const textfieldClasses = {
-            'sds-textfield': true,
-            'sds-textfield--error': Boolean(this.errorMessage),
-            'sds-textfield--has-icon': this.hasIcon,
-        };
-        const describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;
-        const showLabel = this._hasSlottedLabel || Boolean(this.label);
-        return html `
-			<div class="${classMap(textfieldClasses)}">
-				<label for="sds-textfield" class="sds-textfield__label" ?hidden="${!showLabel}">
-					${this.readOnly ? html `<sds-icon name="lock-material-filled" size="m"></sds-icon>` : nothing}
-					<slot name="label" @slotchange="${this._handleLabelSlotChange}">${this.label}</slot>
-				</label>
-				${this.helpText ? html `<p id="help-text" class="sds-textfield__help-text">${this.helpText}</p>` : nothing}
-				<div class="sds-textfield__input-container">
-					<input
-						part="input"
-						class="sds-textfield__input"
-						type="${ifDefined(this.type)}"
-						id="sds-textfield"
-						?disabled="${this.disabled}"
-						?readonly="${this.readOnly}"
-						placeholder="${ifDefined(this.placeholder)}"
-						.value="${this.value ?? ''}"
-						name="${ifDefined(this.name)}"
-						autocomplete="${ifDefined(this.autocomplete)}"
-						?required="${this.required}"
-						pattern="${ifDefined(this.pattern)}"
-						min="${ifDefined(this.min)}"
-						minlength="${ifDefined(this.minlength)}"
-						max="${ifDefined(this.max)}"
-						maxlength="${ifDefined(this.maxlength)}"
-						aria-describedby="${ifDefined(describedBy)}"
-						aria-invalid="${this.errorMessage ? 'true' : 'false'}"
-						@input="${this._handleInputChange}"
-						@change="${this._handleInputChange}"
-						@select="${this._handleSelect}"
-						@focus="${this._handleFocus}"
-						@blur="${this._handleBlur}"
-						@keydown="${this._handleKeyDown}"
-					/>
-					<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
-				</div>
-				${this.errorMessage ? html `<sds-alert id="error-message" variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
-			</div>
-		`;
-    }
+let SDSTextField = class SDSTextField extends SDSTextFieldComponent {
 };
-// Styling
-SDSTextField.styles = [styles];
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], SDSTextField.prototype, "value", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: String, attribute: 'help-text', reflect: true })
-], SDSTextField.prototype, "helpText", void 0);
-__decorate([
-    property({ type: String, attribute: 'error-message', reflect: true })
-], SDSTextField.prototype, "errorMessage", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "autocomplete", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSTextField.prototype, "required", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "pattern", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], SDSTextField.prototype, "minlength", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], SDSTextField.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "min", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "max", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSTextField.prototype, "size", void 0);
-__decorate([
-    state()
-], SDSTextField.prototype, "hasIcon", void 0);
-__decorate([
-    state()
-], SDSTextField.prototype, "_hasSlottedLabel", void 0);
-__decorate([
-    query('#sds-textfield')
-], SDSTextField.prototype, "control", void 0);
 SDSTextField = __decorate([
     guardedCustomElement('sds-textfield')
 ], SDSTextField);