@govtechsg/sgds-web-component 1.1.0-rc.0 → 1.1.0

package/components/Input/sgds-input.cjs.js

@@ -72,20 +72,23 @@ class SgdsInput extends sgdsElement["default"] {
     reportValidity() {
         return this.input.reportValidity();
     }
-    handleInvalid() {
-        this.invalid = true;
+    setCustomValidity(err) {
+        return this.input.setCustomValidity(err);
     }
-    handleChange(event) {
+    setInvalid(bool) {
+        this.invalid = bool;
+    }
+    _handleChange(event) {
         this.value = this.input.value;
         this.emit(event);
     }
-    handleFocus() {
+    _handleFocus() {
         this.emit("sgds-focus");
     }
-    handleBlur() {
+    _handleBlur() {
         this.emit("sgds-blur");
     }
-    handleKeyDown(event) {
+    _handleKeyDown(event) {
         const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
         // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
         // submitting to allow users to cancel the keydown event if they need to
@@ -98,12 +101,12 @@ class SgdsInput extends sgdsElement["default"] {
             });
         }
     }
-    handleDisabledChange() {
+    _handleDisabledChange() {
         // Disabled form controls are always valid, so we need to recheck validity when the state changes
         this.input.disabled = this.disabled;
         this.invalid = !this.input.checkValidity();
     }
-    handleValueChange() {
+    _handleValueChange() {
         this.invalid = !this.input.checkValidity();
         this.valid = this.input.checkValidity();
         // remove validation for input that is not required, is already dirty and has empty value
@@ -111,9 +114,8 @@ class SgdsInput extends sgdsElement["default"] {
             this.valid = false;
         }
     }
-    render() {
-        const input = staticHtml_js.html `
-      <input
+    _renderInput() {
+        return staticHtml_js.html `<input
         class=${classMap_js.classMap({
             "form-control": true,
             "is-invalid": this.hasFeedback && this.invalid,
@@ -133,17 +135,34 @@ class SgdsInput extends sgdsElement["default"] {
         .value=${live_js.live(this.value)}
         minlength=${ifDefined_js.ifDefined(this.minlength)}
         maxlength=${ifDefined_js.ifDefined(this.maxlength)}
-        @input=${() => this.handleChange("sgds-input")}
-        @change=${() => this.handleChange("sgds-change")}
-        @keydown=${this.handleKeyDown}
-        @invalid=${this.handleInvalid}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
+        @input=${() => this._handleChange("sgds-input")}
+        @change=${() => this._handleChange("sgds-change")}
+        @keydown=${this._handleKeyDown}
+        @invalid=${() => this.setInvalid(true)}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
       />
       ${this.hasFeedback
             ? staticHtml_js.html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
-            : ""}
+            : ""} `;
+    }
+    _renderFeedback() {
+        return this.hasFeedback
+            ? staticHtml_js.html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
+            : "";
+    }
+    _renderLabel() {
+        const labelTemplate = staticHtml_js.html ` <label for=${this.inputId} class="form-label">${this.label}</label> `;
+        return this.label && labelTemplate;
+    }
+    _renderHintText() {
+        const hintTextTemplate = staticHtml_js.html `
+      <small id="${this.inputId}Help" class="text-muted form-text">${this.hintText}</small>
     `;
+        return this.hintText && hintTextTemplate;
+    }
+    render() {
+        const input = staticHtml_js.html `${this._renderInput()}`;
         // if iconName is defined
         const inputWithIcon = staticHtml_js.html `
       <div class="sgds form-control-group ${this.inputClasses}">
@@ -152,12 +171,9 @@ class SgdsInput extends sgdsElement["default"] {
       </div>
     `;
         // if hintText is defined
-        const withHintText = staticHtml_js.html ` <small id="${this.inputId}Help" class="text-muted form-text">${this.hintText}</small> `;
-        // if label is defined
-        const withLabel = staticHtml_js.html ` <label for=${this.inputId} class="form-label">${this.label}</label> `;
         return staticHtml_js.html `
       <div class="d-flex flex-column w-100">
-        ${staticHtml_js.html `${this.label && withLabel} ${this.hintText && withHintText} ${this.icon ? inputWithIcon : input} `}
+        ${staticHtml_js.html `${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}
       </div>
     `;
     }
@@ -228,10 +244,10 @@ tslib.__decorate([
 ], SgdsInput.prototype, "valid", void 0);
 tslib.__decorate([
     watch.watch("disabled", { waitUntilFirstUpdate: true })
-], SgdsInput.prototype, "handleDisabledChange", null);
+], SgdsInput.prototype, "_handleDisabledChange", null);
 tslib.__decorate([
     watch.watch("value", { waitUntilFirstUpdate: true })
-], SgdsInput.prototype, "handleValueChange", null);
+], SgdsInput.prototype, "_handleValueChange", null);
 
 exports.SgdsInput = SgdsInput;
 exports["default"] = SgdsInput;

package/components/Input/sgds-input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.cjs.js","sources":["../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\n\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = SgdsElement.styles;\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement*/\n  @property({ reflect: true }) type:\n    | \"date\"\n    | \"datetime-local\"\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\" = \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Forwards classes to the native HTMLInputElement of the component. Can be used to insert any classes from bootstrap such as mt-2 */\n  @property({ reflect: true }) inputClasses: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /**@internal */\n  @state() invalid = false;\n  /**@internal */\n  @state() valid = false;\n\n  /**@internal */\n  private inputId: string = genId(\"input\", this.type);\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n    this.valid = this.input.checkValidity();\n    // remove validation for input that is not required, is already dirty and has empty value\n    if (!this.required && this.value === \"\") {\n      this.valid = false;\n    }\n  }\n\n  render() {\n    const input = html`\n      <input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid,\n          \"is-valid\": this.hasFeedback && this.valid,\n          [`${this.inputClasses}`]: this.inputClasses\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        @input=${() => this.handleChange(\"sgds-input\")}\n        @change=${() => this.handleChange(\"sgds-change\")}\n        @keydown=${this.handleKeyDown}\n        @invalid=${this.handleInvalid}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      />\n      ${this.hasFeedback\n        ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n        : \"\"}\n    `;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group ${this.inputClasses}\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n    const withHintText = html` <small id=\"${this.inputId}Help\" class=\"text-muted form-text\">${this.hintText}</small> `;\n\n    // if label is defined\n    const withLabel = html` <label for=${this.inputId} class=\"form-label\">${this.label}</label> `;\n\n    return html`\n      <div class=\"d-flex flex-column w-100\">\n        ${html`${this.label && withLabel} ${this.hintText && withHintText} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","unsafeSVG","__decorate","query","property","defaultValue","state","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-input.cjs.js","sources":["../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\n\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = SgdsElement.styles;\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement*/\n  @property({ reflect: true }) type:\n    | \"date\"\n    | \"datetime-local\"\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\" = \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Forwards classes to the native HTMLInputElement of the component. Can be used to insert any classes from bootstrap such as mt-2 */\n  @property({ reflect: true }) inputClasses: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /**@internal */\n  @state() invalid = false;\n  /**@internal */\n  @state() valid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n    this.valid = this.input.checkValidity();\n    // remove validation for input that is not required, is already dirty and has empty value\n    if (!this.required && this.value === \"\") {\n      this.valid = false;\n    }\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid,\n          \"is-valid\": this.hasFeedback && this.valid,\n          [`${this.inputClasses}`]: this.inputClasses\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n      />\n      ${this.hasFeedback\n        ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n        : \"\"} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html` <label for=${this.inputId} class=\"form-label\">${this.label}</label> `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html`\n      <small id=\"${this.inputId}Help\" class=\"text-muted form-text\">${this.hintText}</small>\n    `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group ${this.inputClasses}\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"d-flex flex-column w-100\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["SgdsElement","FormSubmitController","genId","html","classMap","ifDefined","live","unsafeSVG","__decorate","query","property","defaultValue","state","watch"],"mappings":"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"}

package/components/Input/sgds-input.d.ts

@@ -1,5 +1,6 @@
 import SgdsElement from "../../base/sgds-element";
 import type { SgdsFormControl } from "../../utils/form";
+import { FormSubmitController } from "../../utils/form";
 /**
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
  *
@@ -14,7 +15,7 @@ export declare class SgdsInput extends SgdsElement implements SgdsFormControl {
     /**@internal */
     input: HTMLInputElement;
     /**@internal */
-    private readonly formSubmitController;
+    protected readonly formSubmitController: FormSubmitController;
     /** The type of input which works the same as HTMLInputElement*/
     type: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
     /** The input's label  */
@@ -56,20 +57,25 @@ export declare class SgdsInput extends SgdsElement implements SgdsFormControl {
     /**@internal */
     valid: boolean;
     /**@internal */
-    private inputId;
+    protected inputId: string;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
     /** Sets blur on the input. */
     blur(): void;
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity(): boolean;
-    handleInvalid(): void;
-    handleChange(event: string): void;
-    handleFocus(): void;
-    handleBlur(): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleDisabledChange(): void;
-    handleValueChange(): void;
+    setCustomValidity(err: string): void;
+    setInvalid(bool: boolean): void;
+    protected _handleChange(event: string): void;
+    protected _handleFocus(): void;
+    protected _handleBlur(): void;
+    protected _handleKeyDown(event: KeyboardEvent): void;
+    _handleDisabledChange(): void;
+    _handleValueChange(): void;
+    protected _renderInput(): import("lit-html").TemplateResult;
+    protected _renderFeedback(): "" | import("lit-html").TemplateResult;
+    protected _renderLabel(): import("lit-html").TemplateResult;
+    protected _renderHintText(): import("lit-html").TemplateResult;
     render(): import("lit-html").TemplateResult;
 }
 export default SgdsInput;

package/components/Input/sgds-input.js

@@ -68,20 +68,23 @@ class SgdsInput extends SgdsElement {
     reportValidity() {
         return this.input.reportValidity();
     }
-    handleInvalid() {
-        this.invalid = true;
+    setCustomValidity(err) {
+        return this.input.setCustomValidity(err);
     }
-    handleChange(event) {
+    setInvalid(bool) {
+        this.invalid = bool;
+    }
+    _handleChange(event) {
         this.value = this.input.value;
         this.emit(event);
     }
-    handleFocus() {
+    _handleFocus() {
         this.emit("sgds-focus");
     }
-    handleBlur() {
+    _handleBlur() {
         this.emit("sgds-blur");
     }
-    handleKeyDown(event) {
+    _handleKeyDown(event) {
         const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
         // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
         // submitting to allow users to cancel the keydown event if they need to
@@ -94,12 +97,12 @@ class SgdsInput extends SgdsElement {
             });
         }
     }
-    handleDisabledChange() {
+    _handleDisabledChange() {
         // Disabled form controls are always valid, so we need to recheck validity when the state changes
         this.input.disabled = this.disabled;
         this.invalid = !this.input.checkValidity();
     }
-    handleValueChange() {
+    _handleValueChange() {
         this.invalid = !this.input.checkValidity();
         this.valid = this.input.checkValidity();
         // remove validation for input that is not required, is already dirty and has empty value
@@ -107,9 +110,8 @@ class SgdsInput extends SgdsElement {
             this.valid = false;
         }
     }
-    render() {
-        const input = html `
-      <input
+    _renderInput() {
+        return html `<input
         class=${classMap({
             "form-control": true,
             "is-invalid": this.hasFeedback && this.invalid,
@@ -129,17 +131,34 @@ class SgdsInput extends SgdsElement {
         .value=${live(this.value)}
         minlength=${ifDefined(this.minlength)}
         maxlength=${ifDefined(this.maxlength)}
-        @input=${() => this.handleChange("sgds-input")}
-        @change=${() => this.handleChange("sgds-change")}
-        @keydown=${this.handleKeyDown}
-        @invalid=${this.handleInvalid}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
+        @input=${() => this._handleChange("sgds-input")}
+        @change=${() => this._handleChange("sgds-change")}
+        @keydown=${this._handleKeyDown}
+        @invalid=${() => this.setInvalid(true)}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
       />
       ${this.hasFeedback
             ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
-            : ""}
+            : ""} `;
+    }
+    _renderFeedback() {
+        return this.hasFeedback
+            ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
+            : "";
+    }
+    _renderLabel() {
+        const labelTemplate = html ` <label for=${this.inputId} class="form-label">${this.label}</label> `;
+        return this.label && labelTemplate;
+    }
+    _renderHintText() {
+        const hintTextTemplate = html `
+      <small id="${this.inputId}Help" class="text-muted form-text">${this.hintText}</small>
     `;
+        return this.hintText && hintTextTemplate;
+    }
+    render() {
+        const input = html `${this._renderInput()}`;
         // if iconName is defined
         const inputWithIcon = html `
       <div class="sgds form-control-group ${this.inputClasses}">
@@ -148,12 +167,9 @@ class SgdsInput extends SgdsElement {
       </div>
     `;
         // if hintText is defined
-        const withHintText = html ` <small id="${this.inputId}Help" class="text-muted form-text">${this.hintText}</small> `;
-        // if label is defined
-        const withLabel = html ` <label for=${this.inputId} class="form-label">${this.label}</label> `;
         return html `
       <div class="d-flex flex-column w-100">
-        ${html `${this.label && withLabel} ${this.hintText && withHintText} ${this.icon ? inputWithIcon : input} `}
+        ${html `${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}
       </div>
     `;
     }
@@ -224,10 +240,10 @@ __decorate([
 ], SgdsInput.prototype, "valid", void 0);
 __decorate([
     watch("disabled", { waitUntilFirstUpdate: true })
-], SgdsInput.prototype, "handleDisabledChange", null);
+], SgdsInput.prototype, "_handleDisabledChange", null);
 __decorate([
     watch("value", { waitUntilFirstUpdate: true })
-], SgdsInput.prototype, "handleValueChange", null);
+], SgdsInput.prototype, "_handleValueChange", null);
 
 export { SgdsInput, SgdsInput as default };
 //# sourceMappingURL=sgds-input.js.map

package/components/Input/sgds-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.js","sources":["../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\n\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = SgdsElement.styles;\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement*/\n  @property({ reflect: true }) type:\n    | \"date\"\n    | \"datetime-local\"\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\" = \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Forwards classes to the native HTMLInputElement of the component. Can be used to insert any classes from bootstrap such as mt-2 */\n  @property({ reflect: true }) inputClasses: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /**@internal */\n  @state() invalid = false;\n  /**@internal */\n  @state() valid = false;\n\n  /**@internal */\n  private inputId: string = genId(\"input\", this.type);\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n    this.valid = this.input.checkValidity();\n    // remove validation for input that is not required, is already dirty and has empty value\n    if (!this.required && this.value === \"\") {\n      this.valid = false;\n    }\n  }\n\n  render() {\n    const input = html`\n      <input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid,\n          \"is-valid\": this.hasFeedback && this.valid,\n          [`${this.inputClasses}`]: this.inputClasses\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        @input=${() => this.handleChange(\"sgds-input\")}\n        @change=${() => this.handleChange(\"sgds-change\")}\n        @keydown=${this.handleKeyDown}\n        @invalid=${this.handleInvalid}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      />\n      ${this.hasFeedback\n        ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n        : \"\"}\n    `;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group ${this.inputClasses}\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n    const withHintText = html` <small id=\"${this.inputId}Help\" class=\"text-muted form-text\">${this.hintText}</small> `;\n\n    // if label is defined\n    const withLabel = html` <label for=${this.inputId} class=\"form-label\">${this.label}</label> `;\n\n    return html`\n      <div class=\"d-flex flex-column w-100\">\n        ${html`${this.label && withLabel} ${this.hintText && withHintText} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sgds-input.js","sources":["../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\n\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends SgdsElement implements SgdsFormControl {\n  static styles = SgdsElement.styles;\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement*/\n  @property({ reflect: true }) type:\n    | \"date\"\n    | \"datetime-local\"\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\" = \"text\";\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n  /**The input's name attribute */\n  @property({ reflect: true }) name: string;\n  /**Forwards classes to the native HTMLInputElement of the component. Can be used to insert any classes from bootstrap such as mt-2 */\n  @property({ reflect: true }) inputClasses: string;\n  /**Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n  /**Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n  /**A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n  /**Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /**@internal */\n  @state() invalid = false;\n  /**@internal */\n  @state() valid = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n    this.valid = this.input.checkValidity();\n    // remove validation for input that is not required, is already dirty and has empty value\n    if (!this.required && this.value === \"\") {\n      this.valid = false;\n    }\n  }\n  protected _renderInput() {\n    return html`<input\n        class=${classMap({\n          \"form-control\": true,\n          \"is-invalid\": this.hasFeedback && this.invalid,\n          \"is-valid\": this.hasFeedback && this.valid,\n          [`${this.inputClasses}`]: this.inputClasses\n        })}\n        type=${this.type}\n        id=${this.inputId}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        aria-invalid=${this.invalid ? \"true\" : \"false\"}\n        pattern=${ifDefined(this.pattern)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${live(this.value)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        @input=${() => this._handleChange(\"sgds-input\")}\n        @change=${() => this._handleChange(\"sgds-change\")}\n        @keydown=${this._handleKeyDown}\n        @invalid=${() => this.setInvalid(true)}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n      />\n      ${this.hasFeedback\n        ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n        : \"\"} `;\n  }\n  protected _renderFeedback() {\n    return this.hasFeedback\n      ? html`<div id=\"${this.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>`\n      : \"\";\n  }\n  protected _renderLabel() {\n    const labelTemplate = html` <label for=${this.inputId} class=\"form-label\">${this.label}</label> `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html`\n      <small id=\"${this.inputId}Help\" class=\"text-muted form-text\">${this.hintText}</small>\n    `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    const input = html`${this._renderInput()}`;\n    // if iconName is defined\n    const inputWithIcon = html`\n      <div class=\"sgds form-control-group ${this.inputClasses}\">\n        <span class=\"form-control-icon\"> ${unsafeSVG(this.icon)} </span>\n        ${input}\n      </div>\n    `;\n    // if hintText is defined\n\n    return html`\n      <div class=\"d-flex flex-column w-100\">\n        ${html`${this._renderLabel()} ${this._renderHintText()} ${this.icon ? inputWithIcon : input} `}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":[],"mappings":"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"}

package/components/Mainnav/index.umd.js

@@ -7337,7 +7337,6 @@
    * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed
    * @event sgds-hide - Emitted event when hide instance is called
    * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed
-   * @event sgds-select - Emitted event when a slot item is selected
    */
   class DropdownElement extends SgdsElement {
       constructor() {