@getflip/swirl-components 0.526.0 → 0.527.0

package/dist/types/components.d.ts

@@ -25,7 +25,7 @@ import { SwirlCarouselFadeColor, SwirlCarouselPadding, SwirlCarouselSpacing } fr
 import { SwirlCheckboxLabelWeight, SwirlCheckboxState, SwirlCheckboxVariant } from "./components/swirl-checkbox/swirl-checkbox";
 import { SwirlChipIconColor, SwirlChipIntent } from "./components/swirl-chip/swirl-chip";
 import { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
-import { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
+import { SwirlDataCellIntent, SwirlDataCellSize } from "./components/swirl-data-cell/swirl-data-cell";
 import { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 import { SwirlButtonGroupOrientation as SwirlButtonGroupOrientation1 } from "./components/swirl-button-group/swirl-button-group";
 import { SwirlDialogIntent, SwirlDialogSize } from "./components/swirl-dialog/swirl-dialog";
@@ -109,7 +109,7 @@ export { SwirlCarouselFadeColor, SwirlCarouselPadding, SwirlCarouselSpacing } fr
 export { SwirlCheckboxLabelWeight, SwirlCheckboxState, SwirlCheckboxVariant } from "./components/swirl-checkbox/swirl-checkbox";
 export { SwirlChipIconColor, SwirlChipIntent } from "./components/swirl-chip/swirl-chip";
 export { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
-export { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
+export { SwirlDataCellIntent, SwirlDataCellSize } from "./components/swirl-data-cell/swirl-data-cell";
 export { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 export { SwirlButtonGroupOrientation as SwirlButtonGroupOrientation1 } from "./components/swirl-button-group/swirl-button-group";
 export { SwirlDialogIntent, SwirlDialogSize } from "./components/swirl-dialog/swirl-dialog";
@@ -838,11 +838,21 @@ export namespace Components {
         "toggleSidebar": () => Promise<void>;
     }
     interface SwirlDataCell {
+        "href"?: string;
         /**
           * @default "default"
          */
         "intent"?: SwirlDataCellIntent;
+        /**
+          * @default false
+         */
+        "interactive"?: boolean;
         "label"?: string;
+        "linkTarget"?: string;
+        /**
+          * @default "m"
+         */
+        "size"?: SwirlDataCellSize;
         "tooltip"?: string;
         "value"?: string;
         /**
@@ -11334,12 +11344,22 @@ declare namespace LocalJSX {
         "subheading"?: string;
     }
     interface SwirlDataCell {
+        "href"?: string;
         /**
           * @default "default"
          */
         "intent"?: SwirlDataCellIntent;
+        /**
+          * @default false
+         */
+        "interactive"?: boolean;
         "label"?: string;
+        "linkTarget"?: string;
         "onValueChange"?: (event: SwirlDataCellCustomEvent<MouseEvent>) => void;
+        /**
+          * @default "m"
+         */
+        "size"?: SwirlDataCellSize;
         "tooltip"?: string;
         "value"?: string;
         /**
@@ -16579,8 +16599,12 @@ declare namespace LocalJSX {
         "hideContentHeader": boolean;
     }
     interface SwirlDataCellAttributes {
+        "href": string;
         "intent": SwirlDataCellIntent;
+        "interactive": boolean;
         "label": string;
+        "linkTarget": string;
+        "size": SwirlDataCellSize;
         "tooltip": string;
         "value": string;
         "vertical": boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.526.0",
+  "version": "0.527.0",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/vscode-data.json

@@ -2718,6 +2718,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "href",
+          "description": ""
+        },
         {
           "name": "intent",
           "description": "",
@@ -2748,10 +2752,30 @@
             }
           ]
         },
+        {
+          "name": "interactive",
+          "description": ""
+        },
         {
           "name": "label",
           "description": ""
         },
+        {
+          "name": "link-target",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "description": "",
+          "values": [
+            {
+              "name": "m"
+            },
+            {
+              "name": "s"
+            }
+          ]
+        },
         {
           "name": "tooltip",
           "description": ""

package/dist/swirl-components/p-2b5d5d76.entry.js

@@ -1 +0,0 @@
-import{r as a,c as e,h as l,a as t,d as i}from"./p-BdGaOt5L.js";import{c}from"./p-orsBiyT_.js";const s=class{constructor(l){a(this,l),this.valueChange=e(this,"valueChange",7),this.intent="default",this.vertical=!1,this.elementId=`data-cell-${crypto.randomUUID()}`,this.handleRadioClick=a=>{const e=a.target,l=this.el.querySelector('swirl-radio[slot="content"]');if(e.contains(l)){const a=l?.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),d=Boolean(this.el.querySelector('swirl-checkbox[slot="content"]')),r=Boolean(this.el.querySelector('swirl-radio[slot="content"]')),o=c("data-cell",{"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":d||r,[`data-cell--intent-${this.intent}`]:this.intent}),n=`${this.elementId}-label`,f=`${this.elementId}-value`,u="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,b=u?"listitem":"group",h=d||r?"button":void 0,p=u&&!h?"group":h,v=l("swirl-stack",{key:"1a8d3ade2a5ce41b4ff0f81500def7aa4381f2d9",orientation:"horizontal",align:"center",spacing:"4"},l("span",{key:"2eb9b618b7ef03428c1540e6d3374af952ab0b89",class:"data-cell__label",id:n,role:"term"},this.label),this.tooltip&&l("swirl-tooltip",{key:"8d286960ce1806dd24f364ef10cb1ff4fc5e8028",class:"data-cell__tooltip",content:this.tooltip,position:"right"},l("swirl-icon-info",{key:"b35a894b40da6ec61229c63fe709e0aa303a8573",size:16,tabIndex:0})));return l(t,{key:"24d2c5a77d20a67d6c8de7242c74b4820f09146a",role:b},l("div",{key:"4e1c083711986f3f206f799505da137661466ff6",class:o,part:"data-cell",onClick:d||r?this.handleClick:void 0,role:p,tabIndex:d||r?0:void 0},a&&l("div",{key:"035d177d63dbe189633d4c121f3ef5cc6d3f680d",class:"data-cell__media","aria-hidden":"true"},l("slot",{key:"4dd8f0a1625531ad1e31e52c4aff6e4c7ef180bb",name:"media"})),l("div",{key:"7802b89ea49b36281097aa57c4cdf7cdb996b5cf",class:"data-cell__content"},i&&l("div",{key:"cbd0d077017af1dc7ffecaf1a4b0eb9e3d72ce29",class:"data-cell__label-wrapper"},v),(s||this.value||e)&&l("div",{key:"b43be51eda47779f425e4653269989732aef15ba",class:"data-cell__value-wrapper",role:"definition","aria-labelledby":i?n:void 0,id:f},s?l("div",{class:"data-cell__input"},l("slot",{name:"content"})):this.value&&l("div",{class:"data-cell__value"},this.value))),e&&l("div",{key:"7a2f4d6ca3f9865b35d0320120d38d41cf404cb7",class:"data-cell__suffix"},l("slot",{key:"1a6f4e9464eeaca483a97b7c051ba0042e38d37e",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-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}}";export{s as swirl_data_cell}

package/dist/swirl-components/p-c24c27fd.entry.js

@@ -1 +0,0 @@
-import{r as a,h as e,a as s,d as t}from"./p-BdGaOt5L.js";import{c as l}from"./p-orsBiyT_.js";const d=class{constructor(e){a(this,e),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"]')),t=Boolean(this.label)&&!this.hideLabel,d=l("data-cell-stack",{"data-cell-stack--has-cta":a}),r=t?`${this.headerId}-label`:void 0,c=this.description?`${this.headerId}-description`:void 0;return e(s,{key:"14d6213f21bb5e162342389d3e89501d529e490b"},e("div",{key:"515c84a9eda22a77b9f9b5985412d56dfb6a8e07",class:d,part:"data-cell-stack",role:"group"},(t||this.description||a)&&e("header",{key:"3da984d135c10750099a3d11e79563033da059b9",class:"data-cell-stack__header",id:this.headerId},e("div",{key:"db3b9a71276d0340dd1d1c58755b1d38cef35ab4",class:"data-cell-stack__header-content"},t&&e("h3",{key:"30da89e037e37a7fa17b66b1e435651de49a0690",class:"data-cell-stack__label",id:r},this.label),this.description&&e("p",{key:"11fb9329d4a82dbb03e145d7ac8c476eec72dfba",class:"data-cell-stack__description",id:c},this.description)),a&&e("div",{key:"6279ad312fea30a67c6b4994ca6e1affba407216",class:"data-cell-stack__cta"},e("slot",{key:"e438aa0e938642b99510734ff7aa3a5186fab10c",name:"cta"}))),e("div",{key:"5cc83894daa410486ad4b3a9b264dfb8d5599829",class:"data-cell-stack__cells",role:"list","aria-labelledby":r||void 0,"aria-describedby":c||void 0},e("slot",{key:"782785d26eeb69614af9d2c9af8a7dbd896361b7",onSlotchange:this.onSlotChange}))))}get el(){return t(this)}};d.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__cta{display:flex;align-items:center;flex-shrink:0}";export{d as swirl_data_cell_stack}