npm - @usecapsule/core-components - Versions diffs - 3.2.0-dev.1 → 3.2.0 - Mend

@usecapsule/core-components 3.2.0-dev.1 → 3.2.0

Files changed (384) hide show

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~~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~~UAAI~~,KAAK,EAAC,YAAY;oBACpB,~~aAAO~~,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 {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n ComponentInterface,\n Watch,\n Listen,\n EventEmitter,\n Event,\n} 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"]}

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}"]}
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"]}

package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js CHANGED Viewed

@@ -115,7 +115,12 @@ export class CpslFileUpload {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '71d945bcac5d443719737781fd9ec5166952760d' }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '63786e91e0a230d85344da507d0508ac1524cc88', name: "label" }), h("div", { key: '74e7296a0c8ef732094c0e7fab3e0a7db916694b', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '1a3030a828d8e7a742f3dfbff784e213f845859e', class: { 'label-container': true } }, h("slot", { key: '1f77e4c6566deffe7cd830fccb96d21c22daee4b', name: "left-content" })), h("div", { key: '3dc0a113348d15d52aae929792de6ee48da795ca', class: { 'file-container': true } }, this.FileContent), h("input", { key: 'a6fc37d212b5e4284f4eeec56dc4e7a32ff8374b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+        return (h(Host, { key: 'fd110192fe9a14089d8671d9091132d7f3d3b2c2' }, this.label && (h("label", { key: '2915f8854e6f53ef3e5c0ebde58ac49ab4dda377', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '9dcc6ad98cf8ceea075a498fddd9a33eede5b50c', name: "label" }), h("div", { key: 'ba0e490eb3d18e9bf2aedbc60151d27b5cef75a9', class: {
+                'container': true,
+                'error': Boolean(this.errorText),
+                'drag': this.dragOver,
+                'drag-error': this.dragError,
+            } }, h("div", { key: '781df9aefcdd73a2ee39ec9d5afd323c9df607d5', class: { 'label-container': true } }, h("slot", { key: '4ead666c56a93bce34c89ee89cf971d10dab9d27', name: "left-content" })), h("div", { key: 'feb54192c2a64da5ffab558ec2739cf2e3243822', class: { 'file-container': true } }, this.FileContent), h("input", { key: '9a1cd7cd2e001a2a1334f772cf7322308e5558cf', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '427df561a22254aae3fffc71838f8b833a83b1c8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '65074449f66454fa4f49c2708a486442f4576e46' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
     }
     static get is() { return "cpsl-file-upload"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\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 Filename for the external source of the selected file.\n /\n @Prop() externalFilename?: string;\n\n /\n External source for the selected file.\n /\n @Prop() externalSrc?: string;\n\n /\n Valid file types.\n /\n @Prop() fileTypes?: 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 The label for the input.\n /\n @Prop() label?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n /\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /\n Emitted when the file is dropped in the input.\n /\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag enters the input.\n /\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag leaves the input.\n /\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file changes.\n /\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /\n Emitted when the file is removed.\n /\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (Boolean(input.files.length)) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (Boolean(this.fileTypes?.length) ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = Boolean(this.uploadFile) ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) \|\| Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name \|\| this.externalFilename \|\| ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img class=\"sample-img\" src={Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc} alt=\"Sample Image\" />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div class={{ 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError }}>\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={Boolean(this.file) ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"cpsl-file-upload.js","sourceRoot":"","sources":["../../../../src/components/cpsl-file-upload/cpsl-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter, State, Fragment, Element } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-file-upload',\n styleUrl: 'cpsl-file-upload.scss',\n shadow: true,\n})\nexport class CpslFileUpload {\n @Element() el!: HTMLCpslFileUploadElement;\n\n private inputId = `cpsl-file-upload-${inputIds++}`;\n\n @State() file?: File;\n @State() dragOver?: boolean;\n @State() dragError?: boolean;\n @State() isUploading?: boolean;\n @State() uploadError?: boolean;\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 Filename for the external source of the selected file.\n /\n @Prop() externalFilename?: string;\n\n /\n External source for the selected file.\n /\n @Prop() externalSrc?: string;\n\n /\n Valid file types.\n /\n @Prop() fileTypes?: 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 The label for the input.\n /\n @Prop() label?: string;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n Function to trigger file upload to server.\n * Returns: boolean indicating success or failure.\n /\n @Prop() uploadFile?: (file: File) => Promise<boolean>;\n\n /\n Emitted when the file is dropped in the input.\n /\n @Event() cpslOnDrop!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag enters the input.\n /\n @Event() cpslOnDragEnter!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file drag leaves the input.\n /\n @Event() cpslOnDragLeave!: EventEmitter<DragEvent>;\n\n /\n Emitted when the file changes.\n /\n @Event() cpslFileChange!: EventEmitter<File>;\n\n /\n Emitted when the file is removed.\n /\n @Event() cpslFileRemoved!: EventEmitter<void>;\n\n private handleDrop = async (ev: DragEvent) => {\n ev.preventDefault();\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n const file = item.getAsFile();\n await this.addFile(file);\n }\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDrop.emit(ev);\n };\n\n private handleDragEnter = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = true;\n\n const item = Array.from(ev.dataTransfer.items)?.[0];\n\n if (item && this.isValidFile(item.type)) {\n this.dragError = true;\n }\n\n this.cpslOnDragEnter.emit(ev);\n };\n\n private handleDragLeave = (ev: DragEvent) => {\n ev.preventDefault();\n\n this.dragOver = false;\n this.dragError = false;\n\n this.cpslOnDragLeave.emit(ev);\n };\n\n private handleInputChange = async (ev: Event) => {\n ev.preventDefault();\n\n const input = this.inputEl;\n\n if (Boolean(input.files.length)) {\n const file = input.files[0];\n\n if (this.isValidFile(file.type)) {\n await this.addFile(file);\n }\n }\n };\n\n private isValidFile = (type: string) => {\n if (Boolean(this.fileTypes?.length) ? !this.fileTypes.includes(type) : false) {\n return false;\n }\n\n return true;\n };\n\n private addFile = async (file: File) => {\n this.file = file;\n this.cpslFileChange.emit(file);\n this.uploadError = false;\n this.isUploading = true;\n const uploadSuccess = Boolean(this.uploadFile) ? await this.uploadFile(file) : true;\n if (!uploadSuccess) {\n this.uploadError = true;\n const input = this.inputEl;\n input.value = '';\n }\n this.isUploading = false;\n };\n\n private removeFile = (e: MouseEvent) => {\n e.preventDefault();\n\n this.file = undefined;\n\n const input = this.inputEl;\n input.value = '';\n\n this.cpslFileRemoved.emit();\n };\n\n get inputEl() {\n return this.el.shadowRoot.getElementById(this.inputId) as HTMLInputElement;\n }\n\n get FileContent() {\n const hasFile = Boolean(this.file) \|\| Boolean(this.externalSrc);\n const isUploading = this.isUploading;\n const error = this.uploadError;\n\n const text = !hasFile ? (\n <Fragment>\n {'Drag file here or '}\n <cpsl-text class=\"inline-text\" variant=\"bodyXS\">\n upload file\n </cpsl-text>\n </Fragment>\n ) : isUploading ? (\n `${this.file.name} is uploading`\n ) : error ? (\n 'Upload Failed'\n ) : (\n this.file?.name \|\| this.externalFilename \|\| ''\n );\n const TopElement = !hasFile ? (\n <cpsl-icon icon=\"image\" />\n ) : isUploading ? (\n <cpsl-spinner />\n ) : error ? (\n <cpsl-icon icon=\"close\" />\n ) : (\n <img\n class=\"sample-img\"\n src={Boolean(this.file) ? URL.createObjectURL(this.file) : this.externalSrc}\n alt=\"Sample Image\"\n />\n );\n\n return (\n <Fragment>\n {TopElement}\n <span class=\"sample-image-name-container\">\n <cpsl-text class=\"sample-image-name\" variant=\"bodyXS\">\n {text}\n </cpsl-text>\n {hasFile && !error && !isUploading && <cpsl-icon icon=\"close\" onClick={this.removeFile} />}\n </span>\n </Fragment>\n );\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <slot name=\"label\"></slot>\n <div\n class={{\n 'container': true,\n 'error': Boolean(this.errorText),\n 'drag': this.dragOver,\n 'drag-error': this.dragError,\n }}\n >\n <div class={{ 'label-container': true }}>\n <slot name=\"left-content\"></slot>\n </div>\n <div class={{ 'file-container': true }}>{this.FileContent}</div>\n <input\n id={this.inputId}\n type=\"file\"\n accept={this.fileTypes?.join(', ') ?? '*'}\n files={Boolean(this.file) ? [this.file] : undefined}\n onDrop={this.handleDrop}\n onDragEnter={this.handleDragEnter}\n onDragLeave={this.handleDragLeave}\n onChange={this.handleInputChange}\n />\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

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

@@ -4,9 +4,9 @@ export class CpslGrid {
         this.fixed = false;
     }
     render() {
-        return (h(Host, { key: '1596fe7c785ab672325dde24686ec73f3acd1dc1', class: {
+        return (h(Host, { key: '76084ea41988e4fdff4a48dc400988d2aa190a56', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'a45bcf373f26f5b41484daec4bd6f39f8af1bd6f' })));
+            } }, h("slot", { key: '1eb8c755910397d58a2165238a1428769623ef6b' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,12 +9,13 @@ export class CpslHero {
         this.subtitle = undefined;
     }
     render() {
-        return (h(Host, { key: '526227a9695e8c0846780a3c39034b4d558cf141', class: {
+        return (h(Host, { key: '846f2b1808af5f172d659c1531015763190d9eaa', class: {
+                // VARIANTS
                 connection: this.variant === 'connection',
                 pending: this.variant === 'pending',
                 approved: this.variant === 'approved',
                 failed: this.variant === 'failed',
-            } }, h("div", { key: '45ce6b958e3c3b8544e280425da83fbb014ff500', class: "backgroundContainer" }, h("div", { key: 'a5337d2ceddcd7ac725aa9b68ba240e62fc32f37', class: "background" }, h("div", { key: '88703ca494220195a5da3a21aef49e4eee29b928', class: "ring ring3" }), h("div", { key: 'bc9e1eacc99a1993e7f1e76d87c521250d8287f9', class: "ring ring2" }), h("div", { key: 'afaa234eb2d2a312c2d197de435d4396e64b77f1', class: "ring ring1" }), h("div", { key: '0e46b2f228e479019d0cfb8cda850fd3f361da65', class: "ring ring0" }), this.variant === 'connection' && (h("div", { class: `ringCenter connection` }, h("img", { src: Images.heroDefault }))), this.variant === 'pending' && (h("div", { class: `ringCenter pending` }, h("img", { src: Images.heroPending }))), this.variant === 'approved' && (h("div", { class: `ringCenter approved` }, h("img", { src: Images.heroSuccess }))), h("div", { key: 'ecf964e7816cfdd4db690a1a4b21e39f91504457', class: "fadeOut" })), h("div", { key: '0d494d9907b97ca438a5bd1a54d776555da0940e', class: "children" }, this.variant === 'connection' && (h("div", { class: "connectDiagramContainer" }, h("slot", { name: "connectionLeft" }), h("slot", { name: "connectionRight" }))), this.variant === 'failed' && AlertCircle(), this.variant === 'approved' && Checkmark())), h("cpsl-text", { key: '44855a5dbd947bacd51f4dc48d4e2a28f94f1b71', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { variant: "bodyM", color: "secondary" }, this.subtitle))));
+            } }, h("div", { key: 'f11070c3f78fd6ad2fbb9842d2484b4263112cb3', class: "backgroundContainer" }, h("div", { key: '5a50e2df5669ff92d3bee0b00bd3ed92075dfa7a', class: "background" }, h("div", { key: '24062e48e9d07feb6e79d4ec1c527b2476950f3b', class: "ring ring3" }), h("div", { key: '37913e7689bbdc4165811fb25b747b8badaa287c', class: "ring ring2" }), h("div", { key: 'f265592120f9fa1052e346bd92951f6789d85502', class: "ring ring1" }), h("div", { key: '19e252b63847df7ea5acb450d8e3479a4b2ad561', class: "ring ring0" }), this.variant === 'connection' && (h("div", { key: '8b94818b22a288284509fe63578b68277ed71edc', class: `ringCenter connection` }, h("img", { key: 'c50d6f5be69303e9c9c1c7f885bbacadceb1c5c8', src: Images.heroDefault }))), this.variant === 'pending' && (h("div", { key: '9ab25648fd147203cba45136ab8956adb6bd99d1', class: `ringCenter pending` }, h("img", { key: '9b0d536b4213ab558b37355e3b605fe3b65824ca', src: Images.heroPending }))), this.variant === 'approved' && (h("div", { key: '2ed926910d870e3b9577b0203ce2e68e8389623c', class: `ringCenter approved` }, h("img", { key: 'aab912dbedf89db56946d2de72f7b0883c4fb261', src: Images.heroSuccess }))), h("div", { key: '55421fe06f9649f27d8728414fac8ce0a592efbb', class: "fadeOut" })), h("div", { key: '41a49e438379a139864d0b7b55ee2e89b5c9aaf0', class: "children" }, this.variant === 'connection' && (h("div", { key: 'a874f21784102c8001043cd93e8a281e63939875', class: "connectDiagramContainer" }, h("slot", { key: 'd99d0f2c0248f360da1829403ca9929ce3d9243c', name: "connectionLeft" }), h("slot", { key: '5557ab28d6108ecb660e5d8203b3decd991f4ea6', name: "connectionRight" }))), this.variant === 'failed' && AlertCircle(), this.variant === 'approved' && Checkmark())), h("cpsl-text", { key: '1aeb3912ca6386a8d1ca1f2d18735716db070cb5', variant: "headingXS", color: "primary", weight: "medium" }, this.title), this.subtitle && (h("cpsl-text", { key: 'e01dbe76df7f55f80fc20bce10e8e82c829851fc', variant: "bodyM", 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,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,+TAA+T,EACjU,IAAI,EAAC,6BAA6B,GAClC;IACF;QACE,sBAAgB,EAAE,EAAC,uBAAuB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,SAAS,EAAC,aAAa,EAAC,gBAAgB;YAChH,0BAAiB,SAAS,GAAG;YAC7B,YAAM,MAAM,EAAC,OAAO,gBAAY,SAAS,GAAG;YAC5C,YAAM,MAAM,EAAC,GAAG,gBAAY,SAAS,GAAG,CACzB,CACZ,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,YACE,CAAC,EAAC,2NAA2N,EAC7N,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;AAOF,MAAM,OAAO,QAAQ;;uBAMmE,YAAY;;;;IAMlG,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;~~gBAEL~~,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;aAClC;YAED,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBACzB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,~~WAAK~~,KAAK,EAAE,uBAAuB;wBACjC,~~WAAK~~,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,~~WAAK~~,KAAK,EAAE,oBAAoB;wBAC9B,~~WAAK~~,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBAEA,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,~~WAAK~~,KAAK,EAAE,qBAAqB;wBAC/B,~~WAAK~~,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACD,4DAAK,KAAK,EAAC,SAAS,GAAG,CACnB;gBACN,4DAAK,KAAK,EAAC,UAAU;oBAClB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,~~WAAK~~,KAAK,EAAC,yBAAyB;wBAClC,~~YAAM~~,IAAI,EAAC,gBAAgB,GAAG;wBAC9B,~~YAAM~~,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,WAAW,EAAE;oBAC1C,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,EAAE,CACvC,CACF;YACN,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,QAAQ,IAC3D,IAAI,CAAC,KAAK,CACD;YACX,IAAI,CAAC,QAAQ,IAAI,CAChB,~~iBAAW~~,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,IACzC,IAAI,CAAC,QAAQ,CACJ,CACb,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\nconst Checkmark = () => (\n <svg width=\"48\" height=\"35\" viewBox=\"0 0 48 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M47.219 1.11439C48.2604 2.15579 48.2604 3.84423 47.219 4.88563L17.8856 34.219C16.8442 35.2604 15.1558 35.2604 14.1144 34.219L0.781049 20.8856C-0.26035 19.8442 -0.26035 18.1558 0.781049 17.1144C1.82245 16.073 3.51089 16.073 4.55229 17.1144L16 28.5621L43.4477 1.11439C44.4891 0.0729939 46.1776 0.0729939 47.219 1.11439Z\"\n fill=\"url(#paint0_linear_841_278)\"\n />\n <defs>\n <linearGradient id=\"paint0_linear_841_278\" x1=\"48\" y1=\"17.6667\" x2=\"0\" y2=\"17.6667\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#BC82F3\" />\n <stop offset=\"0.485\" stop-color=\"#FF6778\" />\n <stop offset=\"1\" stop-color=\"#FFBA71\" />\n </linearGradient>\n </defs>\n </svg>\n);\n\nconst AlertCircle = () => (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M29 18.3333V29M29 39.6666H29.0267M55.6667 29C55.6667 43.7276 43.7276 55.6666 29 55.6666C14.2724 55.6666 2.33333 43.7276 2.33333 29C2.33333 14.2724 14.2724 2.33331 29 2.33331C43.7276 2.33331 55.6667 14.2724 55.6667 29Z\"\n stroke=\"#F04438\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n);\n\n@Component({\n tag: 'cpsl-hero',\n styleUrl: 'cpsl-hero.scss',\n shadow: true,\n})\nexport class CpslHero {\n /*\n The variant of the button.\n * Options are: `\"default\"`, `\"loading\", `\"success\".\n * Default is: `\"default\"`.\n */\n @Prop({ reflect: true }) variant?: 'connection' \| 'pending' \| 'approved' \| 'failed' = 'connection';\n\n @Prop({ reflect: true }) title: string;\n\n @Prop({ reflect: true }) subtitle?: string;\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n connection: this.variant === 'connection',\n pending: this.variant === 'pending',\n approved: this.variant === 'approved',\n failed: this.variant === 'failed',\n }}\n >\n <div class=\"backgroundContainer\">\n <div class=\"background\">\n <div class=\"ring ring3\" />\n <div class=\"ring ring2\" />\n <div class=\"ring ring1\" />\n <div class=\"ring ring0\" />\n {this.variant === 'connection' && (\n <div class={`ringCenter connection`}>\n <img src={Images.heroDefault} />\n </div>\n )}\n {this.variant === 'pending' && (\n <div class={`ringCenter pending`}>\n <img src={Images.heroPending} />\n </div>\n )}\n\n {this.variant === 'approved' && (\n <div class={`ringCenter approved`}>\n <img src={Images.heroSuccess} />\n </div>\n )}\n <div class=\"fadeOut\" />\n </div>\n <div class=\"children\">\n {this.variant === 'connection' && (\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n )}\n {this.variant === 'failed' && AlertCircle()}\n {this.variant === 'approved' && Checkmark()}\n </div>\n </div>\n <cpsl-text variant=\"headingXS\" color=\"primary\" weight=\"medium\">\n {this.title}\n </cpsl-text>\n {this.subtitle && (\n <cpsl-text variant=\"bodyM\" 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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,+TAA+T,EACjU,IAAI,EAAC,6BAA6B,GAClC;IACF;QACE,sBAAgB,EAAE,EAAC,uBAAuB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,SAAS,EAAC,aAAa,EAAC,gBAAgB;YAChH,0BAAiB,SAAS,GAAG;YAC7B,YAAM,MAAM,EAAC,OAAO,gBAAY,SAAS,GAAG;YAC5C,YAAM,MAAM,EAAC,GAAG,gBAAY,SAAS,GAAG,CACzB,CACZ,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAC5F,YACE,CAAC,EAAC,2NAA2N,EAC7N,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;AAOF,MAAM,OAAO,QAAQ;;uBAMmE,YAAY;;;;IAMlG,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;gBACzC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;aAClC;YAED,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBAC1B,4DAAK,KAAK,EAAC,YAAY,GAAG;oBACzB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,4DAAK,KAAK,EAAE,uBAAuB;wBACjC,4DAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,4DAAK,KAAK,EAAE,oBAAoB;wBAC9B,4DAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBAEA,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,4DAAK,KAAK,EAAE,qBAAqB;wBAC/B,4DAAK,GAAG,EAAE,MAAM,CAAC,WAAW,GAAI,CAC5B,CACP;oBACD,4DAAK,KAAK,EAAC,SAAS,GAAG,CACnB;gBACN,4DAAK,KAAK,EAAC,UAAU;oBAClB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAChC,4DAAK,KAAK,EAAC,yBAAyB;wBAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG;wBAC9B,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACP;oBACA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,WAAW,EAAE;oBAC1C,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,SAAS,EAAE,CACvC,CACF;YACN,kEAAW,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,QAAQ,IAC3D,IAAI,CAAC,KAAK,CACD;YACX,IAAI,CAAC,QAAQ,IAAI,CAChB,kEAAW,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,IACzC,IAAI,CAAC,QAAQ,CACJ,CACb,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Images } from '../../assets/images';\n\nconst Checkmark = () => (\n <svg width=\"48\" height=\"35\" viewBox=\"0 0 48 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M47.219 1.11439C48.2604 2.15579 48.2604 3.84423 47.219 4.88563L17.8856 34.219C16.8442 35.2604 15.1558 35.2604 14.1144 34.219L0.781049 20.8856C-0.26035 19.8442 -0.26035 18.1558 0.781049 17.1144C1.82245 16.073 3.51089 16.073 4.55229 17.1144L16 28.5621L43.4477 1.11439C44.4891 0.0729939 46.1776 0.0729939 47.219 1.11439Z\"\n fill=\"url(#paint0_linear_841_278)\"\n />\n <defs>\n <linearGradient id=\"paint0_linear_841_278\" x1=\"48\" y1=\"17.6667\" x2=\"0\" y2=\"17.6667\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#BC82F3\" />\n <stop offset=\"0.485\" stop-color=\"#FF6778\" />\n <stop offset=\"1\" stop-color=\"#FFBA71\" />\n </linearGradient>\n </defs>\n </svg>\n);\n\nconst AlertCircle = () => (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M29 18.3333V29M29 39.6666H29.0267M55.6667 29C55.6667 43.7276 43.7276 55.6666 29 55.6666C14.2724 55.6666 2.33333 43.7276 2.33333 29C2.33333 14.2724 14.2724 2.33331 29 2.33331C43.7276 2.33331 55.6667 14.2724 55.6667 29Z\"\n stroke=\"#F04438\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n);\n\n@Component({\n tag: 'cpsl-hero',\n styleUrl: 'cpsl-hero.scss',\n shadow: true,\n})\nexport class CpslHero {\n /*\n The variant of the button.\n * Options are: `\"default\"`, `\"loading\", `\"success\".\n * Default is: `\"default\"`.\n */\n @Prop({ reflect: true }) variant?: 'connection' \| 'pending' \| 'approved' \| 'failed' = 'connection';\n\n @Prop({ reflect: true }) title: string;\n\n @Prop({ reflect: true }) subtitle?: string;\n\n render() {\n return (\n <Host\n class={{\n // VARIANTS\n connection: this.variant === 'connection',\n pending: this.variant === 'pending',\n approved: this.variant === 'approved',\n failed: this.variant === 'failed',\n }}\n >\n <div class=\"backgroundContainer\">\n <div class=\"background\">\n <div class=\"ring ring3\" />\n <div class=\"ring ring2\" />\n <div class=\"ring ring1\" />\n <div class=\"ring ring0\" />\n {this.variant === 'connection' && (\n <div class={`ringCenter connection`}>\n <img src={Images.heroDefault} />\n </div>\n )}\n {this.variant === 'pending' && (\n <div class={`ringCenter pending`}>\n <img src={Images.heroPending} />\n </div>\n )}\n\n {this.variant === 'approved' && (\n <div class={`ringCenter approved`}>\n <img src={Images.heroSuccess} />\n </div>\n )}\n <div class=\"fadeOut\" />\n </div>\n <div class=\"children\">\n {this.variant === 'connection' && (\n <div class=\"connectDiagramContainer\">\n <slot name=\"connectionLeft\" />\n <slot name=\"connectionRight\" />\n </div>\n )}\n {this.variant === 'failed' && AlertCircle()}\n {this.variant === 'approved' && Checkmark()}\n </div>\n </div>\n <cpsl-text variant=\"headingXS\" color=\"primary\" weight=\"medium\">\n {this.title}\n </cpsl-text>\n {this.subtitle && (\n <cpsl-text variant=\"bodyM\" 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.ts"],"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';\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

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '91853a486a389f4850a7ae83a25cedba52c645a5', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '6960e6da25cb3cd108021f8a5aa20a92a24f92b3', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class CpslIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"doubleArc\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"singleArc\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"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": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"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\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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

@@ -28,7 +28,7 @@ export class CpslIdenticon {
             [shapeA, shapeB, shapeC, shapeD],
             [rotationA, rotationB, rotationC, rotationD],
         ];
-        return (h(Host, { key: 'beeaf99134ffc2d93ea5900ee38b26c32afc3a1c', class: {
+        return (h(Host, { key: '9e7e42f8de3d9611e30bf8c193d4ff8864805dd9', class: {
                 red: color === 'red',
                 orange: color === 'orange',
                 yellow: color === 'yellow',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n title: 'Components/CpslIdenticon',\n args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: 40 },\n argTypes: {\n hash: { control: 'text' },\n size: { control: 'number' },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}
1	+ {"version":3,"file":"cpsl-identicon.stories.js","sourceRoot":"","sources":["../../../../src/components/cpsl-identicon/cpsl-identicon.stories.tsx"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA+C;IACvD,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAU,IAAI,CAAC,EAAE,CAAC,wBAAwB,IAAI,CAAC,IAAI,IAAI,CAAC;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAU,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/html';\nimport { type CpslIdenticon } from './cpsl-identicon';\n\nconst meta: Meta<CpslIdenticon & { content?: string }> = {\n title: 'Components/CpslIdenticon',\n args: { hash: 'wruvbwic8932nc4u3cr9394n3cibj3892438cr', size: 40 },\n argTypes: {\n hash: { control: 'text' },\n size: { control: 'number' },\n },\n};\n\nexport default meta;\n\ntype Story = StoryFn<CpslIdenticon & { content?: string }>;\n\nconst Template: Story = args => `<cpsl-identicon hash=${args.hash}/>`;\n\nexport const Primary: Story = Template.bind({});\n"]}

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: '15b85f109d7e5371f6fa35f38dc35f86a061c46c' }, h("div", { key: '39eae7146dfa17771e1d68045255c9b0db5d0a0c', class: "info-box-container" }, h("slot", { key: '008e3552b563dd2f3b6d10bc7afe59b0f2a2ba3a' }))));
+        return (h(Host, { key: '71bc7e0e6976741e4da0fcc6d0135037c416d663' }, h("div", { key: 'd7c1f41e2d60c1e7319ea93b740dc789061f6f2b', class: "info-box-container" }, h("slot", { key: '84681d40c32832a00874901eb9e75679313f2034' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,6 +16,10 @@ export class CpslInput {
         this.onBlur = (ev) => {
             this.hasFocus = false;
             if (this.focusedValue !== this.value) {
+                /**
+                 * Emits the `cpslChange` event when the input value
+                 * is different than the value when the input was focused.
+                 */
                 this.emitValueChange(ev);
             }
             this.cpslBlur.emit(ev);
@@ -31,10 +35,13 @@ export class CpslInput {
             ev.preventDefault();
             const input = ev.target;
             const pasteData = ((_a = ev.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
+            // Manually set the value
             input.value = input.value + pasteData;
             this.value = this.value + pasteData;
             pasteData === '' ? this.disableSlots() : this.enableSlots();
+            // Emit the cpslPaste event
             this.cpslPaste.emit(ev);
+            // Emit the cpslChange event since the value was modified by paste
             this.emitInputChange(ev);
         };
         this.focusInput = () => {
@@ -78,6 +85,18 @@ export class CpslInput {
             this.enableSlots();
         }
     }
+    /**
+     * Update the native input element when the value changes
+     */
+    // @Watch('value')
+    // protected valueChanged() {
+    //   const nativeInput = this.nativeInput;
+    //   const value = this.value;
+    //   if (nativeInput && nativeInput.value !== value) {
+    //     nativeInput.value = value;
+    //   }
+    //   Boolean(value) ? this.disableSlots() : this.enableSlots();
+    // }
     componentDidLoad() {
         this.initButtons();
         if (Boolean(this.value)) {
@@ -114,12 +133,23 @@ export class CpslInput {
             });
         }
     }
+    /**
+     * Emits a `cpslInput` event.
+     */
     emitInputChange(event) {
         this.cpslInput.emit({ value: this.nativeInput.value, event });
     }
+    /**
+     * Emits a `cpslChange` event.
+     *
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
+     */
     emitValueChange(event) {
         const { value } = this;
+        // Checks for both null and undefined values
         const newValue = value == null ? value : value.toString();
+        // Emitting a value change should update the internal state for tracking the focused value
         this.focusedValue = newValue;
         this.cpslChange.emit({ value: newValue, event });
     }
@@ -131,7 +161,11 @@ export class CpslInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c9257766f3dff436dd80db0755994480e803ee36', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'ae695bceee508db8a4c2ebd6919d6d761d9d3180', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'b68c7adeb0e8631f3fb85026df71e9a1f3cb4129', name: "start" }), h("input", { key: '40fc3199639e74f4b481859cb1061f41bdf73e32', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'f437ceaa4f50faf59121a97937fc9e91201a3720', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: 'fcdf39d74fbf944bfce7aecfcaaa8dea03f08d1b', class: {
+                'disabled': this.disabled,
+                'focused': this.hasFocus,
+                'has-value': Boolean(this.focusedValue) || Boolean(this.value),
+            } }, this.label && (h("label", { key: '1925b9b4b93e24681d95911e40ba3a04ab56316e', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '3b06f5daeab283875895ef75fb8b72d495603562', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: '18f58bba907b45c70920f1f0f518df30997f6db6', name: "start" }), h("input", { key: '6dcabf1f887a07c9d1e8349831ab081ba42f597a', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'c15f8bc41b7a5f59128c415aa513244d2aa4e057', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: '7d724d32d322c93e0572000376e0e4110537af4d', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '53254d2773c5ec3384e7cdf7de51ae1955564b57' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-input"; }
     static get encapsulation() { return "shadow"; }
@@ -576,7 +610,7 @@ export class CpslInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"doubleArc\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"singleArc\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"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": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"cube\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"menu\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"stars\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"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\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-input/cpsl-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { AutocompleteTypes, IconType, TextFieldTypes } from '../../interface';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n tag: 'cpsl-input',\n styleUrl: 'cpsl-input.scss',\n shadow: true,\n})\nexport class CpslInput {\n private nativeInput?: HTMLInputElement;\n @Element() el!: HTMLCpslInputElement;\n\n private inputId = `cpsl-input-${inputIds++}`;\n /*\n The value of the input when the input is focused.\n /\n private focusedValue?: string \| number \| null;\n\n @State() hasFocus = false;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() autocapitalize = 'off';\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /\n Whether auto correction should be enabled when the user is entering/editing the text value.\n /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /\n Whether to disable auto disabling of the slotted components.\n /\n @Prop() noAutoDisable: boolean;\n\n /\n Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n \n This may not be sufficient for the element to be focused on page load.\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() autofocus = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() enterkeyhint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send';\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 A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() inputmode?: 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search';\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: string \| number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min?: string \| number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.\n /\n @Prop() multiple?: boolean;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n /\n @Prop() pattern?: string;\n\n /\n Instructional text that shows before the input has a value.\n * This property applies only when the `type` property is set to `\"email\"`,\n * `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() spellcheck = false;\n\n /\n The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n /\n @Prop() startIconSrc?: string;\n\n /\n The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n /\n @Prop() startIcon?: IconType;\n\n /\n Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n /\n @Prop() step?: string;\n\n /\n The type of control to display. The default type is `text`.\n /\n @Prop() type: TextFieldTypes = 'text';\n\n /\n The value of the controlled input.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n The `cpslInput` event is fired each time the user modifies the input's value.\n * Unlike the `cpslChange` event, the `cpslInput` event is fired for each alteration\n * to the input's value. This typically happens for each keystroke as the user types.\n \n For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n /\n @Event() cpslInput!: EventEmitter<InputInputEventDetail>;\n\n /\n The `cpslChange` event is fired when the user modifies the input's value.\n * Unlike the `cpslInput` event, the `cpslChange` event is only fired when changes\n * are committed, not as the user types.\n \n Depending on the way the users interacts with the element, the `cpslChange`\n * event fires at a different moment:\n * - When the element loses focus after its value has changed: for elements\n * where the user's interaction is typing.\n /\n @Event() cpslChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when something has been paste into the input.\n /\n @Event() cpslPaste!: EventEmitter<ClipboardEvent>;\n\n @Watch('disabled')\n handleDisable() {\n if (this.disabled) {\n this.disableSlots();\n } else {\n this.enableSlots();\n }\n }\n\n /\n Update the native input element when the value changes\n /\n // @Watch('value')\n // protected valueChanged() {\n // const nativeInput = this.nativeInput;\n // const value = this.value;\n // if (nativeInput && nativeInput.value !== value) {\n // nativeInput.value = value;\n // }\n // Boolean(value) ? this.disableSlots() : this.enableSlots();\n // }\n\n componentDidLoad() {\n this.initButtons();\n if (Boolean(this.value)) {\n this.enableSlots();\n } else {\n this.disableSlots();\n }\n }\n\n private disableSlots() {\n if (!this.noAutoDisable) {\n this.endEl?.setAttribute('disabled', 'true');\n this.startEl?.setAttribute('disabled', 'true');\n }\n }\n\n private enableSlots() {\n this.endEl?.setAttribute('disabled', 'false');\n this.startEl?.setAttribute('disabled', 'false');\n }\n\n private initButtons() {\n if (this.endEl?.tagName === 'CPSL-BUTTON') {\n this.endEl.setAttribute('full-width', 'true');\n this.endEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n if (this.startEl?.tagName === 'CPSL-BUTTON') {\n this.startEl.setAttribute('full-width', 'true');\n this.startEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n }\n\n /\n Emits a `cpslInput` event.\n /\n private emitInputChange(event?: Event) {\n this.cpslInput.emit({ value: this.nativeInput.value, event });\n }\n\n /\n Emits a `cpslChange` event.\n \n This API should be called for user committed changes.\n * This API should not be used for external value changes.\n /\n private emitValueChange(event?: Event) {\n const { value } = this;\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n // Emitting a value change should update the internal state for tracking the focused value\n this.focusedValue = newValue;\n this.cpslChange.emit({ value: newValue, event });\n }\n\n private onInput = (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement \| null;\n if (Boolean(input)) {\n this.value = input.value \|\| '';\n input.value === '' ? this.disableSlots() : this.enableSlots();\n }\n\n this.emitInputChange(ev);\n };\n\n private onChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /\n Emits the `cpslChange` event when the input value\n * is different than the value when the input was focused.\n /\n this.emitValueChange(ev);\n }\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.cpslFocus.emit(ev);\n };\n\n private onPaste = (ev: ClipboardEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n const input = ev.target as HTMLInputElement;\n const pasteData = ev.clipboardData?.getData('text') \|\| '';\n\n // Manually set the value\n input.value = input.value + pasteData;\n this.value = this.value + pasteData;\n pasteData === '' ? this.disableSlots() : this.enableSlots();\n\n // Emit the cpslPaste event\n this.cpslPaste.emit(ev);\n\n // Emit the cpslChange event since the value was modified by paste\n this.emitInputChange(ev);\n };\n\n private focusInput = () => {\n this.nativeInput.focus();\n };\n\n private get startEl() {\n return this.el.querySelector('[slot=\"start\"]');\n }\n\n private get endEl() {\n return this.el.querySelector('[slot=\"end\"]');\n }\n\n render() {\n return (\n <Host class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) \|\| Boolean(this.value) }}>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div class={{ 'input-container': true, 'error-container': Boolean(this.errorText) }}>\n <slot name=\"start\"></slot>\n <input\n class=\"native-input\"\n ref={input => (this.nativeInput = input)}\n id={this.inputId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n type={this.type}\n value={this.value}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.focusInput}\n onPaste={this.onPaste}\n />\n <slot name=\"end\"></slot>\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"cpsl-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-input/cpsl-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { AutocompleteTypes, IconType, TextFieldTypes } from '../../interface';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n tag: 'cpsl-input',\n styleUrl: 'cpsl-input.scss',\n shadow: true,\n})\nexport class CpslInput {\n private nativeInput?: HTMLInputElement;\n @Element() el!: HTMLCpslInputElement;\n\n private inputId = `cpsl-input-${inputIds++}`;\n /*\n The value of the input when the input is focused.\n /\n private focusedValue?: string \| number \| null;\n\n @State() hasFocus = false;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n /\n\n @Prop() autocapitalize = 'off';\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /\n Whether auto correction should be enabled when the user is entering/editing the text value.\n /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /\n Whether to disable auto disabling of the slotted components.\n /\n @Prop() noAutoDisable: boolean;\n\n /\n Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n \n This may not be sufficient for the element to be focused on page load.\n /\n\n @Prop() autofocus = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n /\n\n @Prop() enterkeyhint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send';\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 A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n /\n\n @Prop() inputmode?: 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search';\n\n /\n The label for the input.\n /\n @Prop() label?: string;\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: string \| number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min?: string \| number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored.\n /\n @Prop() multiple?: boolean;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n /\n @Prop() pattern?: string;\n\n /\n Instructional text that shows before the input has a value.\n * This property applies only when the `type` property is set to `\"email\"`,\n * `\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the label will display an \"optional\" tag.\n /\n @Prop() showOptionalLabel = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n\n @Prop() spellcheck = false;\n\n /\n The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n /\n @Prop() startIconSrc?: string;\n\n /\n The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.\n /\n @Prop() startIcon?: IconType;\n\n /\n Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n /\n @Prop() step?: string;\n\n /\n The type of control to display. The default type is `text`.\n /\n @Prop() type: TextFieldTypes = 'text';\n\n /\n The value of the controlled input.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n The `cpslInput` event is fired each time the user modifies the input's value.\n * Unlike the `cpslChange` event, the `cpslInput` event is fired for each alteration\n * to the input's value. This typically happens for each keystroke as the user types.\n \n For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n /\n @Event() cpslInput!: EventEmitter<InputInputEventDetail>;\n\n /\n The `cpslChange` event is fired when the user modifies the input's value.\n * Unlike the `cpslInput` event, the `cpslChange` event is only fired when changes\n * are committed, not as the user types.\n \n Depending on the way the users interacts with the element, the `cpslChange`\n * event fires at a different moment:\n * - When the element loses focus after its value has changed: for elements\n * where the user's interaction is typing.\n /\n @Event() cpslChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when something has been paste into the input.\n /\n @Event() cpslPaste!: EventEmitter<ClipboardEvent>;\n\n @Watch('disabled')\n handleDisable() {\n if (this.disabled) {\n this.disableSlots();\n } else {\n this.enableSlots();\n }\n }\n\n /\n Update the native input element when the value changes\n /\n // @Watch('value')\n // protected valueChanged() {\n // const nativeInput = this.nativeInput;\n // const value = this.value;\n // if (nativeInput && nativeInput.value !== value) {\n // nativeInput.value = value;\n // }\n // Boolean(value) ? this.disableSlots() : this.enableSlots();\n // }\n\n componentDidLoad() {\n this.initButtons();\n if (Boolean(this.value)) {\n this.enableSlots();\n } else {\n this.disableSlots();\n }\n }\n\n private disableSlots() {\n if (!this.noAutoDisable) {\n this.endEl?.setAttribute('disabled', 'true');\n this.startEl?.setAttribute('disabled', 'true');\n }\n }\n\n private enableSlots() {\n this.endEl?.setAttribute('disabled', 'false');\n this.startEl?.setAttribute('disabled', 'false');\n }\n\n private initButtons() {\n if (this.endEl?.tagName === 'CPSL-BUTTON') {\n this.endEl.setAttribute('full-width', 'true');\n this.endEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n if (this.startEl?.tagName === 'CPSL-BUTTON') {\n this.startEl.setAttribute('full-width', 'true');\n this.startEl.addEventListener('mousedown', e => {\n e.preventDefault();\n });\n }\n }\n\n /\n Emits a `cpslInput` event.\n /\n private emitInputChange(event?: Event) {\n this.cpslInput.emit({ value: this.nativeInput.value, event });\n }\n\n /\n Emits a `cpslChange` event.\n \n This API should be called for user committed changes.\n * This API should not be used for external value changes.\n /\n private emitValueChange(event?: Event) {\n const { value } = this;\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n // Emitting a value change should update the internal state for tracking the focused value\n this.focusedValue = newValue;\n this.cpslChange.emit({ value: newValue, event });\n }\n\n private onInput = (ev: InputEvent) => {\n const input = ev.target as HTMLInputElement \| null;\n if (Boolean(input)) {\n this.value = input.value \|\| '';\n input.value === '' ? this.disableSlots() : this.enableSlots();\n }\n\n this.emitInputChange(ev);\n };\n\n private onChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /\n Emits the `cpslChange` event when the input value\n * is different than the value when the input was focused.\n /\n this.emitValueChange(ev);\n }\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.cpslFocus.emit(ev);\n };\n\n private onPaste = (ev: ClipboardEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n const input = ev.target as HTMLInputElement;\n const pasteData = ev.clipboardData?.getData('text') \|\| '';\n\n // Manually set the value\n input.value = input.value + pasteData;\n this.value = this.value + pasteData;\n pasteData === '' ? this.disableSlots() : this.enableSlots();\n\n // Emit the cpslPaste event\n this.cpslPaste.emit(ev);\n\n // Emit the cpslChange event since the value was modified by paste\n this.emitInputChange(ev);\n };\n\n private focusInput = () => {\n this.nativeInput.focus();\n };\n\n private get startEl() {\n return this.el.querySelector('[slot=\"start\"]');\n }\n\n private get endEl() {\n return this.el.querySelector('[slot=\"end\"]');\n }\n\n render() {\n return (\n <Host\n class={{\n 'disabled': this.disabled,\n 'focused': this.hasFocus,\n 'has-value': Boolean(this.focusedValue) \|\| Boolean(this.value),\n }}\n >\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div class={{ 'input-container': true, 'error-container': Boolean(this.errorText) }}>\n <slot name=\"start\"></slot>\n <input\n class=\"native-input\"\n ref={input => (this.nativeInput = input)}\n id={this.inputId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n type={this.type}\n value={this.value}\n onInput={this.onInput}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.focusInput}\n onPaste={this.onPaste}\n />\n <slot name=\"end\"></slot>\n </div>\n {(this.errorText \|\| this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

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

@@ -156,7 +156,7 @@ export class CpslModal {
             liveSnap: {
                 y: function (y) {
                     if (y < 0)
-                        return 0;
+                        return 0; // Restricts dragging to down
                     return y;
                 },
             },