legalesign-document-viewer 1.0.13 → 1.0.15

package/dist/components/{p-C2JalniE.js.map → p-B5lJU9KU.js.map}

@@ -1 +1 @@
-{"file":"p-C2JalniE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-keyboard-shortcuts/ls-keyboard-shortcuts.scss?tag=ls-keyboard-shortcuts&encapsulation=shadow","src/components/ls-keyboard-shortcuts/ls-keyboard-shortcuts.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  pointer-events: none;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.ls-dv-keyboard-shortcuts-tooltip {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: 0.625rem;\n  background: $gray-100;\n  color: $white;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n  padding: 1rem;\n  width: fit-content;\n  white-space: nowrap;\n  z-index: 1000;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);\n}\n\n.ls-dv-tooltip-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0.5rem;\n}\n\n.ls-dv-shortcuts-table {\n  border-spacing: 0;\n\n  tr {\n    td {\n      padding: 0.2rem 0;\n    }\n  }\n}\n\n.ls-dv-shortcut-keys {\n  font-weight: 500;\n  padding-right: 1rem;\n  font-family: monospace;\n  font-size: 0.7rem;\n  color: $gray-30;\n}\n\n.ls-dv-shortcut-label {\n  color: $white;\n}\n\n#arrow {\n  display: none;\n}\n","import { Component, h } from '@stencil/core';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-keyboard-shortcuts',\n  styleUrl: 'ls-keyboard-shortcuts.scss',\n  shadow: true,\n})\nexport class LsKeyboardShortcuts {\n\n  private isMac = navigator.platform?.toLowerCase().includes('mac') || navigator.userAgent?.toLowerCase().includes('mac');\n\n  private get mod() {\n    return this.isMac ? '⌘' : 'Ctrl';\n  }\n\n  render() {\n    const shortcuts = [\n      { keys: `${this.mod} + C`, label: dvI18n.t('shortcuts.copy') },\n      { keys: `${this.mod} + V`, label: dvI18n.t('shortcuts.paste') },\n      { keys: `${this.mod} + X`, label: dvI18n.t('shortcuts.cut') },\n      { keys: `${this.mod} + A`, label: dvI18n.t('shortcuts.selectall') },\n      { keys: `${this.mod} + Z`, label: dvI18n.t('shortcuts.undo') },\n      { keys: this.isMac ? '⌘ + ⇧ + Z' : 'Ctrl + Y', label: dvI18n.t('shortcuts.redo') },\n      { keys: 'D', label: dvI18n.t('shortcuts.duplicate') },\n      { keys: '⌫', label: dvI18n.t('shortcuts.delete') },\n      { keys: '↑ ↓ ← →', label: dvI18n.t('shortcuts.move') },\n      { keys: `${this.mod} + Scroll`, label: dvI18n.t('shortcuts.zoom') },\n      { keys: 'Esc', label: dvI18n.t('shortcuts.deselect') },\n    ];\n\n    return (\n      <div class={'ls-dv-keyboard-shortcuts-tooltip'}>\n        <div id=\"arrow\"></div>\n        <p class=\"ls-dv-tooltip-title\">{dvI18n.t('shortcuts.title')}</p>\n        <table class=\"ls-dv-shortcuts-table\">\n          {shortcuts.map(s => (\n            <tr>\n              <td class=\"ls-dv-shortcut-keys\">{s.keys}</td>\n              <td class=\"ls-dv-shortcut-label\">{s.label}</td>\n            </tr>\n          ))}\n        </table>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B5lJU9KU.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-keyboard-shortcuts/ls-keyboard-shortcuts.scss?tag=ls-keyboard-shortcuts&encapsulation=shadow","src/components/ls-keyboard-shortcuts/ls-keyboard-shortcuts.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  pointer-events: none;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.ls-dv-keyboard-shortcuts-tooltip {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: 0.625rem;\n  background: $gray-100;\n  color: $white;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n  padding: 1rem;\n  width: fit-content;\n  white-space: nowrap;\n  z-index: 1000;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);\n}\n\n.ls-dv-tooltip-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0.5rem;\n}\n\n.ls-dv-shortcuts-table {\n  border-spacing: 0;\n\n  tr {\n    td {\n      padding: 0.2rem 0;\n    }\n  }\n}\n\n.ls-dv-shortcut-keys {\n  font-weight: 500;\n  padding-right: 1rem;\n  font-family: monospace;\n  font-size: 0.7rem;\n  color: $gray-30;\n}\n\n.ls-dv-shortcut-label {\n  color: $white;\n}\n\n#arrow {\n  display: none;\n}\n","import { Component, h } from '@stencil/core';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-keyboard-shortcuts',\n  styleUrl: 'ls-keyboard-shortcuts.scss',\n  shadow: true,\n})\nexport class LsKeyboardShortcuts {\n\n  private isMac = navigator.platform?.toLowerCase().includes('mac') || navigator.userAgent?.toLowerCase().includes('mac');\n\n  private get mod() {\n    return this.isMac ? '⌘' : 'Ctrl';\n  }\n\n  render() {\n    const shortcuts = [\n      { keys: `${this.mod} + C`, label: dvI18n.t('shortcuts.copy') },\n      { keys: `${this.mod} + V`, label: dvI18n.t('shortcuts.paste') },\n      { keys: `${this.mod} + X`, label: dvI18n.t('shortcuts.cut') },\n      { keys: `${this.mod} + A`, label: dvI18n.t('shortcuts.selectall') },\n      { keys: `${this.mod} + Z`, label: dvI18n.t('shortcuts.undo') },\n      { keys: this.isMac ? '⌘ + ⇧ + Z' : 'Ctrl + Y', label: dvI18n.t('shortcuts.redo') },\n      { keys: 'D', label: dvI18n.t('shortcuts.duplicate') },\n      { keys: '⌫', label: dvI18n.t('shortcuts.delete') },\n      { keys: '↑ ↓ ← →', label: dvI18n.t('shortcuts.move') },\n      { keys: `${this.mod} + Scroll`, label: dvI18n.t('shortcuts.zoom') },\n      { keys: 'Esc', label: dvI18n.t('shortcuts.deselect') },\n    ];\n\n    return (\n      <div class={'ls-dv-keyboard-shortcuts-tooltip'}>\n        <div id=\"arrow\"></div>\n        <p class=\"ls-dv-tooltip-title\">{dvI18n.t('shortcuts.title')}</p>\n        <table class=\"ls-dv-shortcuts-table\">\n          {shortcuts.map(s => (\n            <tr>\n              <td class=\"ls-dv-shortcut-keys\">{s.keys}</td>\n              <td class=\"ls-dv-shortcut-label\">{s.label}</td>\n            </tr>\n          ))}\n        </table>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-RceAr_AQ.js → p-BDYqYoIy.js}

@@ -1,5 +1,5 @@
 import { t as transformTag, p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-DIvmRYeB.js';
-import { d as dvI18n } from './p-Al32p_JM.js';
+import { d as dvI18n } from './p-DU-efe4l.js';
 import { d as defineCustomElement$2 } from './p-BHeJScTh.js';
 import { d as defineCustomElement$1 } from './p-XnnsjcVC.js';
 
@@ -129,6 +129,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldAlignment as L, defineCustomElement as d };
-//# sourceMappingURL=p-RceAr_AQ.js.map
+//# sourceMappingURL=p-BDYqYoIy.js.map
 
-//# sourceMappingURL=p-RceAr_AQ.js.map
+//# sourceMappingURL=p-BDYqYoIy.js.map

package/dist/components/{p-RceAr_AQ.js.map → p-BDYqYoIy.js.map}

@@ -1 +1 @@
-{"file":"p-RceAr_AQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-alignment/ls-field-alignment.scss?tag=ls-field-alignment&encapsulation=shadow","src/components/ls-field-alignment/ls-field-alignment.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.ls-dv-field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-dv-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.ls-dv-row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.ls-dv-multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-dv-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-dv-field-properties-section-title {\n  color: $gray-90;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-dv-field-properties-section-description {\n  overflow: hidden;\n  color: $gray-80;\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-dv-input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-dv-input-row .ls-dv-input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-50;\n}\n\n\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: $gray-50;\n  background-color: $white;\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 $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\n  color: $gray-50;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n  width: 100%;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:disabled {\n  background: $gray-10;\n  cursor: not-allowed;\n  color: $gray-50;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { dvI18n } from '../../i18n/i18n';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-alignment',\n  styleUrl: 'ls-field-alignment.scss',\n  shadow: true,\n})\nexport class LsFieldAlignment {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\n  @Prop() readonly: boolean = false;\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  // 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  }\n\n  // Get the top-left-most control (anchor for all alignments)\n  left() {\n    const alignTo = Math.min(...this.dataItem.map(c => c.left));\n    this.alter({ left: alignTo });\n  }\n\n  center() {\n    const minLeft = Math.min(...this.dataItem.map(c => c.left));\n    const maxRight = Math.max(...this.dataItem.map(c => c.left + c.width));\n    const centerX = (minLeft + maxRight) / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = Math.round(centerX - c.width / 2);\n      return {\n        action: 'update',\n        data: { ...c, left: newLeft } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  right() {\n    const alignTo = Math.max(...this.dataItem.map(c => c.left + c.width));\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = alignTo - c.width;\n      return {\n        action: 'update',\n        data: { ...c, left: newLeft } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  top() {\n    const alignTo = Math.min(...this.dataItem.map(c => c.top));\n    this.alter({ top: alignTo });\n  }\n\n  middle() {\n    const minTop = Math.min(...this.dataItem.map(c => c.top));\n    const maxBottom = Math.max(...this.dataItem.map(c => c.top + c.height));\n    const centerY = (minTop + maxBottom) / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = Math.round(centerY - c.height / 2);\n      return {\n        action: 'update',\n        data: { ...c, top: newTop } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  bottom() {\n    const alignTo = Math.max(...this.dataItem.map(c => c.top + c.height));\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = alignTo - c.height;\n      return {\n        action: 'update',\n        data: { ...c, top: newTop } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  componentDidLoad() {\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-dv-field-properties-section'}>\n          <div class={'ls-dv-field-properties-section-text'}>\n            <p class={'ls-dv-field-properties-section-title'}>{dvI18n.t('placement.alignment')}</p>\n            <p class={'ls-dv-field-properties-section-description'}>{dvI18n.t('placement.alignmentdescription')}</p>\n          </div>\n          <div class={'ls-dv-multi-button-group-row'}>\n            <div class={'ls-dv-button-group'}>\n              <button onClick={() => this.left()} aria-label={dvI18n.t('alignment.alignleft')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignleft')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-left-icon\"></ls-icon>\n              </button>\n              <button onClick={() => this.center()} aria-label={dvI18n.t('alignment.aligncenter')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.aligncenter')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-centre-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.right();\n                }}\n                aria-label={dvI18n.t('alignment.alignright')}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignright')}\n                disabled={this.readonly}\n              >\n                <ls-icon name=\"field-alignment-right-icon\"></ls-icon>\n              </button>\n            </div>\n            <div class={'ls-dv-button-group'}>\n              <button onClick={() => this.top()} aria-label={dvI18n.t('alignment.aligntop')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.aligntop')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-top-icon\"></ls-icon>\n              </button>\n              <button onClick={() => this.middle()} aria-label={dvI18n.t('alignment.alignmiddle')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignmiddle')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-middle-icon\"></ls-icon>\n              </button>\n              <button onClick={() => this.bottom()} aria-label={dvI18n.t('alignment.alignbottom')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignbottom')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-bottom-icon\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <slot></slot>\n        <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BDYqYoIy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-alignment/ls-field-alignment.scss?tag=ls-field-alignment&encapsulation=shadow","src/components/ls-field-alignment/ls-field-alignment.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.ls-dv-field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-dv-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.ls-dv-row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.ls-dv-multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-dv-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-dv-field-properties-section-title {\n  color: $gray-90;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-dv-field-properties-section-description {\n  overflow: hidden;\n  color: $gray-80;\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-dv-input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-dv-input-row .ls-dv-input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-50;\n}\n\n\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: $gray-50;\n  background-color: $white;\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 $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\n  color: $gray-50;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n  width: 100%;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:disabled {\n  background: $gray-10;\n  cursor: not-allowed;\n  color: $gray-50;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { dvI18n } from '../../i18n/i18n';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-alignment',\n  styleUrl: 'ls-field-alignment.scss',\n  shadow: true,\n})\nexport class LsFieldAlignment {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\n  @Prop() readonly: boolean = false;\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  // 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  }\n\n  // Get the top-left-most control (anchor for all alignments)\n  left() {\n    const alignTo = Math.min(...this.dataItem.map(c => c.left));\n    this.alter({ left: alignTo });\n  }\n\n  center() {\n    const minLeft = Math.min(...this.dataItem.map(c => c.left));\n    const maxRight = Math.max(...this.dataItem.map(c => c.left + c.width));\n    const centerX = (minLeft + maxRight) / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = Math.round(centerX - c.width / 2);\n      return {\n        action: 'update',\n        data: { ...c, left: newLeft } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  right() {\n    const alignTo = Math.max(...this.dataItem.map(c => c.left + c.width));\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = alignTo - c.width;\n      return {\n        action: 'update',\n        data: { ...c, left: newLeft } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  top() {\n    const alignTo = Math.min(...this.dataItem.map(c => c.top));\n    this.alter({ top: alignTo });\n  }\n\n  middle() {\n    const minTop = Math.min(...this.dataItem.map(c => c.top));\n    const maxBottom = Math.max(...this.dataItem.map(c => c.top + c.height));\n    const centerY = (minTop + maxBottom) / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = Math.round(centerY - c.height / 2);\n      return {\n        action: 'update',\n        data: { ...c, top: newTop } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  bottom() {\n    const alignTo = Math.max(...this.dataItem.map(c => c.top + c.height));\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = alignTo - c.height;\n      return {\n        action: 'update',\n        data: { ...c, top: newTop } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  componentDidLoad() {\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-dv-field-properties-section'}>\n          <div class={'ls-dv-field-properties-section-text'}>\n            <p class={'ls-dv-field-properties-section-title'}>{dvI18n.t('placement.alignment')}</p>\n            <p class={'ls-dv-field-properties-section-description'}>{dvI18n.t('placement.alignmentdescription')}</p>\n          </div>\n          <div class={'ls-dv-multi-button-group-row'}>\n            <div class={'ls-dv-button-group'}>\n              <button onClick={() => this.left()} aria-label={dvI18n.t('alignment.alignleft')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignleft')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-left-icon\"></ls-icon>\n              </button>\n              <button onClick={() => this.center()} aria-label={dvI18n.t('alignment.aligncenter')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.aligncenter')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-centre-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.right();\n                }}\n                aria-label={dvI18n.t('alignment.alignright')}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignright')}\n                disabled={this.readonly}\n              >\n                <ls-icon name=\"field-alignment-right-icon\"></ls-icon>\n              </button>\n            </div>\n            <div class={'ls-dv-button-group'}>\n              <button onClick={() => this.top()} aria-label={dvI18n.t('alignment.aligntop')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.aligntop')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-top-icon\"></ls-icon>\n              </button>\n              <button onClick={() => this.middle()} aria-label={dvI18n.t('alignment.alignmiddle')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignmiddle')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-middle-icon\"></ls-icon>\n              </button>\n              <button onClick={() => this.bottom()} aria-label={dvI18n.t('alignment.alignbottom')} data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('alignment.alignbottom')} disabled={this.readonly}>\n                <ls-icon name=\"field-alignment-bottom-icon\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <slot></slot>\n        <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DpA4TE1Q.js → p-BEQj5_wz.js}

@@ -1,26 +1,26 @@
 import { t as transformTag, p as proxyCustomElement, H, h, a as Host } from './p-DIvmRYeB.js';
-import { d as defineCustomElement$n } from './p-BKbGzLae.js';
+import { d as defineCustomElement$n } from './p-CxBIa83N.js';
 import { d as defineCustomElement$m } from './p-PwhF9_IW.js';
-import { d as defineCustomElement$l } from './p-XbFErpli.js';
-import { d as defineCustomElement$k } from './p-CTMHCecN.js';
-import { d as defineCustomElement$j } from './p-C-vCe5Wm.js';
-import { d as defineCustomElement$i } from './p-gvdT4if6.js';
-import { d as defineCustomElement$h } from './p-DGQDJCUG.js';
-import { d as defineCustomElement$g } from './p-BTcdVmkv.js';
-import { d as defineCustomElement$f } from './p-CyHkY6Ep.js';
-import { d as defineCustomElement$e } from './p-eWb3jk9k.js';
+import { d as defineCustomElement$l } from './p-p5JEvsTq.js';
+import { d as defineCustomElement$k } from './p-DsIip0mA.js';
+import { d as defineCustomElement$j } from './p-Ds2yihe8.js';
+import { d as defineCustomElement$i } from './p-DtIt9SZR.js';
+import { d as defineCustomElement$h } from './p-l5DR81kr.js';
+import { d as defineCustomElement$g } from './p-CZ9xdGQd.js';
+import { d as defineCustomElement$f } from './p-BHt-_hqQ.js';
+import { d as defineCustomElement$e } from './p-BLZyVIno.js';
 import { d as defineCustomElement$d } from './p-CzkJGTTH.js';
 import { d as defineCustomElement$c } from './p-BHeJScTh.js';
 import { d as defineCustomElement$b } from './p-Brq7Gduk.js';
-import { d as defineCustomElement$a } from './p-DaQLveiE.js';
+import { d as defineCustomElement$a } from './p-CKcOLluN.js';
 import { d as defineCustomElement$9 } from './p-CIV0VNix.js';
 import { d as defineCustomElement$8 } from './p-Dk-MsCKT.js';
-import { d as defineCustomElement$7 } from './p-DmrshWtQ.js';
+import { d as defineCustomElement$7 } from './p-DYVjHU88.js';
 import { d as defineCustomElement$6 } from './p-IqyK8xOq.js';
 import { d as defineCustomElement$5 } from './p-CF40f_5M.js';
 import { d as defineCustomElement$4 } from './p-CM71cfRg.js';
 import { d as defineCustomElement$3 } from './p-t_ow9YJD.js';
-import { d as defineCustomElement$2 } from './p-BddWzZuD.js';
+import { d as defineCustomElement$2 } from './p-T_Emh7AC.js';
 import { d as defineCustomElement$1 } from './p-XnnsjcVC.js';
 
 const lsFieldPropertiesDateCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem;width:100%}.ls-dv-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.625rem;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, #ffffff)}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, #ffffff)}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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}button{display:flex;gap:0.5rem;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;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-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, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
@@ -178,6 +178,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesDate as L, defineCustomElement as d };
-//# sourceMappingURL=p-DpA4TE1Q.js.map
+//# sourceMappingURL=p-BEQj5_wz.js.map
 
-//# sourceMappingURL=p-DpA4TE1Q.js.map
+//# sourceMappingURL=p-BEQj5_wz.js.map

package/dist/components/{p-DpA4TE1Q.js.map → p-BEQj5_wz.js.map}

@@ -1 +1 @@
-{"file":"p-DpA4TE1Q.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,u2JAAu2J,CAAC;;MCSn4J,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;;;AACxB,IAAA,QAAQ;IACR,KAAK,GAAgB,EAAE;IACvB,QAAQ,GAAY,KAAK;IACzB,aAAa,GAAW,IAAI;IAEpC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,SAAS,EAAA,EAC3C,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAI,CAAA,EAC5H,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC9E,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,YAAY,EAAA,EAC9C,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CACrE,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,WAAW,EAAA,EAC7C,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CACpE,CACwB,EAChC,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CAChE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-date/ls-field-properties-date.scss?tag=ls-field-properties-date&encapsulation=shadow","src/components/ls-field-properties-date/ls-field-properties-date.tsx"],"sourcesContent":[":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.ls-dv-field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n  width: 100%;\n}\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-secondary {\n  border: 1px solid $gray-50;\n  background: $white;\n  color: $gray-90;\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.ls-dv-secondary:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-destructive {\n  border: 1px solid $red-60;\n  background-color: white;\n  color: $red-60;\n}\n\nbutton.ls-dv-destructive:hover {\n  border: 1px solid $red-70;\n  background: $red-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { LSApiRole } from '../../types/LSApiRole';\n\n@Component({\n  tag: 'ls-field-properties-date',\n  styleUrl: 'ls-field-properties-date.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\n  @Prop() dataItem: LSApiElement;\n  @Prop() roles: LSApiRole[] = [];\n  @Prop() readonly: boolean = false;\n  @Prop() filtertoolbox: string = null;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'ls-dv-field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} roles={this.roles} readonly={this.readonly} filtertoolbox={this.filtertoolbox} />\n            <ls-field-properties-advanced dataItem={this.dataItem} readonly={this.readonly} />\n          </div>\n          <div class={'ls-dv-field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} readonly={this.readonly} />\n          </div>\n          <div class={'ls-dv-field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} readonly={this.readonly} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} readonly={this.readonly} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BEQj5_wz.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,u2JAAu2J,CAAC;;MCSn4J,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;;;AACxB,IAAA,QAAQ;IACR,KAAK,GAAgB,EAAE;IACvB,QAAQ,GAAY,KAAK;IACzB,aAAa,GAAW,IAAI;IAEpC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,SAAS,EAAA,EAC3C,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAI,CAAA,EAC5H,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC9E,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,YAAY,EAAA,EAC9C,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CACrE,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,WAAW,EAAA,EAC7C,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CACpE,CACwB,EAChC,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CAChE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-date/ls-field-properties-date.scss?tag=ls-field-properties-date&encapsulation=shadow","src/components/ls-field-properties-date/ls-field-properties-date.tsx"],"sourcesContent":[":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.ls-dv-field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n  width: 100%;\n}\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-secondary {\n  border: 1px solid $gray-50;\n  background: $white;\n  color: $gray-90;\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.ls-dv-secondary:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-destructive {\n  border: 1px solid $red-60;\n  background-color: white;\n  color: $red-60;\n}\n\nbutton.ls-dv-destructive:hover {\n  border: 1px solid $red-70;\n  background: $red-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { LSApiRole } from '../../types/LSApiRole';\n\n@Component({\n  tag: 'ls-field-properties-date',\n  styleUrl: 'ls-field-properties-date.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\n  @Prop() dataItem: LSApiElement;\n  @Prop() roles: LSApiRole[] = [];\n  @Prop() readonly: boolean = false;\n  @Prop() filtertoolbox: string = null;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'ls-dv-field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} roles={this.roles} readonly={this.readonly} filtertoolbox={this.filtertoolbox} />\n            <ls-field-properties-advanced dataItem={this.dataItem} readonly={this.readonly} />\n          </div>\n          <div class={'ls-dv-field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} readonly={this.readonly} />\n          </div>\n          <div class={'ls-dv-field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} readonly={this.readonly} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} readonly={this.readonly} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CyHkY6Ep.js → p-BHt-_hqQ.js}

@@ -1,5 +1,5 @@
 import { t as transformTag, p as proxyCustomElement, H, h, a as Host } from './p-DIvmRYeB.js';
-import { d as dvI18n } from './p-Al32p_JM.js';
+import { d as dvI18n } from './p-DU-efe4l.js';
 
 const lsFieldPropertiesContainerCss = () => `*{margin:0;box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:calc(100% - 7.25rem);position:relative}.ls-dv-tabs-container{display:grid;width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-dv-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6f7176);text-transform:capitalize}.ls-dv-tab.ls-dv-active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-dv-tab:not(.ls-dv-active):hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #edeff2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.ls-dv-scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:100%}`;
 
@@ -44,6 +44,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesContainer as L, defineCustomElement as d };
-//# sourceMappingURL=p-CyHkY6Ep.js.map
+//# sourceMappingURL=p-BHt-_hqQ.js.map
 
-//# sourceMappingURL=p-CyHkY6Ep.js.map
+//# sourceMappingURL=p-BHt-_hqQ.js.map

package/dist/components/{p-CyHkY6Ep.js.map → p-BHt-_hqQ.js.map}

@@ -1 +1 @@
-{"file":"p-CyHkY6Ep.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,MAAM,CAAC,g+BAAg+B,CAAC;;MCSjgC,0BAA0B,iBAAAA,kBAAA,CAAA,MAAA,0BAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC7B,IAAA,QAAQ;IACR,IAAI,GAAa,EAAE;AACY,IAAA,WAAW;IAElD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EAAE,EACnG,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAChB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,WAAW,GAAG,wBAAwB,GAAG,WAAW,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IACtH,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAA,CAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CACxC,CACV,CAAC,CACE,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAS,CAAA,CACjC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-container/ls-field-properties-container.scss?tag=ls-field-properties-container&encapsulation=shadow","src/components/ls-field-properties-container/ls-field-properties-container.tsx"],"sourcesContent":["* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: calc(100% - 7.25rem);\n  position: relative;\n}\n\n.ls-dv-tabs-container {\n  display: grid;\n  width: 100%;\n  gap: 0.125rem;\n  padding: 0.125rem;\n  border: 1px solid $gray-30;\n  border-radius: 0.75rem;\n  background: $white;\n}\n\n.ls-dv-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: $gray-80;\n  text-transform: capitalize;\n}\n\n.ls-dv-tab.ls-dv-active {\n  background: $primary-10;\n  color: $primary-60;\n}\n\n.ls-dv-tab:not(.ls-dv-active):hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid $gray-20;\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.ls-dv-scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-field-properties-container',\n  styleUrl: 'ls-field-properties-container.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesContainer {\n  @Prop() dataItem: LSApiElement;\n  @Prop() tabs: string[] = [];\n  @Prop({ mutable: true, reflect: true}) selectedTab: string;\n\n  componentWillLoad() {\n    if (!this.selectedTab) {\n      this.selectedTab = this.tabs[0] || '';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.length > 1 && (\n          <div class={'ls-dv-tabs-container'} style={{ gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` }}>\n            {this.tabs.map(tab => (\n              <button class={tab === this.selectedTab ? 'ls-dv-tab ls-dv-active' : 'ls-dv-tab'} onClick={() => (this.selectedTab = tab)}>\n                {dvI18n.t(`tabs.${tab}`, { defaultValue: tab })}\n              </button>\n            ))}\n          </div>\n        )}\n        <div class={'ls-dv-scrolling-container'}>\n          <slot name={this.selectedTab}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BHt-_hqQ.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,MAAM,CAAC,g+BAAg+B,CAAC;;MCSjgC,0BAA0B,iBAAAA,kBAAA,CAAA,MAAA,0BAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC7B,IAAA,QAAQ;IACR,IAAI,GAAa,EAAE;AACY,IAAA,WAAW;IAElD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EAAE,EACnG,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAChB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,WAAW,GAAG,wBAAwB,GAAG,WAAW,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IACtH,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAA,CAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CACxC,CACV,CAAC,CACE,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAS,CAAA,CACjC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-container/ls-field-properties-container.scss?tag=ls-field-properties-container&encapsulation=shadow","src/components/ls-field-properties-container/ls-field-properties-container.tsx"],"sourcesContent":["* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: calc(100% - 7.25rem);\n  position: relative;\n}\n\n.ls-dv-tabs-container {\n  display: grid;\n  width: 100%;\n  gap: 0.125rem;\n  padding: 0.125rem;\n  border: 1px solid $gray-30;\n  border-radius: 0.75rem;\n  background: $white;\n}\n\n.ls-dv-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: $gray-80;\n  text-transform: capitalize;\n}\n\n.ls-dv-tab.ls-dv-active {\n  background: $primary-10;\n  color: $primary-60;\n}\n\n.ls-dv-tab:not(.ls-dv-active):hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid $gray-20;\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.ls-dv-scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-field-properties-container',\n  styleUrl: 'ls-field-properties-container.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesContainer {\n  @Prop() dataItem: LSApiElement;\n  @Prop() tabs: string[] = [];\n  @Prop({ mutable: true, reflect: true}) selectedTab: string;\n\n  componentWillLoad() {\n    if (!this.selectedTab) {\n      this.selectedTab = this.tabs[0] || '';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.length > 1 && (\n          <div class={'ls-dv-tabs-container'} style={{ gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` }}>\n            {this.tabs.map(tab => (\n              <button class={tab === this.selectedTab ? 'ls-dv-tab ls-dv-active' : 'ls-dv-tab'} onClick={() => (this.selectedTab = tab)}>\n                {dvI18n.t(`tabs.${tab}`, { defaultValue: tab })}\n              </button>\n            ))}\n          </div>\n        )}\n        <div class={'ls-dv-scrolling-container'}>\n          <slot name={this.selectedTab}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-eWb3jk9k.js → p-BLZyVIno.js}

@@ -1,7 +1,7 @@
 import { t as transformTag, p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-DIvmRYeB.js';
 import { d as defaultRolePalette } from './p-BKrsDBDB.js';
 import { g as getFieldIcon } from './p-C5wLu85H.js';
-import { d as dvI18n } from './p-Al32p_JM.js';
+import { d as dvI18n } from './p-DU-efe4l.js';
 import { d as defineCustomElement$1 } from './p-BHeJScTh.js';
 
 const lsFieldTypeSelectCss = () => `:host{display:block;width:100%}*{margin:0}.ls-dv-fieldtype-dropdown{position:relative;width:100%}.ls-dv-fieldtype-header{border-radius:1rem;padding:0.25rem}.ls-dv-fieldtype-inner{border-radius:0.75rem;background:var(--white, #ffffff);display:flex;padding:0.25rem 0.25rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-dv-fieldtype-icon{display:flex;padding:0.25rem;align-items:center;border-radius:0.625rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-dv-fieldtype-name{flex:1;font-size:var(--text-sm);font-weight:400;color:var(--gray-100, #45484d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family);text-transform:capitalize}.ls-dv-fieldtype-btn{all:unset;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:0.625rem;border:1px solid var(--gray-40, #d8d9dc);background:var(--white, #ffffff);color:var(--gray-80, #6f7176);cursor:pointer;flex-shrink:0}.ls-dv-fieldtype-btn:hover{border-color:var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-fieldtype-list{position:absolute;top:calc(100% + 0.25rem);left:0;right:0;display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);z-index:100;max-height:15rem;overflow-y:auto}.ls-dv-fieldtype-item{display:flex;padding:0.5rem 0.75rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;border-radius:0.75rem;cursor:pointer}.ls-dv-fieldtype-item:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-fieldtype-item.ls-dv-selected,.ls-dv-fieldtype-item.ls-dv-selected:hover{background:var(--background-selected, var(--gray-10, #f7f8fa))}.ls-dv-fieldtype-item-icon{display:flex;align-items:center;flex-shrink:0}.ls-dv-fieldtype-item-name{flex:1;color:var(--gray-100, #45484d);font-size:0.75rem;font-weight:500;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}.ls-dv-check-icon{color:var(--gray-40, #d8d9dc);flex-shrink:0}.ls-dv-fieldtype-item.ls-dv-selected .ls-dv-check-icon{color:var(--check-icon-selected)}`;
@@ -107,17 +107,17 @@ const LsFieldTypeSelect = /*@__PURE__*/ proxyCustomElement(class LsFieldTypeSele
         const displayLabel = this.mixed
             ? dvI18n.t('fieldproperties.mixed')
             : dvI18n.t(fieldTypeKeyMap[this.fieldType] || 'toolbox.text');
-        return (h(Host, { key: '66ad02b2693e699f42ba5b4bbdd74a4e72b5272d' }, h("div", { key: '3cf2bf169679e0433bce59d5147436a5fb41c02f', class: "ls-dv-fieldtype-dropdown" }, h("div", { key: 'de373f0cd0d12757cb6bc2cbb3aa55195497e918', class: "ls-dv-fieldtype-header", style: {
+        return (h(Host, { key: '3b559c6e431d9844e9b9aebff001c4154fd4fc69' }, h("div", { key: 'a8930bd3e364387a3556131e88fa83331081f588', class: "ls-dv-fieldtype-dropdown" }, h("div", { key: '497566912b2568cf25aeec1e0c05ebc20d592aed', class: "ls-dv-fieldtype-header", style: {
                 border: `1px dashed ${color.s30}`,
                 background: color.s10,
-            } }, h("div", { key: 'a37a40c0f27de521d7a9c30f471810c2f30b08a1', class: "ls-dv-fieldtype-inner" }, h("div", { key: 'a8a643a8d53a7789993160da6fd4e9e5e91677bf', class: "ls-dv-fieldtype-icon", style: {
+            } }, h("div", { key: '4cacd24f601036cedce5bd97c1e0a7533c40eec8', class: "ls-dv-fieldtype-inner" }, h("div", { key: '5217bc17eebfc1a83178290ac60ea8e79bbb863b', class: "ls-dv-fieldtype-icon", style: {
                 border: `1px solid ${color.s60}`,
                 color: color.s60,
                 background: color.s10,
-            } }, h("ls-icon", { key: '832a14679c7c30bf65a5bbd81d1ad35fec39f0b9', name: this.mixed ? 'view-grid-icon' : getFieldIcon(this.fieldType), size: 20 })), h("span", { key: '25aa5b984b956cb8536d7d637c6b4c1e657df88f', class: "ls-dv-fieldtype-name" }, displayLabel), !this.disabled && (h("button", { key: 'ff497f5e7f1f54ae0f48429de3b97eb4b827b2e4', class: "ls-dv-fieldtype-btn", onClick: e => {
+            } }, h("ls-icon", { key: 'fc8575bf0d5d150e3278d0be912283de99c65379', name: this.mixed ? 'view-grid-icon' : getFieldIcon(this.fieldType), size: 20 })), h("span", { key: 'aaf39219f7523ec7270ac1171e609fb201746930', class: "ls-dv-fieldtype-name" }, displayLabel), !this.disabled && (h("button", { key: '3afa4fb6aabbca9876ad70cbb7fbb4a49d77d7d6', class: "ls-dv-fieldtype-btn", onClick: e => {
                 e.stopPropagation();
                 this.toggleDropdown();
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('fieldproperties.changefieldtype') }, h("ls-icon", { key: '96ff6e46a8d44b0d7b027b7390c10897f6b0ece5', name: "switch-horizontal-icon", size: 16 }))))), this.isOpen && (h("div", { key: '2a00ba791cb7e55aac8578fa46594e8a426599cc', class: "ls-dv-fieldtype-list" }, validTypes.map(type => (h("div", { class: `ls-dv-fieldtype-item ${type === this.fieldType && !this.mixed ? 'ls-dv-selected' : ''}`, style: {
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('fieldproperties.changefieldtype') }, h("ls-icon", { key: '0033dd20bf4a9f95541751bd27f6ce40f5721126', name: "switch-horizontal-icon", size: 16 }))))), this.isOpen && (h("div", { key: 'c9e5fa19ae83a573e807841a8754f59a841de62e', class: "ls-dv-fieldtype-list" }, validTypes.map(type => (h("div", { class: `ls-dv-fieldtype-item ${type === this.fieldType && !this.mixed ? 'ls-dv-selected' : ''}`, style: {
                 '--background-selected': color.s10,
                 '--check-icon-selected': color.s50,
             }, onClick: () => this.selectFieldType(type) }, h("div", { class: "ls-dv-fieldtype-item-icon", style: {
@@ -156,6 +156,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldTypeSelect as L, defineCustomElement as d };
-//# sourceMappingURL=p-eWb3jk9k.js.map
+//# sourceMappingURL=p-BLZyVIno.js.map
 
-//# sourceMappingURL=p-eWb3jk9k.js.map
+//# sourceMappingURL=p-BLZyVIno.js.map

package/dist/components/{p-eWb3jk9k.js.map → p-BLZyVIno.js.map}

@@ -1 +1 @@
-{"file":"p-eWb3jk9k.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-type-select/ls-field-type-select.scss?tag=ls-field-type-select&encapsulation=shadow","src/components/ls-field-type-select/ls-field-type-select.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n* {\n  margin: 0;\n}\n\n.ls-dv-fieldtype-dropdown {\n  position: relative;\n  width: 100%;\n}\n\n.ls-dv-fieldtype-header {\n  border-radius: 1rem;\n  padding: 0.25rem;\n}\n\n.ls-dv-fieldtype-inner {\n  border-radius: 0.75rem;\n  background: $white;\n  display: flex;\n  padding: 0.25rem 0.25rem 0.25rem 0.25rem;\n  align-items: center;\n  gap: 0.875rem;\n  align-self: stretch;\n}\n\n.ls-dv-fieldtype-icon {\n  display: flex;\n  padding: 0.25rem;\n  align-items: center;\n  border-radius: 0.625rem;\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-dv-fieldtype-name {\n  flex: 1;\n  font-size: var(--text-sm);\n  font-weight: 400;\n  color: $gray-100;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--font-family);\n  text-transform: capitalize;\n}\n\n.ls-dv-fieldtype-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-40;\n  background: $white;\n  color: $gray-80;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.ls-dv-fieldtype-btn:hover {\n  border-color: $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-fieldtype-list {\n  position: absolute;\n  top: calc(100% + 0.25rem);\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  border-radius: 1rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  z-index: 100;\n  max-height: 15rem;\n  overflow-y: auto;\n}\n\n.ls-dv-fieldtype-item {\n  display: flex;\n  padding: 0.5rem 0.75rem 0.5rem 0.5rem;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: 0.75rem;\n  cursor: pointer;\n}\n\n.ls-dv-fieldtype-item:hover {\n  background: $gray-10;\n}\n\n.ls-dv-fieldtype-item.ls-dv-selected,\n.ls-dv-fieldtype-item.ls-dv-selected:hover {\n  background: var(--background-selected, $gray-10);\n}\n\n.ls-dv-fieldtype-item-icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.ls-dv-fieldtype-item-name {\n  flex: 1;\n  color: $gray-100;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-transform: capitalize;\n}\n\n.ls-dv-check-icon {\n  color: $gray-40;\n  flex-shrink: 0;\n}\n\n.ls-dv-fieldtype-item.ls-dv-selected .ls-dv-check-icon {\n  color: var(--check-icon-selected);\n}\n","import { Component, Element, Host, Listen, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\nimport { dvI18n } from '../../i18n/i18n';\n\nconst fieldTypeKeyMap: { [key: string]: string } = {\n  'signature': 'toolbox.signature',\n  'auto sign': 'toolbox.autosign',\n  'text': 'toolbox.text',\n  'signing date': 'toolbox.signingdate',\n  'date': 'toolbox.date',\n  'initials': 'toolbox.initials',\n  'checkbox': 'toolbox.checkbox',\n  'email': 'toolbox.email',\n  'number': 'toolbox.number',\n  'dropdown': 'toolbox.dropdown',\n  'file': 'toolbox.file',\n  'drawn field': 'toolbox.drawn',\n  'regular expression': 'toolbox.regex',\n};\n\n/** All field types in display order */\nconst ALL_FIELD_TYPES = [\n  'signature',\n  'text',\n  'signing date',\n  'date',\n  'email',\n  'initials',\n  'number',\n  'dropdown',\n  'checkbox',\n  'file',\n  'drawn field',\n  'regular expression',\n];\n\n/**\n * Returns the list of valid field types given role types of the selected fields.\n * - Sender: no signature, no initials, no file\n * - Approver: no signature, no auto sign, no initials, no file\n * - Signer/Witness: all except auto sign\n */\nconst getValidFieldTypes = (roleTypes: string[]): string[] => {\n  let excluded: Set<string> = new Set();\n\n  for (const roleType of roleTypes) {\n    switch (roleType) {\n      case 'SENDER':\n        excluded.add('signature');\n        excluded.add('initials');\n        excluded.add('file');\n        excluded.add('drawn field');\n        break;\n      case 'APPROVER':\n        excluded.add('signature');\n        excluded.add('initials');\n        excluded.add('file');\n        break;\n      default: // SIGNER, WITNESS\n        break;\n    }\n  }\n\n  return ALL_FIELD_TYPES.filter(ft => !excluded.has(ft));\n};\n\n@Component({\n  tag: 'ls-field-type-select',\n  styleUrl: 'ls-field-type-select.scss',\n  shadow: true,\n})\nexport class LsFieldTypeSelect {\n  @Element() el: HTMLElement;\n\n  /** Current field type (e.g. 'text', 'signature') */\n  @Prop() fieldType: string = 'text';\n  /** Signer index for colour */\n  @Prop() assignee: number = 1;\n  /** Roles from the template for determining valid types */\n  @Prop() roles: LSApiRole[] = [];\n  /** Role types of the selected field(s) — used to filter valid types */\n  @Prop() roleTypes: string[] = ['SIGNER'];\n  /** Whether the select is disabled */\n  @Prop() disabled: boolean = false;\n  /** Show mixed state when multi-select has different field types */\n  @Prop() mixed: boolean = false;\n  /** Pipe-delimited filter for allowed field types */\n  @Prop() filtertoolbox: string = null;\n\n  @State() isOpen: boolean = false;\n\n  @Event() fieldTypeChange: EventEmitter<string>;\n\n  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (this.isOpen && !this.el.shadowRoot.contains(event.composedPath()[0] as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private selectFieldType(type: string) {\n    this.isOpen = false;\n    this.fieldTypeChange.emit(type);\n  }\n\n  render() {\n    const color = defaultRolePalette[this.assignee % 100];\n    const validTypes = getValidFieldTypes(this.roleTypes).filter(t => this.filtertoolbox === null || this.filtertoolbox.split('|').includes(t));\n    const displayLabel = this.mixed\n      ? dvI18n.t('fieldproperties.mixed')\n      : dvI18n.t(fieldTypeKeyMap[this.fieldType] || 'toolbox.text');\n\n    return (\n      <Host>\n        <div class=\"ls-dv-fieldtype-dropdown\">\n          <div\n            class=\"ls-dv-fieldtype-header\"\n            style={{\n              border: `1px dashed ${color.s30}`,\n              background: color.s10,\n            }}\n          >\n            <div class=\"ls-dv-fieldtype-inner\">\n              <div\n                class=\"ls-dv-fieldtype-icon\"\n                style={{\n                  border: `1px solid ${color.s60}`,\n                  color: color.s60,\n                  background: color.s10,\n                }}\n              >\n                <ls-icon name={this.mixed ? 'view-grid-icon' as any : getFieldIcon(this.fieldType) as any} size={20} />\n              </div>\n              <span class=\"ls-dv-fieldtype-name\">{displayLabel}</span>\n              {!this.disabled && (\n                <button\n                  class=\"ls-dv-fieldtype-btn\"\n                  onClick={e => {\n                    e.stopPropagation();\n                    this.toggleDropdown();\n                  }}\n                  data-tooltip-id=\"ls-dv-tooltip\"\n                  data-tooltip-content={dvI18n.t('fieldproperties.changefieldtype')}\n                >\n                  <ls-icon name=\"switch-horizontal-icon\" size={16} />\n                </button>\n              )}\n            </div>\n          </div>\n          {this.isOpen && (\n            <div class=\"ls-dv-fieldtype-list\">\n              {validTypes.map(type => (\n                <div\n                  class={`ls-dv-fieldtype-item ${type === this.fieldType && !this.mixed ? 'ls-dv-selected' : ''}`}\n                  style={{\n                    '--background-selected': color.s10,\n                    '--check-icon-selected': color.s50,\n                  }}\n                  onClick={() => this.selectFieldType(type)}\n                >\n                  <div\n                    class=\"ls-dv-fieldtype-item-icon\"\n                    style={{\n                      color: color.s60,\n                    }}\n                  >\n                    <ls-icon name={getFieldIcon(type) as any} size={16} />\n                  </div>\n                  <span class=\"ls-dv-fieldtype-item-name\">\n                    {dvI18n.t(fieldTypeKeyMap[type] || 'toolbox.text')}\n                  </span>\n                  <ls-icon\n                    class=\"ls-dv-check-icon\"\n                    name={type === this.fieldType && !this.mixed ? 'check-circle-icon' : 'base-circle-icon'}\n                    solid={type === this.fieldType && !this.mixed}\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BLZyVIno.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-type-select/ls-field-type-select.scss?tag=ls-field-type-select&encapsulation=shadow","src/components/ls-field-type-select/ls-field-type-select.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n* {\n  margin: 0;\n}\n\n.ls-dv-fieldtype-dropdown {\n  position: relative;\n  width: 100%;\n}\n\n.ls-dv-fieldtype-header {\n  border-radius: 1rem;\n  padding: 0.25rem;\n}\n\n.ls-dv-fieldtype-inner {\n  border-radius: 0.75rem;\n  background: $white;\n  display: flex;\n  padding: 0.25rem 0.25rem 0.25rem 0.25rem;\n  align-items: center;\n  gap: 0.875rem;\n  align-self: stretch;\n}\n\n.ls-dv-fieldtype-icon {\n  display: flex;\n  padding: 0.25rem;\n  align-items: center;\n  border-radius: 0.625rem;\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-dv-fieldtype-name {\n  flex: 1;\n  font-size: var(--text-sm);\n  font-weight: 400;\n  color: $gray-100;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--font-family);\n  text-transform: capitalize;\n}\n\n.ls-dv-fieldtype-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-40;\n  background: $white;\n  color: $gray-80;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.ls-dv-fieldtype-btn:hover {\n  border-color: $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-fieldtype-list {\n  position: absolute;\n  top: calc(100% + 0.25rem);\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n  border-radius: 1rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  z-index: 100;\n  max-height: 15rem;\n  overflow-y: auto;\n}\n\n.ls-dv-fieldtype-item {\n  display: flex;\n  padding: 0.5rem 0.75rem 0.5rem 0.5rem;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: 0.75rem;\n  cursor: pointer;\n}\n\n.ls-dv-fieldtype-item:hover {\n  background: $gray-10;\n}\n\n.ls-dv-fieldtype-item.ls-dv-selected,\n.ls-dv-fieldtype-item.ls-dv-selected:hover {\n  background: var(--background-selected, $gray-10);\n}\n\n.ls-dv-fieldtype-item-icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.ls-dv-fieldtype-item-name {\n  flex: 1;\n  color: $gray-100;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-transform: capitalize;\n}\n\n.ls-dv-check-icon {\n  color: $gray-40;\n  flex-shrink: 0;\n}\n\n.ls-dv-fieldtype-item.ls-dv-selected .ls-dv-check-icon {\n  color: var(--check-icon-selected);\n}\n","import { Component, Element, Host, Listen, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\nimport { dvI18n } from '../../i18n/i18n';\n\nconst fieldTypeKeyMap: { [key: string]: string } = {\n  'signature': 'toolbox.signature',\n  'auto sign': 'toolbox.autosign',\n  'text': 'toolbox.text',\n  'signing date': 'toolbox.signingdate',\n  'date': 'toolbox.date',\n  'initials': 'toolbox.initials',\n  'checkbox': 'toolbox.checkbox',\n  'email': 'toolbox.email',\n  'number': 'toolbox.number',\n  'dropdown': 'toolbox.dropdown',\n  'file': 'toolbox.file',\n  'drawn field': 'toolbox.drawn',\n  'regular expression': 'toolbox.regex',\n};\n\n/** All field types in display order */\nconst ALL_FIELD_TYPES = [\n  'signature',\n  'text',\n  'signing date',\n  'date',\n  'email',\n  'initials',\n  'number',\n  'dropdown',\n  'checkbox',\n  'file',\n  'drawn field',\n  'regular expression',\n];\n\n/**\n * Returns the list of valid field types given role types of the selected fields.\n * - Sender: no signature, no initials, no file\n * - Approver: no signature, no auto sign, no initials, no file\n * - Signer/Witness: all except auto sign\n */\nconst getValidFieldTypes = (roleTypes: string[]): string[] => {\n  let excluded: Set<string> = new Set();\n\n  for (const roleType of roleTypes) {\n    switch (roleType) {\n      case 'SENDER':\n        excluded.add('signature');\n        excluded.add('initials');\n        excluded.add('file');\n        excluded.add('drawn field');\n        break;\n      case 'APPROVER':\n        excluded.add('signature');\n        excluded.add('initials');\n        excluded.add('file');\n        break;\n      default: // SIGNER, WITNESS\n        break;\n    }\n  }\n\n  return ALL_FIELD_TYPES.filter(ft => !excluded.has(ft));\n};\n\n@Component({\n  tag: 'ls-field-type-select',\n  styleUrl: 'ls-field-type-select.scss',\n  shadow: true,\n})\nexport class LsFieldTypeSelect {\n  @Element() el: HTMLElement;\n\n  /** Current field type (e.g. 'text', 'signature') */\n  @Prop() fieldType: string = 'text';\n  /** Signer index for colour */\n  @Prop() assignee: number = 1;\n  /** Roles from the template for determining valid types */\n  @Prop() roles: LSApiRole[] = [];\n  /** Role types of the selected field(s) — used to filter valid types */\n  @Prop() roleTypes: string[] = ['SIGNER'];\n  /** Whether the select is disabled */\n  @Prop() disabled: boolean = false;\n  /** Show mixed state when multi-select has different field types */\n  @Prop() mixed: boolean = false;\n  /** Pipe-delimited filter for allowed field types */\n  @Prop() filtertoolbox: string = null;\n\n  @State() isOpen: boolean = false;\n\n  @Event() fieldTypeChange: EventEmitter<string>;\n\n  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (this.isOpen && !this.el.shadowRoot.contains(event.composedPath()[0] as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private selectFieldType(type: string) {\n    this.isOpen = false;\n    this.fieldTypeChange.emit(type);\n  }\n\n  render() {\n    const color = defaultRolePalette[this.assignee % 100];\n    const validTypes = getValidFieldTypes(this.roleTypes).filter(t => this.filtertoolbox === null || this.filtertoolbox.split('|').includes(t));\n    const displayLabel = this.mixed\n      ? dvI18n.t('fieldproperties.mixed')\n      : dvI18n.t(fieldTypeKeyMap[this.fieldType] || 'toolbox.text');\n\n    return (\n      <Host>\n        <div class=\"ls-dv-fieldtype-dropdown\">\n          <div\n            class=\"ls-dv-fieldtype-header\"\n            style={{\n              border: `1px dashed ${color.s30}`,\n              background: color.s10,\n            }}\n          >\n            <div class=\"ls-dv-fieldtype-inner\">\n              <div\n                class=\"ls-dv-fieldtype-icon\"\n                style={{\n                  border: `1px solid ${color.s60}`,\n                  color: color.s60,\n                  background: color.s10,\n                }}\n              >\n                <ls-icon name={this.mixed ? 'view-grid-icon' as any : getFieldIcon(this.fieldType) as any} size={20} />\n              </div>\n              <span class=\"ls-dv-fieldtype-name\">{displayLabel}</span>\n              {!this.disabled && (\n                <button\n                  class=\"ls-dv-fieldtype-btn\"\n                  onClick={e => {\n                    e.stopPropagation();\n                    this.toggleDropdown();\n                  }}\n                  data-tooltip-id=\"ls-dv-tooltip\"\n                  data-tooltip-content={dvI18n.t('fieldproperties.changefieldtype')}\n                >\n                  <ls-icon name=\"switch-horizontal-icon\" size={16} />\n                </button>\n              )}\n            </div>\n          </div>\n          {this.isOpen && (\n            <div class=\"ls-dv-fieldtype-list\">\n              {validTypes.map(type => (\n                <div\n                  class={`ls-dv-fieldtype-item ${type === this.fieldType && !this.mixed ? 'ls-dv-selected' : ''}`}\n                  style={{\n                    '--background-selected': color.s10,\n                    '--check-icon-selected': color.s50,\n                  }}\n                  onClick={() => this.selectFieldType(type)}\n                >\n                  <div\n                    class=\"ls-dv-fieldtype-item-icon\"\n                    style={{\n                      color: color.s60,\n                    }}\n                  >\n                    <ls-icon name={getFieldIcon(type) as any} size={16} />\n                  </div>\n                  <span class=\"ls-dv-fieldtype-item-name\">\n                    {dvI18n.t(fieldTypeKeyMap[type] || 'toolbox.text')}\n                  </span>\n                  <ls-icon\n                    class=\"ls-dv-check-icon\"\n                    name={type === this.fieldType && !this.mixed ? 'check-circle-icon' : 'base-circle-icon'}\n                    solid={type === this.fieldType && !this.mixed}\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-S46PtMZ-.js → p-BUGOiaPK.js}

@@ -1,9 +1,9 @@
 import { t as transformTag, p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-DIvmRYeB.js';
 import { d as defaultRolePalette } from './p-BKrsDBDB.js';
-import { d as dvI18n } from './p-Al32p_JM.js';
+import { d as dvI18n } from './p-DU-efe4l.js';
 import { F as FIELD_DEFAULTS } from './p-04cXI5GQ.js';
 import { d as defineCustomElement$3 } from './p-BHeJScTh.js';
-import { d as defineCustomElement$2 } from './p-CD0ohunR.js';
+import { d as defineCustomElement$2 } from './p-EL05A6XH.js';
 import { d as defineCustomElement$1 } from './p-XnnsjcVC.js';
 
 const lsValidationManagerCss = () => `:host{display:block}*{box-sizing:border-box;margin:0}.ls-dv-toolbox-section-description{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-validation-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.ls-dv-valid-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.ls-dv-valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.ls-dv-invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.ls-dv-field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.ls-dv-field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.ls-dv-required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.625rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.ls-dv-required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.ls-dv-required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.ls-dv-required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-dot{height:0.5rem;width:0.5rem;border-radius:50%}.ls-dv-role-label{display:flex;padding:0.125rem 0.1875rem;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.ls-dv-dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.ls-dv-dropdown-header p{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}`;
@@ -24,7 +24,7 @@ const LsValidationManager = /*@__PURE__*/ proxyCustomElement(class LsValidationM
     validationErrors;
     selectFields;
     render() {
-        return (h(Host, { key: '25f8373fe309add63c18cd436b9e1accbbdfed00' }, h("div", { key: '9bb2741e8fcf05b5406351b75d7f723c40274055' }, h("div", { key: 'b96410c582902982c7d7e91a41ba45183e882cb1' }, h("div", { key: '8ab62069e9d88fc902fba36c8f1b97c734637e98', class: 'ls-dv-validation-section-title' }, dvI18n.t('common.actionrequired')), h("p", { key: '84bed7a8c7f673fa6efe956d91b0d3a577893a8c', class: "ls-dv-toolbox-section-description" }, dvI18n.t('validation.description'))), this.validationErrors && this.validationErrors.map((field, idx) => {
+        return (h(Host, { key: '928eb8fbeefadde1d7f5e78362aa66589d595bea' }, h("div", { key: '5a6cca0dbcd9242b5d640d51062ccc0097c39ea6' }, h("div", { key: 'd889638e7e9453e598c13f5dd9e824ec3d8894aa' }, h("div", { key: '71c8b4edc2c3f56e5162484871fcdd1da52c8668', class: 'ls-dv-validation-section-title' }, dvI18n.t('common.actionrequired')), h("p", { key: '5f355c3fdfb451a56c8f06aaef9924c69aab237b', class: "ls-dv-toolbox-section-description" }, dvI18n.t('validation.description'))), this.validationErrors && this.validationErrors.map((field, idx) => {
             const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
             const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (h("div", { key: idx, class: 'ls-dv-required-field', style: {
@@ -40,7 +40,7 @@ const LsValidationManager = /*@__PURE__*/ proxyCustomElement(class LsValidationM
                         this.selectFields.emit([field.element]);
                     }
                 } }, h("div", { class: 'ls-dv-required-field-items-left' }, h("div", { class: 'ls-dv-dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'ls-dv-required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'ls-dv-role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType ? dvI18n.t(`participants.${field.role.roleType.toLowerCase()}`) : `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: dvI18n.t('toolbox.signature'), defaultHeight: FIELD_DEFAULTS['signature'].defaultHeight, defaultWidth: FIELD_DEFAULTS['signature'].defaultWidth, validation: 0, icon: "signature-icon", tooltip: dvI18n.t('toolbox.signaturetooltip'), signer: field.element.signer }), h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'ls-dv-role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
-        })), h("slot", { key: 'c349426ece6adb164450ef32ea44651982a7574e' })));
+        })), h("slot", { key: '6fa7c70b0005d667ddfe2a02a8a79314780a8ade' })));
     }
     static get style() { return lsValidationManagerCss(); }
 }, [769, "ls-validation-manager", {
@@ -77,6 +77,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsValidationManager as L, defineCustomElement as d };
-//# sourceMappingURL=p-S46PtMZ-.js.map
+//# sourceMappingURL=p-BUGOiaPK.js.map
 
-//# sourceMappingURL=p-S46PtMZ-.js.map
+//# sourceMappingURL=p-BUGOiaPK.js.map

package/dist/components/{p-S46PtMZ-.js.map → p-BUGOiaPK.js.map}

@@ -1 +1 @@
-{"file":"p-S46PtMZ-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-validation-manager/ls-validation-manager.scss?tag=ls-validation-manager&encapsulation=shadow","src/components/ls-validation-manager/ls-validation-manager.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.ls-dv-toolbox-section-description {\n  color: $gray-80;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-validation-section-title {\n  color: $gray-100;\n  font-size: 1.125rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.75rem; /* 155.556% */\n}\n\n.ls-dv-valid-label {\n  display: flex;\n  padding: 0.125rem 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: fit-content;\n}\n\n.ls-dv-valid {\n  background-color: $green-30;\n  color: $green-100;\n}\n\n.ls-dv-invalid {\n  background: $yellow-20;\n  color: $yellow-90;\n}\n\n.ls-dv-field-counter {\n  display: flex;\n  padding: 0.125rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 1rem;\n  font-size: 0.625rem;\n  line-height: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  color: $yellow-20;\n  background: #e17100;\n  min-width: 1rem;\n}\n\n.ls-dv-field-dropdown {\n  position: absolute;\n  top: 2rem;\n  right: 0;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 20rem;\n  padding: 1rem;\n  border-radius: 1rem;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  max-height: 20rem;\n  overflow-y: auto;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1000;\n}\n\n.ls-dv-required-field {\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.625rem;\n  padding: 0.5rem 0.5rem 0.5rem 1rem;\n  background: var(--field-background);\n  color: var(--field-text-color);\n  border: 1px solid var(--field-border-color);\n  transition: all 0.1s ease-in-out;\n}\n\n.ls-dv-required-field:hover {\n  background: var(--field-background-hover);\n  color: var(--field-text-color-hover);\n  border: 1px solid var(--field-border-color-hover);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.ls-dv-required-field-items-left {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  width: 100%;\n}\n\n.ls-dv-required-field-items-left p {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 0.875rem; /* 142.857% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ls-dv-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 50%;\n}\n\n.ls-dv-role-label {\n  display: flex;\n  padding: 0.125rem 0.1875rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-transform: capitalize;\n}\n\n.ls-dv-dropdown-header h2 {\n  color: $gray-100;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  margin-bottom: 0.125rem;\n}\n\n.ls-dv-dropdown-header p {\n  color: $gray-80;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ValidationError } from '../../types/ValidationError';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { dvI18n } from '../../i18n/i18n';\nimport { FIELD_DEFAULTS } from '../../constants/fieldDefaults';\n\n@Component({\n  tag: 'ls-validation-manager',\n  styleUrl: 'ls-validation-manager.scss',\n  shadow: true,\n})\n\nexport class LsValidationManager {\n\n  /**\n   * The template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() validationErrors: ValidationError[];\n\n  @Event({ bubbles: true, composed: true }) selectFields: EventEmitter<LSApiElement[]>;\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div>\n            <div class={'ls-dv-validation-section-title'}>{dvI18n.t('common.actionrequired')}</div>\n            <p class=\"ls-dv-toolbox-section-description\">\n              {dvI18n.t('validation.description')}\n            </p>\n          </div>\n          {this.validationErrors && this.validationErrors.map((field, idx) => {\n            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n            return (\n              <div\n                key={idx}\n                class={'ls-dv-required-field'}\n                style={{\n                  '--field-background': pallette.s10,\n                  '--field-border-color': pallette.s10,\n                  '--field-background-hover': pallette.s20,\n                  '--field-text-color': pallette.s70,\n                  '--field-text-color-hover': pallette.s80,\n                  '--field-border-color-hover': pallette.s60,\n                  cursor: field?.element ? 'pointer' : 'default',\n                }}\n                onClick={() => {\n                  if (field?.element) {\n                    this.selectFields.emit([field.element]);\n                  }\n                }}\n              >\n                <div class={'ls-dv-required-field-items-left'}>\n                  <div class={'ls-dv-dot'} style={{ background: pallette.s60 }} />\n                  {field?.role && (\n                    <div class={'ls-dv-required-field-items-left'}>\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                      <div class={'ls-dv-role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.role?.roleType ? dvI18n.t(`participants.${field.role.roleType.toLowerCase()}`) : `Signer ${field.role?.signerIndex + 1}`}\n                      </div>\n                    </div>\n                  )}\n                  {field?.element && (\n                    <>\n                     <ls-toolbox-field\n                          elementType=\"signature\"\n                          formElementType=\"signature\"\n                          label={dvI18n.t('toolbox.signature')}\n                          defaultHeight={FIELD_DEFAULTS['signature'].defaultHeight}\n                          defaultWidth={FIELD_DEFAULTS['signature'].defaultWidth}\n                          validation={0}\n                          icon=\"signature-icon\"\n                          tooltip={dvI18n.t('toolbox.signaturetooltip')}\n                          signer={field.element.signer}\n                        />\n\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                      <div class={'ls-dv-role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.description}\n                      </div>\n                    </>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BUGOiaPK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-validation-manager/ls-validation-manager.scss?tag=ls-validation-manager&encapsulation=shadow","src/components/ls-validation-manager/ls-validation-manager.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.ls-dv-toolbox-section-description {\n  color: $gray-80;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-validation-section-title {\n  color: $gray-100;\n  font-size: 1.125rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.75rem; /* 155.556% */\n}\n\n.ls-dv-valid-label {\n  display: flex;\n  padding: 0.125rem 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: fit-content;\n}\n\n.ls-dv-valid {\n  background-color: $green-30;\n  color: $green-100;\n}\n\n.ls-dv-invalid {\n  background: $yellow-20;\n  color: $yellow-90;\n}\n\n.ls-dv-field-counter {\n  display: flex;\n  padding: 0.125rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 1rem;\n  font-size: 0.625rem;\n  line-height: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  color: $yellow-20;\n  background: #e17100;\n  min-width: 1rem;\n}\n\n.ls-dv-field-dropdown {\n  position: absolute;\n  top: 2rem;\n  right: 0;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 20rem;\n  padding: 1rem;\n  border-radius: 1rem;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  max-height: 20rem;\n  overflow-y: auto;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1000;\n}\n\n.ls-dv-required-field {\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.625rem;\n  padding: 0.5rem 0.5rem 0.5rem 1rem;\n  background: var(--field-background);\n  color: var(--field-text-color);\n  border: 1px solid var(--field-border-color);\n  transition: all 0.1s ease-in-out;\n}\n\n.ls-dv-required-field:hover {\n  background: var(--field-background-hover);\n  color: var(--field-text-color-hover);\n  border: 1px solid var(--field-border-color-hover);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.ls-dv-required-field-items-left {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  width: 100%;\n}\n\n.ls-dv-required-field-items-left p {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 0.875rem; /* 142.857% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ls-dv-dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 50%;\n}\n\n.ls-dv-role-label {\n  display: flex;\n  padding: 0.125rem 0.1875rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-transform: capitalize;\n}\n\n.ls-dv-dropdown-header h2 {\n  color: $gray-100;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  margin-bottom: 0.125rem;\n}\n\n.ls-dv-dropdown-header p {\n  color: $gray-80;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ValidationError } from '../../types/ValidationError';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { dvI18n } from '../../i18n/i18n';\nimport { FIELD_DEFAULTS } from '../../constants/fieldDefaults';\n\n@Component({\n  tag: 'ls-validation-manager',\n  styleUrl: 'ls-validation-manager.scss',\n  shadow: true,\n})\n\nexport class LsValidationManager {\n\n  /**\n   * The template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() validationErrors: ValidationError[];\n\n  @Event({ bubbles: true, composed: true }) selectFields: EventEmitter<LSApiElement[]>;\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div>\n            <div class={'ls-dv-validation-section-title'}>{dvI18n.t('common.actionrequired')}</div>\n            <p class=\"ls-dv-toolbox-section-description\">\n              {dvI18n.t('validation.description')}\n            </p>\n          </div>\n          {this.validationErrors && this.validationErrors.map((field, idx) => {\n            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n            return (\n              <div\n                key={idx}\n                class={'ls-dv-required-field'}\n                style={{\n                  '--field-background': pallette.s10,\n                  '--field-border-color': pallette.s10,\n                  '--field-background-hover': pallette.s20,\n                  '--field-text-color': pallette.s70,\n                  '--field-text-color-hover': pallette.s80,\n                  '--field-border-color-hover': pallette.s60,\n                  cursor: field?.element ? 'pointer' : 'default',\n                }}\n                onClick={() => {\n                  if (field?.element) {\n                    this.selectFields.emit([field.element]);\n                  }\n                }}\n              >\n                <div class={'ls-dv-required-field-items-left'}>\n                  <div class={'ls-dv-dot'} style={{ background: pallette.s60 }} />\n                  {field?.role && (\n                    <div class={'ls-dv-required-field-items-left'}>\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                      <div class={'ls-dv-role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.role?.roleType ? dvI18n.t(`participants.${field.role.roleType.toLowerCase()}`) : `Signer ${field.role?.signerIndex + 1}`}\n                      </div>\n                    </div>\n                  )}\n                  {field?.element && (\n                    <>\n                     <ls-toolbox-field\n                          elementType=\"signature\"\n                          formElementType=\"signature\"\n                          label={dvI18n.t('toolbox.signature')}\n                          defaultHeight={FIELD_DEFAULTS['signature'].defaultHeight}\n                          defaultWidth={FIELD_DEFAULTS['signature'].defaultWidth}\n                          validation={0}\n                          icon=\"signature-icon\"\n                          tooltip={dvI18n.t('toolbox.signaturetooltip')}\n                          signer={field.element.signer}\n                        />\n\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                      <div class={'ls-dv-role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.description}\n                      </div>\n                    </>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}