legalesign-document-viewer 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ls-compose-loader_7.cjs.entry.js +1 -1
- package/dist/cjs/ls-field-format_2.cjs.entry.js +10 -10
- package/dist/collection/components/ls-field-format/ls-field-format.js +10 -10
- package/dist/collection/components/ls-field-format/ls-field-format.js.map +1 -1
- package/dist/components/ls-document-viewer.js +3 -3
- package/dist/components/ls-field-format.js +1 -1
- package/dist/components/ls-statusbar.js +1 -1
- package/dist/components/ls-toolbar.js +1 -1
- package/dist/components/{p-BUAS2e6p.js → p--onI05IE.js} +12 -12
- package/dist/components/p--onI05IE.js.map +1 -0
- package/dist/components/{p-Cts0eCoL.js → p-C4nAOEBk.js} +3 -3
- package/dist/components/{p-Cts0eCoL.js.map → p-C4nAOEBk.js.map} +1 -1
- package/dist/components/{p-BrO24XkQ.js → p-CXfWNJjL.js} +3 -3
- package/dist/components/{p-BrO24XkQ.js.map → p-CXfWNJjL.js.map} +1 -1
- package/dist/esm/ls-compose-loader_7.entry.js +1 -1
- package/dist/esm/ls-field-format_2.entry.js +10 -10
- package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
- package/dist/ls-document-viewer/{p-21289573.entry.js → p-12f94755.entry.js} +2 -2
- package/dist/ls-document-viewer/p-de351297.entry.js +2 -0
- package/dist/ls-document-viewer/p-de351297.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/p-BUAS2e6p.js.map +0 -1
- package/dist/ls-document-viewer/p-c47ad3e6.entry.js +0 -2
- package/dist/ls-document-viewer/p-c47ad3e6.entry.js.map +0 -1
- /package/dist/ls-document-viewer/{p-21289573.entry.js.map → p-12f94755.entry.js.map} +0 -0
|
@@ -366,7 +366,7 @@ const LsSelectMenu = class {
|
|
|
366
366
|
};
|
|
367
367
|
LsSelectMenu.style = lsSelectMenuCss();
|
|
368
368
|
|
|
369
|
-
const version = "1.0.
|
|
369
|
+
const version = "1.0.6";
|
|
370
370
|
|
|
371
371
|
const lsStatusbarCss = () => `:host{position:absolute;z-index:1000;left:23.625rem;right:0.5rem;bottom:1rem;display:flex;flex-direction:row;gap:0.5rem;align-items:end;justify-content:space-between;height:2.25rem;overflow:visible}:host(.ls-dv-statusbar-preview){left:0;right:0;justify-content:center}.ls-dv-status-bar-group{display:flex;flex-direction:row;gap:0.5rem;align-items:end}.ls-dv-controls-bar{display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1.125rem;height:fit-content}.ls-dv-page-nav{margin-left:-6rem;position:relative}:host(.ls-dv-statusbar-preview) .ls-dv-page-nav{margin-left:0}*{margin:0;padding:0;box-sizing:border-box}.ls-dv-status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.625rem;padding:0 0.625rem;height:2.25rem}.ls-dv-controls-bar>:not(:nth-child(1)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.625rem}button:disabled{color:var(--gray-40, #d8d9dc);cursor:not-allowed}input[type=range]{-webkit-appearance:none;width:100%;height:0.5rem;background:var(--gray-20, #edeff2);border-radius:0.25rem;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0.5rem;height:0.5rem;background:var(--gray-70, #939599);border-radius:50%;cursor:pointer}input[type=range]::-moz-range-thumb{width:0.5rem;height:0.5rem;background:var(--gray-70, #939599);border:none;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-track{background:var(--gray-20, #edeff2);height:0.5rem;border-radius:0.25rem}input[type=range]::-webkit-slider-runnable-track{background:var(--gray-20, #edeff2);height:0.5rem;border-radius:0.25rem}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)}span{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}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6f7176);text-transform:capitalize}button.ls-dv-tertiary-grey:hover{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)}.ls-dv-zoom-level-btn{font-family:var(--font-family);font-size:var(--text-sm);font-weight:400;color:var(--gray-80, #6f7176);padding:0.25rem 0.375rem;border-radius:0.25rem;margin:0 -0.25rem}.ls-dv-zoom-level-btn:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-zoom-menu{position:absolute;width:6rem;bottom:3rem;left:1rem;background:white;border:1px solid var(--gray-30, #e0e2e5);border-radius:1rem;box-shadow:0px 4px 24px rgba(0, 0, 0, 0.12);padding:0.25rem;z-index:1001;display:flex;flex-direction:column;gap:0.25rem}.ls-dv-page-menu{left:auto;max-height:60cqh;overflow-y:auto}.ls-dv-zoom-menu-item{position:relative;font-family:var(--font-family);font-size:var(--text-sm);font-weight:400;color:var(--gray-80, #6f7176);padding:0.375rem 0.625rem;border-radius:0.825rem;display:flex;align-items:center;justify-content:space-between}.ls-dv-zoom-menu-item:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-zoom-menu-item.active{font-weight:500;color:var(--primary-70, #2134dc);background:var(--primary-10, #eff4ff)}.ls-dv-thumbnail-popover{position:absolute;bottom:3rem;right:-3rem;background:white;border:1px solid var(--gray-30, #e0e2e5);border-radius:1.75rem;box-shadow:0px 8px 24px rgba(0, 0, 0, 0.15);padding:0.75rem;z-index:1001;max-height:80cqh;overflow:hidden;display:flex;flex-direction:column}.ls-dv-thumbnail-grid{background:var(--gray-10, #f7f8fa);padding:0.75rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:1rem;overflow-y:auto;max-height:100%}.ls-dv-thumbnail-wrapper{display:flex;flex-direction:column;align-items:center;gap:0.25rem;cursor:pointer}.ls-dv-thumbnail-wrapper>span:last-child{font-size:var(--text-xs, 0.75rem);color:var(--gray-80, #6f7176);font-weight:500}.ls-dv-thumbnail{border:1px solid var(--gray-30, #e0e2e5);border-radius:0.5rem;cursor:pointer;transition:border-color 0.15s}.ls-dv-thumbnail:hover{border-color:var(--primary-40, #79adfc);box-shadow:0 0 0 2px rgba(163, 180, 249, 0.3)}.ls-dv-thumbnail.active{border-color:var(--primary-60, #4456f6);outline:0.25rem solid var(--primary-30, #9dc3fc);box-shadow:var(--shadow-md)}.ls-dv-thumbnail-dots{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin-top:0.25rem}.ls-dv-thumbnail-dot{width:0.5rem;height:0.5rem;border-radius:50%;display:inline-block;border:2px solid var(--dot-color-60);background-color:var(--dot-color-40);cursor:pointer;transition:background-color 0.15s, border-color 0.15s}.ls-dv-thumbnail-dot:hover{background-color:var(--dot-color-60);border-color:var(--dot-color-70)}.ls-dv-version{position:absolute;bottom:100%;right:0;color:var(--gray-50, #afb0b2);font-size:0.625rem;padding-bottom:0.25rem;display:block}:host(.ls-dv-statusbar-preview) .ls-dv-version{bottom:-1.25rem;margin-right:0.5rem}`;
|
|
372
372
|
|
|
@@ -52,27 +52,27 @@ const LsFieldFormat = class {
|
|
|
52
52
|
render() {
|
|
53
53
|
return (index.h(index.Host, { key: '67f8db275fa6516f07620f0df259906e9d8ae470' }, this.dataItem && this.dataItem.length > 1 && (index.h("div", { key: '3ce7162ceaf8a026e4a7241ef40dfead41a5b1c1', class: 'ls-dv-field-format-bar' }, index.h("div", { key: 'f30f132d45c15ba7f68ef2c8783dfa28c15141cf', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontfamily') }, index.h("ls-icon", { key: '08c73e77c38361bc2d37ef15c3e06cf813618961', id: "selectLeadingIcon", name: "typeface-icon" }), index.h("select", { key: '018191b86e12770767a551688aeeecbdbe51a4e2', id: "ls-toolbar-font-select", onChange: input => {
|
|
54
54
|
this.alter({ fontName: input.target.value });
|
|
55
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, index.h("option", { key: '93b0f9b75f41876d63a1d622ca94b9b5e9dfa908', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, i18n.dvI18n.t('fieldproperties.mixed')), index.h("option", { key: 'e9faa9dfaf3ff75a3ce510e64419ac093acccd25', value: "arial" }, "Arial"), index.h("option", { key: '
|
|
55
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, index.h("option", { key: '93b0f9b75f41876d63a1d622ca94b9b5e9dfa908', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, i18n.dvI18n.t('fieldproperties.mixed')), index.h("option", { key: 'e9faa9dfaf3ff75a3ce510e64419ac093acccd25', value: "arial" }, "Arial"), index.h("option", { key: '7b280f5f8efc88446af24e97b711516ac4008be1', value: "liberation" }, "Liberation Sans"), index.h("option", { key: '18c03b38a08bfee4e046a38761c3483aec71a77b', value: "courier" }, "Courier"), index.h("option", { key: 'e7072bfff3ada9f0024313e3f43d0245c6079b28', value: "helvetica" }, "Helvetica"), index.h("option", { key: '439c95cc62ea7c161959a374298c9d47a8204546', value: "verdana" }, "Verdana")), index.h("ls-icon", { key: '95baaab584a60fc85d280c15f3bd9c78b0622e58', id: "selectorIcon", name: "selector-icon" })), index.h("div", { key: '9bbda6ae453b07da37cdaeebb964ade7803254bf', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontsize') }, index.h("ls-icon", { key: '46c03f524378b946e6f32ce82e525f08fa92ab1a', id: "selectLeadingIcon", name: "text-size-icon" }), index.h("select", { key: '3dd39f77e2aaab4caad2de89bc6a5f703e2e312a', id: "ls-toolbar-font-size", onChange: input => {
|
|
56
56
|
this.alter({ fontSize: parseInt(input.target.value) });
|
|
57
57
|
input.target.blur();
|
|
58
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, index.h("option", { key: '
|
|
58
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, index.h("option", { key: 'f89b1abc0a8bd45e109cd5ba6d4d121e7e639d63', disabled: true, selected: this.allElementsSame()?.fontSize === 'mixed', value: 'mixed' }, i18n.dvI18n.t('fieldproperties.mixed')), this.fontSizes.map(size => (index.h("option", { value: size, selected: this.allElementsSame()?.fontSize === size }, size)))), index.h("ls-icon", { key: 'a37b3ecdff064a154bce9b4c0bf249c2009a1c0e', id: "selectorIcon", name: "selector-icon" })), index.h("div", { key: '28f5d1dde6f30624f2ebc0175bfeea629732cdcb', class: 'ls-dv-button-group' }, index.h("button", { key: '64ef281302a4218328cd8887c52bbc850629425c', class: { 'ls-dv-active': this.allElementsSame()?.align === 'left' }, onClick: () => {
|
|
59
59
|
this.alter({ align: 'left' });
|
|
60
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextleft') }, index.h("ls-icon", { key: '
|
|
60
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextleft') }, index.h("ls-icon", { key: '985ea95bf99b920e8671847c9bf50533c294498c', name: "menu-alt-2-icon" })), index.h("button", { key: '835b802969be4c4d68db935d1e7c96a6754b2d15', class: { 'ls-dv-active': this.allElementsSame()?.align === 'center' }, onClick: () => {
|
|
61
61
|
this.alter({ align: 'center' });
|
|
62
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextcenter') }, index.h("ls-icon", { key: '
|
|
62
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextcenter') }, index.h("ls-icon", { key: '7a549d92ec713eead0a40144a0a0e9073d51fbaf', name: "menu-alt-5-icon" })), index.h("button", { key: '161d87c93f040f2a0dcf7736346d24be594d58f9', class: { 'ls-dv-active': this.allElementsSame()?.align === 'right' }, onClick: () => {
|
|
63
63
|
this.alter({ align: 'right' });
|
|
64
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextright') }, index.h("ls-icon", { key: '
|
|
64
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextright') }, index.h("ls-icon", { key: 'e0f846262279b2c0dc2424aa9c8f101cfcfee1b9', name: "menu-alt-3-icon" }))))), this.dataItem && this.dataItem.length === 1 && (index.h("div", { key: '9d3b885f45d74ccfe58c5fd6c6b6899d16d21c1d', class: 'ls-dv-field-format-bar' }, index.h("div", { key: '8786b8c864cab4f984a5b93d53f698c66e94a3bc', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontfamily') }, index.h("ls-icon", { key: '585579e38e58636f437d6411825f80f994a1a21b', id: "selectorIcon", name: "selector-icon" }), index.h("ls-icon", { key: '507c013a74531a6b52c4624b828e5e70d53270ad', id: "selectLeadingIcon", name: "typeface-icon" }), index.h("select", { key: '3878862175dbd05a7f65f40c918e3282e824558d', id: "ls-toolbar-font-select", onChange: input => {
|
|
65
65
|
this.alter({ fontName: input.target.value });
|
|
66
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, index.h("option", { key: '
|
|
66
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, index.h("option", { key: '6b57efb90ef6a3b2ba2d13d5f714b6a1523e41d1', value: "arial" }, "Arial"), index.h("option", { key: '95e762ed828bc06aec4967109326989bc860172c', value: "liberation" }, "Liberation Sans"), index.h("option", { key: '42c6cd2a625aa96276ef080133c59069d692458c', value: "courier" }, "Courier"), index.h("option", { key: 'a70cf28e4ae339be15695fb1ac318504addb1668', value: "helvetica" }, "Helvetica"), index.h("option", { key: 'a74abcdacc483826d83ea75279ab54b2182906ce', value: "verdana" }, "Verdana"))), index.h("div", { key: '6d86948ef41adaa0669fc8f509a0f10f69d8acf7', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.fontsize') }, index.h("ls-icon", { key: '2e207b573f445015d4abebec892f66ca80301299', id: "selectLeadingIcon", name: "text-size-icon" }), index.h("select", { key: '10de2be7b36eaf872f06641411ba73fb64f7e377', id: "ls-toolbar-font-size", onChange: input => {
|
|
67
67
|
this.alter({ fontSize: parseInt(input.target.value) });
|
|
68
68
|
input.target.blur();
|
|
69
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, this.fontSizes.map(size => (index.h("option", { value: size, selected: this.dataItem[0].fontSize === size }, size)))), index.h("ls-icon", { key: '
|
|
69
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, this.fontSizes.map(size => (index.h("option", { value: size, selected: this.dataItem[0].fontSize === size }, size)))), index.h("ls-icon", { key: '071e07610b965de760746c14cc28f629f697ea04', id: "selectorIcon", name: "selector-icon" })), index.h("div", { key: '4451f71ae8da401631636b6fda37aa6e3d921e8d', class: 'ls-dv-button-group' }, index.h("button", { key: 'b890d5ec32ec0986a5728823e92cfd186f69ca3f', class: { 'ls-dv-active': this.dataItem[0].align === 'left' || !this.dataItem[0].align }, onClick: () => {
|
|
70
70
|
this.alter({ align: 'left' });
|
|
71
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextleft') }, index.h("ls-icon", { key: '
|
|
71
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextleft') }, index.h("ls-icon", { key: 'd88930fd3e0f1ec3493c520a749f7f3ab517d700', name: "menu-alt-2-icon" })), index.h("button", { key: '69607fbf8ddfb0e01d5c8a9c730d2175ebed8095', class: { 'ls-dv-active': this.dataItem[0].align === 'center' }, onClick: () => {
|
|
72
72
|
this.alter({ align: 'center' });
|
|
73
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextcenter') }, index.h("ls-icon", { key: '
|
|
73
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextcenter') }, index.h("ls-icon", { key: 'a238a5647c131c1a640e9fb54bcbfc3e58da392a', name: "menu-alt-5-icon" })), index.h("button", { key: 'edcfbf372e19a5a3f6d2aacf94f79645d38c0216', class: { 'ls-dv-active': this.dataItem[0].align === 'right' }, onClick: () => {
|
|
74
74
|
this.alter({ align: 'right' });
|
|
75
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextright') }, index.h("ls-icon", { key: '
|
|
75
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": i18n.dvI18n.t('format.aligntextright') }, index.h("ls-icon", { key: '4fc79e1f1befbce488049d47d420a70c09447832', name: "menu-alt-3-icon" }))))), index.h("ls-tooltip", { key: '649cfe25ea3da1e2605b28c13ca304f9f2865aa0', tooltipId: "ls-dv-tooltip" })));
|
|
76
76
|
}
|
|
77
77
|
static get watchers() { return {
|
|
78
78
|
"dataItem": ["selectFieldsHandler"]
|
|
@@ -42,27 +42,27 @@ export class LsFieldFormat {
|
|
|
42
42
|
render() {
|
|
43
43
|
return (h(Host, { key: '67f8db275fa6516f07620f0df259906e9d8ae470' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '3ce7162ceaf8a026e4a7241ef40dfead41a5b1c1', class: 'ls-dv-field-format-bar' }, h("div", { key: 'f30f132d45c15ba7f68ef2c8783dfa28c15141cf', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: '08c73e77c38361bc2d37ef15c3e06cf813618961', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '018191b86e12770767a551688aeeecbdbe51a4e2', id: "ls-toolbar-font-select", onChange: input => {
|
|
44
44
|
this.alter({ fontName: input.target.value });
|
|
45
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '93b0f9b75f41876d63a1d622ca94b9b5e9dfa908', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, dvI18n.t('fieldproperties.mixed')), h("option", { key: 'e9faa9dfaf3ff75a3ce510e64419ac093acccd25', value: "arial" }, "Arial"), h("option", { key: '
|
|
45
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '93b0f9b75f41876d63a1d622ca94b9b5e9dfa908', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, dvI18n.t('fieldproperties.mixed')), h("option", { key: 'e9faa9dfaf3ff75a3ce510e64419ac093acccd25', value: "arial" }, "Arial"), h("option", { key: '7b280f5f8efc88446af24e97b711516ac4008be1', value: "liberation" }, "Liberation Sans"), h("option", { key: '18c03b38a08bfee4e046a38761c3483aec71a77b', value: "courier" }, "Courier"), h("option", { key: 'e7072bfff3ada9f0024313e3f43d0245c6079b28', value: "helvetica" }, "Helvetica"), h("option", { key: '439c95cc62ea7c161959a374298c9d47a8204546', value: "verdana" }, "Verdana")), h("ls-icon", { key: '95baaab584a60fc85d280c15f3bd9c78b0622e58', id: "selectorIcon", name: "selector-icon" })), h("div", { key: '9bbda6ae453b07da37cdaeebb964ade7803254bf', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '46c03f524378b946e6f32ce82e525f08fa92ab1a', id: "selectLeadingIcon", name: "text-size-icon" }), h("select", { key: '3dd39f77e2aaab4caad2de89bc6a5f703e2e312a', id: "ls-toolbar-font-size", onChange: input => {
|
|
46
46
|
this.alter({ fontSize: parseInt(input.target.value) });
|
|
47
47
|
input.target.blur();
|
|
48
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '
|
|
48
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: 'f89b1abc0a8bd45e109cd5ba6d4d121e7e639d63', disabled: true, selected: this.allElementsSame()?.fontSize === 'mixed', value: 'mixed' }, dvI18n.t('fieldproperties.mixed')), this.fontSizes.map(size => (h("option", { value: size, selected: this.allElementsSame()?.fontSize === size }, size)))), h("ls-icon", { key: 'a37b3ecdff064a154bce9b4c0bf249c2009a1c0e', id: "selectorIcon", name: "selector-icon" })), h("div", { key: '28f5d1dde6f30624f2ebc0175bfeea629732cdcb', class: 'ls-dv-button-group' }, h("button", { key: '64ef281302a4218328cd8887c52bbc850629425c', class: { 'ls-dv-active': this.allElementsSame()?.align === 'left' }, onClick: () => {
|
|
49
49
|
this.alter({ align: 'left' });
|
|
50
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: '
|
|
50
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: '985ea95bf99b920e8671847c9bf50533c294498c', name: "menu-alt-2-icon" })), h("button", { key: '835b802969be4c4d68db935d1e7c96a6754b2d15', class: { 'ls-dv-active': this.allElementsSame()?.align === 'center' }, onClick: () => {
|
|
51
51
|
this.alter({ align: 'center' });
|
|
52
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '
|
|
52
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '7a549d92ec713eead0a40144a0a0e9073d51fbaf', name: "menu-alt-5-icon" })), h("button", { key: '161d87c93f040f2a0dcf7736346d24be594d58f9', class: { 'ls-dv-active': this.allElementsSame()?.align === 'right' }, onClick: () => {
|
|
53
53
|
this.alter({ align: 'right' });
|
|
54
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '
|
|
54
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: 'e0f846262279b2c0dc2424aa9c8f101cfcfee1b9', name: "menu-alt-3-icon" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '9d3b885f45d74ccfe58c5fd6c6b6899d16d21c1d', class: 'ls-dv-field-format-bar' }, h("div", { key: '8786b8c864cab4f984a5b93d53f698c66e94a3bc', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: '585579e38e58636f437d6411825f80f994a1a21b', id: "selectorIcon", name: "selector-icon" }), h("ls-icon", { key: '507c013a74531a6b52c4624b828e5e70d53270ad', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '3878862175dbd05a7f65f40c918e3282e824558d', id: "ls-toolbar-font-select", onChange: input => {
|
|
55
55
|
this.alter({ fontName: input.target.value });
|
|
56
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '
|
|
56
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '6b57efb90ef6a3b2ba2d13d5f714b6a1523e41d1', value: "arial" }, "Arial"), h("option", { key: '95e762ed828bc06aec4967109326989bc860172c', value: "liberation" }, "Liberation Sans"), h("option", { key: '42c6cd2a625aa96276ef080133c59069d692458c', value: "courier" }, "Courier"), h("option", { key: 'a70cf28e4ae339be15695fb1ac318504addb1668', value: "helvetica" }, "Helvetica"), h("option", { key: 'a74abcdacc483826d83ea75279ab54b2182906ce', value: "verdana" }, "Verdana"))), h("div", { key: '6d86948ef41adaa0669fc8f509a0f10f69d8acf7', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '2e207b573f445015d4abebec892f66ca80301299', id: "selectLeadingIcon", name: "text-size-icon" }), h("select", { key: '10de2be7b36eaf872f06641411ba73fb64f7e377', id: "ls-toolbar-font-size", onChange: input => {
|
|
57
57
|
this.alter({ fontSize: parseInt(input.target.value) });
|
|
58
58
|
input.target.blur();
|
|
59
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, this.fontSizes.map(size => (h("option", { value: size, selected: this.dataItem[0].fontSize === size }, size)))), h("ls-icon", { key: '
|
|
59
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, this.fontSizes.map(size => (h("option", { value: size, selected: this.dataItem[0].fontSize === size }, size)))), h("ls-icon", { key: '071e07610b965de760746c14cc28f629f697ea04', id: "selectorIcon", name: "selector-icon" })), h("div", { key: '4451f71ae8da401631636b6fda37aa6e3d921e8d', class: 'ls-dv-button-group' }, h("button", { key: 'b890d5ec32ec0986a5728823e92cfd186f69ca3f', class: { 'ls-dv-active': this.dataItem[0].align === 'left' || !this.dataItem[0].align }, onClick: () => {
|
|
60
60
|
this.alter({ align: 'left' });
|
|
61
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: '
|
|
61
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: 'd88930fd3e0f1ec3493c520a749f7f3ab517d700', name: "menu-alt-2-icon" })), h("button", { key: '69607fbf8ddfb0e01d5c8a9c730d2175ebed8095', class: { 'ls-dv-active': this.dataItem[0].align === 'center' }, onClick: () => {
|
|
62
62
|
this.alter({ align: 'center' });
|
|
63
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '
|
|
63
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: 'a238a5647c131c1a640e9fb54bcbfc3e58da392a', name: "menu-alt-5-icon" })), h("button", { key: 'edcfbf372e19a5a3f6d2aacf94f79645d38c0216', class: { 'ls-dv-active': this.dataItem[0].align === 'right' }, onClick: () => {
|
|
64
64
|
this.alter({ align: 'right' });
|
|
65
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '
|
|
65
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '4fc79e1f1befbce488049d47d420a70c09447832', name: "menu-alt-3-icon" }))))), h("ls-tooltip", { key: '649cfe25ea3da1e2605b28c13ca304f9f2865aa0', tooltipId: "ls-dv-tooltip" })));
|
|
66
66
|
}
|
|
67
67
|
static get is() { return "ls-field-format"; }
|
|
68
68
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"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","sourcesContent":["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 readonly fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 64, 72, 124];\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 HTMLSelectElement;\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 const firstAlign = this.dataItem[0].align || 'left';\n const allAlignSame = this.dataItem.every(item => (item.align || 'left') === firstAlign);\n return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed', align: allAlignSame ? firstAlign : 'mixed' };\n };\n\n render() {\n return (\n <Host>\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 ls-dv-has-trailing-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n {dvI18n.t('fieldproperties.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 <select\n id=\"ls-toolbar-font-size\"\n onChange={input => {\n this.alter({ fontSize: parseInt((input.target as HTMLSelectElement).value) });\n (input.target as HTMLElement).blur();\n }}\n class={'ls-dv-has-leading-icon ls-dv-has-trailing-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontSize === 'mixed'} value={'mixed'}>\n {dvI18n.t('fieldproperties.mixed')}\n </option>\n {this.fontSizes.map(size => (\n <option value={size} selected={this.allElementsSame()?.fontSize === size}>{size}</option>\n ))}\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n </div>\n <div class={'ls-dv-button-group'}>\n <button\n class={{ 'ls-dv-active': this.allElementsSame()?.align === 'left' }}\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 class={{ 'ls-dv-active': this.allElementsSame()?.align === 'center' }}\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 class={{ 'ls-dv-active': this.allElementsSame()?.align === 'right' }}\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 ls-dv-has-trailing-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 <select\n id=\"ls-toolbar-font-size\"\n onChange={input => {\n this.alter({ fontSize: parseInt((input.target as HTMLSelectElement).value) });\n (input.target as HTMLElement).blur();\n }}\n class={'ls-dv-has-leading-icon ls-dv-has-trailing-icon'}\n >\n {this.fontSizes.map(size => (\n <option value={size} selected={this.dataItem[0].fontSize === size}>{size}</option>\n ))}\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n </div>\n <div class={'ls-dv-button-group'}>\n <button\n class={{ 'ls-dv-active': this.dataItem[0].align === 'left' || !this.dataItem[0].align }}\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 class={{ 'ls-dv-active': this.dataItem[0].align === 'center' }}\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 class={{ 'ls-dv-active': this.dataItem[0].align === 'right' }}\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"]}
|
|
1
|
+
{"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAQzC,MAAM,OAAO,aAAa;IAIxB,QAAQ,CAAiB;IAOzB,MAAM,CAAgC;IAE3B,SAAS,CAAc;IAEjB,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAEzF,uDAAuD;IAEvD,mBAAmB;QACjB,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,wBAAwB,CAAsB,CAAC;YACtG,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,CAAC;YAC9D,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,sBAAsB,CAAsB,CAAC;YACxG,IAAI,WAAW;gBAAE,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;QACpF,CAAC;IACH,CAAC;IAED,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,gBAAgB;IAChB,CAAC;IAED,eAAe,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACzD,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAChD,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC;QACtF,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC;QACpD,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,UAAU,CAAC,CAAC;QACxF,OAAO,EAAE,MAAM,EAAE,YAAY,IAAI,gBAAgB,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;IAC1M,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5C,4DAAK,KAAK,EAAE,wBAAwB;gBAClC,4DAAK,KAAK,EAAC,qBAAqB,qBAAiB,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBAClH,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,eAAe,GAAW;oBAC/D,+DACE,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACtE,CAAC,EACD,KAAK,EAAE,gDAAgD;wBAEvD,+DAAQ,QAAQ,QAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,KAAK,OAAO,EAAE,KAAK,EAAE,OAAO,IACpF,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAC3B;wBACT,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,YAAY,sBAAyB;wBACnD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC;oBACT,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,GAAW,CACtD;gBACN,4DAAK,KAAK,EAAC,qBAAqB,qBAAiB,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBAChH,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,gBAAgB,GAAW;oBAChE,+DACE,EAAE,EAAC,sBAAsB,EACzB,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAE,KAAK,CAAC,MAA4B,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;4BAC7E,KAAK,CAAC,MAAsB,CAAC,IAAI,EAAE,CAAC;wBACvC,CAAC,EACD,KAAK,EAAE,gDAAgD;wBAEvD,+DAAQ,QAAQ,QAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,KAAK,OAAO,EAAE,KAAK,EAAE,OAAO,IACpF,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAC3B;wBACR,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,KAAK,IAAI,IAAG,IAAI,CAAU,CAC1F,CAAC,CACK;oBACT,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,GAAW,CACtD;gBACN,4DAAK,KAAK,EAAE,oBAAoB;oBAC9B,+DACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,KAAK,MAAM,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;wBAChC,CAAC,qBACe,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC;wBAEtF,gEAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC;oBACT,+DACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,KAAK,QAAQ,EAAE,EACrE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;wBAClC,CAAC,qBACe,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC;wBAExF,gEAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC;oBACT,+DACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,KAAK,OAAO,EAAE,EACpE,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;wBACjC,CAAC,qBACe,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC;wBAEvF,gEAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC,CACL,CACF,CACP;YACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAC9C,4DAAK,KAAK,EAAE,wBAAwB;gBAClC,4DAAK,KAAK,EAAC,qBAAqB,qBAAiB,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBAClH,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,GAAW;oBAC1D,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,eAAe,GAAW;oBAC/D,+DACE,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAC;wBACtE,CAAC,EACD,KAAK,EAAE,gDAAgD;wBAEvD,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,YAAY,sBAAyB;wBACnD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC,CACL;gBACN,4DAAK,KAAK,EAAC,qBAAqB,qBAAiB,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBAChH,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,gBAAgB,GAAW;oBAChE,+DACE,EAAE,EAAC,sBAAsB,EACzB,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAE,KAAK,CAAC,MAA4B,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;4BAC7E,KAAK,CAAC,MAAsB,CAAC,IAAI,EAAE,CAAC;wBACvC,CAAC,EACD,KAAK,EAAE,gDAAgD,IAEtD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,IAAG,IAAI,CAAU,CACnF,CAAC,CACK;oBACT,gEAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,GAAW,CACtD;gBACN,4DAAK,KAAK,EAAE,oBAAoB;oBAC9B,+DACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EACvF,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;wBAChC,CAAC,qBACe,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC;wBAEtF,gEAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC;oBACT,+DACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;wBAClC,CAAC,qBACe,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC;wBAExF,gEAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC;oBACT,+DACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,EAAE,EAC7D,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;wBACjC,CAAC,qBACe,eAAe,0BAAuB,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC;wBAEvF,gEAAS,IAAI,EAAC,iBAAiB,GAAW,CACnC,CACL,CAWF,CACP;YACD,mEAAY,SAAS,EAAC,eAAe,GAAG,CACnC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 readonly fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 64, 72, 124];\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 HTMLSelectElement;\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 const firstAlign = this.dataItem[0].align || 'left';\n const allAlignSame = this.dataItem.every(item => (item.align || 'left') === firstAlign);\n return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed', align: allAlignSame ? firstAlign : 'mixed' };\n };\n\n render() {\n return (\n <Host>\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 ls-dv-has-trailing-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n {dvI18n.t('fieldproperties.mixed')}\n </option>\n <option value=\"arial\">Arial</option>\n <option value=\"liberation\">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 <select\n id=\"ls-toolbar-font-size\"\n onChange={input => {\n this.alter({ fontSize: parseInt((input.target as HTMLSelectElement).value) });\n (input.target as HTMLElement).blur();\n }}\n class={'ls-dv-has-leading-icon ls-dv-has-trailing-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontSize === 'mixed'} value={'mixed'}>\n {dvI18n.t('fieldproperties.mixed')}\n </option>\n {this.fontSizes.map(size => (\n <option value={size} selected={this.allElementsSame()?.fontSize === size}>{size}</option>\n ))}\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n </div>\n <div class={'ls-dv-button-group'}>\n <button\n class={{ 'ls-dv-active': this.allElementsSame()?.align === 'left' }}\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 class={{ 'ls-dv-active': this.allElementsSame()?.align === 'center' }}\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 class={{ 'ls-dv-active': this.allElementsSame()?.align === 'right' }}\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 ls-dv-has-trailing-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation\">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 <select\n id=\"ls-toolbar-font-size\"\n onChange={input => {\n this.alter({ fontSize: parseInt((input.target as HTMLSelectElement).value) });\n (input.target as HTMLElement).blur();\n }}\n class={'ls-dv-has-leading-icon ls-dv-has-trailing-icon'}\n >\n {this.fontSizes.map(size => (\n <option value={size} selected={this.dataItem[0].fontSize === size}>{size}</option>\n ))}\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n </div>\n <div class={'ls-dv-button-group'}>\n <button\n class={{ 'ls-dv-active': this.dataItem[0].align === 'left' || !this.dataItem[0].align }}\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 class={{ 'ls-dv-active': this.dataItem[0].align === 'center' }}\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 class={{ 'ls-dv-active': this.dataItem[0].align === 'right' }}\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"]}
|
|
@@ -16,7 +16,7 @@ import { d as defineCustomElement$R } from './p-DRDChAg6.js';
|
|
|
16
16
|
import { d as defineCustomElement$Q } from './p-BJoHocUQ.js';
|
|
17
17
|
import { d as defineCustomElement$P } from './p-DkV1l_zw.js';
|
|
18
18
|
import { d as defineCustomElement$N } from './p-CSxx3aLG.js';
|
|
19
|
-
import { d as defineCustomElement$M } from './p
|
|
19
|
+
import { d as defineCustomElement$M } from './p--onI05IE.js';
|
|
20
20
|
import { d as defineCustomElement$L } from './p-Dab8K5mi.js';
|
|
21
21
|
import { d as defineCustomElement$K } from './p-B-P0RM5X.js';
|
|
22
22
|
import { d as defineCustomElement$J } from './p-BgIA-QAy.js';
|
|
@@ -54,11 +54,11 @@ import { d as defineCustomElement$e } from './p-Qxe4qT6a.js';
|
|
|
54
54
|
import { d as defineCustomElement$d } from './p-CgFpE1fV.js';
|
|
55
55
|
import { d as defineCustomElement$c } from './p-CF40f_5M.js';
|
|
56
56
|
import { d as defineCustomElement$b } from './p-Dl8z1tmj.js';
|
|
57
|
-
import { d as defineCustomElement$a } from './p-
|
|
57
|
+
import { d as defineCustomElement$a } from './p-CXfWNJjL.js';
|
|
58
58
|
import { d as defineCustomElement$9 } from './p-CM71cfRg.js';
|
|
59
59
|
import { d as defineCustomElement$8 } from './p-t_ow9YJD.js';
|
|
60
60
|
import { d as defineCustomElement$7 } from './p-BGf2weVY.js';
|
|
61
|
-
import { d as defineCustomElement$6 } from './p-
|
|
61
|
+
import { d as defineCustomElement$6 } from './p-C4nAOEBk.js';
|
|
62
62
|
import { d as defineCustomElement$5 } from './p-BIGiHXfV.js';
|
|
63
63
|
import { d as defineCustomElement$4 } from './p-XnnsjcVC.js';
|
|
64
64
|
import { d as defineCustomElement$3 } from './p-cjANxX0x.js';
|
|
@@ -55,27 +55,27 @@ const LsFieldFormat = /*@__PURE__*/ proxyCustomElement(class LsFieldFormat exten
|
|
|
55
55
|
render() {
|
|
56
56
|
return (h(Host, { key: '67f8db275fa6516f07620f0df259906e9d8ae470' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '3ce7162ceaf8a026e4a7241ef40dfead41a5b1c1', class: 'ls-dv-field-format-bar' }, h("div", { key: 'f30f132d45c15ba7f68ef2c8783dfa28c15141cf', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: '08c73e77c38361bc2d37ef15c3e06cf813618961', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '018191b86e12770767a551688aeeecbdbe51a4e2', id: "ls-toolbar-font-select", onChange: input => {
|
|
57
57
|
this.alter({ fontName: input.target.value });
|
|
58
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '93b0f9b75f41876d63a1d622ca94b9b5e9dfa908', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, dvI18n.t('fieldproperties.mixed')), h("option", { key: 'e9faa9dfaf3ff75a3ce510e64419ac093acccd25', value: "arial" }, "Arial"), h("option", { key: '
|
|
58
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '93b0f9b75f41876d63a1d622ca94b9b5e9dfa908', disabled: true, selected: this.allElementsSame()?.fontName === 'mixed', value: 'mixed' }, dvI18n.t('fieldproperties.mixed')), h("option", { key: 'e9faa9dfaf3ff75a3ce510e64419ac093acccd25', value: "arial" }, "Arial"), h("option", { key: '7b280f5f8efc88446af24e97b711516ac4008be1', value: "liberation" }, "Liberation Sans"), h("option", { key: '18c03b38a08bfee4e046a38761c3483aec71a77b', value: "courier" }, "Courier"), h("option", { key: 'e7072bfff3ada9f0024313e3f43d0245c6079b28', value: "helvetica" }, "Helvetica"), h("option", { key: '439c95cc62ea7c161959a374298c9d47a8204546', value: "verdana" }, "Verdana")), h("ls-icon", { key: '95baaab584a60fc85d280c15f3bd9c78b0622e58', id: "selectorIcon", name: "selector-icon" })), h("div", { key: '9bbda6ae453b07da37cdaeebb964ade7803254bf', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '46c03f524378b946e6f32ce82e525f08fa92ab1a', id: "selectLeadingIcon", name: "text-size-icon" }), h("select", { key: '3dd39f77e2aaab4caad2de89bc6a5f703e2e312a', id: "ls-toolbar-font-size", onChange: input => {
|
|
59
59
|
this.alter({ fontSize: parseInt(input.target.value) });
|
|
60
60
|
input.target.blur();
|
|
61
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '
|
|
61
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: 'f89b1abc0a8bd45e109cd5ba6d4d121e7e639d63', disabled: true, selected: this.allElementsSame()?.fontSize === 'mixed', value: 'mixed' }, dvI18n.t('fieldproperties.mixed')), this.fontSizes.map(size => (h("option", { value: size, selected: this.allElementsSame()?.fontSize === size }, size)))), h("ls-icon", { key: 'a37b3ecdff064a154bce9b4c0bf249c2009a1c0e', id: "selectorIcon", name: "selector-icon" })), h("div", { key: '28f5d1dde6f30624f2ebc0175bfeea629732cdcb', class: 'ls-dv-button-group' }, h("button", { key: '64ef281302a4218328cd8887c52bbc850629425c', class: { 'ls-dv-active': this.allElementsSame()?.align === 'left' }, onClick: () => {
|
|
62
62
|
this.alter({ align: 'left' });
|
|
63
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: '
|
|
63
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: '985ea95bf99b920e8671847c9bf50533c294498c', name: "menu-alt-2-icon" })), h("button", { key: '835b802969be4c4d68db935d1e7c96a6754b2d15', class: { 'ls-dv-active': this.allElementsSame()?.align === 'center' }, onClick: () => {
|
|
64
64
|
this.alter({ align: 'center' });
|
|
65
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '
|
|
65
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '7a549d92ec713eead0a40144a0a0e9073d51fbaf', name: "menu-alt-5-icon" })), h("button", { key: '161d87c93f040f2a0dcf7736346d24be594d58f9', class: { 'ls-dv-active': this.allElementsSame()?.align === 'right' }, onClick: () => {
|
|
66
66
|
this.alter({ align: 'right' });
|
|
67
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '
|
|
67
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: 'e0f846262279b2c0dc2424aa9c8f101cfcfee1b9', name: "menu-alt-3-icon" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '9d3b885f45d74ccfe58c5fd6c6b6899d16d21c1d', class: 'ls-dv-field-format-bar' }, h("div", { key: '8786b8c864cab4f984a5b93d53f698c66e94a3bc', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontfamily') }, h("ls-icon", { key: '585579e38e58636f437d6411825f80f994a1a21b', id: "selectorIcon", name: "selector-icon" }), h("ls-icon", { key: '507c013a74531a6b52c4624b828e5e70d53270ad', id: "selectLeadingIcon", name: "typeface-icon" }), h("select", { key: '3878862175dbd05a7f65f40c918e3282e824558d', id: "ls-toolbar-font-select", onChange: input => {
|
|
68
68
|
this.alter({ fontName: input.target.value });
|
|
69
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '
|
|
69
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, h("option", { key: '6b57efb90ef6a3b2ba2d13d5f714b6a1523e41d1', value: "arial" }, "Arial"), h("option", { key: '95e762ed828bc06aec4967109326989bc860172c', value: "liberation" }, "Liberation Sans"), h("option", { key: '42c6cd2a625aa96276ef080133c59069d692458c', value: "courier" }, "Courier"), h("option", { key: 'a70cf28e4ae339be15695fb1ac318504addb1668', value: "helvetica" }, "Helvetica"), h("option", { key: 'a74abcdacc483826d83ea75279ab54b2182906ce', value: "verdana" }, "Verdana"))), h("div", { key: '6d86948ef41adaa0669fc8f509a0f10f69d8acf7', class: "ls-dv-input-wrapper", "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.fontsize') }, h("ls-icon", { key: '2e207b573f445015d4abebec892f66ca80301299', id: "selectLeadingIcon", name: "text-size-icon" }), h("select", { key: '10de2be7b36eaf872f06641411ba73fb64f7e377', id: "ls-toolbar-font-size", onChange: input => {
|
|
70
70
|
this.alter({ fontSize: parseInt(input.target.value) });
|
|
71
71
|
input.target.blur();
|
|
72
|
-
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, this.fontSizes.map(size => (h("option", { value: size, selected: this.dataItem[0].fontSize === size }, size)))), h("ls-icon", { key: '
|
|
72
|
+
}, class: 'ls-dv-has-leading-icon ls-dv-has-trailing-icon' }, this.fontSizes.map(size => (h("option", { value: size, selected: this.dataItem[0].fontSize === size }, size)))), h("ls-icon", { key: '071e07610b965de760746c14cc28f629f697ea04', id: "selectorIcon", name: "selector-icon" })), h("div", { key: '4451f71ae8da401631636b6fda37aa6e3d921e8d', class: 'ls-dv-button-group' }, h("button", { key: 'b890d5ec32ec0986a5728823e92cfd186f69ca3f', class: { 'ls-dv-active': this.dataItem[0].align === 'left' || !this.dataItem[0].align }, onClick: () => {
|
|
73
73
|
this.alter({ align: 'left' });
|
|
74
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: '
|
|
74
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextleft') }, h("ls-icon", { key: 'd88930fd3e0f1ec3493c520a749f7f3ab517d700', name: "menu-alt-2-icon" })), h("button", { key: '69607fbf8ddfb0e01d5c8a9c730d2175ebed8095', class: { 'ls-dv-active': this.dataItem[0].align === 'center' }, onClick: () => {
|
|
75
75
|
this.alter({ align: 'center' });
|
|
76
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: '
|
|
76
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextcenter') }, h("ls-icon", { key: 'a238a5647c131c1a640e9fb54bcbfc3e58da392a', name: "menu-alt-5-icon" })), h("button", { key: 'edcfbf372e19a5a3f6d2aacf94f79645d38c0216', class: { 'ls-dv-active': this.dataItem[0].align === 'right' }, onClick: () => {
|
|
77
77
|
this.alter({ align: 'right' });
|
|
78
|
-
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '
|
|
78
|
+
}, "data-tooltip-id": "ls-dv-tooltip", "data-tooltip-content": dvI18n.t('format.aligntextright') }, h("ls-icon", { key: '4fc79e1f1befbce488049d47d420a70c09447832', name: "menu-alt-3-icon" }))))), h("ls-tooltip", { key: '649cfe25ea3da1e2605b28c13ca304f9f2865aa0', tooltipId: "ls-dv-tooltip" })));
|
|
79
79
|
}
|
|
80
80
|
static get watchers() { return {
|
|
81
81
|
"dataItem": ["selectFieldsHandler"]
|
|
@@ -112,6 +112,6 @@ function defineCustomElement() {
|
|
|
112
112
|
defineCustomElement();
|
|
113
113
|
|
|
114
114
|
export { LsFieldFormat as L, defineCustomElement as d };
|
|
115
|
-
//# sourceMappingURL=p
|
|
115
|
+
//# sourceMappingURL=p--onI05IE.js.map
|
|
116
116
|
|
|
117
|
-
//# sourceMappingURL=p
|
|
117
|
+
//# sourceMappingURL=p--onI05IE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p--onI05IE.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 min-width: fit-content;\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\n.ls-dv-has-trailing-icon {\n padding-right: 2rem;\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\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 button.ls-dv-active {\n background: $primary-10;\n color: $primary-60;\n cursor: default;\n pointer-events: none;\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, 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 readonly fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 64, 72, 124];\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 HTMLSelectElement;\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 const firstAlign = this.dataItem[0].align || 'left';\n const allAlignSame = this.dataItem.every(item => (item.align || 'left') === firstAlign);\n return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed', align: allAlignSame ? firstAlign : 'mixed' };\n };\n\n render() {\n return (\n <Host>\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 ls-dv-has-trailing-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n {dvI18n.t('fieldproperties.mixed')}\n </option>\n <option value=\"arial\">Arial</option>\n <option value=\"liberation\">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 <select\n id=\"ls-toolbar-font-size\"\n onChange={input => {\n this.alter({ fontSize: parseInt((input.target as HTMLSelectElement).value) });\n (input.target as HTMLElement).blur();\n }}\n class={'ls-dv-has-leading-icon ls-dv-has-trailing-icon'}\n >\n <option disabled selected={this.allElementsSame()?.fontSize === 'mixed'} value={'mixed'}>\n {dvI18n.t('fieldproperties.mixed')}\n </option>\n {this.fontSizes.map(size => (\n <option value={size} selected={this.allElementsSame()?.fontSize === size}>{size}</option>\n ))}\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n </div>\n <div class={'ls-dv-button-group'}>\n <button\n class={{ 'ls-dv-active': this.allElementsSame()?.align === 'left' }}\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 class={{ 'ls-dv-active': this.allElementsSame()?.align === 'center' }}\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 class={{ 'ls-dv-active': this.allElementsSame()?.align === 'right' }}\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 ls-dv-has-trailing-icon'}\n >\n <option value=\"arial\">Arial</option>\n <option value=\"liberation\">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 <select\n id=\"ls-toolbar-font-size\"\n onChange={input => {\n this.alter({ fontSize: parseInt((input.target as HTMLSelectElement).value) });\n (input.target as HTMLElement).blur();\n }}\n class={'ls-dv-has-leading-icon ls-dv-has-trailing-icon'}\n >\n {this.fontSizes.map(size => (\n <option value={size} selected={this.dataItem[0].fontSize === size}>{size}</option>\n ))}\n </select>\n <ls-icon id=\"selectorIcon\" name=\"selector-icon\"></ls-icon>\n </div>\n <div class={'ls-dv-button-group'}>\n <button\n class={{ 'ls-dv-active': this.dataItem[0].align === 'left' || !this.dataItem[0].align }}\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 class={{ 'ls-dv-active': this.dataItem[0].align === 'center' }}\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 class={{ 'ls-dv-active': this.dataItem[0].align === 'right' }}\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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as transformTag, p as proxyCustomElement, H, c as createEvent, h } from './p-DIvmRYeB.js';
|
|
2
2
|
import { d as dvI18n } from './p-WVWIAGo_.js';
|
|
3
|
-
import { d as defineCustomElement$6 } from './p
|
|
3
|
+
import { d as defineCustomElement$6 } from './p--onI05IE.js';
|
|
4
4
|
import { d as defineCustomElement$5 } from './p-BHeJScTh.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './p-MzXqai7c.js';
|
|
6
6
|
import { d as defineCustomElement$3 } from './p-CKoM9Y6t.js';
|
|
@@ -145,6 +145,6 @@ function defineCustomElement() {
|
|
|
145
145
|
defineCustomElement();
|
|
146
146
|
|
|
147
147
|
export { LsToolbar as L, defineCustomElement as d };
|
|
148
|
-
//# sourceMappingURL=p-
|
|
148
|
+
//# sourceMappingURL=p-C4nAOEBk.js.map
|
|
149
149
|
|
|
150
|
-
//# sourceMappingURL=p-
|
|
150
|
+
//# sourceMappingURL=p-C4nAOEBk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Cts0eCoL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toolbar/ls-toolbar.scss?tag=ls-toolbar&encapsulation=shadow","src/components/ls-toolbar/ls-toolbar.tsx"],"sourcesContent":[".ls-dv-toolbar {\n position: absolute;\n top: 1rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n padding: 0.375rem;\n gap: 0.5rem;\n width: fit-content;\n border-radius: 1.125rem;\n border: 1px solid $gray-20;\n background: $white;\n z-index: 1000;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n.ls-dv-selection-banner {\n position: absolute;\n top: 4.75rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.375rem 0.25rem 0.375rem 0.625rem;\n border-radius: 0.75rem;\n border: 1px solid $primary-30;\n background: $primary-10;\n color: $primary-70;\n font-size: var(--text-sm);\n line-height: var(--text-sm);\n white-space: nowrap;\n z-index: 1000;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n.ls-dv-selection-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background: $primary-50;\n margin-right: 0.25rem;\n}\n\n.ls-dv-selection-banner-close {\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n color: $primary-60;\n padding: 0.125rem;\n min-height: unset;\n min-width: unset;\n border-radius: 0.375rem;\n cursor: pointer;\n margin-right: -0.125rem;\n}\n\n.ls-dv-selection-banner-close:hover {\n background: $primary-20;\n color: $primary-70;\n}\n\n.ls-dv-invisible {\n display: none;\n}\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='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: 400;\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.ls-dv-locked-banner {\n position: absolute;\n top: 1rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.625rem;\n border-radius: 1.125rem;\n border: 1px solid $yellow-30;\n background: $yellow-10;\n z-index: 1000;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n white-space: nowrap;\n}\n\n.ls-dv-locked-banner-text {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.ls-dv-locked-banner-title {\n color: $yellow-100;\n font-size: var(--text-sm);\n font-weight: 500;\n line-height: 1.25rem;\n}\n\n.ls-dv-locked-banner-subtitle {\n color: $yellow-90;\n font-size: 0.6875rem;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.ls-dv-locked-banner-icon {\n padding: 0.5rem;\n background: $yellow-20;\n color: $yellow-80;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ls-dv-locked-banner-unlock {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.75rem;\n border-radius: 0.75rem;\n border: 1px solid $yellow-30;\n background: $white;\n color: $yellow-90;\n font-size: var(--text-sm);\n font-weight: 500;\n cursor: pointer;\n min-height: unset;\n}\n\n.ls-dv-locked-banner-unlock:hover {\n background: $yellow-20;\n border-color: $yellow-40;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSApiTemplate, LsDocumentViewer, LSMutateEvent } from '../../components';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n tag: 'ls-toolbar',\n styleUrl: 'ls-toolbar.scss',\n shadow: true,\n})\nexport class LsToolbar {\n @Element() component: HTMLElement;\n\n /**\n * The selected items information (as JSON).\n * {LSApiElement[]}\n */\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n /**\n * The group and experience information.\n * {object}\n */\n @Prop() groupInfo: object;\n\n /**\n * The base template information (as JSON).\n * {LSApiTemplate}\n */\n @Prop() template: LSApiTemplate;\n\n /**\n * The main editor.\n * {LSDocumentViewer}\n */\n @Prop({\n mutable: true,\n })\n editor: LsDocumentViewer;\n\n @Prop() mode: string;\n\n @Prop() signer: number;\n\n @Prop() selected: any[];\n\n @Prop() pageNum: number;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n // @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n 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 ['mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'click', 'dblclick', 'contextmenu'].forEach(eventType => {\n this.component.addEventListener(eventType, e => {\n e.stopPropagation();\n });\n });\n }\n\n private renderEditor() {\n return (\n <div class=\"ls-dv-toolbar\">\n {this.dataItem && this.dataItem.length > 1 ? (\n <div class=\"rowbox\">\n <ls-field-format dataItem={this.dataItem} />\n </div>\n ) : (\n <div class=\"rowbox\">\n <ls-field-format dataItem={this.dataItem} />\n <ls-participant-select\n id=\"ls-participant-select\"\n roles={this.template?.roles}\n signer={this.signer}\n style={{ display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' }}\n />\n <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n </div>\n )}\n\n <slot></slot>\n </div>\n );\n }\n\n private renderCompose() {\n return (\n <div class={this.dataItem && this.dataItem.length > 0 ? 'ls-dv-toolbar' : ''}>\n <div class=\"rowbox\">\n <ls-field-format dataItem={this.dataItem} />\n <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n </div>\n\n <slot></slot>\n </div>\n );\n }\n\n private renderSelectionBanner() {\n if (!this.selected || this.selected.length === 0) return null;\n\n const pageNum = this.pageNum;\n const onThisPage = this.selected.filter(f => f.dataItem?.page === pageNum).length;\n const onOtherPages = this.selected.length - onThisPage;\n\n if (onOtherPages === 0) return null;\n\n return (\n <div class=\"ls-dv-selection-banner\">\n <ls-icon style={{ marginRight: '0.125rem' }} name=\"target-icon\" size={16} />\n <span>\n <span style={{ fontWeight: '500' }}>{dvI18n.t('toolbar.fieldsselectedcount', { total: this.selected.length })}</span>{' '}\n {dvI18n.t('toolbar.fieldsselecteddetail', { thispage: onThisPage, otherpages: onOtherPages })}\n </span>\n <button\n class=\"ls-dv-selection-banner-close\"\n onClick={() => this.editor.unselect()}\n data-tooltip-id=\"ls-dv-selection-tooltip\"\n data-tooltip-content={dvI18n.t('toolbar.deselectall')}\n data-tooltip-place=\"bottom\"\n >\n <ls-icon name=\"x-icon\" size={16} />\n </button>\n <ls-tooltip tooltipId=\"ls-dv-selection-tooltip\" />\n </div>\n );\n }\n\n private renderLockedBanner() {\n return (\n <div class=\"ls-dv-locked-banner\">\n <div class=\"ls-dv-locked-banner-icon\">\n <ls-icon name=\"lock-closed-icon\" size={20} />\n </div>\n <div class=\"ls-dv-locked-banner-text\">\n <span class=\"ls-dv-locked-banner-title\">{dvI18n.t('toolbar.templatelocked')}</span>\n <span class=\"ls-dv-locked-banner-subtitle\">{dvI18n.t('toolbar.editingdisabled')}</span>\n </div>\n <button class=\"ls-dv-locked-banner-unlock\" onClick={() => this.mutate.emit([{ action: 'update', data: { ...this.template, locked: false } }])}>\n {dvI18n.t('toolbar.unlock')}\n </button>\n </div>\n );\n }\n\n render() {\n if (this.template?.locked) {\n return this.renderLockedBanner();\n }\n return [this.mode === 'editor' ? this.renderEditor() : this.mode === 'compose' ? this.renderCompose() : null, this.renderSelectionBanner()];\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-C4nAOEBk.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toolbar/ls-toolbar.scss?tag=ls-toolbar&encapsulation=shadow","src/components/ls-toolbar/ls-toolbar.tsx"],"sourcesContent":[".ls-dv-toolbar {\n position: absolute;\n top: 1rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n padding: 0.375rem;\n gap: 0.5rem;\n width: fit-content;\n border-radius: 1.125rem;\n border: 1px solid $gray-20;\n background: $white;\n z-index: 1000;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n.ls-dv-selection-banner {\n position: absolute;\n top: 4.75rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.375rem 0.25rem 0.375rem 0.625rem;\n border-radius: 0.75rem;\n border: 1px solid $primary-30;\n background: $primary-10;\n color: $primary-70;\n font-size: var(--text-sm);\n line-height: var(--text-sm);\n white-space: nowrap;\n z-index: 1000;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n.ls-dv-selection-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background: $primary-50;\n margin-right: 0.25rem;\n}\n\n.ls-dv-selection-banner-close {\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n color: $primary-60;\n padding: 0.125rem;\n min-height: unset;\n min-width: unset;\n border-radius: 0.375rem;\n cursor: pointer;\n margin-right: -0.125rem;\n}\n\n.ls-dv-selection-banner-close:hover {\n background: $primary-20;\n color: $primary-70;\n}\n\n.ls-dv-invisible {\n display: none;\n}\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='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: 400;\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.ls-dv-locked-banner {\n position: absolute;\n top: 1rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.625rem;\n border-radius: 1.125rem;\n border: 1px solid $yellow-30;\n background: $yellow-10;\n z-index: 1000;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n white-space: nowrap;\n}\n\n.ls-dv-locked-banner-text {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.ls-dv-locked-banner-title {\n color: $yellow-100;\n font-size: var(--text-sm);\n font-weight: 500;\n line-height: 1.25rem;\n}\n\n.ls-dv-locked-banner-subtitle {\n color: $yellow-90;\n font-size: 0.6875rem;\n font-weight: 400;\n line-height: 1rem;\n}\n\n.ls-dv-locked-banner-icon {\n padding: 0.5rem;\n background: $yellow-20;\n color: $yellow-80;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ls-dv-locked-banner-unlock {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.75rem;\n border-radius: 0.75rem;\n border: 1px solid $yellow-30;\n background: $white;\n color: $yellow-90;\n font-size: var(--text-sm);\n font-weight: 500;\n cursor: pointer;\n min-height: unset;\n}\n\n.ls-dv-locked-banner-unlock:hover {\n background: $yellow-20;\n border-color: $yellow-40;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSApiTemplate, LsDocumentViewer, LSMutateEvent } from '../../components';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n tag: 'ls-toolbar',\n styleUrl: 'ls-toolbar.scss',\n shadow: true,\n})\nexport class LsToolbar {\n @Element() component: HTMLElement;\n\n /**\n * The selected items information (as JSON).\n * {LSApiElement[]}\n */\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n /**\n * The group and experience information.\n * {object}\n */\n @Prop() groupInfo: object;\n\n /**\n * The base template information (as JSON).\n * {LSApiTemplate}\n */\n @Prop() template: LSApiTemplate;\n\n /**\n * The main editor.\n * {LSDocumentViewer}\n */\n @Prop({\n mutable: true,\n })\n editor: LsDocumentViewer;\n\n @Prop() mode: string;\n\n @Prop() signer: number;\n\n @Prop() selected: any[];\n\n @Prop() pageNum: number;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n mutate: EventEmitter<LSMutateEvent[]>;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n update: EventEmitter<LSMutateEvent[]>;\n\n // @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n 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 ['mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'click', 'dblclick', 'contextmenu'].forEach(eventType => {\n this.component.addEventListener(eventType, e => {\n e.stopPropagation();\n });\n });\n }\n\n private renderEditor() {\n return (\n <div class=\"ls-dv-toolbar\">\n {this.dataItem && this.dataItem.length > 1 ? (\n <div class=\"rowbox\">\n <ls-field-format dataItem={this.dataItem} />\n </div>\n ) : (\n <div class=\"rowbox\">\n <ls-field-format dataItem={this.dataItem} />\n <ls-participant-select\n id=\"ls-participant-select\"\n roles={this.template?.roles}\n signer={this.signer}\n style={{ display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' }}\n />\n <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n </div>\n )}\n\n <slot></slot>\n </div>\n );\n }\n\n private renderCompose() {\n return (\n <div class={this.dataItem && this.dataItem.length > 0 ? 'ls-dv-toolbar' : ''}>\n <div class=\"rowbox\">\n <ls-field-format dataItem={this.dataItem} />\n <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n </div>\n\n <slot></slot>\n </div>\n );\n }\n\n private renderSelectionBanner() {\n if (!this.selected || this.selected.length === 0) return null;\n\n const pageNum = this.pageNum;\n const onThisPage = this.selected.filter(f => f.dataItem?.page === pageNum).length;\n const onOtherPages = this.selected.length - onThisPage;\n\n if (onOtherPages === 0) return null;\n\n return (\n <div class=\"ls-dv-selection-banner\">\n <ls-icon style={{ marginRight: '0.125rem' }} name=\"target-icon\" size={16} />\n <span>\n <span style={{ fontWeight: '500' }}>{dvI18n.t('toolbar.fieldsselectedcount', { total: this.selected.length })}</span>{' '}\n {dvI18n.t('toolbar.fieldsselecteddetail', { thispage: onThisPage, otherpages: onOtherPages })}\n </span>\n <button\n class=\"ls-dv-selection-banner-close\"\n onClick={() => this.editor.unselect()}\n data-tooltip-id=\"ls-dv-selection-tooltip\"\n data-tooltip-content={dvI18n.t('toolbar.deselectall')}\n data-tooltip-place=\"bottom\"\n >\n <ls-icon name=\"x-icon\" size={16} />\n </button>\n <ls-tooltip tooltipId=\"ls-dv-selection-tooltip\" />\n </div>\n );\n }\n\n private renderLockedBanner() {\n return (\n <div class=\"ls-dv-locked-banner\">\n <div class=\"ls-dv-locked-banner-icon\">\n <ls-icon name=\"lock-closed-icon\" size={20} />\n </div>\n <div class=\"ls-dv-locked-banner-text\">\n <span class=\"ls-dv-locked-banner-title\">{dvI18n.t('toolbar.templatelocked')}</span>\n <span class=\"ls-dv-locked-banner-subtitle\">{dvI18n.t('toolbar.editingdisabled')}</span>\n </div>\n <button class=\"ls-dv-locked-banner-unlock\" onClick={() => this.mutate.emit([{ action: 'update', data: { ...this.template, locked: false } }])}>\n {dvI18n.t('toolbar.unlock')}\n </button>\n </div>\n );\n }\n\n render() {\n if (this.template?.locked) {\n return this.renderLockedBanner();\n }\n return [this.mode === 'editor' ? this.renderEditor() : this.mode === 'compose' ? this.renderCompose() : null, this.renderSelectionBanner()];\n }\n}\n"],"version":3}
|