@getflip/swirl-components 0.508.0 → 0.509.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 +23 -3
- 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-color-input.cjs.entry.js +3 -4
- 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-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-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/swirl-accordion-item.entry.js +3 -4
- package/dist/esm/swirl-card.entry.js +1 -1
- package/dist/esm/swirl-color-input.entry.js +3 -4
- 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-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-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 +4 -2
- package/package.json +1 -1
- 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-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
|
@@ -3,10 +3,9 @@
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
|
|
6
|
-
var v4 = require('./v4-Bq3ldsQe.js');
|
|
7
6
|
require('./utils-UfZG-xPD.js');
|
|
8
7
|
|
|
9
|
-
const swirlResourceListItemCss = () => `.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var( --swirl-resource-list-item-background-hovered );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}`;
|
|
8
|
+
const swirlResourceListItemCss = () => `.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var( --swirl-resource-list-item-background-hovered );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}`;
|
|
10
9
|
|
|
11
10
|
const SwirlResourceListItem = class {
|
|
12
11
|
constructor(hostRef) {
|
|
@@ -22,7 +21,7 @@ const SwirlResourceListItem = class {
|
|
|
22
21
|
this.menuTriggerLabel = "Options";
|
|
23
22
|
this.hasMedia = false;
|
|
24
23
|
this.iconSize = 24;
|
|
25
|
-
this.elementId =
|
|
24
|
+
this.elementId = crypto.randomUUID();
|
|
26
25
|
this.mediaQueryUnsubscribe = () => { };
|
|
27
26
|
this.onClick = () => {
|
|
28
27
|
if (!this.selectable) {
|
|
@@ -138,7 +137,7 @@ const SwirlResourceListItem = class {
|
|
|
138
137
|
const labelContainerStyles = {
|
|
139
138
|
minHeight: this.labelMinHeight ?? undefined,
|
|
140
139
|
};
|
|
141
|
-
const renderLabel = () => (index.h("span", { key: '
|
|
140
|
+
const renderLabel = () => (index.h("span", { key: 'b7bfb79d0b4dca7c3854c774e8c3cb291e24312f', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined, style: {
|
|
142
141
|
"-webkit-line-clamp": !!this.labelWrapMaxLines
|
|
143
142
|
? String(this.labelWrapMaxLines)
|
|
144
143
|
: undefined,
|
|
@@ -161,7 +160,7 @@ const SwirlResourceListItem = class {
|
|
|
161
160
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
162
161
|
"resource-list-item--wrap-label-max-lines": this.labelWrapMaxLines,
|
|
163
162
|
});
|
|
164
|
-
return (index.h(index.Host, { key: '
|
|
163
|
+
return (index.h(index.Host, { key: '95aedb74943cff960433658ee6b605dddea02474', role: hostRole }, index.h("div", { key: '1ea17f0f37f013048ea4df6f30dcb2f0fb74f701', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: '125a265ab2bc2249c465c4d11b2665ea005c5caa', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, rel: isLink ? this.rel : undefined, target: isLink ? this.target : undefined, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: '8a239cd77026ef8d78e24ae816a45aa13d34eeea', class: "resource-list-item__media" }, index.h("slot", { key: '0cd81a58a00d0219a199e9a4aba01b650f44401e', name: "media" }))), index.h("span", { key: '0f5a1b71242d456dc7e10753992913c8c6e90aae', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (index.h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (index.h("span", { key: '51491ce73ab27952a1daa6b1ee3308561efc875c', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (index.h("span", { key: '87d151fd0650d338b89b34df27bd3886d1606178', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'b7226a891e97012ed703aa504e171357190c7b8d', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'ad690debcb4accbecddd9c5c29c48c4aaf8eefb1' }))))), showMeta && (index.h("span", { key: '828d3b9193087789cf0fede9a7b9e527a784f3d0', class: "resource-list-item__meta" }, this.meta && (index.h("span", { key: 'd8e70b55f8521191ab14150bef90f4c427e8f95b', class: "resource-list-item__meta-text" }, this.meta)), index.h("span", { key: 'd035df5c2e1aa8f26c8cd82ad03f10aa848b5ce0', class: "resource-list-item__badges" }, index.h("slot", { key: '7d894272a6e58660d0df43aaefa27bb34c27cda9', name: "badges" })))), index.h("span", { key: '594e81bd914d0f2bcab87ca40aa70c4c58bc950e', class: "resource-list-item__control", onClick: this.onControlClick }, index.h("slot", { key: 'e7deb32a4d49247ee593f83212b47a7fc0e5d12c', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '7c2f9b55e6dd99d3391d35fee545891f18430489', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: 'c2cd74bf7008e1d3a0655dbf33a9bb052c8f4cce', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { key: '95704b3f6f5f72a24c869376929f4b3f3ae3d095', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: '16068df530dd48e098388f5b94433d9815a9cd6d', size: this.iconSize })))));
|
|
165
164
|
}
|
|
166
165
|
get el() { return index.getElement(this); }
|
|
167
166
|
};
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
4
|
var sortable_esm = require('./sortable.esm-B1ZNencO.js');
|
|
5
|
-
var v4 = require('./v4-Bq3ldsQe.js');
|
|
6
5
|
|
|
7
6
|
const swirlResourceListCss = () => `.sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}`;
|
|
8
7
|
|
|
@@ -15,7 +14,7 @@ const SwirlResourceList = class {
|
|
|
15
14
|
this.assistiveTextItemMoved = "Item moved. New position:";
|
|
16
15
|
this.semantics = "grid";
|
|
17
16
|
this.spacing = "0";
|
|
18
|
-
this.listId =
|
|
17
|
+
this.listId = crypto.randomUUID();
|
|
19
18
|
this.focusedIndex = 0;
|
|
20
19
|
this.componentLoaded = false;
|
|
21
20
|
this.toggleDrag = (event) => {
|
|
@@ -284,7 +283,7 @@ const SwirlResourceList = class {
|
|
|
284
283
|
});
|
|
285
284
|
}
|
|
286
285
|
render() {
|
|
287
|
-
return (index.h(index.Host, { key: '
|
|
286
|
+
return (index.h(index.Host, { key: 'b5e4d53782d0d41c43d81f7222201f03d28cc282', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '1b9112ef866b5095c1c9f47f96cd0b7c61db8e04', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: 'cf1605239d7a736f924ee3bef04180a5d49d1d25', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, index.h("swirl-stack", { key: 'a9176dd03792be73814a33cc9d3eab7740702f2b', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, index.h("slot", { key: '0c1335249b5e423ffd422591573ec08a5cf53f74' })))));
|
|
288
287
|
}
|
|
289
288
|
get el() { return index.getElement(this); }
|
|
290
289
|
static get watchers() { return {
|
|
@@ -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
|
}
|
|
@@ -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;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import Sortable from "sortablejs";
|
|
3
3
|
import { closestPassShadow, querySelectorAllDeep, } from "../../utils";
|
|
4
|
-
import { v4 as uuid } from "uuid";
|
|
5
4
|
/**
|
|
6
5
|
* @slot slot - The option list items and sections (e.g. swirl-option-list-item, swirl-option-list-section).
|
|
7
6
|
*/
|
|
@@ -15,7 +14,7 @@ export class SwirlOptionList {
|
|
|
15
14
|
this.value = [];
|
|
16
15
|
this.selectAllState = false;
|
|
17
16
|
this.componentLoaded = false;
|
|
18
|
-
this.selectAllValue =
|
|
17
|
+
this.selectAllValue = crypto.randomUUID();
|
|
19
18
|
this.onClick = (event) => {
|
|
20
19
|
event.preventDefault();
|
|
21
20
|
const target = event.target;
|
|
@@ -446,7 +445,7 @@ export class SwirlOptionList {
|
|
|
446
445
|
const ariaMultiselectable = this.multiSelect ? "true" : undefined;
|
|
447
446
|
const tabIndex = Boolean(this.dragging) ? 0 : undefined;
|
|
448
447
|
const showSelectAll = this.multiSelect && this.showSelectAll;
|
|
449
|
-
return (h(Host, { key: '
|
|
448
|
+
return (h(Host, { key: '8d36d80ca3cf2df95c9cff1673402bb5b7429a67' }, h("swirl-visually-hidden", { key: 'c93f2e6e58bb6cf76b89da55a81d827665bbe332', role: "alert" }, this.assistiveText), h("div", { key: '4ab482f92b6e3d377e2f79a5ca299305478252e7', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (h("swirl-option-list-item", { key: '8969ba997196502f408d12c2e3469d61a617fac2', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), h("slot", { key: '8c01ec1fd71e1169e5e9480bc3c277e374b65acd', onSlotchange: this.setSectionSeparator }))));
|
|
450
449
|
}
|
|
451
450
|
static get is() { return "swirl-option-list"; }
|
|
452
451
|
static get encapsulation() { return "scoped"; }
|