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

package/components/Footer/sgds-footer-item.d.ts

@@ -0,0 +1,13 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
+ *
+ * @slot default - The slot for the list of link items
+ * @slot title - The slot for the title of the list of items
+ *
+ */
+export declare class SgdsFooterItem extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default SgdsFooterItem;

package/components/Footer/sgds-footer-item.js

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './footer-item.js';
+
+/**
+ * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
+ *
+ * @slot default - The slot for the list of link items
+ * @slot title - The slot for the title of the list of items
+ *
+ */
+class SgdsFooterItem extends SgdsElement {
+    render() {
+        return html `
+      <div class="footer-item">
+        <slot name="title"></slot>
+        <div class="links">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsFooterItem.styles = [...SgdsElement.styles, css_248z];
+
+export { SgdsFooterItem, SgdsFooterItem as default };
+//# sourceMappingURL=sgds-footer-item.js.map

package/components/Footer/sgds-footer-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-footer-item.js","sources":["../../../src/components/Footer/sgds-footer-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerLinkStyle from \"./footer-item.css\";\n\n/**\n * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.\n *\n * @slot default - The slot for the list of link items\n * @slot title - The slot for the title of the list of items\n *\n */\nexport class SgdsFooterItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerLinkStyle];\n\n  render() {\n    return html`\n      <div class=\"footer-item\">\n        <slot name=\"title\"></slot>\n        <div class=\"links\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFooterItem;\n"],"names":["footerLinkStyle"],"mappings":";;;;AAIA;;;;;;AAMG;AACG,MAAO,cAAe,SAAQ,WAAW,CAAA;IAG7C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;KAOV,CAAC;KACH;;AAXM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAe,CAAC;;;;"}

package/components/Footer/sgds-footer.d.ts

@@ -1,45 +1,19 @@
 import SgdsElement from "../../base/sgds-element";
-export interface ColumnLinks {
-    title: string;
-    links: Links[];
-}
-export interface Links {
-    href: string;
-    label: string;
-}
 /**
  * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
  *
- * @csspart footer-top - The component's footer-top section container.
- * @csspart footer-bottom - The component's footer-bottom section container.
+ * @slot title - The slot for title
+ * @slot description - The slot for description
+ * @slot items - The slot for the list of footer items
+ * @slot social-media - The slot for the list of social media with icons
  *
- * @cssproperty footer-top - The component's footer-top section container.
- * @cssproperty footer-bottom - The component's footer-bottom section container.
  */
 export declare class SgdsFooter extends SgdsElement {
     static styles: import("lit").CSSResult[];
-    /**
-     * 	Sets title of SgdsFooter
-     */
-    title: string;
-    /**
-     * 	Sets description of SgdsFooter
-     */
-    description: string;
     /**
      * 	Sets copyrightLiner of SgdsFooter
      */
     copyrightLiner: string;
-    /**
-     * Array of type
-     *
-     * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`
-     */
-    links: ColumnLinks[];
-    /**
-     * String date for last updated date
-     */
-    lastUpdatedDate: string;
     /**
      * 	href link for contacts
      */
@@ -48,6 +22,10 @@ export declare class SgdsFooter extends SgdsElement {
      * 	href link for feedback
      */
     feedbackHref: string;
+    /**
+     * 	href link for faq
+     */
+    faqHref: string;
     /**
      * 	href link for privacy statement
      */
@@ -56,6 +34,7 @@ export declare class SgdsFooter extends SgdsElement {
      * 	href link for terms of use
      */
     termsOfUseHref: string;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default SgdsFooter;

package/components/Footer/sgds-footer.js

@@ -7,37 +7,19 @@ import css_248z from './footer.js';
 /**
  * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
  *
- * @csspart footer-top - The component's footer-top section container.
- * @csspart footer-bottom - The component's footer-bottom section container.
+ * @slot title - The slot for title
+ * @slot description - The slot for description
+ * @slot items - The slot for the list of footer items
+ * @slot social-media - The slot for the list of social media with icons
  *
- * @cssproperty footer-top - The component's footer-top section container.
- * @cssproperty footer-bottom - The component's footer-bottom section container.
  */
 class SgdsFooter extends SgdsElement {
     constructor() {
         super(...arguments);
-        /**
-         * 	Sets title of SgdsFooter
-         */
-        this.title = "";
-        /**
-         * 	Sets description of SgdsFooter
-         */
-        this.description = "";
         /**
          * 	Sets copyrightLiner of SgdsFooter
          */
         this.copyrightLiner = "Government of Singapore";
-        /**
-         * Array of type
-         *
-         * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`
-         */
-        this.links = [];
-        /**
-         * String date for last updated date
-         */
-        this.lastUpdatedDate = "";
         /**
          * 	href link for contacts
          */
@@ -46,6 +28,10 @@ class SgdsFooter extends SgdsElement {
          * 	href link for feedback
          */
         this.feedbackHref = "#";
+        /**
+         * 	href link for faq
+         */
+        this.faqHref = "#";
         /**
          * 	href link for privacy statement
          */
@@ -55,64 +41,64 @@ class SgdsFooter extends SgdsElement {
          */
         this.termsOfUseHref = "#";
     }
+    firstUpdated() {
+        const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
+        const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
+        const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
+        const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
+        const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
+        const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
+        const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
+        const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
+        if (socialMediaChildNodes.length === 0) {
+            const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
+            socialMediaContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
+            const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
+            footerHeaderContainer.style.display = "none";
+        }
+        if (footerItemsChildNodes.length === 0) {
+            const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
+            footerItemsContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 &&
+            footerDescriptionChildNodes.length === 0 &&
+            footerItemsChildNodes.length === 0) {
+            const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
+            footerTopContainer.style.display = "none";
+        }
+    }
     render() {
-        // if description is defined
-        const hasDescription = html ` <div class="description">${this.description}</div>`;
         return html `
-      <footer class="sgds footer">
-        <section class="footer-top" part="footer-top">
-          <div class="container-fluid">
-            <div class="row footer-header">
-              <div class="col col-lg-6 col-md-12">
-                <div class="title">${this.title ? this.title : "Footer title"}</div>
-                ${this.description ? hasDescription : undefined}
-              </div>
-            </div>
-            <div class="row footer-items">
-              ${this.links.map((item) => html `
-                    <div class="col-xxl-2 col-md-4 mb-3">
-                      <div class="title">${item.title}</div>
-                      <ul class="links">
-                        ${item.links.map((link) => html ` <li><a href=${link.href}>${link.label}</a></li> `)}
-                      </ul>
-                    </div>
-                  `)}
-            </div>
-            <div class="row footer-contact-links">
-              <div class="col">
-                <div class="d-flex justify-content-lg-end">
-                  <ul>
-                    <li><a href=${this.contactHref}>Contact</a></li>
-                    <li><a href=${this.feedbackHref}>Feedback</a></li>
-                  </ul>
-                </div>
-              </div>
-            </div>
+      <footer class="footer">
+        <section class="footer-top">
+          <div class="footer-header">
+            <slot name="title"></slot>
+            <slot name="description"></slot>
+          </div>
+          <div class="footer-items">
+            <slot name="items"></slot>
           </div>
         </section>
-        <section class="footer-bottom" part="footer-bottom">
-          <div class="container-fluid">
-            <div class="row footer-mandatory-links">
-              <div class="col">
-                <ul>
-                  <li>
-                    <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
-                      >Report Vulnerability</a
-                    >
-                  </li>
-                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>
-                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>
-                </ul>
-              </div>
-            </div>
-            <div class="row footer-copyrights">
-              <div class="col">
-                <div class="d-flex justify-content-lg-end text-end">
-                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />
-                  Last Updated ${this.lastUpdatedDate}
-                </div>
-              </div>
-            </div>
+        <section class="footer-bottom">
+          <div class="social-media">
+            <slot name="social-media"></slot>
+          </div>
+          <div class="footer-mandatory-links">
+            <ul>
+              <li><a href=${this.contactHref}>Contact</a></li>
+              <li><a href=${this.feedbackHref}>Feedback</a></li>
+              <li><a href=${this.faqHref}>FAQ</a></li>
+              <li>
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
+                  Report Vulnerability
+                </a>
+              </li>
+              <li><a href=${this.privacyHref}>Privacy Statement</a></li>
+              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>
+            </ul>
+            <div class="footer-copyrights">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>
           </div>
         </section>
       </footer>
@@ -120,29 +106,18 @@ class SgdsFooter extends SgdsElement {
     }
 }
 SgdsFooter.styles = [...SgdsElement.styles, css_248z];
-__decorate([
-    property({ type: String })
-], SgdsFooter.prototype, "title", void 0);
-__decorate([
-    property({ type: String })
-], SgdsFooter.prototype, "description", void 0);
 __decorate([
     property({ type: String })
 ], SgdsFooter.prototype, "copyrightLiner", void 0);
-__decorate([
-    property({
-        type: Array
-    })
-], SgdsFooter.prototype, "links", void 0);
-__decorate([
-    property({ type: String })
-], SgdsFooter.prototype, "lastUpdatedDate", void 0);
 __decorate([
     property({ type: String })
 ], SgdsFooter.prototype, "contactHref", void 0);
 __decorate([
     property({ type: String })
 ], SgdsFooter.prototype, "feedbackHref", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "faqHref", void 0);
 __decorate([
     property({ type: String })
 ], SgdsFooter.prototype, "privacyHref", void 0);

package/components/Footer/sgds-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.js","sources":["../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\nexport interface ColumnLinks {\n  title: string;\n  links: Links[];\n}\nexport interface Links {\n  href: string;\n  label: string;\n}\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @csspart footer-top - The component's footer-top section container.\n * @csspart footer-bottom - The component's footer-bottom section container.\n *\n * @cssproperty footer-top - The component's footer-top section container.\n * @cssproperty footer-bottom - The component's footer-bottom section container.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets title of SgdsFooter\n   */\n  @property({ type: String })\n  title = \"\";\n\n  /**\n   * \tSets description of SgdsFooter\n   */\n  @property({ type: String })\n  description = \"\";\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * Array of type\n   *\n   * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`\n   */\n  @property({\n    type: Array\n  })\n  links: ColumnLinks[] = [];\n\n  /**\n   * String date for last updated date\n   */\n  @property({ type: String })\n  lastUpdatedDate = \"\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  render() {\n    // if description is defined\n    const hasDescription = html` <div class=\"description\">${this.description}</div>`;\n\n    return html`\n      <footer class=\"sgds footer\">\n        <section class=\"footer-top\" part=\"footer-top\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-header\">\n              <div class=\"col col-lg-6 col-md-12\">\n                <div class=\"title\">${this.title ? this.title : \"Footer title\"}</div>\n                ${this.description ? hasDescription : undefined}\n              </div>\n            </div>\n            <div class=\"row footer-items\">\n              ${this.links.map(\n                (item: ColumnLinks) =>\n                  html`\n                    <div class=\"col-xxl-2 col-md-4 mb-3\">\n                      <div class=\"title\">${item.title}</div>\n                      <ul class=\"links\">\n                        ${item.links.map((link: Links) => html` <li><a href=${link.href}>${link.label}</a></li> `)}\n                      </ul>\n                    </div>\n                  `\n              )}\n            </div>\n            <div class=\"row footer-contact-links\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end\">\n                  <ul>\n                    <li><a href=${this.contactHref}>Contact</a></li>\n                    <li><a href=${this.feedbackHref}>Feedback</a></li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n        <section class=\"footer-bottom\" part=\"footer-bottom\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-mandatory-links\">\n              <div class=\"col\">\n                <ul>\n                  <li>\n                    <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                      >Report Vulnerability</a\n                    >\n                  </li>\n                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"row footer-copyrights\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end text-end\">\n                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />\n                  Last Updated ${this.lastUpdatedDate}\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.js","sources":["../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  firstUpdated() {\n    const socialMediaSlot = this.shadowRoot.querySelector(\"slot[name='social-media']\") as HTMLSlotElement;\n    const footerTitleSlot = this.shadowRoot.querySelector(\"slot[name='title']\") as HTMLSlotElement;\n    const footerDescriptionSlot = this.shadowRoot.querySelector(\"slot[name='description']\") as HTMLSlotElement;\n    const footerItemsSlot = this.shadowRoot.querySelector(\"slot[name='items']\") as HTMLSlotElement;\n    const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });\n    const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });\n    const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });\n    const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });\n    if (socialMediaChildNodes.length === 0) {\n      const socialMediaContainer = this.shadowRoot.querySelector(\".social-media\") as HTMLDivElement;\n      socialMediaContainer.style.display = \"none\";\n    }\n\n    if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {\n      const footerHeaderContainer = this.shadowRoot.querySelector(\".footer-header\") as HTMLDivElement;\n      footerHeaderContainer.style.display = \"none\";\n    }\n\n    if (footerItemsChildNodes.length === 0) {\n      const footerItemsContainer = this.shadowRoot.querySelector(\".footer-items\") as HTMLDivElement;\n      footerItemsContainer.style.display = \"none\";\n    }\n\n    if (\n      footerTitleChildNodes.length === 0 &&\n      footerDescriptionChildNodes.length === 0 &&\n      footerItemsChildNodes.length === 0\n    ) {\n      const footerTopContainer = this.shadowRoot.querySelector(\".footer-top\") as HTMLDivElement;\n      footerTopContainer.style.display = \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section class=\"footer-top\">\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div class=\"footer-items\">\n            <slot name=\"items\"></slot>\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"social-media\">\n            <slot name=\"social-media\"></slot>\n          </div>\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}

package/components/Icon/icon.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=icon.js.map

package/components/Icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Icon/index.d.ts

@@ -0,0 +1,6 @@
+import { SgdsIcon } from "./sgds-icon";
+declare global {
+    interface HTMLElementTagNameMap {
+        "sgds-icon": SgdsIcon;
+    }
+}

package/components/Icon/index.js

@@ -0,0 +1,4 @@
+import { SgdsIcon } from './sgds-icon.js';
+
+customElements.define("sgds-icon", SgdsIcon);
+//# sourceMappingURL=index.js.map

package/components/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.ts"],"sourcesContent":["import { SgdsIcon } from \"./sgds-icon\";\n\ncustomElements.define(\"sgds-icon\", SgdsIcon);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-icon\": SgdsIcon;\n  }\n}\n"],"names":[],"mappings":";;AAEA,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC"}