@govtechsg/sgds-web-component 3.1.0-rc.6 → 3.1.0

package/base/button.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--btn-color)}.btn-outline{border:var(--btn-border-width) solid var(--btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=button.js.map

package/base/select-element.d.ts

@@ -0,0 +1,80 @@
+import { SgdsFormControl } from "../utils/formSubmitController";
+import { DropdownListElement } from "./dropdown-list-element";
+declare const SelectElement_base: (new (...args: any[]) => import("../utils/validatorMixin").ToBeValidatedElementInterface) & typeof DropdownListElement;
+export declare class SelectElement extends SelectElement_base implements SgdsFormControl {
+    static styles: import("lit").CSSResult[];
+    /** The input's label  */
+    label: string;
+    /** The input's hint text below the label */
+    hintText: string;
+    /** The input's name attribute */
+    name: string;
+    /** The input's placeholder text. */
+    placeholder: string;
+    /** Autofocus the input */
+    autofocus: boolean;
+    /** Disables the input. */
+    disabled: boolean;
+    /** Makes the input a required field. */
+    required: boolean;
+    /** Makes the input readonly. */
+    readonly: boolean;
+    /**
+     * IMPORTANT:
+     * We still expose `.value` externally, but this is now the underlying ID or data
+     * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.
+     */
+    value: string;
+    protected displayValue: string;
+    /** @internal Gets or sets the default value used to reset this element. */
+    defaultValue: string;
+    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+    hasFeedback: boolean;
+    /** Feedback text for error state when validated */
+    invalidFeedback: string;
+    /** Marks the component as invalid. Replace the pseudo :invalid selector. */
+    invalid: boolean;
+    /** The list of items to display in the dropdown.
+     * `interface SgdsComboBoxItemData {
+     * label: string;
+     * value: string;
+     * }`
+     */
+    menuList: SgdsSelectItemData[];
+    /** Track selected items (even for single-select, but it will have at most one). */
+    protected selectedItems: SgdsSelectItemData[];
+    /** @internal Managed filtered menu on the fly with input change*/
+    protected filteredMenuList: SgdsSelectItemData[];
+    protected _isTouched: boolean;
+    constructor();
+    protected _input: Promise<HTMLInputElement>;
+    connectedCallback(): void;
+    /**
+     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+     * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+     */
+    reportValidity(): boolean;
+    /**
+     * Checks for validity without any native error popup message
+     */
+    checkValidity(): boolean;
+    /**
+     * Returns the ValidityState object
+     */
+    get validity(): ValidityState;
+    /**
+     * Returns the validation message based on the ValidityState
+     */
+    get validationMessage(): string;
+    protected _controlId: string;
+    protected _renderFeedback(): import("lit-html").TemplateResult<1>;
+    protected _renderHintText(): import("lit-html").TemplateResult<1>;
+    protected _labelId: string;
+    protected _renderLabel(): import("lit-html").TemplateResult<1>;
+    protected _handleClick(): any;
+}
+export interface SgdsSelectItemData {
+    label: string;
+    value: string;
+}
+export {};

package/base/select-element.js

@@ -0,0 +1,201 @@
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property, state, queryAsync } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import css_248z from '../components/Dropdown/dropdown-menu.js';
+import css_248z$2 from '../styles/feedback.js';
+import css_248z$1 from '../styles/form-hint.js';
+import { defaultValue } from '../utils/defaultvalue.js';
+import genId from '../utils/generateId.js';
+import { SgdsFormValidatorMixin } from '../utils/validatorMixin.js';
+import { DropdownListElement } from './dropdown-list-element.js';
+
+class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) {
+    constructor() {
+        super();
+        /** The input's label  */
+        this.label = "";
+        /** The input's hint text below the label */
+        this.hintText = "";
+        /** Autofocus the input */
+        this.autofocus = false;
+        /** Disables the input. */
+        this.disabled = false;
+        /** Makes the input a required field. */
+        this.required = false;
+        /** Makes the input readonly. */
+        this.readonly = false;
+        /**
+         * IMPORTANT:
+         * We still expose `.value` externally, but this is now the underlying ID or data
+         * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.
+         */
+        this.value = "";
+        this.displayValue = "";
+        /** @internal Gets or sets the default value used to reset this element. */
+        this.defaultValue = "";
+        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+        this.hasFeedback = false;
+        /** Feedback text for error state when validated */
+        this.invalidFeedback = "";
+        /** Marks the component as invalid. Replace the pseudo :invalid selector. */
+        this.invalid = false;
+        /** The list of items to display in the dropdown.
+         * `interface SgdsComboBoxItemData {
+         * label: string;
+         * value: string;
+         * }`
+         */
+        this.menuList = [];
+        /** Track selected items (even for single-select, but it will have at most one). */
+        this.selectedItems = [];
+        /** @internal Managed filtered menu on the fly with input change*/
+        this.filteredMenuList = [];
+        this._isTouched = false;
+        this._controlId = genId("input");
+        this._labelId = genId("label");
+        /** @internal */
+        this.modifierOpt = [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 8]
+                }
+            }
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("blur", async () => {
+            this.invalid = !this._mixinReportValidity();
+        });
+        if (this.readonly) {
+            this._handleKeyboardMenuEvent = null;
+            this._handleKeyboardMenuItemsEvent = null;
+        }
+    }
+    /**
+     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+     * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+     */
+    reportValidity() {
+        return this._mixinReportValidity();
+    }
+    /**
+     * Checks for validity without any native error popup message
+     */
+    checkValidity() {
+        return this._mixinCheckValidity();
+    }
+    /**
+     * Returns the ValidityState object
+     */
+    get validity() {
+        return this._mixinGetValidity();
+    }
+    /**
+     * Returns the validation message based on the ValidityState
+     */
+    get validationMessage() {
+        return this._mixinGetValidationMessage();
+    }
+    _renderFeedback() {
+        return this.invalid && this.hasFeedback
+            ? html ` <div class="invalid-feedback-container">
+          <slot name="invalidIcon">
+            <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
+          </slot>
+          <div id="${this._controlId}-invalid" class="invalid-feedback">
+            ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
+          </div>
+        </div>`
+            : html `${this._renderHintText()}`;
+    }
+    _renderHintText() {
+        const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
+        return this.hintText && hintTextTemplate;
+    }
+    _renderLabel() {
+        const labelTemplate = html `
+      <label
+        for=${this._controlId}
+        id=${this._labelId}
+        class=${classMap({
+            "form-label": true,
+            required: this.required
+        })}
+        >${this.label}</label
+      >
+    `;
+        return this.label && labelTemplate;
+    }
+    _handleClick() {
+        if (this.readonly) {
+            return null;
+        }
+        if (!this.menuIsOpen) {
+            this.showMenu();
+        }
+        else {
+            this.hideMenu();
+        }
+    }
+}
+SelectElement.styles = [...DropdownListElement.styles, css_248z, css_248z$1, css_248z$2];
+__decorate([
+    property({ reflect: true })
+], SelectElement.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], SelectElement.prototype, "hintText", void 0);
+__decorate([
+    property({ reflect: true })
+], SelectElement.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SelectElement.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectElement.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectElement.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SelectElement.prototype, "value", void 0);
+__decorate([
+    state()
+], SelectElement.prototype, "displayValue", void 0);
+__decorate([
+    defaultValue()
+], SelectElement.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectElement.prototype, "hasFeedback", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SelectElement.prototype, "invalidFeedback", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectElement.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Array })
+], SelectElement.prototype, "menuList", void 0);
+__decorate([
+    state()
+], SelectElement.prototype, "selectedItems", void 0);
+__decorate([
+    state()
+], SelectElement.prototype, "filteredMenuList", void 0);
+__decorate([
+    queryAsync("input.form-control")
+], SelectElement.prototype, "_input", void 0);
+
+export { SelectElement };
+//# sourceMappingURL=select-element.js.map

package/base/select-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-element.js","sources":["../../src/base/select-element.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport dropdownMenuStyle from \"../components/Dropdown/dropdown-menu.css\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport hintTextStyles from \"../styles/form-hint.css\";\nimport { defaultValue } from \"../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../utils/formSubmitController\";\nimport generateId from \"../utils/generateId\";\nimport { SgdsFormValidatorMixin } from \"../utils/validatorMixin\";\nimport { DropdownListElement } from \"./dropdown-list-element\";\n\nexport class SelectElement extends SgdsFormValidatorMixin(DropdownListElement) implements SgdsFormControl {\n  static styles = [...DropdownListElement.styles, dropdownMenuStyle, hintTextStyles, feedbackStyles];\n\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** The input's name attribute */\n  @property({ reflect: true }) name: string;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /**\n   * IMPORTANT:\n   * We still expose `.value` externally, but this is now the underlying ID or data\n   * (e.g. 1, 2, 'abc', ...), not the label that appears in the input box.\n   */\n  @property({ type: String, reflect: true })\n  value = \"\";\n\n  @state()\n  protected displayValue = \"\";\n\n  /** @internal Gets or sets the default value used to reset 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\n  /** Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The list of items to display in the dropdown.\n   * `interface SgdsComboBoxItemData {\n   * label: string;\n   * value: string;\n   * }`\n   */\n  @property({ type: Array }) menuList: SgdsSelectItemData[] = [];\n  /** Track selected items (even for single-select, but it will have at most one). */\n  @state()\n  protected selectedItems: SgdsSelectItemData[] = [];\n  /** @internal Managed filtered menu on the fly with input change*/\n  @state()\n  protected filteredMenuList: SgdsSelectItemData[] = [];\n\n  protected _isTouched = false;\n\n  constructor() {\n    super();\n    /** @internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 8]\n        }\n      }\n    ];\n  }\n\n  @queryAsync(\"input.form-control\") protected _input: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"blur\", async () => {\n      this.invalid = !this._mixinReportValidity();\n    });\n    if (this.readonly) {\n      this._handleKeyboardMenuEvent = null;\n      this._handleKeyboardMenuItemsEvent = null;\n    }\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  protected _controlId = generateId(\"input\");\n  protected _renderFeedback() {\n    return this.invalid && this.hasFeedback\n      ? html` <div class=\"invalid-feedback-container\">\n          <slot name=\"invalidIcon\">\n            <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          </slot>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  protected _labelId = generateId(\"label\");\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _handleClick() {\n    if (this.readonly) {\n      return null;\n    }\n    if (!this.menuIsOpen) {\n      this.showMenu();\n    } else {\n      this.hideMenu();\n    }\n  }\n}\n\nexport interface SgdsSelectItemData {\n  label: string;\n  value: string;\n}\n"],"names":["generateId","dropdownMenuStyle","hintTextStyles","feedbackStyles"],"mappings":"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"}

package/components/Accordion/index.umd.js

@@ -4688,10 +4688,6 @@
           /** Disables the accordion item */
           this.disabled = false;
       }
-      firstUpdated() {
-          if (!this.open)
-              this.body.classList.add("hidden");
-      }
       handleSummaryClick() {
           if (this.open) {
               this.hide();
@@ -4770,6 +4766,7 @@
           return waitForEvent(this, "sgds-after-hide");
       }
       render() {
+          const isHydrated = this.hasUpdated;
           return html `
       <div class="accordion-item">
         <button
@@ -4792,7 +4789,12 @@
             <sgds-icon name="chevron-down" size=${this.getAttribute("density") === "compact" ? "md" : "lg"}></sgds-icon>
           </slot>
         </button>
-        <div class="accordion-body">
+        <div
+          class=${classMap({
+            "accordion-body": true,
+            hidden: !this.open && !isHydrated
+        })}
+        >
           <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>