@govtechsg/sgds-web-component 3.2.0 → 3.3.0

package/{components → src/components}/Datepicker/sgds-datepicker.d.ts

@@ -32,7 +32,17 @@ export declare class SgdsDatepicker extends SgdsDatepicker_base implements SgdsF
     name: string;
     /** When true, adds disabled attribute to input and button element */
     disabled: boolean;
-    /** The initial value of DatePicker on first load for single & range mode as array of string. eg.'["22/12/2023"]' for single & '["22/12/2023","25/12/2023"]' for range respectively  */
+    /** Sets the initial value of the datepicker. Replaces deprecated `initialValue`.
+     * Pass in dates in this format `dd/mm/yyyy` for single mode and  `dd/mm/yyyy - dd/mm/yyyy` for range mode
+     * For example, `value="22/12/2023"` for single mode or `value="22/12/2023 - 25/12/2023"` for range mode
+     */
+    value: string;
+    /**
+     * @deprecated since v3.1.1 in favour of `value`.
+     * The initial value of DatePicker on first load for single &
+     * range mode as array of string. eg.'["22/12/2023"]' for single &
+     * '["22/12/2023","25/12/2023"]' for range respectively
+     * */
     initialValue: string[];
     private dateFormat;
     /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
@@ -55,8 +65,8 @@ export declare class SgdsDatepicker extends SgdsDatepicker_base implements SgdsF
     drop: "up" | "down";
     /** Provides the date context for Calendar to present the appropriate view. Defaults to today's date */
     displayDate: Date;
-    /**@internal */
-    value: string;
+    /**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. */
+    defaultValue: string;
     /**@internal */
     invalid: boolean;
     private view;

package/{components → src/components}/Input/sgds-input.d.ts

@@ -7,7 +7,8 @@ declare const SgdsInput_base: (new (...args: any[]) => import("../../utils/valid
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
  *
  * @slot icon - The slot for leading icon of text input
- *
+ * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true
+ * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot
  * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
  * @event sgds-input - Emitted when the control receives input and its value changes.
  * @event sgds-focus - Emitted when input is in focus.
@@ -64,6 +65,7 @@ export declare class SgdsInput extends SgdsInput_base implements SgdsFormControl
     /**The input's value attribute. */
     value: string;
     protected _isTouched: boolean;
+    private _showPassword;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
     /** Sets blur on the input. */
@@ -98,6 +100,8 @@ export declare class SgdsInput extends SgdsInput_base implements SgdsFormControl
     _handleIsTouched(): void;
     _handleDisabledChange(): void;
     protected _renderInput(): import("lit-html").TemplateResult;
+    protected _renderPasswordToggle(): import("lit-html").TemplateResult;
+    protected _inputType(): "number" | "text" | "email" | "password" | "search" | "tel" | "time" | "url";
     protected _renderFeedback(): import("lit-html").TemplateResult;
     protected _renderLabel(): import("lit-html").TemplateResult;
     protected _renderHintText(): import("lit-html").TemplateResult;

package/{components → src/components}/Link/sgds-link.d.ts

@@ -7,9 +7,9 @@ import SgdsElement from "../../base/sgds-element";
 export declare class SgdsLink extends SgdsElement {
     static styles: import("lit").CSSResult[];
     /** Determines the size of the link */
-    size: "sm" | "md" | "lg";
+    size: "xs" | "sm" | "md" | "lg";
     /** when true, sets the active stylings of the link */
-    variant: "primary" | "danger" | "light" | "dark";
+    variant: "primary" | "danger" | "neutral" | "light" | "dark";
     private _handleSlotChange;
     render(): import("lit-html").TemplateResult<1>;
 }

package/themes/day.css

@@ -129,6 +129,7 @@
   /* Semantic - Form Color */
   --sgds-form-surface-default: var(--sgds-gray-000);
   --sgds-form-surface-emphasis: var(--sgds-gray-700);
+  --sgds-form-surface-raised: var(--sgds-gray-100);
   --sgds-form-surface-subtle: var(--sgds-gray-400);
   --sgds-form-surface-muted: var(--sgds-gray-200);
   --sgds-form-surface-inverse: var(--sgds-gray-900);

package/themes/night.css

@@ -129,6 +129,7 @@
   /* Semantic - Form Color */
   --sgds-form-surface-default: var(--sgds-gray-900);
   --sgds-form-surface-emphasis: var(--sgds-gray-200);
+  --sgds-form-surface-raised: var(--sgds-gray-800);
   --sgds-form-surface-subtle: var(--sgds-gray-500);
   --sgds-form-surface-muted: var(--sgds-gray-700);
   --sgds-form-surface-inverse: var(--sgds-gray-000);

package/themes/root.css

@@ -132,6 +132,7 @@
   --sgds-font-weight-bold: 700;
 
   /* Primitive - Font Size */
+  --sgds-font-size-0: 0.75rem;
   --sgds-font-size-1: 0.875rem;
   --sgds-font-size-2: 1rem;
   --sgds-font-size-3: 1.25rem;
@@ -161,6 +162,7 @@
   --sgds-line-height-body: 1.5;
   --sgds-line-height-heading: 1.2;
   --sgds-line-height-min: 20px;
+  --sgds-line-height-16: 16px;
 
   /* Primitive - Opacity */
   --sgds-opacity-0: 0;

package/utils/slot.js

@@ -47,6 +47,23 @@ class HasSlotController {
         }
     }
 }
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+function getTextContent(slot) {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent.trim();
+        }
+    });
+    return text;
+}
 
-export { HasSlotController };
+export { HasSlotController, getTextContent };
 //# sourceMappingURL=slot.js.map

package/utils/slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot.js","sources":["../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n  host: ReactiveControllerHost & Element;\n  slotNames: string[] = [];\n\n  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n    (this.host = host).addController(this);\n    this.slotNames = slotNames;\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  private hasDefaultSlot() {\n    return [...this.host.childNodes].some(node => {\n      if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n        return true;\n      }\n\n      if (node.nodeType === node.ELEMENT_NODE) {\n        const el = node as HTMLElement;\n        const tagName = el.tagName.toLowerCase();\n\n        // Ignore visually hidden elements since they aren't rendered\n        if (tagName === \"sl-visually-hidden\") {\n          return false;\n        }\n\n        // If it doesn't have a slot attribute, it's part of the default slot\n        if (!el.hasAttribute(\"slot\")) {\n          return true;\n        }\n      }\n\n      return false;\n    });\n  }\n\n  private hasNamedSlot(name: string) {\n    return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n  }\n\n  test(slotName: string) {\n    return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n  }\n\n  hostConnected() {\n    this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n  }\n\n  hostDisconnected() {\n    this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n  }\n\n  handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    if ((this.slotNames.includes(\"[default]\") && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {\n      this.host.requestUpdate();\n    }\n  }\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = \"\";\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement | undefined | null): string {\n  if (!slot) {\n    return \"\";\n  }\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = \"\";\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n"],"names":[],"mappings":"MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF;;;;"}
+{"version":3,"file":"slot.js","sources":["../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n  host: ReactiveControllerHost & Element;\n  slotNames: string[] = [];\n\n  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n    (this.host = host).addController(this);\n    this.slotNames = slotNames;\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  private hasDefaultSlot() {\n    return [...this.host.childNodes].some(node => {\n      if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n        return true;\n      }\n\n      if (node.nodeType === node.ELEMENT_NODE) {\n        const el = node as HTMLElement;\n        const tagName = el.tagName.toLowerCase();\n\n        // Ignore visually hidden elements since they aren't rendered\n        if (tagName === \"sl-visually-hidden\") {\n          return false;\n        }\n\n        // If it doesn't have a slot attribute, it's part of the default slot\n        if (!el.hasAttribute(\"slot\")) {\n          return true;\n        }\n      }\n\n      return false;\n    });\n  }\n\n  private hasNamedSlot(name: string) {\n    return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n  }\n\n  test(slotName: string) {\n    return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n  }\n\n  hostConnected() {\n    this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n  }\n\n  hostDisconnected() {\n    this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n  }\n\n  handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    if ((this.slotNames.includes(\"[default]\") && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {\n      this.host.requestUpdate();\n    }\n  }\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = \"\";\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement | undefined | null): string {\n  if (!slot) {\n    return \"\";\n  }\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = \"\";\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent.trim();\n    }\n  });\n\n  return text;\n}\n"],"names":[],"mappings":"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"}