@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
|
@@ -25,7 +25,7 @@ const SwirlIconCheckSmall = class {
|
|
|
25
25
|
};
|
|
26
26
|
SwirlIconCheckSmall.style = swirlIconCss();
|
|
27
27
|
|
|
28
|
-
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-
|
|
28
|
+
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)}`;
|
|
29
29
|
|
|
30
30
|
const SwirlOptionListItem = class {
|
|
31
31
|
constructor(hostRef) {
|
|
@@ -34,6 +34,7 @@ const SwirlOptionListItem = class {
|
|
|
34
34
|
this.context = "single-select";
|
|
35
35
|
this.dragHandleDescription = "Press spacebar to toggle grab";
|
|
36
36
|
this.dragHandleLabel = "Move option";
|
|
37
|
+
this.minWidth = "15rem";
|
|
37
38
|
this.selected = false;
|
|
38
39
|
this.indeterminate = false;
|
|
39
40
|
this.swirlAriaRole = "option";
|
|
@@ -86,9 +87,9 @@ const SwirlOptionListItem = class {
|
|
|
86
87
|
"option-list-item--indeterminate": this.indeterminate && !this.selected,
|
|
87
88
|
"option-list-item--show-avatar": showAvatar,
|
|
88
89
|
});
|
|
89
|
-
return (index.h(index.Host, { key: '
|
|
90
|
+
return (index.h(index.Host, { key: '18fecbcf50466f8d6abebf2373ad8c8699f8d34b' }, index.h("div", { key: 'f5a3a5b00270c97b28c2ad7525eb020fa0212fa3', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
|
|
90
91
|
? `option-list-item-${this.elementId}-description`
|
|
91
|
-
: 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 && (index.h("span", { key: '
|
|
92
|
+
: 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 && (index.h("span", { key: 'f11d3d280ba1f982fff8da25bc7edc5ccf0054d8', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '2252aa21db8619c03bc919d14d7e9647fcce2acf', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (index.h("span", { key: 'dc9d9d3f75c514356780414a99e1e2cbac67ac30', class: "option-list-item__checkbox" }, index.h("span", { key: 'ee1fedc5c0bfee26d7f7b29fbaf65cd6cd021de8', class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { key: '53673ff67edae06a72917058b9e02d8d834f0565', class: "option-list-item__checkbox-icon", size: 16 })), !this.selected && this.indeterminate && (index.h("span", { key: '84043315ba3b108dca3bbdb1aa0e0e3f2bca7cbe', class: "option-list-item__checkbox-indeterminate-icon" }))))), index.h("span", { key: '2f7e2a815e3fcdd6eacea5e45276997c55d7256f', class: "option-list-item__avatar" }, index.h("slot", { key: '517c24ca39c60c97840b212dd612a5804bdba86c', name: "avatar" })), index.h("span", { key: 'e80c846abd95cd71b794b79495701febcffa790d', class: "option-list-item__label-container" }, index.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 && (index.h("span", { key: 'd1c364e246b5f22b1291526b8bdcdc183a8643be', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (index.h("span", { key: '2245797b2d8bc8a9b7a3889e76043f7e81403ecc', class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { key: '4be6b3b2ba938f735e2988e969b961210f3718ce', size: this.iconSize })))), this.allowDrag && (index.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" }, index.h("swirl-icon-drag-handle", { key: 'c94e362d5f87f254865ef136065d52f5fffa2d20', size: this.iconSize })))));
|
|
92
93
|
}
|
|
93
94
|
get el() { return index.getElement(this); }
|
|
94
95
|
};
|
|
@@ -9,6 +9,7 @@ const SwirlToolbar = class {
|
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
index.registerInstance(this, hostRef);
|
|
11
11
|
this.orientation = "horizontal";
|
|
12
|
+
this.spacing = "8";
|
|
12
13
|
this.onKeyDown = (event) => {
|
|
13
14
|
if (event.code === "ArrowDown" || event.code === "ArrowRight") {
|
|
14
15
|
event.preventDefault();
|
|
@@ -71,7 +72,7 @@ const SwirlToolbar = class {
|
|
|
71
72
|
});
|
|
72
73
|
}
|
|
73
74
|
render() {
|
|
74
|
-
return (index.h(index.Host, { key: '
|
|
75
|
+
return (index.h(index.Host, { key: '34b3dcdf0beeb720ca846cf4f8999eff7d65f3d7' }, index.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 }, index.h("slot", { key: '92193a84dee4a5d13a654e3364950bc16465826f' }))));
|
|
75
76
|
}
|
|
76
77
|
get el() { return index.getElement(this); }
|
|
77
78
|
};
|
|
@@ -10,14 +10,13 @@
|
|
|
10
10
|
|
|
11
11
|
:host(.option-list-item--drag) {
|
|
12
12
|
border-radius: var(--s-border-radius-s);
|
|
13
|
-
background-color: var(--s-translucent-medium-pressed)
|
|
13
|
+
background-color: var(--s-translucent-medium-pressed);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.option-list-item {
|
|
17
17
|
display: inline-flex;
|
|
18
18
|
position: relative;
|
|
19
19
|
width: 100%;
|
|
20
|
-
min-width: 15rem;
|
|
21
20
|
min-height: 3rem;
|
|
22
21
|
padding: var(--s-space-12) var(--s-space-16);
|
|
23
22
|
border-radius: var(--s-border-radius-sm);
|
|
@@ -10,6 +10,7 @@ export class SwirlOptionListItem {
|
|
|
10
10
|
this.context = "single-select";
|
|
11
11
|
this.dragHandleDescription = "Press spacebar to toggle grab";
|
|
12
12
|
this.dragHandleLabel = "Move option";
|
|
13
|
+
this.minWidth = "15rem";
|
|
13
14
|
this.selected = false;
|
|
14
15
|
this.indeterminate = false;
|
|
15
16
|
this.swirlAriaRole = "option";
|
|
@@ -62,9 +63,9 @@ export class SwirlOptionListItem {
|
|
|
62
63
|
"option-list-item--indeterminate": this.indeterminate && !this.selected,
|
|
63
64
|
"option-list-item--show-avatar": showAvatar,
|
|
64
65
|
});
|
|
65
|
-
return (h(Host, { key: '
|
|
66
|
+
return (h(Host, { key: '18fecbcf50466f8d6abebf2373ad8c8699f8d34b' }, h("div", { key: 'f5a3a5b00270c97b28c2ad7525eb020fa0212fa3', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
|
|
66
67
|
? `option-list-item-${this.elementId}-description`
|
|
67
|
-
: 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: '
|
|
68
|
+
: 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 })))));
|
|
68
69
|
}
|
|
69
70
|
static get is() { return "swirl-option-list-item"; }
|
|
70
71
|
static get encapsulation() { return "scoped"; }
|
|
@@ -279,6 +280,26 @@ export class SwirlOptionListItem {
|
|
|
279
280
|
"reflect": false,
|
|
280
281
|
"attribute": "label"
|
|
281
282
|
},
|
|
283
|
+
"minWidth": {
|
|
284
|
+
"type": "string",
|
|
285
|
+
"mutable": false,
|
|
286
|
+
"complexType": {
|
|
287
|
+
"original": "string",
|
|
288
|
+
"resolved": "string",
|
|
289
|
+
"references": {}
|
|
290
|
+
},
|
|
291
|
+
"required": false,
|
|
292
|
+
"optional": true,
|
|
293
|
+
"docs": {
|
|
294
|
+
"tags": [],
|
|
295
|
+
"text": ""
|
|
296
|
+
},
|
|
297
|
+
"getter": false,
|
|
298
|
+
"setter": false,
|
|
299
|
+
"reflect": false,
|
|
300
|
+
"attribute": "min-width",
|
|
301
|
+
"defaultValue": "\"15rem\""
|
|
302
|
+
},
|
|
282
303
|
"selected": {
|
|
283
304
|
"type": "boolean",
|
|
284
305
|
"mutable": true,
|
|
@@ -345,16 +366,16 @@ export class SwirlOptionListItem {
|
|
|
345
366
|
"attribute": "swirl-aria-role",
|
|
346
367
|
"defaultValue": "\"option\""
|
|
347
368
|
},
|
|
348
|
-
"
|
|
349
|
-
"type": "
|
|
369
|
+
"truncateLabel": {
|
|
370
|
+
"type": "boolean",
|
|
350
371
|
"mutable": false,
|
|
351
372
|
"complexType": {
|
|
352
|
-
"original": "
|
|
353
|
-
"resolved": "
|
|
373
|
+
"original": "boolean",
|
|
374
|
+
"resolved": "boolean",
|
|
354
375
|
"references": {}
|
|
355
376
|
},
|
|
356
|
-
"required":
|
|
357
|
-
"optional":
|
|
377
|
+
"required": false,
|
|
378
|
+
"optional": true,
|
|
358
379
|
"docs": {
|
|
359
380
|
"tags": [],
|
|
360
381
|
"text": ""
|
|
@@ -362,18 +383,19 @@ export class SwirlOptionListItem {
|
|
|
362
383
|
"getter": false,
|
|
363
384
|
"setter": false,
|
|
364
385
|
"reflect": false,
|
|
365
|
-
"attribute": "
|
|
386
|
+
"attribute": "truncate-label",
|
|
387
|
+
"defaultValue": "true"
|
|
366
388
|
},
|
|
367
|
-
"
|
|
368
|
-
"type": "
|
|
389
|
+
"value": {
|
|
390
|
+
"type": "string",
|
|
369
391
|
"mutable": false,
|
|
370
392
|
"complexType": {
|
|
371
|
-
"original": "
|
|
372
|
-
"resolved": "
|
|
393
|
+
"original": "string",
|
|
394
|
+
"resolved": "string",
|
|
373
395
|
"references": {}
|
|
374
396
|
},
|
|
375
|
-
"required":
|
|
376
|
-
"optional":
|
|
397
|
+
"required": true,
|
|
398
|
+
"optional": false,
|
|
377
399
|
"docs": {
|
|
378
400
|
"tags": [],
|
|
379
401
|
"text": ""
|
|
@@ -381,8 +403,7 @@ export class SwirlOptionListItem {
|
|
|
381
403
|
"getter": false,
|
|
382
404
|
"setter": false,
|
|
383
405
|
"reflect": false,
|
|
384
|
-
"attribute": "
|
|
385
|
-
"defaultValue": "true"
|
|
406
|
+
"attribute": "value"
|
|
386
407
|
}
|
|
387
408
|
};
|
|
388
409
|
}
|
|
@@ -3,6 +3,7 @@ import { getActiveElement } from "../../utils";
|
|
|
3
3
|
export class SwirlToolbar {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.orientation = "horizontal";
|
|
6
|
+
this.spacing = "8";
|
|
6
7
|
this.onKeyDown = (event) => {
|
|
7
8
|
if (event.code === "ArrowDown" || event.code === "ArrowRight") {
|
|
8
9
|
event.preventDefault();
|
|
@@ -65,7 +66,7 @@ export class SwirlToolbar {
|
|
|
65
66
|
});
|
|
66
67
|
}
|
|
67
68
|
render() {
|
|
68
|
-
return (h(Host, { key: '
|
|
69
|
+
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' }))));
|
|
69
70
|
}
|
|
70
71
|
static get is() { return "swirl-toolbar"; }
|
|
71
72
|
static get encapsulation() { return "shadow"; }
|
|
@@ -125,6 +126,33 @@ export class SwirlToolbar {
|
|
|
125
126
|
"reflect": false,
|
|
126
127
|
"attribute": "orientation",
|
|
127
128
|
"defaultValue": "\"horizontal\""
|
|
129
|
+
},
|
|
130
|
+
"spacing": {
|
|
131
|
+
"type": "string",
|
|
132
|
+
"mutable": false,
|
|
133
|
+
"complexType": {
|
|
134
|
+
"original": "SwirlStackSpacing",
|
|
135
|
+
"resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"40\" | \"48\" | \"64\" | \"8\"",
|
|
136
|
+
"references": {
|
|
137
|
+
"SwirlStackSpacing": {
|
|
138
|
+
"location": "import",
|
|
139
|
+
"path": "../swirl-stack/swirl-stack",
|
|
140
|
+
"id": "src/components/swirl-stack/swirl-stack.tsx::SwirlStackSpacing",
|
|
141
|
+
"referenceLocation": "SwirlStackSpacing"
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"required": false,
|
|
146
|
+
"optional": true,
|
|
147
|
+
"docs": {
|
|
148
|
+
"tags": [],
|
|
149
|
+
"text": ""
|
|
150
|
+
},
|
|
151
|
+
"getter": false,
|
|
152
|
+
"setter": false,
|
|
153
|
+
"reflect": false,
|
|
154
|
+
"attribute": "spacing",
|
|
155
|
+
"defaultValue": "\"8\""
|
|
128
156
|
}
|
|
129
157
|
};
|
|
130
158
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as o,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as a}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";import{v as p}from"./v4.js";const m=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.toggleDrag=e(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=p(),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=r.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,t=this.indeterminate?void 0:String(this.selected),e="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,r=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),c=this.selected&&"single-select"===this.context,d=n("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":a});return s(o,{key:"7b7130db6b825e8b608e2b4ba29f78789e832d8e"},s("div",{key:"5b4b06ad99f5a3525b0821a43a19a1e07320b4d0","aria-checked":"menuitemradio"===this.swirlAriaRole?t: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?t:void 0,class:d,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole},l&&s("span",{key:"b54cac526dbb68e86f9a95b262d433ca4a69832e",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},r&&s("span",{key:"7194f36649bf9a8ec0f2b52a26e84577e9de9b65",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),e&&s("span",{key:"1c5989e694dfd41ae0d801bd5d6115d078ecacf9",class:"option-list-item__checkbox"},s("span",{key:"aaed6e8cdb21d999d23b4c0625330820661eb530",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"1f9f0f67030ed686d7d7a0ba5692b2ea1c42b8bd",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"9bd4ae1d5ca18ff1aa753a6ee8d7585cb80f44d0",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"f7f9597ef2ecf28ccf679843a3ed1e4a0cc7a6ee",class:"option-list-item__avatar"},s("slot",{key:"29b8249ac00683f208cdb5880d4db3f1817eb661",name:"avatar"})),s("span",{key:"16a9f76136724412aad5ae9ebf70a5876eb5340a",class:"option-list-item__label-container"},s("span",{key:"60765c63f30d920d0ee6269e45f1b7aed2db4f20",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&&s("span",{key:"fe43e9e863a3cd8563506b63b826812302ddc3e7",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&s("span",{key:"e66cc07c150fd6909b1159e6eac954e14d045f9d",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"58f1878c2369ee3679d8ab899ec6959ab3e610b4",size:this.iconSize}))),this.allowDrag&&s("button",{key:"d381c0be3d0246e1ed2d553cab9225de5428b20f","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"},s("swirl-icon-drag-handle",{key:"ccc746574c30bb87cccc0b371a31b896bcdb70d2",size:this.iconSize})))}get el(){return this}static get style(){return'.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-width:15rem;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)}'}},[262,"swirl-option-list-item",{allowDrag:[4,"allow-drag"],context:[1025],description:[1],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],icon:[1],iconBadge:[1,"icon-badge"],label:[1],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],value:[1],truncateLabel:[4,"truncate-label"],iconSize:[32],focused:[32]}]);function h(){"undefined"!=typeof customElements&&["swirl-option-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle"].forEach((i=>{switch(i){case"swirl-option-list-item":customElements.get(l(i))||customElements.define(l(i),m);break;case"swirl-icon-check-small":customElements.get(l(i))||a();break;case"swirl-icon-check-strong":customElements.get(l(i))||c();break;case"swirl-icon-drag-handle":customElements.get(l(i))||d()}}))}export{m as S,h as d}
|
|
1
|
+
import{proxyCustomElement as i,HTMLElement as t,createEvent as s,h as e,Host as o,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as a}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";import{v as m}from"./v4.js";const p=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.toggleDrag=s(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=m(),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=r.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,t=this.indeterminate?void 0:String(this.selected),s="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,r=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),c=this.selected&&"single-select"===this.context,d=n("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":a});return e(o,{key:"18fecbcf50466f8d6abebf2373ad8c8699f8d34b"},e("div",{key:"f5a3a5b00270c97b28c2ad7525eb020fa0212fa3","aria-checked":"menuitemradio"===this.swirlAriaRole?t: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?t: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&&e("span",{key:"f11d3d280ba1f982fff8da25bc7edc5ccf0054d8",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},r&&e("span",{key:"2252aa21db8619c03bc919d14d7e9647fcce2acf",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),s&&e("span",{key:"dc9d9d3f75c514356780414a99e1e2cbac67ac30",class:"option-list-item__checkbox"},e("span",{key:"ee1fedc5c0bfee26d7f7b29fbaf65cd6cd021de8",class:"option-list-item__checkbox-box"},this.selected&&e("swirl-icon-check-strong",{key:"53673ff67edae06a72917058b9e02d8d834f0565",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&e("span",{key:"84043315ba3b108dca3bbdb1aa0e0e3f2bca7cbe",class:"option-list-item__checkbox-indeterminate-icon"}))),e("span",{key:"2f7e2a815e3fcdd6eacea5e45276997c55d7256f",class:"option-list-item__avatar"},e("slot",{key:"517c24ca39c60c97840b212dd612a5804bdba86c",name:"avatar"})),e("span",{key:"e80c846abd95cd71b794b79495701febcffa790d",class:"option-list-item__label-container"},e("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&&e("span",{key:"d1c364e246b5f22b1291526b8bdcdc183a8643be",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&e("span",{key:"2245797b2d8bc8a9b7a3889e76043f7e81403ecc",class:"option-list-item__selection-icon"},e("swirl-icon-check-small",{key:"4be6b3b2ba938f735e2988e969b961210f3718ce",size:this.iconSize}))),this.allowDrag&&e("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"},e("swirl-icon-drag-handle",{key:"c94e362d5f87f254865ef136065d52f5fffa2d20",size:this.iconSize})))}get el(){return this}static get style(){return'.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)}'}},[262,"swirl-option-list-item",{allowDrag:[4,"allow-drag"],context:[1025],description:[1],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],icon:[1],iconBadge:[1,"icon-badge"],label:[1],minWidth:[1,"min-width"],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],truncateLabel:[4,"truncate-label"],value:[1],iconSize:[32],focused:[32]}]);function h(){"undefined"!=typeof customElements&&["swirl-option-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle"].forEach((i=>{switch(i){case"swirl-option-list-item":customElements.get(l(i))||customElements.define(l(i),p);break;case"swirl-icon-check-small":customElements.get(l(i))||a();break;case"swirl-icon-check-strong":customElements.get(l(i))||c();break;case"swirl-icon-drag-handle":customElements.get(l(i))||d()}}))}export{p as S,h as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as s,h as e,Host as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as s,h as e,Host as i,transformTag as o}from"@stencil/core/internal/client";import{k as r}from"./utils.js";import{d as n}from"./swirl-stack2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),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 s=t[0]?.querySelector("button");s&&(s.tabIndex=0)}getItems(){return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"))}focusNextItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[(s+1)%t.length])}focusPreviousItem(){const t=this.getItems(),s=this.getActiveItemIndex(t);this.focusItem(t[0===s?t.length-1:s-1])}getActiveItemIndex(t){const s=r();return t.findIndex((t=>t===s?.closest("swirl-button, swirl-chip")))}focusItem(t){const s=this.getItems();if(this.deactivateTabIndexes(s),!t)return;const e=t.querySelector("button");e&&(e.tabIndex=0,e.focus())}deactivateTabIndexes(t){t.forEach((t=>{const s=t.querySelector("button");s&&(s.tabIndex=-1)}))}render(){return e(i,{key:"34b3dcdf0beeb720ca846cf4f8999eff7d65f3d7"},e("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},e("slot",{key:"92193a84dee4a5d13a654e3364950bc16465826f"})))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}"}},[257,"swirl-toolbar",{label:[1],orientation:[1],spacing:[1]}]),a=c,l=function(){"undefined"!=typeof customElements&&["swirl-toolbar","swirl-stack"].forEach((t=>{switch(t){case"swirl-toolbar":customElements.get(o(t))||customElements.define(o(t),c);break;case"swirl-stack":customElements.get(o(t))||n()}}))};export{a as SwirlToolbar,l as defineCustomElement}
|