@retailcrm/embed-ui-v1-components 0.9.15 → 0.9.16

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.
Files changed (70) hide show
  1. package/assets/sprites/map-and-places/navigate.svg +3 -0
  2. package/dist/host.cjs +993 -516
  3. package/dist/host.css +261 -0
  4. package/dist/host.d.ts +222 -112
  5. package/dist/host.js +993 -516
  6. package/dist/remote.cjs +446 -60
  7. package/dist/remote.d.ts +573 -81
  8. package/dist/remote.js +447 -61
  9. package/docs/COMPONENTS.md +3 -0
  10. package/docs/FORMAT.md +19 -0
  11. package/docs/PROFILES.md +2 -0
  12. package/docs/profiles/UiAddButton.yml +12 -0
  13. package/docs/profiles/UiAlert.yml +12 -0
  14. package/docs/profiles/UiAvatar.yml +12 -0
  15. package/docs/profiles/UiAvatarList.yml +12 -0
  16. package/docs/profiles/UiButton.yml +8 -0
  17. package/docs/profiles/UiCalendar.yml +12 -0
  18. package/docs/profiles/UiCheckbox.yml +12 -0
  19. package/docs/profiles/UiCollapse.yml +12 -0
  20. package/docs/profiles/UiCollapseBox.yml +12 -0
  21. package/docs/profiles/UiCollapseGroup.yml +12 -0
  22. package/docs/profiles/UiCopyButton.yml +12 -0
  23. package/docs/profiles/UiDate.yml +12 -0
  24. package/docs/profiles/UiDatePicker.yml +12 -0
  25. package/docs/profiles/UiError.yml +12 -0
  26. package/docs/profiles/UiField.yml +5 -1
  27. package/docs/profiles/UiImage.yml +12 -0
  28. package/docs/profiles/UiInfobox.yml +12 -0
  29. package/docs/profiles/UiLink.yml +12 -0
  30. package/docs/profiles/UiLoader.yml +12 -0
  31. package/docs/profiles/UiMenuItem.yml +12 -0
  32. package/docs/profiles/UiMenuItemGroup.yml +12 -0
  33. package/docs/profiles/UiModalSidebar.yml +12 -0
  34. package/docs/profiles/UiModalWindow.yml +12 -0
  35. package/docs/profiles/UiModalWindowSurface.yml +12 -0
  36. package/docs/profiles/UiNumberStepper.yml +12 -0
  37. package/docs/profiles/UiPageHeader.yml +5 -1
  38. package/docs/profiles/UiPopper.yml +5 -1
  39. package/docs/profiles/UiPopperConnector.yml +6 -0
  40. package/docs/profiles/UiPopperTarget.yml +6 -0
  41. package/docs/profiles/UiRadio.yml +12 -0
  42. package/docs/profiles/UiRadioSwitch.yml +7 -0
  43. package/docs/profiles/UiRadioSwitchOption.yml +8 -0
  44. package/docs/profiles/UiScrollBox.yml +12 -0
  45. package/docs/profiles/UiSelect.yml +9 -0
  46. package/docs/profiles/UiSelectOption.yml +12 -0
  47. package/docs/profiles/UiSelectOptionGroup.yml +12 -0
  48. package/docs/profiles/UiSlider.yml +12 -0
  49. package/docs/profiles/UiSwitch.yml +12 -0
  50. package/docs/profiles/UiTab.yml +5 -0
  51. package/docs/profiles/UiTabGroup.yml +5 -0
  52. package/docs/profiles/UiTable.yml +5 -1
  53. package/docs/profiles/UiTableBodyCell.yml +12 -0
  54. package/docs/profiles/UiTableColumn.yml +12 -0
  55. package/docs/profiles/UiTableFooterButton.yml +12 -0
  56. package/docs/profiles/UiTableFooterSection.yml +12 -0
  57. package/docs/profiles/UiTableHeadCell.yml +12 -0
  58. package/docs/profiles/UiTableSorter.yml +12 -0
  59. package/docs/profiles/UiTag.yml +12 -0
  60. package/docs/profiles/UiTextbox.yml +5 -1
  61. package/docs/profiles/UiTimePicker.yml +12 -0
  62. package/docs/profiles/UiToggleButton.yml +211 -0
  63. package/docs/profiles/UiToggleGroup.yml +211 -0
  64. package/docs/profiles/UiToggleGroupOption.yml +116 -0
  65. package/docs/profiles/UiToolbarButton.yml +12 -0
  66. package/docs/profiles/UiToolbarLink.yml +12 -0
  67. package/docs/profiles/UiTooltip.yml +12 -0
  68. package/docs/profiles/UiTransition.yml +12 -0
  69. package/docs/profiles/UiYandexMap.yml +12 -0
  70. package/package.json +2 -2
package/dist/host.css CHANGED
@@ -5169,6 +5169,233 @@
5169
5169
  font-weight: 400;
5170
5170
  line-height: 1.42857143;
5171
5171
  }
5172
+ .ui-v1-toggle-button {
5173
+ --ui-v1-toggle-button-height: 36px;
5174
+ --ui-v1-toggle-button-min-width: 96px;
5175
+ --ui-v1-toggle-button-padding-x: 12px;
5176
+ --ui-v1-toggle-button-radius: 6px;
5177
+ --ui-v1-toggle-button-icon-size: 16px;
5178
+ --ui-v1-toggle-button-content-gap: 6px;
5179
+ --ui-v1-toggle-button-background: white;
5180
+ --ui-v1-toggle-button-background-hover: #F9FAFB;
5181
+ --ui-v1-toggle-button-background-pressed: #005EEB;
5182
+ --ui-v1-toggle-button-background-disabled: #F4F6F8;
5183
+ --ui-v1-toggle-button-background-pressed-disabled: #B8DBFF;
5184
+ --ui-v1-toggle-button-background-pressed-hover: #0052CC;
5185
+ --ui-v1-toggle-button-border-color: #C7CDD4;
5186
+ --ui-v1-toggle-button-border-hover: #005EEB;
5187
+ --ui-v1-toggle-button-border-pressed: #005EEB;
5188
+ --ui-v1-toggle-button-border-disabled: #DEE2E6;
5189
+ --ui-v1-toggle-button-border-pressed-disabled: #B8DBFF;
5190
+ --ui-v1-toggle-button-border-pressed-hover: #0052CC;
5191
+ --ui-v1-toggle-button-text-color: #1E2248;
5192
+ --ui-v1-toggle-button-text-hover: #0052CC;
5193
+ --ui-v1-toggle-button-text-pressed: white;
5194
+ --ui-v1-toggle-button-text-disabled: #8A96A6;
5195
+ --ui-v1-toggle-button-text-pressed-disabled: white;
5196
+ --ui-v1-toggle-button-text-pressed-hover: white;
5197
+ --ui-v1-toggle-button-focus-color: rgba(0, 94, 235, 0.12);
5198
+ display: inline-flex;
5199
+ align-items: center;
5200
+ justify-content: center;
5201
+ min-width: var(--ui-v1-toggle-button-min-width);
5202
+ height: var(--ui-v1-toggle-button-height);
5203
+ padding: 0 var(--ui-v1-toggle-button-padding-x);
5204
+ box-sizing: border-box;
5205
+ border: 1px solid var(--ui-v1-toggle-button-border-color);
5206
+ border-radius: var(--ui-v1-toggle-button-radius);
5207
+ background: var(--ui-v1-toggle-button-background);
5208
+ color: var(--ui-v1-toggle-button-text-color);
5209
+ cursor: pointer;
5210
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Roboto", sans-serif;
5211
+ text-align: center;
5212
+ text-decoration: none;
5213
+ transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
5214
+ user-select: none;
5215
+ vertical-align: top;
5216
+ appearance: none;
5217
+ }
5218
+ .ui-v1-toggle-button svg {
5219
+ fill: currentColor;
5220
+ }
5221
+ .ui-v1-toggle-button,
5222
+ .ui-v1-toggle-button:active,
5223
+ .ui-v1-toggle-button:focus {
5224
+ outline: none !important;
5225
+ }
5226
+ .ui-v1-toggle-button:focus-visible {
5227
+ box-shadow: 0 0 0 4px var(--ui-v1-toggle-button-focus-color);
5228
+ position: relative;
5229
+ z-index: 2;
5230
+ }
5231
+ .ui-v1-toggle-button_focused {
5232
+ box-shadow: 0 0 0 4px var(--ui-v1-toggle-button-focus-color);
5233
+ position: relative;
5234
+ z-index: 2;
5235
+ }
5236
+ .ui-v1-toggle-button:active {
5237
+ box-shadow: none;
5238
+ }
5239
+ .ui-v1-toggle-button:hover:not(:disabled):not(.ui-v1-toggle-button_pressed) {
5240
+ background: var(--ui-v1-toggle-button-background-hover);
5241
+ border-color: var(--ui-v1-toggle-button-border-hover);
5242
+ color: var(--ui-v1-toggle-button-text-hover);
5243
+ }
5244
+ .ui-v1-toggle-button_pressed {
5245
+ background: var(--ui-v1-toggle-button-background-pressed);
5246
+ border-color: var(--ui-v1-toggle-button-border-pressed);
5247
+ color: var(--ui-v1-toggle-button-text-pressed);
5248
+ position: relative;
5249
+ z-index: 1;
5250
+ }
5251
+ .ui-v1-toggle-button_pressed:hover:not(:disabled) {
5252
+ background: var(--ui-v1-toggle-button-background-pressed-hover);
5253
+ border-color: var(--ui-v1-toggle-button-border-pressed-hover);
5254
+ color: var(--ui-v1-toggle-button-text-pressed-hover);
5255
+ }
5256
+ .ui-v1-toggle-button:disabled,
5257
+ .ui-v1-toggle-button_disabled {
5258
+ background: var(--ui-v1-toggle-button-background-disabled);
5259
+ border-color: var(--ui-v1-toggle-button-border-disabled);
5260
+ color: var(--ui-v1-toggle-button-text-disabled);
5261
+ cursor: default;
5262
+ }
5263
+ .ui-v1-toggle-button_pressed:disabled,
5264
+ .ui-v1-toggle-button_pressed.ui-v1-toggle-button_disabled {
5265
+ background: var(--ui-v1-toggle-button-background-pressed-disabled);
5266
+ border-color: var(--ui-v1-toggle-button-border-pressed-disabled);
5267
+ color: var(--ui-v1-toggle-button-text-pressed-disabled);
5268
+ }
5269
+ .ui-v1-toggle-button_lg {
5270
+ --ui-v1-toggle-button-height: 56px;
5271
+ --ui-v1-toggle-button-min-width: 128px;
5272
+ --ui-v1-toggle-button-padding-x: 16px;
5273
+ --ui-v1-toggle-button-radius: 8px;
5274
+ --ui-v1-toggle-button-icon-size: 32px;
5275
+ --ui-v1-toggle-button-content-gap: 8px;
5276
+ font-size: 18px;
5277
+ font-weight: 500;
5278
+ line-height: normal;
5279
+ }
5280
+ .ui-v1-toggle-button_md {
5281
+ --ui-v1-toggle-button-height: 48px;
5282
+ --ui-v1-toggle-button-min-width: 128px;
5283
+ --ui-v1-toggle-button-padding-x: 14px;
5284
+ --ui-v1-toggle-button-radius: 8px;
5285
+ --ui-v1-toggle-button-icon-size: 24px;
5286
+ --ui-v1-toggle-button-content-gap: 8px;
5287
+ font-size: 16px;
5288
+ font-weight: 500;
5289
+ line-height: normal;
5290
+ }
5291
+ .ui-v1-toggle-button_sm {
5292
+ --ui-v1-toggle-button-height: 36px;
5293
+ --ui-v1-toggle-button-min-width: 96px;
5294
+ --ui-v1-toggle-button-padding-x: 12px;
5295
+ --ui-v1-toggle-button-radius: 6px;
5296
+ --ui-v1-toggle-button-icon-size: 16px;
5297
+ --ui-v1-toggle-button-content-gap: 6px;
5298
+ font-size: 14px;
5299
+ font-weight: 500;
5300
+ line-height: normal;
5301
+ }
5302
+ .ui-v1-toggle-button_xs {
5303
+ --ui-v1-toggle-button-height: 24px;
5304
+ --ui-v1-toggle-button-min-width: 72px;
5305
+ --ui-v1-toggle-button-padding-x: 8px;
5306
+ --ui-v1-toggle-button-radius: 4px;
5307
+ --ui-v1-toggle-button-icon-size: 16px;
5308
+ --ui-v1-toggle-button-content-gap: 6px;
5309
+ font-size: 12px;
5310
+ font-weight: 500;
5311
+ line-height: normal;
5312
+ letter-spacing: 0;
5313
+ }
5314
+ .ui-v1-toggle-button_grouped {
5315
+ flex: 1 1 auto;
5316
+ min-width: 0;
5317
+ border-radius: 0;
5318
+ }
5319
+ .ui-v1-toggle-button_grouped:not(:first-child) {
5320
+ margin-left: -1px;
5321
+ }
5322
+ .ui-v1-toggle-button_grouped:first-child {
5323
+ border-bottom-left-radius: var(--ui-v1-toggle-button-radius);
5324
+ border-top-left-radius: var(--ui-v1-toggle-button-radius);
5325
+ }
5326
+ .ui-v1-toggle-button_grouped:last-child {
5327
+ border-bottom-right-radius: var(--ui-v1-toggle-button-radius);
5328
+ border-top-right-radius: var(--ui-v1-toggle-button-radius);
5329
+ }
5330
+ .ui-v1-toggle-button_grouped:hover:not(:disabled),
5331
+ .ui-v1-toggle-button_grouped:focus-visible,
5332
+ .ui-v1-toggle-button_grouped_focused,
5333
+ .ui-v1-toggle-button_grouped_pressed {
5334
+ z-index: 1;
5335
+ }
5336
+ .ui-v1-toggle-button__content {
5337
+ display: flex;
5338
+ align-items: center;
5339
+ justify-content: center;
5340
+ gap: var(--ui-v1-toggle-button-content-gap);
5341
+ width: 100%;
5342
+ min-width: 0;
5343
+ }
5344
+ .ui-v1-toggle-button__icon {
5345
+ flex-shrink: 0;
5346
+ width: var(--ui-v1-toggle-button-icon-size);
5347
+ height: var(--ui-v1-toggle-button-icon-size);
5348
+ }
5349
+ .ui-v1-toggle-button__icon svg {
5350
+ display: block;
5351
+ width: 100%;
5352
+ height: 100%;
5353
+ }
5354
+ .ui-v1-toggle-button__text {
5355
+ overflow: hidden;
5356
+ text-overflow: ellipsis;
5357
+ white-space: nowrap;
5358
+ }
5359
+ .ui-v1-toggle-group {
5360
+ display: flex;
5361
+ align-items: stretch;
5362
+ max-width: 100%;
5363
+ }
5364
+ .ui-v1-toggle-group_rubber {
5365
+ display: inline-flex;
5366
+ }
5367
+ .ui-v1-toggle-group_lg {
5368
+ --ui-v1-toggle-button-height: 56px;
5369
+ --ui-v1-toggle-button-min-width: 128px;
5370
+ --ui-v1-toggle-button-padding-x: 16px;
5371
+ --ui-v1-toggle-button-radius: 8px;
5372
+ --ui-v1-toggle-button-icon-size: 32px;
5373
+ --ui-v1-toggle-button-content-gap: 8px;
5374
+ }
5375
+ .ui-v1-toggle-group_md {
5376
+ --ui-v1-toggle-button-height: 48px;
5377
+ --ui-v1-toggle-button-min-width: 128px;
5378
+ --ui-v1-toggle-button-padding-x: 14px;
5379
+ --ui-v1-toggle-button-radius: 8px;
5380
+ --ui-v1-toggle-button-icon-size: 24px;
5381
+ --ui-v1-toggle-button-content-gap: 8px;
5382
+ }
5383
+ .ui-v1-toggle-group_sm {
5384
+ --ui-v1-toggle-button-height: 36px;
5385
+ --ui-v1-toggle-button-min-width: 96px;
5386
+ --ui-v1-toggle-button-padding-x: 12px;
5387
+ --ui-v1-toggle-button-radius: 6px;
5388
+ --ui-v1-toggle-button-icon-size: 16px;
5389
+ --ui-v1-toggle-button-content-gap: 6px;
5390
+ }
5391
+ .ui-v1-toggle-group_xs {
5392
+ --ui-v1-toggle-button-height: 24px;
5393
+ --ui-v1-toggle-button-min-width: 72px;
5394
+ --ui-v1-toggle-button-padding-x: 8px;
5395
+ --ui-v1-toggle-button-radius: 4px;
5396
+ --ui-v1-toggle-button-icon-size: 16px;
5397
+ --ui-v1-toggle-button-content-gap: 6px;
5398
+ }
5172
5399
  .ui-v1-yandex-map {
5173
5400
  display: flex;
5174
5401
  width: 100%;
@@ -5180,4 +5407,38 @@
5180
5407
  height: 100%;
5181
5408
  border: none;
5182
5409
  position: absolute;
5410
+ inset: 0;
5411
+ }
5412
+ .ui-v1-yandex-map__control-group {
5413
+ display: flex;
5414
+ position: absolute;
5415
+ top: 50%;
5416
+ transform: translateY(-50%);
5417
+ z-index: 1;
5418
+ }
5419
+ .ui-v1-yandex-map__control-group_left {
5420
+ left: 16px;
5421
+ }
5422
+ .ui-v1-yandex-map__control-group_right {
5423
+ right: 16px;
5424
+ flex-direction: column-reverse;
5425
+ }
5426
+ .ui-v1-yandex-map__control-button svg {
5427
+ width: 20px;
5428
+ min-width: 20px;
5429
+ height: 20px;
5430
+ }
5431
+ .ui-v1-yandex-map__control-group_right .ui-v1-yandex-map__control-button {
5432
+ border-radius: 0;
5433
+ }
5434
+ .ui-v1-yandex-map__control-group_right .ui-v1-yandex-map__control-button + .ui-v1-yandex-map__control-button {
5435
+ margin-bottom: -1px;
5436
+ }
5437
+ .ui-v1-yandex-map__control-group_right .ui-v1-yandex-map__control-button:first-child {
5438
+ border-bottom-right-radius: 6px;
5439
+ border-bottom-left-radius: 6px;
5440
+ }
5441
+ .ui-v1-yandex-map__control-group_right .ui-v1-yandex-map__control-button:last-child {
5442
+ border-top-right-radius: 6px;
5443
+ border-top-left-radius: 6px;
5183
5444
  }