legalesign-document-viewer 0.9.21 → 0.9.22

package/dist/components/p-DBASMZy7.js

@@ -0,0 +1,63 @@
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-DffaAVW4.js';
+import { d as dvI18n } from './p-BtjCijn4.js';
+import { d as defineCustomElement$3 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$2 } from './p-lphkmIXU.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
+
+const lsHelperBarCss = () => `.ls-dv-controls-bar{position:relative;z-index:1;display:flex;flex-direction:column;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:var(--rounded-full, 9999px);gap:0.75rem;padding:0.5rem}button{all:unset;border:0;color:var(--gray-80, #6f7176)}button:hover{color:var(--gray-100, #45484d);border-radius:0.625rem}button:disabled{color:var(--gray-40, #d8d9dc);cursor:not-allowed}.ls-dv-divider{height:1px;background-color:var(--gray-30, #e0e2e5);width:100%;margin:-0.25rem 0}`;
+
+const LsHelperBar = /*@__PURE__*/ proxyCustomElement(class LsHelperBar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get component() { return this; }
+    expanded = false;
+    showShortcuts = false;
+    componentDidLoad() {
+    }
+    render() {
+        return (h(Host, { key: '149c209c8a2c3f8b647a06398d7175e1ed94e273' }, h("div", { key: 'a3907dc5c429d9bb300bf499b261df2b90a004b7', class: 'ls-dv-controls-bar', onMouseEnter: () => (this.expanded = true), onMouseLeave: () => (this.expanded = false) }, h("button", { key: '1ec915b75ccec0f1e96454cd722c53931ccdb7ae', style: !this.expanded ? { display: 'none' } : { display: 'block', position: 'relative' }, id: "keyboard-btn", onMouseEnter: () => (this.showShortcuts = true), onMouseLeave: () => (this.showShortcuts = false) }, h("ls-keyboard-shortcuts", { key: '13d1685f74c033d622273ae593ba3db92ac471d6', style: !this.showShortcuts ? { display: 'none' } : { display: 'block' } }), h("ls-icon", { key: '17c9e73104f5b21d0bf03b2bb9291487d7163dde', name: "keyboard-icon" })), h("button", { key: '4bd707d2138b0a4bb6c89a0892658a0a07c4579e', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://docs.legalesign.com/web-app/how-to/newedit', '_blank') }, h("ls-icon", { key: '1be46d3249aa7dd132d298dbc4db5acbc217b329', name: "book-open-icon", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('helperbar.viewdocumentation'), "data-tooltip-place": "left" })), h("button", { key: '68c21eca09c94bc7b251159bc699e20f12fc9ba5', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://support.legalesign.io/tickets', '_blank') }, h("ls-icon", { key: 'b23286629199072b8fdaf4751eeaefc3e5ad3fad', name: "support-icon", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('helperbar.contactsupport'), "data-tooltip-place": "left" })), h("div", { key: '4eed3daf1c42cada2788bfb4be4f16ab0021c980', class: "ls-dv-divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: 'b75936c458be7efb220db9c3f6b9ba4975701bbc' }, h("ls-icon", { key: 'ade6ad0b9be1db51efcb2fab081229814b041831', name: "question-mark-circle-icon" }))), h("slot", { key: '734d4434ccb0a24af181883f15c7dfc1cb0a6809' }), h("ls-tooltip", { key: '6708892757388f52bd8fc9f4f7713fbcd3232973', tooltipId: "ls-dv-tooltip" })));
+    }
+    static get style() { return lsHelperBarCss(); }
+}, [769, "ls-helper-bar", {
+        "expanded": [1028],
+        "showShortcuts": [1028, "show-shortcuts"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-helper-bar", "ls-icon", "ls-keyboard-shortcuts", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-helper-bar":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsHelperBar);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-keyboard-shortcuts":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsHelperBar as L, defineCustomElement as d };
+//# sourceMappingURL=p-DBASMZy7.js.map
+
+//# sourceMappingURL=p-DBASMZy7.js.map

package/dist/components/p-DBASMZy7.js.map

@@ -0,0 +1 @@
+{"file":"p-DBASMZy7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-helper-bar/ls-helper-bar.scss?tag=ls-helper-bar&encapsulation=shadow","src/components/ls-helper-bar/ls-helper-bar.tsx"],"sourcesContent":[".ls-dv-controls-bar {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  border: 1px solid $gray-30;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: $rounded-full;\n  gap: 0.75rem;\n  padding: 0.5rem;\n}\n\nbutton {\n  all: unset;\n  border: 0;\n  color: $gray-80;\n}\n\nbutton:hover {\n  color: $gray-100;\n  border-radius: 0.625rem;\n}\n\nbutton:disabled {\n  color: $gray-40;\n  cursor: not-allowed;\n}\n\n.ls-dv-divider {\n  height: 1px;\n  background-color: $gray-30;\n  width: 100%;\n  margin: -0.25rem 0;\n}","import { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-helper-bar',\n  styleUrl: 'ls-helper-bar.scss',\n  shadow: true,\n})\nexport class LsHelperBar {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Prop({ mutable: true }) showShortcuts: boolean = false;\n\n  componentDidLoad() {\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'ls-dv-controls-bar'} onMouseEnter={() => (this.expanded = true)} onMouseLeave={() => (this.expanded = false)}>\n          <button\n            style={!this.expanded ? { display: 'none' } : { display: 'block', position: 'relative' }}\n            id=\"keyboard-btn\"\n            onMouseEnter={() => (this.showShortcuts = true)}\n            onMouseLeave={() => (this.showShortcuts = false)}\n          >\n            <ls-keyboard-shortcuts style={!this.showShortcuts ? { display: 'none' } : { display: 'block' }} />\n            <ls-icon name=\"keyboard-icon\" />\n          </button>\n          {/* <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} data-pendo=\"launch-new-edit-tour\">\n            <ls-icon name=\"map-icon\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content=\"Take a Guided Tour\" data-tooltip-place=\"left\" />\n          </button> */}\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} onClick={() => window.open('https://docs.legalesign.com/web-app/how-to/newedit', '_blank')}>\n            <ls-icon name=\"book-open-icon\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('helperbar.viewdocumentation')} data-tooltip-place=\"left\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} onClick={() => window.open('https://support.legalesign.io/tickets', '_blank')}>\n            <ls-icon name=\"support-icon\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('helperbar.contactsupport')} data-tooltip-place=\"left\" />\n          </button>\n          <div class=\"ls-dv-divider\" style={!this.expanded ? { display: 'none' } : { display: 'block' }} />\n          <button>\n            <ls-icon name=\"question-mark-circle-icon\" />\n          </button>\n        </div>\n        <slot></slot>\n        <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-wwN19gwm.js → p-DKo99Z43.js}

@@ -1,4 +1,4 @@
-import { t as transformTag, p as proxyCustomElement, H, h } from './p-BrykT5-C.js';
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-DffaAVW4.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 
 const lsLoadingCss = () => `.container{display:flex;align-items:center;line-height:1rem}div{line-height:0}.text{margin-left:0.5rem}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}`;
@@ -38,6 +38,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsLoadingIcon as L, defineCustomElement as d };
-//# sourceMappingURL=p-wwN19gwm.js.map
+//# sourceMappingURL=p-DKo99Z43.js.map
 
-//# sourceMappingURL=p-wwN19gwm.js.map
+//# sourceMappingURL=p-DKo99Z43.js.map

package/dist/components/{p-wwN19gwm.js.map → p-DKo99Z43.js.map}

@@ -1 +1 @@
-{"file":"p-wwN19gwm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/legalesign-ui@0.0.44/node_modules/legalesign-ui/dist/collection/components/ls-loading/ls-loading.css?tag=ls-loading-icon&encapsulation=shadow","node_modules/.pnpm/legalesign-ui@0.0.44/node_modules/legalesign-ui/dist/collection/components/ls-loading/ls-loading-icon.js"],"sourcesContent":[".container {\n  display: flex;\n  align-items: center;\n  line-height: 1rem;\n}\n\ndiv {\n  line-height: 0;\n}\n\n.text {\n  margin-left: 0.5rem;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.animate-spin {\n  animation: spin 1s linear infinite;\n}","import { h } from \"@stencil/core\";\nimport clsx from \"clsx\";\nexport class LsLoadingIcon {\n    constructor() {\n        this.default = true;\n        this.size = 20;\n    }\n    render() {\n        const loadingClass = clsx('loadingIcon', 'animate-spin');\n        return (h(\"div\", { key: 'dc21ad882fdd44c6eed3dff86209efafc330d0bc' }, this.default ? (h(\"svg\", { width: this.size, height: this.size, viewBox: '0 0 24 24', class: loadingClass, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h(\"g\", { \"clip-path\": 'url(#clip0_5402_116)' }, h(\"path\", { opacity: '0.2', d: 'M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { d: 'M20 12C20 14.2044 19.1022 16.2044 17.6622 17.6533', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.8', d: 'M17.6533 6.34692C19.1022 7.79581 20 9.79581 20 12.0003', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.6', d: 'M12 4C14.2133 4 16.2133 4.89778 17.6533 6.34667', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.4', d: 'M6.33777 6.34667C7.78666 4.89778 9.78666 4 12 4', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.2', d: 'M4 12.0003C4 9.79581 4.89778 7.79581 6.33778 6.34692', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' })), h(\"defs\", null, h(\"clipPath\", { id: 'clip0_5402_116' }, h(\"rect\", { width: '20', height: '20', fill: 'white', transform: 'translate(2 2)' }))))) : (h(\"svg\", { width: this.size, height: this.size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', class: loadingClass }, h(\"path\", { d: 'M12.0433 3V6.46154M12.0433 17.5385V21M17.5385 12.1812H21M3 12.1812H6.46154M16.1538 8.08933L18.6015 5.64166M5.39624 5.64213L7.84392 8.0898M15.908 15.6752L18.3556 18.1229M5.64213 18.6011L8.0898 16.1534', stroke: 'currentColor', \"stroke-width\": '2', \"stroke-linecap\": 'round' }), h(\"defs\", null, h(\"radialGradient\", { id: 'paint0_angular_2161_284876', cx: '0', cy: '0', r: '1', gradientUnits: 'userSpaceOnUse', gradientTransform: 'translate(12 12) rotate(-123.69) scale(9.01388)' }, h(\"stop\", { \"stop-opacity\": '0' }), h(\"stop\", { offset: '1' })))))));\n    }\n    static get is() { return \"ls-loading-icon\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ls-loading.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ls-loading.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"default\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"default\",\n                \"defaultValue\": \"true\"\n            },\n            \"size\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"size\",\n                \"defaultValue\": \"20\"\n            }\n        };\n    }\n}\n"],"version":3}
+{"file":"p-DKo99Z43.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/legalesign-ui@0.0.45/node_modules/legalesign-ui/dist/collection/components/ls-loading/ls-loading.css?tag=ls-loading-icon&encapsulation=shadow","node_modules/.pnpm/legalesign-ui@0.0.45/node_modules/legalesign-ui/dist/collection/components/ls-loading/ls-loading-icon.js"],"sourcesContent":[".container {\n  display: flex;\n  align-items: center;\n  line-height: 1rem;\n}\n\ndiv {\n  line-height: 0;\n}\n\n.text {\n  margin-left: 0.5rem;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.animate-spin {\n  animation: spin 1s linear infinite;\n}","import { h } from \"@stencil/core\";\nimport clsx from \"clsx\";\nexport class LsLoadingIcon {\n    constructor() {\n        this.default = true;\n        this.size = 20;\n    }\n    render() {\n        const loadingClass = clsx('loadingIcon', 'animate-spin');\n        return (h(\"div\", { key: 'dc21ad882fdd44c6eed3dff86209efafc330d0bc' }, this.default ? (h(\"svg\", { width: this.size, height: this.size, viewBox: '0 0 24 24', class: loadingClass, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h(\"g\", { \"clip-path\": 'url(#clip0_5402_116)' }, h(\"path\", { opacity: '0.2', d: 'M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { d: 'M20 12C20 14.2044 19.1022 16.2044 17.6622 17.6533', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.8', d: 'M17.6533 6.34692C19.1022 7.79581 20 9.79581 20 12.0003', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.6', d: 'M12 4C14.2133 4 16.2133 4.89778 17.6533 6.34667', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.4', d: 'M6.33777 6.34667C7.78666 4.89778 9.78666 4 12 4', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' }), h(\"path\", { opacity: '0.2', d: 'M4 12.0003C4 9.79581 4.89778 7.79581 6.33778 6.34692', stroke: 'currentColor', \"stroke-width\": '4', \"stroke-miterlimit\": '10' })), h(\"defs\", null, h(\"clipPath\", { id: 'clip0_5402_116' }, h(\"rect\", { width: '20', height: '20', fill: 'white', transform: 'translate(2 2)' }))))) : (h(\"svg\", { width: this.size, height: this.size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', class: loadingClass }, h(\"path\", { d: 'M12.0433 3V6.46154M12.0433 17.5385V21M17.5385 12.1812H21M3 12.1812H6.46154M16.1538 8.08933L18.6015 5.64166M5.39624 5.64213L7.84392 8.0898M15.908 15.6752L18.3556 18.1229M5.64213 18.6011L8.0898 16.1534', stroke: 'currentColor', \"stroke-width\": '2', \"stroke-linecap\": 'round' }), h(\"defs\", null, h(\"radialGradient\", { id: 'paint0_angular_2161_284876', cx: '0', cy: '0', r: '1', gradientUnits: 'userSpaceOnUse', gradientTransform: 'translate(12 12) rotate(-123.69) scale(9.01388)' }, h(\"stop\", { \"stop-opacity\": '0' }), h(\"stop\", { offset: '1' })))))));\n    }\n    static get is() { return \"ls-loading-icon\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ls-loading.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ls-loading.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"default\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"default\",\n                \"defaultValue\": \"true\"\n            },\n            \"size\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"reflect\": false,\n                \"attribute\": \"size\",\n                \"defaultValue\": \"20\"\n            }\n        };\n    }\n}\n"],"version":3}

package/dist/components/{p-D7bwh5bc.js → p-DLJvb8vE.js}

@@ -1,7 +1,7 @@
-import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BrykT5-C.js';
-import { d as dvI18n } from './p-Dx1cMyvL.js';
-import { d as defineCustomElement$2 } from './p-CSPLGKKp.js';
-import { d as defineCustomElement$1 } from './p-dHMolk9H.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DffaAVW4.js';
+import { d as dvI18n } from './p-BtjCijn4.js';
+import { d as defineCustomElement$2 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
 
 const lsFieldAlignmentCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-dv-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.ls-dv-row{flex-direction:row;align-items:center;justify-content:space-between}.ls-dv-multi-button-group-row{display:flex;gap:0.5rem}.ls-dv-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-dv-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-dv-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6f7176);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-dv-input-row{display:flex;gap:0.5rem}.ls-dv-input-row .ls-dv-input-wrapper input{width:9.313rem;max-width:9.313rem}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}.ls-dv-input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #c8c9cc)}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #ffffff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #ffffff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #c8c9cc);box-shadow:none}input[type=checkbox]{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type=checkbox]:checked,input[type=checkbox].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{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.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)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.ls-dv-button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6f7176)}.ls-dv-button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #c8c9cc)}.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)}`;
 
@@ -125,9 +125,9 @@ const LsFieldAlignment = /*@__PURE__*/ proxyCustomElement(class LsFieldAlignment
     componentDidLoad() {
     }
     render() {
-        return (h(Host, { key: 'e5996ef81d07b88a0da3367b67ddf439553a35ab' }, h("div", { key: '381f0c2133e74c779c18d22e4c3e4af6c9bd9aca', class: 'ls-dv-field-properties-section' }, h("div", { key: 'b9878fcf9f619e37bf7ff512f62cb4b54b921dcb', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '2f6a2f2858afd95852f6ab5f5773a1d658a3ea96', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.alignment')), h("p", { key: '6e836f409055be007f1f4b4d155dcf2ec779d601', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.alignmentdescription'))), h("div", { key: '3c60e6c0dfacb6740d47a1c717f1e7e1bdf120e4', class: 'ls-dv-multi-button-group-row' }, h("div", { key: '45b1990c24405ce67264a95b642c59ad838fa2f2', class: 'ls-dv-button-group' }, h("button", { key: '9e7c160677efd922700865416ed2dcb394984b45', onClick: () => this.left(), "aria-label": dvI18n.t('alignment.alignleft'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignleft') }, h("ls-icon", { key: '929b9c3a4c956ed1e35db3299195571140335064', name: "field-alignment-left-icon" })), h("button", { key: '5b8ec1346fee89f0159be43a3d93ba5d273181c5', onClick: () => this.center(), "aria-label": dvI18n.t('alignment.aligncenter'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.aligncenter') }, h("ls-icon", { key: 'c6054913cfb4d771b3aa51a342ea81fcbc7a39a7', name: "field-alignment-centre-icon" })), h("button", { key: '32d8ef2fc988f9fc327b699431cfc661ffb9fb88', onClick: () => {
+        return (h(Host, { key: '66383550a731a5c0fdf58c8d6c247034552d0625' }, h("div", { key: '33ffe3106c3111626ecc33d0ffa5bb673be1440b', class: 'ls-dv-field-properties-section' }, h("div", { key: '2daa5e2c4428b4ef9bec6b074c1f593727c5f04a', class: 'ls-dv-field-properties-section-text' }, h("p", { key: '50e76c8701fd17c223be884596f31e6c7fc9e5e0', class: 'ls-dv-field-properties-section-title' }, dvI18n.t('placement.alignment')), h("p", { key: '911ec1d7a0ca56df9525c1547eee226546a51240', class: 'ls-dv-field-properties-section-description' }, dvI18n.t('placement.alignmentdescription'))), h("div", { key: 'c9f13bffe0a8a2801155a8a612516e43d1215628', class: 'ls-dv-multi-button-group-row' }, h("div", { key: '34b64b309d2afc5e8de33f99ba20f0211397c997', class: 'ls-dv-button-group' }, h("button", { key: 'c904aaf54443f91a59a1e229c93f9e431278886b', onClick: () => this.left(), "aria-label": dvI18n.t('alignment.alignleft'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignleft') }, h("ls-icon", { key: 'c45679a7ec88a06e3f7be427bd7a63ed66eb7ee3', name: "field-alignment-left-icon" })), h("button", { key: 'c991c76feb073d27dcafb5fbb1b1f9807ba2fe50', onClick: () => this.center(), "aria-label": dvI18n.t('alignment.aligncenter'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.aligncenter') }, h("ls-icon", { key: '5577e53c1c7eccc22185b4c19b82e59f8f369f0c', name: "field-alignment-centre-icon" })), h("button", { key: '6ecfdd6d642f6e76f79756a4c82ccf621842f102', onClick: () => {
                 this.right();
-            }, "aria-label": dvI18n.t('alignment.alignright'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignright') }, h("ls-icon", { key: 'dd8bcbc611929770d802dec71dd17e69f5246630', name: "field-alignment-right-icon" }))), h("div", { key: '34dd993f274904b36249aee6295017a50e5c4b7e', class: 'ls-dv-button-group' }, h("button", { key: '12e1521a1530a0cadd5c5143f5bbc1a2c374c224', onClick: () => this.top(), "aria-label": dvI18n.t('alignment.aligntop'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.aligntop') }, h("ls-icon", { key: '3bfccefe8214c9f1d1499b6d7369929aaf6ba83d', name: "field-alignment-top-icon" })), h("button", { key: 'da9a3bf665c14e1add0aaecdefa6365d8469a2ea', onClick: () => this.middle(), "aria-label": dvI18n.t('alignment.alignmiddle'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignmiddle') }, h("ls-icon", { key: 'c3ee9044bd263c13ff7faed49ac0bd679c969a4a', name: "field-alignment-middle-icon" })), h("button", { key: '018f3ef34c31478e1567fa0d83c152c83acacde8', onClick: () => this.bottom(), "aria-label": dvI18n.t('alignment.alignbottom'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignbottom') }, h("ls-icon", { key: 'ed76758ebee4c172e51b83b8d7192c5b7ffca523', name: "field-alignment-bottom-icon" }))))), h("slot", { key: '6c006e30dde126d86c625a2ae99e555fe4d4fcb4' }), h("ls-tooltip", { key: '644ffd5db4d30e43d4ff78d44f1ae400e729cb53', tooltipId: "ls-dv-tooltip" })));
+            }, "aria-label": dvI18n.t('alignment.alignright'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignright') }, h("ls-icon", { key: '0f9af3b4d7e490e6e6642c04422e052384998bc9', name: "field-alignment-right-icon" }))), h("div", { key: '6d9df4c4bd865cd54ea6f20611613825398768be', class: 'ls-dv-button-group' }, h("button", { key: '159a34755632cd97ece611aa7a26c3c62e75be0f', onClick: () => this.top(), "aria-label": dvI18n.t('alignment.aligntop'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.aligntop') }, h("ls-icon", { key: '794d7a7459fde95dd4b103209e302eb4882b94eb', name: "field-alignment-top-icon" })), h("button", { key: '986c74c6bd7efb0b23c7c6c84ec0b45f660fc88d', onClick: () => this.middle(), "aria-label": dvI18n.t('alignment.alignmiddle'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignmiddle') }, h("ls-icon", { key: '6441550c1f6ddbfe9c73e1f34414c0755d43b276', name: "field-alignment-middle-icon" })), h("button", { key: 'f782d4f400c8bd7fae42539c17ca1b4b3b6ce969', onClick: () => this.bottom(), "aria-label": dvI18n.t('alignment.alignbottom'), "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('alignment.alignbottom') }, h("ls-icon", { key: 'a2f28a957f2eca5a2aa52ed4eb7efedbc0cadc0e', name: "field-alignment-bottom-icon" }))))), h("slot", { key: '1aea5648036c82700a075bec8b3fb3a2b9f84f3a' }), h("ls-tooltip", { key: '776ce5aac062faad36c1200b829cb459d2be9be4', tooltipId: "ls-dv-tooltip" })));
     }
     static get style() { return lsFieldAlignmentCss(); }
 }, [769, "ls-field-alignment", {
@@ -159,6 +159,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldAlignment as L, defineCustomElement as d };
-//# sourceMappingURL=p-D7bwh5bc.js.map
+//# sourceMappingURL=p-DLJvb8vE.js.map
 
-//# sourceMappingURL=p-D7bwh5bc.js.map
+//# sourceMappingURL=p-DLJvb8vE.js.map

package/dist/components/{p-D7bwh5bc.js.map → p-DLJvb8vE.js.map}

@@ -1 +1 @@
-{"file":"p-D7bwh5bc.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  @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  getAnchorControl(): LSApiElement {\n    return this.dataItem.reduce((topLeftMost, current) => {\n      // Prioritize top position first, then left if tops are equal\n      if (current.top < topLeftMost.top) {\n        return current;\n      } else if (current.top === topLeftMost.top && current.left < topLeftMost.left) {\n        return current;\n      }\n      return topLeftMost;\n    }, this.dataItem[0]);\n  }\n\n  right() {\n    const anchor = this.getAnchorControl();\n    const alignTo = anchor.left + anchor.width;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = alignTo - c.width;\n\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width,\n        } as LSApiElement,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  center() {\n    const anchor = this.getAnchorControl();\n    const alignTo = anchor.left + anchor.width / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = alignTo - c.width / 2;\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width,\n        } 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 anchor = this.getAnchorControl();\n    this.alter({ top: anchor.top });\n  }\n\n  left() {\n    const anchor = this.getAnchorControl();\n    this.alter({ left: anchor.left });\n  }\n\n  middle() {\n    const anchor = this.getAnchorControl();\n    const alignTo = anchor.top + anchor.height / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = alignTo - c.height / 2;\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height,\n        } 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 anchor = this.getAnchorControl();\n    const alignTo = anchor.top + anchor.height;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = alignTo - c.height;\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height,\n        } 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')}>\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')}>\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              >\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')}>\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')}>\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')}>\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-DLJvb8vE.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  @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  getAnchorControl(): LSApiElement {\n    return this.dataItem.reduce((topLeftMost, current) => {\n      // Prioritize top position first, then left if tops are equal\n      if (current.top < topLeftMost.top) {\n        return current;\n      } else if (current.top === topLeftMost.top && current.left < topLeftMost.left) {\n        return current;\n      }\n      return topLeftMost;\n    }, this.dataItem[0]);\n  }\n\n  right() {\n    const anchor = this.getAnchorControl();\n    const alignTo = anchor.left + anchor.width;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = alignTo - c.width;\n\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width,\n        } as LSApiElement,\n      };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  center() {\n    const anchor = this.getAnchorControl();\n    const alignTo = anchor.left + anchor.width / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = alignTo - c.width / 2;\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width,\n        } 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 anchor = this.getAnchorControl();\n    this.alter({ top: anchor.top });\n  }\n\n  left() {\n    const anchor = this.getAnchorControl();\n    this.alter({ left: anchor.left });\n  }\n\n  middle() {\n    const anchor = this.getAnchorControl();\n    const alignTo = anchor.top + anchor.height / 2;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = alignTo - c.height / 2;\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height,\n        } 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 anchor = this.getAnchorControl();\n    const alignTo = anchor.top + anchor.height;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = alignTo - c.height;\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height,\n        } 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')}>\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')}>\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              >\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')}>\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')}>\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')}>\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-3MMDk3sy.js → p-DN9dmmkk.js}

@@ -1,7 +1,7 @@
-import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BrykT5-C.js';
-import { d as dvI18n } from './p-Dx1cMyvL.js';
-import { d as defineCustomElement$2 } from './p-CSPLGKKp.js';
-import { d as defineCustomElement$1 } from './p-dHMolk9H.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DffaAVW4.js';
+import { d as dvI18n } from './p-BtjCijn4.js';
+import { d as defineCustomElement$2 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
 
 const lsFieldFormatCss = () => `:host{display:flex;flex-direction:row}.ls-dv-field-format-bar{display:flex;flex-direction:row;gap:0.5rem}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}.ls-dv-input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.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=number]{width:max-content;max-width:3rem}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{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.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)}.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)}`;
 
@@ -56,31 +56,31 @@ const LsFieldFormat = /*@__PURE__*/ proxyCustomElement(class LsFieldFormat exten
         return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };
     };
     render() {
-        return (h(Host, { key: '6b23fc93d340a8054fb46d803c0ad862128a22b5', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '10ac53711a8c3d7020afa6834a80a8dcb11660a2', class: 'ls-dv-field-format-bar' }, h("div", { key: 'c29d49c58b71f07a166f8a5d4df47282dbe04557', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: 'b7cf6238ef856a83d61be45f6fe8d3b3123fc2f2', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '23ff73054e519c36b5e1952819561fdbb9d5234a', id: "ls-toolbar-font-select", onChange: input => {
+        return (h(Host, { key: 'a30cfc986e0ffb27427cceb442475cf4555e4413', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '52fac60e65e1d4cc6fc7b1c880ab18bdc9b15209', class: 'ls-dv-field-format-bar' }, h("div", { key: 'a2a8c49a08a5fb178f1b1e33d04bbeaf7685c6b1', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: '3ca17f5993952362605535e56166ecde5bde0478', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '1b043cc3013f7f6e80dddccd23dc54aae11688d0', id: "ls-toolbar-font-select", onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'ls-dv-has-leading-icon' }, h("option", { key: 'edc81ecb32cd23653374a5fb07673a6fcd1c8e10', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), h("option", { key: '0a1cd00578f7ab5a96ccc3721ca2aeae9771a808', value: "arial" }, "Arial"), h("option", { key: 'dd9f74095bf72ae78482bf8a305ed6a162ab9fe9', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '2cab344aa9a74af5a32753d3946b900584470607', value: "courier" }, "Courier"), h("option", { key: '48c9a29804245beb2b469142b59ebf986a34cc13', value: "helvetica" }, "Helvetica"), h("option", { key: '5a1af383288abc9ace1854c5378e192ac26efc43', value: "verdana" }, "Verdana")), h("ls-icon", { key: 'fadfd9e9dd064e24595b4f1a14139dc90fe9f483', id: "selectorIcon", name: "selector-icon" })), h("div", { key: 'ddb6a2932520121ef646250ac09cfa3e69d72e39', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '8905ee23f2fd530fc0209ac2c0fd6b21eaddc111', id: "selectLeadingIcon", name: "text-size-icon" }), h("input", { key: 'b418cc56b2da051b428f16ba5ccacd17a5dacf83', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
+            }, class: 'ls-dv-has-leading-icon' }, h("option", { key: '67cf7d2fe34fc980065c73ea8f31fa53737bce82', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, "Mixed"), h("option", { key: '6874d63750b95da6078128b758060a5a5b7027b0', value: "arial" }, "Arial"), h("option", { key: 'bd6ad75adf8b0b3c627eebead981bb70e6552576', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '701df08cbb9304ba133a5a22859fcf2969ed346b', value: "courier" }, "Courier"), h("option", { key: '2e6543181136d996999414f7417c0975c6f3f241', value: "helvetica" }, "Helvetica"), h("option", { key: '6899f4e88c3e961ecf44825d88f597338c8299a6', value: "verdana" }, "Verdana")), h("ls-icon", { key: '2c23e090ada507f25a8cfd28f008490928fb2d6d', id: "selectorIcon", name: "selector-icon" })), h("div", { key: '7c78dbd2488e7d1d4160023fbf0e7841a098e4b1', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '2950ad5c3a4fae0b8ef561207506fc8a08fa63b6', id: "selectLeadingIcon", name: "text-size-icon" }), h("input", { key: '366854e50d871a9f28e8794dd055e18f628b6a1d', id: "ls-toolbar-font-size", type: 'number', min: "4", value: this.allElementsSame()?.fontSize, onChange: input => {
                 if (input.target.value === '')
                     return;
                 this.alter({ fontSize: input.target.value });
-            }, class: 'ls-dv-has-leading-icon' })), h("div", { key: '04a35200f07cf18591c8ab8547f73705a52a8257', class: 'ls-dv-button-group' }, h("button", { key: '5d8f5c0944094832d286380851bb021df01ff805', onClick: () => {
+            }, class: 'ls-dv-has-leading-icon' })), h("div", { key: '27ee621bbc68e397ef17f8b47aaa58af14ff35c4', class: 'ls-dv-button-group' }, h("button", { key: '32115e771209bd271e8a84e67be8bc737569235e', onClick: () => {
                 this.alter({ align: 'left' });
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: 'fc8a467f6dbba2abc94caa708a15901add9b1f33', name: "menu-alt-2-icon" })), h("button", { key: '13cc9502982f0faadb190a7031c728f79e72b199', onClick: () => {
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: 'edb58e9b830825d44965b49c7afe2a8ac53f0294', name: "menu-alt-2-icon" })), h("button", { key: '5f915c921b9be965707ab89224d070246f9883a8', onClick: () => {
                 this.alter({ align: 'center' });
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: 'd04829812fda158285f5a5fbd2aea62c40ebc9f3', name: "menu-alt-5-icon" })), h("button", { key: '8a686e1b1df08ee37514eba1085725667dff0293', onClick: () => {
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '25f88a7a103ae302ea5dd9b93400cda22b388498', name: "menu-alt-5-icon" })), h("button", { key: '62787902f13ec6f870ae1e533416b58f5553ebd7', onClick: () => {
                 this.alter({ align: 'right' });
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '217c9ad02f7499f127a76bf118ae817a997e89cc', name: "menu-alt-3-icon" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '5d605266235bbcb00b0979235a91a66e086db93b', class: 'ls-dv-field-format-bar' }, h("div", { key: '0da3b47516c59592d6b3e837c92521efd4b5c5c7', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: '26edf0fafae6448256518118b2acd3250ce42e99', id: "selectorIcon", name: "selector-icon" }), h("ls-icon", { key: '3d1d424d1d615c5bdac1837638c727a8421a1a15', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '4202bfd331d0dc984b83b540e297c36931a48082', id: "ls-toolbar-font-select", onChange: input => {
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '6930b9223a758a6f8b42c466739612ef3d6b67d5', name: "menu-alt-3-icon" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '93faac03f2360ffdb2b9108ad867a667c1c286ad', class: 'ls-dv-field-format-bar' }, h("div", { key: '64132c9d4eab4ae39e44fe47d8054589d23cd382', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: '294ff2c8f5ec22da2667616f3ca9c976475a95a3', id: "selectorIcon", name: "selector-icon" }), h("ls-icon", { key: 'bc8f8e348c5d80a5e9685e5daa305f160216fb19', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '5107e3ee8eaab44b4e86483bd2350ea63c20e6bc', id: "ls-toolbar-font-select", onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'ls-dv-has-leading-icon' }, h("option", { key: '0e59e235bda33e1cfb2fee4331134f47ad3a597f', value: "arial" }, "Arial"), h("option", { key: '5894b9ad447782e2d9b5e95911e0c956418fc3a0', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '2e94fc53e42255fb9c478fa46152a3016b9b0756', value: "courier" }, "Courier"), h("option", { key: 'c9fd646a70afbb1f1935b190cc3d1d7b724e8307', value: "helvetica" }, "Helvetica"), h("option", { key: '8b210d9140b6bcd7bc375e1013c672122e111212', value: "verdana" }, "Verdana"))), h("div", { key: '67d56df75bedbd3831a7359d305c08c6bbf06ae2', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '668ea18cc6c82457f54ae7adc61fbe0c5553509e', id: "selectLeadingIcon", name: "text-size-icon" }), h("input", { key: 'e247ed75673eb9bd2989e64178a46f1f46ed460a', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'ls-dv-has-leading-icon' }, h("option", { key: '920297ef5b4aebe491a443ce49d1d5e562af6a45', value: "arial" }, "Arial"), h("option", { key: '88e02f1c303035268adeafaa7d41b4e55c363244', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '60d38b842f30969235e6d17ed4a9394ea1d5f481', value: "courier" }, "Courier"), h("option", { key: '94f13f530eed3b58557cc8f21a29bcd9faf48ddd', value: "helvetica" }, "Helvetica"), h("option", { key: '5ed34e08ce75ad09eae4a13b0f7954777cbd80a2', value: "verdana" }, "Verdana"))), h("div", { key: '3cc803cb4fc197f49c1f013707b51d8dd777fc88', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '17d2bd94b28f40fd3d99958f78599f46b670b0f5', id: "selectLeadingIcon", name: "text-size-icon" }), h("input", { key: 'd3da7becaae40a614e3830d7e0b8fe1ae0862a9e', id: "ls-toolbar-font-size", type: "number", min: "4", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 if (input.target.value === '')
                     return;
                 this.alter({ fontSize: input.target.value });
-            }, class: 'ls-dv-has-leading-icon' })), h("div", { key: '02da6c033e42a77b914bbbbfb171595ca5c81345', class: 'ls-dv-button-group' }, h("button", { key: '639542f1e98d4993341b83a26186c86cac7a4727', onClick: () => {
+            }, class: 'ls-dv-has-leading-icon' })), h("div", { key: '89671bf2c0be560096f7a4c30f34560835ba474f', class: 'ls-dv-button-group' }, h("button", { key: 'a9031769ea7f8341c2785bf7856616d15eb30242', onClick: () => {
                 this.alter({ align: 'left' });
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: '7d6d6d250cb615eeb454785f74da70775e9043f3', name: "menu-alt-2-icon" })), h("button", { key: 'afa2fc53bedd0b3b85b102cc113a78515260d554', onClick: () => {
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: 'a552e176a9b1eefa3d98b499d40a051c6890699a', name: "menu-alt-2-icon" })), h("button", { key: 'cd8fcf405d9e01b6ef05f73969bf5aa745a5cc5f', onClick: () => {
                 this.alter({ align: 'center' });
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '568ef51278adbe4aeb5b222456edea73e6857cc5', name: "menu-alt-5-icon" })), h("button", { key: '1493af110aa908defbe80ccaf06f889c55da0457', onClick: () => {
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '175863219aa3c0f2e5896b449af6b39d0c16ce35', name: "menu-alt-5-icon" })), h("button", { key: '9ad50c653dc8841f3d365efe6fd3f7990b98cdf5', onClick: () => {
                 this.alter({ align: 'right' });
-            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: 'd1b0a7941e026b8da9a36b8b2625226ffb065d88', name: "menu-alt-3-icon" }))))), h("ls-tooltip", { key: '50cd13a98e7cb172bb78b18d03b660bb6e0d838f', tooltipId: "ls-dv-tooltip" })));
+            }, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '5f43493886d11b50785b376286350c3dae6e2553', name: "menu-alt-3-icon" }))))), h("ls-tooltip", { key: '59262818661db8f250aa92a9a2c9b1014964d629', tooltipId: "ls-dv-tooltip" })));
     }
     static get watchers() { return {
         "dataItem": ["selectFieldsHandler"]
@@ -117,6 +117,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldFormat as L, defineCustomElement as d };
-//# sourceMappingURL=p-3MMDk3sy.js.map
+//# sourceMappingURL=p-DN9dmmkk.js.map
 
-//# sourceMappingURL=p-3MMDk3sy.js.map
+//# sourceMappingURL=p-DN9dmmkk.js.map

package/dist/components/{p-3MMDk3sy.js.map → p-DN9dmmkk.js.map}

@@ -1 +1 @@
-{"file":"p-3MMDk3sy.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,ulJAAulJ,CAAC;;MCS3mJ,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAIxB,IAAA,QAAQ;AAOR,IAAA,MAAM;;AAIE,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;QAC/C,KAAK,CAAC,eAAe,EAAE;AACzB,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,KAAoB,KAAI;QAC7C,KAAK,CAAC,eAAe,EAAE;AACzB,KAAC;;IAID,mBAAmB,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5B,YAAA,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,wBAAwB,CAAsB;AACrG,YAAA,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ;AAC7D,YAAA,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,sBAAsB,CAAqB;AACtG,YAAA,IAAI,WAAW;AAAE,gBAAA,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE;;;;;AAMpF,IAAA,KAAK,CAAC,IAAY,EAAA;AAChB,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QAEjB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAG;AACnD,YAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE;AACtE,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAoB,CAAC;AACtD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGzB,gBAAgB,GAAA;;IAGhB,eAAe,GAAG,MAAK;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;AAC/C,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC;QACjF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;AAC/C,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC;AACrF,QAAA,OAAO,EAAE,MAAM,EAAE,YAAY,IAAI,gBAAgB,EAAE,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,EAAE,QAAQ,EAAE,gBAAgB,GAAG,aAAa,GAAG,OAAO,EAAE;AAC7J,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACxC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,wBAAwB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAiB,iBAAA,EAAA,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAA,EAClH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,eAAe,EAAW,CAAA,EAC/D,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC;aACpE,EACD,KAAK,EAAE,wBAAwB,EAAA,EAE/B,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,QAAQ,EAAC,IAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,KAAK,OAAO,EAAE,KAAK,EAAE,OAAO,EAE9E,EAAA,OAAA,CAAA,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAe,EAAA,OAAA,CAAA,EACpC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAyB,EAAA,iBAAA,CAAA,EACxD,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAiB,EAAA,SAAA,CAAA,EACxC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAmB,EAAA,WAAA,CAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,CACjC,EACT,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,GAAW,CACtD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAiB,iBAAA,EAAA,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAA,EAChH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,gBAAgB,EAAW,CAAA,EAChE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,EACvC,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;oBAAE;AACrD,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;AACpE,aAAC,EACD,KAAK,EAAE,wBAAwB,GAC/B,CACE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAC9B,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC/B,aAAC,EAAA,iBAAA,EACe,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,EAAA,EAEtF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,iBAAiB,EAAA,CAAW,CACnC,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjC,aAAC,EAAA,iBAAA,EACe,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC,EAAA,EAExF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,iBAAiB,EAAA,CAAW,CACnC,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAChC,aAAC,EAAA,iBAAA,EACe,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,EAAA,EAEvF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC,CACL,CACF,CACP,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,KAC1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,wBAAwB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAiB,iBAAA,EAAA,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAA,EAClH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,EAAW,CAAA,EAC1D,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,eAAe,EAAW,CAAA,EAC/D,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC;AACrE,aAAC,EACD,KAAK,EAAE,wBAAwB,EAAA,EAE/B,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAe,EAAA,OAAA,CAAA,EACpC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAyB,EAAA,iBAAA,CAAA,EACxD,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAiB,EAAA,SAAA,CAAA,EACxC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAmB,EAAA,WAAA,CAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,CACjC,CACL,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAiB,iBAAA,EAAA,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAA,EAChH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,gBAAgB,EAAW,CAAA,EAChE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,EAChC,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;oBAAE;AACrD,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;AACpE,aAAC,EACD,KAAK,EAAE,wBAAwB,GAC/B,CACE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAC9B,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC/B,aAAC,EAAA,iBAAA,EACe,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,EAAA,EAEtF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,iBAAiB,EAAA,CAAW,CACnC,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjC,aAAC,EAAA,iBAAA,EACe,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC,EAAA,EAExF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,iBAAiB,EAAA,CAAW,CACnC,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;aAC/B,EAAA,iBAAA,EACe,eAAe,EAAuB,sBAAA,EAAA,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,EAAA,EAEvF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC,CACL,CAWF,CACP,EACD,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,SAAS,EAAC,eAAe,EAAG,CAAA,CACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-format/ls-field-format.scss?tag=ls-field-format&encapsulation=shadow","src/components/ls-field-format/ls-field-format.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: row;\n}\n\n.ls-dv-field-format-bar {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\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: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $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.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,\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='number'] {\n  width: max-content;\n  max-width: 3rem;\n\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}\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\n\n","import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { dvI18n } from '../../i18n/i18n';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-format',\n  styleUrl: 'ls-field-format.scss',\n  shadow: true,\n})\nexport class LsFieldFormat {\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Element() component: HTMLElement;\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  // Send selection changes to bars and panels if in use.\n  @Watch('dataItem')\n  selectFieldsHandler() {\n    if (this.dataItem.length > 0) {\n      var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select') as HTMLSelectElement;\n      if (selFont) selFont.value = this.allElementsSame()?.fontName;\n      var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n      if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n    }\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n\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  componentDidLoad() {\n  }\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return;\n    const firstFontName = this.dataItem[0].fontName;\n    const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n    const firstFontSize = this.dataItem[0].fontSize;\n    const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n    return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-dv-field-format-bar'}>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontfamily')}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface-icon\"></ls-icon>\n              <select\n                id=\"ls-toolbar-font-select\"\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              >\n                <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n                  Mixed\n                </option>\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n              <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n            </div>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontsize')}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"text-size-icon\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type='number'\n                min=\"4\"\n                value={this.allElementsSame()?.fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\n                  this.alter({ fontSize: (input.target as HTMLInputElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              />\n            </div>\n            <div class={'ls-dv-button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextleft')}\n              >\n                <ls-icon name=\"menu-alt-2-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextcenter')}\n              >\n                <ls-icon name=\"menu-alt-5-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextright')}\n              >\n                <ls-icon name=\"menu-alt-3-icon\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        )}\n        {this.dataItem && this.dataItem.length === 1 && (\n          <div class={'ls-dv-field-format-bar'}>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontfamily')}>\n              <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface-icon\"></ls-icon>\n              <select\n                id=\"ls-toolbar-font-select\"\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              >\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n            </div>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontsize')}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"text-size-icon\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type=\"number\"\n                min=\"4\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\n                  this.alter({ fontSize: (input.target as HTMLInputElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              />\n            </div>\n            <div class={'ls-dv-button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextleft')}\n              >\n                <ls-icon name=\"menu-alt-2-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextcenter')}\n              >\n                <ls-icon name=\"menu-alt-5-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextright')}\n              >\n                <ls-icon name=\"menu-alt-3-icon\"></ls-icon>\n              </button>\n            </div>\n\n            {/* <select\n              onChange={input => {\n                this.alter({ align: (input.target as HTMLSelectElement).value });\n              }}\n            >\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select> */}\n          </div>\n        )}\n        <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DN9dmmkk.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-format/ls-field-format.scss?tag=ls-field-format&encapsulation=shadow","src/components/ls-field-format/ls-field-format.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: row;\n}\n\n.ls-dv-field-format-bar {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\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: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $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.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,\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='number'] {\n  width: max-content;\n  max-width: 3rem;\n\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}\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\n\n","import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { dvI18n } from '../../i18n/i18n';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-format',\n  styleUrl: 'ls-field-format.scss',\n  shadow: true,\n})\nexport class LsFieldFormat {\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Element() component: HTMLElement;\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  // Send selection changes to bars and panels if in use.\n  @Watch('dataItem')\n  selectFieldsHandler() {\n    if (this.dataItem.length > 0) {\n      var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select') as HTMLSelectElement;\n      if (selFont) selFont.value = this.allElementsSame()?.fontName;\n      var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n      if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n    }\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n\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  componentDidLoad() {\n  }\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return;\n    const firstFontName = this.dataItem[0].fontName;\n    const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n    const firstFontSize = this.dataItem[0].fontSize;\n    const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n    return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-dv-field-format-bar'}>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontfamily')}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface-icon\"></ls-icon>\n              <select\n                id=\"ls-toolbar-font-select\"\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              >\n                <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n                  Mixed\n                </option>\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n              <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n            </div>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontsize')}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"text-size-icon\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type='number'\n                min=\"4\"\n                value={this.allElementsSame()?.fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\n                  this.alter({ fontSize: (input.target as HTMLInputElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              />\n            </div>\n            <div class={'ls-dv-button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextleft')}\n              >\n                <ls-icon name=\"menu-alt-2-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextcenter')}\n              >\n                <ls-icon name=\"menu-alt-5-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextright')}\n              >\n                <ls-icon name=\"menu-alt-3-icon\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        )}\n        {this.dataItem && this.dataItem.length === 1 && (\n          <div class={'ls-dv-field-format-bar'}>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontfamily')}>\n              <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface-icon\"></ls-icon>\n              <select\n                id=\"ls-toolbar-font-select\"\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              >\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n            </div>\n            <div class=\"ls-dv-input-wrapper\" data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.fontsize')}>\n              <ls-icon id=\"selectLeadingIcon\" name=\"text-size-icon\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type=\"number\"\n                min=\"4\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\n                  this.alter({ fontSize: (input.target as HTMLInputElement).value });\n                }}\n                class={'ls-dv-has-leading-icon'}\n              />\n            </div>\n            <div class={'ls-dv-button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextleft')}\n              >\n                <ls-icon name=\"menu-alt-2-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextcenter')}\n              >\n                <ls-icon name=\"menu-alt-5-icon\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip-id=\"ls-dv-tooltip\" data-tooltip-content={dvI18n.t('format.aligntextright')}\n              >\n                <ls-icon name=\"menu-alt-3-icon\"></ls-icon>\n              </button>\n            </div>\n\n            {/* <select\n              onChange={input => {\n                this.alter({ align: (input.target as HTMLSelectElement).value });\n              }}\n            >\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select> */}\n          </div>\n        )}\n        <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}