@govtechsg/sgds-web-component 3.0.0 → 3.0.2

package/components/Icon/sgds-icon.js

@@ -29,7 +29,7 @@ class SgdsIcon extends SgdsElement {
                 .join("");
             try {
                 const iconRegistry = await import('./icon-registry.js');
-                const svg = iconRegistry[pascalName];
+                const svg = iconRegistry["IconRegistry"][pascalName];
                 if (svg) {
                     this._svgContent = svg;
                 }

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

@@ -1 +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 from `SgdsIcon` library set\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 updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has(\"name\")) {\n      await this._loadSvg(this.name);\n    }\n  }\n\n  private async _loadSvg(name: string): Promise<void> {\n    if (name) {\n      const pascalName = name\n        .split(\"-\")\n        .map(name => String(name).charAt(0).toUpperCase() + String(name).slice(1))\n        .join(\"\");\n      try {\n        const iconRegistry = await import(\"./icon-registry\");\n        const svg = iconRegistry[pascalName];\n        if (svg) {\n          this._svgContent = svg;\n        } else {\n          throw new Error(\"icon `name` not found\");\n        }\n      } catch (error) {\n        console.error(`Unable to load icon: ${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;;AAEG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAO6C,IAAI,CAAA,IAAA,GAAgD,IAAI,CAAC;;QAI5F,IAAW,CAAA,WAAA,GAAkB,IAAI,CAAC;KA+B3C;IA7BC,MAAM,OAAO,CAAC,iBAAmC,EAAA;AAC/C,QAAA,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAChC;KACF;IAEO,MAAM,QAAQ,CAAC,IAAY,EAAA;QACjC,IAAI,IAAI,EAAE;YACR,MAAM,UAAU,GAAG,IAAI;iBACpB,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;iBACzE,IAAI,CAAC,EAAE,CAAC,CAAC;AACZ,YAAA,IAAI;AACF,gBAAA,MAAM,YAAY,GAAG,MAAM,OAAO,oBAAiB,CAAC,CAAC;AACrD,gBAAA,MAAM,GAAG,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;gBACrC,IAAI,GAAG,EAAE;AACP,oBAAA,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;iBACxB;qBAAM;AACL,oBAAA,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;iBAC1C;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAAG,CAAA,CAAA,EAAE,KAAK,CAAC,CAAC;aACvD;SACF;KACF;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,EAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,CAAE,CAAC;KAC7C;;AAxCM,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;;;;"}
+{"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 from `SgdsIcon` library set\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 updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has(\"name\")) {\n      await this._loadSvg(this.name);\n    }\n  }\n\n  private async _loadSvg(name: string): Promise<void> {\n    if (name) {\n      const pascalName = name\n        .split(\"-\")\n        .map(name => String(name).charAt(0).toUpperCase() + String(name).slice(1))\n        .join(\"\");\n      try {\n        const iconRegistry = await import(\"./icon-registry\");\n        const svg = iconRegistry[\"IconRegistry\"][pascalName];\n        if (svg) {\n          this._svgContent = svg;\n        } else {\n          throw new Error(\"icon `name` not found\");\n        }\n      } catch (error) {\n        console.error(`Unable to load icon: ${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;;AAEG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAO6C,IAAI,CAAA,IAAA,GAAgD,IAAI,CAAC;;QAI5F,IAAW,CAAA,WAAA,GAAkB,IAAI,CAAC;KA+B3C;IA7BC,MAAM,OAAO,CAAC,iBAAmC,EAAA;AAC/C,QAAA,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAChC;KACF;IAEO,MAAM,QAAQ,CAAC,IAAY,EAAA;QACjC,IAAI,IAAI,EAAE;YACR,MAAM,UAAU,GAAG,IAAI;iBACpB,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;iBACzE,IAAI,CAAC,EAAE,CAAC,CAAC;AACZ,YAAA,IAAI;AACF,gBAAA,MAAM,YAAY,GAAG,MAAM,OAAO,oBAAiB,CAAC,CAAC;gBACrD,MAAM,GAAG,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;gBACrD,IAAI,GAAG,EAAE;AACP,oBAAA,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;iBACxB;qBAAM;AACL,oBAAA,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;iBAC1C;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAAG,CAAA,CAAA,EAAE,KAAK,CAAC,CAAC;aACvD;SACF;KACF;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,EAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA,CAAE,CAAC;KAC7C;;AAxCM,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;;;;"}