npm - @usecapsule/core-components - Versions diffs - 3.14.0 → 3.16.0 - Mend

@usecapsule/core-components 3.14.0 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/dist/collection/components/cpsl-button/cpsl-button.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-button.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.stories.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA4C;IACpD,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE;IAC7D,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC;SAC1D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;SAC7B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,gBAAgB,CAAC;AAC3H,MAAM,gBAAgB,GAAU,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,qDAAqD,IAAI,CAAC,OAAO,gBAAgB,CAAC;AAEnL,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,mBAAmB;CAC7B,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslButton } from './cpsl-button';\n\nconst meta: Meta<CpslButton & { content?: string }> = {\n title: 'Components/CpslButton',\n args: { variant: 'primary', size: 'medium', content: 'Test' },\n argTypes: {\n variant: {\n control: {\n type: 'select',\n },\n options: ['primary', 'secondary', 'ghost', 'destructive'],\n },\n size: {\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslButton & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\">${args.content}</cpsl-button>`;\nconst TemplateWithIcon: Story = args => `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\"><cpsl-icon icon=\"home\" slot=\"start\"></cpsl-icon>${args.content}</cpsl-button>`;\n\nexport const Primary: Story = Template.bind({});\nPrimary.args = {\n content: 'Primary',\n};\n\nexport const Secondary: Story = Template.bind({});\nSecondary.args = {\n content: 'Secondary',\n variant: 'secondary',\n};\n\nexport const Ghost: Story = Template.bind({});\nGhost.args = {\n content: 'Ghost',\n variant: 'ghost',\n};\n\nexport const Destructive: Story = Template.bind({});\nDestructive.args = {\n content: 'Destructive',\n variant: 'destructive',\n};\n\nexport const Icon: Story = TemplateWithIcon.bind({});\nIcon.args = {\n content: '',\n variant: 'ghost',\n};\n\nexport const PrimaryWithIcon: Story = TemplateWithIcon.bind({});\nPrimaryWithIcon.args = {\n content: 'Primary With Icon',\n};\n"]}
1	+ {"version":3,"file":"cpsl-button.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.stories.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA4C;IACpD,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE;IAC7D,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC;SAC1D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;SAC7B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,gBAAgB,CAAC;AAC3H,MAAM,gBAAgB,GAAU,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,qDAAqD,IAAI,CAAC,OAAO,gBAAgB,CAAC;AAEnL,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,mBAAmB;CAC7B,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslButton } from './cpsl-button.js';\n\nconst meta: Meta<CpslButton & { content?: string }> = {\n title: 'Components/CpslButton',\n args: { variant: 'primary', size: 'medium', content: 'Test' },\n argTypes: {\n variant: {\n control: {\n type: 'select',\n },\n options: ['primary', 'secondary', 'ghost', 'destructive'],\n },\n size: {\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslButton & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\">${args.content}</cpsl-button>`;\nconst TemplateWithIcon: Story = args => `<cpsl-button variant=\"${args.variant}\" size=\"${args.size}\"><cpsl-icon icon=\"home\" slot=\"start\"></cpsl-icon>${args.content}</cpsl-button>`;\n\nexport const Primary: Story = Template.bind({});\nPrimary.args = {\n content: 'Primary',\n};\n\nexport const Secondary: Story = Template.bind({});\nSecondary.args = {\n content: 'Secondary',\n variant: 'secondary',\n};\n\nexport const Ghost: Story = Template.bind({});\nGhost.args = {\n content: 'Ghost',\n variant: 'ghost',\n};\n\nexport const Destructive: Story = Template.bind({});\nDestructive.args = {\n content: 'Destructive',\n variant: 'destructive',\n};\n\nexport const Icon: Story = TemplateWithIcon.bind({});\nIcon.args = {\n content: '',\n variant: 'ghost',\n};\n\nexport const PrimaryWithIcon: Story = TemplateWithIcon.bind({});\nPrimaryWithIcon.args = {\n content: 'Primary With Icon',\n};\n"]}

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js CHANGED Viewed

@@ -93,10 +93,10 @@ export class CpslCodeInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'fd588544d9cdebaaeb1961f4ecb5c5630e8e4699' }, h("div", { key: 'b795c99f0df6fbf4ba9a7118f3f737dbf22c7ee9', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '9c620c8eb41b595e672e2b7d22944e37de630f73' }, h("div", { key: 'd8e870d0b15b90cfccd78ba5f15cf7b9c0680f0a', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a, _b;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { key: '9cff50eb172f38af5065ad79e3c767f2e8ec33c9', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c8d7dbbd0ec7a2015e2e8099d0448b847641b845', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '4ae4009a2fb4d8f6dc4c985ea8d39c136cb23780' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: '532bccdc9d9135f4728c503c77b3795440a3607a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '02db8b47b661f64f2fb3073827aef50d7b94f1f3', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '228b294db359a308d3e76f2ce3c5d17b2d039781' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }
@@ -217,7 +217,7 @@ export class CpslCodeInput {
                     "references": {
                         "CodeChangeEventDetail": {
                             "location": "import",
-                            "path": "./code-change-interface",
+                            "path": "./code-change-interface.js",
                             "id": "src/components/cpsl-code-input/code-change-interface.ts::CodeChangeEventDetail"
                         }
                     }

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n tag: 'cpsl-code-input',\n styleUrl: 'cpsl-code-input.scss',\n shadow: true,\n})\nexport class CpslCodeInput {\n @Element() el!: HTMLCpslCodeInputElement;\n\n /*\n Value of the code.\n /\n\n @Prop({ mutable: true }) code: string;\n\n /\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n Length of the code.\n /\n @Prop() length: number;\n\n /\n Type of characters to accept in the code.\n * Defaults to number.\n /\n @Prop() type?: 'number' \| 'string' = 'number';\n\n /\n The `cpslInput` event is fired each time the user modifies the input's value.\n */\n @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n private handleInput = (ind: number, ev: InputEvent) => {\n const inputElements = this.inputs;\n // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n if (ev.inputType === 'insertFromPaste') {\n inputElements[Math.min(this.length - 1, ind)].value = '';\n return;\n }\n if (ev.inputType === 'insertText') {\n if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n inputElements[ind].value = '';\n return;\n }\n const newCode = `${this.code ?? ''}${ev.data}`;\n inputElements[Math.min(this.length - 1, newCode.length)].focus();\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n }\n };\n\n private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n const inputElements = this.inputs;\n\n switch (ev.key) {\n case 'Backspace': {\n let newCode;\n if (!inputElements[ind].value) {\n inputElements[Math.max(0, ind - 1)].value = '';\n inputElements[Math.max(0, ind - 1)].focus();\n newCode = this.code.substring(0, ind - 1);\n } else {\n newCode = this.code.substring(0, ind);\n }\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n break;\n }\n case 'ArrowLeft': {\n setTimeout(() => {\n this.inputs[ind].setSelectionRange(1, 1);\n }, 0);\n break;\n }\n default: {\n break;\n }\n }\n };\n\n private handleFocus = (ind: number) => {\n const inputElements = this.inputs;\n\n for (const input of inputElements) {\n if (!input.value) {\n input.focus();\n break;\n } else if (input.id === `code-input-${this.length - 1}`) {\n input.focus();\n break;\n }\n }\n\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n };\n\n private handlePaste = (e: ClipboardEvent) => {\n const inputElements = this.inputs;\n const pastedCode = e.clipboardData.getData('text');\n\n if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n setTimeout(() => {\n inputElements[0].value = '';\n }, 0);\n return;\n }\n\n this.cpslInput.emit({\n value: pastedCode,\n });\n inputElements.forEach((input, index) => {\n input.value = pastedCode.charAt(index);\n });\n inputElements[Math.min(this.length - 1, pastedCode.length)].focus();\n };\n\n private get inputs() {\n return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n }\n\n render() {\n return (\n <Host>\n <div class=\"code-container\">\n {new Array(this.length).fill(0).map((_, i) => (\n <input\n class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n id={`code-input-${i}`}\n onKeyDown={ev => this.handleKeyDown(i, ev)}\n onInput={ev => this.handleInput(i, ev)}\n onFocus={() => this.handleFocus(i)}\n onPaste={this.handlePaste}\n min={0}\n max={9}\n value={this.code?.[i]}\n inputMode={this.type === 'number' ? 'numeric' : 'text'}\n />\n ))}\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface.js';\n\n@Component({\n tag: 'cpsl-code-input',\n styleUrl: 'cpsl-code-input.scss',\n shadow: true,\n})\nexport class CpslCodeInput {\n @Element() el!: HTMLCpslCodeInputElement;\n\n /*\n Value of the code.\n /\n\n @Prop({ mutable: true }) code: string;\n\n /\n Error text to show below the input. If this is provided the input will enter an error state.\n /\n @Prop() errorText?: string;\n\n /\n Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n /\n @Prop() helperText?: string;\n\n /\n Length of the code.\n /\n @Prop() length: number;\n\n /\n Type of characters to accept in the code.\n * Defaults to number.\n /\n @Prop() type?: 'number' \| 'string' = 'number';\n\n /\n The `cpslInput` event is fired each time the user modifies the input's value.\n */\n @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n private handleInput = (ind: number, ev: InputEvent) => {\n const inputElements = this.inputs;\n // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n if (ev.inputType === 'insertFromPaste') {\n inputElements[Math.min(this.length - 1, ind)].value = '';\n return;\n }\n if (ev.inputType === 'insertText') {\n if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n inputElements[ind].value = '';\n return;\n }\n const newCode = `${this.code ?? ''}${ev.data}`;\n inputElements[Math.min(this.length - 1, newCode.length)].focus();\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n }\n };\n\n private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n const inputElements = this.inputs;\n\n switch (ev.key) {\n case 'Backspace': {\n let newCode;\n if (!inputElements[ind].value) {\n inputElements[Math.max(0, ind - 1)].value = '';\n inputElements[Math.max(0, ind - 1)].focus();\n newCode = this.code.substring(0, ind - 1);\n } else {\n newCode = this.code.substring(0, ind);\n }\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n break;\n }\n case 'ArrowLeft': {\n setTimeout(() => {\n this.inputs[ind].setSelectionRange(1, 1);\n }, 0);\n break;\n }\n default: {\n break;\n }\n }\n };\n\n private handleFocus = (ind: number) => {\n const inputElements = this.inputs;\n\n for (const input of inputElements) {\n if (!input.value) {\n input.focus();\n break;\n } else if (input.id === `code-input-${this.length - 1}`) {\n input.focus();\n break;\n }\n }\n\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n };\n\n private handlePaste = (e: ClipboardEvent) => {\n const inputElements = this.inputs;\n const pastedCode = e.clipboardData.getData('text');\n\n if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n setTimeout(() => {\n inputElements[0].value = '';\n }, 0);\n return;\n }\n\n this.cpslInput.emit({\n value: pastedCode,\n });\n inputElements.forEach((input, index) => {\n input.value = pastedCode.charAt(index);\n });\n inputElements[Math.min(this.length - 1, pastedCode.length)].focus();\n };\n\n private get inputs() {\n return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n }\n\n render() {\n return (\n <Host>\n <div class=\"code-container\">\n {new Array(this.length).fill(0).map((_, i) => (\n <input\n class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n id={`code-input-${i}`}\n onKeyDown={ev => this.handleKeyDown(i, ev)}\n onInput={ev => this.handleInput(i, ev)}\n onFocus={() => this.handleFocus(i)}\n onPaste={this.handlePaste}\n min={0}\n max={9}\n value={this.code?.[i]}\n inputMode={this.type === 'number' ? 'numeric' : 'text'}\n />\n ))}\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-col/cpsl-col.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, forceUpdate, h } from "@stencil/core";
-import { matchBreakpoint } from "../../utils/media";
+import { matchBreakpoint } from "../../utils/media.js";
 const win = typeof window !== 'undefined' ? window : undefined;
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
@@ -105,7 +105,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'febc737118ea526e5c53e8e59479a245ec1b5dd1', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '88e01f9f4ed95eedbfd0620398792d9d5d58633d' })));
+        return (h(Host, { key: 'c9d2d0d4c021bc38e672ef6a8db36b1f50f53e2c', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'a9f61e679573d1ec7cf26ac9837b0fabf9f885eb' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-col/cpsl-col.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /*\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media.js';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /*\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-drawer/cpsl-drawer.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { DEFAULT_Z_INDICES } from "../../constants";
+import { DEFAULT_Z_INDICES } from "../../constants.js";
 export class CpslDrawer {
     constructor() {
         this.closedAnchorPosition = undefined;
@@ -33,12 +33,12 @@ export class CpslDrawer {
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
         const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
         const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
-        return (h(Host, { key: '81d454f0a4532e333880f4e37a79545ee5710536', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
+        return (h(Host, { key: 'a658bc7f4a536ad193ffa83045fc9ee051ce00c8', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '21fdc68cd01c652b7a9f8e1d624027f4051fdb47', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '085ba3bf2b57ceeb5615c42816e7a0f8758eeeb0', id: "container", class: "container", part: "container" }, h("slot", { key: 'bd8517779864cf35bc30b33597b27a43c749ba1f' }))));
+            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '4af453a7893322c7327e4ae2daa36c510d79f63a', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'd223fe6203a4b927a4c7b4254fbf74bd0c5b7ba4', id: "container", class: "container", part: "container" }, h("slot", { key: 'c297bc0a9ce799ea62e84a7c15b3d56279424091' }))));
     }
     static get is() { return "cpsl-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-drawer/cpsl-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-drawer.js","sourceRoot":"","sources":["../../../../src/components/cpsl-drawer/cpsl-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AAOpD~~,MAAM,OAAO,UAAU;;;;;;;;;kCAmCiB,IAAI;kCAMJ,aAAa;uBAOL,WAAW;;;IAOzD,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;QAC9D,uCAAuC;QACvC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,kBAAkB;;QACxB,OAAO,MAAA,IAAI,CAAC,WAAW,0CAAE,YAAY,CAAC;IACxC,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QACpE,MAAM,cAAc,GAAG,MAAA,GAAG,IAAI,CAAC,cAAc,IAAI,mCAAI,KAAK,CAAC;QAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAE9D,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,kBACH,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EACjC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,EAClC,kBAAkB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG,EAC3E,wBAAwB,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EACtD,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EACrG,OAAO,EAAE,IAAI,CAAC,oBAAoB,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IACzD,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAEtE,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,KAAK;gBAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAChC,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAC5B,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;aAC/B;YAEA,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,iBAAiB,CAAC,KAAK,GAAG,CAAC,GAAI;YAClI,4DAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW;gBACpD,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Element, h, State } from '@stencil/core';\nimport { DEFAULT_Z_INDICES } from '../../constants';\n\n@Component({\n tag: 'cpsl-drawer',\n styleUrl: 'cpsl-drawer.scss',\n shadow: true,\n})\nexport class CpslDrawer {\n @Element() el!: HTMLCpslDrawerElement;\n\n @State() closedAnchorPosition?: string;\n @State() showTransition: boolean;\n\n /*\n Side from which the drawer will enter from.\n /\n @Prop() anchor: 'top' \| 'bottom' \| 'left' \| 'right';\n\n /\n Starting anchor position.\n /\n @Prop() anchorPosition?: number;\n\n /\n Hides the overlay for temporary drawers.\n /\n @Prop() noOverlay?: boolean;\n\n /\n Whether the drawer is open or not.\n /\n @Prop() open: boolean;\n\n /\n Size (height or width) of the drawer.\n /\n @Prop() size: number \| 'auto';\n\n /\n Duration in seconds of the open/close animation.\n * Default is 0.15.\n /\n @Prop() transitionDuration?: number = 0.15;\n\n /\n Transition timing function to use.\n * Default is ease-in-out.\n /\n @Prop() transitionFunction?: string = 'ease-in-out';\n\n /\n The variant of the drawer.\n * `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\n * Default is `temporary`.\n /\n @Prop() variant?: 'temporary' \| 'permanent' = 'temporary';\n\n /\n Override z-index.\n */\n @Prop() zIndexOverride?: number;\n\n componentDidLoad() {\n this.closedAnchorPosition = `-${this.getContainerHeight()}px`;\n // Show transition after initial render\n setTimeout(() => {\n this.showTransition = true;\n }, 100);\n }\n\n private getContainerHeight() {\n return this.containerEl?.clientHeight;\n }\n\n private get containerEl() {\n return this.el.shadowRoot.getElementById('container');\n }\n\n render() {\n const setHeight = this.anchor === 'top' \|\| this.anchor === 'bottom';\n const startingAnchor = `${this.anchorPosition}px` ?? '0px';\n const size = this.size === 'auto' ? 'auto' : `${this.size}px`;\n\n return (\n <Host\n style={{\n width: setHeight ? '100vw' : size,\n height: setHeight ? size : '100vh',\n transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`,\n transitionTimingFunction: `${this.transitionFunction}`,\n [this.anchor]: this.open \|\| this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition,\n opacity: this.closedAnchorPosition === undefined ? '0' : '1',\n ...(this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}),\n }}\n class={{\n top: this.anchor === 'top',\n bottom: this.anchor === 'bottom',\n left: this.anchor === 'left',\n right: this.anchor === 'right',\n }}\n >\n {this.variant === 'temporary' && !this.noOverlay && <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />}\n <div id=\"container\" class=\"container\" part=\"container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-drawer.js","sourceRoot":"","sources":["../../../../src/components/cpsl-drawer/cpsl-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Element, h, State } from '@stencil/core';\nimport { DEFAULT_Z_INDICES } from '../../constants.js';\n\n@Component({\n tag: 'cpsl-drawer',\n styleUrl: 'cpsl-drawer.scss',\n shadow: true,\n})\nexport class CpslDrawer {\n @Element() el!: HTMLCpslDrawerElement;\n\n @State() closedAnchorPosition?: string;\n @State() showTransition: boolean;\n\n /*\n Side from which the drawer will enter from.\n /\n @Prop() anchor: 'top' \| 'bottom' \| 'left' \| 'right';\n\n /\n Starting anchor position.\n /\n @Prop() anchorPosition?: number;\n\n /\n Hides the overlay for temporary drawers.\n /\n @Prop() noOverlay?: boolean;\n\n /\n Whether the drawer is open or not.\n /\n @Prop() open: boolean;\n\n /\n Size (height or width) of the drawer.\n /\n @Prop() size: number \| 'auto';\n\n /\n Duration in seconds of the open/close animation.\n * Default is 0.15.\n /\n @Prop() transitionDuration?: number = 0.15;\n\n /\n Transition timing function to use.\n * Default is ease-in-out.\n /\n @Prop() transitionFunction?: string = 'ease-in-out';\n\n /\n The variant of the drawer.\n * `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\n * Default is `temporary`.\n /\n @Prop() variant?: 'temporary' \| 'permanent' = 'temporary';\n\n /\n Override z-index.\n */\n @Prop() zIndexOverride?: number;\n\n componentDidLoad() {\n this.closedAnchorPosition = `-${this.getContainerHeight()}px`;\n // Show transition after initial render\n setTimeout(() => {\n this.showTransition = true;\n }, 100);\n }\n\n private getContainerHeight() {\n return this.containerEl?.clientHeight;\n }\n\n private get containerEl() {\n return this.el.shadowRoot.getElementById('container');\n }\n\n render() {\n const setHeight = this.anchor === 'top' \|\| this.anchor === 'bottom';\n const startingAnchor = `${this.anchorPosition}px` ?? '0px';\n const size = this.size === 'auto' ? 'auto' : `${this.size}px`;\n\n return (\n <Host\n style={{\n width: setHeight ? '100vw' : size,\n height: setHeight ? size : '100vh',\n transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`,\n transitionTimingFunction: `${this.transitionFunction}`,\n [this.anchor]: this.open \|\| this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition,\n opacity: this.closedAnchorPosition === undefined ? '0' : '1',\n ...(this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}),\n }}\n class={{\n top: this.anchor === 'top',\n bottom: this.anchor === 'bottom',\n left: this.anchor === 'left',\n right: this.anchor === 'right',\n }}\n >\n {this.variant === 'temporary' && !this.noOverlay && <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />}\n <div id=\"container\" class=\"container\" part=\"container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { Icons } from "../../assets/icons";
+import { Icons } from "../../assets/icons/index.js";
 export class CpslDropdown {
     constructor() {
         this.toggleDropdown = () => {
@@ -94,7 +94,7 @@ export class CpslDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+        return (h(Host, { key: '95a5e98e81c71d0d22fb92dc7669a071c8982d5d' }, h("button", { key: '56b6bfca6283796be4a68b4bf2eb2404637c50e7', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'd589fca8b9ac25d0884b5a059c618b14547ca9fc', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'ae1977c621830127463fcc142e26141a93780048', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '98225551b1a3f5fcd744c873d09ea606e2b3141f', class: "search-bar" }, h("input", { key: '71988503de0b51e3e3cd771c11f25809da813db5', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     static get is() { return "cpsl-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -159,7 +159,7 @@ export class CpslDropdown {
                         },
                         "DropdownInputEventDetail": {
                             "location": "import",
-                            "path": "./dropdown-interface",
+                            "path": "./dropdown-interface.js",
                             "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
                         }
                     }
@@ -181,7 +181,7 @@ export class CpslDropdown {
                     "references": {
                         "DropdownInputEventDetail": {
                             "location": "import",
-                            "path": "./dropdown-interface",
+                            "path": "./dropdown-interface.js",
                             "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
                         }
                     }
@@ -220,7 +220,7 @@ export class CpslDropdown {
                     "references": {
                         "DropdownInputEventDetail": {
                             "location": "import",
-                            "path": "./dropdown-interface",
+                            "path": "./dropdown-interface.js",
                             "id": "src/components/cpsl-dropdown/dropdown-interface.ts::DropdownInputEventDetail"
                         }
                     }

package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAsB,KAAK,EAAE,MAAM,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACjI,OAAO,EAAE,KAAK,EAAE,MAAM,~~oBAAoB~~,CAAC;~~AAQ3C~~,MAAM,OAAO,YAAY;;QAuCf,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,IAA8B,EAAE,YAAqB,IAAI,EAAE,EAAE;YACjF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAA8B,EAAE,EAAE,CAAC,GAAG,EAAE;YAClE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACtD,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QACpH,CAAC,CAAC;QAiDM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC3D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;qBA1GsB,MAAM;6BAKG,KAAK;sBAEX,KAAK;2BACD,EAAE;6BACyB,EAAE;qBAKX,EAAE;4BAKuB,IAAI;;IAQ9E,wBAAwB,CAAC,QAAyC;QAChE,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAyBD,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACpC,CAAC;IACH,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,cAAc;;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAgB,CAAC;QAC7F,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,qBAAqB,EAAE,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;QACjF,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;QAE1C,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;YACrC,eAAe,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,CAAC,CAAC,IAAI,CAAC;YACjD,IAAI,MAAM,CAAC,UAAU,IAAI,GAAG,EAAE,CAAC;gBAC7B,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;gBACnC,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC;gBACpC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;gBAC1C,OAAO;YACT,CAAC;YACD,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC;YAEpE,MAAM,eAAe,GAAG,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC;YAC3D,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,eAAe,GAAG,CAAC,IAAI,CAAC;QAC/D,CAAC;IACH,CAAC;IAEO,uBAAuB;QAC7B,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC5D,CAAC;IAEO,0BAA0B;QAChC,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAQD,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE,CAAC;gBAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,0BAA0B,EAAE,CAAC;IACpC,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;gBACzD,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,aAAa,MAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAA,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE;gBAC9F,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,GAAI,CAChF;YACT,2DAAI,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;gBACvF,IAAI,CAAC,aAAa,IAAI,CACrB,2DAAI,KAAK,EAAC,YAAY;oBACpB,8DAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAC1G,CACN;gBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC9B,UAAI,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBACtC,YAAM,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;oBACzC,IAAI,CAAC,KAAK;;oBAAE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACN,CAAC,CACC,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /*\n Width of the dropdown\n /\n @Prop() width: string = '100%';\n\n /\n Whether or not to include search capability\n /\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /\n Items to be presented in the dropdown\n /\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /\n The selected item in the dropdown\n /\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail \| null = null;\n\n /\n Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail \| null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n if (window.innerWidth <= 480) {\n searchBar.style.maxHeight = `30px`;\n dropdownOptions.style.top = `425px`;\n dropdownOptions.style.maxHeight = '110px';\n return;\n }\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel \|\| this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n </li>\n )}\n {this.filteredItems.map(item => (\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons/index.js';\nimport { DropdownInputEventDetail } from './dropdown-interface.js';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /*\n Width of the dropdown\n /\n @Prop() width: string = '100%';\n\n /\n Whether or not to include search capability\n /\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /\n Items to be presented in the dropdown\n /\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /\n The selected item in the dropdown\n /\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail \| null = null;\n\n /\n Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail \| null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n if (window.innerWidth <= 480) {\n searchBar.style.maxHeight = `30px`;\n dropdownOptions.style.top = `425px`;\n dropdownOptions.style.maxHeight = '110px';\n return;\n }\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel \|\| this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search...\" value={this.searchQuery} onInput={this.handleSearchQueryChange} />\n </li>\n )}\n {this.filteredItems.map(item => (\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-dropdown/dropdown-interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/dropdown-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconType } from '../../interface';\n\nexport interface DropdownInputEventDetail {\n icon: IconType;\n label: string;\n value: string;\n selectedLabel?: string;\n}\n"]}
1	+ {"version":3,"file":"dropdown-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/dropdown-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconType } from '../../interface.js';\n\nexport interface DropdownInputEventDetail {\n icon: IconType;\n label: string;\n value: string;\n selectedLabel?: string;\n}\n"]}

package/dist/collection/components/cpsl-hero/cpsl-hero.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Fragment, Host, h } from "@stencil/core";
-import { Images } from "../../assets/images";
+import { Images } from "../../assets/images/index.js";
 export class CpslHero {
     constructor() {
         this.height = undefined;
@@ -11,7 +11,7 @@ export class CpslHero {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e57d19559f8d8c92c23dcf95ca88246529a4b46f', class: {
+        return (h(Host, { key: '403d850e7b1217d70ca111f774e41b69a9d139ba', class: {
                 // VARIANTS
                 connection: this.variant === 'connection',
                 pending: this.variant === 'pending' || this.variant === 'customContent',
@@ -19,7 +19,7 @@ export class CpslHero {
                 add: this.variant === 'add',
                 failed: this.variant === 'failed',
                 externalWalletConnection: this.variant === 'externalWalletConnection',
-            } }, h("div", { key: '3341d0ad455074858c3b0a9b9fe7af291ad198eb', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: '4835ffd38a99277e7178023188aae95dc6ba4ee5', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: '565638be3e6c5d230a50329031ec47c87a0e8077', class: "ring ring3" }), h("div", { key: '483a3691798e33c8547543ef6a397bb8992f86e3', class: "ring ring2" }), h("div", { key: 'c0ca1841f37918e0e1a805b34f53e2f0b204bbda', class: "ring ring1" }), h("div", { key: 'ea3b347c265679d6acd1bdd8ed26a9761d649caa', class: "ring ring0" }), h("div", { key: '1be1e9e5ef42961d8daeb4997daefc118e50b349', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: '137e8b9bfb53df3208104b77767cfab0f06a500a' }, h("img", { key: '519fa3982fdbc8cee57ba3c3d2a470039d6165e3', class: "connectionImage", src: Images.heroDefault }), h("div", { key: '128cc3362b905a35ca781b4b0eab45912542e185', class: "connectDiagramContainer" }, h("slot", { key: 'bbac944d46752eb2a997c3751b7395d13c0f6ce5', name: "connectionLeft" }), h("slot", { key: '30fd8334daf3944c51ceb4ea9f42cd489125d85c', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: 'e332372db7e6651d1419d8ef83c60ed255ff1cd5', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '7674761e57156f14350082a5e9a95a423e5a916d' }, !this.withDefaultTheme && h("img", { key: 'fc1a5e6bcff525490e85e0ac84542ecc70c78d65', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'fd3341ee64f6f598a299deda12ad2fab633aaa1a', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: '155fc4680ce6bedc930cc6b27eb676eb4b067acb' }, h("cpsl-icon", { key: 'ca4dac8a0b2e0dd4fb198195528209d648d71289', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: 'd6d1886df2a68eb365924788b4bb080281e31aac', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '783ec93baf3c3c79813a39c60c35b7a04b34d56c' }, h("cpsl-icon", { key: '56e792294a698f86591a7b5f1e25b08a0428c5b7', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '790af19407de8398e5ed3efe676edd856d7b222f', class: "connectDiagramContainer" }, h("slot", { key: 'fe702ae2f8f515dd3697684defd4cc6c06495283', name: "connectionLeft" }), h("slot", { key: 'db0670c2f4095a2e3cfd287e03ad6a429fe8caef', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: '0e7a0ab404fdb0fbcc249dc3ec3537e2554a945a', class: "customImageContainer" }, h("slot", { key: 'fb0afeb690e5676007d0ccc1545f9ce9791af045', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: '2fa75125453408d7fe3d7d3a6c1e9091c5042afe' }, h("div", { key: 'e9b06d0d820e8cc30d10147bcfcb55279d3977a0', class: "fadeOut" }), h("div", { key: '0018aa5158cd89c81184c50f3581e1bbecb961ee', class: "cover" }))))), h("cpsl-text", { key: 'b52135d714d10638dd03342bc4c1f374509d2bfd', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: '2c4dbbc33c7d3faaed5ef9e0d32d49f064667502', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
+            } }, h("div", { key: '8f05e36979ea1330bbe96ec508d8f14a1a02c091', class: "backgroundContainer", style: { height: `${(_a = this.height) !== null && _a !== void 0 ? _a : 180}px` } }, h("div", { key: 'db559f71771f68691d2011f596dd388e3230c275', class: { background: true, defaultTheme: this.withDefaultTheme } }, h("div", { key: 'bf15417c50cdcb73517437ab789fbc1dbc75229f', class: "ring ring3" }), h("div", { key: 'f300be03746ecadf960d01e61831fb6f6c699a35', class: "ring ring2" }), h("div", { key: 'c5cf69ac96561d88593855804016a955b2f9f010', class: "ring ring1" }), h("div", { key: '9feb7f7de12349655c13ae451b981d14b56299b3', class: "ring ring0" }), h("div", { key: 'f36cbdff2730b8bbc819215afa385f3ac41f107e', class: { ringCenter: true, defaultTheme: this.withDefaultTheme } }, this.variant === 'connection' && (h(Fragment, { key: '8141773df3fec1796857861a39dd98378e5c8b28' }, h("img", { key: 'd41c8de485382a3fc4153998ab427e541da563db', class: "connectionImage", src: Images.heroDefault }), h("div", { key: '4a13af336adc6caee733d47445f934030511b4f2', class: "connectDiagramContainer" }, h("slot", { key: 'b6a86c2b117157d126edbb8d1cca97da0e9d1cdb', name: "connectionLeft" }), h("slot", { key: '24f57f61cfca278bda5262bc26d7b85bc4a8f253', name: "connectionRight" })))), this.variant === 'pending' && h("img", { key: '35edda9724b9d5b0c39b95162bc53f45c9c4395d', class: "pendingImage", src: Images.heroPending }), this.variant === 'approved' && (h(Fragment, { key: '98d7a3064f75c7fc54d768cfa8b9f7c58f95485c' }, !this.withDefaultTheme && h("img", { key: '142b8662d4c60d21b944de15c76905e0703d928f', class: "approvedImage", src: Images.heroSuccess }), h("cpsl-icon", { key: 'd8bc8a26dd5f75aaa6827fdbdb5416c021d67f2c', class: "centerIcon", icon: this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule' }))), this.variant === 'add' && (h(Fragment, { key: 'f65c8e5603fcf3771022dde417fb4db68ec67a7e' }, h("cpsl-icon", { key: '400336aecac323ac84b71030d8e4093dfafaf8d0', class: "centerIcon", icon: this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule' }))), this.variant === 'failed' && h("cpsl-icon", { key: '27a14e25f85b3434878398a277be94b5dc62abc7', class: "centerIcon", icon: "heroAlertCircle" }), this.variant === 'externalWalletConnection' && (h(Fragment, { key: '513e25bf209ab3778c25c048a16b4d9b26858df3' }, h("cpsl-icon", { key: 'd2749b83a949a96543639cbe847d3beb9bb907cc', class: "externalConnectionIcon", icon: "heroExternalConnection" }), h("div", { key: '1228ed06953d754fc780d37135eee62a9d1aa27e', class: "connectDiagramContainer" }, h("slot", { key: 'a5b02e90bc7bc8c20bd3468b45dd6d05a847a507', name: "connectionLeft" }), h("slot", { key: '4b9dc5883dafc66898bb21a115cdd89b9e08541b', name: "connectionRight" })))), this.variant === 'customContent' && (h("div", { key: 'b5aff9ada43d9904d783d04e71380b66c9d696b7', class: "customImageContainer" }, h("slot", { key: 'a93bb8adb717fc438e58d53e2e6eabc7850c53bf', name: "image" })))), !this.hideFadeOut && (h(Fragment, { key: 'aba4d77ffb0005323dee0b355ddadd1f8a2333ce' }, h("div", { key: 'd7322ec10f121487291f56a2e7d3bdb00597b01b', class: "fadeOut" }), h("div", { key: 'ef7e812d40d5e3df2700dd84061956a2d61440b7', class: "cover" }))))), h("cpsl-text", { key: 'c4c372486f79712c2b37b310c1484f41c45156b1', variant: "headingXS", color: "primary", weight: "semiBold" }, this.title), this.subtitle && (h("cpsl-text", { key: 'efba45f91b1db86c759192fd14fa5727e71a8491', variant: "bodyS", weight: "medium", color: "secondary" }, this.subtitle))));
     }
     static get is() { return "cpsl-hero"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-hero/cpsl-hero.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,~~qBAAqB~~,CAAC;~~AAO7C~~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","sourcesContent":["import { Component, Fragment, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\n@Component({\n tag: 'cpsl-hero',\n styleUrl: 'cpsl-hero.scss',\n shadow: true,\n})\nexport class CpslHero {\n /*\n The height of the container.\n * Default is: 180.\n /\n @Prop() height?: number;\n\n /\n Hides the fade out components\n * Default is: `false`.\n /\n @Prop() hideFadeOut?: boolean;\n\n /\n The variant of the button.\n * Options are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\",`\"add\", `\"failed\".\n * Default is: `\"connection\"`.\n /\n @Prop({ reflect: true }) variant?: 'customContent' \| 'connection' \| 'externalWalletConnection' \| 'pending' \| 'approved' \| 'add' \| 'failed' = 'connection';\n\n @Prop({ reflect: true }) title: string;\n\n @Prop({ reflect: true }) subtitle?: string;\n\n /\n Whether to use the Capsule custom theming or use the provided theme\n * Default is: `false`.\n */\n @Prop() withDefaultTheme?: boolean;\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n connection: this.variant === 'connection',\n pending: this.variant === 'pending' \|\| this.variant === 'customContent',\n approved: this.variant === 'approved',\n add: this.variant === 'add',\n failed: this.variant === 'failed',\n externalWalletConnection: this.variant === 'externalWalletConnection',\n }}\n >\n <div class=\"backgroundContainer\" style={{ height: `${this.height ?? 180}px` }}>\n <div class={{ background: true, defaultTheme: this.withDefaultTheme }}>\n <div class=\"ring ring3\" />\n <div class=\"ring ring2\" />\n <div class=\"ring ring1\" />\n <div class=\"ring ring0\" />\n <div class={{ ringCenter: true, defaultTheme: this.withDefaultTheme }}>\n {this.variant === 'connection' && (\n <Fragment>\n <img class=\"connectionImage\" src={Images.heroDefault} />\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n </Fragment>\n )}\n {this.variant === 'pending' && <img class=\"pendingImage\" src={Images.heroPending} />}\n {this.variant === 'approved' && (\n <Fragment>\n {!this.withDefaultTheme && <img class=\"approvedImage\" src={Images.heroSuccess} />}\n <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule'} />\n </Fragment>\n )}\n {this.variant === 'add' && (\n <Fragment>\n <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule'} />\n </Fragment>\n )}\n {this.variant === 'failed' && <cpsl-icon class=\"centerIcon\" icon=\"heroAlertCircle\" />}\n {this.variant === 'externalWalletConnection' && (\n <Fragment>\n <cpsl-icon class=\"externalConnectionIcon\" icon=\"heroExternalConnection\" />\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n </Fragment>\n )}\n {this.variant === 'customContent' && (\n <div class=\"customImageContainer\">\n <slot name=\"image\" />\n </div>\n )}\n </div>\n {!this.hideFadeOut && (\n <Fragment>\n <div class=\"fadeOut\" />\n <div class=\"cover\" />\n </Fragment>\n )}\n </div>\n </div>\n <cpsl-text variant=\"headingXS\" color=\"primary\" weight=\"semiBold\">\n {this.title}\n </cpsl-text>\n {this.subtitle && (\n <cpsl-text variant=\"bodyS\" weight=\"medium\" color=\"secondary\">\n {this.subtitle}\n </cpsl-text>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-hero.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images/index.js';\n\n@Component({\n tag: 'cpsl-hero',\n styleUrl: 'cpsl-hero.scss',\n shadow: true,\n})\nexport class CpslHero {\n /*\n The height of the container.\n * Default is: 180.\n /\n @Prop() height?: number;\n\n /\n Hides the fade out components\n * Default is: `false`.\n /\n @Prop() hideFadeOut?: boolean;\n\n /\n The variant of the button.\n * Options are: `\"customContent\"`, `\"connection\"`, `\"externalWalletConnection\"`, `\"pending\", `\"approved\",`\"add\", `\"failed\".\n * Default is: `\"connection\"`.\n /\n @Prop({ reflect: true }) variant?: 'customContent' \| 'connection' \| 'externalWalletConnection' \| 'pending' \| 'approved' \| 'add' \| 'failed' = 'connection';\n\n @Prop({ reflect: true }) title: string;\n\n @Prop({ reflect: true }) subtitle?: string;\n\n /\n Whether to use the Capsule custom theming or use the provided theme\n * Default is: `false`.\n */\n @Prop() withDefaultTheme?: boolean;\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n connection: this.variant === 'connection',\n pending: this.variant === 'pending' \|\| this.variant === 'customContent',\n approved: this.variant === 'approved',\n add: this.variant === 'add',\n failed: this.variant === 'failed',\n externalWalletConnection: this.variant === 'externalWalletConnection',\n }}\n >\n <div class=\"backgroundContainer\" style={{ height: `${this.height ?? 180}px` }}>\n <div class={{ background: true, defaultTheme: this.withDefaultTheme }}>\n <div class=\"ring ring3\" />\n <div class=\"ring ring2\" />\n <div class=\"ring ring1\" />\n <div class=\"ring ring0\" />\n <div class={{ ringCenter: true, defaultTheme: this.withDefaultTheme }}>\n {this.variant === 'connection' && (\n <Fragment>\n <img class=\"connectionImage\" src={Images.heroDefault} />\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n </Fragment>\n )}\n {this.variant === 'pending' && <img class=\"pendingImage\" src={Images.heroPending} />}\n {this.variant === 'approved' && (\n <Fragment>\n {!this.withDefaultTheme && <img class=\"approvedImage\" src={Images.heroSuccess} />}\n <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroCheckmark' : 'heroCheckmarkCapsule'} />\n </Fragment>\n )}\n {this.variant === 'add' && (\n <Fragment>\n <cpsl-icon class=\"centerIcon\" icon={this.withDefaultTheme ? 'heroPlusCircle' : 'heroPlusCircleCapsule'} />\n </Fragment>\n )}\n {this.variant === 'failed' && <cpsl-icon class=\"centerIcon\" icon=\"heroAlertCircle\" />}\n {this.variant === 'externalWalletConnection' && (\n <Fragment>\n <cpsl-icon class=\"externalConnectionIcon\" icon=\"heroExternalConnection\" />\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n </Fragment>\n )}\n {this.variant === 'customContent' && (\n <div class=\"customImageContainer\">\n <slot name=\"image\" />\n </div>\n )}\n </div>\n {!this.hideFadeOut && (\n <Fragment>\n <div class=\"fadeOut\" />\n <div class=\"cover\" />\n </Fragment>\n )}\n </div>\n </div>\n <cpsl-text variant=\"headingXS\" color=\"primary\" weight=\"semiBold\">\n {this.title}\n </cpsl-text>\n {this.subtitle && (\n <cpsl-text variant=\"bodyS\" weight=\"medium\" color=\"secondary\">\n {this.subtitle}\n </cpsl-text>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-hero/cpsl-hero.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-hero.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA0C;IAClD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,kBAAkB,GAAU,GAAG,EAAE,CAAC;;;;aAI3B,CAAC;AACd,MAAM,eAAe,GAAU,GAAG,EAAE,CAAC,2CAA2C,CAAC;AACjF,MAAM,gBAAgB,GAAU,GAAG,EAAE,CAAC,4CAA4C,CAAC;AACnF,MAAM,cAAc,GAAU,GAAG,EAAE,CAAC,0CAA0C,CAAC;AAE/E,MAAM,CAAC,MAAM,UAAU,GAAU,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7D,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,QAAQ,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,MAAM,GAAU,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslHero } from './cpsl-hero';\n\nconst meta: Meta<CpslHero & { content?: string }> = {\n title: 'Components/CpslHero',\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslHero & { content?: string }>;\n\nconst ConnectionTemplate: Story = () => `\n<cpsl-hero variant=\"connection\" title=\"Approve Transaction\" subtitle=\"Please review the following transaction details\">\n <cpsl-identicon size={62} hash=\"5yhg423546\" slot=\"connectionLeft\"></cpsl-identicon>\n <cpsl-identicon size={62} hash=\"884884fj4\" slot=\"connectionRight\"></cpsl-identicon>\n</cpsl-hero>`;\nconst PendingTemplate: Story = () => `<cpsl-hero variant=\"pending\"></cpsl-hero>`;\nconst ApprovedTemplate: Story = () => `<cpsl-hero variant=\"approved\"></cpsl-hero>`;\nconst FailedTemplate: Story = () => `<cpsl-hero variant=\"failed\"></cpsl-hero>`;\n\nexport const Connection: Story = ConnectionTemplate.bind({});\nexport const Pending: Story = PendingTemplate.bind({});\nexport const Approved: Story = ApprovedTemplate.bind({});\nexport const Failed: Story = FailedTemplate.bind({});\n"]}
1	+ {"version":3,"file":"cpsl-hero.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-hero/cpsl-hero.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA0C;IAClD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,kBAAkB,GAAU,GAAG,EAAE,CAAC;;;;aAI3B,CAAC;AACd,MAAM,eAAe,GAAU,GAAG,EAAE,CAAC,2CAA2C,CAAC;AACjF,MAAM,gBAAgB,GAAU,GAAG,EAAE,CAAC,4CAA4C,CAAC;AACnF,MAAM,cAAc,GAAU,GAAG,EAAE,CAAC,0CAA0C,CAAC;AAE/E,MAAM,CAAC,MAAM,UAAU,GAAU,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7D,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,QAAQ,GAAU,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,MAAM,CAAC,MAAM,MAAM,GAAU,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslHero } from './cpsl-hero.js';\n\nconst meta: Meta<CpslHero & { content?: string }> = {\n title: 'Components/CpslHero',\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslHero & { content?: string }>;\n\nconst ConnectionTemplate: Story = () => `\n<cpsl-hero variant=\"connection\" title=\"Approve Transaction\" subtitle=\"Please review the following transaction details\">\n <cpsl-identicon size={62} hash=\"5yhg423546\" slot=\"connectionLeft\"></cpsl-identicon>\n <cpsl-identicon size={62} hash=\"884884fj4\" slot=\"connectionRight\"></cpsl-identicon>\n</cpsl-hero>`;\nconst PendingTemplate: Story = () => `<cpsl-hero variant=\"pending\"></cpsl-hero>`;\nconst ApprovedTemplate: Story = () => `<cpsl-hero variant=\"approved\"></cpsl-hero>`;\nconst FailedTemplate: Story = () => `<cpsl-hero variant=\"failed\"></cpsl-hero>`;\n\nexport const Connection: Story = ConnectionTemplate.bind({});\nexport const Pending: Story = PendingTemplate.bind({});\nexport const Approved: Story = ApprovedTemplate.bind({});\nexport const Failed: Story = FailedTemplate.bind({});\n"]}

package/dist/collection/components/cpsl-icon/cpsl-icon.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
-import { Icons } from "../../assets/icons";
+import { Icons } from "../../assets/icons/index.js";
 export class CpslIcon {
     constructor() {
         this.src = undefined;
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '83970488e84a7359667faa9948079b3fac1b8e09', part: "icon", role: "img" }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '20e905e3d6222b981c9ddba4f3a49bc0702a3eed', part: "icon", role: "img" }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -48,7 +48,7 @@ export class CpslIcon {
                     "references": {
                         "IconType": {
                             "location": "import",
-                            "path": "../../interface",
+                            "path": "../../interface.js",
                             "id": "src/interface.ts::IconType"
                         }
                     }

package/dist/collection/components/cpsl-icon/cpsl-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,~~oBAAoB~~,CAAC;~~AAO3C~~,MAAM,OAAO,QAAQ;;;;;IAWnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,IACzB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\nimport { Icons } from '../../assets/icons';\n\n@Component({\n tag: 'cpsl-icon',\n styleUrl: 'cpsl-icon.scss',\n shadow: true,\n})\nexport class CpslIcon {\n /*\n The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n /\n @Prop() src?: string;\n\n /\n The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n */\n @Prop() icon?: IconType;\n\n render() {\n return (\n <Host part=\"icon\" role=\"img\">\n {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOpD,MAAM,OAAO,QAAQ;;;;;IAWnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,IACzB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\n@Component({\n tag: 'cpsl-icon',\n styleUrl: 'cpsl-icon.scss',\n shadow: true,\n})\nexport class CpslIcon {\n /*\n The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n /\n @Prop() src?: string;\n\n /\n The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n */\n @Prop() icon?: IconType;\n\n render() {\n return (\n <Host part=\"icon\" role=\"img\">\n {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { Icons } from "../../assets/icons";
+import { Icons } from "../../assets/icons/index.js";
 function isOfTypeIconType(key) {
     return Object.keys(Icons).includes(key);
 }
@@ -29,7 +29,7 @@ export class CpslIconGroup {
     render() {
         // If disabled remove all brand icons to ensure the disabled color is shown correctly
         const icons = this.disabled ? this.icons.map(icon => icon.replace('Brand', '')) : this.icons;
-        return (h(Host, { key: '687a32dfbceec5b1544c695bc4e8ffbcf094a384' }, icons.map((icon, index) => {
+        return (h(Host, { key: 'f471279b940c2b3b3872c1d37477fd85073127c8' }, icons.map((icon, index) => {
             const isIcon = isOfTypeIconType(icon);
             return (h("span", { part: "icon-container", class: {
                     'icon-container': true,
@@ -97,7 +97,7 @@ export class CpslIconGroup {
                     "references": {
                         "IconType": {
                             "location": "import",
-                            "path": "../../interface",
+                            "path": "../../interface.js",
                             "id": "src/interface.ts::IconType"
                         }
                     }

package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-icon-group.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon-group/cpsl-icon-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,KAAK,EAAE,MAAM,~~oBAAoB~~,CAAC;~~AAE3C~~,SAAS,gBAAgB,CAAC,GAAW;IACnC,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC;AAOD,MAAM,OAAO,aAAa;;;0BAQe,OAAO;wBAK3B,KAAK;;;IAOxB,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE;YAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,GAAG,EAAE;YAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,qFAAqF;QACrF,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAE7F,OAAO,CACL,EAAC,IAAI,uDACF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAEtC,OAAO,CACL,YACE,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;oBACL,gBAAgB,EAAE,IAAI;oBACtB,UAAU,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;oBAC7H,UAAU,EAAE,IAAI,CAAC,QAAQ;iBAC1B,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,EAAE,EAAE;gBAEjD,iBAAW,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GAAI,CACrF,CACR,CAAC;QACJ,CAAC,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State } from '@stencil/core';\nimport { IconType } from '../../interface';\nimport { Icons } from '../../assets/icons';\n\nfunction isOfTypeIconType(key: string): key is IconType {\n return Object.keys(Icons).includes(key);\n}\n\n@Component({\n tag: 'cpsl-icon-group',\n styleUrl: 'cpsl-icon-group.scss',\n shadow: true,\n})\nexport class CpslIconGroup {\n @Element() el!: HTMLCpslIconGroupElement;\n\n @State() isHovered: boolean;\n\n /*\n The direction the icons should expand from\n /\n @Prop() expandFrom: 'left' \| 'right' = 'right';\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n The name of the icons to display.\n */\n @Prop() icons: (IconType \| string)[];\n\n componentDidLoad() {\n this.el.addEventListener('mouseover', () => {\n this.isHovered = true;\n });\n this.el.addEventListener('mouseout', () => {\n this.isHovered = false;\n });\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('mouseover', () => {\n this.isHovered = true;\n });\n this.el.removeEventListener('mouseout', () => {\n this.isHovered = false;\n });\n }\n\n render() {\n // If disabled remove all brand icons to ensure the disabled color is shown correctly\n const icons = this.disabled ? this.icons.map(icon => icon.replace('Brand', '')) : this.icons;\n\n return (\n <Host>\n {icons.map((icon, index) => {\n const isIcon = isOfTypeIconType(icon);\n\n return (\n <span\n part=\"icon-container\"\n class={{\n 'icon-container': true,\n 'expanded': !this.disabled && this.isHovered && (this.expandFrom === 'right' ? index !== this.icons.length - 1 : index === 0),\n 'disabled': this.disabled,\n }}\n style={{ zIndex: `${this.icons.length - index}` }}\n >\n <cpsl-icon key={icon} icon={isIcon ? icon : undefined} src={!isIcon ? icon : undefined} />\n </span>\n );\n })}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-icon-group.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon-group/cpsl-icon-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,SAAS,gBAAgB,CAAC,GAAW;IACnC,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC;AAOD,MAAM,OAAO,aAAa;;;0BAQe,OAAO;wBAK3B,KAAK;;;IAOxB,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE;YAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,GAAG,EAAE;YAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,qFAAqF;QACrF,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAE7F,OAAO,CACL,EAAC,IAAI,uDACF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAEtC,OAAO,CACL,YACE,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;oBACL,gBAAgB,EAAE,IAAI;oBACtB,UAAU,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;oBAC7H,UAAU,EAAE,IAAI,CAAC,QAAQ;iBAC1B,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,EAAE,EAAE;gBAEjD,iBAAW,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GAAI,CACrF,CACR,CAAC;QACJ,CAAC,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, State } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\nfunction isOfTypeIconType(key: string): key is IconType {\n return Object.keys(Icons).includes(key);\n}\n\n@Component({\n tag: 'cpsl-icon-group',\n styleUrl: 'cpsl-icon-group.scss',\n shadow: true,\n})\nexport class CpslIconGroup {\n @Element() el!: HTMLCpslIconGroupElement;\n\n @State() isHovered: boolean;\n\n /*\n The direction the icons should expand from\n /\n @Prop() expandFrom: 'left' \| 'right' = 'right';\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n The name of the icons to display.\n */\n @Prop() icons: (IconType \| string)[];\n\n componentDidLoad() {\n this.el.addEventListener('mouseover', () => {\n this.isHovered = true;\n });\n this.el.addEventListener('mouseout', () => {\n this.isHovered = false;\n });\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('mouseover', () => {\n this.isHovered = true;\n });\n this.el.removeEventListener('mouseout', () => {\n this.isHovered = false;\n });\n }\n\n render() {\n // If disabled remove all brand icons to ensure the disabled color is shown correctly\n const icons = this.disabled ? this.icons.map(icon => icon.replace('Brand', '')) : this.icons;\n\n return (\n <Host>\n {icons.map((icon, index) => {\n const isIcon = isOfTypeIconType(icon);\n\n return (\n <span\n part=\"icon-container\"\n class={{\n 'icon-container': true,\n 'expanded': !this.disabled && this.isHovered && (this.expandFrom === 'right' ? index !== this.icons.length - 1 : index === 0),\n 'disabled': this.disabled,\n }}\n style={{ zIndex: `${this.icons.length - index}` }}\n >\n <cpsl-icon key={icon} icon={isIcon ? icon : undefined} src={!isIcon ? icon : undefined} />\n </span>\n );\n })}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-identicon/cpsl-identicon.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import Prando from "../../lib/prando";
-import { COLORS } from "../../utils/prand";
+import Prando from "../../lib/prando.js";
+import { COLORS } from "../../utils/prand.js";
 const SingleArc = (rotation) => (h("svg", { class: {
         rotate90: rotation === 1,
         rotate180: rotation === 2,
@@ -60,7 +60,7 @@ export class CpslIdenticon {
         const isEmpty = !this.hash;
         if (!isEmpty)
             props = getIdenticonProps(this.hash);
-        return (h(Host, { key: 'df11955bfd534443af672f89d5133010e2ae775d', class: {
+        return (h(Host, { key: '55072485ad5993ad8eb075a9d7d83e7e137ec9cd', class: {
                 red: (props === null || props === void 0 ? void 0 : props.color) === 'red',
                 orange: (props === null || props === void 0 ? void 0 : props.color) === 'orange',
                 yellow: (props === null || props === void 0 ? void 0 : props.color) === 'yellow',