@elcrm/form 0.1.7 → 0.1.9
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/README.md +4 -3
- package/dist/assets/styles/Code.module.css +1 -1
- package/dist/assets/styles/Field.module.css +1 -1
- package/dist/assets/styles/Search.module.css +1 -0
- package/dist/assets/styles/Tabs.module.css +1 -1
- package/dist/core/Field.js +1 -1
- package/dist/dark.css +10 -1
- package/dist/fields/Code.d.ts +1 -11
- package/dist/fields/Code.js +1 -1
- package/dist/fields/FieldGroup.d.ts +9 -2
- package/dist/fields/FieldGroup.js +1 -1
- package/dist/fields/Password.d.ts +3 -2
- package/dist/fields/Password.js +1 -1
- package/dist/fields/Search.d.ts +61 -0
- package/dist/fields/Search.js +1 -0
- package/dist/fields/SearchSuggestions.d.ts +26 -0
- package/dist/fields/SearchSuggestions.js +1 -0
- package/dist/fields/Tabs.d.ts +16 -6
- package/dist/fields/Tabs.js +1 -1
- package/dist/fields/{codeUtils.d.ts → passwordUtils.d.ts} +5 -3
- package/dist/fields/passwordUtils.js +1 -0
- package/dist/fields/searchAnnounce.d.ts +2 -0
- package/dist/fields/searchAnnounce.js +1 -0
- package/dist/fields/searchHotkey.d.ts +5 -0
- package/dist/fields/searchHotkey.js +1 -0
- package/dist/fields/type.d.ts +6 -0
- package/dist/index.d.ts +4 -2
- package/dist/index.js +2 -2
- package/dist/index.umd.js +3 -3
- package/dist/light.css +10 -1
- package/dist/package.js +1 -1
- package/dist/style.css +3 -3
- package/dist/styles/Code.module.js +1 -1
- package/dist/styles/Field.module.js +1 -1
- package/dist/styles/Search.module.js +1 -0
- package/package.json +1 -1
- package/dist/fields/codeUtils.js +0 -1
package/README.md
CHANGED
|
@@ -111,7 +111,8 @@ form.subscribe("login", () => { /* … */ }); // → unsubscribe()
|
|
|
111
111
|
| Компонент | В `form` | Как пользоваться |
|
|
112
112
|
| --------- | -------- | ---------------- |
|
|
113
113
|
| `StringField` | `string` | По умолчанию contentEditable; для логина/почты — `native` + `autoComplete` |
|
|
114
|
-
| `
|
|
114
|
+
| `SearchField` | `string` | Поиск в форме: `timeout`, `suggestions`, `minimal`, `hotkey`, `variant`. Хедер без `form` — `<Search>` из `@elcrm/search` (те же `--field-*`) |
|
|
115
|
+
| `PasswordField` | `string` | Глаз; `generate` (`true` → `Az09#`); `native` = **не рендерить** |
|
|
115
116
|
| `TextareaField` | `string` | Многострочный текст |
|
|
116
117
|
| `EmailField` | `string` | Проверка формата на blur (`validate`) |
|
|
117
118
|
| `UrlField` | `string` | `type="url"` |
|
|
@@ -130,7 +131,7 @@ form.subscribe("login", () => { /* … */ }); // → unsubscribe()
|
|
|
130
131
|
| `TimeField` | `HH:mm` \| `""` | `picker`, `presets`, `step` |
|
|
131
132
|
| `SelectField` | `number` (id) | `options={{ 1: { n: "Админ", s: 1 } }}` — `s: 0` скрывает |
|
|
132
133
|
| `RadioField` | id | `options` + `inline` |
|
|
133
|
-
| `TabsField` | id | Сегменты; `equal`
|
|
134
|
+
| `TabsField` | id | Сегменты; `variant="field"|"pill"`, `equal` |
|
|
134
135
|
| `CheckField` | `boolean` | `placeholder` — текст рядом с квадратом; `variant="field"|"plain"` |
|
|
135
136
|
| `OptionsField` / `ModalField` | зависит от `outFormat` | Выбор в модалке приложения — нужен `Form.Init` |
|
|
136
137
|
|
|
@@ -141,7 +142,7 @@ form.subscribe("login", () => { /* … */ }); // → unsubscribe()
|
|
|
141
142
|
| `RangeField` | `number` | `variant="bar"|"line"`, `min`/`max`/`step` |
|
|
142
143
|
| `TagsField` | `string[]` | Чипы; `maxTags`, `separators` |
|
|
143
144
|
| `RatingField` | `number` | `max`, `allowClear` |
|
|
144
|
-
| `CodeField` | `string` | OTP-ячейки;
|
|
145
|
+
| `CodeField` | `string` | OTP-ячейки; крупно — `cellSize={80}` |
|
|
145
146
|
| `ColorField` | hex | Пикер; `colors`, `alpha`, `inlinePalette` (пресеты в поле) |
|
|
146
147
|
| `FileField` / `DragDropField` | `File` / мета | `accept`, `multiple`, `maxSize` |
|
|
147
148
|
| `RichTextField` | HTML-строка | `toolbar`; санитизация — на стороне приложения |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.fdr{align-items:stretch;box-shadow:none!important;background:0 0!important;border:0!important;gap:0!important;min-height:0!important;padding:0!important;overflow:visible!important}.fdr:hover,.fdr:focus-within{box-shadow:none!important;background:0 0!important;border:0!important}.fdr[data-disabled=true]{opacity:1;background:0 0!important}.fdr>div{flex:none;min-height:0;padding:0;line-height:normal}.fdi{align-items:center;gap:var(--field-code-gap);width:max-content;max-width:100%;min-height:var(--field-code-size);flex-wrap:nowrap;display:flex}.fdc{box-sizing:border-box;width:var(--field-code-size);height:var(--field-code-size);flex:0 0 var(--field-code-size);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);font:inherit;font-size:max(var(--control-font-size), calc(var(--field-code-size) * .42));font-variant-numeric:tabular-nums;line-height:calc(var(--field-code-size) - 2px);text-align:center;outline:none;margin:0;padding:0;transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s}.fdc::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fdc:hover:not(:disabled){border-color:var(--field-border-hover)}.fdc:focus{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fdc:disabled{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85}.fdc::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.
|
|
1
|
+
@layer elcrm-form{.fdr{align-items:stretch;box-shadow:none!important;background:0 0!important;border:0!important;gap:0!important;min-height:0!important;padding:0!important;overflow:visible!important}.fdr:hover,.fdr:focus-within{box-shadow:none!important;background:0 0!important;border:0!important}.fdr[data-disabled=true]{opacity:1;background:0 0!important}.fdr>div{flex:none;min-height:0;padding:0;line-height:normal}.fdi{align-items:center;gap:var(--field-code-gap);width:max-content;max-width:100%;min-height:var(--field-code-size);flex-wrap:nowrap;display:flex}.fdc{box-sizing:border-box;width:var(--field-code-size);height:var(--field-code-size);flex:0 0 var(--field-code-size);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);font:inherit;font-size:max(var(--control-font-size), calc(var(--field-code-size) * .42));font-variant-numeric:tabular-nums;line-height:calc(var(--field-code-size) - 2px);text-align:center;outline:none;margin:0;padding:0;transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s}.fdc::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fdc:hover:not(:disabled){border-color:var(--field-border-hover)}.fdc:focus{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fdc:disabled{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85}.fdc::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fds{width:.75em;color:var(--field-placeholder);font-size:max(var(--control-font-size), calc(var(--field-code-size) * .35));line-height:var(--field-code-size);text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;flex:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.ffl{min-width:var(--field-width);gap:var(--field-block-gap);flex-direction:column;margin:0;padding:0;display:flex;position:relative}.ffl[data-size=s],.ffl[data-size=sm]{--field-height:var(--control-height-s);--control-height:var(--control-height-s);font-size:13px}.ffl[data-size=l]{--field-height:var(--control-height-l);--control-height:var(--control-height-l)}.ffl>.fft,.ffl>.fff,.ffl>.ffm{margin:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div{cursor:pointer;border-bottom:var(--field-border);margin:0;padding:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div:last-child{border-bottom:0}.ffl [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}.ffl [placeholder]:focus:before{display:none}.fff{box-sizing:border-box;align-items:stretch;gap:var(--field-icon-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--field-padding);min-height:var(--field-height);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}.fff:hover{border-color:var(--field-border-hover)}.fff:focus-within{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fff.ffe:focus-within{background:var(--field-error-background);color:var(--field-error-color)}.fff[data-disabled=true]{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85;-webkit-user-select:none;user-select:none}.fff[data-disabled=true]>*{cursor:not-allowed;pointer-events:none}.fff[data-disabled=true]:focus-within{border-color:var(--field-border-disabled);box-shadow:none;background:var(--field-background-disabled)}.fff>div{min-width:0;min-height:0;line-height:1.25;font-size:var(--control-font-size);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}.fff>div::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fff>:not(div){box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}.fff>:not(div) svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.fff input::placeholder,.fff textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div{scrollbar-width:none;-ms-overflow-style:none}:is(.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div)::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffn{min-height:var(--field-note-height);align-items:stretch}.ffn>div{min-height:0;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;padding:0;overflow:hidden auto}.ffn>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div{box-sizing:border-box;height:auto;min-height:0;max-height:none;line-height:calc(var(--field-height) - 2 * var(--field-padding-block));text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;align-self:stretch;overflow:auto hidden}.ffw>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}.fft{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap);cursor:default;display:block}.ffx{flex:1;align-items:center;min-width:0;display:flex}.ffy{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}.ffy:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffa{box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.ffa:disabled{cursor:not-allowed;opacity:.6}.ffa svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.ffg{gap:var(--field-padding-block);flex-direction:column;align-items:stretch}.ffr>div{box-sizing:border-box;flex:1;align-items:center;min-width:0;min-height:0;line-height:normal;display:flex}.ffr .ffk{box-sizing:border-box;width:100%;height:var(--field-range-bar-height);background:var(--field-range-track);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}.ffr .ffk:focus-visible{box-shadow:var(--field-focus-shadow)}.ffr .ffk[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}.ffr .ffu{background:var(--field-range-fill);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}.ffr .ffv{border-radius:999px}.ffr[data-variant=line]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.ffr[data-variant=line]:hover,.ffr[data-variant=line]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.ffr[data-variant=line]>div{min-height:calc(var(--field-range-thumb-size) + 6px);overflow:visible}.ffr[data-variant=line] .ffk{height:var(--field-range-line-height);background:var(--field-range-track);overflow:visible}.ffr[data-variant=line] .ffu{display:none}.ffr[data-variant=line] .ffh{width:var(--field-range-thumb-size);height:var(--field-range-thumb-size);background:var(--field-range-thumb);pointer-events:none;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ffe{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}.ffm{color:var(--field-error-color);font-size:var(--field-error-size);margin-top:var(--field-error-gap);font-style:normal}.ffd{cursor:default}.ffd>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;overflow:hidden}.ffd[data-multiline=true]>div{white-space:pre-wrap;text-overflow:unset;overflow-wrap:anywhere;overflow-y:auto}.ffz{color:var(--field-placeholder)}}
|
|
1
|
+
@layer elcrm-form{.ffl{min-width:var(--field-width);gap:var(--field-block-gap);flex-direction:column;margin:0;padding:0;display:flex;position:relative}.ffl[data-size=s],.ffl[data-size=sm]{--field-height:var(--control-height-s);--control-height:var(--control-height-s);font-size:13px}.ffl[data-size=l]{--field-height:var(--control-height-l);--control-height:var(--control-height-l)}.ffl>.fft,.ffl>.fff,.ffl>.ffm{margin:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div{cursor:pointer;border-bottom:var(--field-border);margin:0;padding:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div:last-child{border-bottom:0}.ffl [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}.ffl [placeholder]:focus:before{display:none}.fff{box-sizing:border-box;align-items:stretch;gap:var(--field-icon-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--field-padding);min-height:var(--field-height);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}.fff:hover{border-color:var(--field-border-hover)}.fff:focus-within{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fff.ffe:focus-within{background:var(--field-error-background);color:var(--field-error-color)}.fff[data-disabled=true]{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85;-webkit-user-select:none;user-select:none}.fff[data-disabled=true]>*{cursor:not-allowed;pointer-events:none}.fff[data-disabled=true]:focus-within{border-color:var(--field-border-disabled);box-shadow:none;background:var(--field-background-disabled)}.fff>div{min-width:0;min-height:0;line-height:1.25;font-size:var(--control-font-size);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}.fff>div::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fff>:not(div){box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}.fff>:not(div) svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.fff input::placeholder,.fff textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div{scrollbar-width:none;-ms-overflow-style:none}:is(.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div)::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffn{min-height:var(--field-note-height);align-items:stretch}.ffn>div{min-height:0;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;padding:0;overflow:hidden auto}.ffn>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div{box-sizing:border-box;height:auto;min-height:0;max-height:none;line-height:calc(var(--field-height) - 2 * var(--field-padding-block));text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;align-self:stretch;overflow:auto hidden}.ffw>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}.fft{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap);cursor:default;display:block}.ffx{flex:1;align-items:center;min-width:0;display:flex}.ffy{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}.ffy:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffa{box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.ffa:disabled{cursor:not-allowed;opacity:.6}.ffa svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}@keyframes ffspin{to{transform:rotate(360deg)}}.ffj{animation:.55s ease-in-out ffspin}@media (prefers-reduced-motion:reduce){.ffj{animation:none}}.ffg{gap:var(--field-padding-block);flex-direction:column;align-items:stretch}.ffr>div{box-sizing:border-box;flex:1;align-items:center;min-width:0;min-height:0;line-height:normal;display:flex}.ffr .ffk{box-sizing:border-box;width:100%;height:var(--field-range-bar-height);background:var(--field-range-track);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}.ffr .ffk:focus-visible{box-shadow:var(--field-focus-shadow)}.ffr .ffk[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}.ffr .ffu{background:var(--field-range-fill);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}.ffr .ffv{border-radius:999px}.ffr[data-variant=line]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.ffr[data-variant=line]:hover,.ffr[data-variant=line]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.ffr[data-variant=line]>div{min-height:calc(var(--field-range-thumb-size) + 6px);overflow:visible}.ffr[data-variant=line] .ffk{height:var(--field-range-line-height);background:var(--field-range-track);overflow:visible}.ffr[data-variant=line] .ffu{display:none}.ffr[data-variant=line] .ffh{width:var(--field-range-thumb-size);height:var(--field-range-thumb-size);background:var(--field-range-thumb);pointer-events:none;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ffe{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}.ffm{color:var(--field-error-color);font-size:var(--field-error-size);margin-top:var(--field-error-gap);font-style:normal}.ffd{cursor:default}.ffd>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;overflow:hidden}.ffd[data-multiline=true]>div{white-space:pre-wrap;text-overflow:unset;overflow-wrap:anywhere;overflow-y:auto}.ffz{color:var(--field-placeholder)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer elcrm-form{.fqc{min-width:0}.fqs{width:fit-content;min-width:0}.fqm{width:fit-content;min-width:var(--field-search-min-width)}.fql{width:100%;max-width:100%}.fqr{position:relative;gap:var(--field-icon-gap)!important;overflow:visible!important}.fqr[data-variant=ghost]{background:0 0;border-color:#0000}.fqr[data-variant=ghost]:focus-within{background:var(--field-background-focus)!important;border-color:var(--field-border-hover)!important;box-shadow:none!important}.fqr[data-variant=filled]{background:var(--field-background-disabled);border-color:#0000}.fqr[data-variant=filled]:focus-within{background:var(--field-background-focus)!important;box-shadow:none!important}.fqd{align-items:center;gap:var(--field-icon-gap);flex-direction:row;width:100%;min-width:0;min-height:0;padding:0;line-height:normal;display:flex}.fqr [data-live]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fqp .fqr{width:var(--field-height);min-width:var(--field-height);max-width:var(--field-height);cursor:pointer;justify-content:center;padding:0!important}.fqp .fqn,.fqp .fqx,.fqp .fqu,.fqp .fqw,.fqp .fqk{opacity:0;pointer-events:none;flex:0 0 0;width:0;min-width:0;overflow:hidden}.fqy .fqr{width:auto;max-width:none;padding-inline:var(--field-padding-inline)!important}.fqy .fqk{opacity:1;flex:none;width:auto;overflow:visible}.fqe .fqr{cursor:text;width:auto;min-width:var(--field-search-expand-min);justify-content:flex-start;max-width:none;padding:var(--field-padding)!important}.fql.fqe .fqr{width:100%;min-width:0}.fqe .fqn{opacity:1;pointer-events:auto;flex:auto;width:auto;min-width:0;overflow:visible}.fqe .fqx,.fqe .fqu,.fqe .fqw{opacity:1;pointer-events:auto;flex:none;width:auto;overflow:visible}.fqe .fqu{pointer-events:none;visibility:hidden}.fqb{color:var(--field-icon-color);flex-shrink:0;display:inline-flex}.fqv{width:var(--field-icon-size);height:var(--field-icon-size);stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block}.fqi{animation:.7s linear infinite fqspin}@keyframes fqspin{to{transform:rotate(360deg)}}.fqn{min-width:0;color:inherit;font:inherit;appearance:none;background:0 0;border:0;outline:0;flex:1;height:100%;padding:0}.fqn::-webkit-search-cancel-button{appearance:none;display:none}.fqn::-webkit-search-decoration{appearance:none;display:none}.fqn::placeholder{color:var(--field-placeholder);opacity:1}.fqn:disabled{cursor:not-allowed}.fqk{font:inherit;border:var(--field-border);background:var(--field-background-disabled);color:var(--field-placeholder);border-radius:6px;flex-shrink:0;padding:2px 5px;font-size:11px;line-height:1}.fqx,.fqu{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.fqx{appearance:none;cursor:pointer;color:var(--field-placeholder);background:0 0;border:0;border-radius:6px;margin:0;padding:0}.fqx:hover:not(:disabled){color:var(--field-color);background:var(--field-background-focus)}.fqu{pointer-events:none;visibility:hidden}.fqw{flex-shrink:0;align-items:center;gap:4px;display:inline-flex}.fqq{box-sizing:border-box;max-height:var(--field-search-list-max-height);border:var(--field-border);border-radius:var(--select-radius);background:var(--select-background);color:var(--select-color);box-shadow:var(--popup-shadow);margin:0;padding:6px;list-style:none;position:fixed;overflow:auto}.fqa{cursor:pointer;border-radius:8px;flex-direction:column;gap:2px;padding:8px 10px;display:flex}.fqa:has(>.fqf){flex-direction:row;align-items:center;gap:10px}.fqf{flex:none;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.fqf :is(svg,img){width:100%;height:100%;display:block}.fqz{flex-direction:column;flex:auto;gap:2px;min-width:0;display:flex}.fqh{background:var(--select-li-selected-bg)}.fqg{font:inherit;min-width:0;line-height:1.3}.fqo,.fqt{color:var(--field-placeholder);font-size:12px;line-height:1.3}.fqo{padding:8px 10px}.fqa .fqt{padding:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-form{.fbr{align-items:stretch;overflow:hidden;gap:0!important;padding:0!important}.fbr:focus-within{background:var(--field-background)!important;border-color:var(--field-border)!important;box-shadow:none!important}.fbr[data-disabled=true]{opacity:.85;cursor:not-allowed}.fbr>div{min-width:0;min-height:var(--field-height);flex:1;padding:0;line-height:normal;overflow:visible}.fbi{width:100%;min-height:var(--field-height);flex-wrap:nowrap;align-items:stretch;display:flex}.fbt{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--field-icon-gap);min-width:0;min-height:var(--field-height);padding:0 var(--field-padding-inline);border:0;border-right:var(--field-tabs-divider);color:var(--field-color);font:inherit;font-size:var(--control-font-size);text-align:center;cursor:pointer;background:0 0;border-radius:0;outline:none;flex:1 1 0;margin:0;font-weight:500;line-height:1.2;transition:background-color .16s,color .16s,opacity .16s;display:inline-flex}.fbt:last-child{border-right:0}.fbt:hover:not(:disabled):not(.fba){background:var(--field-background-focus)}.fbt:focus-visible{box-shadow:inset 0 0 0 2px var(--field-focus-ring);background:var(--field-background-focus);z-index:1;position:relative}.fbt:first-child:focus-visible{border-radius:var(--field-radius) 0 0 var(--field-radius)}.fbt:last-child:focus-visible{border-radius:0 var(--field-radius) var(--field-radius) 0}.fbt:only-child:focus-visible{border-radius:var(--field-radius)}.fbt:disabled{color:var(--field-color-disabled);cursor:not-allowed;opacity:.65}.fba{background:var(--field-tabs-active-bg);color:var(--field-color)}.fba:hover:not(:disabled){background:var(--field-tabs-active-bg)}.fbo{width:var(--field-icon-size);height:var(--field-icon-size);color:var(--field-icon-color);flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.fbo svg{width:var(--field-icon-size);height:var(--field-icon-size);display:block}.fba .fbo{color:var(--field-color)}.fbl{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}
|
|
1
|
+
@layer elcrm-form{.fbr{align-items:stretch;overflow:hidden;gap:0!important;padding:0!important}.fbr:focus-within{background:var(--field-background)!important;border-color:var(--field-border)!important;box-shadow:none!important}.fbr[data-disabled=true]{opacity:.85;cursor:not-allowed}.fbr>div{min-width:0;min-height:var(--field-height);flex:1;padding:0;line-height:normal;overflow:visible}.fbr[data-variant=pill]{border-radius:var(--field-tabs-radius);min-height:var(--field-height);padding:var(--field-tabs-padding)!important}.fbr[data-variant=pill]:focus-within{background:var(--field-background)!important}.fbr[data-variant=pill]>div{min-height:0}.fbi{width:100%;min-height:var(--field-height);flex-wrap:nowrap;align-items:stretch;display:flex}[data-variant=pill] .fbi{gap:var(--field-tabs-gap);align-items:stretch;min-height:0}.fbt{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--field-icon-gap);min-width:0;min-height:var(--field-height);padding:0 var(--field-padding-inline);border:0;border-right:var(--field-tabs-divider);color:var(--field-color);font:inherit;font-size:var(--control-font-size);text-align:center;cursor:pointer;background:0 0;border-radius:0;outline:none;flex:1 1 0;margin:0;font-weight:500;line-height:1.2;transition:background-color .16s,color .16s,opacity .16s,border-radius .16s;display:inline-flex}.fbt:last-child{border-right:0}.fbt:hover:not(:disabled):not(.fba){background:var(--field-background-focus)}.fbt:focus-visible{box-shadow:inset 0 0 0 2px var(--field-focus-ring);background:var(--field-background-focus);z-index:1;position:relative}.fbt:first-child:focus-visible{border-radius:var(--field-radius) 0 0 var(--field-radius)}.fbt:last-child:focus-visible{border-radius:0 var(--field-radius) var(--field-radius) 0}.fbt:only-child:focus-visible{border-radius:var(--field-radius)}.fbt:disabled{color:var(--field-color-disabled);cursor:not-allowed;opacity:.65}[data-variant=pill] .fbt{border-radius:var(--field-tabs-item-radius);min-height:0;padding:var(--field-tabs-item-padding);color:var(--field-tabs-color);border-right:0;font-weight:500}[data-variant=pill] .fbt:hover:not(:disabled):not(.fba){color:var(--field-tabs-color-active);background:0 0}[data-variant=pill] .fbt:focus-visible{border-radius:var(--field-tabs-item-radius);box-shadow:0 0 0 2px var(--field-focus-ring);background:0 0}[data-variant=pill] .fbt:first-child:focus-visible,[data-variant=pill] .fbt:last-child:focus-visible,[data-variant=pill] .fbt:only-child:focus-visible{border-radius:var(--field-tabs-item-radius)}[data-variant=pill] .fbt:disabled{color:var(--field-tabs-color)}.fba{background:var(--field-tabs-active-bg);color:var(--field-color)}.fba:hover:not(:disabled){background:var(--field-tabs-active-bg)}[data-variant=pill] .fba{color:var(--field-tabs-color-active)}[data-variant=pill] .fba:hover:not(:disabled){background:var(--field-tabs-active-bg);color:var(--field-tabs-color-active)}.fbo{width:var(--field-icon-size);height:var(--field-icon-size);color:var(--field-icon-color);flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.fbo svg{width:var(--field-icon-size);height:var(--field-icon-size);display:block}.fba .fbo{color:var(--field-color)}[data-variant=pill] .fba .fbo{color:var(--field-tabs-color-active)}.fbl{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}
|
package/dist/core/Field.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
var el = document.createElement("style");
|
|
6
6
|
el.id = "elcrm-form-base-styles";
|
|
7
7
|
el.setAttribute("data-elcrm", "form");
|
|
8
|
-
el.textContent = "@layer elcrm-form{.ffl{min-width:var(--field-width);gap:var(--field-block-gap);flex-direction:column;margin:0;padding:0;display:flex;position:relative}.ffl[data-size=s],.ffl[data-size=sm]{--field-height:var(--control-height-s);--control-height:var(--control-height-s);font-size:13px}.ffl[data-size=l]{--field-height:var(--control-height-l);--control-height:var(--control-height-l)}.ffl>.fft,.ffl>.fff,.ffl>.ffm{margin:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div{cursor:pointer;border-bottom:var(--field-border);margin:0;padding:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div:last-child{border-bottom:0}.ffl [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}.ffl [placeholder]:focus:before{display:none}.fff{box-sizing:border-box;align-items:stretch;gap:var(--field-icon-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--field-padding);min-height:var(--field-height);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}.fff:hover{border-color:var(--field-border-hover)}.fff:focus-within{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fff.ffe:focus-within{background:var(--field-error-background);color:var(--field-error-color)}.fff[data-disabled=true]{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85;-webkit-user-select:none;user-select:none}.fff[data-disabled=true]>*{cursor:not-allowed;pointer-events:none}.fff[data-disabled=true]:focus-within{border-color:var(--field-border-disabled);box-shadow:none;background:var(--field-background-disabled)}.fff>div{min-width:0;min-height:0;line-height:1.25;font-size:var(--control-font-size);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}.fff>div::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fff>:not(div){box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}.fff>:not(div) svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.fff input::placeholder,.fff textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div{scrollbar-width:none;-ms-overflow-style:none}:is(.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div)::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffn{min-height:var(--field-note-height);align-items:stretch}.ffn>div{min-height:0;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;padding:0;overflow:hidden auto}.ffn>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div{box-sizing:border-box;height:auto;min-height:0;max-height:none;line-height:calc(var(--field-height) - 2 * var(--field-padding-block));text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;align-self:stretch;overflow:auto hidden}.ffw>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}.fft{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap);cursor:default;display:block}.ffx{flex:1;align-items:center;min-width:0;display:flex}.ffy{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}.ffy:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffa{box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.ffa:disabled{cursor:not-allowed;opacity:.6}.ffa svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.ffg{gap:var(--field-padding-block);flex-direction:column;align-items:stretch}.ffr>div{box-sizing:border-box;flex:1;align-items:center;min-width:0;min-height:0;line-height:normal;display:flex}.ffr .ffk{box-sizing:border-box;width:100%;height:var(--field-range-bar-height);background:var(--field-range-track);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}.ffr .ffk:focus-visible{box-shadow:var(--field-focus-shadow)}.ffr .ffk[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}.ffr .ffu{background:var(--field-range-fill);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}.ffr .ffv{border-radius:999px}.ffr[data-variant=line]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.ffr[data-variant=line]:hover,.ffr[data-variant=line]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.ffr[data-variant=line]>div{min-height:calc(var(--field-range-thumb-size) + 6px);overflow:visible}.ffr[data-variant=line] .ffk{height:var(--field-range-line-height);background:var(--field-range-track);overflow:visible}.ffr[data-variant=line] .ffu{display:none}.ffr[data-variant=line] .ffh{width:var(--field-range-thumb-size);height:var(--field-range-thumb-size);background:var(--field-range-thumb);pointer-events:none;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ffe{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}.ffm{color:var(--field-error-color);font-size:var(--field-error-size);margin-top:var(--field-error-gap);font-style:normal}.ffd{cursor:default}.ffd>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;overflow:hidden}.ffd[data-multiline=true]>div{white-space:pre-wrap;text-overflow:unset;overflow-wrap:anywhere;overflow-y:auto}.ffz{color:var(--field-placeholder)}}\n\n@layer elcrm-form{.fmo{z-index:var(--elcrm-z-popover);background:0 0;position:fixed;inset:0}.fmc{box-shadow:var(--popup-shadow);padding:var(--date-popup-padding);background:var(--select-background);z-index:var(--elcrm-z-popover-front);border-radius:var(--date-popup-radius);scrollbar-width:none;-ms-overflow-style:none;max-height:min(92vh,480px);margin:0;display:block;position:fixed;overflow:hidden auto}.fmc::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fmc{color:var(--select-color);box-sizing:border-box;min-width:var(--date-popup-min-width)}.fmc [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:var(--date-popup-row-height);gap:2px;display:grid}.fmc [grid-calendar]>p{color:var(--field-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}.fmc [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}.fmc b{border-radius:var(--date-popup-cell-radius);cursor:pointer;text-align:center;padding:8px 5px;font-weight:400;display:block}.fmc b:hover{background:var(--select-li-hover-bg)}.fmc p{color:var(--field-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}.fmc i{text-align:center;cursor:pointer;border-radius:var(--date-popup-cell-radius);flex:0 30px;padding:9px}.fmc i:hover{background:var(--select-li-hover-bg)}.fmc i:before{cursor:pointer;display:block}.fmc s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}.fmc s h2{text-align:center;min-width:0;color:var(--select-color);cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}.fmc .fmh,.fmc .fmy{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}.fmc .fmh:hover,.fmc .fmy:hover{background:var(--select-li-hover-bg)}.fmc .fmd{cursor:not-allowed;opacity:.45;pointer-events:none}.fmc .fmd[data-active=true],.fmc .fmd[data-current=true]{opacity:.45}.fmc [grid-calendar] b[data-current=true],.fmc [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}.fmc [grid-calendar] b[data-active=true]:not([data-current=true]),.fmc [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}.fmc [grid-calendar] b[data-active=true][data-current=true],.fmc [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:var(--date-popup-cell-radius);font-weight:600}.fmc [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}.fmc [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc span{text-align:center;padding:2px}.fmc span p{color:var(--field-placeholder);padding:8px 5px}.fmc [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}.fmc [grid-calendar]>span>b,.fmc [grid-calendar]>span>p{box-sizing:border-box;border-radius:var(--date-popup-cell-radius);flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}.fmc .fms{cursor:ns-resize}.fmc .fmp{cursor:pointer}}\n\n@layer elcrm-form{.fso{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fsl{--select-icon:calc(var(--select-height,52px) / 1.5);--select-icon-padding:calc((var(--select-height,52px) - var(--select-icon)) / 2);background:var(--select-background);box-shadow:var(--popup-shadow);z-index:var(--elcrm-z-popover-front);border-radius:var(--select-radius,20px);max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;display:block;position:fixed;overflow:hidden auto}.fsl::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl ul{width:100%;max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}.fsl ul::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl li{border-bottom:var(--select-separator);cursor:pointer;padding:0 var(--field-padding-inline);color:var(--select-color);height:var(--select-height,52px);line-height:var(--select-height,52px);font-size:var(--select-font-size,var(--control-font-size));white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;display:block;overflow:hidden;text-align:left!important;border-left:0!important}.fsl li[aria-selected=true]{background:var(--select-li-selected-bg)}.fsl li:hover{background:var(--select-li-hover-bg)}.fsl li[data-focus=true]{background:var(--select-li-focus-bg)}.fsl li:last-child{border-bottom:0}.fsi{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}.fsp{color:var(--field-placeholder);font-weight:400}.fsf{cursor:pointer}.fsf[aria-disabled=true]{cursor:not-allowed}}\n\n@layer elcrm-form{.fco{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fcp{z-index:var(--elcrm-z-popover-front);box-sizing:border-box;width:var(--color-picker-width);padding:var(--color-picker-pad);background:var(--select-background);color:var(--select-color);border-radius:var(--color-picker-radius);box-shadow:var(--popup-shadow);flex-direction:column;gap:8px;display:flex;position:fixed}.fcv{aspect-ratio:1/.55;cursor:crosshair;touch-action:none;border-radius:8px;width:100%;max-height:140px;position:relative;overflow:hidden}.fcw{background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}.fcb{background:linear-gradient(#0000,#000);position:absolute;inset:0}.fch{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000059}.fcr{align-items:center;gap:8px;display:flex}.fce{border-radius:var(--color-picker-input-radius);background:var(--field-background);width:26px;height:26px;color:var(--field-icon-color);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.fce:hover{color:var(--field-color)}.fcs{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.fcl{cursor:pointer;touch-action:none;border-radius:999px;height:10px;position:relative}.fcu{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.fca{background-image:linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #777 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #777 75%);background-color:#bbb;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px}.fcd{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;background:0 0;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;box-shadow:0 0 0 1px #00000059}.fci{align-items:center;gap:6px;display:flex}.fcf{color:var(--field-placeholder);flex:none;padding:0 2px;font-size:12px}.fcn{box-sizing:border-box;border-radius:var(--color-picker-input-radius);background:var(--field-background);min-width:0;height:28px;color:var(--field-color);font:inherit;border:none;outline:none;flex:1;padding:0 8px;font-size:13px}.fcn:focus{box-shadow:0 0 0 2px var(--field-focus-ring)}.fcx{text-align:center;flex:0 0 56px}.fcy{grid-template-columns:repeat(8,1fr);place-items:center;gap:4px;padding:0;display:grid}.fcz{width:var(--color-picker-swatch);height:var(--color-picker-swatch);cursor:pointer;background:var(--swatch);border:none;border-radius:50%;padding:0;transition:transform .12s;box-shadow:inset 0 0 0 1px #0000001f}.fcz[aria-checked=true]{z-index:1;box-shadow:inset 0 0 0 1px #00000026, 0 0 0 2px var(--select-background), 0 0 0 3px #ffffff59;transform:scale(1.35)}.fcz:disabled{cursor:not-allowed;opacity:.5}.fct{cursor:pointer;align-items:center;gap:var(--field-icon-gap);flex:1;min-width:0;height:auto;min-height:0;display:flex}.fct[aria-disabled=true]{cursor:not-allowed}.fcq{overflow:hidden}.fcq>div{min-width:0}.fcc{background-color:var(--preview-color);background-image:linear-gradient(var(--preview-color), var(--preview-color)), linear-gradient(45deg, #c6c6c8 25%, transparent 25%), linear-gradient(-45deg, #c6c6c8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c6c8 75%), linear-gradient(-45deg, transparent 75%, #c6c6c8 75%);background-position:0 0,0 0,0 3px,3px -3px,-3px 0;background-size:100% 100%,6px 6px,6px 6px,6px 6px,6px 6px;border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #00000026}.fcg{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--control-font-size);font-variant-numeric:tabular-nums;flex:1;overflow:hidden}.fct:has(+.fcj){flex:none;margin-left:-1px;padding-left:3px}.fct:has(+.fcj) .fcg{flex:none;width:9ch;min-width:9ch;max-width:9ch}.fcm{color:var(--field-placeholder);font-weight:400}.fcj{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;flex:1;align-items:center;gap:4px;min-width:0;max-width:100%;margin-left:0;padding:0 2px;display:flex;overflow:auto hidden}.fcj::-webkit-scrollbar{width:0;height:0;display:none}.fck{cursor:pointer;background:var(--swatch);transform-origin:50%;border:none;border-radius:50%;flex:none;width:18px;min-width:18px;height:18px;padding:0;transition:box-shadow .12s;box-shadow:inset 0 0 0 1px #0000001f}.fck[data-exit=true]{pointer-events:none;animation:.22s ease-in forwards fcq0}.fck:disabled{cursor:not-allowed;opacity:.5}@keyframes fcq0{0%{opacity:1;width:18px;min-width:18px;transform:scale(1)}55%{opacity:.7;transform:scale(.55)}to{opacity:0;width:0;min-width:0;box-shadow:none;margin:0;transform:scale(0)}}.fcc[data-enter=true]{animation:.28s cubic-bezier(.22,1,.36,1) fcq1}@keyframes fcq1{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}}\n\n@layer elcrm-form{.fkr>div{align-items:center;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fkr[data-variant=plain]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;min-height:0!important;padding:0!important}.fkr[data-variant=plain]:hover,.fkr[data-variant=plain]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.fkr[data-variant=plain]>div{align-items:flex-start}.fkr[data-size=sm]>div,.fkr[data-size=s]>div{align-items:center;min-height:0}.fkp{width:100%;min-width:0}.fkc{width:100%;min-height:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:12px;margin:0;padding:0;display:flex}.fkc[data-align=top]{align-items:flex-start}.fkc[data-align=bottom]{align-items:flex-end}.fkc[data-align=center]{align-items:center}.fkc[data-align=top] .fkb{margin-top:calc((1.25em - var(--field-check-size)) / 2)}.fkc[data-align=bottom] .fkb{margin-bottom:calc((1.25em - var(--field-check-size)) / 2)}.fkc:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:calc(var(--field-radius) - 2px)}.fkc[data-focus-ring=false]:focus-visible{box-shadow:none}.fkc[aria-disabled=true]{cursor:not-allowed}.fkc[data-size=sm],.fkc[data-size=s]{border-radius:8px;align-items:center;gap:10px;min-height:0;padding:0}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkb{border-radius:5px;width:18px;height:18px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkm{width:9px;height:5px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkt{padding-top:0;font-size:13px;line-height:1.2}.fkc[data-size=sm][data-variant=plain]:hover:not([aria-disabled=true]),.fkc[data-size=s][data-variant=plain]:hover:not([aria-disabled=true]){background:var(--field-background-focus)}.fkb{width:var(--field-check-size);height:var(--field-check-size);border:var(--field-check-box-border);background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}.fkm{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}.fkt{min-width:0;color:inherit;font-size:var(--control-font-size);flex:auto;padding-top:0;line-height:1.25}.fkc[aria-checked=true] .fkb{background:var(--field-background-active)}}\n\n@layer elcrm-form{.frd>div{flex-direction:column;align-items:stretch;gap:4px;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fri>div{flex-flow:wrap;align-items:center;gap:8px 16px}.frt{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:10px;margin:0;padding:0;display:inline-flex}.frt[data-align=top]{align-items:flex-start}.frt[data-align=bottom]{align-items:flex-end}.frt[data-align=center]{align-items:center}.frt[data-align=top] .fro{margin-top:calc((1.25em - var(--field-radio-size)) / 2)}.frt[data-align=bottom] .fro{margin-bottom:calc((1.25em - var(--field-radio-size)) / 2)}.frt:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.frt[aria-disabled=true]{cursor:not-allowed;opacity:.7}.fro{width:var(--field-radio-size);height:var(--field-radio-size);border:var(--field-check-box-border);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.frf{background:var(--field-background-active);border-radius:50%;width:10px;height:10px}.frx{font-size:var(--control-font-size);line-height:1.25}}\n\n@layer elcrm-form{.ftr>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}.ftr .fti{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}.ftr.ftc .fti{justify-content:center}.ftr .fts{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0;font-weight:500;transform:translateY(-1px)}.ftr .ftb{color:var(--field-icon-color);cursor:pointer;background:0 0;border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;display:inline-flex}.ftr .ftb:hover:not(:disabled){color:var(--field-color)}.ftr .ftb:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.ftr .ftb:disabled{cursor:not-allowed;opacity:.5}.ftr .ftp{box-sizing:border-box;width:2.25ch;min-width:2.25ch;color:inherit;font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;text-align:center;cursor:text;scrollbar-width:none;-ms-overflow-style:none;background:0 0;border:0;border-radius:6px;outline:none;flex:none;min-height:0;margin:0;padding:0;overflow:hidden}.ftr .ftp::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ftr .ftp[contenteditable=false]{cursor:not-allowed;opacity:.7}.ftr .ftp:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}.ftr .ftp:focus:empty:before{content:none}.ftr .ftp:focus-visible{background:0 0}.ftr.ftc .ftp{text-align:center}}\n\n@layer elcrm-form{.fir>div,.fir .fin{align-items:center;gap:10px;width:100%;min-height:0;line-height:normal;display:flex;overflow:visible}.fin{flex:1;min-width:0;position:relative}.fip{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.fib{padding:var(--field-padding);background:var(--field-background-focus);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border:0;border-radius:8px;flex:none;font-size:13px}.fib:disabled{cursor:not-allowed;opacity:.6}.fil{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;overflow:hidden}.fie{color:var(--field-placeholder);font-size:13px}.fit{align-items:baseline;gap:8px;min-width:0;display:flex}.fim{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.fiz{color:var(--field-placeholder);font-size:var(--field-error-size);flex:none}.fic{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;flex:none;padding:0;font-size:18px;line-height:1}.fic:hover{opacity:1}}\n\n@layer elcrm-form{.fgr>div,.fgr .fgi{flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:0;padding:0;line-height:normal;display:flex;overflow:visible}.fgi{flex:1;min-width:0}.fgc{background:var(--field-background-focus);border-radius:999px;align-items:center;gap:2px;max-width:100%;padding:0 6px;line-height:1.35;display:inline-flex}.fgl{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fgm{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;padding:0 2px;font-size:16px;line-height:1}.fgm:hover{opacity:1}.fgn{min-width:80px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:80px;margin:0;padding:0}}\n\n@layer elcrm-form{.fnr>div{outline:none;align-items:center;gap:2px;width:100%;min-height:0;line-height:normal;display:flex}.fns{color:var(--field-placeholder);cursor:pointer;font-size:var(--field-rating-size);background:0 0;border:0;outline:none;padding:0 2px;line-height:1}.fns:disabled{cursor:not-allowed;opacity:.6}.fns:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:4px}.fno{color:var(--field-range-fill)}}\n\n@layer elcrm-form{.fdr{align-items:stretch;box-shadow:none!important;background:0 0!important;border:0!important;gap:0!important;min-height:0!important;padding:0!important;overflow:visible!important}.fdr:hover,.fdr:focus-within{box-shadow:none!important;background:0 0!important;border:0!important}.fdr[data-disabled=true]{opacity:1;background:0 0!important}.fdr>div{flex:none;min-height:0;padding:0;line-height:normal}.fdi{align-items:center;gap:var(--field-code-gap);width:max-content;max-width:100%;min-height:var(--field-code-size);flex-wrap:nowrap;display:flex}.fdc{box-sizing:border-box;width:var(--field-code-size);height:var(--field-code-size);flex:0 0 var(--field-code-size);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);font:inherit;font-size:max(var(--control-font-size), calc(var(--field-code-size) * .42));font-variant-numeric:tabular-nums;line-height:calc(var(--field-code-size) - 2px);text-align:center;outline:none;margin:0;padding:0;transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s}.fdc::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fdc:hover:not(:disabled){border-color:var(--field-border-hover)}.fdc:focus{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fdc:disabled{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85}.fdc::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fdg{box-sizing:border-box;flex:0 0 var(--field-code-size);width:var(--field-code-size);height:var(--field-code-size);margin:0 0 0 var(--field-code-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);cursor:pointer;outline:none;justify-content:center;align-items:center;padding:0;transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:inline-flex}.fdg:hover:not(:disabled){border-color:var(--field-border-hover);background:var(--field-background-focus)}.fdg:focus-visible{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow)}.fdg:disabled{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85}.fds{width:.75em;color:var(--field-placeholder);font-size:max(var(--control-font-size), calc(var(--field-code-size) * .35));line-height:var(--field-code-size);text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;flex:none}}\n\n@layer elcrm-form{.fhr{align-items:stretch}.fhr>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);flex-direction:column;align-items:flex-start;padding:0;display:flex;overflow:visible}.fhw{flex-direction:column;align-items:flex-start;width:100%;min-width:0;display:flex}.fht{width:100%;max-width:100%;padding:var(--field-padding-block) 0;box-sizing:border-box;border-bottom:1px solid #00000014;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;margin:0;display:inline-flex}.fhb{box-sizing:border-box;width:28px;min-width:28px;height:28px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:13px;font-weight:600;line-height:1;display:inline-flex}.fhb:hover:not(:disabled){background:var(--field-background-focus)}.fhb:disabled{opacity:.5;cursor:not-allowed}.fhe{box-sizing:border-box;width:100%;min-height:calc(var(--field-note-height) - 28px - 2 * var(--field-padding-block));overflow-wrap:anywhere;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;outline:none;padding:0;overflow:hidden auto}.fhe::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fhe:empty:before{content:attr(placeholder);color:var(--field-placeholder);pointer-events:none}.fhe ul,.fhe ol{margin:.25em 0;padding-left:1.25em}}\n\n@layer elcrm-form{.fxr{align-items:stretch;overflow:visible;box-shadow:none!important;background:0 0!important;border:0!important;padding:0!important}.fxr>div{min-height:auto;padding:0;line-height:normal;display:block;overflow:visible}.fxr[data-dragging=true]{background:0 0!important}.fxi{flex-direction:column;gap:16px;width:100%;min-width:0;display:flex;position:relative}.fxi[data-layout=fill],.fxi[data-layout=overlay]{gap:0;height:100%;min-height:0}.fxr[data-layout=fill],.fxr[data-layout=overlay]{width:100%;height:100%}:is(.fxr[data-layout=fill],.fxr[data-layout=overlay])>div{flex-direction:column;align-items:stretch;height:100%;min-height:0;display:flex}.fxz{box-sizing:border-box;width:100%;min-height:var(--field-drag-min-height);padding:var(--field-padding);border:var(--field-drag-border);border-radius:calc(var(--field-radius) - 2px);color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;transition:border-color .16s,background-color .16s,border-style .16s;display:flex}.fxz:hover:not(:disabled){border-color:var(--field-drag-border-hover);background:var(--field-background-focus)}.fxz[data-dragging=true]{border-color:var(--field-range-fill);background:color-mix(in srgb, var(--field-range-fill) 10%, transparent);border-style:solid}.fxz:focus-visible{box-shadow:var(--field-focus-shadow)}.fxz:disabled{cursor:not-allowed;opacity:.65}.fxz[data-layout=fill],.fxz[data-layout=overlay]{flex:auto;height:100%;min-height:100%}.fxz[data-layout=overlay]{padding:var(--field-padding);background:0 0;justify-content:flex-end}.fxz[data-layout=overlay]:hover:not(:disabled){background:var(--field-background-focus)}.fxh{font-size:var(--control-font-size);color:inherit;line-height:1.35}.fxa{font-size:var(--field-error-size);color:var(--field-placeholder);letter-spacing:.01em}.fxl{flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}.fxt{min-width:0;padding:var(--field-padding);background:var(--field-background-focus);border-radius:10px;align-items:center;gap:10px;display:flex}.fxm{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.fxn{text-overflow:ellipsis;white-space:nowrap;font-size:var(--control-font-size);color:inherit;line-height:1.3;overflow:hidden}.fxs{font-size:var(--field-error-size);color:var(--field-placeholder);line-height:1.2}.fxd{width:28px;height:28px;color:var(--field-placeholder);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:0;font-size:18px;line-height:1;display:inline-flex}.fxd:hover{color:var(--field-error-color);background:color-mix(in srgb, var(--field-error-color) 10%, transparent)}.fxc{color:var(--field-placeholder);font:inherit;font-size:var(--field-error-size);cursor:pointer;padding:var(--field-padding-block) 0;background:0 0;border:0;align-self:flex-start;margin-top:2px}.fxc:hover{color:var(--field-error-color)}}\n\n@layer elcrm-form{.fbr{align-items:stretch;overflow:hidden;gap:0!important;padding:0!important}.fbr:focus-within{background:var(--field-background)!important;border-color:var(--field-border)!important;box-shadow:none!important}.fbr[data-disabled=true]{opacity:.85;cursor:not-allowed}.fbr>div{min-width:0;min-height:var(--field-height);flex:1;padding:0;line-height:normal;overflow:visible}.fbi{width:100%;min-height:var(--field-height);flex-wrap:nowrap;align-items:stretch;display:flex}.fbt{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--field-icon-gap);min-width:0;min-height:var(--field-height);padding:0 var(--field-padding-inline);border:0;border-right:var(--field-tabs-divider);color:var(--field-color);font:inherit;font-size:var(--control-font-size);text-align:center;cursor:pointer;background:0 0;border-radius:0;outline:none;flex:1 1 0;margin:0;font-weight:500;line-height:1.2;transition:background-color .16s,color .16s,opacity .16s;display:inline-flex}.fbt:last-child{border-right:0}.fbt:hover:not(:disabled):not(.fba){background:var(--field-background-focus)}.fbt:focus-visible{box-shadow:inset 0 0 0 2px var(--field-focus-ring);background:var(--field-background-focus);z-index:1;position:relative}.fbt:first-child:focus-visible{border-radius:var(--field-radius) 0 0 var(--field-radius)}.fbt:last-child:focus-visible{border-radius:0 var(--field-radius) var(--field-radius) 0}.fbt:only-child:focus-visible{border-radius:var(--field-radius)}.fbt:disabled{color:var(--field-color-disabled);cursor:not-allowed;opacity:.65}.fba{background:var(--field-tabs-active-bg);color:var(--field-color)}.fba:hover:not(:disabled){background:var(--field-tabs-active-bg)}.fbo{width:var(--field-icon-size);height:var(--field-icon-size);color:var(--field-icon-color);flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.fbo svg{width:var(--field-icon-size);height:var(--field-icon-size);display:block}.fba .fbo{color:var(--field-color)}.fbl{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}\n\n@layer elcrm-form{.fur{gap:var(--field-group-gap);width:var(--field-width);background:0 0;border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}}\n";
|
|
8
|
+
el.textContent = "@layer elcrm-form{.ffl{min-width:var(--field-width);gap:var(--field-block-gap);flex-direction:column;margin:0;padding:0;display:flex;position:relative}.ffl[data-size=s],.ffl[data-size=sm]{--field-height:var(--control-height-s);--control-height:var(--control-height-s);font-size:13px}.ffl[data-size=l]{--field-height:var(--control-height-l);--control-height:var(--control-height-l)}.ffl>.fft,.ffl>.fff,.ffl>.ffm{margin:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div{cursor:pointer;border-bottom:var(--field-border);margin:0;padding:0}:is(.ffl[data-field=group],.ffl[data-field=options]) .fff>div:last-child{border-bottom:0}.ffl [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;pointer-events:none;font-style:normal;font-weight:400;display:block}.ffl [placeholder]:focus:before{display:none}.fff{box-sizing:border-box;align-items:stretch;gap:var(--field-icon-gap);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--field-padding);min-height:var(--field-height);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}.fff:hover{border-color:var(--field-border-hover)}.fff:focus-within{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fff.ffe:focus-within{background:var(--field-error-background);color:var(--field-error-color)}.fff[data-disabled=true]{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85;-webkit-user-select:none;user-select:none}.fff[data-disabled=true]>*{cursor:not-allowed;pointer-events:none}.fff[data-disabled=true]:focus-within{border-color:var(--field-border-disabled);box-shadow:none;background:var(--field-background-disabled)}.fff>div{min-width:0;min-height:0;line-height:1.25;font-size:var(--control-font-size);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}.fff>div::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fff>:not(div){box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);flex:none;justify-content:center;align-self:center;align-items:center;display:inline-flex}.fff>:not(div) svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}.fff input::placeholder,.fff textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fff input:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;font-size:inherit!important;line-height:inherit!important;background-color:#0000!important;background-image:none!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.fff input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div{scrollbar-width:none;-ms-overflow-style:none}:is(.fff [contenteditable=true],.fff [contenteditable=plaintext-only],.fff>div)::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffn{min-height:var(--field-note-height);align-items:stretch}.ffn>div{min-height:0;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;padding:0;overflow:hidden auto}.ffn>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div{box-sizing:border-box;height:auto;min-height:0;max-height:none;line-height:calc(var(--field-height) - 2 * var(--field-padding-block));text-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;align-self:stretch;overflow:auto hidden}.ffw>div::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ffw>div input{box-sizing:border-box;height:100%;min-height:0;max-height:100%;line-height:normal}.fft{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:var(--field-label-gap);cursor:default;display:block}.ffx{flex:1;align-items:center;min-width:0;display:flex}.ffy{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}.ffy:-webkit-autofill{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:hover{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:focus{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffy:-webkit-autofill:active{caret-color:var(--field-color);-webkit-text-fill-color:var(--field-color)!important;color:var(--field-color)!important;-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#0000!important;background-image:none!important;-webkit-background-clip:text!important;background-clip:text!important;transition:background-color 99999s ease-out,background-image 99999s ease-out!important}.ffa{box-sizing:border-box;height:auto;min-height:0;max-height:none;color:var(--field-icon-color);font-size:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.ffa:disabled{cursor:not-allowed;opacity:.6}.ffa svg{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;display:block}@keyframes ffspin{to{transform:rotate(360deg)}}.ffj{animation:.55s ease-in-out ffspin}@media (prefers-reduced-motion:reduce){.ffj{animation:none}}.ffg{gap:var(--field-padding-block);flex-direction:column;align-items:stretch}.ffr>div{box-sizing:border-box;flex:1;align-items:center;min-width:0;min-height:0;line-height:normal;display:flex}.ffr .ffk{box-sizing:border-box;width:100%;height:var(--field-range-bar-height);background:var(--field-range-track);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}.ffr .ffk:focus-visible{box-shadow:var(--field-focus-shadow)}.ffr .ffk[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}.ffr .ffu{background:var(--field-range-fill);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}.ffr .ffv{border-radius:999px}.ffr[data-variant=line]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.ffr[data-variant=line]:hover,.ffr[data-variant=line]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.ffr[data-variant=line]>div{min-height:calc(var(--field-range-thumb-size) + 6px);overflow:visible}.ffr[data-variant=line] .ffk{height:var(--field-range-line-height);background:var(--field-range-track);overflow:visible}.ffr[data-variant=line] .ffu{display:none}.ffr[data-variant=line] .ffh{width:var(--field-range-thumb-size);height:var(--field-range-thumb-size);background:var(--field-range-thumb);pointer-events:none;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ffe{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}.ffm{color:var(--field-error-color);font-size:var(--field-error-size);margin-top:var(--field-error-gap);font-style:normal}.ffd{cursor:default}.ffd>div{color:inherit;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;overflow:hidden}.ffd[data-multiline=true]>div{white-space:pre-wrap;text-overflow:unset;overflow-wrap:anywhere;overflow-y:auto}.ffz{color:var(--field-placeholder)}}\n\n@layer elcrm-form{.fmo{z-index:var(--elcrm-z-popover);background:0 0;position:fixed;inset:0}.fmc{box-shadow:var(--popup-shadow);padding:var(--date-popup-padding);background:var(--select-background);z-index:var(--elcrm-z-popover-front);border-radius:var(--date-popup-radius);scrollbar-width:none;-ms-overflow-style:none;max-height:min(92vh,480px);margin:0;display:block;position:fixed;overflow:hidden auto}.fmc::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fmc{color:var(--select-color);box-sizing:border-box;min-width:var(--date-popup-min-width)}.fmc [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:var(--date-popup-row-height);gap:2px;display:grid}.fmc [grid-calendar]>p{color:var(--field-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}.fmc [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}.fmc b{border-radius:var(--date-popup-cell-radius);cursor:pointer;text-align:center;padding:8px 5px;font-weight:400;display:block}.fmc b:hover{background:var(--select-li-hover-bg)}.fmc p{color:var(--field-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}.fmc i{text-align:center;cursor:pointer;border-radius:var(--date-popup-cell-radius);flex:0 30px;padding:9px}.fmc i:hover{background:var(--select-li-hover-bg)}.fmc i:before{cursor:pointer;display:block}.fmc s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}.fmc s h2{text-align:center;min-width:0;color:var(--select-color);cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}.fmc .fmh,.fmc .fmy{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}.fmc .fmh:hover,.fmc .fmy:hover{background:var(--select-li-hover-bg)}.fmc .fmd{cursor:not-allowed;opacity:.45;pointer-events:none}.fmc .fmd[data-active=true],.fmc .fmd[data-current=true]{opacity:.45}.fmc [grid-calendar] b[data-current=true],.fmc [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}.fmc [grid-calendar] b[data-active=true]:not([data-current=true]),.fmc [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}.fmc [grid-calendar] b[data-active=true][data-current=true],.fmc [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:var(--date-popup-cell-radius);font-weight:600}.fmc [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}.fmc [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}.fmc span{text-align:center;padding:2px}.fmc span p{color:var(--field-placeholder);padding:8px 5px}.fmc [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}.fmc [grid-calendar]>span>b,.fmc [grid-calendar]>span>p{box-sizing:border-box;border-radius:var(--date-popup-cell-radius);flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}.fmc .fms{cursor:ns-resize}.fmc .fmp{cursor:pointer}}\n\n@layer elcrm-form{.fso{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fsl{--select-icon:calc(var(--select-height,52px) / 1.5);--select-icon-padding:calc((var(--select-height,52px) - var(--select-icon)) / 2);background:var(--select-background);box-shadow:var(--popup-shadow);z-index:var(--elcrm-z-popover-front);border-radius:var(--select-radius,20px);max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;display:block;position:fixed;overflow:hidden auto}.fsl::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl ul{width:100%;max-height:var(--select-max-height,300px);scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}.fsl ul::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fsl li{border-bottom:var(--select-separator);cursor:pointer;padding:0 var(--field-padding-inline);color:var(--select-color);height:var(--select-height,52px);line-height:var(--select-height,52px);font-size:var(--select-font-size,var(--control-font-size));white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;display:block;overflow:hidden;text-align:left!important;border-left:0!important}.fsl li[aria-selected=true]{background:var(--select-li-selected-bg)}.fsl li:hover{background:var(--select-li-hover-bg)}.fsl li[data-focus=true]{background:var(--select-li-focus-bg)}.fsl li:last-child{border-bottom:0}.fsi{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}.fsp{color:var(--field-placeholder);font-weight:400}.fsf{cursor:pointer}.fsf[aria-disabled=true]{cursor:not-allowed}}\n\n@layer elcrm-form{.fco{z-index:var(--elcrm-z-popover);background:var(--select-overlay);position:fixed;inset:0}.fcp{z-index:var(--elcrm-z-popover-front);box-sizing:border-box;width:var(--color-picker-width);padding:var(--color-picker-pad);background:var(--select-background);color:var(--select-color);border-radius:var(--color-picker-radius);box-shadow:var(--popup-shadow);flex-direction:column;gap:8px;display:flex;position:fixed}.fcv{aspect-ratio:1/.55;cursor:crosshair;touch-action:none;border-radius:8px;width:100%;max-height:140px;position:relative;overflow:hidden}.fcw{background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}.fcb{background:linear-gradient(#0000,#000);position:absolute;inset:0}.fch{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000059}.fcr{align-items:center;gap:8px;display:flex}.fce{border-radius:var(--color-picker-input-radius);background:var(--field-background);width:26px;height:26px;color:var(--field-icon-color);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.fce:hover{color:var(--field-color)}.fcs{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.fcl{cursor:pointer;touch-action:none;border-radius:999px;height:10px;position:relative}.fcu{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.fca{background-image:linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #777 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #777 75%);background-color:#bbb;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px}.fcd{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;background:0 0;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;box-shadow:0 0 0 1px #00000059}.fci{align-items:center;gap:6px;display:flex}.fcf{color:var(--field-placeholder);flex:none;padding:0 2px;font-size:12px}.fcn{box-sizing:border-box;border-radius:var(--color-picker-input-radius);background:var(--field-background);min-width:0;height:28px;color:var(--field-color);font:inherit;border:none;outline:none;flex:1;padding:0 8px;font-size:13px}.fcn:focus{box-shadow:0 0 0 2px var(--field-focus-ring)}.fcx{text-align:center;flex:0 0 56px}.fcy{grid-template-columns:repeat(8,1fr);place-items:center;gap:4px;padding:0;display:grid}.fcz{width:var(--color-picker-swatch);height:var(--color-picker-swatch);cursor:pointer;background:var(--swatch);border:none;border-radius:50%;padding:0;transition:transform .12s;box-shadow:inset 0 0 0 1px #0000001f}.fcz[aria-checked=true]{z-index:1;box-shadow:inset 0 0 0 1px #00000026, 0 0 0 2px var(--select-background), 0 0 0 3px #ffffff59;transform:scale(1.35)}.fcz:disabled{cursor:not-allowed;opacity:.5}.fct{cursor:pointer;align-items:center;gap:var(--field-icon-gap);flex:1;min-width:0;height:auto;min-height:0;display:flex}.fct[aria-disabled=true]{cursor:not-allowed}.fcq{overflow:hidden}.fcq>div{min-width:0}.fcc{background-color:var(--preview-color);background-image:linear-gradient(var(--preview-color), var(--preview-color)), linear-gradient(45deg, #c6c6c8 25%, transparent 25%), linear-gradient(-45deg, #c6c6c8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c6c8 75%), linear-gradient(-45deg, transparent 75%, #c6c6c8 75%);background-position:0 0,0 0,0 3px,3px -3px,-3px 0;background-size:100% 100%,6px 6px,6px 6px,6px 6px,6px 6px;border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #00000026}.fcg{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--control-font-size);font-variant-numeric:tabular-nums;flex:1;overflow:hidden}.fct:has(+.fcj){flex:none;margin-left:-1px;padding-left:3px}.fct:has(+.fcj) .fcg{flex:none;width:9ch;min-width:9ch;max-width:9ch}.fcm{color:var(--field-placeholder);font-weight:400}.fcj{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;flex:1;align-items:center;gap:4px;min-width:0;max-width:100%;margin-left:0;padding:0 2px;display:flex;overflow:auto hidden}.fcj::-webkit-scrollbar{width:0;height:0;display:none}.fck{cursor:pointer;background:var(--swatch);transform-origin:50%;border:none;border-radius:50%;flex:none;width:18px;min-width:18px;height:18px;padding:0;transition:box-shadow .12s;box-shadow:inset 0 0 0 1px #0000001f}.fck[data-exit=true]{pointer-events:none;animation:.22s ease-in forwards fcq0}.fck:disabled{cursor:not-allowed;opacity:.5}@keyframes fcq0{0%{opacity:1;width:18px;min-width:18px;transform:scale(1)}55%{opacity:.7;transform:scale(.55)}to{opacity:0;width:0;min-width:0;box-shadow:none;margin:0;transform:scale(0)}}.fcc[data-enter=true]{animation:.28s cubic-bezier(.22,1,.36,1) fcq1}@keyframes fcq1{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}}\n\n@layer elcrm-form{.fkr>div{align-items:center;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fkr[data-variant=plain]{border-radius:0;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important;min-height:0!important;padding:0!important}.fkr[data-variant=plain]:hover,.fkr[data-variant=plain]:focus-within{box-shadow:none!important;background:0 0!important;border:none!important}.fkr[data-variant=plain]>div{align-items:flex-start}.fkr[data-size=sm]>div,.fkr[data-size=s]>div{align-items:center;min-height:0}.fkp{width:100%;min-width:0}.fkc{width:100%;min-height:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:12px;margin:0;padding:0;display:flex}.fkc[data-align=top]{align-items:flex-start}.fkc[data-align=bottom]{align-items:flex-end}.fkc[data-align=center]{align-items:center}.fkc[data-align=top] .fkb{margin-top:calc((1.25em - var(--field-check-size)) / 2)}.fkc[data-align=bottom] .fkb{margin-bottom:calc((1.25em - var(--field-check-size)) / 2)}.fkc:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:calc(var(--field-radius) - 2px)}.fkc[data-focus-ring=false]:focus-visible{box-shadow:none}.fkc[aria-disabled=true]{cursor:not-allowed}.fkc[data-size=sm],.fkc[data-size=s]{border-radius:8px;align-items:center;gap:10px;min-height:0;padding:0}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkb{border-radius:5px;width:18px;height:18px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkm{width:9px;height:5px}:is(.fkc[data-size=sm],.fkc[data-size=s]) .fkt{padding-top:0;font-size:13px;line-height:1.2}.fkc[data-size=sm][data-variant=plain]:hover:not([aria-disabled=true]),.fkc[data-size=s][data-variant=plain]:hover:not([aria-disabled=true]){background:var(--field-background-focus)}.fkb{width:var(--field-check-size);height:var(--field-check-size);border:var(--field-check-box-border);background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}.fkm{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}.fkt{min-width:0;color:inherit;font-size:var(--control-font-size);flex:auto;padding-top:0;line-height:1.25}.fkc[aria-checked=true] .fkb{background:var(--field-background-active)}}\n\n@layer elcrm-form{.frd>div{flex-direction:column;align-items:stretch;gap:4px;width:100%;min-height:0;padding:0;line-height:normal;display:flex}.fri>div{flex-flow:wrap;align-items:center;gap:8px 16px}.frt{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:center;gap:10px;margin:0;padding:0;display:inline-flex}.frt[data-align=top]{align-items:flex-start}.frt[data-align=bottom]{align-items:flex-end}.frt[data-align=center]{align-items:center}.frt[data-align=top] .fro{margin-top:calc((1.25em - var(--field-radio-size)) / 2)}.frt[data-align=bottom] .fro{margin-bottom:calc((1.25em - var(--field-radio-size)) / 2)}.frt:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.frt[aria-disabled=true]{cursor:not-allowed;opacity:.7}.fro{width:var(--field-radio-size);height:var(--field-radio-size);border:var(--field-check-box-border);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.frf{background:var(--field-background-active);border-radius:50%;width:10px;height:10px}.frx{font-size:var(--control-font-size);line-height:1.25}}\n\n@layer elcrm-form{.ftr>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}.ftr .fti{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}.ftr.ftc .fti{justify-content:center}.ftr .fts{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0;font-weight:500;transform:translateY(-1px)}.ftr .ftb{color:var(--field-icon-color);cursor:pointer;background:0 0;border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;display:inline-flex}.ftr .ftb:hover:not(:disabled){color:var(--field-color)}.ftr .ftb:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:6px}.ftr .ftb:disabled{cursor:not-allowed;opacity:.5}.ftr .ftp{box-sizing:border-box;width:2.25ch;min-width:2.25ch;color:inherit;font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;text-align:center;cursor:text;scrollbar-width:none;-ms-overflow-style:none;background:0 0;border:0;border-radius:6px;outline:none;flex:none;min-height:0;margin:0;padding:0;overflow:hidden}.ftr .ftp::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.ftr .ftp[contenteditable=false]{cursor:not-allowed;opacity:.7}.ftr .ftp:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}.ftr .ftp:focus:empty:before{content:none}.ftr .ftp:focus-visible{background:0 0}.ftr.ftc .ftp{text-align:center}}\n\n@layer elcrm-form{.fir>div,.fir .fin{align-items:center;gap:10px;width:100%;min-height:0;line-height:normal;display:flex;overflow:visible}.fin{flex:1;min-width:0;position:relative}.fip{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.fib{padding:var(--field-padding);background:var(--field-background-focus);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border:0;border-radius:8px;flex:none;font-size:13px}.fib:disabled{cursor:not-allowed;opacity:.6}.fil{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;overflow:hidden}.fie{color:var(--field-placeholder);font-size:13px}.fit{align-items:baseline;gap:8px;min-width:0;display:flex}.fim{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.fiz{color:var(--field-placeholder);font-size:var(--field-error-size);flex:none}.fic{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;flex:none;padding:0;font-size:18px;line-height:1}.fic:hover{opacity:1}}\n\n@layer elcrm-form{.fgr>div,.fgr .fgi{flex-wrap:wrap;align-items:center;gap:6px;width:100%;min-height:0;padding:0;line-height:normal;display:flex;overflow:visible}.fgi{flex:1;min-width:0}.fgc{background:var(--field-background-focus);border-radius:999px;align-items:center;gap:2px;max-width:100%;padding:0 6px;line-height:1.35;display:inline-flex}.fgl{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.fgm{color:inherit;cursor:pointer;opacity:.65;background:0 0;border:0;padding:0 2px;font-size:16px;line-height:1}.fgm:hover{opacity:1}.fgn{min-width:80px;color:inherit;font:inherit;background:0 0;border:0;outline:none;flex:80px;margin:0;padding:0}}\n\n@layer elcrm-form{.fnr>div{outline:none;align-items:center;gap:2px;width:100%;min-height:0;line-height:normal;display:flex}.fns{color:var(--field-placeholder);cursor:pointer;font-size:var(--field-rating-size);background:0 0;border:0;outline:none;padding:0 2px;line-height:1}.fns:disabled{cursor:not-allowed;opacity:.6}.fns:focus-visible{box-shadow:var(--field-focus-shadow);border-radius:4px}.fno{color:var(--field-range-fill)}}\n\n@layer elcrm-form{.fdr{align-items:stretch;box-shadow:none!important;background:0 0!important;border:0!important;gap:0!important;min-height:0!important;padding:0!important;overflow:visible!important}.fdr:hover,.fdr:focus-within{box-shadow:none!important;background:0 0!important;border:0!important}.fdr[data-disabled=true]{opacity:1;background:0 0!important}.fdr>div{flex:none;min-height:0;padding:0;line-height:normal}.fdi{align-items:center;gap:var(--field-code-gap);width:max-content;max-width:100%;min-height:var(--field-code-size);flex-wrap:nowrap;display:flex}.fdc{box-sizing:border-box;width:var(--field-code-size);height:var(--field-code-size);flex:0 0 var(--field-code-size);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);font:inherit;font-size:max(var(--control-font-size), calc(var(--field-code-size) * .42));font-variant-numeric:tabular-nums;line-height:calc(var(--field-code-size) - 2px);text-align:center;outline:none;margin:0;padding:0;transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s}.fdc::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}.fdc:hover:not(:disabled){border-color:var(--field-border-hover)}.fdc:focus{border-color:var(--field-border-focus);box-shadow:var(--field-focus-shadow);background:var(--field-background-focus)}.fdc:disabled{background:var(--field-background-disabled);border-color:var(--field-border-disabled);color:var(--field-color-disabled);cursor:not-allowed;opacity:.85}.fdc::selection{background:var(--field-selection-bg);color:var(--field-selection-color)}.fds{width:.75em;color:var(--field-placeholder);font-size:max(var(--control-font-size), calc(var(--field-code-size) * .35));line-height:var(--field-code-size);text-align:center;-webkit-user-select:none;user-select:none;pointer-events:none;flex:none}}\n\n@layer elcrm-form{.fhr{align-items:stretch}.fhr>div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);flex-direction:column;align-items:flex-start;padding:0;display:flex;overflow:visible}.fhw{flex-direction:column;align-items:flex-start;width:100%;min-width:0;display:flex}.fht{width:100%;max-width:100%;padding:var(--field-padding-block) 0;box-sizing:border-box;border-bottom:1px solid #00000014;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;margin:0;display:inline-flex}.fhb{box-sizing:border-box;width:28px;min-width:28px;height:28px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:13px;font-weight:600;line-height:1;display:inline-flex}.fhb:hover:not(:disabled){background:var(--field-background-focus)}.fhb:disabled{opacity:.5;cursor:not-allowed}.fhe{box-sizing:border-box;width:100%;min-height:calc(var(--field-note-height) - 28px - 2 * var(--field-padding-block));overflow-wrap:anywhere;line-height:var(--field-note-line-height);scrollbar-width:none;-ms-overflow-style:none;outline:none;padding:0;overflow:hidden auto}.fhe::-webkit-scrollbar{background:0 0;width:0;height:0;display:none}.fhe:empty:before{content:attr(placeholder);color:var(--field-placeholder);pointer-events:none}.fhe ul,.fhe ol{margin:.25em 0;padding-left:1.25em}}\n\n@layer elcrm-form{.fxr{align-items:stretch;overflow:visible;box-shadow:none!important;background:0 0!important;border:0!important;padding:0!important}.fxr>div{min-height:auto;padding:0;line-height:normal;display:block;overflow:visible}.fxr[data-dragging=true]{background:0 0!important}.fxi{flex-direction:column;gap:16px;width:100%;min-width:0;display:flex;position:relative}.fxi[data-layout=fill],.fxi[data-layout=overlay]{gap:0;height:100%;min-height:0}.fxr[data-layout=fill],.fxr[data-layout=overlay]{width:100%;height:100%}:is(.fxr[data-layout=fill],.fxr[data-layout=overlay])>div{flex-direction:column;align-items:stretch;height:100%;min-height:0;display:flex}.fxz{box-sizing:border-box;width:100%;min-height:var(--field-drag-min-height);padding:var(--field-padding);border:var(--field-drag-border);border-radius:calc(var(--field-radius) - 2px);color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;transition:border-color .16s,background-color .16s,border-style .16s;display:flex}.fxz:hover:not(:disabled){border-color:var(--field-drag-border-hover);background:var(--field-background-focus)}.fxz[data-dragging=true]{border-color:var(--field-range-fill);background:color-mix(in srgb, var(--field-range-fill) 10%, transparent);border-style:solid}.fxz:focus-visible{box-shadow:var(--field-focus-shadow)}.fxz:disabled{cursor:not-allowed;opacity:.65}.fxz[data-layout=fill],.fxz[data-layout=overlay]{flex:auto;height:100%;min-height:100%}.fxz[data-layout=overlay]{padding:var(--field-padding);background:0 0;justify-content:flex-end}.fxz[data-layout=overlay]:hover:not(:disabled){background:var(--field-background-focus)}.fxh{font-size:var(--control-font-size);color:inherit;line-height:1.35}.fxa{font-size:var(--field-error-size);color:var(--field-placeholder);letter-spacing:.01em}.fxl{flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none;display:flex}.fxt{min-width:0;padding:var(--field-padding);background:var(--field-background-focus);border-radius:10px;align-items:center;gap:10px;display:flex}.fxm{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.fxn{text-overflow:ellipsis;white-space:nowrap;font-size:var(--control-font-size);color:inherit;line-height:1.3;overflow:hidden}.fxs{font-size:var(--field-error-size);color:var(--field-placeholder);line-height:1.2}.fxd{width:28px;height:28px;color:var(--field-placeholder);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:0;font-size:18px;line-height:1;display:inline-flex}.fxd:hover{color:var(--field-error-color);background:color-mix(in srgb, var(--field-error-color) 10%, transparent)}.fxc{color:var(--field-placeholder);font:inherit;font-size:var(--field-error-size);cursor:pointer;padding:var(--field-padding-block) 0;background:0 0;border:0;align-self:flex-start;margin-top:2px}.fxc:hover{color:var(--field-error-color)}}\n\n@layer elcrm-form{.fbr{align-items:stretch;overflow:hidden;gap:0!important;padding:0!important}.fbr:focus-within{background:var(--field-background)!important;border-color:var(--field-border)!important;box-shadow:none!important}.fbr[data-disabled=true]{opacity:.85;cursor:not-allowed}.fbr>div{min-width:0;min-height:var(--field-height);flex:1;padding:0;line-height:normal;overflow:visible}.fbr[data-variant=pill]{border-radius:var(--field-tabs-radius);min-height:var(--field-height);padding:var(--field-tabs-padding)!important}.fbr[data-variant=pill]:focus-within{background:var(--field-background)!important}.fbr[data-variant=pill]>div{min-height:0}.fbi{width:100%;min-height:var(--field-height);flex-wrap:nowrap;align-items:stretch;display:flex}[data-variant=pill] .fbi{gap:var(--field-tabs-gap);align-items:stretch;min-height:0}.fbt{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--field-icon-gap);min-width:0;min-height:var(--field-height);padding:0 var(--field-padding-inline);border:0;border-right:var(--field-tabs-divider);color:var(--field-color);font:inherit;font-size:var(--control-font-size);text-align:center;cursor:pointer;background:0 0;border-radius:0;outline:none;flex:1 1 0;margin:0;font-weight:500;line-height:1.2;transition:background-color .16s,color .16s,opacity .16s,border-radius .16s;display:inline-flex}.fbt:last-child{border-right:0}.fbt:hover:not(:disabled):not(.fba){background:var(--field-background-focus)}.fbt:focus-visible{box-shadow:inset 0 0 0 2px var(--field-focus-ring);background:var(--field-background-focus);z-index:1;position:relative}.fbt:first-child:focus-visible{border-radius:var(--field-radius) 0 0 var(--field-radius)}.fbt:last-child:focus-visible{border-radius:0 var(--field-radius) var(--field-radius) 0}.fbt:only-child:focus-visible{border-radius:var(--field-radius)}.fbt:disabled{color:var(--field-color-disabled);cursor:not-allowed;opacity:.65}[data-variant=pill] .fbt{border-radius:var(--field-tabs-item-radius);min-height:0;padding:var(--field-tabs-item-padding);color:var(--field-tabs-color);border-right:0;font-weight:500}[data-variant=pill] .fbt:hover:not(:disabled):not(.fba){color:var(--field-tabs-color-active);background:0 0}[data-variant=pill] .fbt:focus-visible{border-radius:var(--field-tabs-item-radius);box-shadow:0 0 0 2px var(--field-focus-ring);background:0 0}[data-variant=pill] .fbt:first-child:focus-visible,[data-variant=pill] .fbt:last-child:focus-visible,[data-variant=pill] .fbt:only-child:focus-visible{border-radius:var(--field-tabs-item-radius)}[data-variant=pill] .fbt:disabled{color:var(--field-tabs-color)}.fba{background:var(--field-tabs-active-bg);color:var(--field-color)}.fba:hover:not(:disabled){background:var(--field-tabs-active-bg)}[data-variant=pill] .fba{color:var(--field-tabs-color-active)}[data-variant=pill] .fba:hover:not(:disabled){background:var(--field-tabs-active-bg);color:var(--field-tabs-color-active)}.fbo{width:var(--field-icon-size);height:var(--field-icon-size);color:var(--field-icon-color);flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.fbo svg{width:var(--field-icon-size);height:var(--field-icon-size);display:block}.fba .fbo{color:var(--field-color)}[data-variant=pill] .fba .fbo{color:var(--field-tabs-color-active)}.fbl{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}\n\n@layer elcrm-form{.fur{gap:var(--field-group-gap);width:var(--field-width);background:0 0;border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}}\n";
|
|
9
9
|
document.head.appendChild(el);
|
|
10
10
|
})();
|
|
11
11
|
|
package/dist/dark.css
CHANGED
|
@@ -70,7 +70,16 @@
|
|
|
70
70
|
/* размер OTP-ячейки: по умолчанию = высота поля (size s/m/l); можно задать 72px / 5rem */
|
|
71
71
|
--field-code-size: var(--field-height);
|
|
72
72
|
--field-tabs-divider: 1px solid #48484a;
|
|
73
|
-
--field-tabs-active-bg: rgba(255, 255, 255, 0.
|
|
73
|
+
--field-tabs-active-bg: rgba(255, 255, 255, 0.12);
|
|
74
|
+
--field-tabs-color: #8e8e93;
|
|
75
|
+
--field-tabs-color-active: #ffffff;
|
|
76
|
+
--field-tabs-padding: 4px;
|
|
77
|
+
--field-tabs-gap: 4px;
|
|
78
|
+
--field-tabs-radius: 999px;
|
|
79
|
+
--field-tabs-item-radius: 999px;
|
|
80
|
+
--field-search-min-width: 200px;
|
|
81
|
+
--field-search-expand-min: 180px;
|
|
82
|
+
--field-search-list-max-height: 240px;
|
|
74
83
|
--field-rating-size: 22px;
|
|
75
84
|
--field-radio-size: 20px;
|
|
76
85
|
|
package/dist/fields/Code.d.ts
CHANGED
|
@@ -6,14 +6,9 @@ import { TInput } from './type';
|
|
|
6
6
|
*
|
|
7
7
|
* **Элементы:** капсула без внутреннего padding → ячейки. `group` — визуальный разделитель.
|
|
8
8
|
* `cellSize` бьёт `--field-code-size`.
|
|
9
|
-
* `generate` — кнопка справа: случайный код. `true` → шаблон `Az09#`
|
|
10
|
-
* (`A` заглавные, `z` строчные, `09` цифры, `#` символы).
|
|
11
|
-
* `generate="A"` только A–Z, `generate="59"` цифры 5–9, `generate="#"` только символы.
|
|
12
9
|
*
|
|
13
10
|
* @example
|
|
14
11
|
* <CodeField name="otp" form={form} label="Код" length={6} group={3} />
|
|
15
|
-
* <CodeField name="pin" form={form} length={8} generate />
|
|
16
|
-
* <CodeField name="pwd" form={form} length={10} generate="Az09#" numeric={false} />
|
|
17
12
|
*/
|
|
18
13
|
export type TCode = TInput & {
|
|
19
14
|
length?: number;
|
|
@@ -30,16 +25,11 @@ export type TCode = TInput & {
|
|
|
30
25
|
* Число → px; строка — любое CSS-значение (`"4.5rem"`, `"96px"`).
|
|
31
26
|
*/
|
|
32
27
|
cellSize?: number | string;
|
|
33
|
-
/**
|
|
34
|
-
* Кнопка генерации. `true` / `""` → `Az09#`.
|
|
35
|
-
* Шаблон: `A` A–Z, `z` a–z, две цифры — диапазон (`09`, `59`), `#` — символы.
|
|
36
|
-
*/
|
|
37
|
-
generate?: boolean | string;
|
|
38
28
|
};
|
|
39
29
|
/**
|
|
40
30
|
* Поле кода. Вставка заполняет ячейки подряд.
|
|
41
31
|
*/
|
|
42
|
-
declare function CodeField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, size, length, numeric, group, cellSize, autoComplete,
|
|
32
|
+
declare function CodeField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, size, length, numeric, group, cellSize, autoComplete, }: TCode): import("react/jsx-runtime").JSX.Element | null;
|
|
43
33
|
declare namespace CodeField {
|
|
44
34
|
var displayName: string;
|
|
45
35
|
}
|
package/dist/fields/Code.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import{isEmptyTextLike as i}from"./visibility.js";import a from"../styles/Code.module.js";import
|
|
1
|
+
import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import{isEmptyTextLike as i}from"./visibility.js";import a from"../styles/Code.module.js";import o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(e,t){return e?e.length===1?e:e[t]||`0`:`0`}function u({value:u=``,form:d,onValue:f,onBlur:p,name:m=``,placeholder:h=``,label:g=``,error:_=``,hidden:v=!1,disabled:y=!1,className:b=``,after:x=``,before:S=``,size:C=`m`,length:w=6,numeric:T=!0,group:E,cellSize:D,autoComplete:O=`one-time-code`}){let{value:k,version:A}=n(d,m,u),j=!y,M=(T?String(k??``).replace(/\D/g,``):String(k??``)).slice(0,w),N=o.useRef([]),P=E&&E>0?E:w===6?3:0,F=o.useMemo(()=>{if(D!=null)return{"--field-code-size":typeof D==`number`?`${D}px`:D}},[D]);o.useEffect(()=>{},[A]);let I=r(d,m,f),L=(e,t)=>{let n=M.padEnd(w,` `).split(``);n[e]=t;let r=n.join(``).replace(/ /g,``).slice(0,w);return I(r,!0),r},R=(e,t)=>{let n=T?t.replace(/\D/g,``):t;if(!n){L(e,``);return}if(n.length>1){let e=n.slice(0,w);I(e,!0);let t=Math.min(e.length,w-1);N.current[t]?.focus();return}L(e,n),e<w-1&&N.current[e+1]?.focus()};if(v&&i(M))return null;let z=[];for(let e=0;e<w;e++)P>0&&e>0&&e%P===0&&z.push(s(`span`,{className:a.s,"aria-hidden":!0,children:`-`},`sep-${e}`)),z.push(s(`input`,{ref:t=>{N.current[e]=t},className:a.c,type:`text`,inputMode:T?`numeric`:`text`,autoComplete:e===0?O:`off`,maxLength:1,disabled:y||!j,value:M[e]||``,placeholder:l(h,e),"aria-label":`${e+1} из ${w}`,onChange:t=>R(e,t.target.value),onKeyDown:t=>{t.key===`Backspace`&&!M[e]&&e>0&&(t.preventDefault(),L(e-1,``),N.current[e-1]?.focus()),t.key===`ArrowLeft`&&e>0&&(t.preventDefault(),N.current[e-1]?.focus()),t.key===`ArrowRight`&&e<w-1&&(t.preventDefault(),N.current[e+1]?.focus())},onBlur:()=>{let e=document.activeElement;N.current.some(t=>t===e)||p?.({value:M,name:m})},onPaste:e=>{e.preventDefault();let t=e.clipboardData.getData(`text`)||``,n=(T?t.replace(/\D/g,``):t).slice(0,w);I(n,!0),N.current[Math.min(n.length,w-1)]?.focus()}},e));return c(t,{type:`code`,label:g,error:_,size:C,element_blok:{className:[b||``]},element_input:{className:[a.r],props:{"data-disabled":y||!j?`true`:void 0}},children:[S?s(`span`,{className:e.a,children:S}):null,s(`div`,{className:a.i,role:`group`,"aria-label":g||h||`Код`,style:F,children:z}),x?s(`span`,{className:e.a,children:x}):null]})}u.displayName=`CodeField`;export{u as default};
|
|
@@ -5,7 +5,7 @@ import { TInput, TValue } from './type';
|
|
|
5
5
|
* Тип поля в группе — соответствует компоненту `*Field`.
|
|
6
6
|
* `string` → StringField, `number` → NumberField, …
|
|
7
7
|
*/
|
|
8
|
-
export type FieldGroupFieldKind = "string" | "password" | "email" | "url" | "phone" | "number" | "money" | "percent" | "mask" | "date" | "time" | "textarea" | "select" | "radio" | "tabs" | "check" | "color" | "tags" | "rating" | "code" | "card" | "file" | "drag" | "rich" | "display" | "hidden" | "range" | "options" | "modal";
|
|
8
|
+
export type FieldGroupFieldKind = "string" | "password" | "email" | "url" | "phone" | "number" | "money" | "percent" | "mask" | "date" | "time" | "textarea" | "select" | "radio" | "tabs" | "check" | "color" | "tags" | "rating" | "code" | "card" | "file" | "drag" | "rich" | "display" | "hidden" | "range" | "options" | "modal" | "search";
|
|
9
9
|
/** Пропы, которые группа задаёт сама (item их не дублирует) */
|
|
10
10
|
type GroupOwned = "form" | "onValue" | "onBlur";
|
|
11
11
|
/**
|
|
@@ -25,8 +25,14 @@ type FieldGroupItemExtras = {
|
|
|
25
25
|
group?: number;
|
|
26
26
|
cellSize?: number | string;
|
|
27
27
|
numeric?: boolean;
|
|
28
|
-
/**
|
|
28
|
+
/** Password: кнопка генерации (`true` → Az09#) */
|
|
29
29
|
generate?: boolean | string;
|
|
30
|
+
timeout?: number;
|
|
31
|
+
loading?: boolean;
|
|
32
|
+
minimal?: boolean;
|
|
33
|
+
clearable?: boolean;
|
|
34
|
+
hotkey?: string | false;
|
|
35
|
+
width?: "s" | "m" | "l";
|
|
30
36
|
/** Card / Email: проверка на blur */
|
|
31
37
|
validate?: boolean;
|
|
32
38
|
/** Money: множитель записи в форму */
|
|
@@ -37,6 +43,7 @@ type FieldGroupItemExtras = {
|
|
|
37
43
|
max?: number | string | Date;
|
|
38
44
|
step?: number;
|
|
39
45
|
variant?: string;
|
|
46
|
+
/** Tabs: `field` | `pill` */
|
|
40
47
|
inline?: boolean;
|
|
41
48
|
equal?: boolean;
|
|
42
49
|
maxTags?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./Range.js";import t from"./Money.js";import n from"./Mask.js";import r from"./Date.js";import i from"./Time.js";import a from"./Textarea.js";import o from"./Phone.js";import s from"./Input.js";import c from"./Numeric.js";import l from"./Options.js";import u from"./Select.js";import d from"./Modal.js";import f from"./Password.js";import p from"./Check.js";import m from"./Color.js";import h from"./Email.js";import g from"./Card.js";import _ from"./Url.js";import v from"./Percent.js";import y from"./Radio.js";import b from"./Tags.js";import x from"./Rating.js";import S from"./Code.js";import C from"./Tabs.js";import w from"./File.js";import T from"./DragDrop.js";import E from"./RichText.js";import D from"./Hidden.js";import O from"./Display.js";import k from"../styles/FieldGroup.module.js";import"react";import{jsx as
|
|
1
|
+
import e from"./Range.js";import t from"./Money.js";import n from"./Mask.js";import r from"./Date.js";import i from"./Time.js";import a from"./Textarea.js";import o from"./Phone.js";import s from"./Input.js";import c from"./Numeric.js";import l from"./Options.js";import u from"./Select.js";import d from"./Modal.js";import f from"./Password.js";import p from"./Check.js";import m from"./Color.js";import h from"./Email.js";import g from"./Card.js";import _ from"./Url.js";import v from"./Percent.js";import y from"./Radio.js";import b from"./Tags.js";import x from"./Rating.js";import S from"./Code.js";import C from"./Tabs.js";import w from"./File.js";import T from"./DragDrop.js";import E from"./RichText.js";import D from"./Hidden.js";import O from"./Display.js";import k from"./Search.js";import A from"../styles/FieldGroup.module.js";import"react";import{jsx as j}from"react/jsx-runtime";var M=e=>e,N={string:M(s),password:M(f),email:M(h),url:M(_),phone:M(o),number:M(c),money:M(t),percent:M(v),mask:M(n),date:M(r),time:M(i),textarea:M(a),select:M(u),radio:M(y),tabs:M(C),check:M(p),color:M(m),tags:M(b),rating:M(x),code:M(S),card:M(g),file:M(w),drag:M(T),rich:M(E),display:M(O),hidden:M(D),range:M(e),options:M(l),modal:M(d),search:M(k)};function P({items:e,form:t,onValue:n,onBlur:r,disabled:i=!1,size:a,errors:o,values:s,gap:c,className:l,style:u,...d}){let f=c===void 0?u:{...u,"--field-group-gap":typeof c==`number`?`${c}px`:c};return j(`div`,{className:[A.r,l].filter(Boolean).join(` `),role:`group`,style:f,...d,children:e.map(e=>{let{field:c,name:l,disabled:u,size:d,error:f,value:p,...m}=e,h=N[c];if(!h)return null;let g=p===void 0?s?s[l]:void 0:p;return j(h,{name:l,form:t,onValue:n,onBlur:r,disabled:u??i,size:d??a,error:f??o?.[l]??``,...g===void 0?{}:{value:g},...m},l)})})}P.displayName=`FieldGroup`;export{P as default};
|
|
@@ -4,13 +4,14 @@ import { TPasswordField } from './type';
|
|
|
4
4
|
*
|
|
5
5
|
* **В форме:** `string`.
|
|
6
6
|
*
|
|
7
|
-
* **Элементы:** капсула + `<input type="password"|text>` +
|
|
7
|
+
* **Элементы:** капсула + `<input type="password"|text>` + глаз + опционально generate.
|
|
8
8
|
* Проп `native` **скрывает весь компонент** (не делает input) — см. {@link TPasswordField}.
|
|
9
9
|
*
|
|
10
10
|
* @example
|
|
11
11
|
* <PasswordField name="password" form={form} label="Пароль" autoComplete="current-password" />
|
|
12
|
+
* <PasswordField name="pin" form={form} generate maxLength={12} />
|
|
12
13
|
*/
|
|
13
|
-
declare function PasswordField({ value, form, onValue, name, placeholder, label, error, hidden, disabled, onBlur: onBlurField, className, after, before, native, maxLength, eyes, id, size, }: TPasswordField): import("react/jsx-runtime").JSX.Element | "";
|
|
14
|
+
declare function PasswordField({ value, form, onValue, name, placeholder, label, error, hidden, disabled, onBlur: onBlurField, className, after, before, native, maxLength, eyes, generate, id, size, }: TPasswordField): import("react/jsx-runtime").JSX.Element | "";
|
|
14
15
|
declare namespace PasswordField {
|
|
15
16
|
var displayName: string;
|
|
16
17
|
}
|
package/dist/fields/Password.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import{createFieldEmit as i}from"./emit.js";import a from"../events/onEvent.js";import{isEmptyTextLike as o}from"./visibility.js";import s from"react";import{jsx as
|
|
1
|
+
import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import{createFieldEmit as i}from"./emit.js";import a from"../events/onEvent.js";import{isEmptyTextLike as o}from"./visibility.js";import{generatePasswordValue as s,resolveGeneratePool as c}from"./passwordUtils.js";import l from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";function f(){return d(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":!0,children:[u(`path`,{d:`M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z`}),u(`circle`,{cx:`12`,cy:`12`,r:`3`})]})}function p(){return d(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":!0,children:[u(`path`,{d:`M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24`}),u(`line`,{x1:`1`,y1:`1`,x2:`23`,y2:`23`})]})}function m({value:n,form:m,onValue:g,name:_=``,placeholder:v=``,label:y,error:b,hidden:x=!1,disabled:S=!1,onBlur:C,className:w,after:T=``,before:E=``,native:D=!1,maxLength:O,eyes:k,generate:A,id:j,size:M=`m`}){let{value:N}=r(m,_,n),[P,F]=l.useState(!1),I=l.useRef(null),L=typeof N==`string`?N:N==null?``:String(N);l.useEffect(()=>{let e=I.current;e&&e.value!==L&&(e.value=L)},[L]);let R=i(m,_,g),z=e=>{R(e.target.value)},B=e=>{e.key===`Enter`&&e.preventDefault()},V=e=>{a.Blur(e),C?.({value:(e.target.value||``).trim(),name:_||``})};if(D)return``;let H=!S;if(x&&o(L))return``;let U=k?.[0]??u(f,{}),W=k?.[1]??u(p,{}),G=c(A),K=O??12,[q,J]=l.useState(0);return d(t,{type:`input`,label:y,error:b,id:j,size:M,element_blok:{className:[w||``]},element_input:{className:[e.w],props:{"data-disabled":S||!H?`true`:void 0}},children:[E?u(`span`,{className:e.a,children:E}):null,u(h,{inputRef:I,passwordVisible:P,currentValue:L,disabled:S,editable:H,maxLength:O,placeholder:v,label:y,onChangeInput:z,keyDown:B,handleBlur:V}),G?u(`button`,{type:`button`,className:e.a,tabIndex:S?-1:0,disabled:S,"aria-label":`Сгенерировать пароль`,title:`Сгенерировать пароль`,onClick:()=>{!H||!G||(J(e=>e+1),R(s(G,K),!0),I.current?.focus())},children:d(`svg`,{className:q>0?e.j:void 0,fill:`none`,stroke:`currentColor`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:`1.5`,viewBox:`0 0 24 24`,children:[u(`path`,{d:`m18.75 6.938-.99-1.152A8.973 8.973 0 0 0 11.25 3c-4.969 0-9 4.031-9 9s4.031 9 9 9a9.004 9.004 0 0 0 8.488-6`}),u(`path`,{fill:`currentColor`,stroke:`none`,d:`M21.75 4.565v5.183a.75.75 0 0 1-.75.75h-5.184a.75.75 0 0 1-.53-1.28l5.184-5.184a.75.75 0 0 1 1.28.53Z`})]},q)}):null,u(`button`,{type:`button`,className:e.a,tabIndex:S?-1:0,"aria-label":P?`Скрыть пароль`:`Показать пароль`,"aria-pressed":P,disabled:S,onClick:()=>!S&&F(!P),children:P?W:U}),T?u(`span`,{className:e.a,children:T}):null]})}function h({inputRef:t,passwordVisible:r,currentValue:i,disabled:a,editable:o,maxLength:s,placeholder:c,label:l,onChangeInput:d,keyDown:f,handleBlur:p}){let m=n();return u(`div`,{className:e.x,children:u(`input`,{id:m?.controlId,className:e.y,type:r?`text`:`password`,defaultValue:i,ref:t,onChange:d,onKeyDown:f,onBlur:p,disabled:a,readOnly:a,maxLength:s,spellCheck:!1,autoComplete:`current-password`,"aria-label":l?void 0:c||`Пароль`,"aria-describedby":m?.describedBy,"aria-invalid":m?.errorId?!0:void 0,"aria-disabled":a||!o,tabIndex:a?-1:0,placeholder:c})})}m.displayName=`PasswordField`;export{m as default};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { TInput } from './type';
|
|
3
|
+
import { SearchHotkey } from './searchHotkey';
|
|
4
|
+
import { SearchSuggestion } from './SearchSuggestions';
|
|
5
|
+
export type SearchWidth = "s" | "m" | "l";
|
|
6
|
+
export type SearchVariant = "default" | "ghost" | "filled";
|
|
7
|
+
export type { SearchHotkey, SearchSuggestion };
|
|
8
|
+
/**
|
|
9
|
+
* Поиск. **В форме:** `string`.
|
|
10
|
+
*
|
|
11
|
+
* **Элементы:** капсула → лупа (`before` по умолчанию) | `<input type="search">` | clear | `after`.
|
|
12
|
+
* Список подсказок — портал. Debounce `timeout` (по умолчанию 250 мс).
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* <SearchField name="q" form={form} placeholder="Поиск…" timeout={0} />
|
|
16
|
+
* <SearchField name="q" form={form} variant="ghost" minimal hotkey="/" />
|
|
17
|
+
*/
|
|
18
|
+
export type TSearch = TInput & {
|
|
19
|
+
/** Debounce перед записью в form / `onSearch`, мс. `0` = сразу. @default 250 */
|
|
20
|
+
timeout?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Async-поиск. Promise → спиннер вместо лупы до settle.
|
|
23
|
+
* Вызывается с тем же debounce, что и запись в форму.
|
|
24
|
+
*/
|
|
25
|
+
onSearch?: (query: string) => void | Promise<void>;
|
|
26
|
+
/** Внешний флаг загрузки */
|
|
27
|
+
loading?: boolean;
|
|
28
|
+
suggestions?: SearchSuggestion[];
|
|
29
|
+
loadSuggestions?: (query: string) => SearchSuggestion[] | Promise<SearchSuggestion[]>;
|
|
30
|
+
onSuggestionSelect?: (item: SearchSuggestion) => void;
|
|
31
|
+
renderSuggestion?: (item: SearchSuggestion, index: number, active: boolean) => ReactNode;
|
|
32
|
+
suggestionsOpen?: boolean;
|
|
33
|
+
onSuggestionsOpenChange?: (open: boolean) => void;
|
|
34
|
+
/** `s` по контенту, `m` min-width, `l` 100%. @default "m" */
|
|
35
|
+
width?: SearchWidth;
|
|
36
|
+
/** `default` | `ghost` | `filled`. @default "default" */
|
|
37
|
+
variant?: SearchVariant;
|
|
38
|
+
dir?: "ltr" | "rtl";
|
|
39
|
+
resultsCount?: number | null;
|
|
40
|
+
resultsAnnounce?: string | ((count: number) => string);
|
|
41
|
+
/** Свёрнутая иконка, по фокусу раскрывается. */
|
|
42
|
+
minimal?: boolean;
|
|
43
|
+
/** Задержка сворачивания minimal после blur, мс. @default 180 */
|
|
44
|
+
collapseDelay?: number;
|
|
45
|
+
hotkeyBadge?: boolean;
|
|
46
|
+
/** Кнопка очистки. @default true */
|
|
47
|
+
clearable?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Горячая клавиша фокуса: `/` · `mod+/` · `mod+k`.
|
|
50
|
+
* Не срабатывает в input/textarea и при открытой модалке.
|
|
51
|
+
*/
|
|
52
|
+
hotkey?: SearchHotkey;
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Поле поиска. Лупа / спиннер слева, clear справа, подсказки в портале.
|
|
56
|
+
*/
|
|
57
|
+
declare function SearchField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, id, size, maxLength, autoComplete, timeout, onSearch, loading, suggestions: suggestionsProp, loadSuggestions, onSuggestionSelect, renderSuggestion, suggestionsOpen, onSuggestionsOpenChange, width, variant, dir, resultsCount, resultsAnnounce, minimal, collapseDelay, hotkeyBadge, clearable, hotkey, }: TSearch): import("react/jsx-runtime").JSX.Element | null;
|
|
58
|
+
declare namespace SearchField {
|
|
59
|
+
var displayName: string;
|
|
60
|
+
}
|
|
61
|
+
export default SearchField;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{useFieldA11y as t}from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as ee}from"./emit.js";import{isEmptyTextLike as r}from"./visibility.js";import i from"../styles/Search.module.js";import{formatResultsCount as te}from"./searchAnnounce.js";import{hotkeyBadgeLabel as ne,matchHotkey as re}from"./searchHotkey.js";import{SearchSuggestions as ie}from"./SearchSuggestions.js";import{useCallback as a,useEffect as o,useId as s,useRef as c,useState as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{createPortal as ae}from"react-dom";function oe(e){return e?e.tagName===`INPUT`||e.tagName===`TEXTAREA`||e.tagName===`SELECT`||e.isContentEditable:!1}function se(){return!!document.querySelector(`[data-elcrm-modal], .elcrm-modal, [role="dialog"]`)}function ce(){return u(`svg`,{"aria-hidden":!0,viewBox:`0 0 24 24`,className:i.v,children:u(`path`,{d:`M17.5 17.5L22 22m-2-11a9 9 0 1 0-18 0a9 9 0 0 0 18 0`})})}function le(){return u(`svg`,{"aria-hidden":!0,viewBox:`0 0 24 24`,className:i.v,children:u(`path`,{d:`M17 6L6 17M6 6L17 17`})})}function f(){return u(`svg`,{"aria-hidden":!0,viewBox:`0 0 24 24`,className:`${i.v} ${i.i}`,children:u(`circle`,{cx:`12`,cy:`12`,r:`9`,fill:`none`,strokeDasharray:`40 20`})})}function p({value:t,form:p,onValue:de,onBlur:fe,name:m=``,placeholder:pe=`Поиск…`,label:me=``,error:he=``,hidden:ge=!1,disabled:h=!1,className:_e=``,after:ve=``,before:ye,id:be,size:xe=`m`,maxLength:Se,autoComplete:Ce=`off`,timeout:we=250,onSearch:g,loading:Te=!1,suggestions:_,loadSuggestions:v,onSuggestionSelect:Ee,renderSuggestion:De,suggestionsOpen:y,onSuggestionsOpenChange:b,width:Oe=`m`,variant:ke=`default`,dir:Ae,resultsCount:x=null,resultsAnnounce:S,minimal:C=!1,collapseDelay:je=180,hotkeyBadge:Me,clearable:Ne=!0,hotkey:w=!1}){let{value:T}=n(p,m,t),E=typeof T==`string`?T:T==null?``:String(T),Pe=`${s()}-list`,D=c(null),O=c(null),k=c(null),A=c(null),j=c(0),M=c(0),N=c(!1),P=c(E),[F,I]=l(E),[Fe,L]=l(!1),[Ie,R]=l(!1),[Le,z]=l(!1),[Re,ze]=l(!1),[Be,B]=l(null),[Ve,V]=l(!1),[H,U]=l(-1),[He,Ue]=l(null),We=Me??!!(C&&w),Ge=Te||Le||Re,Ke=!h,W=Be??_??[],G=!!(v||_!==void 0);o(()=>{N.current||(I(E),P.current=E)},[E]);let K=e=>{e.current!=null&&(window.clearTimeout(e.current),e.current=null)},q=ee(p,m,de),J=a(async e=>{if(!v){B(null);return}let t=++M.current;ze(!0);try{let n=await Promise.resolve(v(e));if(t!==M.current)return;B(n),U(n.length?0:-1)}catch{if(t!==M.current)return;B([]),U(-1)}finally{t===M.current&&ze(!1)}},[v]),qe=a((e,t=!1)=>{K(k);let n=()=>{if(P.current=e,q(e,!0),g){let t=++j.current,n=g(e);n&&typeof n.then==`function`&&(z(!0),Promise.resolve(n).finally(()=>{t===j.current&&z(!1)}))}v&&J(e)};t||we<=0?n():k.current=window.setTimeout(n,we)},[q,g,v,J,we]);o(()=>()=>{K(k),K(A)},[]);let Y=a(()=>{O.current?.focus()},[]);o(()=>{if(!w||h)return;let e=e=>{oe(e.target)||se()||re(e,w)&&(e.preventDefault(),Y(),O.current?.select())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[w,h,Y]);let Je=a(()=>{!G||h||(V(!0),b?.(!0))},[G,h,b]),X=a(()=>{V(!1),U(-1),b?.(!1)},[b]);o(()=>{y!==void 0&&(V(y),y||U(-1))},[y]);let Z=y===void 0?Ve:y,Q=a(()=>{let e=D.current;e&&Ue(e.getBoundingClientRect())},[]);o(()=>{if(!Z)return;Q();let e=()=>Q();return window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[Z,Q]);let Ye=a(e=>{let t=e.value??e.label;if(I(t),P.current=t,q(t,!0),Ee?.(e),X(),g){let e=++j.current,n=g(t);n&&typeof n.then==`function`&&(z(!0),Promise.resolve(n).finally(()=>{e===j.current&&z(!1)}))}Y()},[q,Ee,g,X,Y]),Xe=e=>{let t=e.target.value;I(t),Je(),qe(t)},Ze=()=>{I(``),P.current=``,qe(``,!0),Je(),Y()},Qe=e=>{if(Z&&W.length){if(e.key===`ArrowDown`){e.preventDefault(),U(e=>(e+1)%W.length);return}if(e.key===`ArrowUp`){e.preventDefault(),U(e=>e<=0?W.length-1:e-1);return}if(e.key===`Enter`&&H>=0){e.preventDefault(),Ye(W[H]);return}}if(e.key===`Escape`){if(Z){e.preventDefault(),X();return}F&&(e.preventDefault(),Ze())}},$e=()=>{N.current=!0,K(A),R(!1),L(!0),Je(),v?J(F):_&&U(_.length?0:-1)},et=()=>{N.current=!1,F!==P.current&&qe(F,!0),fe?.({value:F,name:m});let e=document.activeElement;if(e&&D.current?.contains(e)){L(!1);return}L(!1),C&&(F||Z||je>0)?(R(!0),K(A),A.current=window.setTimeout(()=>{R(!1),X()},Math.max(0,je))):X()},$=!C||Fe||Ie||!!F||Z,tt=Z&&G&&$,nt=x==null?``:typeof S==`string`?S:typeof S==`function`?S(x):te(x),rt=e=>{!C||h||$||e.target!==O.current&&(e.preventDefault(),Y())};if(ge&&r(F)&&r(E))return null;let it=Ge?u(f,{}):ye??u(ce,{}),at=Oe===`s`?i.s:Oe===`l`?i.l:i.m;return d(e,{type:`search`,label:me,error:he,id:be,size:xe,element_blok:{className:[_e||``,i.c,at,C?i.p:``,C&&$?i.e:``,C&&We&&!$?i.y:``]},element_input:{className:[i.r],props:{"data-disabled":h||!Ke?`true`:void 0,"data-variant":ke===`default`?void 0:ke,"data-minimal":C?`true`:void 0,"data-expanded":C?$?`true`:`false`:void 0,"data-loading":Ge?`true`:void 0,dir:Ae,onMouseDown:rt}},children:[d(`div`,{ref:D,className:i.d,role:`search`,children:[u(`span`,{className:i.b,"aria-hidden":!0,children:it}),u(ue,{inputRef:O,draft:F,disabled:h,maxLength:Se,placeholder:pe,autoComplete:Ce,name:m,id:be,expanded:$,minimal:C,hasSuggestSource:G,showList:tt,listId:Pe,activeIndex:H,label:me,onChange:Xe,onKeyDown:Qe,onBlur:et,onFocus:$e}),C&&We&&!$&&w?u(`kbd`,{className:i.k,children:ne(w)}):null,Ne&&F&&$?u(`button`,{type:`button`,className:i.x,"aria-label":`Очистить поиск`,tabIndex:-1,disabled:h,onClick:Ze,children:u(le,{})}):u(`span`,{className:i.u,"aria-hidden":!0}),ve?u(`span`,{className:i.w,children:ve}):null,u(`span`,{"data-live":!0,"aria-live":`polite`,"aria-atomic":`true`,children:nt})]}),tt&&He?ae(u(ie,{id:Pe,items:W,activeIndex:H,parent:He,onHover:U,onSelect:e=>Ye(e),renderItem:De}),document.body):null]})}function ue({inputRef:e,draft:n,disabled:ee,maxLength:r,placeholder:te,autoComplete:ne,name:re,id:ie,expanded:a,minimal:o,hasSuggestSource:s,showList:c,listId:l,activeIndex:d,label:ae,onChange:oe,onKeyDown:se,onBlur:ce,onFocus:le}){let f=t();return u(`input`,{ref:e,id:ie||f?.controlId,name:re||void 0,type:`search`,className:i.n,placeholder:te,value:n,disabled:ee,maxLength:r,autoComplete:ne,tabIndex:o&&!a?-1:void 0,role:s?`combobox`:void 0,"aria-label":ae?void 0:te||`Поиск`,"aria-expanded":s?c:o?a:void 0,"aria-controls":c?l:void 0,"aria-activedescendant":c&&d>=0?`${l}-opt-${d}`:void 0,"aria-autocomplete":s?`list`:void 0,"aria-describedby":f?.describedBy,"aria-invalid":f?.errorId?!0:void 0,onChange:oe,onKeyDown:se,onBlur:ce,onFocus:le})}p.displayName=`SearchField`;export{p as default};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type SearchSuggestion = {
|
|
3
|
+
/** Стабильный id; иначе используется index */
|
|
4
|
+
id?: string;
|
|
5
|
+
label: string;
|
|
6
|
+
/** Значение в input; по умолчанию `label` */
|
|
7
|
+
value?: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
recent?: boolean;
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
data?: unknown;
|
|
12
|
+
};
|
|
13
|
+
type SuggestionsProps = {
|
|
14
|
+
id: string;
|
|
15
|
+
items: SearchSuggestion[];
|
|
16
|
+
activeIndex: number;
|
|
17
|
+
parent: DOMRect;
|
|
18
|
+
onHover: (index: number) => void;
|
|
19
|
+
onSelect: (item: SearchSuggestion, index: number) => void;
|
|
20
|
+
renderItem?: (item: SearchSuggestion, index: number, active: boolean) => React.ReactNode;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Список подсказок в портале (якорь к капсуле).
|
|
24
|
+
*/
|
|
25
|
+
export declare function SearchSuggestions({ id, items, activeIndex, parent, onHover, onSelect, renderItem, }: SuggestionsProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{acquireOverlayZIndex as e,releaseOverlayZIndex as t}from"../overlayZ.js";import n from"../styles/Search.module.js";import r from"react";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";function s({id:s,items:c,activeIndex:l,parent:u,onHover:d,onSelect:f,renderItem:p}){let[m]=r.useState(()=>e());r.useEffect(()=>()=>t(m),[m]);let h=window.innerHeight-u.bottom<246?u.top-240-6:u.bottom+6;h=Math.min(h,window.innerHeight-240-6),h=Math.max(6,h);let g=Math.min(Math.max(6,u.left),Math.max(6,window.innerWidth-u.width-6));return a(`ul`,{id:s,className:n.q,role:`listbox`,"aria-label":`Подсказки`,style:{top:h,left:g,width:u.width,zIndex:m},children:c.length===0?a(`li`,{className:n.o,role:`presentation`,children:`Нет подсказок`}):c.map((e,t)=>{let r=t===l,c=e.id??`${e.label}-${t}`;return a(`li`,{id:`${s}-opt-${t}`,role:`option`,"aria-selected":r,className:[n.a,r?n.h:``].filter(Boolean).join(` `),onMouseEnter:()=>d(t),onMouseDown:n=>{n.preventDefault(),f(e,t)},children:p?p(e,t,r):o(i,{children:[e.icon==null?null:a(`span`,{className:n.f,"aria-hidden":!0,children:e.icon}),o(`span`,{className:n.z,children:[a(`span`,{className:n.g,children:e.label}),e.description?a(`span`,{className:n.t,children:e.description}):null]})]})},c)})})}export{s as SearchSuggestions};
|