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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-icon.cjs.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":["SgdsElement","html","unsafeSVG","iconStyles","__decorate","property","state"],"mappings":";;;;;;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,QAAS,SAAQA,sBAAW,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,OAAOC,kBAAI,CAAA,CAAA,EAAGC,sBAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,CAAE,CAAC;KAC7C;;AA3CM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,eAAU,CAArC,CAAuC;AAGTC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGbD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0D,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5FD,gBAAA,CAAA;AADP,IAAAE,mBAAK,EAAE;AACkC,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

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

@@ -0,0 +1,65 @@
+'use client';
+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/react/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/react/components/IconButton/icon-button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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 = lit.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)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=icon-button.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 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/react/components/IconButton/sgds-icon-button.cjs.js

@@ -3,17 +3,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var buttonElement = require('../../base/button-element.cjs.js');
 var staticHtml_js = require('lit/static-html.js');
 var classMap_js = require('lit/directives/class-map.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
 var iconButton = require('./icon-button.cjs.js');
-var decorators_js = require('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.
  */
@@ -30,7 +30,7 @@ class SgdsIconButton extends buttonElement["default"] {
             [`btn-${this.size}`]: this.size
         })}"
             ?disabled=${ifDefined_js.ifDefined(isLink ? undefined : this.disabled)}
-            type="button"
+            type=${ifDefined_js.ifDefined(isLink ? undefined : "button")}
             href=${ifDefined_js.ifDefined(isLink ? this.href : undefined)}
             target=${ifDefined_js.ifDefined(isLink ? this.target : undefined)}
             download=${ifDefined_js.ifDefined(isLink ? this.download : undefined)}
@@ -43,17 +43,12 @@ class SgdsIconButton extends buttonElement["default"] {
             @blur=${this._handleBlur}
             aria-label=${ifDefined_js.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["default"].styles, iconButton["default"]];
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsIconButton.prototype, "name", void 0);
 
 exports.SgdsIconButton = SgdsIconButton;
 exports["default"] = SgdsIconButton;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-icon-button.cjs.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":["ButtonElement","literal","html","classMap","ifDefined","iconButtonStyles","__decorate","property"],"mappings":";;;;;;;;;;;;;AAOA;;;;;AAKG;AACG,MAAO,cAAe,SAAQA,wBAAa,CAAA;IAK/C,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,MAAM,GAAGC,qBAAO,CAAA,CAAA,CAAA,CAAG,GAAGA,qBAAO,CAAA,QAAQ,CAAC;AAClD,QAAA,OAAOC,kBAAI,CAAA,CAAA;aACF,GAAG,CAAA;AACiB,+BAAA,EAAAC,oBAAQ,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,EAAAC,sBAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;;AAElD,iBAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,CAAA;AACvC,mBAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;AACzC,qBAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;AAClD,gBAAA,EAAAA,sBAAS,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,CAAA;mBAChFA,sBAAS,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,EAAAA,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;;;;cAKpC,GAAG,CAAA;SACR,CAAC;KACP;;AAlCM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAGJ,wBAAa,CAAC,MAAM,EAAEK,qBAAgB,CAAC,CAAC;AAEjBC,gBAAA,CAAA;IAA1CC,sBAAQ,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.cjs.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":["ButtonElement","literal","html","classMap","ifDefined","iconButtonStyles"],"mappings":";;;;;;;;;;;AAMA;;;;;;;AAOG;AACG,MAAO,cAAe,SAAQA,wBAAa,CAAA;IAG/C,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,MAAM,GAAGC,qBAAO,CAAA,CAAA,CAAA,CAAG,GAAGA,qBAAO,CAAA,QAAQ,CAAC;AAClD,QAAA,OAAOC,kBAAI,CAAA,CAAA;aACF,GAAG,CAAA;AACiB,+BAAA,EAAAC,oBAAQ,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,EAAAC,sBAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;mBAClDA,sBAAS,CAAC,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;AACxC,iBAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,CAAA;AACvC,mBAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;AACzC,qBAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;AAClD,gBAAA,EAAAA,sBAAS,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,CAAA;mBAChFA,sBAAS,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,EAAAA,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;;cAGpC,GAAG,CAAA;SACR,CAAC;KACP;;AA9BM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAGJ,wBAAa,CAAC,MAAM,EAAEK,qBAAgB,CAAC;;;;;"}

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

@@ -1,15 +1,15 @@
 'use client';
-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.
  */
@@ -26,7 +26,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)}
@@ -39,17 +39,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/react/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;;;;"}

package/react/components/Input/sgds-input.cjs.js

@@ -4,6 +4,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var scopedElements = require('@open-wc/scoped-elements');
+var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
@@ -11,13 +13,12 @@ var live_js = require('lit/directives/live.js');
 var unsafeSvg_js = require('lit/directives/unsafe-svg.js');
 var staticHtml_js = require('lit/static-html.js');
 var formControlElement = require('../../base/form-control-element.cjs.js');
-var sgdsSpinner = require('../Spinner/sgds-spinner.cjs.js');
+var formPlaceholder = require('../../styles/form-placeholder.cjs.js');
 var defaultvalue = require('../../utils/defaultvalue.cjs.js');
-var form = require('../../utils/form.cjs.js');
-var generateId = require('../../utils/generateId.cjs.js');
+var validatorMixin = require('../../utils/validatorMixin.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
+var sgdsSpinner = require('../Spinner/sgds-spinner.cjs.js');
 var input = require('./input.cjs.js');
-var lit = require('lit');
 
 /**
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
@@ -26,14 +27,13 @@ var lit = require('lit');
  * @event sgds-input - Emitted when the control receives input and its value changes.
  * @event sgds-focus - Emitted when input is in focus.
  * @event sgds-blur - Emitted when input is not in focus.
+ * @event sgds-invalid - Emitted when input is invalid
+ * @event sgds-valid - Emitted when input is valid
  *
  */
-class SgdsInput extends formControlElement["default"] {
+class SgdsInput extends validatorMixin.SgdsFormValidatorMixin(scopedElements.ScopedElementsMixin(formControlElement["default"])) {
     constructor() {
         super(...arguments);
-        /**@internal */
-        this.formSubmitController = new form.FormSubmitController(this);
-        /** The type of input which works the same as HTMLInputElement */
         this.type = "text";
         /** The input's placeholder text. */
         this.placeholder = "placeholder";
@@ -41,16 +41,17 @@ class SgdsInput extends formControlElement["default"] {
         this.autofocus = false;
         /** Makes the input readonly. */
         this.readonly = false;
-        /**The input's value attribute. */
-        this.value = "";
         /**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. */
         this.defaultValue = "";
         /** Marks the component as valid. */
         this.valid = false;
         /** Marks the component as loading. */
         this.loading = false;
-        /**@internal */
-        this.inputId = generateId["default"]("input", this.type);
+        /** Makes the input a required field. */
+        this.required = false;
+        /**The input's value attribute. */
+        this.value = "";
+        this._isTouched = false;
     }
     /**@internal */
     static get scopedElements() {
@@ -66,60 +67,79 @@ class SgdsInput extends formControlElement["default"] {
     blur() {
         this.input.blur();
     }
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity() {
-        return this.input.reportValidity();
-    }
-    /** Sets a custom validation message. Pass an empty string to restore validity */
-    setCustomValidity(err) {
-        return this.input.setCustomValidity(err);
-    }
     /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
     setInvalid(bool) {
         this.invalid = bool;
+        if (bool) {
+            this.emit("sgds-invalid");
+        }
+        else {
+            this.emit("sgds-valid");
+        }
     }
-    _handleClick() {
-        this.focus();
+    /**
+     * 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();
     }
-    _handleChange(event) {
-        this.value = this.input.value;
-        this.emit(event);
+    /**
+     * 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();
     }
     _handleFocus() {
         this.emit("sgds-focus");
     }
     _handleBlur() {
+        this._isTouched = true;
         this.emit("sgds-blur");
     }
-    _handleKeyDown(event) {
-        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-        // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
-        // submitting to allow users to cancel the keydown event if they need to
-        if (event.key === "Enter" && !hasModifier) {
-            setTimeout(() => {
-                // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing
-                if (!event.defaultPrevented && !event.isComposing) {
-                    this.formSubmitController.submit();
-                }
-            });
+    _handleClick() {
+        this.focus();
+    }
+    _handleChange(e) {
+        this.value = this.input.value;
+        this.emit("sgds-change");
+        super._mixinHandleChange(e);
+    }
+    _handleInputChange(e) {
+        this.value = this.input.value;
+        this.emit("sgds-input");
+        super._mixinHandleInputChange(e);
+    }
+    /** @internal */
+    _handleIsTouched() {
+        if (this._isTouched) {
+            this.setInvalid(!this._mixinCheckValidity());
         }
     }
     _handleDisabledChange() {
         // Disabled form controls are always valid, so we need to recheck validity when the state changes
-        this.input.disabled = this.disabled;
-        this.invalid = !this.input.checkValidity();
-    }
-    _handleValueChange() {
-        this.invalid = !this.input.checkValidity();
+        this.setInvalid(false);
     }
     _renderInput() {
+        const wantFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
         return staticHtml_js.html `
       <div
         class="form-control-group ${classMap_js.classMap({
             disabled: this.disabled,
             readonly: this.readonly,
-            "is-invalid": this.invalid && this.hasFeedback,
-            "quantity-toggle": this.classList.contains("quantity-toggle")
+            "is-invalid": this.invalid && wantFeedbackStyle
         })}"
         @click=${this._handleClick}
       >
@@ -128,7 +148,7 @@ class SgdsInput extends formControlElement["default"] {
         <input
           class="form-control"
           type=${this.type}
-          id=${this.inputId}
+          id=${this._controlId}
           name=${ifDefined_js.ifDefined(this.name)}
           placeholder=${ifDefined_js.ifDefined(this.placeholder)}
           aria-invalid=${this.invalid ? "true" : "false"}
@@ -143,15 +163,14 @@ class SgdsInput extends formControlElement["default"] {
           min=${ifDefined_js.ifDefined(this.min)}
           max=${ifDefined_js.ifDefined(this.max)}
           step=${ifDefined_js.ifDefined(this.step)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
-          @keydown=${this._handleKeyDown}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${() => this.setInvalid(true)}
           @focus=${this._handleFocus}
           @blur=${this._handleBlur}
-          aria-describedby=${ifDefined_js.ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}
-          aria-labelledby="${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback
-            ? `${this.inputId}-invalid`
+          aria-describedby=${ifDefined_js.ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
+          aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
+            ? `${this._controlId}-invalid`
             : ""}"
         />
         ${this.loading ? staticHtml_js.html `<sgds-spinner size="sm"></sgds-spinner>` : lit.nothing}
@@ -168,7 +187,8 @@ class SgdsInput extends formControlElement["default"] {
     `;
     }
     _renderFeedback() {
-        return this.invalid && this.hasFeedback
+        const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
+        return this.invalid && wantFeedbackText
             ? staticHtml_js.html ` <div class="invalid-feedback-container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path
@@ -176,15 +196,17 @@ class SgdsInput extends formControlElement["default"] {
               fill="#B90000"
             />
           </svg>
-          <div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+          <div id="${this._controlId}-invalid" class="invalid-feedback">
+            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+          </div>
         </div>`
             : staticHtml_js.html `${this._renderHintText()}`;
     }
     _renderLabel() {
         const labelTemplate = staticHtml_js.html `
       <label
-        for=${this.inputId}
-        id=${this.labelId}
+        for=${this._controlId}
+        id=${this._labelId}
         class=${classMap_js.classMap({
             "form-label": true,
             required: this.required
@@ -195,7 +217,7 @@ class SgdsInput extends formControlElement["default"] {
         return this.label && labelTemplate;
     }
     _renderHintText() {
-        const hintTextTemplate = staticHtml_js.html ` <div id="${this.inputId}Help" class="form-text">${this.hintText}</div> `;
+        const hintTextTemplate = staticHtml_js.html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
         return this.hintText && hintTextTemplate;
     }
     render() {
@@ -210,10 +232,7 @@ class SgdsInput extends formControlElement["default"] {
     `;
     }
 }
-SgdsInput.styles = [...formControlElement["default"].styles, input["default"]];
-tslib.__decorate([
-    decorators_js.query("input.form-control")
-], SgdsInput.prototype, "input", void 0);
+SgdsInput.styles = [...formControlElement["default"].styles, formPlaceholder["default"], input["default"]];
 tslib.__decorate([
     decorators_js.property({ reflect: true })
 ], SgdsInput.prototype, "type", void 0);
@@ -232,6 +251,12 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Number, reflect: true })
 ], SgdsInput.prototype, "maxlength", void 0);
+tslib.__decorate([
+    decorators_js.property()
+], SgdsInput.prototype, "min", void 0);
+tslib.__decorate([
+    decorators_js.property()
+], SgdsInput.prototype, "max", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsInput.prototype, "placeholder", void 0);
@@ -248,8 +273,11 @@ tslib.__decorate([
     decorators_js.property()
 ], SgdsInput.prototype, "step", void 0);
 tslib.__decorate([
-    decorators_js.property({ reflect: true })
-], SgdsInput.prototype, "value", void 0);
+    decorators_js.property({ type: String, reflect: true })
+], SgdsInput.prototype, "hasFeedback", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsInput.prototype, "invalidFeedback", void 0);
 tslib.__decorate([
     defaultvalue.defaultValue()
 ], SgdsInput.prototype, "defaultValue", void 0);
@@ -259,12 +287,21 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsInput.prototype, "loading", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "required", void 0);
+tslib.__decorate([
+    decorators_js.property({ reflect: true })
+], SgdsInput.prototype, "value", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsInput.prototype, "_isTouched", void 0);
+tslib.__decorate([
+    watch.watch("_isTouched", { waitUntilFirstUpdate: true })
+], SgdsInput.prototype, "_handleIsTouched", null);
 tslib.__decorate([
     watch.watch("disabled", { waitUntilFirstUpdate: true })
 ], SgdsInput.prototype, "_handleDisabledChange", null);
-tslib.__decorate([
-    watch.watch("value", { waitUntilFirstUpdate: true })
-], SgdsInput.prototype, "_handleValueChange", null);
 
 exports.SgdsInput = SgdsInput;
 exports["default"] = SgdsInput;