npm - @getpara/core-components - Versions diffs - 2.0.0-alpha.7 → 2.0.0-alpha.71 - Mend

@getpara/core-components 2.0.0-alpha.7 → 2.0.0-alpha.71

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 (115) hide show

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

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 export class CpslCodeInput {
     constructor() {
         this.handleInput = (ind, ev) => {
-            var _a;
             const inputElements = this.inputs;
             // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
             if (ev.inputType === 'insertFromPaste') {
@@ -11,36 +10,89 @@ export class CpslCodeInput {
             }
             if (ev.inputType === 'insertText') {
                 if (this.type === 'number' && isNaN(parseInt(ev.data))) {
+                    ev.preventDefault();
                     inputElements[ind].value = '';
                     return;
                 }
-                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
-                inputElements[Math.min(this.length - 1, newCode.length)].focus();
+                // Prevent the default behavior FIRST
+                ev.preventDefault();
+                // Build the new code from the current component state, not the DOM
+                const currentCode = this.code || '';
+                // Insert the new character at the focused position, not at the end
+                const beforeFocused = currentCode.substring(0, ind);
+                const afterFocused = currentCode.substring(ind + 1);
+                const newCode = beforeFocused + ev.data + afterFocused;
+                // Prevent input beyond the maximum length
+                if (newCode.length > this.length) {
+                    return;
+                }
+                // Update the component state and emit event
                 this.cpslInput.emit({ value: newCode });
                 this.code = newCode;
+                // Update the specific input that was typed in
+                inputElements[ind].value = ev.data;
+                // Focus next input if not at the end
+                if (ind < this.length - 1) {
+                    // Set flag to prevent handleFocus from interfering
+                    this.isArrowNavigation = true;
+                    setTimeout(() => {
+                        inputElements[ind + 1].focus();
+                        this.isArrowNavigation = false;
+                    }, 0);
+                }
             }
         };
+        this.isArrowNavigation = false;
         this.handleKeyDown = (ind, ev) => {
             const inputElements = this.inputs;
             switch (ev.key) {
                 case 'Backspace': {
                     let newCode;
                     if (!inputElements[ind].value) {
-                        inputElements[Math.max(0, ind - 1)].value = '';
-                        inputElements[Math.max(0, ind - 1)].focus();
-                        newCode = this.code.substring(0, ind - 1);
+                        // If current input is empty, move to previous and clear it
+                        if (ind > 0) {
+                            inputElements[ind - 1].value = '';
+                            setTimeout(() => {
+                                inputElements[ind - 1].focus();
+                            }, 0);
+                            // Remove character at previous position
+                            const currentCode = this.code || '';
+                            newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);
+                        }
+                        else {
+                            newCode = this.code;
+                        }
                     }
                     else {
-                        newCode = this.code.substring(0, ind);
+                        // Clear current input and remove character at current position
+                        inputElements[ind].value = '';
+                        const currentCode = this.code || '';
+                        newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);
                     }
                     this.cpslInput.emit({ value: newCode });
                     this.code = newCode;
                     break;
                 }
                 case 'ArrowLeft': {
-                    setTimeout(() => {
-                        this.inputs[ind].setSelectionRange(1, 1);
-                    }, 0);
+                    ev.preventDefault();
+                    if (ind > 0) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind - 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    ev.preventDefault();
+                    if (ind < this.length - 1) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind + 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
                     break;
                 }
                 default: {
@@ -50,6 +102,21 @@ export class CpslCodeInput {
         };
         this.handleFocus = (ind) => {
             const inputElements = this.inputs;
+            // Don't interfere with arrow key navigation
+            if (this.isArrowNavigation) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // If the focused input already has a value, allow it to stay focused (user clicked on it)
+            if (inputElements[ind].value) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // Otherwise, use the default focus logic (find first empty or go to last)
             for (const input of inputElements) {
                 if (!input.value) {
                     input.focus();
@@ -66,21 +133,28 @@ export class CpslCodeInput {
         };
         this.handlePaste = (e) => {
             const inputElements = this.inputs;
-            const pastedCode = e.clipboardData.getData('text');
-            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
-                // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.
-                setTimeout(() => {
-                    inputElements[0].value = '';
-                }, 0);
-                return;
+            let pastedCode = e.clipboardData.getData('text');
+            // Filter based on type
+            if (this.type === 'number') {
+                // Remove all non-numeric characters
+                pastedCode = pastedCode.replace(/\D/g, '');
+                // If no valid numbers remain, clear and return
+                if (!pastedCode) {
+                    setTimeout(() => {
+                        inputElements[0].value = '';
+                    }, 0);
+                    return;
+                }
             }
+            // Truncate pasted code to match the expected length
+            const truncatedCode = pastedCode.substring(0, this.length);
             this.cpslInput.emit({
-                value: pastedCode,
+                value: truncatedCode,
             });
             inputElements.forEach((input, index) => {
-                input.value = pastedCode.charAt(index);
+                input.value = truncatedCode.charAt(index) || '';
             });
-            inputElements[Math.min(this.length - 1, pastedCode.length)].focus();
+            inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();
         };
         this.code = undefined;
         this.errorText = undefined;
@@ -88,15 +162,24 @@ export class CpslCodeInput {
         this.length = undefined;
         this.type = 'number';
     }
+    watchCodeProp(newCode) {
+        // Update the input values when the code prop changes externally
+        const inputElements = this.inputs;
+        if (inputElements.length > 0) {
+            inputElements.forEach((input, index) => {
+                input.value = (newCode === null || newCode === void 0 ? void 0 : newCode[index]) || '';
+            });
+        }
+    }
     get inputs() {
         return Array.from(this.el.shadowRoot.querySelectorAll('input'));
     }
     render() {
         var _a;
-        return (h(Host, { key: '9c620c8eb41b595e672e2b7d22944e37de630f73' }, h("div", { key: 'd8e870d0b15b90cfccd78ba5f15cf7b9c0680f0a', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '82961090c1a837f782588d3acea703550b1b0a44' }, h("div", { key: '0dac1cc8d80b7fb67e334b995172b82c03443394', 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: '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)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: 'c3c2d5a629d0d2bbcc886386a5942477c735831d', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'd75171ab8641592d939b0883ae5f686520dacff6', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: 'dc9808b19dadc26db49bb79b16b89020822b177b' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }
@@ -225,5 +308,11 @@ export class CpslCodeInput {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "code",
+                "methodName": "watchCodeProp"
+            }];
+    }
 }
 //# sourceMappingURL=cpsl-code-input.js.map

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.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"]}
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, Watch } 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 @Watch('code')\n watchCodeProp(newCode: string) {\n // Update the input values when the code prop changes externally\n const inputElements = this.inputs;\n if (inputElements.length > 0) {\n inputElements.forEach((input, index) => {\n input.value = newCode?.[index] \|\| '';\n });\n }\n }\n\n private handleInput = (ind: number, ev: InputEvent) => {\n const inputElements = this.inputs;\n\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\n if (ev.inputType === 'insertText') {\n if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n ev.preventDefault();\n inputElements[ind].value = '';\n return;\n }\n\n // Prevent the default behavior FIRST\n ev.preventDefault();\n\n // Build the new code from the current component state, not the DOM\n const currentCode = this.code \|\| '';\n\n // Insert the new character at the focused position, not at the end\n const beforeFocused = currentCode.substring(0, ind);\n const afterFocused = currentCode.substring(ind + 1);\n const newCode = beforeFocused + ev.data + afterFocused;\n\n // Prevent input beyond the maximum length\n if (newCode.length > this.length) {\n return;\n }\n\n // Update the component state and emit event\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n\n // Update the specific input that was typed in\n inputElements[ind].value = ev.data;\n\n // Focus next input if not at the end\n if (ind < this.length - 1) {\n // Set flag to prevent handleFocus from interfering\n this.isArrowNavigation = true;\n setTimeout(() => {\n inputElements[ind + 1].focus();\n this.isArrowNavigation = false;\n }, 0);\n }\n }\n };\n\n private isArrowNavigation = false;\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 // If current input is empty, move to previous and clear it\n if (ind > 0) {\n inputElements[ind - 1].value = '';\n setTimeout(() => {\n inputElements[ind - 1].focus();\n }, 0);\n // Remove character at previous position\n const currentCode = this.code \|\| '';\n newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);\n } else {\n newCode = this.code;\n }\n } else {\n // Clear current input and remove character at current position\n inputElements[ind].value = '';\n const currentCode = this.code \|\| '';\n newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);\n }\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n break;\n }\n case 'ArrowLeft': {\n ev.preventDefault();\n if (ind > 0) {\n this.isArrowNavigation = true;\n setTimeout(() => {\n inputElements[ind - 1].focus();\n this.isArrowNavigation = false;\n }, 0);\n }\n break;\n }\n case 'ArrowRight': {\n ev.preventDefault();\n if (ind < this.length - 1) {\n this.isArrowNavigation = true;\n setTimeout(() => {\n inputElements[ind + 1].focus();\n this.isArrowNavigation = false;\n }, 0);\n }\n break;\n }\n default: {\n break;\n }\n }\n };\n\n private handleFocus = (ind: number) => {\n const inputElements = this.inputs;\n\n // Don't interfere with arrow key navigation\n if (this.isArrowNavigation) {\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n return;\n }\n\n // If the focused input already has a value, allow it to stay focused (user clicked on it)\n if (inputElements[ind].value) {\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n return;\n }\n\n // Otherwise, use the default focus logic (find first empty or go to last)\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 let pastedCode = e.clipboardData.getData('text');\n\n // Filter based on type\n if (this.type === 'number') {\n // Remove all non-numeric characters\n pastedCode = pastedCode.replace(/\\D/g, '');\n\n // If no valid numbers remain, clear and return\n if (!pastedCode) {\n setTimeout(() => {\n inputElements[0].value = '';\n }, 0);\n return;\n }\n }\n\n // Truncate pasted code to match the expected length\n const truncatedCode = pastedCode.substring(0, this.length);\n\n this.cpslInput.emit({\n value: truncatedCode,\n });\n\n inputElements.forEach((input, index) => {\n input.value = truncatedCode.charAt(index) \|\| '';\n });\n\n inputElements[Math.min(this.length - 1, truncatedCode.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-icon/cpsl-icon.css CHANGED Viewed

@@ -58,11 +58,12 @@
   --filter: auto;
   --height: 24px;
   --width: 24px;
-  --svg-height: calc(var(--height) - (2 * var(--inset)));
-  --svg-width: calc(var(--width) - (2 * var(--inset)));
-  --icon-color: currentColor;
-  --icon-fill-color: currentColor;
-  --icon-stroke-color: currentColor;
+  --inset: 0px;
+  --computed-height: calc(var(--height) - (2 * var(--inset)));
+  --computed-width: calc(var(--width) - (2 * var(--inset)));
+  --icon-color: var(--icon-color, currentColor);
+  --icon-fill-color: var(--icon-fill-color, var(--icon-color, currentColor));
+  --icon-stroke-color: var(--icon-stroke-color, var(--icon-color, currentColor));
   width: var(--width);
   height: var(--height);
 }
@@ -81,12 +82,16 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  border: var(--icon-border, auto);
+  border-radius: var(--icon-border-radius, 0);
+  background: var(--icon-background, transparent);
   color: var(--icon-color);
+  box-sizing: border-box;
 }
 :host svg {
-  width: var(--svg-width, "100%");
-  height: var(--svg-height, "100%");
+  width: var(--computed-width, "100%");
+  height: var(--computed-height, "100%");
   filter: var(--filter);
 }
 :host svg .background-16 {
@@ -103,7 +108,9 @@
 }
 :host img {
-  width: 100%;
-  height: 100%;
+  width: var(--computed-width, 100%);
+  height: var(--computed-height, 100%);
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
 }

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

@@ -7,9 +7,13 @@ export class CpslIcon {
         this.invert = undefined;
         this.inset = '0px';
         this.icon = undefined;
+        this.radius = 'none';
+        this.background = undefined;
+        this.color = undefined;
+        this.border = undefined;
     }
     render() {
-        return (h(Host, { key: '42f171468ddb966ecdf81dc4e6bac3004f5f0761', part: "icon", role: "img", style: Object.assign(Object.assign({ ['--inset']: this.inset }, (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})) }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: 'fda593bf99b0dedbd76080936d3c6ca40d4a3f39', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})), (this.radius === 'full' ? { ['--icon-border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--icon-border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--icon-background']: this.background } : {})), (this.border ? { ['--icon-border']: this.border } : {})), (this.color ? { ['--icon-color']: this.color } : {})) }, this.src ? (h("div", null, h("img", { src: this.src }))) : (h("div", { innerHTML: Icons[this.icon] }))));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -99,7 +103,7 @@ export class CpslIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"laptop\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"optimismBrand\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"spacingHeight\" | \"star04Filled\" | \"stars01Filled\" | \"stars02\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"userCircle\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
+                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowCircleDown\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backpack\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"beraBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"coinbase\" | \"copy07\" | \"copy\" | \"cosmosCircle\" | \"cosmos\" | \"cosmostation\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dotsSquare\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"glow\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"haha\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"keplr\" | \"key\" | \"laptop\" | \"leap\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"metamask\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"okx\" | \"optimismBrand\" | \"paraArrow\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phantom\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rabby\" | \"rainbow\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"safe\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"shuffle\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solanaCircle\" | \"solana\" | \"solflare\" | \"spacingHeight\" | \"star04Filled\" | \"star05\" | \"stars01Filled\" | \"stars02\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"user01\" | \"userCircle\" | \"userPlus\" | \"user\" | \"valora\" | \"wallet02\" | \"walletConnect\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"zap\" | \"zerion\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -116,6 +120,75 @@ export class CpslIcon {
                 },
                 "attribute": "icon",
                 "reflect": false
+            },
+            "radius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'theme' | 'full'",
+                    "resolved": "\"full\" | \"none\" | \"theme\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the icon should be rounded."
+                },
+                "attribute": "radius",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The background CSS property of the icon."
+                },
+                "attribute": "background",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the icon."
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "border": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The border CSS property of the icon."
+                },
+                "attribute": "border",
+                "reflect": false
             }
         };
     }

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,6BAA6B,CAAC;AAOpD,MAAM,OAAO,QAAQ;;;;;qBAmBK,KAAK~~;;;IAO7B~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EACV,KAAK,~~gCAAI~~,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,~~IAAK~~,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,~~GAAK~~,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,~~KAEpK~~,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 CSS size of the icon.\n /\n @Prop() size?: string;\n\n /\n Whether to invert the icon's colors.\n /\n @Prop() invert?: boolean;\n\n /\n The CSS length to inset the icon.\n /\n @Prop() inset: string = '0px';\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\n part=\"icon\"\n role=\"img\"\n style={{ ['--inset']: this.inset, ...(this.size ? { ['--height']: this.size, ['--width']: this.size } : {}), ...(this.invert ? { ['--filter']: 'invert(100%)' } : {}) }}\n >\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;;;;;qBAmBK,KAAK;;sBAUgB,MAAM;;;;;IAiBnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EACV,KAAK,sHACA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC/C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACtE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACrD,CAAC,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,sBAAsB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACtE,CAAC,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,sBAAsB,CAAC,EAAE,uCAAuC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACtG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACnE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACvD,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAGxD,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACV;YACE,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAClB,CACP,CAAC,CAAC,CAAC,CACF,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACrC,CACI,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 CSS size of the icon.\n /\n @Prop() size?: string;\n\n /\n Whether to invert the icon's colors.\n /\n @Prop() invert?: boolean;\n\n /\n The CSS length to inset the icon.\n /\n @Prop() inset: string = '0px';\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 /\n Whether the icon should be rounded.\n /\n @Prop() radius?: 'none' \| 'theme' \| 'full' = 'none';\n\n /\n The background CSS property of the icon.\n /\n @Prop() background?: string;\n\n /\n The color of the icon.\n /\n @Prop() color?: string;\n\n /\n The border CSS property of the icon.\n */\n @Prop() border?: string;\n\n render() {\n return (\n <Host\n part=\"icon\"\n role=\"img\"\n style={{\n ...(this.inset ? { ['--inset']: this.inset } : {}),\n ...(this.size ? { ['--height']: this.size, ['--width']: this.size } : {}),\n ...(this.invert ? { ['--filter']: 'invert(100%)' } : {}),\n ...(this.radius === 'full' ? { ['--icon-border-radius']: '1000px' } : {}),\n ...(this.radius === 'theme' ? { ['--icon-border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {}),\n ...(this.background ? { ['--icon-background']: this.background } : {}),\n ...(this.border ? { ['--icon-border']: this.border } : {}),\n ...(this.color ? { ['--icon-color']: this.color } : {}),\n }}\n >\n {this.src ? (\n <div>\n <img src={this.src} />\n </div>\n ) : (\n <div innerHTML={Icons[this.icon]} />\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -6,6 +6,7 @@
   --identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);
   --identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);
   --identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);
+  --identicon-arc-width: 30%;
   display: block;
   aspect-ratio: 1;
   border-radius: 25%;
@@ -15,7 +16,7 @@
 :host > svg {
   fill: rgba(255, 255, 255, 0.6);
   position: absolute;
-  width: 30%;
+  width: var(--identicon-arc-width);
 }
 :host > svg.rotate90 {
   transform: rotate(0.25turn);

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

@@ -54,13 +54,14 @@ export class CpslIdenticon {
         this.hash = undefined;
         this.size = '40px';
         this.variant = 'default';
+        this.arcWidth = '30%';
     }
     render() {
         let props;
         const isEmpty = !this.hash;
         if (!isEmpty)
             props = getIdenticonProps(this.hash);
-        return (h(Host, { key: '55072485ad5993ad8eb075a9d7d83e7e137ec9cd', class: {
+        return (h(Host, { key: '36535b7eb44bb8ca146db1efde320268b78d5ad0', 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',
@@ -72,6 +73,7 @@ export class CpslIdenticon {
             }, style: {
                 width: this.size,
                 height: this.size,
+                ['--identicon-arc-width']: this.arcWidth,
             } }, (props === null || props === void 0 ? void 0 : props.shapes) &&
             (props === null || props === void 0 ? void 0 : props.rotations) &&
             props.shapes.map((isDouble, index) => {
@@ -144,6 +146,24 @@ export class CpslIdenticon {
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "arcWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "arc-width",
+                "reflect": false,
+                "defaultValue": "'30%'"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-identicon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.tsx"],"names":[],"mappings":"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~~IAEjD~~,MAAM;QACJ,IAAI,KAAK,CAAC;QACV,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,OAAO;YAAE,KAAK,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,GAAG,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,KAAK;gBAC3B,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,QAAQ;gBACjC,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,QAAQ;gBACjC,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,OAAO;gBAC/B,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,MAAM;gBAC7B,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,QAAQ;gBACjC,KAAK,EAAE,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA,IAAI,CAAC,IAAI,CAAC,IAAI;gBAClC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;aAClC,EACD,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,IAAI;gBAChB,MAAM,EAAE,IAAI,CAAC,IAAI;~~aAClB~~,IAEA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM;aACZ,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAA;YAChB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;gBACnC,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;YAC1F,CAAC,CAAC,CACC,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF;AAED,MAAM,WAAW,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAE9D,SAAS,iBAAiB,CAAC,IAAY;IACrC,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC;IAE7B,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;IAEvF,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAEpF,OAAO;QACL,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrB,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC9C,OAAO,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAChG,CAAC,CAAC;QACF,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACpH,CAAC;AACJ,CAAC","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport Prando from '../../lib/prando.js';\nimport { Color, COLORS } from '../../utils/prand.js';\n\nconst SingleArc = (rotation: number) => (\n <svg\n class={{\n rotate90: rotation === 1,\n rotate180: rotation === 2,\n rotate270: rotation === 3,\n }}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_674_66)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_674_66\">\n <rect width=\"12\" height=\"12\" />\n </clipPath>\n </defs>\n </svg>\n);\n\nconst DoubleArc = (rotation: number) => (\n <svg\n class={{\n rotate90: rotation === 1,\n rotate180: rotation === 2,\n rotate270: rotation === 3,\n }}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_674_255)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_674_255\">\n <rect width=\"12\" height=\"12\" />\n </clipPath>\n </defs>\n </svg>\n);\n\nconst BASE_PATTERNS = [\n [\n [0, 0, 0, 0],\n [0, 1, 3, 2],\n ],\n [\n [1, 1, 0, 0],\n [0, 1, 3, 2],\n ],\n [\n [0, 1, 0, 1],\n [0, 1, 3, 2],\n ],\n [\n [0, 0, 1, 1],\n [0, 1, 3, 2],\n ],\n [\n [1, 0, 1, 0],\n [0, 1, 3, 2],\n ],\n [\n [1, 1, 1, 1],\n [0, 1, 3, 2],\n ],\n [\n [0, 0, 0, 0],\n [2, 3, 1, 0],\n ],\n [\n [1, 1, 1, 1],\n [2, 3, 1, 0],\n ],\n [\n [1, 1, 1, 1],\n [0, 1, 2, 3],\n ],\n];\n\n@Component({\n tag: 'cpsl-identicon',\n styleUrl: 'cpsl-identicon.scss',\n shadow: true,\n})\nexport class CpslIdenticon {\n @Prop() hash?: string \| undefined;\n\n /*\n The CSS width and height of the identicon.\n * Default is: 40px.\n */\n @Prop() size: string = '40px';\n\n @Prop() variant: 'default' \| 'avatar' = 'default';\n\n render() {\n let props;\n const isEmpty = !this.hash;\n if (!isEmpty) props = getIdenticonProps(this.hash);\n\n return (\n <Host\n class={{\n red: props?.color === 'red',\n orange: props?.color === 'orange',\n yellow: props?.color === 'yellow',\n green: props?.color === 'green',\n blue: props?.color === 'blue',\n purple: props?.color === 'purple',\n empty: !props?.color && !this.hash,\n avatar: this.variant === 'avatar',\n }}\n style={{\n width: this.size,\n height: this.size,\n }}\n >\n {props?.shapes &&\n props?.rotations &&\n props.shapes.map((isDouble, index) => {\n return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);\n })}\n </Host>\n );\n }\n}\n\nconst PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];\n\nfunction getIdenticonProps(seed: string): { color: Color; shapes: boolean[]; rotations: number[] } {\n const rng = new Prando(seed);\n\n const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));\n\n const deviationIndex = Math.floor(iDeviation / 4);\n const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];\n\n return {\n color: COLORS[iColor],\n shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {\n return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;\n }),\n rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),\n };\n}\n"]}
1	+ {"version":3,"file":"cpsl-identicon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport Prando from '../../lib/prando.js';\nimport { Color, COLORS } from '../../utils/prand.js';\n\nconst SingleArc = (rotation: number) => (\n <svg\n class={{\n rotate90: rotation === 1,\n rotate180: rotation === 2,\n rotate270: rotation === 3,\n }}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_674_66)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_674_66\">\n <rect width=\"12\" height=\"12\" />\n </clipPath>\n </defs>\n </svg>\n);\n\nconst DoubleArc = (rotation: number) => (\n <svg\n class={{\n rotate90: rotation === 1,\n rotate180: rotation === 2,\n rotate270: rotation === 3,\n }}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_674_255)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_674_255\">\n <rect width=\"12\" height=\"12\" />\n </clipPath>\n </defs>\n </svg>\n);\n\nconst BASE_PATTERNS = [\n [\n [0, 0, 0, 0],\n [0, 1, 3, 2],\n ],\n [\n [1, 1, 0, 0],\n [0, 1, 3, 2],\n ],\n [\n [0, 1, 0, 1],\n [0, 1, 3, 2],\n ],\n [\n [0, 0, 1, 1],\n [0, 1, 3, 2],\n ],\n [\n [1, 0, 1, 0],\n [0, 1, 3, 2],\n ],\n [\n [1, 1, 1, 1],\n [0, 1, 3, 2],\n ],\n [\n [0, 0, 0, 0],\n [2, 3, 1, 0],\n ],\n [\n [1, 1, 1, 1],\n [2, 3, 1, 0],\n ],\n [\n [1, 1, 1, 1],\n [0, 1, 2, 3],\n ],\n];\n\n@Component({\n tag: 'cpsl-identicon',\n styleUrl: 'cpsl-identicon.scss',\n shadow: true,\n})\nexport class CpslIdenticon {\n @Prop() hash?: string \| undefined;\n\n /*\n The CSS width and height of the identicon.\n * Default is: 40px.\n */\n @Prop() size: string = '40px';\n\n @Prop() variant: 'default' \| 'avatar' = 'default';\n\n @Prop() arcWidth: string = '30%';\n\n render() {\n let props;\n const isEmpty = !this.hash;\n if (!isEmpty) props = getIdenticonProps(this.hash);\n\n return (\n <Host\n class={{\n red: props?.color === 'red',\n orange: props?.color === 'orange',\n yellow: props?.color === 'yellow',\n green: props?.color === 'green',\n blue: props?.color === 'blue',\n purple: props?.color === 'purple',\n empty: !props?.color && !this.hash,\n avatar: this.variant === 'avatar',\n }}\n style={{\n width: this.size,\n height: this.size,\n ['--identicon-arc-width']: this.arcWidth,\n }}\n >\n {props?.shapes &&\n props?.rotations &&\n props.shapes.map((isDouble, index) => {\n return isDouble ? DoubleArc(props.rotations[index]) : SingleArc(props.rotations[index]);\n })}\n </Host>\n );\n }\n}\n\nconst PRANDO_INTS = [COLORS.length, BASE_PATTERNS.length, 16];\n\nfunction getIdenticonProps(seed: string): { color: Color; shapes: boolean[]; rotations: number[] } {\n const rng = new Prando(seed);\n\n const [iColor, iPattern, iDeviation] = PRANDO_INTS.map(len => rng.nextInt(0, len - 1));\n\n const deviationIndex = Math.floor(iDeviation / 4);\n const [isDeviateShape, isDeviateFlip] = [iDeviation % 2 === 1, iDeviation % 4 >= 2];\n\n return {\n color: COLORS[iColor],\n shapes: BASE_PATTERNS[iPattern][0].map((s, i) => {\n return i === deviationIndex ? (isDeviateShape ? (s === 1 ? false : true) : s === 1) : s === 1;\n }),\n rotations: BASE_PATTERNS[iPattern][1].map((r, i) => (i === deviationIndex ? (isDeviateFlip ? (r + 2) % 4 : r) : r)),\n };\n}\n"]}