@getflip/swirl-components 0.490.0 → 0.491.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 +107 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-icon-check-small_2.cjs.entry.js +4 -3
- package/dist/cjs/swirl-toolbar.cjs.entry.js +2 -1
- package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.css +1 -2
- package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js +38 -17
- package/dist/collection/components/swirl-toolbar/swirl-toolbar.js +29 -1
- package/dist/components/swirl-option-list-item2.js +1 -1
- package/dist/components/swirl-toolbar.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-icon-check-small_2.entry.js +4 -3
- package/dist/esm/swirl-toolbar.entry.js +2 -1
- package/dist/swirl-components/p-07a97079.entry.js +1 -0
- package/dist/swirl-components/p-639c4f84.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-option-list-item/swirl-option-list-item.d.ts +2 -1
- package/dist/types/components/swirl-toolbar/swirl-toolbar.d.ts +2 -0
- package/dist/types/components.d.ts +19 -1
- package/package.json +1 -1
- package/vscode-data.json +43 -0
- package/dist/swirl-components/p-1d9ff828.entry.js +0 -1
- package/dist/swirl-components/p-54a87a41.entry.js +0 -1
|
@@ -23,7 +23,7 @@ const SwirlIconCheckSmall = class {
|
|
|
23
23
|
};
|
|
24
24
|
SwirlIconCheckSmall.style = swirlIconCss();
|
|
25
25
|
|
|
26
|
-
const swirlOptionListItemCss = () => `.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-
|
|
26
|
+
const swirlOptionListItemCss = () => `.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-state-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}`;
|
|
27
27
|
|
|
28
28
|
const SwirlOptionListItem = class {
|
|
29
29
|
constructor(hostRef) {
|
|
@@ -32,6 +32,7 @@ const SwirlOptionListItem = class {
|
|
|
32
32
|
this.context = "single-select";
|
|
33
33
|
this.dragHandleDescription = "Press spacebar to toggle grab";
|
|
34
34
|
this.dragHandleLabel = "Move option";
|
|
35
|
+
this.minWidth = "15rem";
|
|
35
36
|
this.selected = false;
|
|
36
37
|
this.indeterminate = false;
|
|
37
38
|
this.swirlAriaRole = "option";
|
|
@@ -84,9 +85,9 @@ const SwirlOptionListItem = class {
|
|
|
84
85
|
"option-list-item--indeterminate": this.indeterminate && !this.selected,
|
|
85
86
|
"option-list-item--show-avatar": showAvatar,
|
|
86
87
|
});
|
|
87
|
-
return (h(Host, { key: '
|
|
88
|
+
return (h(Host, { key: '18fecbcf50466f8d6abebf2373ad8c8699f8d34b' }, h("div", { key: 'f5a3a5b00270c97b28c2ad7525eb020fa0212fa3', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
|
|
88
89
|
? `option-list-item-${this.elementId}-description`
|
|
89
|
-
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '
|
|
90
|
+
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole, style: { minWidth: this.minWidth } }, showIcon && (h("span", { key: 'f11d3d280ba1f982fff8da25bc7edc5ccf0054d8', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '2252aa21db8619c03bc919d14d7e9647fcce2acf', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: 'dc9d9d3f75c514356780414a99e1e2cbac67ac30', class: "option-list-item__checkbox" }, h("span", { key: 'ee1fedc5c0bfee26d7f7b29fbaf65cd6cd021de8', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '53673ff67edae06a72917058b9e02d8d834f0565', class: "option-list-item__checkbox-icon", size: 16 })), !this.selected && this.indeterminate && (h("span", { key: '84043315ba3b108dca3bbdb1aa0e0e3f2bca7cbe', class: "option-list-item__checkbox-indeterminate-icon" }))))), h("span", { key: '2f7e2a815e3fcdd6eacea5e45276997c55d7256f', class: "option-list-item__avatar" }, h("slot", { key: '517c24ca39c60c97840b212dd612a5804bdba86c', name: "avatar" })), h("span", { key: 'e80c846abd95cd71b794b79495701febcffa790d', class: "option-list-item__label-container" }, h("span", { key: 'cb24cb92219779b9acaab1510de4ef48fe1d9239', class: "option-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" }, id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'd1c364e246b5f22b1291526b8bdcdc183a8643be', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '2245797b2d8bc8a9b7a3889e76043f7e81403ecc', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '4be6b3b2ba938f735e2988e969b961210f3718ce', size: this.iconSize })))), this.allowDrag && (h("button", { key: '2421d4cde5232743eeadff6c3bdc6919618a51f7', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: 'c94e362d5f87f254865ef136065d52f5fffa2d20', size: this.iconSize })))));
|
|
90
91
|
}
|
|
91
92
|
get el() { return getElement(this); }
|
|
92
93
|
};
|
|
@@ -7,6 +7,7 @@ const SwirlToolbar = class {
|
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.orientation = "horizontal";
|
|
10
|
+
this.spacing = "8";
|
|
10
11
|
this.onKeyDown = (event) => {
|
|
11
12
|
if (event.code === "ArrowDown" || event.code === "ArrowRight") {
|
|
12
13
|
event.preventDefault();
|
|
@@ -69,7 +70,7 @@ const SwirlToolbar = class {
|
|
|
69
70
|
});
|
|
70
71
|
}
|
|
71
72
|
render() {
|
|
72
|
-
return (h(Host, { key: '
|
|
73
|
+
return (h(Host, { key: '34b3dcdf0beeb720ca846cf4f8999eff7d65f3d7' }, h("swirl-stack", { key: '908d04e73127abb6a60565321696055aeb7b5036', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: this.spacing, wrap: true }, h("slot", { key: '92193a84dee4a5d13a654e3364950bc16465826f' }))));
|
|
73
74
|
}
|
|
74
75
|
get el() { return getElement(this); }
|
|
75
76
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,h as t,F as e,c as o,a as s,d as l}from"./p-N0O_JBVJ.js";import{c as r}from"./p-orsBiyT_.js";import{D as a}from"./p-Bfn7CHM9.js";import{v as n}from"./p-DD3477fe.js";import"./p-CCck-DTo.js";const c=class{constructor(t){i(this,t),this.size=24}render(){const i=20===this.size?24:this.size,o={color:Boolean(this.color)?`var(--s-icon-${this.color})`:void 0},s=r("swirl-icon",`swirl-icon--size-${this.size}`),l=Boolean(this.label);return t("svg",{key:"eaf6245fbb6088e0cb9ce4c176c4323ceb990edc","aria-hidden":l?void 0:"true",class:s,fill:"none",height:this.size,part:"icon",role:l?"img":void 0,style:o,viewBox:`0 0 ${i} ${i}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},l&&t("title",{key:"a44b82ba5f1457076103b1fb3090f84c90800635"},this.label),16===this.size&&t(e,{key:"03d404c9c51bb21617ea6fdc0aba30ac3844cece"},t("path",{key:"b1470a50e092ab3cb885c6930481854c600a2b78","fill-rule":"evenodd","clip-rule":"evenodd",d:"M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z",fill:"currentColor"})),(20===this.size||24===this.size)&&t(e,{key:"0cc8fb8b8bd794742e21292713fd26963928c992"},t("path",{key:"9fb7b1fb1b8c7d19b17f77abcf0adea8d773385d","fill-rule":"evenodd","clip-rule":"evenodd",d:"M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z",fill:"currentColor"})),28===this.size&&t(e,{key:"cc85bdc351920c5c6c8cc624fc201c7f4ddd6f37"},t("path",{key:"e98fd8746d56693ae8a023e526bbc4942865ab16","fill-rule":"evenodd","clip-rule":"evenodd",d:"M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z",fill:"currentColor"})))}};c.style=":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}.icon-wrapper{display:inline-flex;justify-content:center;align-items:center;border-radius:var(--s-border-radius-full-round);background-color:var(--s-surface-raised-default)}.icon-wrapper--size-xs{width:16px;height:16px}.icon-wrapper--size-s{width:20px;height:20px}.icon-wrapper--size-m{width:24px;height:24px}.icon-wrapper--size-l{width:28px;height:28px}.icon-wrapper--size-xl{width:32px;height:32px}.icon-wrapper--size-2xl{width:40px;height:40px}.icon-wrapper--background-color-neutral{background-color:var(--s-surface-raised-default);color:var(--s-icon-default)}.icon-wrapper--background-color-banana{background-color:var(--s-decorative-banana-surface-subdued);color:var(--s-decorative-banana-text)}.icon-wrapper--background-color-blueberry{background-color:var(--s-decorative-blueberry-surface-subdued);color:var(--s-decorative-blueberry-text)}.icon-wrapper--background-color-chilli{background-color:var(--s-decorative-chilli-surface-subdued);color:var(--s-decorative-chilli-text)}.icon-wrapper--background-color-grape{background-color:var(--s-decorative-grape-surface-subdued);color:var(--s-decorative-grape-text)}.icon-wrapper--background-color-kiwi{background-color:var(--s-decorative-kiwi-surface-subdued);color:var(--s-decorative-kiwi-text)}.icon-wrapper--background-color-pumpkin{background-color:var(--s-decorative-pumpkin-surface-subdued);color:var(--s-decorative-pumpkin-text)}.icon-wrapper--background-color-radish{background-color:var(--s-decorative-radish-surface-subdued);color:var(--s-decorative-radish-text)}.icon-wrapper--background-color-default{background-color:var(--s-background-default);color:var(--s-icon-default)}";const d=class{constructor(t){i(this,t),this.toggleDrag=o(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.minWidth="15rem",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=n(),this.mediaQueryUnsubscribe=()=>{},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.onBlur=()=>{this.focused=!1},this.onFocus=()=>{this.focused=!0}}componentDidLoad(){this.mediaQueryUnsubscribe=a.subscribe((i=>{this.forceIconProps(i),this.updateIconSize(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0];t?.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,e=this.indeterminate?void 0:String(this.selected),o="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,a=Boolean(this.iconBadge),n=this.el.querySelector('[slot="avatar"]'),c=this.selected&&"single-select"===this.context,d=r("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected,"option-list-item--indeterminate":this.indeterminate&&!this.selected,"option-list-item--show-avatar":n});return t(s,{key:"18fecbcf50466f8d6abebf2373ad8c8699f8d34b"},t("div",{key:"f5a3a5b00270c97b28c2ad7525eb020fa0212fa3","aria-checked":"menuitemradio"===this.swirlAriaRole?e:void 0,"aria-describedby":Boolean(this.description)?`option-list-item-${this.elementId}-description`:void 0,"aria-disabled":i,"aria-labelledby":`option-list-item-${this.elementId}-label`,"aria-selected":"option"===this.swirlAriaRole?e:void 0,class:d,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole,style:{minWidth:this.minWidth}},l&&t("span",{key:"f11d3d280ba1f982fff8da25bc7edc5ccf0054d8",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},a&&t("span",{key:"2252aa21db8619c03bc919d14d7e9647fcce2acf",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),o&&t("span",{key:"dc9d9d3f75c514356780414a99e1e2cbac67ac30",class:"option-list-item__checkbox"},t("span",{key:"ee1fedc5c0bfee26d7f7b29fbaf65cd6cd021de8",class:"option-list-item__checkbox-box"},this.selected&&t("swirl-icon-check-strong",{key:"53673ff67edae06a72917058b9e02d8d834f0565",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&t("span",{key:"84043315ba3b108dca3bbdb1aa0e0e3f2bca7cbe",class:"option-list-item__checkbox-indeterminate-icon"}))),t("span",{key:"2f7e2a815e3fcdd6eacea5e45276997c55d7256f",class:"option-list-item__avatar"},t("slot",{key:"517c24ca39c60c97840b212dd612a5804bdba86c",name:"avatar"})),t("span",{key:"e80c846abd95cd71b794b79495701febcffa790d",class:"option-list-item__label-container"},t("span",{key:"cb24cb92219779b9acaab1510de4ef48fe1d9239",class:"option-list-item__label",style:{whiteSpace:this.truncateLabel?"nowrap":"normal"},id:`option-list-item-${this.elementId}-label`,part:"option-list-item__label"},this.label),this.description&&t("span",{key:"d1c364e246b5f22b1291526b8bdcdc183a8643be",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&t("span",{key:"2245797b2d8bc8a9b7a3889e76043f7e81403ecc",class:"option-list-item__selection-icon"},t("swirl-icon-check-small",{key:"4be6b3b2ba938f735e2988e969b961210f3718ce",size:this.iconSize}))),this.allowDrag&&t("button",{key:"2421d4cde5232743eeadff6c3bdc6919618a51f7","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,tabIndex:this.focused?0:-1,type:"button"},t("swirl-icon-drag-handle",{key:"c94e362d5f87f254865ef136065d52f5fffa2d20",size:this.iconSize})))}get el(){return l(this)}};d.style='.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-state-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08), 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}';export{c as swirl_icon_check_small,d as swirl_option_list_item}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as o,a as s,d as i}from"./p-N0O_JBVJ.js";import{k as e}from"./p-CCck-DTo.js";const r=class{constructor(o){t(this,o),this.orientation="horizontal",this.spacing="8",this.onKeyDown=t=>{"ArrowDown"===t.code||"ArrowRight"===t.code?(t.preventDefault(),this.focusNextItem()):"ArrowUp"!==t.code&&"ArrowLeft"!==t.code||(t.preventDefault(),this.focusPreviousItem())}}componentDidLoad(){const t=this.getItems();this.deactivateTabIndexes(t);const o=t[0]?.querySelector("button");Boolean(o)&&(o.tabIndex=0)}getItems(){return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"))}focusNextItem(){const t=this.getItems(),o=this.getActiveItemIndex(t);this.focusItem(t[(o+1)%t.length])}focusPreviousItem(){const t=this.getItems(),o=this.getActiveItemIndex(t);this.focusItem(t[0===o?t.length-1:o-1])}getActiveItemIndex(t){const o=e();return t.findIndex((t=>t===o?.closest("swirl-button, swirl-chip")))}focusItem(t){const o=this.getItems();if(this.deactivateTabIndexes(o),!Boolean(t))return;const s=t.querySelector("button");Boolean(s)&&(s.tabIndex=0,s.focus())}deactivateTabIndexes(t){t.forEach((t=>{const o=t.querySelector("button");Boolean(o)&&(o.tabIndex=-1)}))}render(){return o(s,{key:"34b3dcdf0beeb720ca846cf4f8999eff7d65f3d7"},o("swirl-stack",{key:"908d04e73127abb6a60565321696055aeb7b5036",align:"center","aria-label":this.label,"aria-orientation":this.orientation,role:"toolbar",onKeyDown:this.onKeyDown,orientation:this.orientation,spacing:this.spacing,wrap:!0},o("slot",{key:"92193a84dee4a5d13a654e3364950bc16465826f"})))}get el(){return i(this)}};r.style=":host{display:block}:host *{box-sizing:border-box}";export{r as swirl_toolbar}
|