@getflip/swirl-components 0.508.0 → 0.510.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +46 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-accordion-item.cjs.entry.js +3 -4
- package/dist/cjs/swirl-card.cjs.entry.js +1 -1
- package/dist/cjs/swirl-chip.cjs.entry.js +2 -2
- package/dist/cjs/swirl-color-input.cjs.entry.js +3 -4
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-console-layout.cjs.entry.js +1 -1
- package/dist/cjs/swirl-data-cell-stack.cjs.entry.js +2 -3
- package/dist/cjs/swirl-data-cell.cjs.entry.js +3 -4
- package/dist/cjs/swirl-date-picker_2.cjs.entry.js +1 -1
- package/dist/cjs/swirl-file-chip.cjs.entry.js +1 -1
- package/dist/cjs/swirl-file-uploader.cjs.entry.js +1 -1
- package/dist/cjs/swirl-file-viewer-audio_7.cjs.entry.js +6 -2
- package/dist/cjs/swirl-icon-check-small_2.cjs.entry.js +3 -4
- package/dist/cjs/swirl-icon-error_3.cjs.entry.js +1 -1
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +1 -1
- package/dist/cjs/swirl-inline-status.cjs.entry.js +1 -1
- package/dist/cjs/swirl-option-list.cjs.entry.js +2 -3
- package/dist/cjs/swirl-pagination.cjs.entry.js +1 -1
- package/dist/cjs/swirl-resource-list-item.cjs.entry.js +4 -5
- package/dist/cjs/swirl-resource-list.cjs.entry.js +2 -3
- package/dist/cjs/swirl-select.cjs.entry.js +1 -1
- package/dist/cjs/swirl-separator.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.js +4 -5
- package/dist/collection/components/swirl-card/swirl-card.css +0 -1
- package/dist/collection/components/swirl-chip/swirl-chip.css +56 -39
- package/dist/collection/components/swirl-chip/swirl-chip.js +20 -1
- package/dist/collection/components/swirl-color-input/swirl-color-input.js +3 -4
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.css +0 -3
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.js +3 -4
- package/dist/collection/components/swirl-data-cell-stack/swirl-data-cell-stack.js +2 -3
- package/dist/collection/components/swirl-date-picker/swirl-date-picker.css +0 -1
- package/dist/collection/components/swirl-file-chip/swirl-file-chip.css +0 -1
- package/dist/collection/components/swirl-file-uploader/swirl-file-uploader.css +0 -4
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.css +0 -2
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.js +25 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css +0 -2
- package/dist/collection/components/swirl-inline-error/swirl-inline-error.css +0 -1
- package/dist/collection/components/swirl-inline-status/swirl-inline-status.css +0 -1
- package/dist/collection/components/swirl-option-list/swirl-option-list.js +2 -3
- package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js +3 -4
- package/dist/collection/components/swirl-pagination/swirl-pagination.css +0 -1
- package/dist/collection/components/swirl-resource-list/swirl-resource-list.js +2 -3
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +0 -1
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +3 -4
- package/dist/collection/components/swirl-select/swirl-select.css +0 -2
- package/dist/collection/components/swirl-separator/swirl-separator.css +0 -1
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css +0 -1
- package/dist/collection/components/swirl-table/swirl-table.css +0 -1
- package/dist/collection/components/swirl-table-cell/swirl-table-cell.css +1 -2
- package/dist/components/swirl-accordion-item.js +1 -1
- package/dist/components/swirl-card.js +1 -1
- package/dist/components/swirl-chip.js +1 -1
- package/dist/components/swirl-color-input.js +1 -1
- package/dist/components/swirl-console-layout.js +1 -1
- package/dist/components/swirl-data-cell-stack.js +1 -1
- package/dist/components/swirl-data-cell.js +1 -1
- package/dist/components/swirl-date-picker2.js +1 -1
- package/dist/components/swirl-file-chip.js +1 -1
- package/dist/components/swirl-file-uploader.js +1 -1
- package/dist/components/swirl-file-viewer-image2.js +1 -1
- package/dist/components/swirl-file-viewer-video2.js +1 -1
- package/dist/components/swirl-image-grid-item.js +1 -1
- package/dist/components/swirl-inline-error2.js +1 -1
- package/dist/components/swirl-inline-status.js +1 -1
- package/dist/components/swirl-option-list-item2.js +1 -1
- package/dist/components/swirl-option-list2.js +1 -1
- package/dist/components/swirl-pagination.js +1 -1
- package/dist/components/swirl-resource-list-item.js +1 -1
- package/dist/components/swirl-resource-list.js +1 -1
- package/dist/components/swirl-select.js +1 -1
- package/dist/components/swirl-separator2.js +1 -1
- package/dist/components/swirl-tab-bar2.js +1 -1
- package/dist/components/swirl-table-cell.js +1 -1
- package/dist/components/swirl-table.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-accordion-item.entry.js +3 -4
- package/dist/esm/swirl-card.entry.js +1 -1
- package/dist/esm/swirl-chip.entry.js +2 -2
- package/dist/esm/swirl-color-input.entry.js +3 -4
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-console-layout.entry.js +1 -1
- package/dist/esm/swirl-data-cell-stack.entry.js +2 -3
- package/dist/esm/swirl-data-cell.entry.js +3 -4
- package/dist/esm/swirl-date-picker_2.entry.js +1 -1
- package/dist/esm/swirl-file-chip.entry.js +1 -1
- package/dist/esm/swirl-file-uploader.entry.js +1 -1
- package/dist/esm/swirl-file-viewer-audio_7.entry.js +6 -2
- package/dist/esm/swirl-icon-check-small_2.entry.js +3 -4
- package/dist/esm/swirl-icon-error_3.entry.js +1 -1
- package/dist/esm/swirl-image-grid-item.entry.js +1 -1
- package/dist/esm/swirl-inline-status.entry.js +1 -1
- package/dist/esm/swirl-option-list.entry.js +2 -3
- package/dist/esm/swirl-pagination.entry.js +1 -1
- package/dist/esm/swirl-resource-list-item.entry.js +4 -5
- package/dist/esm/swirl-resource-list.entry.js +2 -3
- package/dist/esm/swirl-select.entry.js +1 -1
- package/dist/esm/swirl-separator.entry.js +1 -1
- package/dist/esm/swirl-tab-bar.entry.js +1 -1
- package/dist/esm/swirl-table-cell.entry.js +1 -1
- package/dist/esm/swirl-table.entry.js +1 -1
- package/dist/swirl-components/p-0eb845e5.entry.js +1 -0
- package/dist/swirl-components/p-1ad388ee.entry.js +1 -0
- package/dist/swirl-components/{p-bf758fa6.entry.js → p-210445a5.entry.js} +1 -1
- package/dist/swirl-components/{p-f9d6c569.entry.js → p-39d77af2.entry.js} +1 -1
- package/dist/swirl-components/{p-3dbc3b2b.entry.js → p-3bfb288a.entry.js} +1 -1
- package/dist/swirl-components/p-49832cd4.entry.js +1 -0
- package/dist/swirl-components/p-64903416.entry.js +1 -0
- package/dist/swirl-components/p-76e08c22.entry.js +1 -0
- package/dist/swirl-components/{p-1d922b34.entry.js → p-8588b8cc.entry.js} +1 -1
- package/dist/swirl-components/{p-169ca57a.entry.js → p-8f9f7875.entry.js} +1 -1
- package/dist/swirl-components/{p-e7ca6409.entry.js → p-960bf4e2.entry.js} +2 -2
- package/dist/swirl-components/p-98c12f65.entry.js +1 -0
- package/dist/swirl-components/{p-7a165e77.entry.js → p-a28fcb04.entry.js} +1 -1
- package/dist/swirl-components/{p-07b4d869.entry.js → p-a72ee233.entry.js} +1 -1
- package/dist/swirl-components/{p-afbf4b33.entry.js → p-aa397b45.entry.js} +1 -1
- package/dist/swirl-components/{p-0adbfed0.entry.js → p-c2dc914c.entry.js} +1 -1
- package/dist/swirl-components/p-cea23645.entry.js +1 -0
- package/dist/swirl-components/p-cf6fbcee.entry.js +1 -0
- package/dist/swirl-components/{p-358d9e37.entry.js → p-d311b952.entry.js} +1 -1
- package/dist/swirl-components/p-dbd9fcd9.entry.js +1 -0
- package/dist/swirl-components/p-e03007f2.entry.js +1 -0
- package/dist/swirl-components/{p-18b88415.entry.js → p-ea5709c4.entry.js} +1 -1
- package/dist/swirl-components/p-f3e2ce62.entry.js +1 -0
- package/dist/swirl-components/p-ffcb308d.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-chip/swirl-chip.d.ts +1 -0
- package/dist/types/components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.d.ts +2 -0
- package/dist/types/components/swirl-resource-list/swirl-resource-list.d.ts +1 -1
- package/dist/types/components.d.ts +7 -2
- package/package.json +1 -1
- package/vscode-data.json +4 -0
- package/dist/cjs/v4-Bq3ldsQe.js +0 -58
- package/dist/components/v4.js +0 -1
- package/dist/esm/v4-DD3477fe.js +0 -56
- package/dist/swirl-components/p-014d64ac.entry.js +0 -1
- package/dist/swirl-components/p-02146e6a.entry.js +0 -1
- package/dist/swirl-components/p-0becd3e6.entry.js +0 -1
- package/dist/swirl-components/p-1861a24d.entry.js +0 -1
- package/dist/swirl-components/p-30da9575.entry.js +0 -1
- package/dist/swirl-components/p-417819b1.entry.js +0 -1
- package/dist/swirl-components/p-78704082.entry.js +0 -1
- package/dist/swirl-components/p-7a90a64c.entry.js +0 -1
- package/dist/swirl-components/p-DD3477fe.js +0 -1
- package/dist/swirl-components/p-b96b6445.entry.js +0 -1
- package/dist/swirl-components/p-cbabb9fe.entry.js +0 -1
- package/dist/swirl-components/p-d5c9217e.entry.js +0 -1
- package/dist/swirl-components/p-fff2a98f.entry.js +0 -1
|
@@ -4,7 +4,7 @@ var index = require('./index-DfC2lanl.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-UfZG-xPD.js');
|
|
6
6
|
|
|
7
|
-
const swirlSelectCss = () => `.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-
|
|
7
|
+
const swirlSelectCss = () => `.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)));pointer-events:none}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__popover.sc-swirl-select::part(popover__scroll-container),.select__popover.sc-swirl-select [part~="popover__scroll-container"]{padding:0;overflow:hidden;display:flex;flex-direction:column}.select__popover.sc-swirl-select .select__search.sc-swirl-select{flex-shrink:0}.select__popover.sc-swirl-select .select__option-list.sc-swirl-select{padding:var(--s-space-4);overflow:auto;min-height:0}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}`;
|
|
8
8
|
|
|
9
9
|
const SwirlSelect = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
const swirlSeparatorCss = () => `:host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-on-translucent)}.separator__label{flex-shrink:0;width:-
|
|
6
|
+
const swirlSeparatorCss = () => `:host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-on-translucent)}.separator__label{flex-shrink:0;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}`;
|
|
7
7
|
|
|
8
8
|
const SwirlSeparator = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ var index = require('./index-DfC2lanl.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-UfZG-xPD.js');
|
|
6
6
|
|
|
7
|
-
const swirlTabBarCss = () => `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--wrap.sc-swirl-tab-bar{flex-wrap:wrap}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar,.tab-bar--justify-evenly.sc-swirl-tab-bar .tab-bar__tab.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-
|
|
7
|
+
const swirlTabBarCss = () => `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--wrap.sc-swirl-tab-bar{flex-wrap:wrap}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar,.tab-bar--justify-evenly.sc-swirl-tab-bar .tab-bar__tab.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}`;
|
|
8
8
|
|
|
9
9
|
const SwirlTabBar = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
4
|
|
|
5
|
-
const swirlTableCellCss = () => `:host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word
|
|
5
|
+
const swirlTableCellCss = () => `:host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky;z-index:1}:host(.table-cell--is-sticky-right){position:sticky;z-index:1;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}`;
|
|
6
6
|
|
|
7
7
|
const SwirlTableCell = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -89,7 +89,7 @@ function requireDist () {
|
|
|
89
89
|
var distExports = requireDist();
|
|
90
90
|
var debouncePromise = /*@__PURE__*/index.getDefaultExportFromCjs(distExports);
|
|
91
91
|
|
|
92
|
-
const swirlTableCss = () => `.sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba), 2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px var(--swirl-table-shadow-rgba), 0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-
|
|
92
|
+
const swirlTableCss = () => `.sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba), 2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px var(--swirl-table-shadow-rgba), 0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}`;
|
|
93
93
|
|
|
94
94
|
const defaultDragDropInstructions = {
|
|
95
95
|
end: "Dropped. Final position in table: {position} of {rowCount}.",
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
import { v4 as uuid } from "uuid";
|
|
4
3
|
/**
|
|
5
4
|
* @slot slot - The accordion item content.
|
|
6
5
|
* @slot media - Media slot for content to be displayed before the content.
|
|
@@ -9,9 +8,9 @@ import { v4 as uuid } from "uuid";
|
|
|
9
8
|
export class SwirlAccordionItem {
|
|
10
9
|
constructor() {
|
|
11
10
|
this.headingLevel = 2;
|
|
12
|
-
this.itemId =
|
|
11
|
+
this.itemId = crypto.randomUUID();
|
|
13
12
|
this.expanded = false;
|
|
14
|
-
this.headingId = `${
|
|
13
|
+
this.headingId = `${crypto.randomUUID()}-heading`;
|
|
15
14
|
this.onHeadingClick = () => {
|
|
16
15
|
this.toggle();
|
|
17
16
|
};
|
|
@@ -59,7 +58,7 @@ export class SwirlAccordionItem {
|
|
|
59
58
|
const className = classnames("accordion-item", {
|
|
60
59
|
"accordion-item--expanded": this.expanded,
|
|
61
60
|
});
|
|
62
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: 'ed0d988e2fc48f140515cfecc40e543ed40d14cc' }, h("div", { key: 'a1a9bb9a36e5018b0741aa4980659dca503cf128', class: className }, h(HeadingTag, { key: '4919327d90ec3b829aecd9af57601dced379009d', class: "accordion-item__heading" }, h("button", { key: '7d31acbf313e30827703c88027121681f0a0d6b0', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: 'b79a174398448e9fea3407f8d7a4803d5d60d1f5', name: "media" }), h("span", { key: 'f092906ba953c07abdbb1d8159268b92960fdc39', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '827970a298d728085b6ae63be7c8c9d44859bbda', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: '6dc7a6efd5948d2954c4e5dce1ccb04475bee77d', name: "trailing" }), h("span", { key: '5626c5d1a6a8ccaa4c3f20deaeea6d169da05f89', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '7656ce9908d12897902ccc81dbb3b9388f46b292', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '5f9ad2f5dcc97d32f30f1981356ac525286ff8d9', glyph: "expand-more", size: 20 }))))), h("div", { key: '5b32ae5da0caacd8891b74451a2f3aff91d640af', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '50ff36caf14b70bcc79fbf91db1e58ceb0c10a60' })))));
|
|
63
62
|
}
|
|
64
63
|
static get is() { return "swirl-accordion-item"; }
|
|
65
64
|
static get encapsulation() { return "shadow"; }
|
|
@@ -196,7 +195,7 @@ export class SwirlAccordionItem {
|
|
|
196
195
|
"setter": false,
|
|
197
196
|
"reflect": false,
|
|
198
197
|
"attribute": "item-id",
|
|
199
|
-
"defaultValue": "
|
|
198
|
+
"defaultValue": "crypto.randomUUID()"
|
|
200
199
|
}
|
|
201
200
|
};
|
|
202
201
|
}
|
|
@@ -48,19 +48,28 @@
|
|
|
48
48
|
cursor: pointer;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.chip--interactive:
|
|
51
|
+
.chip--interactive:disabled {
|
|
52
|
+
cursor: default;
|
|
53
|
+
color: var(--s-text-disabled);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.chip--interactive:disabled .chip__icon {
|
|
57
|
+
color: var(--s-icon-disabled);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.chip--interactive:hover:not(:disabled) {
|
|
52
61
|
background-color: var(--s-state-hovered);
|
|
53
62
|
}
|
|
54
63
|
|
|
55
|
-
.chip--interactive:hover ::part(avatar) {
|
|
64
|
+
.chip--interactive:hover:not(:disabled) ::part(avatar) {
|
|
56
65
|
background-color: var(--s-surface-raised-hovered);
|
|
57
66
|
}
|
|
58
67
|
|
|
59
|
-
.chip--interactive:active {
|
|
68
|
+
.chip--interactive:active:not(:disabled) {
|
|
60
69
|
background-color: var(--s-state-pressed);
|
|
61
70
|
}
|
|
62
71
|
|
|
63
|
-
.chip--interactive:active ::part(avatar) {
|
|
72
|
+
.chip--interactive:active:not(:disabled) ::part(avatar) {
|
|
64
73
|
background-color: var(--s-surface-raised-pressed);
|
|
65
74
|
}
|
|
66
75
|
|
|
@@ -72,65 +81,65 @@
|
|
|
72
81
|
padding-right: calc(1.875rem + var(--s-space-12));
|
|
73
82
|
}
|
|
74
83
|
|
|
75
|
-
.chip--intent-critical {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.chip--intent-critical .chip__icon {
|
|
81
|
-
color: var(--s-icon-critical);
|
|
84
|
+
.chip--intent-critical:not(:disabled) {
|
|
85
|
+
border-color: var(--s-border-critical);
|
|
86
|
+
color: var(--s-text-critical);
|
|
82
87
|
}
|
|
83
88
|
|
|
89
|
+
.chip--intent-critical:not(:disabled) .chip__icon {
|
|
90
|
+
color: var(--s-icon-critical);
|
|
91
|
+
}
|
|
92
|
+
|
|
84
93
|
.chip--border-radius-sm {
|
|
85
94
|
border-radius: var(--s-border-radius-sm);
|
|
86
95
|
}
|
|
87
96
|
|
|
88
|
-
.chip--intent-success {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.chip--intent-success .chip__icon {
|
|
94
|
-
color: var(--s-icon-success);
|
|
97
|
+
.chip--intent-success:not(:disabled) {
|
|
98
|
+
border-color: var(--s-border-success);
|
|
99
|
+
color: var(--s-text-success);
|
|
95
100
|
}
|
|
96
101
|
|
|
97
|
-
.chip--intent-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
102
|
+
.chip--intent-success:not(:disabled) .chip__icon {
|
|
103
|
+
color: var(--s-icon-success);
|
|
104
|
+
}
|
|
101
105
|
|
|
102
|
-
.chip--intent-highlight
|
|
103
|
-
color: var(--s-
|
|
106
|
+
.chip--intent-highlight:not(:disabled) {
|
|
107
|
+
border-color: var(--s-border-highlight);
|
|
108
|
+
color: var(--s-text-highlight);
|
|
104
109
|
}
|
|
105
110
|
|
|
106
|
-
.chip--
|
|
111
|
+
.chip--intent-highlight:not(:disabled) .chip__icon {
|
|
112
|
+
color: var(--s-icon-highlight);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.chip--variant-outline.chip--pressed:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled) {
|
|
107
116
|
color: var(--s-text-on-action-primary);
|
|
108
117
|
background-color: var(--s-action-primary-default);
|
|
109
118
|
border-color: var(--s-action-primary-default);
|
|
110
119
|
}
|
|
111
120
|
|
|
112
|
-
.chip--variant-outline.chip--pressed .chip__icon, .chip--variant-translucent.chip--pressed .chip__icon {
|
|
121
|
+
.chip--variant-outline.chip--pressed:not(:disabled) .chip__icon, .chip--variant-translucent.chip--pressed:not(:disabled) .chip__icon {
|
|
113
122
|
color: var(--s-text-on-action-primary);
|
|
114
123
|
}
|
|
115
124
|
|
|
116
|
-
.chip--variant-outline.chip--pressed:hover, .chip--variant-translucent.chip--pressed:hover {
|
|
125
|
+
.chip--variant-outline.chip--pressed:not(:disabled):hover:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled):hover:not(:disabled) {
|
|
117
126
|
background-color: var(--s-action-primary-hovered);
|
|
118
127
|
}
|
|
119
128
|
|
|
120
|
-
.chip--variant-outline.chip--pressed:active, .chip--variant-translucent.chip--pressed:active {
|
|
129
|
+
.chip--variant-outline.chip--pressed:not(:disabled):active:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled):active:not(:disabled) {
|
|
121
130
|
background-color: var(--s-action-primary-pressed);
|
|
122
131
|
}
|
|
123
132
|
|
|
124
|
-
.chip--variant-outline.chip--pressed + .chip__remove-button, .chip--variant-translucent.chip--pressed + .chip__remove-button {
|
|
133
|
+
.chip--variant-outline.chip--pressed:not(:disabled) + .chip__remove-button, .chip--variant-translucent.chip--pressed:not(:disabled) + .chip__remove-button {
|
|
125
134
|
color: var(--s-text-on-action-primary);
|
|
126
135
|
background-color: var(--s-action-primary-default);
|
|
127
136
|
}
|
|
128
137
|
|
|
129
|
-
.chip--variant-outline.chip--pressed + .chip__remove-button:hover, .chip--variant-translucent.chip--pressed + .chip__remove-button:hover {
|
|
138
|
+
.chip--variant-outline.chip--pressed:not(:disabled) + .chip__remove-button:hover:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled) + .chip__remove-button:hover:not(:disabled) {
|
|
130
139
|
background-color: var(--s-action-primary-hovered);
|
|
131
140
|
}
|
|
132
141
|
|
|
133
|
-
.chip--variant-outline.chip--pressed + .chip__remove-button:active, .chip--variant-translucent.chip--pressed + .chip__remove-button:active {
|
|
142
|
+
.chip--variant-outline.chip--pressed:not(:disabled) + .chip__remove-button:active:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled) + .chip__remove-button:active:not(:disabled) {
|
|
134
143
|
background-color: var(--s-action-primary-pressed);
|
|
135
144
|
}
|
|
136
145
|
|
|
@@ -140,11 +149,11 @@
|
|
|
140
149
|
backdrop-filter: blur(var(--s-blur-s));
|
|
141
150
|
}
|
|
142
151
|
|
|
143
|
-
.chip--variant-translucent.chip--interactive:hover {
|
|
152
|
+
.chip--variant-translucent.chip--interactive:hover:not(:disabled) {
|
|
144
153
|
background: var(--s-translucent-medium-hovered);
|
|
145
154
|
}
|
|
146
155
|
|
|
147
|
-
.chip--variant-translucent.chip--interactive:active {
|
|
156
|
+
.chip--variant-translucent.chip--interactive:active:not(:disabled) {
|
|
148
157
|
background: var(--s-translucent-medium-pressed);
|
|
149
158
|
}
|
|
150
159
|
|
|
@@ -155,21 +164,21 @@
|
|
|
155
164
|
background-color: transparent;
|
|
156
165
|
}
|
|
157
166
|
|
|
158
|
-
.chip--variant-plain.chip--interactive:hover {
|
|
167
|
+
.chip--variant-plain.chip--interactive:hover:not(:disabled) {
|
|
159
168
|
background-color: transparent;
|
|
160
169
|
text-decoration: underline;
|
|
161
170
|
text-underline-offset: var(--s-space-4);
|
|
162
171
|
}
|
|
163
172
|
|
|
164
|
-
.chip--variant-plain.chip--interactive:hover ::part(avatar) {
|
|
173
|
+
.chip--variant-plain.chip--interactive:hover:not(:disabled) ::part(avatar) {
|
|
165
174
|
background-color: var(--s-surface-raised-hovered);
|
|
166
175
|
}
|
|
167
176
|
|
|
168
|
-
.chip--variant-plain.chip--interactive:active {
|
|
177
|
+
.chip--variant-plain.chip--interactive:active:not(:disabled) {
|
|
169
178
|
background-color: transparent;
|
|
170
179
|
}
|
|
171
180
|
|
|
172
|
-
.chip--variant-plain.chip--interactive:active ::part(avatar) {
|
|
181
|
+
.chip--variant-plain.chip--interactive:active:not(:disabled) ::part(avatar) {
|
|
173
182
|
background-color: var(--s-surface-raised-pressed);
|
|
174
183
|
}
|
|
175
184
|
|
|
@@ -264,10 +273,18 @@
|
|
|
264
273
|
cursor: pointer;
|
|
265
274
|
}
|
|
266
275
|
|
|
267
|
-
.chip__remove-button:
|
|
276
|
+
.chip__remove-button:disabled {
|
|
277
|
+
cursor: default;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.chip__remove-button:disabled > *::part(icon) {
|
|
281
|
+
color: var(--s-icon-disabled);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.chip__remove-button:hover:not(:disabled) {
|
|
268
285
|
background-color: var(--s-state-hovered);
|
|
269
286
|
}
|
|
270
287
|
|
|
271
|
-
.chip__remove-button:active {
|
|
288
|
+
.chip__remove-button:active:not(:disabled) {
|
|
272
289
|
background-color: var(--s-state-pressed);
|
|
273
290
|
}
|
|
@@ -54,7 +54,7 @@ export class SwirlChip {
|
|
|
54
54
|
"chip--interactive": this.interactive || this.pressed !== undefined,
|
|
55
55
|
"chip--removable": this.removable,
|
|
56
56
|
});
|
|
57
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: 'a143d32603ecf2843a8b1291dfcad7c9a59fb6dc' }, h(Tag, { key: 'a6ec7b1554b4b53317da9e4f4174eeb37fa71292', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, disabled: this.interactive ? this.disabled : undefined, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '06290531c4484d1d40350190cca4e28fb9554701', class: "chip__inner" }, showAvatar && (h("span", { key: 'fb1586360058ce70836b0d9abb16fb2ffb4ffbf3', class: "chip__avatar" }, h("slot", { key: 'cbea43f4ad440ca2d59b56dbef167a0197930544', name: "avatar" }))), showIcon && (h("span", { key: '82b15edc910565d8b8d2d494f1e061771aeaa0a2', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '6c5882703ac0a24145ccce4063d89f1ebaea5f41', class: "chip__label" }, this.label), this.trailingIcon && (h("span", { key: '1dd62bebc93bcf530cd049084c0c9f867d803c84', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) })), showTrailingContent && (h("span", { key: 'dea6309c1dd6d1648c5abbf353270da7d272d9a6', class: "chip__trailing-content" }, h("slot", { key: 'c8de705b65639aca3758e81fb6f0547b35a6b485', name: "trailing-content" })))), this.progress !== undefined && (h("span", { key: '1cb286d6d821e9dcb1f0cb33d0daf1601909a5ab', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '5fa7db1e4452a036fc3e2bb2190996bd6e4bdf50', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'f48ecfa4f1d207cd9202af9206478d59c176a096', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.removeButtonLabel, class: "chip__remove-button", disabled: this.disabled, onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'c143ebba597808238fd7bb07fd356d85333d8c5c', size: 20 })))));
|
|
58
58
|
}
|
|
59
59
|
static get is() { return "swirl-chip"; }
|
|
60
60
|
static get encapsulation() { return "scoped"; }
|
|
@@ -96,6 +96,25 @@ export class SwirlChip {
|
|
|
96
96
|
"attribute": "border-radius",
|
|
97
97
|
"defaultValue": "\"pill\""
|
|
98
98
|
},
|
|
99
|
+
"disabled": {
|
|
100
|
+
"type": "boolean",
|
|
101
|
+
"mutable": false,
|
|
102
|
+
"complexType": {
|
|
103
|
+
"original": "boolean",
|
|
104
|
+
"resolved": "boolean",
|
|
105
|
+
"references": {}
|
|
106
|
+
},
|
|
107
|
+
"required": false,
|
|
108
|
+
"optional": true,
|
|
109
|
+
"docs": {
|
|
110
|
+
"tags": [],
|
|
111
|
+
"text": ""
|
|
112
|
+
},
|
|
113
|
+
"getter": false,
|
|
114
|
+
"setter": false,
|
|
115
|
+
"reflect": false,
|
|
116
|
+
"attribute": "disabled"
|
|
117
|
+
},
|
|
99
118
|
"icon": {
|
|
100
119
|
"type": "string",
|
|
101
120
|
"mutable": false,
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
import { v4 as uuid } from "uuid";
|
|
4
3
|
import "vanilla-colorful";
|
|
5
4
|
export class SwirlColorInput {
|
|
6
5
|
constructor() {
|
|
7
6
|
this.pickerButtonLabel = "Open color picker";
|
|
8
7
|
this.pickerLabel = "Color picker";
|
|
9
|
-
this.pickerId = `color-picker-${
|
|
8
|
+
this.pickerId = `color-picker-${crypto.randomUUID()}`;
|
|
10
9
|
this.onPickerChange = (event) => {
|
|
11
10
|
this.value = event.detail.value;
|
|
12
11
|
};
|
|
@@ -55,11 +54,11 @@ export class SwirlColorInput {
|
|
|
55
54
|
const className = classnames("color-input", {
|
|
56
55
|
"color-input--inline": this.inline,
|
|
57
56
|
});
|
|
58
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: '2ee1b42158b3caeb6ab7b0c46192a327ae9a854e' }, h("div", { key: 'c14754cc9fe4d74fd40ec50cb796dd1b7688d823', class: className }, h("input", { key: '4d884de2795ed648a11cda4eaf08e03cf825e443', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), h("swirl-popover-trigger", { key: '9d543f84f7831b48af0036fa0062ea98afdbfecf', swirlPopover: this.pickerId }, h("button", { key: 'fe0ffd3db789188beb2c5ca62bfcdd241a932721', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
|
|
59
58
|
backgroundColor: this.disabled
|
|
60
59
|
? "var(--s-border-subdued)"
|
|
61
60
|
: this.value,
|
|
62
|
-
}, type: "button" })), h("swirl-popover", { key: '
|
|
61
|
+
}, type: "button" })), h("swirl-popover", { key: 'c9ac21281b927941dfe43851785c94ac48594c6b', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, h("swirl-box", { key: 'c888476cc56718853a644e2b722defa46babd920', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, h("hex-color-picker", { key: 'f5ee44a0661d3c8ae6d076a0817b76e8a646bd5a', color: this.value, ref: (el) => (this.picker = el) }))))));
|
|
63
62
|
}
|
|
64
63
|
static get is() { return "swirl-color-input"; }
|
|
65
64
|
static get encapsulation() { return "scoped"; }
|
|
@@ -56,7 +56,6 @@
|
|
|
56
56
|
grid-template-areas:
|
|
57
57
|
"content"
|
|
58
58
|
"footer";
|
|
59
|
-
grid-template-rows: 1fr -webkit-min-content;
|
|
60
59
|
grid-template-rows: 1fr min-content
|
|
61
60
|
}
|
|
62
61
|
}
|
|
@@ -75,7 +74,6 @@
|
|
|
75
74
|
border-right: var(--s-border-width-default) solid var(--s-border-default);
|
|
76
75
|
transition: transform 0.15s, box-shadow 0.15s;
|
|
77
76
|
transform: translate3d(-100%, 0, 0);
|
|
78
|
-
grid-template-rows: auto 1fr -webkit-min-content;
|
|
79
77
|
grid-template-rows: auto 1fr min-content;
|
|
80
78
|
grid-template-areas:
|
|
81
79
|
"header"
|
|
@@ -145,7 +143,6 @@
|
|
|
145
143
|
}
|
|
146
144
|
|
|
147
145
|
.console-layout--has-footer .console-layout__main {
|
|
148
|
-
grid-template-rows: var(--console-app-bar-height) 1fr -webkit-min-content;
|
|
149
146
|
grid-template-rows: var(--console-app-bar-height) 1fr min-content;
|
|
150
147
|
grid-template-areas:
|
|
151
148
|
"app-bar"
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
import { v4 as uuid } from "uuid";
|
|
4
3
|
/**
|
|
5
4
|
* @slot media - Optional media content (e.g., swirl-avatar, icons). Only swirl-avatar and icon elements are styled.
|
|
6
5
|
* @slot content - Optional content element (e.g., swirl-text-input, swirl-select). When provided, the value prop is ignored. Content automatically takes 100% width when no label is present.
|
|
@@ -10,7 +9,7 @@ export class SwirlDataCell {
|
|
|
10
9
|
constructor() {
|
|
11
10
|
this.intent = "default";
|
|
12
11
|
this.vertical = false;
|
|
13
|
-
this.elementId = `data-cell-${
|
|
12
|
+
this.elementId = `data-cell-${crypto.randomUUID()}`;
|
|
14
13
|
this.handleRadioClick = (event) => {
|
|
15
14
|
const target = event.target;
|
|
16
15
|
const radio = this.el.querySelector('swirl-radio[slot="content"]');
|
|
@@ -50,8 +49,8 @@ export class SwirlDataCell {
|
|
|
50
49
|
const hostRole = isInDataCellStack ? "listitem" : "group";
|
|
51
50
|
const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
|
|
52
51
|
const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
|
|
53
|
-
const labelContent = (h("swirl-stack", { key: '
|
|
54
|
-
return (h(Host, { key: '
|
|
52
|
+
const labelContent = (h("swirl-stack", { key: '7a729ce4b378c034b97979986762a0fa1d641cfb', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '40982cffdceb54b8d24792c7198d0897276f58e3', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: 'ea28c9c22c24cbc8693ea289c1dda8a4fb1c20a9', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '9b7e454200efa02d2fa80b8e2af0b11c8b114df2', size: 16, tabIndex: 0 })))));
|
|
53
|
+
return (h(Host, { key: '29deeeca389052e4b8224fa793930260d5626f64', role: hostRole }, h("div", { key: '67714930178503e615e4c57c4fb55a09e668141f', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: wrapperRole, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (h("div", { key: 'befe843837b8e860175c1d21d9aba3b09be4abaa', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: '04d1d43cea0aa2b597191276361972a542892a25', name: "media" }))), h("div", { key: '67d0e9ff7ccc92ee666b75736c1640f2f5cbfef9', class: "data-cell__content" }, hasLabel && (h("div", { key: 'a9ba713fcaa63c4eef2d37765c7ad709f8f53e1b', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: '167aee81080412dcdc4766be480bf8e774a4c0ed', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '998ac95e5c5a2dbcd1106c39261163d10ee4d538', class: "data-cell__suffix" }, h("slot", { key: 'bf5f0adfd4138d7831d69fbbb94045de95084040', name: "suffix" }))))));
|
|
55
54
|
}
|
|
56
55
|
static get is() { return "swirl-data-cell"; }
|
|
57
56
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
import { v4 as uuid } from "uuid";
|
|
4
3
|
/**
|
|
5
4
|
* @slot cta - Optional call-to-action (e.g., button)
|
|
6
5
|
* @slot - The data cell items
|
|
@@ -8,7 +7,7 @@ import { v4 as uuid } from "uuid";
|
|
|
8
7
|
export class SwirlDataCellStack {
|
|
9
8
|
constructor() {
|
|
10
9
|
this.hideLabel = false;
|
|
11
|
-
this.headerId = `data-cell-stack-header-${
|
|
10
|
+
this.headerId = `data-cell-stack-header-${crypto.randomUUID()}`;
|
|
12
11
|
this.onSlotChange = (event) => {
|
|
13
12
|
const slot = event.target;
|
|
14
13
|
const elements = slot.assignedElements();
|
|
@@ -28,7 +27,7 @@ export class SwirlDataCellStack {
|
|
|
28
27
|
const descriptionId = this.description
|
|
29
28
|
? `${this.headerId}-description`
|
|
30
29
|
: undefined;
|
|
31
|
-
return (h(Host, { key: '
|
|
30
|
+
return (h(Host, { key: '042c83c6f2fcbb76810f082487dba327f3cc8309' }, h("div", { key: '07eb0ed861d3051dcffcbaa830ec07e46b1fd624', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: 'e664e0c1db6346a7b7680f4b5fa1354ec27af519', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '6e4e5b99e5cfb6a98375bd6b19cdf8c60ccbe223', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: '092b8ac7525b5edf5d0938bd8c8ddb8fe9ef9e1b', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: 'abc7d688fadb1248b4c0fabb57f83b004fe0091d', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '5868eff8aa04cd733d7c7d6d029585075739607a', class: "data-cell-stack__cta" }, h("slot", { key: '4b872cac524edaa3ef7fc102554190006fe31a5c', name: "cta" }))))), h("div", { key: '88bba53868d016ee19a79e75dbd3dab4fd6e87c1', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: '8a7b45a1bb3b648d8fd1848ade56c0c56b5485de', onSlotchange: this.onSlotChange })))));
|
|
32
31
|
}
|
|
33
32
|
static get is() { return "swirl-data-cell-stack"; }
|
|
34
33
|
static get encapsulation() { return "shadow"; }
|
|
@@ -38,10 +38,8 @@
|
|
|
38
38
|
top: var(--s-space-12);
|
|
39
39
|
right: var(--s-space-12);
|
|
40
40
|
display: none;
|
|
41
|
-
width: -webkit-fit-content;
|
|
42
41
|
width: -moz-fit-content;
|
|
43
42
|
width: fit-content;
|
|
44
|
-
height: -webkit-fit-content;
|
|
45
43
|
height: -moz-fit-content;
|
|
46
44
|
height: fit-content;
|
|
47
45
|
pointer-events: none;
|
|
@@ -13,6 +13,9 @@ export class SwirlFileViewerVideo {
|
|
|
13
13
|
this.onNativeSeeked = () => {
|
|
14
14
|
this.playbackSeeked.emit(this.getPlaybackDetail());
|
|
15
15
|
};
|
|
16
|
+
this.onNativeSeeking = () => {
|
|
17
|
+
this.playbackSeeking.emit(this.getPlaybackDetail());
|
|
18
|
+
};
|
|
16
19
|
this.onNativeRateChange = () => {
|
|
17
20
|
this.playbackRateChange.emit(this.getPlaybackRateChangeDetail());
|
|
18
21
|
};
|
|
@@ -62,7 +65,7 @@ export class SwirlFileViewerVideo {
|
|
|
62
65
|
};
|
|
63
66
|
}
|
|
64
67
|
render() {
|
|
65
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: 'c90b1c2125c422265368ade02ca496fb40a0ece9', class: "file-viewer-video" }, h("video", { key: '3c21da4712271f3514888e246dcf75606920e3b6', autoplay: this.autoplay, class: "file-viewer-video__video", controls: true, onEnded: this.onNativeEnded, onPause: this.onNativePause, onPlay: this.onNativePlay, onRateChange: this.onNativeRateChange, onSeeked: this.onNativeSeeked, onSeeking: this.onNativeSeeking, onTimeUpdate: this.onNativeTimeUpdate, src: this.file, ref: (el) => (this.videoEl = el) })));
|
|
66
69
|
}
|
|
67
70
|
static get is() { return "swirl-file-viewer-video"; }
|
|
68
71
|
static get encapsulation() { return "shadow"; }
|
|
@@ -242,6 +245,27 @@ export class SwirlFileViewerVideo {
|
|
|
242
245
|
}
|
|
243
246
|
}
|
|
244
247
|
}
|
|
248
|
+
}, {
|
|
249
|
+
"method": "playbackSeeking",
|
|
250
|
+
"name": "playbackSeeking",
|
|
251
|
+
"bubbles": true,
|
|
252
|
+
"cancelable": true,
|
|
253
|
+
"composed": true,
|
|
254
|
+
"docs": {
|
|
255
|
+
"tags": [],
|
|
256
|
+
"text": ""
|
|
257
|
+
},
|
|
258
|
+
"complexType": {
|
|
259
|
+
"original": "SwirlFileViewerVideoPlaybackDetail",
|
|
260
|
+
"resolved": "{ currentTime: number; duration: number; videoEl: HTMLVideoElement; }",
|
|
261
|
+
"references": {
|
|
262
|
+
"SwirlFileViewerVideoPlaybackDetail": {
|
|
263
|
+
"location": "local",
|
|
264
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.tsx",
|
|
265
|
+
"id": "src/components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.tsx::SwirlFileViewerVideoPlaybackDetail"
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
}
|
|
245
269
|
}, {
|
|
246
270
|
"method": "playbackRateChange",
|
|
247
271
|
"name": "playbackRateChange",
|
|
@@ -144,10 +144,8 @@ button.image-grid-item:focus-visible:after {
|
|
|
144
144
|
top: var(--s-space-8);
|
|
145
145
|
right: var(--s-space-8);
|
|
146
146
|
display: none;
|
|
147
|
-
width: -webkit-fit-content;
|
|
148
147
|
width: -moz-fit-content;
|
|
149
148
|
width: fit-content;
|
|
150
|
-
height: -webkit-fit-content;
|
|
151
149
|
height: -moz-fit-content;
|
|
152
150
|
height: fit-content;
|
|
153
151
|
pointer-events: none;
|