@mgdis/mg-components 6.19.0 → 6.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-Bp6wZzau.js → index-C2viYwrR.js} +1757 -80
- package/dist/cjs/{index-TUElr4Wv.js → index-CCsGMNyq.js} +46 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_37.cjs.entry.js +735 -337
- package/dist/cjs/mg-alert.cjs.entry.js +17 -9
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-fieldset.cjs.entry.js +24 -7
- package/dist/cjs/mg-input-combobox.cjs.entry.js +63 -29
- package/dist/cjs/mg-input-file.cjs.entry.js +384 -0
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +30 -18
- package/dist/cjs/{mg-input.conf-D7jmj_lh.js → mg-input.conf-BNpeATnq.js} +7 -0
- package/dist/cjs/mg-loader.cjs.entry.js +8 -6
- package/dist/cjs/mg-progress.cjs.entry.js +19 -9
- package/dist/collection/collection-manifest.json +3 -2
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js +6 -0
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +15 -11
- package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js +877 -0
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +12 -12
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +72 -84
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +1 -1
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js +12 -3
- package/dist/collection/components/molecules/mg-form/mg-form.js +12 -2
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +1 -1
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +1 -1
- package/dist/collection/locales/en/messages.json +11 -0
- package/dist/collection/locales/fr/messages.json +11 -0
- package/dist/components/events.utils.js +1 -23
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -1
- package/dist/components/index2.js +1 -408
- package/dist/components/index3.js +1 -476
- package/dist/components/mg-action-more.js +1 -254
- package/dist/components/mg-alert.js +1 -224
- package/dist/components/mg-badge.js +1 -6
- package/dist/components/mg-badge2.js +1 -113
- package/dist/components/mg-button.js +1 -6
- package/dist/components/mg-button2.js +1 -275
- package/dist/components/mg-card.js +1 -6
- package/dist/components/mg-card2.js +1 -92
- package/dist/components/mg-character-left.js +1 -6
- package/dist/components/mg-character-left2.js +1 -75
- package/dist/components/mg-details.js +1 -104
- package/dist/components/mg-divider.js +1 -6
- package/dist/components/mg-divider2.js +1 -49
- package/dist/components/mg-fieldset.js +1 -209
- package/dist/components/mg-form.js +1 -302
- package/dist/components/mg-icon.js +1 -6
- package/dist/components/mg-icon2.js +1 -188
- package/dist/components/mg-illustrated-message.js +1 -129
- package/dist/components/mg-input-checkbox-paginated.js +1 -6
- package/dist/components/mg-input-checkbox-paginated2.js +1 -135
- package/dist/components/mg-input-checkbox.js +1 -762
- package/dist/components/mg-input-combobox.js +1 -936
- package/dist/components/mg-input-date.js +1 -463
- package/dist/components/mg-input-file.d.ts +11 -0
- package/dist/components/mg-input-file.js +1 -0
- package/dist/components/mg-input-numeric.js +1 -592
- package/dist/components/mg-input-password.js +1 -360
- package/dist/components/mg-input-radio.js +1 -392
- package/dist/components/mg-input-rich-text-editor.js +1 -16797
- package/dist/components/mg-input-select.js +1 -6
- package/dist/components/mg-input-select2.js +1 -481
- package/dist/components/mg-input-text.js +1 -6
- package/dist/components/mg-input-text2.js +1 -514
- package/dist/components/mg-input-textarea.js +1 -412
- package/dist/components/mg-input-title.js +1 -6
- package/dist/components/mg-input-title2.js +1 -81
- package/dist/components/mg-input-toggle.js +1 -386
- package/dist/components/mg-input.conf.js +1 -0
- package/dist/components/mg-input.js +1 -6
- package/dist/components/mg-input2.js +1 -459
- package/dist/components/mg-item-more.js +1 -6
- package/dist/components/mg-item-more2.js +1 -505
- package/dist/components/mg-loader.js +1 -6
- package/dist/components/mg-loader2.js +1 -74
- package/dist/components/mg-menu-item.js +1 -6
- package/dist/components/mg-menu-item2.js +1 -485
- package/dist/components/mg-menu.js +1 -6
- package/dist/components/mg-message.js +1 -6
- package/dist/components/mg-message2.js +1 -146
- package/dist/components/mg-modal.js +1 -184
- package/dist/components/mg-pagination.js +1 -234
- package/dist/components/mg-panel.js +1 -350
- package/dist/components/mg-popover-content.js +1 -6
- package/dist/components/mg-popover-content2.js +1 -96
- package/dist/components/mg-popover.js +1 -6
- package/dist/components/mg-popover2.js +1 -312
- package/dist/components/mg-progress.js +1 -123
- package/dist/components/mg-skip-links.js +1 -78
- package/dist/components/mg-table.js +1 -319
- package/dist/components/mg-tabs.js +1 -6
- package/dist/components/mg-tabs2.js +1 -315
- package/dist/components/mg-tag.js +1 -133
- package/dist/components/mg-tooltip-content.js +1 -6
- package/dist/components/mg-tooltip-content2.js +1 -42
- package/dist/components/mg-tooltip.js +1 -6
- package/dist/components/mg-tooltip2.js +1 -421
- package/dist/components/popper.js +1 -1790
- package/dist/esm/{index-CNX6lq0x.js → index-D-uaxCxH.js} +46 -1
- package/dist/esm/{index-BluNKQ3L.js → index-DFwaH2hS.js} +1757 -80
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_37.entry.js +735 -337
- package/dist/esm/mg-alert.entry.js +17 -9
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-fieldset.entry.js +24 -7
- package/dist/esm/mg-input-combobox.entry.js +63 -29
- package/dist/esm/mg-input-file.entry.js +382 -0
- package/dist/esm/mg-input-rich-text-editor.entry.js +30 -18
- package/dist/esm/{mg-input.conf-DDnrE1hD.js → mg-input.conf-C9rmNQIL.js} +7 -1
- package/dist/esm/mg-loader.entry.js +8 -6
- package/dist/esm/mg-progress.entry.js +19 -9
- package/dist/mg-components/locales/en/messages.json +11 -0
- package/dist/mg-components/locales/fr/messages.json +11 -0
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/{p-d5a276eb.entry.js → p-08fa327b.entry.js} +1 -1
- package/dist/mg-components/p-4175dcbe.entry.js +1 -0
- package/dist/mg-components/p-6b57f249.entry.js +1 -0
- package/dist/mg-components/p-6b655830.entry.js +1 -0
- package/dist/mg-components/p-988c282e.entry.js +1 -0
- package/dist/mg-components/p-C9rmNQIL.js +1 -0
- package/dist/mg-components/p-D-uaxCxH.js +1 -0
- package/dist/mg-components/p-DFwaH2hS.js +2 -0
- package/dist/mg-components/p-a79b1f19.entry.js +1 -0
- package/dist/mg-components/{p-916dfb6d.entry.js → p-c3d116b9.entry.js} +1 -1
- package/dist/mg-components/p-dd1934f4.entry.js +1 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +7 -1
- package/dist/types/components/molecules/inputs/mg-input-file/mg-input-file.d.ts +210 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +4 -4
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +13 -16
- package/dist/types/components.d.ts +217 -18
- package/dist/types/stencil-public-runtime.d.ts +76 -12
- package/ide/intellij/web-types.json +373 -26
- package/ide/vscode/css-custom-data.json +12 -0
- package/ide/vscode/html-custom-data.json +341 -79
- package/package.json +22 -22
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.scss +0 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf.js +0 -1
- package/dist/mg-components/p-016bd291.entry.js +0 -1
- package/dist/mg-components/p-186a6139.entry.js +0 -1
- package/dist/mg-components/p-66a1cb83.entry.js +0 -1
- package/dist/mg-components/p-6efd819f.entry.js +0 -1
- package/dist/mg-components/p-BluNKQ3L.js +0 -2
- package/dist/mg-components/p-CNX6lq0x.js +0 -1
- package/dist/mg-components/p-DDnrE1hD.js +0 -1
- package/dist/mg-components/p-d2c72f09.entry.js +0 -1
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf.d.ts +0 -8
|
@@ -0,0 +1,382 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFwaH2hS.js';
|
|
2
|
+
import { C as ClassList, b as allItemsAreString, t as toString, i as isValidString, c as isObject } from './index-C7xjtdiw.js';
|
|
3
|
+
import { l as localeByte, i as initLocales } from './index-D-uaxCxH.js';
|
|
4
|
+
import { a as classDisabled } from './mg-input.conf-C9rmNQIL.js';
|
|
5
|
+
|
|
6
|
+
const mgInputFileCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__file-container{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input__file-item{display:inline-flex;min-height:var(--mg-b-size-min-height);align-items:center;padding-left:var(--mg-b-size-8);background-color:var(--mg-b-color-neutral-10);font-weight:600;gap:var(--mg-b-size-8)}.mg-c-input__file-item-name{word-break:break-all}.mg-c-input__file-item-size{color:var(--mg-b-color-neutral-90);font-weight:400;word-break:normal}.mg-c-input__file-delete-button{align-self:flex-start}.mg-c-input__file-list{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input__file-list .mg-c-input__file-item{min-height:unset;padding:var(--mg-b-size-8)}.mg-c-input__file-list-container{position:relative;padding:var(--mg-b-size-8) calc(var(--mg-b-size-8) + var(--mg-b-size-min-height)) var(--mg-b-size-8) var(--mg-b-size-8);border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-4)}.mg-c-input__file-list-container .mg-c-input__file-delete-button{position:absolute;top:0;right:0}`;
|
|
7
|
+
|
|
8
|
+
const allItemsAreFile = (items) => {
|
|
9
|
+
return Array.isArray(items) && items.every(item => isObject(item) && typeof item.name === 'string' && typeof item.size === 'number');
|
|
10
|
+
};
|
|
11
|
+
const MgInputFile = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
registerInstance(this, hostRef);
|
|
14
|
+
this.valueChange = createEvent(this, "value-change", 7);
|
|
15
|
+
this.inputValid = createEvent(this, "input-valid", 7);
|
|
16
|
+
// hasDisplayedError (triggered by blur event)
|
|
17
|
+
this.hasDisplayedError = false;
|
|
18
|
+
this.customErrorMessage = { lock: false };
|
|
19
|
+
/**
|
|
20
|
+
* Input name
|
|
21
|
+
* If not set the value equals the identifier
|
|
22
|
+
*/
|
|
23
|
+
this.name = this.identifier;
|
|
24
|
+
/**
|
|
25
|
+
* Define if label is displayed on top
|
|
26
|
+
*/
|
|
27
|
+
this.labelOnTop = false;
|
|
28
|
+
/**
|
|
29
|
+
* Define if label is visible
|
|
30
|
+
*/
|
|
31
|
+
this.labelHide = false;
|
|
32
|
+
/**
|
|
33
|
+
* Define multiple files
|
|
34
|
+
* When the multiple Boolean attribute is specified, the file input allows the user to select more than one file.
|
|
35
|
+
* (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple).
|
|
36
|
+
*/
|
|
37
|
+
this.multiple = false;
|
|
38
|
+
/**
|
|
39
|
+
* Define if input is required
|
|
40
|
+
*/
|
|
41
|
+
this.required = false;
|
|
42
|
+
/**
|
|
43
|
+
* Define if input is disabled
|
|
44
|
+
*/
|
|
45
|
+
this.disabled = false;
|
|
46
|
+
/**
|
|
47
|
+
* Define tooltip position
|
|
48
|
+
*/
|
|
49
|
+
this.tooltipPosition = 'input';
|
|
50
|
+
/**
|
|
51
|
+
* Component classes
|
|
52
|
+
*/
|
|
53
|
+
this.classCollection = new ClassList(['mg-c-input--file']);
|
|
54
|
+
/**
|
|
55
|
+
* Files list
|
|
56
|
+
*/
|
|
57
|
+
this.files = [];
|
|
58
|
+
/**
|
|
59
|
+
* Method to set validity values
|
|
60
|
+
* @param newValue - valid new value
|
|
61
|
+
*/
|
|
62
|
+
this.setValidity = (newValue) => {
|
|
63
|
+
const oldValue = this.valid;
|
|
64
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
65
|
+
this.valid = newValue;
|
|
66
|
+
}
|
|
67
|
+
this.invalid = !this.valid;
|
|
68
|
+
// We need to send valid event even if it is the same value
|
|
69
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue)) {
|
|
70
|
+
this.inputValid.emit(this.valid);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* Handle change event
|
|
75
|
+
*/
|
|
76
|
+
this.handleInputChange = (event) => {
|
|
77
|
+
this.checkValidity();
|
|
78
|
+
if (this.hasDisplayedError) {
|
|
79
|
+
this.setErrorMessage();
|
|
80
|
+
}
|
|
81
|
+
this.files = Array.from(event.target.files);
|
|
82
|
+
// Reset input focus to the button after file selection
|
|
83
|
+
this.fileButtonElement.focus();
|
|
84
|
+
};
|
|
85
|
+
/**
|
|
86
|
+
* Handle input focus event
|
|
87
|
+
*/
|
|
88
|
+
this.handleInputFocus = () => {
|
|
89
|
+
this.fileButtonElement.dataset.focusVisible = '';
|
|
90
|
+
};
|
|
91
|
+
/**
|
|
92
|
+
* Handle input blur event
|
|
93
|
+
*/
|
|
94
|
+
this.handleInputBlur = () => {
|
|
95
|
+
// Display Error
|
|
96
|
+
this.handlerInProgress = 'blur';
|
|
97
|
+
this.displayError().finally(() => {
|
|
98
|
+
// reset guard
|
|
99
|
+
this.handlerInProgress = undefined;
|
|
100
|
+
});
|
|
101
|
+
delete this.fileButtonElement.dataset.focusVisible;
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* Handle button blur event
|
|
105
|
+
*/
|
|
106
|
+
this.handleButtonBlur = () => {
|
|
107
|
+
this.inputElement.blur();
|
|
108
|
+
};
|
|
109
|
+
/**
|
|
110
|
+
* Handle add file button click
|
|
111
|
+
*/
|
|
112
|
+
this.handleButtonClick = () => {
|
|
113
|
+
this.inputElement.click();
|
|
114
|
+
};
|
|
115
|
+
/**
|
|
116
|
+
* Check if input is valid
|
|
117
|
+
*/
|
|
118
|
+
this.checkValidity = () => {
|
|
119
|
+
this.setValidity(this.disabled || (!this.isMaxSizeExceeded() && this.inputElement.checkValidity()));
|
|
120
|
+
};
|
|
121
|
+
/**
|
|
122
|
+
* Handle delete file button click
|
|
123
|
+
*/
|
|
124
|
+
this.handleDeleteFileClick = () => {
|
|
125
|
+
this.files = [];
|
|
126
|
+
// Reset input focus to the button after file selection
|
|
127
|
+
this.fileButtonElement.focus();
|
|
128
|
+
};
|
|
129
|
+
/**
|
|
130
|
+
* Set input error message
|
|
131
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
132
|
+
*/
|
|
133
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
134
|
+
// Set error message
|
|
135
|
+
this.errorMessage = undefined;
|
|
136
|
+
if (!this.valid) {
|
|
137
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
138
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
139
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
140
|
+
}
|
|
141
|
+
// Does not match max size
|
|
142
|
+
else if (this.isMaxSizeExceeded()) {
|
|
143
|
+
this.errorMessage = this.messages.input.file.errors.maxSize.replace('{{maxSize}}', localeByte(this.maxSize, this.locale));
|
|
144
|
+
}
|
|
145
|
+
// required
|
|
146
|
+
else if (this.inputElement.validity.valueMissing) {
|
|
147
|
+
this.errorMessage = this.messages.errors.required;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
/**
|
|
152
|
+
* Check if max size is exceeded
|
|
153
|
+
* @returns boolean - true if max size is exceeded
|
|
154
|
+
*/
|
|
155
|
+
this.isMaxSizeExceeded = () => {
|
|
156
|
+
return this.maxSize >= 0 && this.files.some(file => file.size > this.maxSize);
|
|
157
|
+
};
|
|
158
|
+
/**
|
|
159
|
+
* Render files
|
|
160
|
+
* @returns formated files.
|
|
161
|
+
*/
|
|
162
|
+
this.renderFiles = () => {
|
|
163
|
+
const fileListId = `${this.identifier}-file-list`;
|
|
164
|
+
const renderFileName = (file) => (h("span", { class: "mg-c-input__file-item-name" }, file.name, file.size > 0 ? h("span", { class: "mg-c-input__file-item-size" }, ` ${localeByte(file.size, this.locale)}`) : undefined));
|
|
165
|
+
const renderDeleteButton = () => (h("mg-button", { variant: "flat", class: "mg-c-input__file-delete-button", "is-icon": true, label: this.messages.input.file.deleteButton, type: "button", disabled: this.disabled, "aria-controls": [this.identifier, fileListId].join(' '), onClick: this.handleDeleteFileClick }, h("mg-icon", { icon: "cross" })));
|
|
166
|
+
if (this.files.length === 0) {
|
|
167
|
+
return null;
|
|
168
|
+
}
|
|
169
|
+
else if (this.files.length === 1) {
|
|
170
|
+
return (h("div", { class: "mg-c-input__file-item" }, renderFileName(this.files[0]), renderDeleteButton()));
|
|
171
|
+
}
|
|
172
|
+
else {
|
|
173
|
+
return (h("div", { class: "mg-c-input__file-list-container" }, h("ul", { role: "list", class: "mg-c-input__file-list", id: fileListId }, Array.from(this.files).map((file, index) => (h("li", { class: "mg-c-input__file-item", key: `${file.name}-${index}` }, renderFileName(file))))), renderDeleteButton()));
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
}
|
|
177
|
+
watchValue(newValue) {
|
|
178
|
+
if (allItemsAreString(newValue)) {
|
|
179
|
+
this.files = this.value.map((fileName) => new File([], fileName));
|
|
180
|
+
}
|
|
181
|
+
else if (allItemsAreFile(newValue)) {
|
|
182
|
+
this.files = this.value;
|
|
183
|
+
}
|
|
184
|
+
else if (newValue !== undefined) {
|
|
185
|
+
throw new Error(`<mg-input-file> prop "value" must be an array of strings or File objects. Passed value: ${toString(newValue)}.`);
|
|
186
|
+
}
|
|
187
|
+
else {
|
|
188
|
+
this.files = [];
|
|
189
|
+
}
|
|
190
|
+
this.valueChange.emit(newValue);
|
|
191
|
+
}
|
|
192
|
+
watchMultiple() {
|
|
193
|
+
if (this.multiple === false && this.files.length > 1) {
|
|
194
|
+
throw new Error(`<mg-input-file> prop "value" must be a single file when prop "multiple" is set to false.`);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
watchAccept(newValue) {
|
|
198
|
+
if (newValue !== undefined && !isValidString(newValue)) {
|
|
199
|
+
throw new Error(`<mg-input-file> prop "accept" must be a valid string.`);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
handleValidityChange(newValue, _oldValue, prop) {
|
|
203
|
+
if (this.inputElement !== undefined) {
|
|
204
|
+
this.inputElement[prop] = newValue;
|
|
205
|
+
this.checkValidity();
|
|
206
|
+
if (this.hasDisplayedError) {
|
|
207
|
+
this.setErrorMessage();
|
|
208
|
+
this.hasDisplayedError = false;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
watchDisabled(newValue) {
|
|
213
|
+
if (newValue) {
|
|
214
|
+
this.classCollection.add(classDisabled);
|
|
215
|
+
}
|
|
216
|
+
else {
|
|
217
|
+
this.classCollection.delete(classDisabled);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
watchHelpText() {
|
|
221
|
+
if (!isValidString(this.helpText)) {
|
|
222
|
+
const helpText = [];
|
|
223
|
+
if (this.maxSize !== undefined) {
|
|
224
|
+
helpText.push(this.messages.input.file.helpText.maxSize.replace('{{maxSize}}', localeByte(this.maxSize, this.locale)));
|
|
225
|
+
}
|
|
226
|
+
if (this.accept !== undefined) {
|
|
227
|
+
helpText.push(this.messages.input.file.helpText.accept.replace('{{accept}}', this.accept));
|
|
228
|
+
}
|
|
229
|
+
this.helpText = helpText.join('. ');
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
watchFiles(newValue, oldValue) {
|
|
233
|
+
if (toString(newValue) !== toString(oldValue)) {
|
|
234
|
+
this.value = newValue.length > 0 ? newValue : undefined;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Set focus on input add file button
|
|
239
|
+
*/
|
|
240
|
+
async setFocus() {
|
|
241
|
+
this.fileButtonElement.focus();
|
|
242
|
+
}
|
|
243
|
+
/**
|
|
244
|
+
* Display input error if it exists.
|
|
245
|
+
*/
|
|
246
|
+
displayError() {
|
|
247
|
+
// Use `Promise` as requested for stencil method
|
|
248
|
+
// Use `requestAnimationFrame` to ensure:
|
|
249
|
+
// - DOM is fully updated before validation
|
|
250
|
+
// - Async operations are completed
|
|
251
|
+
// - No timing issues with Stencil's render cycle
|
|
252
|
+
// - Keep everything in sync both inside and outside the component
|
|
253
|
+
return new Promise(resolve => {
|
|
254
|
+
requestAnimationFrame(() => {
|
|
255
|
+
this.checkValidity();
|
|
256
|
+
this.setErrorMessage();
|
|
257
|
+
this.hasDisplayedError = this.invalid;
|
|
258
|
+
resolve();
|
|
259
|
+
});
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
/**
|
|
263
|
+
* Set an error and display a custom error message.
|
|
264
|
+
* This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
|
|
265
|
+
* It must be paired with an error message to display for the given context.
|
|
266
|
+
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
267
|
+
* @param valid - value indicating the validity
|
|
268
|
+
* @param errorMessage - the error message to display
|
|
269
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
270
|
+
*/
|
|
271
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
272
|
+
if (typeof valid !== 'boolean') {
|
|
273
|
+
throw new Error('<mg-input-file> method "setError()" param "valid" must be a boolean.');
|
|
274
|
+
}
|
|
275
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
276
|
+
throw new Error('<mg-input-file> method "setError()" param "errorMessage" must be a string.');
|
|
277
|
+
}
|
|
278
|
+
else {
|
|
279
|
+
this.customErrorMessage = {
|
|
280
|
+
lock: valid ? false : errorMessageLock,
|
|
281
|
+
message: valid ? undefined : errorMessage,
|
|
282
|
+
};
|
|
283
|
+
this.setValidity(valid);
|
|
284
|
+
this.setErrorMessage(true);
|
|
285
|
+
this.hasDisplayedError = this.invalid;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
/**
|
|
289
|
+
* Reset value, validity and error state
|
|
290
|
+
*/
|
|
291
|
+
async reset() {
|
|
292
|
+
this.files = [];
|
|
293
|
+
// Use `Promise` as requested for stencil method
|
|
294
|
+
// Use `requestAnimationFrame` to ensure:
|
|
295
|
+
// - DOM is fully updated before validation
|
|
296
|
+
// - Async operations are completed
|
|
297
|
+
// - No timing issues with Stencil's render cycle
|
|
298
|
+
// - Keep everything in sync both inside and outside the component
|
|
299
|
+
return new Promise(resolve => {
|
|
300
|
+
requestAnimationFrame(() => {
|
|
301
|
+
// unlock validity check by resetting customErrorMessage
|
|
302
|
+
this.customErrorMessage = { lock: false };
|
|
303
|
+
this.checkValidity();
|
|
304
|
+
this.errorMessage = undefined;
|
|
305
|
+
this.hasDisplayedError = false;
|
|
306
|
+
resolve();
|
|
307
|
+
});
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
/*************
|
|
311
|
+
* Lifecycle *
|
|
312
|
+
*************/
|
|
313
|
+
/**
|
|
314
|
+
* Check if component props are well configured on init
|
|
315
|
+
* @returns timeout
|
|
316
|
+
*/
|
|
317
|
+
componentWillLoad() {
|
|
318
|
+
// Get locales
|
|
319
|
+
const locales = initLocales(this.element);
|
|
320
|
+
this.locale = locales.locale;
|
|
321
|
+
this.messages = locales.messages;
|
|
322
|
+
// Validate
|
|
323
|
+
this.watchValue(this.value);
|
|
324
|
+
this.watchDisabled(this.disabled);
|
|
325
|
+
this.watchHelpText();
|
|
326
|
+
this.watchAccept(this.accept);
|
|
327
|
+
this.watchMultiple();
|
|
328
|
+
// Check validity when component is ready
|
|
329
|
+
// return a promise to process action only in the FIRST render().
|
|
330
|
+
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
331
|
+
return setTimeout(() => {
|
|
332
|
+
this.checkValidity();
|
|
333
|
+
}, 0);
|
|
334
|
+
}
|
|
335
|
+
/**
|
|
336
|
+
* Render
|
|
337
|
+
* @returns HTML Element
|
|
338
|
+
*/
|
|
339
|
+
render() {
|
|
340
|
+
return (h("mg-input", { key: '3bcbf416c083d857aac2ad556bb2a218fe9ef82f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: '88fafc6fd4a84c05a545c0083193e2ee0db54bfb', class: "mg-c-input__file-container" }, h("input", { key: 'ad1d14bc95390d5db56191ebff0d092ed5478183', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
|
|
341
|
+
this.inputElement = el;
|
|
342
|
+
} }), h("mg-button", { key: 'ace59bb90e27f924ce85e96abd277e752c75b6b8', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
|
|
343
|
+
this.fileButtonElement = el;
|
|
344
|
+
} }, this.messages.input.file.browse), this.renderFiles())));
|
|
345
|
+
}
|
|
346
|
+
get element() { return getElement(this); }
|
|
347
|
+
static get watchers() { return {
|
|
348
|
+
"value": [{
|
|
349
|
+
"watchValue": 0
|
|
350
|
+
}, {
|
|
351
|
+
"watchMultiple": 0
|
|
352
|
+
}],
|
|
353
|
+
"multiple": [{
|
|
354
|
+
"watchMultiple": 0
|
|
355
|
+
}],
|
|
356
|
+
"accept": [{
|
|
357
|
+
"watchAccept": 0
|
|
358
|
+
}, {
|
|
359
|
+
"watchHelpText": 0
|
|
360
|
+
}],
|
|
361
|
+
"required": [{
|
|
362
|
+
"handleValidityChange": 0
|
|
363
|
+
}],
|
|
364
|
+
"disabled": [{
|
|
365
|
+
"handleValidityChange": 0
|
|
366
|
+
}, {
|
|
367
|
+
"watchDisabled": 0
|
|
368
|
+
}],
|
|
369
|
+
"helpText": [{
|
|
370
|
+
"watchHelpText": 0
|
|
371
|
+
}],
|
|
372
|
+
"maxSize": [{
|
|
373
|
+
"watchHelpText": 0
|
|
374
|
+
}],
|
|
375
|
+
"files": [{
|
|
376
|
+
"watchFiles": 0
|
|
377
|
+
}]
|
|
378
|
+
}; }
|
|
379
|
+
};
|
|
380
|
+
MgInputFile.style = mgInputFileCss();
|
|
381
|
+
|
|
382
|
+
export { MgInputFile as mg_input_file };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFwaH2hS.js';
|
|
2
2
|
import { i as isValidString, C as ClassList, t as toString } from './index-C7xjtdiw.js';
|
|
3
|
-
import { c as classReadonly, a as classDisabled } from './mg-input.conf-
|
|
4
|
-
import { i as initLocales } from './index-
|
|
3
|
+
import { c as classReadonly, a as classDisabled } from './mg-input.conf-C9rmNQIL.js';
|
|
4
|
+
import { i as initLocales } from './index-D-uaxCxH.js';
|
|
5
5
|
|
|
6
6
|
/** Detect free variable `global` from Node.js. */
|
|
7
7
|
var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
|
|
@@ -16374,11 +16374,9 @@ const defineEditor = (wrapperElement, { value, modules, readOnly, placeholder, h
|
|
|
16374
16374
|
return editor;
|
|
16375
16375
|
};
|
|
16376
16376
|
|
|
16377
|
-
const quillSnowCss = "/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:'\\2022'}.ql-editor li[data-list=checked]>.ql-ui:before{content:'\\2611'}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:'\\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]::before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}";
|
|
16377
|
+
const quillSnowCss = () => `.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:'\\2022'}.ql-editor li[data-list=checked]>.ql-ui:before{content:'\\2611'}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:'\\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}`;
|
|
16378
16378
|
|
|
16379
|
-
const
|
|
16380
|
-
|
|
16381
|
-
const mgInputRichTextEditorCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__wrapper{display:flex;width:100%;flex-direction:column;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light)}.mg-c-input__wrapper:focus-within{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus);outline:Highlight auto .1rem;outline:-webkit-focus-ring-color auto .1rem}.mg-c-input--has-error .mg-c-input__wrapper{border-color:var(--mg-b-color-danger)}.mg-c-input--disabled .mg-c-input__wrapper{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p{margin:0}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor .ql-toolbar{display:flex;flex-wrap:wrap;padding:var(--mg-b-size-8);border:0;border-radius:var(--mg-c-input-border-radius) var(--mg-c-input-border-radius) 0 0;background:var(--mg-b-color-neutral-0);border-block-end-width:var(--mg-c-input-border-width);border-block-end-color:var(--mg-c-input-color-border);border-block-end-style:solid}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats{display:inline-flex;margin:inherit;gap:.2rem}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats:not(:last-child)::after{width:.1rem;height:var(--mg-b-size-16);background:var(--mg-c-input-color-border);content:\"\";margin-block:var(--mg-b-size-8);margin-inline:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-fill{fill:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button{display:flex;min-width:var(--mg-b-size-32);height:var(--mg-b-size-32);align-items:center;justify-content:center;padding:var(--mg-b-size-4);border:.1rem solid rgba(0,0,0,0);border-radius:var(--mg-b-size-radius);color:var(--mg-b-color-dark);float:inherit;transition-duration:.2s;transition-property:background-color,border-color;transition-timing-function:ease-in-out}.mg-c-input--rich-text-editor .ql-toolbar button svg{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-input--rich-text-editor .ql-toolbar button:focus{color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button:focus-visible,.mg-c-input--rich-text-editor .ql-toolbar button:hover,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active{border-color:var(--mg-b-color-neutral-70);background:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke-width:.12rem}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke.ql-thin{stroke-width:.1rem}.mg-c-input--rich-text-editor .ql-toolbar button.ql-bold .ql-stroke{stroke-width:.2rem}.mg-c-input--rich-text-editor .ql-container{border:0;border-radius:0 0 var(--mg-c-input-border-radius) var(--mg-c-input-border-radius);margin:0 .1rem .1rem;background:var(--mg-b-color-neutral-0)}.mg-c-input--rich-text-editor .ql-editor{min-height:calc(calc(var(--mg-b-font-size) * var(--mg-b-line-height) * var(--mg-c-input-rich-text-editor-rows, 3)) + calc((var(--mg-b-size-min-height) - var(--mg-b-font-size) * var(--mg-b-line-height)) / 2));padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);color:var(--mg-b-color-dark);font-size:var(--mg-b-font-size)}.mg-c-input--rich-text-editor .ql-editor.ql-blank::before{right:var(--mg-b-size-8);left:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-editor p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor.mg-c-input--disabled .ql-toolbar{pointer-events:none}.mg-c-input--rich-text-editor.mg-c-input--has-error .ql-toolbar{border-color:var(--mg-b-color-danger)}";
|
|
16379
|
+
const mgInputRichTextEditorCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__wrapper{display:flex;width:100%;flex-direction:column;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light)}.mg-c-input__wrapper:focus-within{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus);outline:Highlight auto .1rem;outline:-webkit-focus-ring-color auto .1rem}.mg-c-input--has-error .mg-c-input__wrapper{border-color:var(--mg-b-color-danger)}.mg-c-input--disabled .mg-c-input__wrapper{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p{margin:0}.mg-c-input--rich-text-editor .mg-c-input__readonly-value p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor .ql-toolbar{display:flex;flex-wrap:wrap;padding:var(--mg-b-size-8);border:0;border-radius:var(--mg-c-input-border-radius) var(--mg-c-input-border-radius) 0 0;background:var(--mg-b-color-neutral-0);border-block-end-width:var(--mg-c-input-border-width);border-block-end-color:var(--mg-c-input-color-border);border-block-end-style:solid}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats{display:inline-flex;margin:inherit;gap:.2rem}.mg-c-input--rich-text-editor .ql-toolbar .ql-formats:not(:last-child)::after{width:.1rem;height:var(--mg-b-size-16);background:var(--mg-c-input-color-border);content:"";margin-block:var(--mg-b-size-8);margin-inline:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-fill,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-fill{fill:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button:hover .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button:focus .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active .ql-stroke,.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke:currentcolor}.mg-c-input--rich-text-editor .ql-toolbar button{display:flex;min-width:var(--mg-b-size-32);height:var(--mg-b-size-32);align-items:center;justify-content:center;padding:var(--mg-b-size-4);border:.1rem solid rgba(0,0,0,0);border-radius:var(--mg-b-size-radius);color:var(--mg-b-color-dark);float:inherit;transition-duration:.2s;transition-property:background-color,border-color;transition-timing-function:ease-in-out}.mg-c-input--rich-text-editor .ql-toolbar button svg{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-input--rich-text-editor .ql-toolbar button:focus{color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button:focus-visible,.mg-c-input--rich-text-editor .ql-toolbar button:hover,.mg-c-input--rich-text-editor .ql-toolbar button.ql-active{border-color:var(--mg-b-color-neutral-70);background:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark)}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke{stroke-width:.12rem}.mg-c-input--rich-text-editor .ql-toolbar button .ql-stroke.ql-thin{stroke-width:.1rem}.mg-c-input--rich-text-editor .ql-toolbar button.ql-bold .ql-stroke{stroke-width:.2rem}.mg-c-input--rich-text-editor .ql-container{border:0;border-radius:0 0 var(--mg-c-input-border-radius) var(--mg-c-input-border-radius);margin:0 .1rem .1rem;background:var(--mg-b-color-neutral-0)}.mg-c-input--rich-text-editor .ql-editor{min-height:calc(calc(var(--mg-b-font-size) * var(--mg-b-line-height) * var(--mg-c-input-rich-text-editor-rows, 3)) + calc((var(--mg-b-size-min-height) - var(--mg-b-font-size) * var(--mg-b-line-height)) / 2));padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);color:var(--mg-b-color-dark);font-size:var(--mg-b-font-size)}.mg-c-input--rich-text-editor .ql-editor.ql-blank::before{right:var(--mg-b-size-8);left:var(--mg-b-size-8)}.mg-c-input--rich-text-editor .ql-editor p:not(:first-child){margin-top:1em}.mg-c-input--rich-text-editor.mg-c-input--disabled .ql-toolbar{pointer-events:none}.mg-c-input--rich-text-editor.mg-c-input--has-error .ql-toolbar{border-color:var(--mg-b-color-danger)}`;
|
|
16382
16380
|
|
|
16383
16381
|
const MgInputRichTextEditor = class {
|
|
16384
16382
|
constructor(hostRef) {
|
|
@@ -16546,10 +16544,10 @@ const MgInputRichTextEditor = class {
|
|
|
16546
16544
|
(_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
|
|
16547
16545
|
}
|
|
16548
16546
|
/**
|
|
16549
|
-
* Get editor content
|
|
16547
|
+
* Get editor content in HTML format
|
|
16550
16548
|
* @returns HTML content of the editor
|
|
16551
16549
|
*/
|
|
16552
|
-
|
|
16550
|
+
getEditorHTML() {
|
|
16553
16551
|
return new Promise(resolve => {
|
|
16554
16552
|
requestAnimationFrame(() => {
|
|
16555
16553
|
resolve(this.editor.getSemanticHTML());
|
|
@@ -16557,10 +16555,10 @@ const MgInputRichTextEditor = class {
|
|
|
16557
16555
|
});
|
|
16558
16556
|
}
|
|
16559
16557
|
/**
|
|
16560
|
-
* Get editor content
|
|
16558
|
+
* Get editor content in plain text format
|
|
16561
16559
|
* @returns Plain text content of the editor
|
|
16562
16560
|
*/
|
|
16563
|
-
async
|
|
16561
|
+
async getEditorText() {
|
|
16564
16562
|
return new Promise(resolve => {
|
|
16565
16563
|
requestAnimationFrame(() => {
|
|
16566
16564
|
resolve(this.editor.getText());
|
|
@@ -16696,19 +16694,33 @@ const MgInputRichTextEditor = class {
|
|
|
16696
16694
|
* @returns HTML mg-input Element
|
|
16697
16695
|
*/
|
|
16698
16696
|
render() {
|
|
16699
|
-
return (h("mg-input", { key: '
|
|
16697
|
+
return (h("mg-input", { key: '26e4f26987e66541a6b21c7888ed7acd4e4ccad6', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
|
|
16700
16698
|
this.wrapperElement = el;
|
|
16701
16699
|
}, id: this.identifier, class: "mg-c-input__wrapper" }, h("div", null)))));
|
|
16702
16700
|
}
|
|
16703
16701
|
get element() { return getElement(this); }
|
|
16704
16702
|
static get watchers() { return {
|
|
16705
|
-
"readonly": [
|
|
16706
|
-
|
|
16707
|
-
|
|
16708
|
-
|
|
16709
|
-
|
|
16703
|
+
"readonly": [{
|
|
16704
|
+
"watchReadonly": 0
|
|
16705
|
+
}, {
|
|
16706
|
+
"handleValidityChange": 0
|
|
16707
|
+
}],
|
|
16708
|
+
"disabled": [{
|
|
16709
|
+
"watchDisabled": 0
|
|
16710
|
+
}, {
|
|
16711
|
+
"handleValidityChange": 0
|
|
16712
|
+
}],
|
|
16713
|
+
"required": [{
|
|
16714
|
+
"handleValidityChange": 0
|
|
16715
|
+
}],
|
|
16716
|
+
"pattern": [{
|
|
16717
|
+
"validatePattern": 0
|
|
16718
|
+
}],
|
|
16719
|
+
"patternErrorMessage": [{
|
|
16720
|
+
"validatePattern": 0
|
|
16721
|
+
}]
|
|
16710
16722
|
}; }
|
|
16711
16723
|
};
|
|
16712
|
-
MgInputRichTextEditor.style =
|
|
16724
|
+
MgInputRichTextEditor.style = quillSnowCss() + mgInputRichTextEditorCss();
|
|
16713
16725
|
|
|
16714
16726
|
export { MgInputRichTextEditor as mg_input_rich_text_editor };
|
|
@@ -10,10 +10,16 @@ const tooltipPositions = ['input', 'label'];
|
|
|
10
10
|
* Possible label headings
|
|
11
11
|
*/
|
|
12
12
|
const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
13
|
+
/**
|
|
14
|
+
* Is HTMLMgInputElement an HTMLMgInputFileElement
|
|
15
|
+
* @param input - input element
|
|
16
|
+
* @returns true if input is an mg-input-file element
|
|
17
|
+
*/
|
|
18
|
+
const isMgInputFile = (input) => input.nodeName === 'MG-INPUT-FILE';
|
|
13
19
|
const classFieldset = 'mg-c-input--fieldset';
|
|
14
20
|
const classDisabled = 'mg-c-input--disabled';
|
|
15
21
|
const classReadonly = 'mg-c-input--readonly';
|
|
16
22
|
const classVerticalList = 'mg-c-input--vertical-list';
|
|
17
23
|
const classDisplayCharacterLeft = 'mg-c-input--display-character-left';
|
|
18
24
|
|
|
19
|
-
export { classDisabled as a, classFieldset as b, classReadonly as c, classVerticalList as d, classDisplayCharacterLeft as e, labelHeadings as l, tooltipPositions as t, widths as w };
|
|
25
|
+
export { classDisabled as a, classFieldset as b, classReadonly as c, classVerticalList as d, classDisplayCharacterLeft as e, isMgInputFile as i, labelHeadings as l, tooltipPositions as t, widths as w };
|