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

package/components/IconButton/sgds-icon-button.d.ts

@@ -2,13 +2,13 @@ import ButtonElement from "../../base/button-element";
 /**
  * @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.
  */
 export declare class SgdsIconButton extends ButtonElement {
     static styles: import("lit").CSSResult[];
-    /** The name of the icon from sgds icon library */
-    name: string;
     render(): import("lit-html").TemplateResult;
 }
 export default SgdsIconButton;

package/components/IconButton/sgds-icon-button.js

@@ -1,14 +1,14 @@
-import { __decorate } from 'tslib';
 import ButtonElement from '../../base/button-element.js';
 import { literal, html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import css_248z from './icon-button.js';
-import { property } from 'lit/decorators.js';
 
 /**
  * @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.
  */
@@ -25,7 +25,7 @@ class SgdsIconButton extends ButtonElement {
             [`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)}
@@ -38,17 +38,12 @@ class SgdsIconButton extends ButtonElement {
             @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);
 
 export { SgdsIconButton, SgdsIconButton as default };
 //# sourceMappingURL=sgds-icon-button.js.map

package/components/IconButton/sgds-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-icon-button.js","sources":["../../../src/components/IconButton/sgds-icon-button.ts"],"sourcesContent":["import ButtonElement from \"../../base/button-element\";\nimport { literal, html } from \"lit/static-html.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport iconButtonStyles from \"./icon-button.css\";\nimport { property } from \"lit/decorators.js\";\n\n/**\n * @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n */\nexport class SgdsIconButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, iconButtonStyles];\n  /** The name of the icon from sgds icon library */\n  @property({ type: String, reflect: true }) name: string;\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n          <${tag}\n            class=\"btn btn-icon${classMap({\n              disabled: this.disabled,\n              active: this.active,\n              [`btn-${this.variant}`]: this.variant,\n              [`btn-${this.size}`]: this.size\n            })}\"\n            ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n            type=\"button\"\n            href=${ifDefined(isLink ? this.href : undefined)}\n            target=${ifDefined(isLink ? this.target : undefined)}\n            download=${ifDefined(isLink ? this.download : undefined)}\n            rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n            role=${ifDefined(isLink ? \"button\" : undefined)}\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            tabindex=${this.disabled ? \"-1\" : \"0\"}\n            @click=${this._handleClick}\n            @focus=${this._handleFocus}\n            @blur=${this._handleBlur}\n            aria-label=${ifDefined(this.ariaLabel)}\n          >\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <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\"/>\n          </svg>\n          </${tag}>\n        `;\n  }\n}\n\nexport default SgdsIconButton;\n"],"names":["iconButtonStyles"],"mappings":";;;;;;;;AAOA;;;;;AAKG;AACG,MAAO,cAAe,SAAQ,aAAa,CAAA;IAK/C,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,MAAM,GAAG,OAAO,CAAA,CAAA,CAAA,CAAG,GAAG,OAAO,CAAA,QAAQ,CAAC;AAClD,QAAA,OAAO,IAAI,CAAA,CAAA;aACF,GAAG,CAAA;AACiB,+BAAA,EAAA,QAAQ,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO;YACrC,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;SAChC,CAAC,CAAA;AACU,sBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;;AAElD,iBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,CAAA;AACvC,mBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;AACzC,qBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;AAClD,gBAAA,EAAA,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,CAAA;mBAChF,SAAS,CAAC,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAA;4BAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;uBACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AAC5B,mBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AACjB,mBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAClB,kBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACX,uBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;;;;cAKpC,GAAG,CAAA;SACR,CAAC;KACP;;AAlCM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAEA,QAAgB,CAAC,CAAC;AAEjB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-icon-button.js","sources":["../../../src/components/IconButton/sgds-icon-button.ts"],"sourcesContent":["import ButtonElement from \"../../base/button-element\";\nimport { literal, html } from \"lit/static-html.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport iconButtonStyles from \"./icon-button.css\";\n\n/**\n * @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.\n *\n * @slot default - The slot for sgds-icon\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n */\nexport class SgdsIconButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, iconButtonStyles];\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n          <${tag}\n            class=\"btn btn-icon${classMap({\n              disabled: this.disabled,\n              active: this.active,\n              [`btn-${this.variant}`]: this.variant,\n              [`btn-${this.size}`]: this.size\n            })}\"\n            ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n            type=${ifDefined(isLink ? undefined : \"button\")}\n            href=${ifDefined(isLink ? this.href : undefined)}\n            target=${ifDefined(isLink ? this.target : undefined)}\n            download=${ifDefined(isLink ? this.download : undefined)}\n            rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n            role=${ifDefined(isLink ? \"button\" : undefined)}\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            tabindex=${this.disabled ? \"-1\" : \"0\"}\n            @click=${this._handleClick}\n            @focus=${this._handleFocus}\n            @blur=${this._handleBlur}\n            aria-label=${ifDefined(this.ariaLabel)}\n          >\n            <slot></slot>\n          </${tag}>\n        `;\n  }\n}\n\nexport default SgdsIconButton;\n"],"names":["iconButtonStyles"],"mappings":";;;;;;AAMA;;;;;;;AAOG;AACG,MAAO,cAAe,SAAQ,aAAa,CAAA;IAG/C,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,MAAM,GAAG,OAAO,CAAA,CAAA,CAAA,CAAG,GAAG,OAAO,CAAA,QAAQ,CAAC;AAClD,QAAA,OAAO,IAAI,CAAA,CAAA;aACF,GAAG,CAAA;AACiB,+BAAA,EAAA,QAAQ,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO;YACrC,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;SAChC,CAAC,CAAA;AACU,sBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;mBAClD,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;AACxC,iBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,CAAA;AACvC,mBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;AACzC,qBAAA,EAAA,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;AAClD,gBAAA,EAAA,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,CAAA;mBAChF,SAAS,CAAC,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAA;4BAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;uBACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AAC5B,mBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AACjB,mBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAClB,kBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACX,uBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;;cAGpC,GAAG,CAAA;SACR,CAAC;KACP;;AA9BM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}