@getflip/swirl-components 0.526.0 → 0.527.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 +121 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-data-cell-stack.cjs.entry.js +1 -1
- package/dist/cjs/swirl-data-cell.cjs.entry.js +15 -5
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.css +60 -0
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.js +98 -4
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.stories.js +21 -0
- package/dist/collection/components/swirl-data-cell-stack/swirl-data-cell-stack.css +24 -0
- package/dist/components/swirl-data-cell-stack.js +1 -1
- package/dist/components/swirl-data-cell.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-data-cell-stack.entry.js +1 -1
- package/dist/esm/swirl-data-cell.entry.js +15 -5
- package/dist/swirl-components/p-222adad0.entry.js +1 -0
- package/dist/swirl-components/p-9d0a7cfc.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-data-cell/swirl-data-cell.d.ts +5 -0
- package/dist/types/components/swirl-data-cell/swirl-data-cell.stories.d.ts +1 -0
- package/dist/types/components.d.ts +26 -2
- package/package.json +1 -1
- package/vscode-data.json +24 -0
- package/dist/swirl-components/p-2b5d5d76.entry.js +0 -1
- package/dist/swirl-components/p-c24c27fd.entry.js +0 -1
|
@@ -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 swirlDataCellStackCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l) var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}`;
|
|
6
|
+
const swirlDataCellStackCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l) var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-base) var(--s-border-radius-base) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-base) var(--s-border-radius-base)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-base)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}`;
|
|
7
7
|
|
|
8
8
|
const SwirlDataCellStack = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -3,13 +3,15 @@
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
const swirlDataCellCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}`;
|
|
6
|
+
const swirlDataCellCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border:0;border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l));color:inherit;font:inherit;text-align:left;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.data-cell--interactive{position:relative;cursor:pointer}.data-cell--interactive::after{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none}.data-cell--interactive:hover::after{background-color:var(--s-state-hovered)}.data-cell--interactive:active::after{background-color:var(--s-state-pressed)}.data-cell--interactive:focus:not(:focus-visible){outline:none}.data-cell--interactive:focus-visible{outline-color:var(--s-focus-default)}.data-cell--interactive.data-cell--intent-default:hover{background-color:var(--s-surface-raised-50-hovered)}.data-cell--interactive.data-cell--intent-default:active{background-color:var(--s-surface-raised-50-pressed)}.data-cell--interactive.data-cell--intent-default:hover::after,.data-cell--interactive.data-cell--intent-default:active::after{background-color:transparent}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--size-s{gap:var(--s-space-4);padding:var(--s-space-8);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-s))}.data-cell--size-s .data-cell__content{gap:var(--s-space-8)}.data-cell--size-s .data-cell__value{font-weight:var(--s-font-weight-medium)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}`;
|
|
7
7
|
|
|
8
8
|
const SwirlDataCell = class {
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
index.registerInstance(this, hostRef);
|
|
11
11
|
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
12
12
|
this.intent = "default";
|
|
13
|
+
this.interactive = false;
|
|
14
|
+
this.size = "m";
|
|
13
15
|
this.vertical = false;
|
|
14
16
|
this.elementId = `data-cell-${crypto.randomUUID()}`;
|
|
15
17
|
this.handleRadioClick = (event) => {
|
|
@@ -36,13 +38,14 @@ const SwirlDataCell = class {
|
|
|
36
38
|
"SWIRL-DATA-CELL");
|
|
37
39
|
const hasCheckbox = Boolean(this.el.querySelector('swirl-checkbox[slot="content"]'));
|
|
38
40
|
const hasRadio = Boolean(this.el.querySelector('swirl-radio[slot="content"]'));
|
|
39
|
-
const
|
|
41
|
+
const isInteractive = this.interactive || Boolean(this.href);
|
|
42
|
+
const className = index$1.classnames("data-cell", `data-cell--size-${this.size}`, {
|
|
40
43
|
"data-cell--vertical": this.vertical,
|
|
41
44
|
"data-cell--has-media": hasMedia,
|
|
42
45
|
"data-cell--has-suffix": hasSuffix,
|
|
43
46
|
"data-cell--has-content": hasContent,
|
|
44
47
|
"data-cell--no-label": !hasLabel,
|
|
45
|
-
"data-cell--interactive": hasCheckbox || hasRadio,
|
|
48
|
+
"data-cell--interactive": isInteractive || hasCheckbox || hasRadio,
|
|
46
49
|
[`data-cell--intent-${this.intent}`]: this.intent,
|
|
47
50
|
});
|
|
48
51
|
const labelId = `${this.elementId}-label`;
|
|
@@ -51,8 +54,15 @@ const SwirlDataCell = class {
|
|
|
51
54
|
const hostRole = isInDataCellStack ? "listitem" : "group";
|
|
52
55
|
const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
|
|
53
56
|
const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
|
|
54
|
-
const
|
|
55
|
-
|
|
57
|
+
const Tag = Boolean(this.href) ? "a" : this.interactive ? "button" : "div";
|
|
58
|
+
const labelContent = (index.h("swirl-stack", { key: '02d9b33111b38a7e01c215ab22316e4702273d2f', orientation: "horizontal", align: "center", spacing: "4" }, index.h("span", { key: '7c214d31b78bc9ed73bef749144fb090845be335', class: "data-cell__label", id: labelId, role: isInteractive ? undefined : "term" }, this.label), this.tooltip && (index.h("swirl-tooltip", { key: '5507dcf689141cf6492a0e0ebbac7f6d30bb9571', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { key: 'ffd009f55337721081dd67811178625da5296395', size: 16, tabIndex: 0 })))));
|
|
59
|
+
return (index.h(index.Host, { key: '3938b80ef59b8499ca122057cb2a601215fe63ca', role: hostRole }, index.h(Tag, { key: 'd5e938b1e20cbd8ae35b3010e69655f04f31c4b3', class: className, href: this.href, onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, part: "data-cell", rel: Boolean(this.href) && this.linkTarget === "_blank"
|
|
60
|
+
? "noreferrer"
|
|
61
|
+
: undefined, role: isInteractive ? undefined : wrapperRole, tabIndex: isInteractive ? undefined : hasCheckbox || hasRadio ? 0 : undefined, target: this.linkTarget, type: Boolean(this.href)
|
|
62
|
+
? undefined
|
|
63
|
+
: this.interactive
|
|
64
|
+
? "button"
|
|
65
|
+
: undefined }, hasMedia && (index.h("div", { key: '11698c07d07a15d3e1402d5e7f06549ce12fec19', class: "data-cell__media", "aria-hidden": "true" }, index.h("slot", { key: '6c98bbb53fae7915300beafb9dbecc35aff6287c', name: "media" }))), index.h("div", { key: '9370d31ac4d2d23dc0f40bb3ece90a608e182b83', class: "data-cell__content" }, hasLabel && (index.h("div", { key: 'a5ce98e4af9f182a159e15ca5b967a506f5771e3', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (index.h("div", { key: '2360d1c1af966919370d00c44217314b7d91eece', class: "data-cell__value-wrapper", role: isInteractive ? undefined : "definition", "aria-labelledby": hasLabel && !isInteractive ? labelId : undefined, id: valueId }, hasContent ? (index.h("div", { class: "data-cell__input" }, index.h("slot", { name: "content" }))) : (this.value && index.h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (index.h("div", { key: '85482b447cb0d16b3c738a78f943ae8fd26281d8', class: "data-cell__suffix" }, index.h("slot", { key: '0568683b289f22aed8aa6e0fc621c36d50b4d177', name: "suffix" }))))));
|
|
56
66
|
}
|
|
57
67
|
get el() { return index.getElement(this); }
|
|
58
68
|
};
|
|
@@ -13,13 +13,59 @@
|
|
|
13
13
|
gap: var(--s-space-8);
|
|
14
14
|
width: 100%;
|
|
15
15
|
padding: var(--s-space-12) var(--s-space-16);
|
|
16
|
+
border: 0;
|
|
16
17
|
border-radius: var(--swirl-data-cell-border-radius, var(--s-border-radius-l));
|
|
18
|
+
color: inherit;
|
|
19
|
+
font: inherit;
|
|
20
|
+
text-align: left;
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
-webkit-appearance: none;
|
|
23
|
+
-moz-appearance: none;
|
|
24
|
+
appearance: none;
|
|
17
25
|
}
|
|
18
26
|
|
|
19
27
|
.data-cell--interactive {
|
|
28
|
+
position: relative;
|
|
20
29
|
cursor: pointer;
|
|
21
30
|
}
|
|
22
31
|
|
|
32
|
+
.data-cell--interactive::after {
|
|
33
|
+
position: absolute;
|
|
34
|
+
inset: 0;
|
|
35
|
+
border-radius: inherit;
|
|
36
|
+
content: "";
|
|
37
|
+
pointer-events: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.data-cell--interactive:hover::after {
|
|
41
|
+
background-color: var(--s-state-hovered);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.data-cell--interactive:active::after {
|
|
45
|
+
background-color: var(--s-state-pressed);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.data-cell--interactive:focus:not(:focus-visible) {
|
|
49
|
+
outline: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.data-cell--interactive:focus-visible {
|
|
53
|
+
outline-color: var(--s-focus-default);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.data-cell--interactive.data-cell--intent-default:hover {
|
|
57
|
+
background-color: var(--s-surface-raised-50-hovered);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.data-cell--interactive.data-cell--intent-default:active {
|
|
61
|
+
background-color: var(--s-surface-raised-50-pressed);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.data-cell--interactive.data-cell--intent-default:hover::after,
|
|
65
|
+
.data-cell--interactive.data-cell--intent-default:active::after {
|
|
66
|
+
background-color: transparent;
|
|
67
|
+
}
|
|
68
|
+
|
|
23
69
|
/* Intent backgrounds */
|
|
24
70
|
.data-cell--intent-default {
|
|
25
71
|
background-color: var(--s-surface-raised-50-default);
|
|
@@ -53,6 +99,20 @@
|
|
|
53
99
|
background-color: var(--s-surface-raised-default);
|
|
54
100
|
}
|
|
55
101
|
|
|
102
|
+
.data-cell--size-s {
|
|
103
|
+
gap: var(--s-space-4);
|
|
104
|
+
padding: var(--s-space-8);
|
|
105
|
+
border-radius: var(--swirl-data-cell-border-radius, var(--s-border-radius-s));
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.data-cell--size-s .data-cell__content {
|
|
109
|
+
gap: var(--s-space-8);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.data-cell--size-s .data-cell__value {
|
|
113
|
+
font-weight: var(--s-font-weight-medium);
|
|
114
|
+
}
|
|
115
|
+
|
|
56
116
|
.data-cell--vertical {
|
|
57
117
|
align-items: center;
|
|
58
118
|
}
|
|
@@ -8,6 +8,8 @@ import classnames from "classnames";
|
|
|
8
8
|
export class SwirlDataCell {
|
|
9
9
|
constructor() {
|
|
10
10
|
this.intent = "default";
|
|
11
|
+
this.interactive = false;
|
|
12
|
+
this.size = "m";
|
|
11
13
|
this.vertical = false;
|
|
12
14
|
this.elementId = `data-cell-${crypto.randomUUID()}`;
|
|
13
15
|
this.handleRadioClick = (event) => {
|
|
@@ -34,13 +36,14 @@ export class SwirlDataCell {
|
|
|
34
36
|
"SWIRL-DATA-CELL");
|
|
35
37
|
const hasCheckbox = Boolean(this.el.querySelector('swirl-checkbox[slot="content"]'));
|
|
36
38
|
const hasRadio = Boolean(this.el.querySelector('swirl-radio[slot="content"]'));
|
|
37
|
-
const
|
|
39
|
+
const isInteractive = this.interactive || Boolean(this.href);
|
|
40
|
+
const className = classnames("data-cell", `data-cell--size-${this.size}`, {
|
|
38
41
|
"data-cell--vertical": this.vertical,
|
|
39
42
|
"data-cell--has-media": hasMedia,
|
|
40
43
|
"data-cell--has-suffix": hasSuffix,
|
|
41
44
|
"data-cell--has-content": hasContent,
|
|
42
45
|
"data-cell--no-label": !hasLabel,
|
|
43
|
-
"data-cell--interactive": hasCheckbox || hasRadio,
|
|
46
|
+
"data-cell--interactive": isInteractive || hasCheckbox || hasRadio,
|
|
44
47
|
[`data-cell--intent-${this.intent}`]: this.intent,
|
|
45
48
|
});
|
|
46
49
|
const labelId = `${this.elementId}-label`;
|
|
@@ -49,8 +52,15 @@ export class SwirlDataCell {
|
|
|
49
52
|
const hostRole = isInDataCellStack ? "listitem" : "group";
|
|
50
53
|
const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
|
|
51
54
|
const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
|
|
52
|
-
const
|
|
53
|
-
|
|
55
|
+
const Tag = Boolean(this.href) ? "a" : this.interactive ? "button" : "div";
|
|
56
|
+
const labelContent = (h("swirl-stack", { key: '02d9b33111b38a7e01c215ab22316e4702273d2f', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '7c214d31b78bc9ed73bef749144fb090845be335', class: "data-cell__label", id: labelId, role: isInteractive ? undefined : "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: '5507dcf689141cf6492a0e0ebbac7f6d30bb9571', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'ffd009f55337721081dd67811178625da5296395', size: 16, tabIndex: 0 })))));
|
|
57
|
+
return (h(Host, { key: '3938b80ef59b8499ca122057cb2a601215fe63ca', role: hostRole }, h(Tag, { key: 'd5e938b1e20cbd8ae35b3010e69655f04f31c4b3', class: className, href: this.href, onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, part: "data-cell", rel: Boolean(this.href) && this.linkTarget === "_blank"
|
|
58
|
+
? "noreferrer"
|
|
59
|
+
: undefined, role: isInteractive ? undefined : wrapperRole, tabIndex: isInteractive ? undefined : hasCheckbox || hasRadio ? 0 : undefined, target: this.linkTarget, type: Boolean(this.href)
|
|
60
|
+
? undefined
|
|
61
|
+
: this.interactive
|
|
62
|
+
? "button"
|
|
63
|
+
: undefined }, hasMedia && (h("div", { key: '11698c07d07a15d3e1402d5e7f06549ce12fec19', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: '6c98bbb53fae7915300beafb9dbecc35aff6287c', name: "media" }))), h("div", { key: '9370d31ac4d2d23dc0f40bb3ece90a608e182b83', class: "data-cell__content" }, hasLabel && (h("div", { key: 'a5ce98e4af9f182a159e15ca5b967a506f5771e3', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: '2360d1c1af966919370d00c44217314b7d91eece', class: "data-cell__value-wrapper", role: isInteractive ? undefined : "definition", "aria-labelledby": hasLabel && !isInteractive ? 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: '85482b447cb0d16b3c738a78f943ae8fd26281d8', class: "data-cell__suffix" }, h("slot", { key: '0568683b289f22aed8aa6e0fc621c36d50b4d177', name: "suffix" }))))));
|
|
54
64
|
}
|
|
55
65
|
static get is() { return "swirl-data-cell"; }
|
|
56
66
|
static get encapsulation() { return "shadow"; }
|
|
@@ -66,6 +76,25 @@ export class SwirlDataCell {
|
|
|
66
76
|
}
|
|
67
77
|
static get properties() {
|
|
68
78
|
return {
|
|
79
|
+
"href": {
|
|
80
|
+
"type": "string",
|
|
81
|
+
"mutable": false,
|
|
82
|
+
"complexType": {
|
|
83
|
+
"original": "string",
|
|
84
|
+
"resolved": "string",
|
|
85
|
+
"references": {}
|
|
86
|
+
},
|
|
87
|
+
"required": false,
|
|
88
|
+
"optional": true,
|
|
89
|
+
"docs": {
|
|
90
|
+
"tags": [],
|
|
91
|
+
"text": ""
|
|
92
|
+
},
|
|
93
|
+
"getter": false,
|
|
94
|
+
"setter": false,
|
|
95
|
+
"reflect": false,
|
|
96
|
+
"attribute": "href"
|
|
97
|
+
},
|
|
69
98
|
"intent": {
|
|
70
99
|
"type": "string",
|
|
71
100
|
"mutable": false,
|
|
@@ -92,6 +121,26 @@ export class SwirlDataCell {
|
|
|
92
121
|
"attribute": "intent",
|
|
93
122
|
"defaultValue": "\"default\""
|
|
94
123
|
},
|
|
124
|
+
"interactive": {
|
|
125
|
+
"type": "boolean",
|
|
126
|
+
"mutable": false,
|
|
127
|
+
"complexType": {
|
|
128
|
+
"original": "boolean",
|
|
129
|
+
"resolved": "boolean",
|
|
130
|
+
"references": {}
|
|
131
|
+
},
|
|
132
|
+
"required": false,
|
|
133
|
+
"optional": true,
|
|
134
|
+
"docs": {
|
|
135
|
+
"tags": [],
|
|
136
|
+
"text": ""
|
|
137
|
+
},
|
|
138
|
+
"getter": false,
|
|
139
|
+
"setter": false,
|
|
140
|
+
"reflect": false,
|
|
141
|
+
"attribute": "interactive",
|
|
142
|
+
"defaultValue": "false"
|
|
143
|
+
},
|
|
95
144
|
"label": {
|
|
96
145
|
"type": "string",
|
|
97
146
|
"mutable": false,
|
|
@@ -111,6 +160,51 @@ export class SwirlDataCell {
|
|
|
111
160
|
"reflect": false,
|
|
112
161
|
"attribute": "label"
|
|
113
162
|
},
|
|
163
|
+
"linkTarget": {
|
|
164
|
+
"type": "string",
|
|
165
|
+
"mutable": false,
|
|
166
|
+
"complexType": {
|
|
167
|
+
"original": "string",
|
|
168
|
+
"resolved": "string",
|
|
169
|
+
"references": {}
|
|
170
|
+
},
|
|
171
|
+
"required": false,
|
|
172
|
+
"optional": true,
|
|
173
|
+
"docs": {
|
|
174
|
+
"tags": [],
|
|
175
|
+
"text": ""
|
|
176
|
+
},
|
|
177
|
+
"getter": false,
|
|
178
|
+
"setter": false,
|
|
179
|
+
"reflect": false,
|
|
180
|
+
"attribute": "link-target"
|
|
181
|
+
},
|
|
182
|
+
"size": {
|
|
183
|
+
"type": "string",
|
|
184
|
+
"mutable": false,
|
|
185
|
+
"complexType": {
|
|
186
|
+
"original": "SwirlDataCellSize",
|
|
187
|
+
"resolved": "\"m\" | \"s\"",
|
|
188
|
+
"references": {
|
|
189
|
+
"SwirlDataCellSize": {
|
|
190
|
+
"location": "local",
|
|
191
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-data-cell/swirl-data-cell.tsx",
|
|
192
|
+
"id": "src/components/swirl-data-cell/swirl-data-cell.tsx::SwirlDataCellSize"
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
"required": false,
|
|
197
|
+
"optional": true,
|
|
198
|
+
"docs": {
|
|
199
|
+
"tags": [],
|
|
200
|
+
"text": ""
|
|
201
|
+
},
|
|
202
|
+
"getter": false,
|
|
203
|
+
"setter": false,
|
|
204
|
+
"reflect": true,
|
|
205
|
+
"attribute": "size",
|
|
206
|
+
"defaultValue": "\"m\""
|
|
207
|
+
},
|
|
114
208
|
"tooltip": {
|
|
115
209
|
"type": "string",
|
|
116
210
|
"mutable": false,
|
|
@@ -194,6 +194,27 @@ export const WithCheckbox = () => {
|
|
|
194
194
|
`;
|
|
195
195
|
return stack;
|
|
196
196
|
};
|
|
197
|
+
export const InteractiveCompactCells = () => {
|
|
198
|
+
const stack = generateStoryElement("swirl-data-cell-stack", {});
|
|
199
|
+
stack.innerHTML = `
|
|
200
|
+
<!-- Compact interactive cell -->
|
|
201
|
+
<swirl-data-cell interactive size="s" value="Feedback & Ideas">
|
|
202
|
+
<swirl-avatar slot="media" label="Feedback & Ideas" icon="<swirl-icon-chat-bubble></swirl-icon-chat-bubble>" size="s"></swirl-avatar>
|
|
203
|
+
</swirl-data-cell>
|
|
204
|
+
|
|
205
|
+
<!-- Compact interactive cell with a trailing tag -->
|
|
206
|
+
<swirl-data-cell interactive size="s" value="Approvals">
|
|
207
|
+
<swirl-avatar slot="media" label="Approvals" icon="<swirl-icon-chat-bubble></swirl-icon-chat-bubble>" size="s"></swirl-avatar>
|
|
208
|
+
<swirl-tag slot="suffix" label="Approval" intent="warning"></swirl-tag>
|
|
209
|
+
</swirl-data-cell>
|
|
210
|
+
|
|
211
|
+
<!-- Compact cell rendered as a link -->
|
|
212
|
+
<swirl-data-cell href="#" size="s" value="Announcements">
|
|
213
|
+
<swirl-avatar slot="media" label="Announcements" icon="<swirl-icon-chat-bubble></swirl-icon-chat-bubble>" size="s"></swirl-avatar>
|
|
214
|
+
</swirl-data-cell>
|
|
215
|
+
`;
|
|
216
|
+
return stack;
|
|
217
|
+
};
|
|
197
218
|
export const WithRadioButton = () => {
|
|
198
219
|
const stack = generateStoryElement("swirl-data-cell-stack", {});
|
|
199
220
|
stack.innerHTML = `
|
|
@@ -75,6 +75,30 @@
|
|
|
75
75
|
--swirl-data-cell-border-radius: var(--s-border-radius-l);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
+
.data-cell-stack__cells
|
|
79
|
+
::slotted(swirl-data-cell[size="s"]:first-of-type:not(:last-of-type)) {
|
|
80
|
+
--swirl-data-cell-border-radius: var(--s-border-radius-base)
|
|
81
|
+
var(--s-border-radius-base) var(--s-border-radius-s) var(--s-border-radius-s);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.data-cell-stack__cells
|
|
85
|
+
::slotted(swirl-data-cell[size="s"]:last-of-type:not(:first-of-type)) {
|
|
86
|
+
--swirl-data-cell-border-radius: var(--s-border-radius-s)
|
|
87
|
+
var(--s-border-radius-s) var(--s-border-radius-base) var(--s-border-radius-base);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.data-cell-stack__cells
|
|
91
|
+
::slotted(
|
|
92
|
+
swirl-data-cell[size="s"]:not(:first-of-type):not(:last-of-type)
|
|
93
|
+
) {
|
|
94
|
+
--swirl-data-cell-border-radius: var(--s-border-radius-s);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.data-cell-stack__cells
|
|
98
|
+
::slotted(swirl-data-cell[size="s"]:first-of-type:last-of-type) {
|
|
99
|
+
--swirl-data-cell-border-radius: var(--s-border-radius-base);
|
|
100
|
+
}
|
|
101
|
+
|
|
78
102
|
.data-cell-stack__cta {
|
|
79
103
|
display: flex;
|
|
80
104
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as a,HTMLElement as e,h as
|
|
1
|
+
import{proxyCustomElement as a,HTMLElement as e,h as s,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as r}from"./index2.js";const d=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+crypto.randomUUID(),this.onSlotChange=a=>{a.target.assignedElements().filter((a=>"SWIRL-DATA-CELL"!==a.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const a=!!this.el.querySelector('[slot="cta"]'),e=!!this.label&&!this.hideLabel,l=r("data-cell-stack",{"data-cell-stack--has-cta":a}),d=e?this.headerId+"-label":void 0,i=this.description?this.headerId+"-description":void 0;return s(t,{key:"14d6213f21bb5e162342389d3e89501d529e490b"},s("div",{key:"515c84a9eda22a77b9f9b5985412d56dfb6a8e07",class:l,part:"data-cell-stack",role:"group"},(e||this.description||a)&&s("header",{key:"3da984d135c10750099a3d11e79563033da059b9",class:"data-cell-stack__header",id:this.headerId},s("div",{key:"db3b9a71276d0340dd1d1c58755b1d38cef35ab4",class:"data-cell-stack__header-content"},e&&s("h3",{key:"30da89e037e37a7fa17b66b1e435651de49a0690",class:"data-cell-stack__label",id:d},this.label),this.description&&s("p",{key:"11fb9329d4a82dbb03e145d7ac8c476eec72dfba",class:"data-cell-stack__description",id:i},this.description)),a&&s("div",{key:"6279ad312fea30a67c6b4994ca6e1affba407216",class:"data-cell-stack__cta"},s("slot",{key:"e438aa0e938642b99510734ff7aa3a5186fab10c",name:"cta"}))),s("div",{key:"5cc83894daa410486ad4b3a9b264dfb8d5599829",class:"data-cell-stack__cells",role:"list","aria-labelledby":d||void 0,"aria-describedby":i||void 0},s("slot",{key:"782785d26eeb69614af9d2c9af8a7dbd896361b7",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return':host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l) var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-base) var(--s-border-radius-base) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-base) var(--s-border-radius-base)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-base)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}'}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),i=d,c=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((a=>{"swirl-data-cell-stack"===a&&(customElements.get(l(a))||customElements.define(l(a),d))}))};export{i as SwirlDataCellStack,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as l,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c}from"./index2.js";import{d as r}from"./swirl-icon-info2.js";import{d}from"./swirl-stack2.js";import{d as o}from"./swirl-tooltip2.js";const n=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=t(this,"valueChange",7),this.intent="default",this.interactive=!1,this.size="m",this.vertical=!1,this.elementId="data-cell-"+crypto.randomUUID(),this.handleRadioClick=e=>{const a=e.target,t=this.el.querySelector('swirl-radio[slot="content"]');if(a.contains(t)){const e=t?.querySelector('input[type="radio"]');e.click()}},this.handleClick=e=>{this.handleRadioClick(e),this.valueChange.emit(e)}}render(){const e=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="media"]')?.parentElement.tagName),a=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="suffix"]')?.parentElement.tagName),t=!!this.label,s=!("SWIRL-DATA-CELL"!==this.el.querySelector('[slot="content"]')?.parentElement.tagName),r=!!this.el.querySelector('swirl-checkbox[slot="content"]'),d=!!this.el.querySelector('swirl-radio[slot="content"]'),o=this.interactive||!!this.href,n=c("data-cell","data-cell--size-"+this.size,{"data-cell--vertical":this.vertical,"data-cell--has-media":e,"data-cell--has-suffix":a,"data-cell--has-content":s,"data-cell--no-label":!t,"data-cell--interactive":o||r||d,["data-cell--intent-"+this.intent]:this.intent}),f=this.elementId+"-label",u=this.elementId+"-value",v="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,b=v?"listitem":"group",h=r||d?"button":void 0,p=v&&!h?"group":h,w=this.href?"a":this.interactive?"button":"div",_=l("swirl-stack",{key:"02d9b33111b38a7e01c215ab22316e4702273d2f",orientation:"horizontal",align:"center",spacing:"4"},l("span",{key:"7c214d31b78bc9ed73bef749144fb090845be335",class:"data-cell__label",id:f,role:o?void 0:"term"},this.label),this.tooltip&&l("swirl-tooltip",{key:"5507dcf689141cf6492a0e0ebbac7f6d30bb9571",class:"data-cell__tooltip",content:this.tooltip,position:"right"},l("swirl-icon-info",{key:"ffd009f55337721081dd67811178625da5296395",size:16,tabIndex:0})));return l(i,{key:"3938b80ef59b8499ca122057cb2a601215fe63ca",role:b},l(w,{key:"d5e938b1e20cbd8ae35b3010e69655f04f31c4b3",class:n,href:this.href,onClick:r||d?this.handleClick:void 0,part:"data-cell",rel:this.href&&"_blank"===this.linkTarget?"noreferrer":void 0,role:o?void 0:p,tabIndex:o?void 0:r||d?0:void 0,target:this.linkTarget,type:this.href?void 0:this.interactive?"button":void 0},e&&l("div",{key:"11698c07d07a15d3e1402d5e7f06549ce12fec19",class:"data-cell__media","aria-hidden":"true"},l("slot",{key:"6c98bbb53fae7915300beafb9dbecc35aff6287c",name:"media"})),l("div",{key:"9370d31ac4d2d23dc0f40bb3ece90a608e182b83",class:"data-cell__content"},t&&l("div",{key:"a5ce98e4af9f182a159e15ca5b967a506f5771e3",class:"data-cell__label-wrapper"},_),(s||this.value||a)&&l("div",{key:"2360d1c1af966919370d00c44217314b7d91eece",class:"data-cell__value-wrapper",role:o?void 0:"definition","aria-labelledby":t&&!o?f:void 0,id:u},s?l("div",{class:"data-cell__input"},l("slot",{name:"content"})):this.value&&l("div",{class:"data-cell__value"},this.value))),a&&l("div",{key:"85482b447cb0d16b3c738a78f943ae8fd26281d8",class:"data-cell__suffix"},l("slot",{key:"0568683b289f22aed8aa6e0fc621c36d50b4d177",name:"suffix"}))))}get el(){return this}static get style(){return':host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border:0;border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l));color:inherit;font:inherit;text-align:left;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.data-cell--interactive{position:relative;cursor:pointer}.data-cell--interactive::after{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none}.data-cell--interactive:hover::after{background-color:var(--s-state-hovered)}.data-cell--interactive:active::after{background-color:var(--s-state-pressed)}.data-cell--interactive:focus:not(:focus-visible){outline:none}.data-cell--interactive:focus-visible{outline-color:var(--s-focus-default)}.data-cell--interactive.data-cell--intent-default:hover{background-color:var(--s-surface-raised-50-hovered)}.data-cell--interactive.data-cell--intent-default:active{background-color:var(--s-surface-raised-50-pressed)}.data-cell--interactive.data-cell--intent-default:hover::after,.data-cell--interactive.data-cell--intent-default:active::after{background-color:transparent}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--size-s{gap:var(--s-space-4);padding:var(--s-space-8);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-s))}.data-cell--size-s .data-cell__content{gap:var(--s-space-8)}.data-cell--size-s .data-cell__value{font-weight:var(--s-font-weight-medium)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}'}},[257,"swirl-data-cell",{href:[1],intent:[1],interactive:[4],label:[1],linkTarget:[1,"link-target"],size:[513],tooltip:[1],value:[1],vertical:[4]}]),f=n,u=function(){"undefined"!=typeof customElements&&["swirl-data-cell","swirl-icon-info","swirl-stack","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-data-cell":customElements.get(s(e))||customElements.define(s(e),n);break;case"swirl-icon-info":customElements.get(s(e))||r();break;case"swirl-stack":customElements.get(s(e))||d();break;case"swirl-tooltip":customElements.get(s(e))||o()}}))};export{f as SwirlDataCell,u as defineCustomElement}
|