{"version":3,"file":"PdsIcon.chunk-Bz3SR7oo.js","sources":["../../../../../packages/icons-web/src/decorators/pds-icon.ts","../../../../../packages/icons-web/src/lib/icons/PdsIcon.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport type { PdsIcon } from '../lib/icons/PdsIcon';\nimport type { PdsCustomIcon } from '../lib/icons/PdsCustomIcon';\n\n/**\n * The `pdsCustomIconElement` decorator is a wrapper around Lit's `customElement` decorator.\n * @param tagName\n * The tagName of the custom element.\n * The tagName should prefixed with `pds-`.\n */\nexport function pdsCustomIconElement(tagName: string) {\n return function pdsIconDecorator(\n constructor: typeof PdsIcon | typeof PdsCustomIcon,\n ) {\n if (customElements.get(tagName) === undefined) {\n customElement(tagName)(constructor);\n }\n };\n}\n","import { themedefault } from '@principal/design-system-tokens';\nimport { LitElement, PropertyValueMap } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nexport const iconSizes = ['xs', 'sm', 'default', 'lg', 'xl', 'xxl'];\n\ntype ArrayValues = T[number];\n\nexport type IconSize = ArrayValues;\n\nexport const validIconColors = [\n themedefault.SemanticBorderIconDefault,\n themedefault.SemanticBorderInvertedDefault,\n themedefault.SemanticBorderDisabled,\n themedefault.SemanticBorderInfo,\n themedefault.SemanticBorderInvertedInfo,\n themedefault.SemanticBorderSuccess,\n themedefault.SemanticBorderInvertedSuccess,\n themedefault.SemanticBorderWarning,\n themedefault.SemanticBorderError,\n themedefault.SemanticBorderInvertedError,\n themedefault.SemanticBorderInteractiveDefault,\n themedefault.SemanticBorderInteractiveStrong,\n themedefault.SemanticBorderInteractiveXstrong,\n themedefault.SemanticBorderInteractiveInvertedStrong,\n themedefault.SemanticBorderInteractiveInvertedXstrong,\n] as const;\n\nexport type ValidIconColor = ArrayValues;\n\n/**\n * A base element.\n */\nexport abstract class PdsIcon extends LitElement {\n /**\n * ICON SIZE\n * xs - 12x12\n * sm - 16x16\n * default - 20x20\n * lg - 24x24\n * xl - 32x32\n * xxl - 40x40\n */\n getSize(size: IconSize): Number {\n switch (size) {\n case 'xs':\n return 12;\n case 'sm':\n return 16;\n case 'lg':\n return 24;\n case 'xl':\n return 32;\n case 'xxl':\n return 40;\n default:\n return 20;\n }\n }\n\n isValidColor(color: ValidIconColor | string): boolean {\n const isValid = validIconColors.includes(color as ValidIconColor);\n\n if (!isValid) {\n // eslint-disable-next-line no-console\n console.error(\n 'The color you passed in is not a valid icon color. Refer to PDS border tokens for valid icon colors.',\n );\n }\n\n return isValid;\n }\n\n @property({ type: String })\n size: IconSize = 'default';\n\n @property({ type: String })\n color?: ValidIconColor;\n\n @state()\n icon: string;\n\n updated(\n changedProperties: PropertyValueMap | Map,\n ): void {\n // We need to convert changedProperties to an Object\n // because size is always a property of a map and will\n // always return true otherwise\n const changedPropertiesObject = Object.fromEntries(changedProperties);\n\n if (changedPropertiesObject['size'] || changedPropertiesObject['color']) {\n this.setIconAttributes();\n }\n }\n\n setIconAttributes() {\n let iconWithCustomAttributes = this.icon\n .replace(/ width=\"\\d*\"/, ` width=\"${this.getSize(this.size).toString()}\"`)\n .replace(\n / height=\"\\d*\"/,\n ` height=\"${this.getSize(this.size).toString()}\"`,\n )\n .replace(/>/, `display=\"block\"\\naria-hidden=\"true\"\\n>`);\n\n if (this.color && this.isValidColor(this.color)) {\n iconWithCustomAttributes = iconWithCustomAttributes.replace(\n / stroke=\".*?\"/g,\n ` stroke=\"${this.color}\"`,\n );\n }\n\n return iconWithCustomAttributes;\n }\n}\n"],"names":["pdsCustomIconElement","tagName","constructor","customElement","validIconColors","themedefault.SemanticBorderIconDefault","themedefault.SemanticBorderInvertedDefault","themedefault.SemanticBorderDisabled","themedefault.SemanticBorderInfo","themedefault.SemanticBorderInvertedInfo","themedefault.SemanticBorderSuccess","themedefault.SemanticBorderInvertedSuccess","themedefault.SemanticBorderWarning","themedefault.SemanticBorderError","themedefault.SemanticBorderInvertedError","themedefault.SemanticBorderInteractiveDefault","themedefault.SemanticBorderInteractiveStrong","themedefault.SemanticBorderInteractiveXstrong","themedefault.SemanticBorderInteractiveInvertedStrong","themedefault.SemanticBorderInteractiveInvertedXstrong","PdsIcon","LitElement","size","color","isValid","changedProperties","changedPropertiesObject","iconWithCustomAttributes","__decorateClass","property","state"],"mappings":";;AAUO,SAASA,EAAqBC,GAAiB;AAC7C,SAAA,SACLC,GACA;AACA,IAAI,eAAe,IAAID,CAAO,MAAM,UACpBE,EAAAF,CAAO,EAAEC,CAAW;AAAA,EAEtC;AACF;;;;;;ACRO,MAAME,IAAkB;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF;AAOO,MAAeC,UAAgBC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAyCY,KAAA,OAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA/BjB,QAAQC,GAAwB;AAC9B,YAAQA,GAAM;AAAA,MACZ,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT;AACS,eAAA;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,aAAaC,GAAyC;AAC9C,UAAAC,IAAUpB,EAAgB,SAASmB,CAAuB;AAEhE,WAAKC,KAEK,QAAA;AAAA,MACN;AAAA,IACF,GAGKA;AAAA,EAAA;AAAA,EAYT,QACEC,GACM;AAIA,UAAAC,IAA0B,OAAO,YAAYD,CAAiB;AAEpE,KAAIC,EAAwB,QAAWA,EAAwB,UAC7D,KAAK,kBAAkB;AAAA,EACzB;AAAA,EAGF,oBAAoB;AAClB,QAAIC,IAA2B,KAAK,KACjC,QAAQ,gBAAgB,WAAW,KAAK,QAAQ,KAAK,IAAI,EAAE,SAAS,CAAC,GAAG,EACxE;AAAA,MACC;AAAA,MACA,YAAY,KAAK,QAAQ,KAAK,IAAI,EAAE,UAAU;AAAA,IAAA,EAE/C,QAAQ,KAAK;AAAA;AAAA,EAAwC;AAExD,WAAI,KAAK,SAAS,KAAK,aAAa,KAAK,KAAK,MAC5CA,IAA2BA,EAAyB;AAAA,MAClD;AAAA,MACA,YAAY,KAAK,KAAK;AAAA,IACxB,IAGKA;AAAA,EAAA;AAEX;AAvCEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAxCNT,EAyCpB,WAAA,MAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA3CNT,EA4CpB,WAAA,OAAA;AAGAQ,EAAA;AAAA,EADCE,EAAM;AAAA,GA9CaV,EA+CpB,WAAA,MAAA;"}