npm - legalesign-document-viewer - Versions diffs - 0.1.7 → 0.2.0 - Mend

legalesign-document-viewer 0.1.7 → 0.2.0

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

Files changed (168) hide show

package/dist/components/{p-ChfFmzMa.js.map → p-DEE854iZ.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-ChfFmzMa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-viewer/defaultFieldIcons.ts","src/components/ls-field-properties-multiple/ls-field-properties-multiple.css?tag=ls-field-properties-multiple&encapsulation=shadow","src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"sourcesContent":["import { Icon } from \"../../components\";\n\nexport const defaultFieldIcons: { [key: string]: Icon } = {\n 'signature': 'signature',\n 'text': 'text',\n 'signing date': 'auto-date',\n 'date': 'calender',\n 'initials': 'initials',\n 'checkbox': 'check',\n 'email': 'at-symbol',\n 'number': 'hashtag',\n 'image': 'photograph',\n 'dropdown': 'document-text',\n 'file': 'upload',\n 'drawn field': 'pencil',\n 'regular expression': 'code',\n};\n\nexport function getFieldIcon(key: string): Icon \| undefined {\n return defaultFieldIcons[key] \|\| 'view-grid';\n}\n\n",":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% /\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; / 120% /\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; / 150% /\n text-transform: capitalize;\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; / 142.857% /\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/ Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n tag: 'ls-field-properties-multiple',\n styleUrl: 'ls-field-properties-multiple.css',\n shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n @Prop() dataItem: LSApiElement[];\n @Prop() fieldSet: 'content' \| 'placement' \| 'dimensions' = 'content';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\n };\n\n allSignersSame = () => {\n if (!this.dataItem \|\| this.dataItem.length === 0) return { isSame: true, signer: undefined };\n const firstSigner = this.dataItem[0].signer;\n const allSame = this.dataItem.every(item => item.signer === firstSigner);\n return { isSame: allSame, signer: allSame ? firstSigner : 13 };\n };\n\n allLabelsSame = () => {\n if (!this.dataItem \|\| this.dataItem.length === 0) return { isSame: true, label: undefined };\n const firstLabel = this.dataItem[0].label;\n const allSame = this.dataItem.every(item => item.label === firstLabel);\n return { isSame: allSame, label: allSame ? firstLabel : undefined };\n };\n\n allElementsSame = () => {\n if (!this.dataItem \|\| this.dataItem.length === 0) return { isSame: true, elementType: 'mixed' };\n const firstElementType = this.dataItem[0].elementType;\n const allSame = this.dataItem.every(item => item.elementType === firstElementType);\n return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };\n };\n\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <div class={'field-set'}>\n <ls-field-alignment dataItem={this.dataItem} />\n <ls-field-placement dataItem={this.dataItem} />\n <ls-field-distribute dataItem={this.dataItem} />\n\n </div>\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-size dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Fields you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.allSignersSame().signer)}-30)`,\n background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n }}\n >\n <ls-icon name={getFieldIcon(this.allElementsSame().elementType)} size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>\n {this.dataItem.length} {this.allElementsSame().elementType} {'Fields'}\n </p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.allLabelsSame().label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n </div>\n )}\n </div>\n <ls-field-footer />\n \n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DEE854iZ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-viewer/defaultFieldIcons.ts","src/components/ls-field-properties-multiple/ls-field-properties-multiple.css?tag=ls-field-properties-multiple&encapsulation=shadow","src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"sourcesContent":["import { Icon } from \"../../components\";\n\nexport const defaultFieldIcons: { [key: string]: Icon } = {\n 'signature': 'signature',\n 'text': 'text',\n 'signing date': 'auto-date',\n 'date': 'calender',\n 'initials': 'initials',\n 'checkbox': 'check',\n 'email': 'at-symbol',\n 'number': 'hashtag',\n 'image': 'photograph',\n 'dropdown': 'document-text',\n 'file': 'upload',\n 'drawn field': 'pencil',\n 'regular expression': 'code',\n};\n\nexport function getFieldIcon(key: string): Icon \| undefined {\n return defaultFieldIcons[key] \|\| 'view-grid';\n}\n\n",":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n}\n\n.properties-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% /\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; / 120% /\n}\n\n.ls-field-type-wrapper {\n position: relative;\n border-radius: 0.875rem;\n padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n border-radius: 0.625rem;\n background: var(--white, #fff);\n display: flex;\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n align-items: center;\n gap: 0.875rem;\n align-self: stretch;\n}\n\n.ls-field-type-icon {\n display: flex;\n padding: 0.5rem;\n align-items: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5rem; / 150% /\n text-transform: capitalize;\n}\n\n.tabs-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n width: 100%;\n gap: 0.125rem;\n padding: 0.125rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n border-radius: 0.75rem;\n background: var(--white, #ffffff);\n}\n\n.ls-tab {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.625rem;\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; / 142.857% /\n color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n background: var(--primary-10, #eff4ff);\n color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n display: flex;\n padding-top: 1rem;\n border-top: 1px solid var(--gray-20, #f0f1f2);\n flex-direction: column;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: auto;\n}\n\n.scrolling-container {\n overflow-y: auto;\n padding: 0 1rem;\n margin: 0 -1rem;\n height: calc(100% - 10.938rem);\n}\n\n/ Global Styles */\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n width: 100%;\n}\n\n.input-wrapper {\n position: relative;\n}\n\n.full-width {\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n display: flex;\n gap: 0.5rem;\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n font-weight: 500;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--white, #fff);\n color: var(--gray-90, #5e6066);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n border: 1px solid var(--red-60, #f04438);\n background-color: white;\n color: var(--red-60);\n}\n\nbutton.destructive:hover {\n border: 1px solid var(--red-70, #d92d20);\n background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n tag: 'ls-field-properties-multiple',\n styleUrl: 'ls-field-properties-multiple.css',\n shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n @Prop() dataItem: LSApiElement[];\n @Prop() fieldSet: 'content' \| 'placement' \| 'dimensions' = 'placement';\n\n signerColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\n };\n\n allSignersSame = () => {\n if (!this.dataItem \|\| this.dataItem.length === 0) return { isSame: true, signer: undefined };\n const firstSigner = this.dataItem[0].signer;\n const allSame = this.dataItem.every(item => item.signer === firstSigner);\n return { isSame: allSame, signer: allSame ? firstSigner : 13 };\n };\n\n allLabelsSame = () => {\n if (!this.dataItem \|\| this.dataItem.length === 0) return { isSame: true, label: undefined };\n const firstLabel = this.dataItem[0].label;\n const allSame = this.dataItem.every(item => item.label === firstLabel);\n return { isSame: allSame, label: allSame ? firstLabel : undefined };\n };\n\n allElementsSame = () => {\n if (!this.dataItem \|\| this.dataItem.length === 0) return { isSame: true, elementType: 'mixed' };\n const firstElementType = this.dataItem[0].elementType;\n const allSame = this.dataItem.every(item => item.elementType === firstElementType);\n return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };\n };\n\n render() {\n return (\n <Host>\n <div class={'tabs-container'}>\n <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n Content\n </button>\n <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n Placement\n </button>\n <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n Dimensions\n </button>\n </div>\n <div class={'scrolling-container'}>\n {this.fieldSet === 'placement' ? (\n <div class={'field-set'}>\n <ls-field-alignment dataItem={this.dataItem} />\n <ls-field-placement dataItem={this.dataItem} />\n <ls-field-distribute dataItem={this.dataItem} />\n\n </div>\n ) : this.fieldSet === 'dimensions' ? (\n <div class={'field-set'}>\n <ls-field-dimensions dataItem={this.dataItem} />\n <ls-field-size dataItem={this.dataItem} />\n </div>\n ) : (\n <div class={'field-set'}>\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Type</p>\n <p class={'ls-field-properties-section-description'}>The Fields you currently have selected</p>\n </div>\n <div\n class={'ls-field-type-wrapper'}\n style={{\n border: `1px dashed var(--${this.signerColor(this.allSignersSame().signer)}-30)`,\n background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n }}\n >\n <div class={'ls-field-type-inner'}>\n <div\n class={'ls-field-type-icon'}\n style={{\n border: `1px solid var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n }}\n >\n <ls-icon name={getFieldIcon(this.allElementsSame().elementType)} size=\"20\" />\n </div>\n <p class={'ls-field-type-name'}>\n {this.dataItem.length} {this.allElementsSame().elementType} {'Fields'}\n </p>\n </div>\n </div>\n </div>\n <div class={'ls-field-properties-section row'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Required Field</p>\n </div>\n <ls-toggle />\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Field Label</p>\n <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n </div>\n <input value={this.allLabelsSame().label} width=\"30\" placeholder=\"eg. Sign Here\" />\n </div>\n </div>\n )}\n </div>\n <ls-field-footer />\n \n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BuX-_d2U.js → p-DVz19y7K.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
 const lsFeatureColumnCss = ":host{display:flex;flex-direction:column;gap:0.5rem}.activeIcon,.defaultIcon{padding:0.75rem;border-radius:0.75rem;color:var(--gray-80, #787A80)}.defaultIcon:hover{background-color:var(--primary-10, #EFF4FF);color:var(--primary-100, #0C1457);cursor:pointer}.activeIcon{background-color:var(--primary-60, #4456F6);color:var(--white, #fff)}";
@@ -55,6 +55,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsFeatureColoumn as L, defineCustomElement as d };
-//# sourceMappingURL=p-BuX-_d2U.js.map
+//# sourceMappingURL=p-DVz19y7K.js.map
-//# sourceMappingURL=p-BuX-_d2U.js.map
+//# sourceMappingURL=p-DVz19y7K.js.map

package/dist/components/{p-BuX-_d2U.js.map → p-DVz19y7K.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~BuX-_d2U~~.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCOlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;AAC3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACjE,OAAO,EAAE,MAAK;AACZ,gBAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;aAC1B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;aACzB,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n padding: 0.75rem;\n border-radius: 0.75rem;\n color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n background-color: var(--primary-10, #EFF4FF);\n color: var(--primary-100, #0C1457);\n cursor: pointer;\n}\n\n.activeIcon {\n background-color: var(--primary-60, #4456F6);\n color: var(--white, #fff);\n}","import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n tag: 'ls-feature-column',\n styleUrl: 'ls-feature-column.css',\n shadow: true,\n})\nexport class LsFeatureColoumn {\n /*\n Determines / sets which of the far left 'managers' is active.\n * {'document' \| 'toolbox' \| 'participant' }\n */\n @Prop({ mutable: true }) manager: 'document' \| 'toolbox' \| 'participant' = 'toolbox';\n\n // Send an manager change up the DOM\n @Event() manage: EventEmitter<'document' \| 'toolbox' \| 'participant'>;\n\n render() {\n return (\n <Host>\n <div\n class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n console.log('document');\n this.manage.emit('document');\n this.manager = 'document';\n }}\n >\n <ls-icon name=\"document\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('toolbox');\n this.manager = 'toolbox';\n }}\n >\n <ls-icon name=\"typing-input\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('participant');\n this.manager = 'participant';\n }}\n >\n <ls-icon name=\"user-group\" size=\"24\" />\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DVz19y7K.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCOlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;AAC3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACjE,OAAO,EAAE,MAAK;AACZ,gBAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;aAC1B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;aACzB,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n padding: 0.75rem;\n border-radius: 0.75rem;\n color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n background-color: var(--primary-10, #EFF4FF);\n color: var(--primary-100, #0C1457);\n cursor: pointer;\n}\n\n.activeIcon {\n background-color: var(--primary-60, #4456F6);\n color: var(--white, #fff);\n}","import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n tag: 'ls-feature-column',\n styleUrl: 'ls-feature-column.css',\n shadow: true,\n})\nexport class LsFeatureColoumn {\n /*\n Determines / sets which of the far left 'managers' is active.\n * {'document' \| 'toolbox' \| 'participant' }\n */\n @Prop({ mutable: true }) manager: 'document' \| 'toolbox' \| 'participant' = 'toolbox';\n\n // Send an manager change up the DOM\n @Event() manage: EventEmitter<'document' \| 'toolbox' \| 'participant'>;\n\n render() {\n return (\n <Host>\n <div\n class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n console.log('document');\n this.manage.emit('document');\n this.manager = 'document';\n }}\n >\n <ls-icon name=\"document\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('toolbox');\n this.manager = 'toolbox';\n }}\n >\n <ls-icon name=\"typing-input\" size=\"24\" />\n </div>\n <div\n class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n onClick={() => {\n this.manage.emit('participant');\n this.manager = 'participant';\n }}\n >\n <ls-icon name=\"user-group\" size=\"24\" />\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-DKOj6SYm.js → p-DY_A9zAm.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-DjfDnBZ1.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
 const lsNumberInputCss = "* {\n  box-sizing: border-box;\n  font-family:\n    'IBM Plex Sans',\n    sans-serif;\n  margin: 0;\n}\n\n.host {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem;\n  align-items: flex-start;\n  gap: 0.25rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--Grey-20, #edeff2);\n  background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0.75rem;\n  color: var(--gray-60);\n}\n\n#password-icon {\n  padding-right: 0.25rem;\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-basic {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\n.input-ls {\n  display: flex;\n  width: 100%;\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.375rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n\n\n}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input-ls {\n  -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n  box-shadow:\n    0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n    0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n    0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #d8d9dc);\n  background: var(--White, #fff);\n  color: var(--gray-110);\n}\n\n.disabled {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.display-only {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background: var(--gray-10, #f7f8fa);\n  color: var(--gray-100);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #ffa19e);\n  background: var(--White, #fff);\n  color: var(--Red-100, #7a1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72f0c2);\n  background: var(--White, #fff);\n  color: var(--Green-100, #125241);\n}\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n}\n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button-disabled {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-=10, #F7F8FA);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  cursor: not-allowed;\n\n  #buttonIcon {\n    color: var(--gray-70);\n  }\n}\n\n.button:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-20, #edeff2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456f6);\n  background: var(--White, #fff);\n  box-shadow:\n    0px 0px 4px 0px #c7ddff inset,\n    0px 0px 0px 4px #9dc3fc;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n";
@@ -43,7 +43,7 @@ const LsNumberInput = /*@__PURE__*/ proxyCustomElement(class LsNumberInput exten
                     ? 'invalid'
                     : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
         const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
-        return (h("host", { key: 'beb0a335033fe6f62f8fd5a753547dc30b1b9ca3', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'bea2559e9a33458628f15ec7dc5e262c1c75b00d', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '85b15e026a28bc9975861d9e0baebe4168d03422', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'f3874bc425a87aa07513aca5ea603e28d6b489fb', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '6c812a63124cbd3f745de5dc6c1ec78faf01d49b', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '9f24c493dfa34436183121fa06115511b9d078d0', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '56e238651c4716be0229d8ecb02e3c332ab48545', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'e72d8f9ea8094bd3a5778b76b881f93abaea94b5', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '99d14f1c814972f434a4d301e3314ae97005508f', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '51e815f1d9c8cf3840c7dd5a908e5721736d458d', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: '1bde6ed929ef2dde774be6c23c30756e3a1fbea1', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: '76e662184421697ee480fdaddfc37dd59f51bb40', id: 'buttonIcon', name: 'plus-sm' })))));
+        return (h("host", { key: 'c5e3922c847c62ba187a2d4482cb1d00e87ba833', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: '8150a612dbd9d7ec0eb01c4dc380b20085168026', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '5bdbcc88d744bc21f57437c7786ed88cf337c37f', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: '9be97c20b91dc7149f3076e441588be4c1bcbc4c', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '4c61a843bfe2a404f33be624a9e0d974ca1ac51b', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '5920abb0ede5c05c8a9fc06f00a61739c413fdcd', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '7c74720b9c29a0bbb4b59c27f16defecaf7f7b4a', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '5de94f9e0627a2e3c9614a2b030f3ad1ef82c63d', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: 'a24ca1d6cf66b7c7e07963f25d3e65ff2ed26914', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '80bd58b24794f468a23884b2da8d42d3c3e45554', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: '844d1183f557748642c336bd0f4f6e74ef7f9f74', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'd96b4f76efb2206b6776a737fe2baa1b8601bd3b', id: 'buttonIcon', name: 'plus-sm' })))));
     }
     static get style() { return lsNumberInputCss; }
 }, [257, "ls-number-input", {
@@ -83,6 +83,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsNumberInput as L, defineCustomElement as d };
-//# sourceMappingURL=p-DKOj6SYm.js.map
+//# sourceMappingURL=p-DY_A9zAm.js.map
-//# sourceMappingURL=p-DKOj6SYm.js.map
+//# sourceMappingURL=p-DY_A9zAm.js.map

package/dist/components/{p-DKOj6SYm.js.map → p-DY_A9zAm.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-DKOj6SYm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-number-input/ls-number-input.css?tag=ls-number-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-number-input/ls-number-input.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n font-family:\n 'IBM Plex Sans',\n sans-serif;\n margin: 0;\n}\n\n.host {\n display: flex;\n width: 100%;\n padding: 0.25rem;\n align-items: flex-start;\n gap: 0.25rem;\n border-radius: 0.625rem;\n border: 1px solid var(--Grey-20, #edeff2);\n background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0.75rem;\n color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0.75rem;\n color: var(--gray-60);\n}\n\n#password-icon {\n padding-right: 0.25rem;\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-basic {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: 0.5rem 0.75rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm /\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n / text-sm/leading-5/font-regular /\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\n.input-ls {\n display: flex;\n width: 100%;\n height: 1.75rem;\n padding: 0 0.5rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.375rem;\n / Shadow/sm /\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n / text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n\n\n}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.input-ls {\n -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-110);\n}\n\n.disabled {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--gray-10, #f7f8fa);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.display-only {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--gray-10, #f7f8fa);\n color: var(--gray-100);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n}\n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--White, #fff);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button-disabled {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-=10, #F7F8FA);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n cursor: not-allowed;\n\n #buttonIcon {\n color: var(--gray-70);\n }\n}\n\n.button:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-20, #edeff2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'ls-number-input',\n styleUrl: 'ls-number-input.css',\n shadow: true,\n})\nexport class LsNumberInput {\n @Prop() type: 'basic' \| 'ls' = 'ls';\n @Prop() name: string;\n @Prop({mutable: true}) value: number = 0 ;\n @Prop() placeholder?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() disabled: boolean;\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() countMax: number;\n @Prop() buttonClick?: any;\n @Prop() buttonIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n\n handleChange = (event) => {\n this.value = event.target.value;\n }\n\n private handlePlus = () => {\n this.value = this.value + 1;\n }\n\n private handleMinus = () => {\n this.value = this.value - 1;\n }\n\n render() {\n const {\n type,\n name,\n value,\n placeholder,\n aria,\n disabled,\n required,\n valid,\n dirty,\n buttonClick,\n buttonIcon,\n fieldIcon,\n handleChange,\n handleMinus,\n handlePlus,\n } = this;\n\n const inputClass = clsx(\n type === 'ls' ? 'input-ls' : 'input-basic',\n disabled\n ? 'disabled'\n : dirty && valid\n ? 'valid'\n : dirty && !valid\n ? 'invalid'\n : 'default',\n fieldIcon && 'icon-input',\n dirty && 'button-input',\n buttonIcon && 'button-input',\n buttonIcon && dirty && 'right-items-input',\n );\n\n const plusMinusClass = clsx(\n disabled ? 'button-disabled' : 'button'\n )\n\n return (\n <host class={type === 'ls' && 'host'}>\n {type === 'ls' && (\n <button class={plusMinusClass} onClick={() => handleMinus()} disabled={disabled}>\n <ls-icon id='buttonIcon' name='minus-sm'></ls-icon>\n </button>\n )}\n <div class='input-container'>\n {fieldIcon && (\n <ls-icon\n id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n name={fieldIcon}\n ></ls-icon>\n )}\n <input\n type='number'\n class={inputClass}\n id={name}\n name={name}\n value={value}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n onInput={(event) => handleChange(event)}\n />\n <div class='right-items'>\n {dirty && !disabled && (\n <ls-icon\n id={valid ? 'validIcon' : 'invalidIcon'}\n name={valid ? 'check-circle' : 'exclamation-circle'}\n ></ls-icon>\n )}\n {buttonIcon && type !== 'ls' && (\n <button class='button' onClick={buttonClick}>\n <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n </button>\n )}\n </div>\n </div>\n {type === 'ls' && (\n <button class={plusMinusClass} onClick={handlePlus} disabled={disabled}>\n <ls-icon id='buttonIcon' name='plus-sm'></ls-icon>\n </button>\n )}\n </host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DY_A9zAm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-number-input/ls-number-input.css?tag=ls-number-input&encapsulation=shadow","src/components/ls-formfield/inputs/ls-number-input/ls-number-input.tsx"],"sourcesContent":["* {\n box-sizing: border-box;\n font-family:\n 'IBM Plex Sans',\n sans-serif;\n margin: 0;\n}\n\n.host {\n display: flex;\n width: 100%;\n padding: 0.25rem;\n align-items: flex-start;\n gap: 0.25rem;\n border-radius: 0.625rem;\n border: 1px solid var(--Grey-20, #edeff2);\n background: var(--Grey-10, #f7f8fa);\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n#fieldIcon {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0.75rem;\n color: var(--gray-80);\n}\n\n#fieldIconDisabled {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0.75rem;\n color: var(--gray-60);\n}\n\n#password-icon {\n padding-right: 0.25rem;\n}\n\n.icon-input {\n padding-left: 2.5rem !important;\n}\n\n.button-input {\n padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n padding-right: 4rem !important;\n}\n\n.input-basic {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: 0.5rem 0.75rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.5rem;\n /* Shadow/sm /\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n / text-sm/leading-5/font-regular /\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n}\n\n.input-ls {\n display: flex;\n width: 100%;\n height: 1.75rem;\n padding: 0 0.5rem;\n align-items: center;\n gap: 0.5rem;\n align-self: stretch;\n border-radius: 0.375rem;\n / Shadow/sm /\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n / text-sm/leading-5/font-regular */\n font-size: 0.875rem;\n font-style: normal;\n font-weight: 400;\n\n\n}\n\n.input-ls::-webkit-outer-spin-button,\n.input-ls::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.input-ls {\n -moz-appearance: textfield;\n}\n\ninput-base:active:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\ninput:focus:not(:disabled) {\n outline: 1px solid var(--Legalesign-Blue-60, #4456f6);\n box-shadow:\n 0px 0px 3px 0px rgba(0, 15, 153, 0.25),\n 0px 0px 2px 0px rgba(0, 15, 153, 0.06),\n 0px 0px 0px 4px #9dc3fc;\n}\n\n.default {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-100);\n}\n\n.default:hover {\n border: 1px solid var(--gray-50, #d8d9dc);\n background: var(--White, #fff);\n color: var(--gray-110);\n}\n\n.disabled {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--gray-10, #f7f8fa);\n color: var(--gray-60);\n cursor: not-allowed;\n}\n\n.display-only {\n border: 1px solid var(--gray-40, #d8d9dc);\n background: var(--gray-10, #f7f8fa);\n color: var(--gray-100);\n cursor: not-allowed;\n}\n\n.invalid {\n border: 1px solid var(--red-40, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.invalid:hover {\n border: 1px solid var(--red-50, #ffa19e);\n background: var(--White, #fff);\n color: var(--Red-100, #7a1714);\n}\n\n.valid {\n border: 1px solid var(--green-40, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n border: 1px solid var(--green-50, #72f0c2);\n background: var(--White, #fff);\n color: var(--Green-100, #125241);\n}\n\n.right-items {\n position: absolute;\n padding: 0.25rem;\n height: 36px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n}\n\n#invalidIcon {\n margin: 0 0.5rem;\n color: var(--red-70);\n}\n\n#validIcon {\n margin: 0 0.5rem;\n color: var(--green-60);\n}\n\n.button {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--White, #fff);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-90);\n }\n}\n\n.button-disabled {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--gray-40, #D8D9DC);\n background: var(--gray-=10, #F7F8FA);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n cursor: not-allowed;\n\n #buttonIcon {\n color: var(--gray-70);\n }\n}\n\n.button:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-20, #edeff2);\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:active {\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n\n.button:focus {\n display: flex;\n height: 28px;\n width: 28px;\n padding: 0.25rem;\n justify-content: center;\n align-items: center;\n border-radius: 0.375rem;\n border: 1px solid var(--Primary-Blue-Light, #4456f6);\n background: var(--White, #fff);\n box-shadow:\n 0px 0px 4px 0px #c7ddff inset,\n 0px 0px 0px 4px #9dc3fc;\n\n #buttonIcon {\n color: var(--gray-100);\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'ls-number-input',\n styleUrl: 'ls-number-input.css',\n shadow: true,\n})\nexport class LsNumberInput {\n @Prop() type: 'basic' \| 'ls' = 'ls';\n @Prop() name: string;\n @Prop({mutable: true}) value: number = 0 ;\n @Prop() placeholder?: string;\n @Prop() aria?: string;\n @Prop() inputRef?: string;\n @Prop() disabled: boolean;\n @Prop() required: boolean;\n @Prop() valid: boolean;\n @Prop() dirty: boolean;\n @Prop() countMax: number;\n @Prop() buttonClick?: any;\n @Prop() buttonIcon?: Icon;\n @Prop() fieldIcon?: Icon;\n\n handleChange = (event) => {\n this.value = event.target.value;\n }\n\n private handlePlus = () => {\n this.value = this.value + 1;\n }\n\n private handleMinus = () => {\n this.value = this.value - 1;\n }\n\n render() {\n const {\n type,\n name,\n value,\n placeholder,\n aria,\n disabled,\n required,\n valid,\n dirty,\n buttonClick,\n buttonIcon,\n fieldIcon,\n handleChange,\n handleMinus,\n handlePlus,\n } = this;\n\n const inputClass = clsx(\n type === 'ls' ? 'input-ls' : 'input-basic',\n disabled\n ? 'disabled'\n : dirty && valid\n ? 'valid'\n : dirty && !valid\n ? 'invalid'\n : 'default',\n fieldIcon && 'icon-input',\n dirty && 'button-input',\n buttonIcon && 'button-input',\n buttonIcon && dirty && 'right-items-input',\n );\n\n const plusMinusClass = clsx(\n disabled ? 'button-disabled' : 'button'\n )\n\n return (\n <host class={type === 'ls' && 'host'}>\n {type === 'ls' && (\n <button class={plusMinusClass} onClick={() => handleMinus()} disabled={disabled}>\n <ls-icon id='buttonIcon' name='minus-sm'></ls-icon>\n </button>\n )}\n <div class='input-container'>\n {fieldIcon && (\n <ls-icon\n id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n name={fieldIcon}\n ></ls-icon>\n )}\n <input\n type='number'\n class={inputClass}\n id={name}\n name={name}\n value={value}\n placeholder={placeholder}\n aria-label={aria}\n required={required}\n disabled={disabled}\n onInput={(event) => handleChange(event)}\n />\n <div class='right-items'>\n {dirty && !disabled && (\n <ls-icon\n id={valid ? 'validIcon' : 'invalidIcon'}\n name={valid ? 'check-circle' : 'exclamation-circle'}\n ></ls-icon>\n )}\n {buttonIcon && type !== 'ls' && (\n <button class='button' onClick={buttonClick}>\n <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n </button>\n )}\n </div>\n </div>\n {type === 'ls' && (\n <button class={plusMinusClass} onClick={handlePlus} disabled={disabled}>\n <ls-icon id='buttonIcon' name='plus-sm'></ls-icon>\n </button>\n )}\n </host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CixKuBuL.js → p-DjavAQqZ.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
 const lsFieldFormatCss = ":host{display:flex;flex-direction:row}.ls-field-format-bar{display:flex;flex-direction:row;gap:0.5rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
@@ -72,6 +72,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsFieldFormat as L, defineCustomElement as d };
-//# sourceMappingURL=p-CixKuBuL.js.map
+//# sourceMappingURL=p-DjavAQqZ.js.map
-//# sourceMappingURL=p-CixKuBuL.js.map
+//# sourceMappingURL=p-DjavAQqZ.js.map

package/dist/components/{p-CixKuBuL.js.map → p-DjavAQqZ.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CixKuBuL.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,+6IAA+6I;;MCQ37I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;AAIxB,IAAA,QAAQ;AAOR,IAAA,MAAM;AAON,IAAA,MAAM;;;;AAKN,IAAA,KAAK,CAAC,IAAY,EAAA;AAChB,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QAEjB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAG;AACnD,YAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE;AACtE,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAoB,CAAC;AACtD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAEzB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACxC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC;aACpE,EACD,KAAK,EAAE,kBAAkB,EAAA,EAEzB,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAe,EAAA,OAAA,CAAA,EACpC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAyB,EAAA,iBAAA,CAAA,EACxD,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAiB,EAAA,SAAA,CAAA,EACxC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAmB,EAAA,WAAA,CAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,CACjC,EACT,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAW,CACjD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAA,CAAI,CACpD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC/B,aAAC,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjC,aAAC,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;aAC/B,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,GAAW,CAC9B,CACL,CACF,CACP,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,KAC1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EACrD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC;AACrE,aAAC,EACD,KAAK,EAAE,kBAAkB,EAAA,EAEzB,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAe,EAAA,OAAA,CAAA,EACpC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAyB,EAAA,iBAAA,CAAA,EACxD,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAiB,EAAA,SAAA,CAAA,EACxC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAmB,EAAA,WAAA,CAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,CACjC,CACL,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,IAAI,EACV,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,EAChC,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;AACpE,aAAC,EACD,KAAK,EAAE,kBAAkB,GACzB,CACE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC/B,aAAC,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjC,aAAC,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;aAC/B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAW,CAAA,CAC9B,CACL,CAWF,CACP,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-format/ls-field-format.css?tag=ls-field-format&encapsulation=shadow","src/components/ls-field-format/ls-field-format.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: row;\n}\n\n.ls-field-format-bar {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n}\n\n/* Global Styles /\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: fit-content;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n\n","import { Component, EventEmitter, Host, Prop, h, Element, Event } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-format',\n styleUrl: 'ls-field-format.css',\n shadow: true,\n})\nexport class LsFieldFormat {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n render() {\n return (\n <Host>\n {this.dataItem && this.dataItem.length > 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\" input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input width=\"30\" size={4} class={'has-leading-icon'} />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n </div>\n )}\n {this.dataItem && this.dataItem.length === 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n width=\"30\"\n size={4}\n value={this.dataItem[0].fontSize}\n onChange={input => {\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n\n {/ <select\n onChange={input => {\n this.alter({ align: (input.target as HTMLSelectElement).value });\n }}\n >\n <option value=\"left\">Left</option>\n <option value=\"center\">Center</option>\n <option value=\"right\">Right</option>\n </select> */}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DjavAQqZ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-format/ls-field-format.css?tag=ls-field-format&encapsulation=shadow","src/components/ls-field-format/ls-field-format.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: row;\n}\n\n.ls-field-format-bar {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n}\n\n/* Global Styles /\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: fit-content;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n}\n\n.button-group button {\n display: flex;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n min-height: unset;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n\n","import { Component, EventEmitter, Host, Prop, h, Element, Event } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-format',\n styleUrl: 'ls-field-format.css',\n shadow: true,\n})\nexport class LsFieldFormat {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n render() {\n return (\n <Host>\n {this.dataItem && this.dataItem.length > 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\" input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input width=\"30\" size={4} class={'has-leading-icon'} />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n </div>\n )}\n {this.dataItem && this.dataItem.length === 1 && (\n <div class={'ls-field-format-bar'}>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n <select\n onChange={input => {\n this.alter({ fontName: (input.target as HTMLSelectElement).value });\n }}\n class={'has-leading-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation sans\">Liberation Sans</option>\n <option value=\"courier\">Courier</option>\n <option value=\"helvetica\">Helvetica</option>\n <option value=\"verdana\">Verdana</option>\n </select>\n </div>\n <div class=\"input-wrapper\">\n <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n <input\n width=\"30\"\n size={4}\n value={this.dataItem[0].fontSize}\n onChange={input => {\n this.alter({ fontSize: (input.target as HTMLInputElement).value });\n }}\n class={'has-leading-icon'}\n />\n </div>\n <div class={'button-group'}>\n <button\n onClick={() => {\n this.alter({ align: 'left' });\n }}\n >\n <ls-icon name=\"menu-alt-2\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'center' });\n }}\n >\n <ls-icon name=\"menu-alt-5\"></ls-icon>\n </button>\n <button\n onClick={() => {\n this.alter({ align: 'right' });\n }}\n >\n <ls-icon name=\"menu-alt-3\"></ls-icon>\n </button>\n </div>\n\n {/ <select\n onChange={input => {\n this.alter({ align: (input.target as HTMLSelectElement).value });\n }}\n >\n <option value=\"left\">Left</option>\n <option value=\"center\">Center</option>\n <option value=\"right\">Right</option>\n </select> */}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-Cotorbsf.js → p-DoywjJAr.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-p3xY_X0j.js';
 const lsFieldPlacementCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
@@ -67,6 +67,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsFieldPlacement as L, defineCustomElement as d };
-//# sourceMappingURL=p-Cotorbsf.js.map
+//# sourceMappingURL=p-DoywjJAr.js.map
-//# sourceMappingURL=p-Cotorbsf.js.map
+//# sourceMappingURL=p-DoywjJAr.js.map

package/dist/components/{p-Cotorbsf.js.map → p-DoywjJAr.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-Cotorbsf.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-placement/ls-field-placement.css?tag=ls-field-placement&encapsulation=shadow","src/components/ls-field-placement/ls-field-placement.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n box-sizing: border-box;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.multi-button-group-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% /\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; / 120% /\n}\n\n.input-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n width: 9.313rem;\n max-width: 9.313rem;\n}\n\n/ Global Styles /\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n color: var(--gray-50, #d8d9dc);\n box-shadow: none;\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n width: 100%;\n}\n\n.button-group button {\n display: flex;\n width: 100%;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n background: var(--gray-10, #f7f8fa);\n cursor: not-allowed;\n color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-placement',\n styleUrl: 'ls-field-placement.css',\n shadow: true,\n})\nexport class LsFieldPlacement {\n @Prop({ mutable: true }) dataItem: LSApiElement \| LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n isSingle(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n if (this.isMultiple(this.dataItem)) {\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n } else {\n const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n this.dataItem = singleDiff.data as LSApiElement;\n this.mutate.emit([singleDiff]);\n this.update.emit([singleDiff]);\n }\n }\n\n render() {\n return (\n <Host>\n {this.isMultiple(this.dataItem) && (\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n />\n </div>\n </div>\n </div>\n )}\n {this.isSingle(this.dataItem) && (\n <div class={'field-set'}>\n {/ @Alex I couldn't get this to work?? Only Top and Left */}\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => this.alter({ left: 0 })}>\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.alter({ top: 0 })}>\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"top-location\"\n id=\"top-location\"\n value={this.dataItem?.top}\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n value={this.dataItem?.left}\n onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n width=\"30\"\n />\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button disabled>\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n </div>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DoywjJAr.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-placement/ls-field-placement.css?tag=ls-field-placement&encapsulation=shadow","src/components/ls-field-placement/ls-field-placement.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n position: relative;\n}\n\n* {\n margin: 0;\n box-sizing: border-box;\n}\n\n.field-set {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n}\n\n.ls-field-properties-section {\n display: flex;\n position: relative;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.multi-button-group-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n color: var(--gray-90, #5e6066);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.25rem; /* 142.857% /\n}\n\n.ls-field-properties-section-description {\n overflow: hidden;\n color: var(--gray-80, #6c6e73);\n text-overflow: ellipsis;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 0.75rem; / 120% /\n}\n\n.input-row {\n display: flex;\n gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n width: 9.313rem;\n max-width: 9.313rem;\n}\n\n/ Global Styles /\n\np {\n color: var(--gray-80, #6c6e73);\n font-family: var(--font-family);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n}\n\na {\n color: var(--primary-60, #4456f6);\n font-size: var(--text-sm);\n font-style: normal;\n font-weight: 400;\n line-height: var(--text-sm-line-height);\n cursor: pointer;\n}\n\na:hover {\n text-decoration: underline;\n color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n all: unset;\n}\n\nselect {\n appearance: none;\n height: 36px;\n}\n\n.input-wrapper {\n position: relative;\n width: 100%;\n}\n\n#selectorIcon {\n position: absolute;\n top: 50%;\n right: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n position: absolute;\n top: 50%;\n left: 0.675rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n border: 1px solid var(--gray-40, #d8d9dc);\n box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n padding: 0.5rem 0.75rem;\n font-family: var(--font-family);\n font-size: var(--text-sm);\n border-radius: 0.5rem;\n color: var(--gray-100, #45484d);\n font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n border-color: var(--gray-50, #c8c9cc);\n background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n border-color: var(--primary-60, #4456f6);\n background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n background-color: var(--gray-10, #f7f8fa);\n color: var(--gray-50, #d8d9dc);\n box-shadow: none;\n}\n\ninput[type='checkbox'] {\n appearance: none;\n position: relative;\n height: 1rem;\n width: 1rem;\n padding: 0.25rem;\n border-radius: var(--radius-sm);\n border: 1px solid #d1d5db;\n background-color: #ffffff;\n cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n background-color: var(--primary-60, #4456f6);\n border: none;\n}\n\ninput[type='checkbox']:checked::after {\n content: '';\n position: absolute;\n top: 45%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n width: 0.5rem;\n height: 0.25rem;\n border-bottom: 0.125rem solid white;\n border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.5rem;\n height: 0.125rem;\n background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n background-color: var(--primary-70, #2134dc);\n border: none;\n}\n\ninput[type='checkbox']:hover {\n border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n outline: none;\n box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n background-color: #f3f4f6;\n outline: none;\n cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n background-color: #e5e7eb;\n border: none;\n outline: none;\n cursor: not-allowed;\n}\n\n.checkbox-container {\n display: flex;\n gap: 0.5rem;\n width: 100%;\n}\n\n.checkbox-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.form-label {\n color: var(--gray-100, #45484d);\n font-size: 1rem;\n font-style: normal;\n font-weight: 500;\n line-height: 1.5rem;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: 100%;\n}\n\n.loading-box {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100vh;\n color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n border: 0;\n appearance: button;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n background-color: var(--primary-60, #4456f6);\n color: white;\n text-transform: capitalize;\n min-height: 2.25rem;\n min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n border: 1px solid var(--gray-40, #d8d9dc);\n background-color: white;\n color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n border: 1px solid var(--gray-50, #c8c9cc);\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n display: flex;\n border-radius: 0.5rem;\n border: 1px solid var(--gray-30, #e0e2e5);\n background: var(--white, #ffffff);\n overflow: clip;\n width: 100%;\n}\n\n.button-group button {\n display: flex;\n width: 100%;\n background: transparent;\n border-radius: unset;\n padding: 0.25rem 0.75rem;\n min-width: 2.156rem;\n color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n background: var(--gray-10, #f7f8fa);\n cursor: not-allowed;\n color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-field-placement',\n styleUrl: 'ls-field-placement.css',\n shadow: true,\n})\nexport class LsFieldPlacement {\n @Prop({ mutable: true }) dataItem: LSApiElement \| LSApiElement[];\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n isSingle(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement {\n return (dt as LSApiElement[]).length === undefined;\n }\n\n isMultiple(dt: LSApiElement \| LSApiElement[]): dt is LSApiElement[] {\n return typeof (dt as LSApiElement[]).length === 'number';\n }\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n if (this.isMultiple(this.dataItem)) {\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n } else {\n const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent;\n this.dataItem = singleDiff.data as LSApiElement;\n this.mutate.emit([singleDiff]);\n this.update.emit([singleDiff]);\n }\n }\n\n render() {\n return (\n <Host>\n {this.isMultiple(this.dataItem) && (\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n />\n </div>\n </div>\n </div>\n )}\n {this.isSingle(this.dataItem) && (\n <div class={'field-set'}>\n {/ @Alex I couldn't get this to work?? Only Top and Left */}\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Alignment</p>\n <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n </div>\n <div class={'multi-button-group-row'}>\n <div class={'button-group'}>\n <button onClick={() => this.alter({ left: 0 })}>\n <ls-icon name=\"field-alignment-left\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-centre\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-right\"></ls-icon>\n </button>\n </div>\n <div class={'button-group'}>\n <button onClick={() => this.alter({ top: 0 })}>\n <ls-icon name=\"field-alignment-top\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-middle\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Location</p>\n <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"top-location\"\n id=\"top-location\"\n value={this.dataItem?.top}\n onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n <input\n type=\"number\"\n class={'has-leading-icon'}\n aria=\"left-location\"\n id=\"left-location\"\n value={this.dataItem?.left}\n onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n width=\"30\"\n />\n </div>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Distribution</p>\n <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n </div>\n <div class={'button-group'}>\n <button disabled>\n <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n </button>\n <button disabled>\n <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n </button>\n </div>\n </div>\n\n <div class={'ls-field-properties-section'}>\n <div class={'ls-field-properties-section-text'}>\n <p class={'ls-field-properties-section-title'}>Gap</p>\n <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n </div>\n <div class={'input-row'}>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n </div>\n <div class={'input-wrapper'}>\n <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n </div>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CoH616os.js → p-Dsf8KDrt.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$3 } from './p-CixKuBuL.js';
-import { d as defineCustomElement$2 } from './p-BFSBsh85.js';
-import { d as defineCustomElement$1 } from './p-DOULSSR_.js';
+import { d as defineCustomElement$3 } from './p-DjavAQqZ.js';
+import { d as defineCustomElement$2 } from './p-p3xY_X0j.js';
+import { d as defineCustomElement$1 } from './p-CuNrTyGb.js';
 const lsToolbarCss = ":host{position:relative;display:flex;width:100%;align-items:center;justify-content:center}.rowbox{position:absolute;top:1rem;display:flex;padding:0.5rem;justify-content:center;align-items:center;gap:0.5rem;width:fit-content;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);margin-bottom:1rem;z-index:200}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
@@ -43,7 +43,7 @@ const LsToolbar = /*@__PURE__*/ proxyCustomElement(class LsToolbar extends H {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: 'c43519161f0c44b7f06b5b4e2a14bd81d83ecfdc' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: 'e20ff476ede1359973876658c5e70fd6039b2e3d' })));
+        return (h(Host, { key: '23262246e33898029d23aeb17b0404eaf438e55c' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '415c3c763e3f42f2e7375bcc9c74ebf777fce30a' })));
     }
     static get style() { return lsToolbarCss; }
 }, [257, "ls-toolbar", {
@@ -82,6 +82,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { LsToolbar as L, defineCustomElement as d };
-//# sourceMappingURL=p-CoH616os.js.map
+//# sourceMappingURL=p-Dsf8KDrt.js.map
-//# sourceMappingURL=p-CoH616os.js.map
+//# sourceMappingURL=p-Dsf8KDrt.js.map