@topvisor/ui 0.0.17 → 0.0.33

package/forms.css

@@ -1,505 +1 @@
-.top-button {
-	cursor: pointer;
-	box-sizing: border-box;
-	box-shadow: var(--top-button-box-shadow);
-	border-radius: var(--top-forms-radius);
-	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
-	background-color: var(--top-button-background-color);
-	height: var(--top-forms-base-height);
-	padding: 0 var(--top-forms-padding);
-	color: var(--top-button-color);
-	line-height: 1;
-	white-space: nowrap;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
-}
-.top-button:hover {
-	box-shadow: var(--top-button-box-shadow-hover);
-	background-color: var(--top-button-background-color-hover);
-}
-.top-button:active {
-	box-shadow: var(--top-button-box-shadow-active);
-	background-color: var(--top-button-background-color-active);
-}
-.top-button.top-active {
-	box-shadow: var(--top-button-box-shadow-selected);
-	background-color: var(--top-button-background-color-selected);
-}
-.top-button.top-button-progress {
-	cursor: help;
-	box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;
-	background-image:
-		linear-gradient(-45deg,
-			rgba(255, 255, 255, 0.2) 25%,
-			transparent 25%,
-			transparent 50%,
-			rgba(255, 255, 255, 0.2) 50%,
-			rgba(255, 255, 255, 0.2) 75%,
-			transparent 75%,
-			transparent);
-	background-size: 32px 32px;
-	animation: _progress_1hqxk_1 1s linear infinite;
-}
-@keyframes _progress_1hqxk_1 {
-0% {
-		background-position-x: 0px;
-}
-100% {
-		background-position-x: 32px;
-}
-}
-a.top-button,
-button.top-button {
-	min-width: 100px;
-	text-decoration: none;
-}
-a.top-button,
-a.top-button:hover {
-	min-width: var(--top-forms-base-height);
-	text-decoration: none;
-}
-.top-button[data-top-icon]:not(:empty),
-.top-button[data-top-icon2]:not(:empty) {
-	justify-content: flex-start;
-	text-align: left;
-}
-.top-button[data-top-icon] {
-	padding-left: 0;
-}
-.top-button[data-top-icon2] {
-	padding-right: var(--top-select_arrow-width);
-}
-.top-button[data-top-icon2]:after {
-	margin-left: auto;
-}
-.top-button:empty {
-	min-width: var(--top-forms-base-height);
-}
-.top-button[data-top-icon]:empty,
-.top-button[data-top-icon2]:empty {
-	padding: 0;
-}
-.top-button.top-color_blue {
-	--top-button-background-color: var(--color-blue-500);
-}
-.top-button.top-color_green {
-	--top-button-background-color: var(--color-green-500);
-}
-.top-button.top-color_orange {
-	--top-button-background-color: var(--color-orange-500);
-}
-.top-button.top-color_red {
-	--top-button-background-color: var(--color-red-500);
-}
-.top-button.top-color_pink {
-	--top-button-background-color: var(--color-pink-500);
-}
-.top-button.top-color_theme {
-	--top-button-box-shadow-hover: none;
-	--top-button-box-shadow-active: none;
-	--top-button-box-shadow-selected: none;
-
-	--top-icon-color: var(--color-text-2);
-	--top-icon2-color: var(--color-text-2);
-
-	--top-button-color: var(--color-text-1);
-	--top-button-background-color: transparent;
-	--top-button-background-color-hover: var(--color-secondary-opacity);
-	--top-button-background-color-active: var(--color-secondary-2-opacity);
-	--top-button-background-color-selected: var(--color-secondary-2-opacity);
-}
-.top-button.top-color_theme.top-active {
-	--top-icon-color: var(--color-text-2);
-}
-.top-button.top-style_outline {
-	--top-button-box-shadow: none;
-	--top-button-box-shadow-hover: none;
-	--top-button-box-shadow-active: none;
-	--top-button-box-shadow-selected: none;
-
-	--top-forms-border-color: var(--top-style_outline-color);
-
-	--top-style_outline-color: var(--color-steel-400);
-
-	--top-button-color: var(--top-style_outline-color);
-	--top-button-background-color: var(--content-background-color);
-	--top-button-background-color-hover: var(--color-theme-100);
-	--top-button-background-color-active: var(--color-theme-150);
-	--top-button-background-color-selected: var(--color-theme-125);
-
-	--top-forms-border-width: 1px;
-}
-.top-button.top-style_outline.top-color_theme {
-	--top-button-color: var(--color-text);
-}
-.top-button.top-style_outline.top-color_blue {
-	--top-style_outline-color: var(--color-blue-500);
-}
-.top-button.top-style_outline.top-color_green {
-	--top-style_outline-color: var(--color-green-500);
-}
-.top-button.top-style_outline.top-color_orange {
-	--top-style_outline-color: var(--color-orange-500);
-}
-.top-button.top-style_outline.top-color_red {
-	--top-style_outline-color: var(--color-red-500);
-}
-.top-button.top-style_outline.top-color_pink {
-	--top-style_outline-color: var(--color-pink-500);
-}
-.top-button.top-style_soft {
-	--top-shadow-darken: none;
-	--top-shadow-darken-2: none;
-	--top-shadow-darken-3: none;
-
-	--top-button-color: var(--color-text);
-	--top-button-background-color: var(--color-secondary-opacity);
-	--top-button-background-color-hover: var(--color-secondary-2-opacity);
-	--top-button-background-color-active: var(--color-secondary-3-opacity);
-	--top-button-background-color-selected: var(--color-secondary-3-opacity);
-}
-.top-button.top-style_soft.top-color_blue {
-	--top-button-color: var(--color-blue-500);
-}
-.top-button.top-style_soft.top-color_orange {
-	--top-button-color: var(--color-orange-500);
-}
-.top-button.top-style_soft.top-color_green {
-	--top-button-color: var(--color-green-500);
-}
-.top-button.top-style_soft.top-color_red {
-	--top-button-color: var(--color-red-500);
-}
-.top-button.top-style_soft.top-color_pink {
-	--top-button-color: var(--color-pink-500);
-}
-.top-button.top-style_transparent {
-	--top-shadow-darken: none;
-	--top-shadow-darken-2: none;
-	--top-shadow-darken-3: none;
-
-	--top-button-color: var(--color-text);
-	--top-button-background-color: transparent;
-	--top-button-background-color-hover: transparent;
-	--top-button-background-color-active: transparent;
-	--top-button-background-color-selected: var(--color-steel-200);
-}
-.top-button.top-style_transparent:hover {
-	opacity: 0.8;
-}
-.top-button.top-style_transparent.top-color_blue {
-	--top-button-color: var(--color-blue-450);
-}
-.top-button.top-style_transparent.top-color_green {
-	--top-button-color: var(--color-green-450);
-}
-.top-button.top-style_transparent.top-color_orange {
-	--top-button-color: var(--color-orange-450);
-}
-.top-button.top-style_transparent.top-color_red {
-	--top-button-color: var(--color-red-450);
-}
-.top-button.top-style_transparent.top-color_pink {
-	--top-button-color: var(--color-pink-450);
-}
-.top-button {
-	--top-button-color: var(--color-white);
-	--top-button-background-color: transparent;
-	--top-button-background-color-hover: var(--top-button-background-color);
-	--top-button-background-color-active: var(--top-button-background-color-hover);
-	--top-button-background-color-selected: var(--top-button-background-color-hover);
-	--top-button-box-shadow: none;
-	--top-button-box-shadow-hover: var(--top-shadow-darken-2);
-	--top-button-box-shadow-active: var(--top-shadow-darken-3);
-	--top-button-box-shadow-selected: var(--top-shadow-darken-3);
-	--top-forms-border-width: 0px;
-	--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
-	--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
-}
-.top-button.top-size_l {
-	--top-forms-padding: var(--top-forms-padding_l);
-	--top-forms-base-height: var(--top-forms-base-height_l);
-}
-.top-button.top-size_xl {
-	--top-forms-padding: var(--top-forms-padding_xl);
-	--top-forms-base-height: var(--top-forms-base-height_xl);
-}
-
-.top-hint {
-	--top-icon-size: 16px;
-	--top-icon-width: var(--top-icon-size);
-
-	border-radius: 50%;
-	background: var(--content-background-color);
-	padding: 1px;
-	color: var(--color-text-4);
-	line-height: 1;
-	z-index: 1;
-	pointer-events: all;
-}
-.top-hint:hover {
-	color: var(--color-text-3);
-}
-
-.top-textarea {
-	width: 180px;
-	display: inline-flex;
-	align-items: center;
-	position: relative;
-}
-.top-textarea_textarea {
-	background: var(--top-forms-background-color);
-	width: 100%;
-	padding: var(--top-forms-padding);
-	resize: none;
-}
-.top-textarea_textarea:hover {
-	background: var(--top-forms-background-color-hover);
-}
-.top-textarea_textarea:focus {
-	outline-color: var(--color-theme-75);
-	outline-offset: 0px;
-}
-.top-textarea_textarea.top-textarea_textarea-expandable {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-.top-textarea_pseudoContent {
-	box-sizing: border-box;
-	min-height: var(--bcf6b9ae);
-	padding: var(--top-forms-padding);
-	font-size: 14px;
-	white-space: pre-wrap;
-	overflow-wrap: anywhere;
-	pointer-events: none;
-	opacity: 0;
-	z-index: -1;
-}
-.top-textarea_hint {
-	position: absolute;
-	top: 2px;
-	right: 2px;
-}
-
-.top-forms-optionLabel {
-	flex-grow: 1;
-}
-.top-forms-optionLabel_title {
-	min-height: var(--top-forms-option-height);
-	display: flex;
-	align-items: center;
-}
-.top-forms-optionLabel_title-disabled {
-	color: var(--color-text-3);
-}
-.top-forms-optionLabel_description {
-	color: var(--color-text-3);
-	font-size: 0.85em;
-	line-height: var(--top-forms-option-height);
-}
-
-.top-checkbox {
-	cursor: pointer;
-	display: inline-flex;
-}
-.top-checkbox_input {
-	cursor: inherit;
-	border-radius: 4px;
-	background: var(--content-background-color);
-	border: 1px solid var(--top-forms-border-color);
-	width: calc(var(--top-forms-option-height) - 3px * 2);
-	height: calc(var(--top-forms-option-height) - 3px * 2);
-}
-.top-checkbox_input:before {
-	content: ' ';
-	color: #FFF;
-	font-family: 'Topvisor-2';
-	font-size: 16px;
-}
-.top-checkbox_input:hover {
-	border-color: var(--top-forms-option-color);
-	background: var(--color-theme-50)
-}
-
-/* checked / indeterminate */
-.top-checkbox_input:checked,
-.top-checkbox_input:indeterminate {
-	border-color: var(--top-forms-option-color);
-	background: var(--top-forms-option-color);
-}
-.top-checkbox_input:checked:before {
-	content: '';
-}
-.top-checkbox_input:indeterminate:before {
-	content: '';
-}
-.top-checkbox_input:checked:hover,
-.top-checkbox_input:indeterminate:hover {
-	border-color: var(--top-forms-option-color-hover);
-	background: var(--top-forms-option-color-hover);
-}
-
-/* disabled selected */
-.top-checkbox_input:disabled {
-	border-color: var(--color-line-1-opacity);
-	background: var(--color-theme-50);
-}
-.top-checkbox_input:checked:disabled,
-.top-checkbox_input:indeterminate:disabled {
-	border-color: transparent;
-	background: var(--color-theme-400);
-}
-
-/* isError */
-.top-checkbox_input.top-error {
-	border-color: var(--color-negative);
-}
-.top-checkbox_input.top-error:hover {
-	border-color: var(--color-negative-2);
-}
-
-/* isError selected */
-.top-checkbox_input:checked.top-error,
-.top-checkbox_input:indeterminate.top-error {
-	background: var(--color-negative);
-}
-.top-checkbox_input:checked.top-error:hover,
-.top-checkbox_input:indeterminate.top-error:hover {
-	background: var(--color-negative-2);
-}
-
-.top-input {
-	width: 180px;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--top-gap-1);
-}
-.top-input_input {
-	background: var(--top-forms-background-color);
-}
-.top-input_input:hover {
-	background: var(--top-forms-background-color-hover);
-}
-.top-input_input:focus {
-	outline-color: var(--color-theme-75);
-	outline-offset: 0px;
-}
-.top-input-withCleaner .top-input_input:not(:placeholder-shown) {
-	--top-forms_clear-width: 24px;
-}
-
-/* TODO: перенести в inputsRange */
-.top-input_input {
-	width: 50%;
-	flex-grow: 1;
-}
-.top-input[data-top-icon]:before {
-	--top-icon-color: var(--color-text-secondary);
-}
-
-:root {
-	--top-radio-background-color: var(--content-background-color);
-	--top-radio-background-color-hover: var(--top-radio-background-color);
-	--top-radio-background-color-active: var(--top-radio-background-color);
-}
-.top-radio {
-	cursor: pointer;
-}
-.top-radio_input {
-	border-radius: 50%;
-	background: var(--content-background-color);
-	border: 1px solid var(--top-forms-border-color);
-	width: calc(var(--top-forms-option-height) - 3px * 2);
-	height: calc(var(--top-forms-option-height) - 3px * 2);
-}
-.top-radio_input:hover {
-	border-color: var(--top-forms-option-color);
-	background: var(--color-theme-50)
-}
-.top-radio_input:checked {
-	border-color: var(--top-forms-option-color);
-	border-width: 5px;
-}
-.top-radio_input:checked:hover {
-	border-color: var(--top-forms-option-color-hover);
-}
-
-/* disabled */
-.top-radio_input:disabled {
-	border-color: var(--color-line-1-opacity);
-	background: var(--color-theme-50);
-}
-
-/* disabled selected */
-.top-radio_input:checked:disabled {
-	border-color: var(--color-theme-400);
-}
-
-/* isError */
-.top-radio_input.top-error {
-	border-color: var(--color-negative);
-}
-.top-radio_input.top-error:hover {
-	border-color: var(--color-negative-2);
-}
-
-.top-checkboxSwitcher {
-	cursor: pointer;
-	display: inline-flex;
-	gap: 4px;
-}
-.top-checkboxSwitcher_input {
-	border-radius: 9px;
-	border: none;
-	background: var(--color-theme-100);
-	width: 36px;
-	height: 18px;
-	position: relative;
-}
-.top-checkboxSwitcher_input:before {
-	content: '';
-	border-radius: 50%;
-	background: var(--color-white);
-	width: 12px;
-	height: 12px;
-	margin: 3px;
-	position: absolute;
-	top: 0;
-	left: 0;
-
-	transition: left 0.1s;
-}
-.top-checkboxSwitcher_input:hover {
-	background: var(--color-theme-150);
-}
-
-/* checked */
-.top-checkboxSwitcher_input:checked {
-	background: var(--top-forms-option-color);
-}
-.top-checkboxSwitcher_input:checked:hover {
-	background: var(--top-forms-option-color-hover);
-}
-.top-checkboxSwitcher_input:checked:before {
-	left: 50%;
-}
-
-/* disabled */
-.top-checkboxSwitcher_input:disabled {
-	background: var(--color-theme-400);
-}
-
-/* isError */
-.top-checkboxSwitcher_input.top-error {
-	background: var(--color-negative);
-}
-.top-checkboxSwitcher_input.top-error:hover {
-	background: var(--color-negative-2);
-}
+.top-button{cursor:pointer;box-sizing:border-box;box-shadow:var(--top-button-box-shadow);border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);background-color:var(--top-button-background-color);height:var(--top-forms-base-height);padding:0 var(--top-forms-padding);color:var(--top-button-color);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s,box-shadow .15s}.top-button:hover{box-shadow:var(--top-button-box-shadow-hover);background-color:var(--top-button-background-color-hover)}.top-button:active{box-shadow:var(--top-button-box-shadow-active);background-color:var(--top-button-background-color-active)}.top-button.top-active{box-shadow:var(--top-button-box-shadow-selected);background-color:var(--top-button-background-color-selected)}.top-button.top-button-progress{cursor:help;box-shadow:inset #00000080 0 0 64px;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:32px 32px;animation:_progress_1f1nw_1 1s linear infinite}@keyframes _progress_1f1nw_1{0%{background-position-x:0px}to{background-position-x:32px}}a.top-button,button.top-button{min-width:100px;text-decoration:none}a.top-button,a.top-button:hover{min-width:var(--top-forms-base-height);text-decoration:none}.top-button[data-top-icon]:not(:empty),.top-button[data-top-icon2]:not(:empty){justify-content:flex-start;text-align:left}.top-button[data-top-icon]{padding-left:0}.top-button[data-top-icon2]{padding-right:var(--top-select_arrow-width)}.top-button[data-top-icon2]:after{margin-left:auto}.top-button:empty{min-width:var(--top-forms-base-height)}.top-button[data-top-icon]:empty,.top-button[data-top-icon2]:empty{padding:0}.top-button.top-color_blue{--top-button-background-color: var(--color-blue-500)}.top-button.top-color_green{--top-button-background-color: var(--color-green-500)}.top-button.top-color_orange{--top-button-background-color: var(--color-orange-500)}.top-button.top-color_red{--top-button-background-color: var(--color-red-500)}.top-button.top-color_pink{--top-button-background-color: var(--color-pink-500)}.top-button.top-color_theme{--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);--top-button-color: var(--color-text-1);--top-button-background-color: transparent;--top-button-background-color-hover: var(--color-secondary-opacity);--top-button-background-color-active: var(--color-secondary-2-opacity);--top-button-background-color-selected: var(--color-secondary-2-opacity)}.top-button.top-color_theme.top-active{--top-icon-color: var(--color-text-2)}.top-button.top-style_outline{--top-button-box-shadow: none;--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-forms-border-color: var(--top-style_outline-color);--top-style_outline-color: var(--color-steel-400);--top-button-color: var(--top-style_outline-color);--top-button-background-color: var(--content-background-color);--top-button-background-color-hover: var(--color-theme-100);--top-button-background-color-active: var(--color-theme-150);--top-button-background-color-selected: var(--color-theme-125);--top-forms-border-width: 1px}.top-button.top-style_outline.top-color_theme{--top-button-color: var(--color-text)}.top-button.top-style_outline.top-color_blue{--top-style_outline-color: var(--color-blue-500)}.top-button.top-style_outline.top-color_green{--top-style_outline-color: var(--color-green-500)}.top-button.top-style_outline.top-color_orange{--top-style_outline-color: var(--color-orange-500)}.top-button.top-style_outline.top-color_red{--top-style_outline-color: var(--color-red-500)}.top-button.top-style_outline.top-color_pink{--top-style_outline-color: var(--color-pink-500)}.top-button.top-style_soft{--top-shadow-darken: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: var(--color-secondary-opacity);--top-button-background-color-hover: var(--color-secondary-2-opacity);--top-button-background-color-active: var(--color-secondary-3-opacity);--top-button-background-color-selected: var(--color-secondary-3-opacity)}.top-button.top-style_soft.top-color_blue{--top-button-color: var(--color-blue-500)}.top-button.top-style_soft.top-color_orange{--top-button-color: var(--color-orange-500)}.top-button.top-style_soft.top-color_green{--top-button-color: var(--color-green-500)}.top-button.top-style_soft.top-color_red{--top-button-color: var(--color-red-500)}.top-button.top-style_soft.top-color_pink{--top-button-color: var(--color-pink-500)}.top-button.top-style_transparent{--top-shadow-darken: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: transparent;--top-button-background-color-hover: transparent;--top-button-background-color-active: transparent;--top-button-background-color-selected: var(--color-steel-200)}.top-button.top-style_transparent:hover{opacity:.8}.top-button.top-style_transparent.top-color_blue{--top-button-color: var(--color-blue-450)}.top-button.top-style_transparent.top-color_green{--top-button-color: var(--color-green-450)}.top-button.top-style_transparent.top-color_orange{--top-button-color: var(--color-orange-450)}.top-button.top-style_transparent.top-color_red{--top-button-color: var(--color-red-450)}.top-button.top-style_transparent.top-color_pink{--top-button-color: var(--color-pink-450)}.top-button{--top-button-color: var(--color-white);--top-button-background-color: transparent;--top-button-background-color-hover: var(--top-button-background-color);--top-button-background-color-active: var(--top-button-background-color-hover);--top-button-background-color-selected: var(--top-button-background-color-hover);--top-button-box-shadow: none;--top-button-box-shadow-hover: var(--top-shadow-darken-2);--top-button-box-shadow-active: var(--top-shadow-darken-3);--top-button-box-shadow-selected: var(--top-shadow-darken-3);--top-forms-border-width: 0px;--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding))}.top-button.top-size_l{--top-forms-padding: var(--top-forms-padding_l);--top-forms-base-height: var(--top-forms-base-height_l)}.top-button.top-size_xl{--top-forms-padding: var(--top-forms-padding_xl);--top-forms-base-height: var(--top-forms-base-height_xl)}.top-forms-optionLabel{flex-grow:1}.top-forms-optionLabel_title{min-height:var(--top-forms-option-height);display:flex;align-items:center}.top-forms-optionLabel_title-disabled{color:var(--color-text-3)}.top-forms-optionLabel_description{color:var(--color-text-3);font-size:.85em;line-height:var(--top-forms-option-height)}.top-checkbox{cursor:pointer;display:inline-flex}.top-checkbox_input{cursor:inherit;border-radius:4px;background:var(--content-background-color);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-checkbox_input:before{content:" ";color:#fff;font-family:Topvisor-2;font-size:16px}.top-checkbox_input:hover{border-color:var(--top-forms-option-color);background:var(--color-theme-50)}.top-checkbox_input:checked,.top-checkbox_input:indeterminate{border-color:var(--top-forms-option-color);background:var(--top-forms-option-color)}.top-checkbox_input:checked:before{content:""}.top-checkbox_input:indeterminate:before{content:""}.top-checkbox_input:checked:hover,.top-checkbox_input:indeterminate:hover{border-color:var(--top-forms-option-color-hover);background:var(--top-forms-option-color-hover)}.top-checkbox_input:disabled{border-color:var(--color-line-1-opacity);background:var(--color-theme-50)}.top-checkbox_input:checked:disabled,.top-checkbox_input:indeterminate:disabled{border-color:transparent;background:var(--color-theme-400)}.top-checkbox_input.top-error{border-color:var(--color-negative)}.top-checkbox_input.top-error:hover{border-color:var(--color-negative-2)}.top-checkbox_input:checked.top-error,.top-checkbox_input:indeterminate.top-error{background:var(--color-negative)}.top-checkbox_input:checked.top-error:hover,.top-checkbox_input:indeterminate.top-error:hover{background:var(--color-negative-2)}.top-hint{--top-icon-size: 16px;--top-icon-width: var(--top-icon-size);border-radius:50%;background:var(--content-background-color);padding:1px;color:var(--color-text-4);line-height:1;z-index:1;pointer-events:all}.top-hint:hover{color:var(--color-text-3)}.top-input{--top-forms_clear-width: 0px;width:180px;position:relative;display:inline-flex;align-items:center;gap:var(--top-gap-1)}.top-input_input{background:var(--top-forms-background-color);height:var(--top-forms-base-height);padding:0;padding-right:max(var(--top-forms-padding),calc(var(--top-icon2-width) + var(--top-forms_clear-width)));padding-left:max(var(--top-forms-padding),var(--top-icon-width))}.top-input_input:hover{background:var(--top-forms-background-color-hover)}.top-input_input:focus{outline-color:var(--color-theme-75);outline-offset:0}.top-input[data-top-icon]:before,.top-input[data-top-icon2]:after{--top-icon-color: var(--color-text-secondary);--top-icon2-color: var(--color-text-secondary);position:absolute;z-index:3}.top-input[data-top-icon]:before{left:0}.top-input[data-top-icon2]:after{right:0}.top-input-withCleaner{--top-forms_clear-width: 24px}.top-input_cleaner{--top-icon-size: 20px;--top-icon-width: 20px;--top-icon-color: var(--color-text-3);cursor:pointer;border-radius:50%;width:24px;height:24px;position:absolute;right:calc(var(--top-forms-border-width) + max(var(--top-icon2-width),var(--top-forms-padding) / 2));z-index:1;display:flex;align-items:center;justify-content:center}.top-input_cleaner:hover{--top-icon-color: var(--color-text-2)}.top-input_input{width:50%;flex-grow:1}.top-input-datepicker{width:calc(105px + var(--top-icon-width) + var(--top-icon2-width))}.top-input_input-date{opacity:0;position:absolute;inset:0;z-index:-1}.top-input_input-date::-webkit-inner-spin-button{display:none}.top-input_input-date::-webkit-calendar-picker-indicator{opacity:0}:root{--top-radio-background-color: var(--content-background-color);--top-radio-background-color-hover: var(--top-radio-background-color);--top-radio-background-color-active: var(--top-radio-background-color)}.top-radio{cursor:pointer}.top-radio_input{border-radius:50%;background:var(--content-background-color);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-radio_input:hover{border-color:var(--top-forms-option-color);background:var(--color-theme-50)}.top-radio_input:checked{border-color:var(--top-forms-option-color);border-width:5px}.top-radio_input:checked:hover{border-color:var(--top-forms-option-color-hover)}.top-radio_input:disabled{border-color:var(--color-line-1-opacity);background:var(--color-theme-50)}.top-radio_input:checked:disabled{border-color:var(--color-theme-400)}.top-radio_input.top-error{border-color:var(--color-negative)}.top-radio_input.top-error:hover{border-color:var(--color-negative-2)}.top-checkboxSwitcher{cursor:pointer;display:inline-flex;gap:4px}.top-checkboxSwitcher_input{border-radius:9px;border:none;background:var(--color-theme-100);width:36px;height:18px;position:relative}.top-checkboxSwitcher_input:before{content:"";border-radius:50%;background:var(--color-white);width:12px;height:12px;margin:3px;position:absolute;top:0;left:0;transition:left .1s}.top-checkboxSwitcher_input:hover{background:var(--color-theme-150)}.top-checkboxSwitcher_input:checked{background:var(--top-forms-option-color)}.top-checkboxSwitcher_input:checked:hover{background:var(--top-forms-option-color-hover)}.top-checkboxSwitcher_input:checked:before{left:50%}.top-checkboxSwitcher_input:disabled{background:var(--color-theme-400)}.top-checkboxSwitcher_input.top-error{background:var(--color-negative)}.top-checkboxSwitcher_input.top-error:hover{background:var(--color-negative-2)}.top-textarea{width:180px;display:inline-flex;align-items:center;position:relative}.top-textarea_textarea{background:var(--top-forms-background-color);width:100%;padding:var(--top-forms-padding);resize:none}.top-textarea_textarea:hover{background:var(--top-forms-background-color-hover)}.top-textarea_textarea:focus{outline-color:var(--color-theme-75);outline-offset:0px}.top-textarea_textarea.top-textarea_textarea-expandable{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.top-textarea_pseudoContent{box-sizing:border-box;min-height:var(--c838a038);padding:var(--top-forms-padding);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;opacity:0;z-index:-1}.top-textarea_hint{position:absolute;top:2px;right:2px}.top-select{--top-icon-color: var(--color-text-3);--top-icon2-color: var(--color-text-2);height:auto;width:180px;min-height:var(--top-forms-base-height);max-width:100%;vertical-align:middle;display:inline-flex;align-items:center;cursor:pointer}.top-select-error{--top-icon-color: var(--color-negative);--top-icon2-color: var(--color-negative)}.top-select_select{background-color:var(--top-forms-background-color);padding-left:var(--top-forms-padding);text-indent:clamp(0px,calc(var(--top-icon-both-width) - var(--top-forms-padding)),calc(var(--top-icon-both-width) - var(--top-forms-padding)));width:100%;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;overflow:hidden}.top-select_select:focus{outline-color:var(--color-theme-75);outline-offset:0px}.top-select_select:disabled{background:var(--color-theme-50)}.top-select optgroup{color:var(--color-text-1);font-style:normal}.top-select option{background:var(--content-background-color);color:var(--color-text-1)}@-moz-document url-prefix(){.top-select_select{text-indent:calc(clamp(0px,calc(var(--top-icon-both-width) - var(--top-forms-padding)),calc(var(--top-icon-both-width) - var(--top-forms-padding)))/2)}}@media only screen and (min-width: 900px){.top-select_changer{border-radius:100%;width:0;transform:translate(-44px);color:var(--color-text-secondary-2);font-size:16px;line-height:1;display:none;z-index:2;order:4}.top-select_changer:hover{color:var(--color-primary)}.top-select_changer:after{content:"";background-color:var(--top-forms-background-color);font-family:Topvisor-2}.top-select:hover>.top-select_changer{display:block}}

package/formsExt/formsExt.amd.js

@@ -0,0 +1,3 @@
+define(["exports","vue","../.chunks/forms-cab135c7.amd"],function(m,e,d){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;var f=document.createElement("style");f.textContent=`.top-editArea{display:flex;flex-direction:column;gap:6px}.top-editArea_title{font-size:12px}.top-editArea_form{background:var(--top-forms-background-color);outline-color:var(--color-theme-75);outline-offset:0;display:flex;flex-direction:column}.top-editArea_form:hover{background:var(--top-forms-background-color-hover)}.top-textarea{width:100%}.top-editArea_element.top-textarea_textarea{border:none;outline:none;animation:none}.top-editArea_footer{padding:var(--top-forms-padding);display:flex;justify-content:flex-end;gap:var(--top-forms-padding)}.top-editArea-attachedToKeyboard{background:var(--top-forms-background-color);margin-bottom:env(keyboard-inset-height,0);position:fixed;bottom:0;right:0;left:0;z-index:2;gap:0}.top-editArea-attachedToKeyboard .top-editArea_form{border-radius:0;border:none;border-top:1px solid var(--top-forms-border-color)}.top-editArea-attachedToKeyboard .top-editArea_title{border-top:1px solid var(--color-line-2-opacity);padding:var(--top-forms-padding)}.top-editArea-attachedToKeyboard .top-editArea_footer>[data-top-icon]{border-radius:100%}.top-editInput{width:220px;flex-grow:1;display:flex;align-items:flex-end;gap:var(--top-gap-1)}.top-editInput .top-input{width:unset;flex-grow:1}
+`,document.head.appendChild(f);const y={key:0,class:"top-editArea_title"},b={class:"top-editArea_footer"},h=e.defineComponent({__name:"editArea",props:{modelValue:{},title:{},cancelText:{default:"Отмена"},submitText:{default:"Отправить"},attachToKeyboard:{type:Boolean},name:{},placeholder:{},rows:{},minHeight:{},expandable:{type:Boolean,default:!0},disabled:{type:Boolean},readonly:{type:Boolean},isError:{type:Boolean},hint:{}},emits:["update:modelValue","cancel"],setup(u,{emit:c}){const l=u,o=e.ref(""),a=e.ref(l.modelValue);e.watch(e.toRef(l,"modelValue"),()=>{a.value=l.modelValue});const n=e.computed(()=>a.value!==l.modelValue),i=t=>{c("update:modelValue",t)},p=()=>{c("cancel"),a.value=l.modelValue};return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-editArea":!0,"top-editArea-attachedToKeyboard":t.attachToKeyboard})},[t.title?(e.openBlock(),e.createElementBlock("div",y,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({"top-editArea_form":!0,"top-error":t.isError,"top-focus":o.value=="focus"})},[e.createVNode(d.Textarea,{modelValue:a.value,"onUpdate:modelValue":r[0]||(r[0]=s=>a.value=s),name:t.name,placeholder:t.placeholder,rows:t.rows,minHeight:t.minHeight,expandable:t.expandable,disabled:t.disabled,readonly:t.readonly,isError:t.isError,hint:t.hint,class:"top-editArea_element",onFocus:r[1]||(r[1]=s=>o.value="focus"),onBlur:r[2]||(r[2]=s=>o.value=""),onKeyup:[e.withKeys(p,["esc"]),r[3]||(r[3]=e.withKeys(e.withModifiers(s=>i(a.value),["ctrl"]),["enter"]))]},null,8,["modelValue","name","placeholder","rows","minHeight","expandable","disabled","readonly","isError","hint","onKeyup"]),e.createElementVNode("div",b,[n.value&&(!t.attachToKeyboard||t.modelValue)?(e.openBlock(),e.createBlock(d.Button,{key:0,class:"top-editArea_button",color:"theme",icon:t.attachToKeyboard?"":"",onClick:p},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.attachToKeyboard?"":t.cancelText),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0),e.createVNode(d.Button,{class:"top-editArea_button",icon:t.attachToKeyboard?"":"",onClick:r[4]||(r[4]=s=>i(a.value))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.attachToKeyboard?"":t.submitText),1)]),_:1},8,["icon"])])],2)],2))}}),A={$style:{"top-editArea":"top-editArea","top-editArea_title":"top-editArea_title","top-editArea_form":"top-editArea_form","top-textarea":"top-textarea","top-editArea_element":"top-editArea_element","top-textarea_textarea":"top-textarea_textarea","top-editArea_footer":"top-editArea_footer","top-editArea-attachedToKeyboard":"top-editArea-attachedToKeyboard"}},g=d._export_sfc(h,[["__cssModules",A]]),V={class:"top-editInput"},k=e.defineComponent({__name:"editInput",props:{modelValue:{},input:{},button:{}},emits:["update:modelValue"],setup(u,{emit:c}){const l=u,o=e.ref(l.modelValue);e.watch(e.toRef(l.modelValue),()=>{o.value=l.modelValue});const a=()=>{c("update:modelValue",o.value)};return(n,i)=>(e.openBlock(),e.createElementBlock("div",V,[e.createVNode(d.Input,e.mergeProps(n.input,{onKeydownCapture:i[0]||(i[0]=e.withKeys(e.withModifiers(p=>o.value=n.modelValue,["stop"]),["esc"])),onKeydown:e.withKeys(e.withModifiers(a,["stop"]),["enter"]),modelValue:o.value,"onUpdate:modelValue":i[1]||(i[1]=p=>o.value=p)}),null,16,["onKeydown","modelValue"]),o.value!==n.modelValue?(e.openBlock(),e.createBlock(d.Button,e.mergeProps({key:0,icon:"",styling:"soft"},n.button,{onClick:a}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},16)):e.createCommentVNode("",!0)]))}}),w={$style:{"top-editInput":"top-editInput","top-input":"top-input"}},K=d._export_sfc(k,[["__cssModules",w]]);m.EditArea=g,m.EditInput=K,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=formsExt.amd.js.map

package/formsExt/formsExt.amd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formsExt.amd.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { ref, toRef, watch } from 'vue';\r\nimport type { Props, Emits } from './editInput';\r\nimport Input from '@/components/forms/input/input.vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\n\r\nconst props = defineProps<Props>();\r\n\r\nconst intermediateValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props.modelValue), () => {\r\n\tintermediateValue.value = props.modelValue;\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst submit = () => {\r\n\temit('update:modelValue', intermediateValue.value);\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"top-editInput\">\r\n\t\t<Input\r\n\t\t\t:=\"input\"\r\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\r\n\t\t\t@keydown.enter.stop=\"submit\"\r\n\t\t\tv-model=\"intermediateValue\"\r\n\t\t/>\r\n\r\n\t\t<Button\r\n\t\t\tv-if=\"intermediateValue !== modelValue\"\r\n\t\t\ticon=\"\"\r\n\t\t\tstyling=\"soft\"\r\n\t\t\t:=\"button\"\r\n\t\t\t@click=\"submit\"\r\n\t\t>\r\n\t\t\t<!-- @slot Слот Button -->\r\n\t\t\t<slot></slot>\r\n\t\t</Button>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editInput {\r\n\twidth: 220px;\r\n\tflex-grow: 1;\r\n\tdisplay: flex;\r\n\talign-items: flex-end;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-editInput .top-input {\r\n\twidth: unset;\r\n\tflex-grow: 1;\r\n}\r\n</style>"],"names":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel","intermediateValue"],"mappings":";gfAgBMA,EAAQC,MAAI,EAAE,EAKdC,EAAaD,EAAAA,IAAIE,EAAM,UAAU,EAEvCC,EAAAA,MAAMC,EAAM,MAAAF,EAAO,YAAY,EAAG,IAAM,CACvCD,EAAW,MAAQC,EAAM,UAAA,CACzB,EAED,MAAMG,EAAYC,EAAAA,SAAS,IAAML,EAAW,QAAUC,EAAM,UAAU,EAEhEK,EAAUC,GAAkB,CACjCC,EAAK,oBAAqBD,CAAK,CAAA,EAG1BE,EAAS,IAAM,CACpBD,EAAK,QAAQ,EAGbR,EAAW,MAAQC,EAAM,UAAA,+mEC7BpBS,EAAoBX,EAAAA,IAAIE,EAAM,UAAU,EAE9CC,EAAAA,MAAMC,EAAM,MAAAF,EAAM,UAAU,EAAG,IAAM,CACpCS,EAAkB,MAAQT,EAAM,UAAA,CAChC,EAID,MAAMK,EAAS,IAAM,CACfE,EAAA,oBAAqBE,EAAkB,KAAK,CAAA"}