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

package/components/Icon/sgds-icon.d.ts

@@ -0,0 +1,21 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set
+ *
+ * @event sgds-blur - Emitted when the button is blurred.
+ * @event sgds-focus - Emitted when the button is focused.
+ */
+export declare class SgdsIcon extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    /** The name of the icon from sgds icon library */
+    name: string;
+    /** Specifies a small, medium or large icon, the size is medium by default. */
+    size: "sm" | "md" | "lg" | "xl" | "2-xl" | "3-xl";
+    /** @internal */
+    private _svgContent;
+    firstUpdated(): Promise<void>;
+    updated(): void;
+    loadSvg(name: string): Promise<void>;
+    render(): import("lit-html").TemplateResult;
+}
+export default SgdsIcon;

package/components/Icon/sgds-icon.js

@@ -0,0 +1,64 @@
+import { __decorate } from 'tslib';
+import SgdsElement from '../../base/sgds-element.js';
+import { html } from 'lit/static-html.js';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import css_248z from './icon.js';
+
+/**
+ * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set
+ *
+ * @event sgds-blur - Emitted when the button is blurred.
+ * @event sgds-focus - Emitted when the button is focused.
+ */
+class SgdsIcon extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Specifies a small, medium or large icon, the size is medium by default. */
+        this.size = "lg";
+        /** @internal */
+        this._svgContent = null;
+    }
+    async firstUpdated() {
+        if (this.name) {
+            this.loadSvg(this.name);
+        }
+    }
+    updated() {
+        this.style.display = this._svgContent ? "flex" : "none";
+    }
+    async loadSvg(name) {
+        if (name) {
+            // Dynamically import the SVG if not cached
+            try {
+                //TODO: This path is too specific to our repo, it won't work for users
+                const response = await fetch(`/src/icons/${name}.svg`);
+                if (response.ok) {
+                    const svgContent = await response.text();
+                    // Render the SVG
+                    // this.renderSvg(svgContent);
+                    this._svgContent = svgContent;
+                }
+            }
+            catch (error) {
+                console.error(`Error loading SVG: ${name}`, error);
+            }
+        }
+    }
+    render() {
+        return html `${unsafeSVG(this._svgContent)}`;
+    }
+}
+SgdsIcon.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsIcon.prototype, "size", void 0);
+__decorate([
+    state()
+], SgdsIcon.prototype, "_svgContent", void 0);
+
+export { SgdsIcon, SgdsIcon as default };
+//# sourceMappingURL=sgds-icon.js.map

package/components/Icon/sgds-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-icon.js","sources":["../../../src/components/Icon/sgds-icon.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit/static-html.js\";\nimport { property, state } from \"lit/decorators.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport iconStyles from \"./icon.css\";\n\n/**\n * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n */\nexport class SgdsIcon extends SgdsElement {\n  static styles = [...SgdsElement.styles, iconStyles];\n\n  /** The name of the icon from sgds icon library */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** Specifies a small, medium or large icon, the size is medium by default. */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2-xl\" | \"3-xl\" = \"lg\";\n\n  /** @internal */\n  @state()\n  private _svgContent: string | null = null;\n\n  async firstUpdated() {\n    if (this.name) {\n      this.loadSvg(this.name);\n    }\n  }\n\n  updated() {\n    this.style.display = this._svgContent ? \"flex\" : \"none\";\n  }\n\n  async loadSvg(name: string) {\n    if (name) {\n      // Dynamically import the SVG if not cached\n      try {\n        //TODO: This path is too specific to our repo, it won't work for users\n        const response = await fetch(`/src/icons/${name}.svg`);\n\n        if (response.ok) {\n          const svgContent = await response.text();\n          // Render the SVG\n          // this.renderSvg(svgContent);\n          this._svgContent = svgContent;\n        }\n      } catch (error) {\n        console.error(`Error loading SVG: ${name}`, error);\n      }\n    }\n  }\n\n  render() {\n    return html`${unsafeSVG(this._svgContent)}`;\n  }\n}\n\nexport default SgdsIcon;\n"],"names":["iconStyles"],"mappings":";;;;;;;AAMA;;;;;AAKG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAO6C,IAAI,CAAA,IAAA,GAAgD,IAAI,CAAC;;QAI5F,IAAW,CAAA,WAAA,GAAkB,IAAI,CAAC;KAkC3C;AAhCC,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;KACF;IAED,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;KACzD;IAED,MAAM,OAAO,CAAC,IAAY,EAAA;QACxB,IAAI,IAAI,EAAE;;AAER,YAAA,IAAI;;gBAEF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,CAAc,WAAA,EAAA,IAAI,CAAM,IAAA,CAAA,CAAC,CAAC;AAEvD,gBAAA,IAAI,QAAQ,CAAC,EAAE,EAAE;AACf,oBAAA,MAAM,UAAU,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;;;AAGzC,oBAAA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;iBAC/B;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,CAAA,mBAAA,EAAsB,IAAI,CAAE,CAAA,EAAE,KAAK,CAAC,CAAC;aACpD;SACF;KACF;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,EAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,CAAE,CAAC;KAC7C;;AA3CM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGT,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0D,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5F,UAAA,CAAA;AADP,IAAA,KAAK,EAAE;AACkC,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/IconButton/icon-button.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}.btn>svg{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-lg>svg{height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.btn-sm>svg{height:var(--sgds-dimension-20);width:var(--sgds-dimension-20)}`;
+var css_248z = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=icon-button.js.map

package/components/IconButton/index.umd.js

@@ -4228,7 +4228,7 @@
   }
   SgdsElement.styles = [css_248z$2];
 
-  var css_248z$1 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);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(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.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)}`;
+  var css_248z$1 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);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(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.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(--sgds-btn-color)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {
@@ -4558,11 +4558,13 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
-  var css_248z = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}.btn>svg{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-lg>svg{height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.btn-sm>svg{height:var(--sgds-dimension-20);width:var(--sgds-dimension-20)}`;
+  var css_248z = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}`;
 
   /**
    * @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
    *
+   * @slot default - The slot for sgds-icon
+   *
    * @event sgds-blur - Emitted when the button is blurred.
    * @event sgds-focus - Emitted when the button is focused.
    */
@@ -4579,7 +4581,7 @@
             [`btn-${this.size}`]: this.size
         })}"
             ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
-            type="button"
+            type=${ifDefined(isLink ? undefined : "button")}
             href=${ifDefined(isLink ? this.href : undefined)}
             target=${ifDefined(isLink ? this.target : undefined)}
             download=${ifDefined(isLink ? this.download : undefined)}
@@ -4592,17 +4594,12 @@
             @blur=${this._handleBlur}
             aria-label=${ifDefined(this.ariaLabel)}
           >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 11.8295 3.06773 11.666 3.18828 11.5455C3.30883 11.4249 3.47233 11.3572 3.64282 11.3572H18.8043L14.7584 7.31258C14.6377 7.19187 14.5699 7.02817 14.5699 6.85746C14.5699 6.68676 14.6377 6.52305 14.7584 6.40235C14.8791 6.28165 15.0428 6.21384 15.2135 6.21384C15.3842 6.21384 15.5479 6.28165 15.6686 6.40235L20.8111 11.5449C20.871 11.6046 20.9185 11.6755 20.9509 11.7536C20.9833 11.8317 21 11.9154 21 12C21 12.0845 20.9833 12.1683 20.9509 12.2464C20.9185 12.3245 20.871 12.3954 20.8111 12.4551L15.6686 17.5976C15.5479 17.7183 15.3842 17.7861 15.2135 17.7861C15.0428 17.7861 14.8791 17.7183 14.7584 17.5976C14.6377 17.4769 14.5699 17.3132 14.5699 17.1425C14.5699 16.9718 14.6377 16.8081 14.7584 16.6874L18.8043 12.6428H3.64282C3.47233 12.6428 3.30883 12.5751 3.18828 12.4545C3.06773 12.334 3 12.1705 3 12Z" fill="currentColor"/>
-          </svg>
+            <slot></slot>
           </${tag}>
         `;
       }
   }
   SgdsIconButton.styles = [...ButtonElement.styles, css_248z];
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsIconButton.prototype, "name", void 0);
 
   customElements.define("sgds-icon-button", SgdsIconButton);