@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,384 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-C2viYwrR.js');
|
|
4
|
+
var index$1 = require('./index-CpENFzEo.js');
|
|
5
|
+
var index$2 = require('./index-CCsGMNyq.js');
|
|
6
|
+
var mgInput_conf = require('./mg-input.conf-BNpeATnq.js');
|
|
7
|
+
|
|
8
|
+
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}`;
|
|
9
|
+
|
|
10
|
+
const allItemsAreFile = (items) => {
|
|
11
|
+
return Array.isArray(items) && items.every(item => index$1.isObject(item) && typeof item.name === 'string' && typeof item.size === 'number');
|
|
12
|
+
};
|
|
13
|
+
const MgInputFile = class {
|
|
14
|
+
constructor(hostRef) {
|
|
15
|
+
index.registerInstance(this, hostRef);
|
|
16
|
+
this.valueChange = index.createEvent(this, "value-change", 7);
|
|
17
|
+
this.inputValid = index.createEvent(this, "input-valid", 7);
|
|
18
|
+
// hasDisplayedError (triggered by blur event)
|
|
19
|
+
this.hasDisplayedError = false;
|
|
20
|
+
this.customErrorMessage = { lock: false };
|
|
21
|
+
/**
|
|
22
|
+
* Input name
|
|
23
|
+
* If not set the value equals the identifier
|
|
24
|
+
*/
|
|
25
|
+
this.name = this.identifier;
|
|
26
|
+
/**
|
|
27
|
+
* Define if label is displayed on top
|
|
28
|
+
*/
|
|
29
|
+
this.labelOnTop = false;
|
|
30
|
+
/**
|
|
31
|
+
* Define if label is visible
|
|
32
|
+
*/
|
|
33
|
+
this.labelHide = false;
|
|
34
|
+
/**
|
|
35
|
+
* Define multiple files
|
|
36
|
+
* When the multiple Boolean attribute is specified, the file input allows the user to select more than one file.
|
|
37
|
+
* (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple).
|
|
38
|
+
*/
|
|
39
|
+
this.multiple = false;
|
|
40
|
+
/**
|
|
41
|
+
* Define if input is required
|
|
42
|
+
*/
|
|
43
|
+
this.required = false;
|
|
44
|
+
/**
|
|
45
|
+
* Define if input is disabled
|
|
46
|
+
*/
|
|
47
|
+
this.disabled = false;
|
|
48
|
+
/**
|
|
49
|
+
* Define tooltip position
|
|
50
|
+
*/
|
|
51
|
+
this.tooltipPosition = 'input';
|
|
52
|
+
/**
|
|
53
|
+
* Component classes
|
|
54
|
+
*/
|
|
55
|
+
this.classCollection = new index$1.ClassList(['mg-c-input--file']);
|
|
56
|
+
/**
|
|
57
|
+
* Files list
|
|
58
|
+
*/
|
|
59
|
+
this.files = [];
|
|
60
|
+
/**
|
|
61
|
+
* Method to set validity values
|
|
62
|
+
* @param newValue - valid new value
|
|
63
|
+
*/
|
|
64
|
+
this.setValidity = (newValue) => {
|
|
65
|
+
const oldValue = this.valid;
|
|
66
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
67
|
+
this.valid = newValue;
|
|
68
|
+
}
|
|
69
|
+
this.invalid = !this.valid;
|
|
70
|
+
// We need to send valid event even if it is the same value
|
|
71
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue)) {
|
|
72
|
+
this.inputValid.emit(this.valid);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* Handle change event
|
|
77
|
+
*/
|
|
78
|
+
this.handleInputChange = (event) => {
|
|
79
|
+
this.checkValidity();
|
|
80
|
+
if (this.hasDisplayedError) {
|
|
81
|
+
this.setErrorMessage();
|
|
82
|
+
}
|
|
83
|
+
this.files = Array.from(event.target.files);
|
|
84
|
+
// Reset input focus to the button after file selection
|
|
85
|
+
this.fileButtonElement.focus();
|
|
86
|
+
};
|
|
87
|
+
/**
|
|
88
|
+
* Handle input focus event
|
|
89
|
+
*/
|
|
90
|
+
this.handleInputFocus = () => {
|
|
91
|
+
this.fileButtonElement.dataset.focusVisible = '';
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* Handle input blur event
|
|
95
|
+
*/
|
|
96
|
+
this.handleInputBlur = () => {
|
|
97
|
+
// Display Error
|
|
98
|
+
this.handlerInProgress = 'blur';
|
|
99
|
+
this.displayError().finally(() => {
|
|
100
|
+
// reset guard
|
|
101
|
+
this.handlerInProgress = undefined;
|
|
102
|
+
});
|
|
103
|
+
delete this.fileButtonElement.dataset.focusVisible;
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* Handle button blur event
|
|
107
|
+
*/
|
|
108
|
+
this.handleButtonBlur = () => {
|
|
109
|
+
this.inputElement.blur();
|
|
110
|
+
};
|
|
111
|
+
/**
|
|
112
|
+
* Handle add file button click
|
|
113
|
+
*/
|
|
114
|
+
this.handleButtonClick = () => {
|
|
115
|
+
this.inputElement.click();
|
|
116
|
+
};
|
|
117
|
+
/**
|
|
118
|
+
* Check if input is valid
|
|
119
|
+
*/
|
|
120
|
+
this.checkValidity = () => {
|
|
121
|
+
this.setValidity(this.disabled || (!this.isMaxSizeExceeded() && this.inputElement.checkValidity()));
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* Handle delete file button click
|
|
125
|
+
*/
|
|
126
|
+
this.handleDeleteFileClick = () => {
|
|
127
|
+
this.files = [];
|
|
128
|
+
// Reset input focus to the button after file selection
|
|
129
|
+
this.fileButtonElement.focus();
|
|
130
|
+
};
|
|
131
|
+
/**
|
|
132
|
+
* Set input error message
|
|
133
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
134
|
+
*/
|
|
135
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
136
|
+
// Set error message
|
|
137
|
+
this.errorMessage = undefined;
|
|
138
|
+
if (!this.valid) {
|
|
139
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
140
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
141
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
142
|
+
}
|
|
143
|
+
// Does not match max size
|
|
144
|
+
else if (this.isMaxSizeExceeded()) {
|
|
145
|
+
this.errorMessage = this.messages.input.file.errors.maxSize.replace('{{maxSize}}', index$2.localeByte(this.maxSize, this.locale));
|
|
146
|
+
}
|
|
147
|
+
// required
|
|
148
|
+
else if (this.inputElement.validity.valueMissing) {
|
|
149
|
+
this.errorMessage = this.messages.errors.required;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
/**
|
|
154
|
+
* Check if max size is exceeded
|
|
155
|
+
* @returns boolean - true if max size is exceeded
|
|
156
|
+
*/
|
|
157
|
+
this.isMaxSizeExceeded = () => {
|
|
158
|
+
return this.maxSize >= 0 && this.files.some(file => file.size > this.maxSize);
|
|
159
|
+
};
|
|
160
|
+
/**
|
|
161
|
+
* Render files
|
|
162
|
+
* @returns formated files.
|
|
163
|
+
*/
|
|
164
|
+
this.renderFiles = () => {
|
|
165
|
+
const fileListId = `${this.identifier}-file-list`;
|
|
166
|
+
const renderFileName = (file) => (index.h("span", { class: "mg-c-input__file-item-name" }, file.name, file.size > 0 ? index.h("span", { class: "mg-c-input__file-item-size" }, ` ${index$2.localeByte(file.size, this.locale)}`) : undefined));
|
|
167
|
+
const renderDeleteButton = () => (index.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 }, index.h("mg-icon", { icon: "cross" })));
|
|
168
|
+
if (this.files.length === 0) {
|
|
169
|
+
return null;
|
|
170
|
+
}
|
|
171
|
+
else if (this.files.length === 1) {
|
|
172
|
+
return (index.h("div", { class: "mg-c-input__file-item" }, renderFileName(this.files[0]), renderDeleteButton()));
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
return (index.h("div", { class: "mg-c-input__file-list-container" }, index.h("ul", { role: "list", class: "mg-c-input__file-list", id: fileListId }, Array.from(this.files).map((file, index$1) => (index.h("li", { class: "mg-c-input__file-item", key: `${file.name}-${index$1}` }, renderFileName(file))))), renderDeleteButton()));
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
}
|
|
179
|
+
watchValue(newValue) {
|
|
180
|
+
if (index$1.allItemsAreString(newValue)) {
|
|
181
|
+
this.files = this.value.map((fileName) => new File([], fileName));
|
|
182
|
+
}
|
|
183
|
+
else if (allItemsAreFile(newValue)) {
|
|
184
|
+
this.files = this.value;
|
|
185
|
+
}
|
|
186
|
+
else if (newValue !== undefined) {
|
|
187
|
+
throw new Error(`<mg-input-file> prop "value" must be an array of strings or File objects. Passed value: ${index$1.toString(newValue)}.`);
|
|
188
|
+
}
|
|
189
|
+
else {
|
|
190
|
+
this.files = [];
|
|
191
|
+
}
|
|
192
|
+
this.valueChange.emit(newValue);
|
|
193
|
+
}
|
|
194
|
+
watchMultiple() {
|
|
195
|
+
if (this.multiple === false && this.files.length > 1) {
|
|
196
|
+
throw new Error(`<mg-input-file> prop "value" must be a single file when prop "multiple" is set to false.`);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
watchAccept(newValue) {
|
|
200
|
+
if (newValue !== undefined && !index$1.isValidString(newValue)) {
|
|
201
|
+
throw new Error(`<mg-input-file> prop "accept" must be a valid string.`);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
handleValidityChange(newValue, _oldValue, prop) {
|
|
205
|
+
if (this.inputElement !== undefined) {
|
|
206
|
+
this.inputElement[prop] = newValue;
|
|
207
|
+
this.checkValidity();
|
|
208
|
+
if (this.hasDisplayedError) {
|
|
209
|
+
this.setErrorMessage();
|
|
210
|
+
this.hasDisplayedError = false;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
watchDisabled(newValue) {
|
|
215
|
+
if (newValue) {
|
|
216
|
+
this.classCollection.add(mgInput_conf.classDisabled);
|
|
217
|
+
}
|
|
218
|
+
else {
|
|
219
|
+
this.classCollection.delete(mgInput_conf.classDisabled);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
watchHelpText() {
|
|
223
|
+
if (!index$1.isValidString(this.helpText)) {
|
|
224
|
+
const helpText = [];
|
|
225
|
+
if (this.maxSize !== undefined) {
|
|
226
|
+
helpText.push(this.messages.input.file.helpText.maxSize.replace('{{maxSize}}', index$2.localeByte(this.maxSize, this.locale)));
|
|
227
|
+
}
|
|
228
|
+
if (this.accept !== undefined) {
|
|
229
|
+
helpText.push(this.messages.input.file.helpText.accept.replace('{{accept}}', this.accept));
|
|
230
|
+
}
|
|
231
|
+
this.helpText = helpText.join('. ');
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
watchFiles(newValue, oldValue) {
|
|
235
|
+
if (index$1.toString(newValue) !== index$1.toString(oldValue)) {
|
|
236
|
+
this.value = newValue.length > 0 ? newValue : undefined;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
/**
|
|
240
|
+
* Set focus on input add file button
|
|
241
|
+
*/
|
|
242
|
+
async setFocus() {
|
|
243
|
+
this.fileButtonElement.focus();
|
|
244
|
+
}
|
|
245
|
+
/**
|
|
246
|
+
* Display input error if it exists.
|
|
247
|
+
*/
|
|
248
|
+
displayError() {
|
|
249
|
+
// Use `Promise` as requested for stencil method
|
|
250
|
+
// Use `requestAnimationFrame` to ensure:
|
|
251
|
+
// - DOM is fully updated before validation
|
|
252
|
+
// - Async operations are completed
|
|
253
|
+
// - No timing issues with Stencil's render cycle
|
|
254
|
+
// - Keep everything in sync both inside and outside the component
|
|
255
|
+
return new Promise(resolve => {
|
|
256
|
+
requestAnimationFrame(() => {
|
|
257
|
+
this.checkValidity();
|
|
258
|
+
this.setErrorMessage();
|
|
259
|
+
this.hasDisplayedError = this.invalid;
|
|
260
|
+
resolve();
|
|
261
|
+
});
|
|
262
|
+
});
|
|
263
|
+
}
|
|
264
|
+
/**
|
|
265
|
+
* Set an error and display a custom error message.
|
|
266
|
+
* This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
|
|
267
|
+
* It must be paired with an error message to display for the given context.
|
|
268
|
+
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
269
|
+
* @param valid - value indicating the validity
|
|
270
|
+
* @param errorMessage - the error message to display
|
|
271
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
272
|
+
*/
|
|
273
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
274
|
+
if (typeof valid !== 'boolean') {
|
|
275
|
+
throw new Error('<mg-input-file> method "setError()" param "valid" must be a boolean.');
|
|
276
|
+
}
|
|
277
|
+
else if (errorMessage !== undefined && !index$1.isValidString(errorMessage)) {
|
|
278
|
+
throw new Error('<mg-input-file> method "setError()" param "errorMessage" must be a string.');
|
|
279
|
+
}
|
|
280
|
+
else {
|
|
281
|
+
this.customErrorMessage = {
|
|
282
|
+
lock: valid ? false : errorMessageLock,
|
|
283
|
+
message: valid ? undefined : errorMessage,
|
|
284
|
+
};
|
|
285
|
+
this.setValidity(valid);
|
|
286
|
+
this.setErrorMessage(true);
|
|
287
|
+
this.hasDisplayedError = this.invalid;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
/**
|
|
291
|
+
* Reset value, validity and error state
|
|
292
|
+
*/
|
|
293
|
+
async reset() {
|
|
294
|
+
this.files = [];
|
|
295
|
+
// Use `Promise` as requested for stencil method
|
|
296
|
+
// Use `requestAnimationFrame` to ensure:
|
|
297
|
+
// - DOM is fully updated before validation
|
|
298
|
+
// - Async operations are completed
|
|
299
|
+
// - No timing issues with Stencil's render cycle
|
|
300
|
+
// - Keep everything in sync both inside and outside the component
|
|
301
|
+
return new Promise(resolve => {
|
|
302
|
+
requestAnimationFrame(() => {
|
|
303
|
+
// unlock validity check by resetting customErrorMessage
|
|
304
|
+
this.customErrorMessage = { lock: false };
|
|
305
|
+
this.checkValidity();
|
|
306
|
+
this.errorMessage = undefined;
|
|
307
|
+
this.hasDisplayedError = false;
|
|
308
|
+
resolve();
|
|
309
|
+
});
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
/*************
|
|
313
|
+
* Lifecycle *
|
|
314
|
+
*************/
|
|
315
|
+
/**
|
|
316
|
+
* Check if component props are well configured on init
|
|
317
|
+
* @returns timeout
|
|
318
|
+
*/
|
|
319
|
+
componentWillLoad() {
|
|
320
|
+
// Get locales
|
|
321
|
+
const locales = index$2.initLocales(this.element);
|
|
322
|
+
this.locale = locales.locale;
|
|
323
|
+
this.messages = locales.messages;
|
|
324
|
+
// Validate
|
|
325
|
+
this.watchValue(this.value);
|
|
326
|
+
this.watchDisabled(this.disabled);
|
|
327
|
+
this.watchHelpText();
|
|
328
|
+
this.watchAccept(this.accept);
|
|
329
|
+
this.watchMultiple();
|
|
330
|
+
// Check validity when component is ready
|
|
331
|
+
// return a promise to process action only in the FIRST render().
|
|
332
|
+
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
333
|
+
return setTimeout(() => {
|
|
334
|
+
this.checkValidity();
|
|
335
|
+
}, 0);
|
|
336
|
+
}
|
|
337
|
+
/**
|
|
338
|
+
* Render
|
|
339
|
+
* @returns HTML Element
|
|
340
|
+
*/
|
|
341
|
+
render() {
|
|
342
|
+
return (index.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 }, index.h("div", { key: '88fafc6fd4a84c05a545c0083193e2ee0db54bfb', class: "mg-c-input__file-container" }, index.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) => {
|
|
343
|
+
this.inputElement = el;
|
|
344
|
+
} }), index.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) => {
|
|
345
|
+
this.fileButtonElement = el;
|
|
346
|
+
} }, this.messages.input.file.browse), this.renderFiles())));
|
|
347
|
+
}
|
|
348
|
+
get element() { return index.getElement(this); }
|
|
349
|
+
static get watchers() { return {
|
|
350
|
+
"value": [{
|
|
351
|
+
"watchValue": 0
|
|
352
|
+
}, {
|
|
353
|
+
"watchMultiple": 0
|
|
354
|
+
}],
|
|
355
|
+
"multiple": [{
|
|
356
|
+
"watchMultiple": 0
|
|
357
|
+
}],
|
|
358
|
+
"accept": [{
|
|
359
|
+
"watchAccept": 0
|
|
360
|
+
}, {
|
|
361
|
+
"watchHelpText": 0
|
|
362
|
+
}],
|
|
363
|
+
"required": [{
|
|
364
|
+
"handleValidityChange": 0
|
|
365
|
+
}],
|
|
366
|
+
"disabled": [{
|
|
367
|
+
"handleValidityChange": 0
|
|
368
|
+
}, {
|
|
369
|
+
"watchDisabled": 0
|
|
370
|
+
}],
|
|
371
|
+
"helpText": [{
|
|
372
|
+
"watchHelpText": 0
|
|
373
|
+
}],
|
|
374
|
+
"maxSize": [{
|
|
375
|
+
"watchHelpText": 0
|
|
376
|
+
}],
|
|
377
|
+
"files": [{
|
|
378
|
+
"watchFiles": 0
|
|
379
|
+
}]
|
|
380
|
+
}; }
|
|
381
|
+
};
|
|
382
|
+
MgInputFile.style = mgInputFileCss();
|
|
383
|
+
|
|
384
|
+
exports.mg_input_file = MgInputFile;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index$1 = require('./index-
|
|
3
|
+
var index$1 = require('./index-C2viYwrR.js');
|
|
4
4
|
var index = require('./index-CpENFzEo.js');
|
|
5
|
-
var mgInput_conf = require('./mg-input.conf-
|
|
6
|
-
var index$2 = require('./index-
|
|
5
|
+
var mgInput_conf = require('./mg-input.conf-BNpeATnq.js');
|
|
6
|
+
var index$2 = require('./index-CCsGMNyq.js');
|
|
7
7
|
|
|
8
8
|
/** Detect free variable `global` from Node.js. */
|
|
9
9
|
var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
|
|
@@ -16376,11 +16376,9 @@ const defineEditor = (wrapperElement, { value, modules, readOnly, placeholder, h
|
|
|
16376
16376
|
return editor;
|
|
16377
16377
|
};
|
|
16378
16378
|
|
|
16379
|
-
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}";
|
|
16379
|
+
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}`;
|
|
16380
16380
|
|
|
16381
|
-
const
|
|
16382
|
-
|
|
16383
|
-
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)}";
|
|
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)}`;
|
|
16384
16382
|
|
|
16385
16383
|
const MgInputRichTextEditor = class {
|
|
16386
16384
|
constructor(hostRef) {
|
|
@@ -16548,10 +16546,10 @@ const MgInputRichTextEditor = class {
|
|
|
16548
16546
|
(_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
|
|
16549
16547
|
}
|
|
16550
16548
|
/**
|
|
16551
|
-
* Get editor content
|
|
16549
|
+
* Get editor content in HTML format
|
|
16552
16550
|
* @returns HTML content of the editor
|
|
16553
16551
|
*/
|
|
16554
|
-
|
|
16552
|
+
getEditorHTML() {
|
|
16555
16553
|
return new Promise(resolve => {
|
|
16556
16554
|
requestAnimationFrame(() => {
|
|
16557
16555
|
resolve(this.editor.getSemanticHTML());
|
|
@@ -16559,10 +16557,10 @@ const MgInputRichTextEditor = class {
|
|
|
16559
16557
|
});
|
|
16560
16558
|
}
|
|
16561
16559
|
/**
|
|
16562
|
-
* Get editor content
|
|
16560
|
+
* Get editor content in plain text format
|
|
16563
16561
|
* @returns Plain text content of the editor
|
|
16564
16562
|
*/
|
|
16565
|
-
async
|
|
16563
|
+
async getEditorText() {
|
|
16566
16564
|
return new Promise(resolve => {
|
|
16567
16565
|
requestAnimationFrame(() => {
|
|
16568
16566
|
resolve(this.editor.getText());
|
|
@@ -16698,19 +16696,33 @@ const MgInputRichTextEditor = class {
|
|
|
16698
16696
|
* @returns HTML mg-input Element
|
|
16699
16697
|
*/
|
|
16700
16698
|
render() {
|
|
16701
|
-
return (index$1.h("mg-input", { key: '
|
|
16699
|
+
return (index$1.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 ? (index$1.h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (index$1.h("div", { ref: el => {
|
|
16702
16700
|
this.wrapperElement = el;
|
|
16703
16701
|
}, id: this.identifier, class: "mg-c-input__wrapper" }, index$1.h("div", null)))));
|
|
16704
16702
|
}
|
|
16705
16703
|
get element() { return index$1.getElement(this); }
|
|
16706
16704
|
static get watchers() { return {
|
|
16707
|
-
"readonly": [
|
|
16708
|
-
|
|
16709
|
-
|
|
16710
|
-
|
|
16711
|
-
|
|
16705
|
+
"readonly": [{
|
|
16706
|
+
"watchReadonly": 0
|
|
16707
|
+
}, {
|
|
16708
|
+
"handleValidityChange": 0
|
|
16709
|
+
}],
|
|
16710
|
+
"disabled": [{
|
|
16711
|
+
"watchDisabled": 0
|
|
16712
|
+
}, {
|
|
16713
|
+
"handleValidityChange": 0
|
|
16714
|
+
}],
|
|
16715
|
+
"required": [{
|
|
16716
|
+
"handleValidityChange": 0
|
|
16717
|
+
}],
|
|
16718
|
+
"pattern": [{
|
|
16719
|
+
"validatePattern": 0
|
|
16720
|
+
}],
|
|
16721
|
+
"patternErrorMessage": [{
|
|
16722
|
+
"validatePattern": 0
|
|
16723
|
+
}]
|
|
16712
16724
|
}; }
|
|
16713
16725
|
};
|
|
16714
|
-
MgInputRichTextEditor.style =
|
|
16726
|
+
MgInputRichTextEditor.style = quillSnowCss() + mgInputRichTextEditorCss();
|
|
16715
16727
|
|
|
16716
16728
|
exports.mg_input_rich_text_editor = MgInputRichTextEditor;
|
|
@@ -12,6 +12,12 @@ const tooltipPositions = ['input', 'label'];
|
|
|
12
12
|
* Possible label headings
|
|
13
13
|
*/
|
|
14
14
|
const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
15
|
+
/**
|
|
16
|
+
* Is HTMLMgInputElement an HTMLMgInputFileElement
|
|
17
|
+
* @param input - input element
|
|
18
|
+
* @returns true if input is an mg-input-file element
|
|
19
|
+
*/
|
|
20
|
+
const isMgInputFile = (input) => input.nodeName === 'MG-INPUT-FILE';
|
|
15
21
|
const classFieldset = 'mg-c-input--fieldset';
|
|
16
22
|
const classDisabled = 'mg-c-input--disabled';
|
|
17
23
|
const classReadonly = 'mg-c-input--readonly';
|
|
@@ -23,6 +29,7 @@ exports.classDisplayCharacterLeft = classDisplayCharacterLeft;
|
|
|
23
29
|
exports.classFieldset = classFieldset;
|
|
24
30
|
exports.classReadonly = classReadonly;
|
|
25
31
|
exports.classVerticalList = classVerticalList;
|
|
32
|
+
exports.isMgInputFile = isMgInputFile;
|
|
26
33
|
exports.labelHeadings = labelHeadings;
|
|
27
34
|
exports.tooltipPositions = tooltipPositions;
|
|
28
35
|
exports.widths = widths;
|