@politiet/sheriff-web-components 1.0.0-rc.8 → 1.0.0

package/dist/sheriff-web-components.js

@@ -1041,6 +1041,7 @@ let SDSCheckbox = class extends r$2 {
     this.checked = false;
     this.disabled = false;
     this.error = false;
+    this.required = false;
     this._initialChecked = false;
     this._handleChange = (event) => {
       event.stopImmediatePropagation();
@@ -1048,9 +1049,9 @@ let SDSCheckbox = class extends r$2 {
         const elem = event.target;
         this.checked = elem.checked;
         this.internals.setFormValue(elem.checked ? elem.value : "");
+        this._validate();
         this.dispatchEvent(
           new CustomEvent("change", {
-            detail: { checked: this.checked, value: elem.value },
             bubbles: true,
             composed: true
           })
@@ -1061,7 +1062,6 @@ let SDSCheckbox = class extends r$2 {
       event.stopImmediatePropagation();
       this.dispatchEvent(
         new CustomEvent("focus", {
-          detail: { checked: this.checked },
           bubbles: true,
           composed: true
         })
@@ -1071,7 +1071,6 @@ let SDSCheckbox = class extends r$2 {
       event.stopImmediatePropagation();
       this.dispatchEvent(
         new CustomEvent("blur", {
-          detail: { checked: this.checked },
           bubbles: true,
           composed: true
         })
@@ -1088,11 +1087,28 @@ let SDSCheckbox = class extends r$2 {
       this.internals.setFormValue(this.value ? this.value : "");
     }
   }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    if (this.control) {
+      this.control.required = this.required;
+    }
+    this._validate();
+  }
   formResetCallback() {
     this.checked = this._initialChecked;
-    this.control.checked = this._initialChecked;
+    if (this.control) {
+      this.control.checked = this._initialChecked;
+    }
     const resetValue = this.checked && this.value ? this.value : "";
     this.internals.setFormValue(resetValue);
+    this._validate();
+  }
+  _validate() {
+    if (this.required && !this.checked) {
+      this.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);
+    } else {
+      this.internals.setValidity({});
+    }
   }
   focus() {
     if (!this.disabled) this.shadowRoot?.querySelector("input")?.focus();
@@ -1103,6 +1119,15 @@ let SDSCheckbox = class extends r$2 {
   click() {
     if (!this.disabled) this.shadowRoot?.querySelector("input")?.click();
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("required") && this.control) {
+      this.control.required = this.required;
+    }
+    if (changedProperties.has("checked")) {
+      this._validate();
+    }
+  }
   render() {
     const checkboxClasses = {
       "sds-checkbox": true,
@@ -1122,6 +1147,7 @@ let SDSCheckbox = class extends r$2 {
 						value="${o$1(this.value)}"
 						?checked="${this.checked}"
 						?disabled="${this.disabled}"
+						?required="${this.required}"
 						@change="${this._handleChange}"
 						@focus="${this._handleFocus}"
 						@blur="${this._handleBlur}"
@@ -1153,6 +1179,9 @@ __decorateClass$g([
 __decorateClass$g([
   n2({ type: Boolean, reflect: true })
 ], SDSCheckbox.prototype, "error", 2);
+__decorateClass$g([
+  n2({ type: Boolean, reflect: true })
+], SDSCheckbox.prototype, "required", 2);
 __decorateClass$g([
   e$3("#control")
 ], SDSCheckbox.prototype, "control", 2);
@@ -1243,7 +1272,7 @@ const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${n
 }).catch((error) => {
   console.log(error);
 });
-const loadCdnIcons = (name) => fetch(`https://unpkg.com/@politiet/sheriff-icons/dist/assets/${name}.svg`).then((response) => {
+const loadCdnIcons = (name) => fetch(`https://cdn.jsdelivr.net/npm/@politiet/sheriff-icons/dist/assets/${name}.svg`).then((response) => {
   if (!response.ok) {
     throw new TypeError(`Sheriff: unknown icon: '${name}'`);
   }
@@ -1269,7 +1298,7 @@ class SDSIconLoader {
       return;
     }
     if (!cached) {
-      cached = this.resolver(name).catch(() => "Loading icon failed").then((svg) => {
+      cached = this.resolver(name).catch(() => "").then((svg) => {
         this.cache.set(name, svg);
         return svg;
       });
@@ -1389,21 +1418,23 @@ var __decorateClass$e = (decorators, target, key, kind) => {
 let SDSCheckboxGroup = class extends r$2 {
   constructor() {
     super(...arguments);
-    this.selectedValues = [];
+    this._selectedValues = [];
     this._handleCheckboxChange = (event) => {
       const checkbox = event.target;
       const value = checkbox.value;
       const isChecked = checkbox.checked;
-      this.selectedValues = isChecked ? [...this.selectedValues, value] : this.selectedValues.filter((v2) => v2 !== value);
+      this._selectedValues = isChecked ? [...this._selectedValues, value] : this._selectedValues.filter((v2) => v2 !== value);
       this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { selectedValues: this.selectedValues },
+        new CustomEvent("sds-update", {
           bubbles: true,
           composed: true
         })
       );
     };
   }
+  get value() {
+    return { selectedValues: this._selectedValues };
+  }
   render() {
     const groupClasses = {
       "sds-checkbox-group": true,
@@ -1440,7 +1471,7 @@ __decorateClass$e([
 ], SDSCheckboxGroup.prototype, "errorMessage", 2);
 __decorateClass$e([
   r2()
-], SDSCheckboxGroup.prototype, "selectedValues", 2);
+], SDSCheckboxGroup.prototype, "_selectedValues", 2);
 SDSCheckboxGroup = __decorateClass$e([
   t$2("sds-checkbox-group")
 ], SDSCheckboxGroup);
@@ -1543,7 +1574,6 @@ let SDSChip = class extends r$2 {
       this.internals.setFormValue(this.checked && this.value ? this.value : "");
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { value: this.value, isChecked: this.checked },
           bubbles: true,
           composed: true
         })
@@ -2751,6 +2781,7 @@ let SDSRadio = class extends r$2 {
     this.required = false;
     this.label = "";
     this.hideLabel = false;
+    this.value = "on";
     this.checked = false;
     this.error = false;
     this._initialChecked = false;
@@ -2775,20 +2806,18 @@ let SDSRadio = class extends r$2 {
       }
       const targetRadio = radios[targetIndex];
       targetRadio?.focus();
+      targetRadio?.click();
       event.preventDefault();
     };
     this._handleChange = (event) => {
       if (!this.disabled) {
         const elem = event.target;
         this.checked = elem.checked;
-        this._validate();
-        this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { checked: this.checked, value: this.value },
-            bubbles: true,
-            composed: true
-          })
-        );
+        if (this.checked) {
+          this._uncheckSiblings();
+        }
+        this._updateGroupValidation();
+        this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true }));
       }
     };
     this._handleFocus = (event) => {
@@ -2808,36 +2837,60 @@ let SDSRadio = class extends r$2 {
     if (!this._initialChecked) {
       this._initialChecked = this.checked;
     }
-    this._validate();
     this.addEventListener("keydown", this._handleKeydown);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("keydown", this._handleKeydown);
   }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this._updateGroupValidation();
+  }
+  _getGroupRadios() {
+    if (!this.name) return [this];
+    const root = this.getRootNode();
+    const radioGroup = Array.from(root.querySelectorAll(`sds-radio[name="${this.name}"]`));
+    return radioGroup;
+  }
+  _updateGroupValidation() {
+    const group = this._getGroupRadios();
+    const isAnyChecked = group.some((radio) => radio.checked);
+    const isAnyRequired = group.some((radio) => radio.required);
+    group.forEach((radio) => {
+      if (!radio.control) return;
+      if (isAnyRequired) {
+        isAnyChecked ? radio.internals.setValidity({}) : radio.internals.setValidity(
+          { valueMissing: true },
+          radio.control.validationMessage,
+          radio.control
+        );
+        radio.internals.setValidity(
+          isAnyChecked ? {} : { valueMissing: true },
+          isAnyChecked ? "Error" : radio.control.validationMessage,
+          ...radio.control ? [radio.control] : []
+        );
+      } else {
+        radio.internals.setValidity({});
+      }
+    });
+  }
   formResetCallback() {
     this.checked = this._initialChecked;
     this.control.checked = this._initialChecked;
-    this.internals.setFormValue(this.checked ? this.value ?? null : null);
-    this._validate();
-  }
-  _validate() {
-    if (this.required && !this.checked) {
-      this.setCustomValidity("This field is required.");
-    } else {
-      this.setCustomValidity("");
-    }
+    this.internals.setFormValue(this.checked ? this.value ?? "on" : "on");
+    this._updateGroupValidation();
   }
   updated(changedProperties) {
-    super.updated?.(changedProperties);
+    super.updated(changedProperties);
     if (changedProperties.has("checked")) {
-      this._validate();
       if (this.checked) {
         this._uncheckSiblings();
         this.internals.setFormValue(this.value ?? null);
       } else {
         this.internals.setFormValue(null);
       }
+      this._updateGroupValidation();
     }
     if (changedProperties.has("required") && this.control) {
       this.control.required = this.required;
@@ -2914,6 +2967,7 @@ let SDSRadio = class extends r$2 {
 						value="${o$1(this.value)}"
 						?checked="${this.checked}"
 						?disabled="${this.disabled}"
+						?required="${this.required}"
 						@change="${this._handleChange}"
 						@focus="${this._handleFocus}"
 						@blur="${this._handleBlur}"
@@ -3015,14 +3069,13 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
 let SDSRadioGroup = class extends r$2 {
   constructor() {
     super(...arguments);
-    this.selectedValue = null;
+    this._selectedValue = null;
     this._handleRadioChange = (event) => {
       const target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === "SDS-RADIO");
       if (target) {
-        this.selectedValue = target.getAttribute("value") || null;
+        this._selectedValue = target.getAttribute("value") || null;
         this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { selectedValue: this.selectedValue },
+          new CustomEvent("sds-update", {
             bubbles: true,
             composed: true
           })
@@ -3030,6 +3083,9 @@ let SDSRadioGroup = class extends r$2 {
       }
     };
   }
+  get value() {
+    return { selectedValue: this._selectedValue };
+  }
   render() {
     return x`
 			<fieldset class="sds-radio-group">
@@ -3062,7 +3118,7 @@ __decorateClass$3([
 ], SDSRadioGroup.prototype, "errorMessage", 2);
 __decorateClass$3([
   r2()
-], SDSRadioGroup.prototype, "selectedValue", 2);
+], SDSRadioGroup.prototype, "_selectedValue", 2);
 SDSRadioGroup = __decorateClass$3([
   t$2("sds-radio-group")
 ], SDSRadioGroup);
@@ -3205,7 +3261,6 @@ let SDSSwitch = class extends r$2 {
     this.disabled = false;
     this.label = "";
     this.hideLabel = false;
-    this.value = "";
     this.reverse = false;
     this.checked = false;
     this.size = "l";
@@ -3215,10 +3270,9 @@ let SDSSwitch = class extends r$2 {
       if (!this.disabled) {
         const elem = event.target;
         this.checked = elem.checked;
-        this.internals.setFormValue(this.checked ? this.value : "");
+        this.internals.setFormValue(this.checked ? "on" : "off");
         this.dispatchEvent(
           new CustomEvent("change", {
-            detail: { checked: this.checked, value: this.value },
             bubbles: true,
             composed: true
           })
@@ -3230,7 +3284,6 @@ let SDSSwitch = class extends r$2 {
       if (!this.disabled) {
         this.dispatchEvent(
           new CustomEvent("focus", {
-            detail: { checked: this.checked, value: this.value },
             bubbles: true,
             composed: true
           })
@@ -3242,7 +3295,6 @@ let SDSSwitch = class extends r$2 {
       if (!this.disabled) {
         this.dispatchEvent(
           new CustomEvent("blur", {
-            detail: { checked: this.checked, value: this.value },
             bubbles: true,
             composed: true
           })
@@ -3255,24 +3307,25 @@ let SDSSwitch = class extends r$2 {
   connectedCallback() {
     super.connectedCallback();
     this._initialChecked = this.checked;
-    if (this.checked) {
-      this.internals.setFormValue(this.value ? this.value : "");
-    }
+    this.internals.setFormValue(this.checked ? "on" : "off");
   }
   updated(changedProperties) {
     if (changedProperties.has("checked")) {
       this.control.checked = this.checked;
-      this.internals.setFormValue(this.checked ? this.value : "");
+      this.internals.setFormValue(this.checked ? "on" : "off");
     }
   }
   formResetCallback() {
     this.checked = this._initialChecked;
     this.control.checked = this._initialChecked;
-    this.internals.setFormValue(this._initialChecked ? this.value : "");
+    this.internals.setFormValue(this._initialChecked ? "on" : "off");
   }
   formStateRestoreCallback(state) {
     this.checked = state;
   }
+  get value() {
+    return this.checked ? "on" : "off";
+  }
   render() {
     const switchClasses = {
       "sds-switch": true,
@@ -3288,7 +3341,6 @@ let SDSSwitch = class extends r$2 {
 			type="checkbox"
 			role="switch"
 			?checked="${this.checked}"
-			value="${o$1(this.value)}"
 			name="${o$1(this.name)}"
 			@change="${this._handleChange}"
 			@focus="${this._handleFocus}"
@@ -3312,11 +3364,8 @@ __decorateClass$2([
   n2({ type: Boolean, reflect: true, attribute: "hide-label" })
 ], SDSSwitch.prototype, "hideLabel", 2);
 __decorateClass$2([
-  n2({ type: String, reflect: false })
+  n2({ type: String, reflect: true })
 ], SDSSwitch.prototype, "name", 2);
-__decorateClass$2([
-  n2({ type: String, reflect: false })
-], SDSSwitch.prototype, "value", 2);
 __decorateClass$2([
   n2({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "reverse", 2);
@@ -3524,91 +3573,100 @@ let SDSTextField = class extends r$2 {
     this.type = "text";
     this.disabled = false;
     this.readOnly = false;
-    this.autocomplete = false;
+    this.required = false;
     this.hasIcon = false;
+    this._defaultValue = "";
     this.handleSlotChange = (e2) => {
       const slot = e2.target;
       this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
     };
-    this._handleInput = (event) => {
+    this._handleInputChange = (event) => {
       event.stopImmediatePropagation();
       if (!this.disabled) {
-        this.internals.setFormValue(event.target.value);
-        this.dispatchEvent(
-          new CustomEvent("input", {
-            detail: { value: event.target.value },
-            bubbles: true,
-            composed: true
-          })
-        );
-      }
-    };
-    this._handleChange = (event) => {
-      event.stopImmediatePropagation();
-      if (!this.disabled) {
-        this.internals.setFormValue(event.target.value);
-        this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { value: event.target.value },
-            bubbles: true,
-            composed: true
-          })
-        );
+        const currentValue = event.target.value;
+        this.value = currentValue;
+        this.internals.setFormValue(currentValue === "" ? null : currentValue);
+        this.updateValidity();
+        this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));
       }
     };
     this._handleSelect = (event) => {
       event.stopImmediatePropagation();
       if (!this.disabled) {
-        const target = event.target;
-        const selectedText = target.value.substring(target.selectionStart ?? 0, target.selectionEnd ?? 0);
-        this.dispatchEvent(
-          new CustomEvent("select", {
-            detail: { selectedText },
-            bubbles: true,
-            composed: true
-          })
-        );
+        this.dispatchEvent(new CustomEvent("select", { bubbles: true, composed: true }));
       }
     };
     this._handleFocus = (event) => {
       event.stopImmediatePropagation();
-      this.dispatchEvent(
-        new CustomEvent("focus", {
-          detail: { value: event.target.value },
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.dispatchEvent(new CustomEvent("focus", { bubbles: true, composed: true }));
     };
     this._handleBlur = (event) => {
       event.stopImmediatePropagation();
-      this.dispatchEvent(
-        new CustomEvent("blur", {
-          detail: { value: event.target.value },
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.updateValidity();
+      this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
     };
     this.internals = this.attachInternals();
     this.attachShadow({ mode: "open", delegatesFocus: true });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._defaultValue = this.value ?? "";
+  }
+  updateValidity() {
+    if (this.control.checkValidity()) {
+      this.internals.setValidity({});
+    } else {
+      this.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);
+    }
+  }
   formResetCallback() {
-    const resetValue = this.value ? this.value : "";
-    this.control.value = resetValue;
-    this.internals.setFormValue(resetValue);
+    this.control.value = this._defaultValue;
+    this.internals.setFormValue(this._defaultValue === "" ? null : this._defaultValue);
+    this.value = this._defaultValue;
+    this.updateValidity();
   }
   select() {
-    if (!this.disabled) this.shadowRoot?.querySelector("input")?.select();
+    if (!this.disabled) this.control.select();
   }
   focus() {
-    if (!this.disabled) this.shadowRoot?.querySelector("input")?.focus();
+    if (!this.disabled) this.control.focus();
   }
   blur() {
-    if (!this.disabled) this.shadowRoot?.querySelector("input")?.blur();
+    if (!this.disabled) this.control.blur();
   }
   click() {
-    if (!this.disabled) this.shadowRoot?.querySelector("input")?.click();
+    if (!this.disabled) this.control.click();
+  }
+  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 = {
@@ -3618,71 +3676,89 @@ let SDSTextField = class extends r$2 {
       "sds-textfield--readonly": Boolean(this.readOnly),
       "sds-textfield--has-icon": this.hasIcon
     };
-    return x` <div class="${e$1(textfieldClasses)}">
-			${this.label ? x`<label for="sds-textfield" class="sds-textfield__label">${this.label}</label>` : E}
-			${this.helpText ? x`<p class="sds-textfield__help-text">${this.helpText}</p>` : E}
-			<div class="sds-textfield__input-container">
-				<input
-					class="sds-textfield__input"
-					type="${this.type}"
-					id="sds-textfield"
-					?disabled="${this.disabled}"
-					?readonly="${this.readOnly}"
-					placeholder="${o$1(this.placeholder)}"
-					value="${o$1(this.value)}"
-					name="${o$1(this.name)}"
-					autocomplete="${this.autocomplete ? "on" : "off"}"
-					@input="${this._handleInput}"
-					@change="${this._handleChange}"
-					@select="${this._handleSelect}"
-					@focus="${this._handleFocus}"
-					@blur="${this._handleBlur}"
-				/>
-				<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
+    return x`
+			<div class="${e$1(textfieldClasses)}">
+				${this.label ? x`<label for="sds-textfield" class="sds-textfield__label">${this.label}</label>` : E}
+				${this.helpText ? x`<p class="sds-textfield__help-text">${this.helpText}</p>` : E}
+				<div class="sds-textfield__input-container">
+					<input
+						class="sds-textfield__input"
+						type="${this.type}"
+						id="sds-textfield"
+						?disabled="${this.disabled}"
+						?readonly="${this.readOnly}"
+						placeholder="${o$1(this.placeholder)}"
+						value="${o$1(this.value)}"
+						name="${o$1(this.name)}"
+						autocomplete="${o$1(this.autocomplete)}"
+						?required="${this.required}"
+						pattern="${o$1(this.pattern)}"
+						minlength="${o$1(this.minlength)}"
+						maxlength="${o$1(this.maxlength)}"
+						@input="${this._handleInputChange}"
+						@change="${this._handleInputChange}"
+						@select="${this._handleSelect}"
+						@focus="${this._handleFocus}"
+						@blur="${this._handleBlur}"
+					/>
+					<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
+				</div>
+				${this.errorMessage ? x`<p class="sds-textfield__error-message">
+							<sds-icon
+								name="warning-material-filled"
+								size="m"
+								color="${!this.disabled ? `var(--sds-color-semantic-icon-critical)` : `var(--sds-color-semantic-icon-disabled)`}"
+							></sds-icon>
+							${this.errorMessage}
+						</p>` : E}
 			</div>
-			${this.errorMessage ? x`<p class="sds-textfield__error-message">
-						<sds-icon
-							name="warning-material-filled"
-							size="m"
-							color="${!this.disabled ? `var(--sds-color-semantic-icon-critical)` : `var(--sds-color-semantic-icon-disabled)`}"
-						></sds-icon
-						>${this.errorMessage}
-					</p>` : E}
-		</div>`;
+		`;
   }
 };
 SDSTextField.styles = [styles];
 SDSTextField.formAssociated = true;
 __decorateClass([
-  n2({ type: String })
+  n2({ type: String, reflect: true })
 ], SDSTextField.prototype, "type", 2);
 __decorateClass([
   n2({ type: String })
 ], SDSTextField.prototype, "value", 2);
 __decorateClass([
-  n2({ type: String })
+  n2({ type: String, reflect: true })
 ], SDSTextField.prototype, "name", 2);
 __decorateClass([
-  n2({ type: String })
+  n2({ type: String, reflect: true })
 ], SDSTextField.prototype, "label", 2);
 __decorateClass([
-  n2({ type: String })
+  n2({ type: String, reflect: true })
 ], SDSTextField.prototype, "placeholder", 2);
 __decorateClass([
-  n2({ type: String, attribute: "help-text" })
+  n2({ type: String, attribute: "help-text", reflect: true })
 ], SDSTextField.prototype, "helpText", 2);
 __decorateClass([
-  n2({ type: String, attribute: "error-message" })
+  n2({ type: String, attribute: "error-message", reflect: true })
 ], SDSTextField.prototype, "errorMessage", 2);
 __decorateClass([
-  n2({ type: Boolean })
+  n2({ type: Boolean, reflect: true })
 ], SDSTextField.prototype, "disabled", 2);
 __decorateClass([
-  n2({ type: Boolean, attribute: "readonly" })
+  n2({ type: Boolean, attribute: "readonly", reflect: true })
 ], SDSTextField.prototype, "readOnly", 2);
 __decorateClass([
-  n2({ type: Boolean })
+  n2({ type: String, reflect: true })
 ], SDSTextField.prototype, "autocomplete", 2);
+__decorateClass([
+  n2({ type: Boolean, reflect: true })
+], SDSTextField.prototype, "required", 2);
+__decorateClass([
+  n2({ type: String, reflect: true })
+], SDSTextField.prototype, "pattern", 2);
+__decorateClass([
+  n2({ type: Number, reflect: true })
+], SDSTextField.prototype, "minlength", 2);
+__decorateClass([
+  n2({ type: Number, reflect: true })
+], SDSTextField.prototype, "maxlength", 2);
 __decorateClass([
   r2()
 ], SDSTextField.prototype, "hasIcon", 2);