@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
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BdGaOt5L.js';
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
|
|
4
|
-
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}}`;
|
|
4
|
+
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}}`;
|
|
5
5
|
|
|
6
6
|
const SwirlDataCell = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.valueChange = createEvent(this, "valueChange", 7);
|
|
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 @@ const SwirlDataCell = class {
|
|
|
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 @@ const SwirlDataCell = class {
|
|
|
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
|
get el() { return getElement(this); }
|
|
56
66
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,c as e,h as t,a as l,d as i}from"./p-BdGaOt5L.js";import{c}from"./p-orsBiyT_.js";const s=class{constructor(t){a(this,t),this.valueChange=e(this,"valueChange",7),this.intent="default",this.interactive=!1,this.size="m",this.vertical=!1,this.elementId=`data-cell-${crypto.randomUUID()}`,this.handleRadioClick=a=>{const e=a.target,t=this.el.querySelector('swirl-radio[slot="content"]');if(e.contains(t)){const a=t?.querySelector('input[type="radio"]');a.click()}},this.handleClick=a=>{this.handleRadioClick(a),this.valueChange.emit(a)}}render(){const a=Boolean("SWIRL-DATA-CELL"===this.el.querySelector('[slot="media"]')?.parentElement.tagName),e=Boolean("SWIRL-DATA-CELL"===this.el.querySelector('[slot="suffix"]')?.parentElement.tagName),i=Boolean(this.label),s=Boolean("SWIRL-DATA-CELL"===this.el.querySelector('[slot="content"]')?.parentElement.tagName),r=Boolean(this.el.querySelector('swirl-checkbox[slot="content"]')),d=Boolean(this.el.querySelector('swirl-radio[slot="content"]')),o=this.interactive||Boolean(this.href),n=c("data-cell",`data-cell--size-${this.size}`,{"data-cell--vertical":this.vertical,"data-cell--has-media":a,"data-cell--has-suffix":e,"data-cell--has-content":s,"data-cell--no-label":!i,"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,_=Boolean(this.href)?"a":this.interactive?"button":"div",g=t("swirl-stack",{key:"02d9b33111b38a7e01c215ab22316e4702273d2f",orientation:"horizontal",align:"center",spacing:"4"},t("span",{key:"7c214d31b78bc9ed73bef749144fb090845be335",class:"data-cell__label",id:f,role:o?void 0:"term"},this.label),this.tooltip&&t("swirl-tooltip",{key:"5507dcf689141cf6492a0e0ebbac7f6d30bb9571",class:"data-cell__tooltip",content:this.tooltip,position:"right"},t("swirl-icon-info",{key:"ffd009f55337721081dd67811178625da5296395",size:16,tabIndex:0})));return t(l,{key:"3938b80ef59b8499ca122057cb2a601215fe63ca",role:b},t(_,{key:"d5e938b1e20cbd8ae35b3010e69655f04f31c4b3",class:n,href:this.href,onClick:r||d?this.handleClick:void 0,part:"data-cell",rel:Boolean(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:Boolean(this.href)?void 0:this.interactive?"button":void 0},a&&t("div",{key:"11698c07d07a15d3e1402d5e7f06549ce12fec19",class:"data-cell__media","aria-hidden":"true"},t("slot",{key:"6c98bbb53fae7915300beafb9dbecc35aff6287c",name:"media"})),t("div",{key:"9370d31ac4d2d23dc0f40bb3ece90a608e182b83",class:"data-cell__content"},i&&t("div",{key:"a5ce98e4af9f182a159e15ca5b967a506f5771e3",class:"data-cell__label-wrapper"},g),(s||this.value||e)&&t("div",{key:"2360d1c1af966919370d00c44217314b7d91eece",class:"data-cell__value-wrapper",role:o?void 0:"definition","aria-labelledby":i&&!o?f:void 0,id:u},s?t("div",{class:"data-cell__input"},t("slot",{name:"content"})):this.value&&t("div",{class:"data-cell__value"},this.value))),e&&t("div",{key:"85482b447cb0d16b3c738a78f943ae8fd26281d8",class:"data-cell__suffix"},t("slot",{key:"0568683b289f22aed8aa6e0fc621c36d50b4d177",name:"suffix"}))))}get el(){return i(this)}};s.style=':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}}';export{s as swirl_data_cell}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,h as s,a as e,d as l}from"./p-BdGaOt5L.js";import{c as t}from"./p-orsBiyT_.js";const r=class{constructor(s){a(this,s),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=Boolean(this.el.querySelector('[slot="cta"]')),l=Boolean(this.label)&&!this.hideLabel,r=t("data-cell-stack",{"data-cell-stack--has-cta":a}),d=l?`${this.headerId}-label`:void 0,i=this.description?`${this.headerId}-description`:void 0;return s(e,{key:"14d6213f21bb5e162342389d3e89501d529e490b"},s("div",{key:"515c84a9eda22a77b9f9b5985412d56dfb6a8e07",class:r,part:"data-cell-stack",role:"group"},(l||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"},l&&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 l(this)}};r.style=':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}';export{r as swirl_data_cell_stack}
|