@govtechsg/sgds-web-component 3.0.0-rc.1 → 3.0.0-rc.2

package/components/Toast/sgds-toast.d.ts

@@ -6,6 +6,7 @@ declare const SgdsToast_base: typeof SgdsElement & import("@open-wc/dedupe-mixin
  *
  * @slot default - The content to pass into toast's body
  * @slot action - The content to pass into toast's action
+ * @slot icon - The icon in toast
  *
  *
  * @event sgds-show - Emitted on show.
@@ -36,7 +37,7 @@ export declare class SgdsToast extends SgdsToast_base {
     /**The variant styles of toast */
     variant: "success" | "warning" | "danger" | "info";
     /** Controls whether or not the Toast is dismissible */
-    dismissable: boolean;
+    dismissible: boolean;
     /** Shows the toast */
     showToast(): Promise<void>;
     /** Hide the toast */

package/components/Toast/sgds-toast.js

@@ -15,6 +15,7 @@ import css_248z from './toast.js';
  *
  * @slot default - The content to pass into toast's body
  * @slot action - The content to pass into toast's action
+ * @slot icon - The icon in toast
  *
  *
  * @event sgds-show - Emitted on show.
@@ -40,7 +41,7 @@ class SgdsToast extends ScopedElementsMixin(SgdsElement) {
         /**The variant styles of toast */
         this.variant = "info";
         /** Controls whether or not the Toast is dismissible */
-        this.dismissable = false;
+        this.dismissible = false;
     }
     /**@internal */
     static get scopedElements() {
@@ -113,28 +114,15 @@ class SgdsToast extends ScopedElementsMixin(SgdsElement) {
         aria-live="assertive"
         aria-atomic="true"
       >
-        <i>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-airplane"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"
-            ></path>
-          </svg>
-        </i>
+        <slot name="icon"></slot>
         <div class="toast-content">
           <div class="toast-body">
             <strong>${this.title}</strong>
-            <slot></slot>
+            <span><slot></slot></span>
           </div>
           <slot class="toast-action" name="action"></slot>
         </div>
-        ${this.dismissable
+        ${this.dismissible
             ? html `<sgds-close-button
               class="close-btn"
               ariaLabel="close toast"
@@ -169,7 +157,7 @@ __decorate([
 ], SgdsToast.prototype, "variant", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], SgdsToast.prototype, "dismissable", void 0);
+], SgdsToast.prototype, "dismissible", void 0);
 __decorate([
     watch("show", { waitUntilFirstUpdate: true })
 ], SgdsToast.prototype, "handleShowChange", null);

package/components/Toast/sgds-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-toast.js","sources":["../../../src/components/Toast/sgds-toast.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html, nothing } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { animateTo } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport toastStyle from \"./toast.css\";\n/**\n * @summary Toast allows you to convey quick messaging notifications to the user.\n *\n * @slot default - The content to pass into toast's body \n * @slot action - The content to pass into toast's action  \n * \n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n \n * @cssproperty --toast-icon-margin-right - The margin right between toast's icon and title in its header.\n */\nexport class SgdsToast extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, toastStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n\n  /**@internal */\n  @query(\"div.toast\") toast: HTMLElement;\n  /** Controls the appearance of toast */\n  @property({ type: Boolean, reflect: true }) show = false;\n  /** The header title of toast. It is required to assign a title to toast */\n  @property({ type: String, reflect: true }) title = \"Title\";\n  /** Controls whether the toast has fade animation during its appearance/disappearance */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n  /** Controls if the toast will hide itself after the delay time. Works with delay property */\n  @property({ type: Boolean, reflect: true }) autohide = false;\n  /** The amount of time taken in miliseconds for toast to disappear after its first render. It takes effect only when autohide is set to true. Defaults to 5000ms */\n  @property({ type: Number, reflect: true }) delay = 5000;\n  /**The variant styles of toast */\n  @property({ type: String, reflect: true }) variant: \"success\" | \"warning\" | \"danger\" | \"info\" = \"info\";\n  /** Controls whether or not the Toast is dismissible */\n  @property({ type: Boolean, reflect: true }) dismissable = false;\n\n  /** Shows the toast */\n  public async showToast() {\n    if (this.show) {\n      return;\n    }\n\n    this.show = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the toast */\n  public async hideToast() {\n    if (!this.show) {\n      return;\n    }\n    this.show = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  /** @internal */\n  handleCloseClick() {\n    this.show = false;\n    this.emit(\"sgds-close\");\n  }\n  /**@internal */\n  @watch(\"show\", { waitUntilFirstUpdate: true })\n  async handleShowChange() {\n    if (this.show) {\n      this.emit(\"sgds-show\");\n      this.toast.classList.remove(\"d-none\");\n      const toastAnimation = getAnimation(this, \"toast.show\");\n\n      if (!this.noAnimation) {\n        await animateTo(this.toast, toastAnimation.keyframes, toastAnimation.options);\n      }\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      this.emit(\"sgds-hide\");\n\n      const toastAnimation = getAnimation(this, \"toast.hide\");\n      if (!this.noAnimation) {\n        await animateTo(this.toast, toastAnimation.keyframes, toastAnimation.options);\n      }\n      this.toast.classList.add(\"d-none\");\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  protected firstUpdated(): void {\n    if (!this.show) {\n      this.toast.classList.add(\"d-none\");\n    }\n\n    if (this._actionNodes.length === 0) {\n      return this.shadowRoot.querySelector(\"slot[name='action']\")?.classList.add(\"d-none\");\n    }\n  }\n\n  @queryAssignedNodes({ slot: \"action\", flatten: true })\n  _actionNodes!: Array<Node>;\n\n  render() {\n    if (this.autohide && this.show) {\n      setTimeout(() => {\n        this.show = false;\n      }, this.delay);\n    }\n    return html`\n      <div\n        class=\"toast\"\n        role=\"alert\"\n        aria-hidden=${this.show ? \"false\" : \"true\"}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n      >\n        <i>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-airplane\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z\"\n            ></path>\n          </svg>\n        </i>\n        <div class=\"toast-content\">\n          <div class=\"toast-body\">\n            <strong>${this.title}</strong>\n            <slot></slot>\n          </div>\n          <slot class=\"toast-action\" name=\"action\"></slot>\n        </div>\n        ${this.dismissable\n          ? html`<sgds-close-button\n              class=\"close-btn\"\n              ariaLabel=\"close toast\"\n              @click=${this.handleCloseClick}\n            ></sgds-close-button>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsToast;\n\nsetDefaultAnimation(\"toast.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400, easing: \"ease\" }\n});\nsetDefaultAnimation(\"toast.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400, easing: \"ease\" }\n});\n"],"names":["toastStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-toast.js","sources":["../../../src/components/Toast/sgds-toast.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html, nothing } from \"lit\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { animateTo } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport toastStyle from \"./toast.css\";\n/**\n * @summary Toast allows you to convey quick messaging notifications to the user.\n *\n * @slot default - The content to pass into toast's body \n * @slot action - The content to pass into toast's action  \n * @slot icon - The icon in toast\n * \n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n \n * @cssproperty --toast-icon-margin-right - The margin right between toast's icon and title in its header.\n */\nexport class SgdsToast extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, toastStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n\n  /**@internal */\n  @query(\"div.toast\") toast: HTMLElement;\n  /** Controls the appearance of toast */\n  @property({ type: Boolean, reflect: true }) show = false;\n  /** The header title of toast. It is required to assign a title to toast */\n  @property({ type: String, reflect: true }) title = \"Title\";\n  /** Controls whether the toast has fade animation during its appearance/disappearance */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n  /** Controls if the toast will hide itself after the delay time. Works with delay property */\n  @property({ type: Boolean, reflect: true }) autohide = false;\n  /** The amount of time taken in miliseconds for toast to disappear after its first render. It takes effect only when autohide is set to true. Defaults to 5000ms */\n  @property({ type: Number, reflect: true }) delay = 5000;\n  /**The variant styles of toast */\n  @property({ type: String, reflect: true }) variant: \"success\" | \"warning\" | \"danger\" | \"info\" = \"info\";\n  /** Controls whether or not the Toast is dismissible */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Shows the toast */\n  public async showToast() {\n    if (this.show) {\n      return;\n    }\n\n    this.show = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the toast */\n  public async hideToast() {\n    if (!this.show) {\n      return;\n    }\n    this.show = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  /** @internal */\n  handleCloseClick() {\n    this.show = false;\n    this.emit(\"sgds-close\");\n  }\n  /**@internal */\n  @watch(\"show\", { waitUntilFirstUpdate: true })\n  async handleShowChange() {\n    if (this.show) {\n      this.emit(\"sgds-show\");\n      this.toast.classList.remove(\"d-none\");\n      const toastAnimation = getAnimation(this, \"toast.show\");\n\n      if (!this.noAnimation) {\n        await animateTo(this.toast, toastAnimation.keyframes, toastAnimation.options);\n      }\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      this.emit(\"sgds-hide\");\n\n      const toastAnimation = getAnimation(this, \"toast.hide\");\n      if (!this.noAnimation) {\n        await animateTo(this.toast, toastAnimation.keyframes, toastAnimation.options);\n      }\n      this.toast.classList.add(\"d-none\");\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  protected firstUpdated(): void {\n    if (!this.show) {\n      this.toast.classList.add(\"d-none\");\n    }\n\n    if (this._actionNodes.length === 0) {\n      return this.shadowRoot.querySelector(\"slot[name='action']\")?.classList.add(\"d-none\");\n    }\n  }\n\n  @queryAssignedNodes({ slot: \"action\", flatten: true })\n  _actionNodes!: Array<Node>;\n\n  render() {\n    if (this.autohide && this.show) {\n      setTimeout(() => {\n        this.show = false;\n      }, this.delay);\n    }\n    return html`\n      <div\n        class=\"toast\"\n        role=\"alert\"\n        aria-hidden=${this.show ? \"false\" : \"true\"}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n      >\n        <slot name=\"icon\"></slot>\n        <div class=\"toast-content\">\n          <div class=\"toast-body\">\n            <strong>${this.title}</strong>\n            <span><slot></slot></span>\n          </div>\n          <slot class=\"toast-action\" name=\"action\"></slot>\n        </div>\n        ${this.dismissible\n          ? html`<sgds-close-button\n              class=\"close-btn\"\n              ariaLabel=\"close toast\"\n              @click=${this.handleCloseClick}\n            ></sgds-close-button>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsToast;\n\nsetDefaultAnimation(\"toast.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400, easing: \"ease\" }\n});\nsetDefaultAnimation(\"toast.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400, easing: \"ease\" }\n});\n"],"names":["toastStyle"],"mappings":"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"}

package/components/Toast/toast.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-toast-border-radius:var(--sgds-border-radius-md)}.toast{--toast-border-color:var(--sgds-gray-800);--toast-header-color:light-dark(var(--sgds-gray-800),var(--sgds-gray-200));--toast-header-icon-color:var(--sgds-body-color);align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-subtitle-color);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md) var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;color:var(--sgds-gray-600);gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-action{word-wrap:break-word;color:var(--sgds-primary-color)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
+var css_248z = css`:host{--sgds-toast-border-radius:var(--sgds-border-radius-md)}:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-default-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-primary-color)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=toast.js.map

package/components/Tooltip/index.umd.js

@@ -8322,8 +8322,8 @@
   class SgdsTooltip extends SgdsElement {
       constructor() {
           super(...arguments);
-          this.myTooltip = createRef();
-          this.bsTooltip = null;
+          this._myTooltip = createRef();
+          this._bsTooltip = null;
           /** The tooltip's content. Content has to be textual */
           this.content = "";
           /** The placement of tooltip relative to its target */
@@ -8333,7 +8333,7 @@
       }
       _handleSlotChange() {
           // For a11y purpose
-          this.tooltipTargetElements.forEach(el => el.setAttribute("data-sgds-tooltip", this.content));
+          this._tooltipTargetElements.forEach(el => el.setAttribute("data-sgds-tooltip", this.content));
       }
       _handleClickOutOfElement(e, self) {
           if (!e.composedPath().includes(self)) {
@@ -8352,7 +8352,7 @@
           document.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this));
           document.removeEventListener("touchstart", (event) => this._handleClickOutOfElement(event, this));
       }
-      initializeTooltip() {
+      _initializeTooltip() {
           this.tooltipConfig = {
               popperConfig: (defaultConfig) => {
                   this.popperConfig = defaultConfig;
@@ -8372,34 +8372,34 @@
               html: true,
               container: this.shadowRoot.querySelector("div") // tooltip to appear inside the shadow root of sgds-tooltip instead of anywhere in the DOM, so that scoped styles can apply
           };
-          this.bsTooltip = new Tooltip(this.myTooltip.value, this.tooltipConfig);
+          this._bsTooltip = new Tooltip(this._myTooltip.value, this.tooltipConfig);
       }
       firstUpdated() {
-          this.initializeTooltip();
-          this.myTooltip.value.addEventListener("show.bs.tooltip", () => {
+          this._initializeTooltip();
+          this._myTooltip.value.addEventListener("show.bs.tooltip", () => {
               this.emit("sgds-show");
           });
-          this.myTooltip.value.addEventListener("shown.bs.tooltip", () => {
+          this._myTooltip.value.addEventListener("shown.bs.tooltip", () => {
               this.emit("sgds-after-show");
           });
-          this.myTooltip.value.addEventListener("hide.bs.tooltip", () => {
+          this._myTooltip.value.addEventListener("hide.bs.tooltip", () => {
               this.emit("sgds-hide");
           });
-          this.myTooltip.value.addEventListener("hidden.bs.tooltip", () => {
+          this._myTooltip.value.addEventListener("hidden.bs.tooltip", () => {
               this.emit("sgds-after-hide");
           });
       }
       /** Hides the Tooltip */
       hide() {
-          this.bsTooltip.hide();
+          this._bsTooltip.hide();
       }
       /** Shows the Tooltip */
       show() {
-          this.bsTooltip.show();
+          this._bsTooltip.show();
       }
       render() {
           return html `
-      <div ${ref(this.myTooltip)}>
+      <div ${ref(this._myTooltip)}>
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
@@ -8420,7 +8420,7 @@
   ], SgdsTooltip.prototype, "popperConfig", void 0);
   __decorate([
       queryAssignedElements()
-  ], SgdsTooltip.prototype, "tooltipTargetElements", void 0);
+  ], SgdsTooltip.prototype, "_tooltipTargetElements", void 0);
 
   customElements.define("sgds-tooltip", SgdsTooltip);