@getflip/swirl-components 0.525.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 +144 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-avatar-group.cjs.entry.js +4 -7
- 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/cjs/swirl-modal.cjs.entry.js +11 -8
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css +22 -22
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js +3 -6
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js +14 -9
- 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/collection/components/swirl-modal/swirl-modal.js +30 -8
- package/dist/collection/components/swirl-modal/swirl-modal.stories.js +3 -0
- package/dist/components/swirl-avatar-group.js +1 -1
- package/dist/components/swirl-data-cell-stack.js +1 -1
- package/dist/components/swirl-data-cell.js +1 -1
- package/dist/components/swirl-modal.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-avatar-group.entry.js +4 -7
- 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/esm/swirl-modal.entry.js +11 -8
- package/dist/swirl-components/p-222adad0.entry.js +1 -0
- package/dist/swirl-components/p-9d0a7cfc.entry.js +1 -0
- package/dist/swirl-components/p-c451c3fe.entry.js +1 -0
- package/dist/swirl-components/p-e80f6555.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-avatar-group/swirl-avatar-group.stories.d.ts +1 -0
- 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/swirl-modal/swirl-modal.d.ts +1 -0
- package/dist/types/components/swirl-modal/swirl-modal.stories.d.ts +3 -0
- package/dist/types/components.d.ts +29 -2
- package/package.json +1 -1
- package/vscode-data.json +28 -0
- package/dist/swirl-components/p-0f092b29.entry.js +0 -1
- package/dist/swirl-components/p-25323c77.entry.js +0 -1
- 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
|
};
|
|
@@ -68,6 +68,9 @@ const SwirlModal = class {
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
this.onBackdropClick = () => {
|
|
71
|
+
if (this.disableBackdropClose) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
71
74
|
this.close();
|
|
72
75
|
};
|
|
73
76
|
this.onCloseButtonClick = () => {
|
|
@@ -295,29 +298,29 @@ const SwirlModal = class {
|
|
|
295
298
|
"modal--show-backdrop": this.showBackdrop === true,
|
|
296
299
|
"modal--hide-backdrop": this.showBackdrop === false,
|
|
297
300
|
});
|
|
298
|
-
return (index.h(index.Host, { key: '
|
|
301
|
+
return (index.h(index.Host, { key: '23fc47450954cdec1465b6cacc87665b74392b40' }, index.h("dialog", { key: 'bdee3e6f0b8903e63341b93e73525387d4878229', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '3b880ae4075a3249f2a56a424db3269183cc160d', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'df55123f4afffde7862c80f99166d4dcc28c227e', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
299
302
|
? {
|
|
300
303
|
"--swirl-modal-max-height": this.maxHeight,
|
|
301
304
|
"--swirl-modal-height": this.height,
|
|
302
305
|
minHeight: this.minHeight,
|
|
303
306
|
maxWidth: this.maxWidth,
|
|
304
307
|
}
|
|
305
|
-
: {} }, index.h("aside", { key: '
|
|
308
|
+
: {} }, index.h("aside", { key: 'f3b77cc6ef02ffe087f7e6701deb79c6edc0d45e', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: 'ed35b62a6ec6d77a9360ffa80b9effab505c4f4e', class: index$1.classnames("modal__sidebar-header", {
|
|
306
309
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
307
|
-
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '
|
|
310
|
+
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'd73cb3f8b8d032245a4efbb4fba158bde22e19d2', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '9529520318f4ee7ace2adb71927f2587c22c01b4', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: 'b9893e1d9193c99c53a33c02773e96d4611b3040', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '6086f942484525006d1de352ced3693f2afac73c', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), index.h("div", { key: '7911c4c01757dc9157a611558d7830997891032a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '4154270c217c274954ae83060fc31069e2696c2e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), index.h("div", { key: '5e78d1d3053ff0f54331ec072878084720b31110', class: "modal__main-content" }, index.h("header", { key: '84bf917f205c56a871e13fbcb749690bba1cbb06', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '5fd2bb6788938d18f9e40cfe42eaa8b36379e6ad', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'c6c03d149d8e1c15e491e1ed7071821348b76c1f', class: "modal__header" }, index.h("div", { key: '45235c736ee6686599513f1f80bff3b68c0a100e', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '2c6edcc7f1bcd33fcf880fa48567f6eddc067afd', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
308
311
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
309
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '
|
|
312
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '673043a824362619f11c54f31a15fa9477117883', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
310
313
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
311
314
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
312
315
|
? this.fullscreenDisableButtonLabel
|
|
313
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '
|
|
316
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '1719c5b97263cf10c305770607eb1ea7145acb51', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'c32ad1be58ce0bfd733a059fabc88411a810de30', class: "modal__content-container", style: {
|
|
314
317
|
gap: this.contentGap
|
|
315
318
|
? `var(--s-space-${this.contentGap})`
|
|
316
319
|
: undefined,
|
|
317
|
-
} }, index.h("div", { key: '
|
|
320
|
+
} }, index.h("div", { key: '8d7a796fc546b0b7bebfa213f831c628393f9dfe', class: "modal__primary-content", style: {
|
|
318
321
|
maxWidth: this.primaryContentMaxWidth,
|
|
319
322
|
flex: this.primaryContentFlex,
|
|
320
|
-
} }, index.h("div", { key: '
|
|
323
|
+
} }, index.h("div", { key: '7299870c633ed4456d08d22dc1eb750e4898b41c', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '27b39b1bbceb3890fd3f2dea32642a901c87c076', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), index.h("div", { key: 'f8336f9a3638c1e9285d94900764f09293aa6c30', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '57fad6f717f5256c938b0142b88c42d59dc968e3' }))), index.h("div", { key: '05ab11a1b5ff7804a6b56041fdfcf4230f414ba4', class: "modal__secondary-content", style: {
|
|
321
324
|
maxWidth: this.secondaryContentMaxWidth,
|
|
322
325
|
flex: this.secondaryContentFlex,
|
|
323
326
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -335,7 +338,7 @@ const SwirlModal = class {
|
|
|
335
338
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
336
339
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
337
340
|
: undefined,
|
|
338
|
-
} }, index.h("slot", { key: '
|
|
341
|
+
} }, index.h("slot", { key: '6602b580cc959944932c42bfe74f838fa7dc37a4', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), index.h("div", { key: '17afe035cebb37925f6cf912448a29db22359ee6', class: "modal__custom-footer" }, index.h("slot", { key: '44c6d8340fc1b9c32521cc61ed0b5b4cee37ec50', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (index.h("footer", { key: '6e7732616ce97db76e752bdd8c3e540d380c3fe7', class: "modal__controls" }, index.h("swirl-button-group", { key: '146060354a8cd62c236d025b576ef48a357be7f2', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'eabd37aa403ab8b87fc6edb76821f3ccb25e8f7d', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '6988e29d8e1caf2faa8dfbbce0ef454e4552fdee', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
339
342
|
}
|
|
340
343
|
get el() { return index.getElement(this); }
|
|
341
344
|
};
|
|
@@ -91,25 +91,9 @@
|
|
|
91
91
|
display: none;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
.avatar-group--centered-2 ::slotted(:nth-child(1)) {
|
|
95
|
-
z-index: 2;
|
|
96
|
-
box-shadow: var(--s-shadow-level-2);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.avatar-group--centered-2 ::slotted(:nth-child(2)) {
|
|
100
|
-
z-index: 1;
|
|
101
|
-
transform: scale(0.833333);
|
|
102
|
-
margin-right: calc(var(--swirl-avatar-size) * -0.083333);
|
|
103
|
-
margin-left: calc(var(--swirl-avatar-size) * -0.333333);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.avatar-group--centered-2 ::slotted(:nth-child(n + 3)) {
|
|
107
|
-
display: none;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
94
|
/* centre */
|
|
111
95
|
|
|
112
|
-
.avatar-group--centered-3 ::slotted(:nth-child(1)) {
|
|
96
|
+
.avatar-group--centered-2 ::slotted(:nth-child(1)), .avatar-group--centered-3 ::slotted(:nth-child(1)) {
|
|
113
97
|
z-index: 2;
|
|
114
98
|
order: 2;
|
|
115
99
|
margin-left: calc(var(--swirl-avatar-size) * -0.333333);
|
|
@@ -118,7 +102,7 @@
|
|
|
118
102
|
|
|
119
103
|
/* right */
|
|
120
104
|
|
|
121
|
-
.avatar-group--centered-3 ::slotted(:nth-child(2)) {
|
|
105
|
+
.avatar-group--centered-2 ::slotted(:nth-child(2)), .avatar-group--centered-3 ::slotted(:nth-child(2)) {
|
|
122
106
|
z-index: 1;
|
|
123
107
|
order: 3;
|
|
124
108
|
transform: scale(0.833333);
|
|
@@ -126,6 +110,14 @@
|
|
|
126
110
|
margin-left: calc(var(--swirl-avatar-size) * -0.333333);
|
|
127
111
|
}
|
|
128
112
|
|
|
113
|
+
.avatar-group--centered-2 ::slotted(:nth-child(1)) {
|
|
114
|
+
margin-left: calc(var(--swirl-avatar-size) * 0.583334);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.avatar-group--centered-2 ::slotted(:nth-child(n + 3)) {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
129
121
|
/* left */
|
|
130
122
|
|
|
131
123
|
.avatar-group--centered-3 ::slotted(:nth-child(3)) {
|
|
@@ -141,7 +133,7 @@
|
|
|
141
133
|
|
|
142
134
|
/* centre */
|
|
143
135
|
|
|
144
|
-
.avatar-group--centered-5 ::slotted(:nth-child(1)) {
|
|
136
|
+
.avatar-group--centered-4 ::slotted(:nth-child(1)), .avatar-group--centered-5 ::slotted(:nth-child(1)) {
|
|
145
137
|
z-index: 3;
|
|
146
138
|
order: 3;
|
|
147
139
|
margin-left: calc(var(--swirl-avatar-size) * -0.333333);
|
|
@@ -150,7 +142,7 @@
|
|
|
150
142
|
|
|
151
143
|
/* inner right */
|
|
152
144
|
|
|
153
|
-
.avatar-group--centered-5 ::slotted(:nth-child(2)) {
|
|
145
|
+
.avatar-group--centered-4 ::slotted(:nth-child(2)), .avatar-group--centered-5 ::slotted(:nth-child(2)) {
|
|
154
146
|
z-index: 2;
|
|
155
147
|
order: 4;
|
|
156
148
|
transform: scale(0.833333);
|
|
@@ -159,7 +151,7 @@
|
|
|
159
151
|
|
|
160
152
|
/* inner left */
|
|
161
153
|
|
|
162
|
-
.avatar-group--centered-5 ::slotted(:nth-child(3)) {
|
|
154
|
+
.avatar-group--centered-4 ::slotted(:nth-child(3)), .avatar-group--centered-5 ::slotted(:nth-child(3)) {
|
|
163
155
|
z-index: 2;
|
|
164
156
|
order: 2;
|
|
165
157
|
transform: scale(0.833333);
|
|
@@ -168,7 +160,7 @@
|
|
|
168
160
|
|
|
169
161
|
/* outer right */
|
|
170
162
|
|
|
171
|
-
.avatar-group--centered-5 ::slotted(:nth-child(4)) {
|
|
163
|
+
.avatar-group--centered-4 ::slotted(:nth-child(4)), .avatar-group--centered-5 ::slotted(:nth-child(4)) {
|
|
172
164
|
z-index: 1;
|
|
173
165
|
order: 5;
|
|
174
166
|
transform: scale(0.666667);
|
|
@@ -176,6 +168,14 @@
|
|
|
176
168
|
margin-left: calc(var(--swirl-avatar-size) * -0.5);
|
|
177
169
|
}
|
|
178
170
|
|
|
171
|
+
.avatar-group--centered-4 ::slotted(:nth-child(3)) {
|
|
172
|
+
margin-left: calc(var(--swirl-avatar-size) * 0.333333);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.avatar-group--centered-4 ::slotted(:nth-child(n + 5)) {
|
|
176
|
+
display: none;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
179
|
/* outer left */
|
|
180
180
|
|
|
181
181
|
.avatar-group--centered-5 ::slotted(:nth-child(5)) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
-
const
|
|
3
|
+
const maxCenteredLayoutAvatars = 5;
|
|
4
4
|
/**
|
|
5
5
|
* @slot slot - Your avatar components
|
|
6
6
|
*/
|
|
@@ -42,10 +42,7 @@ export class SwirlAvatarGroup {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
getCenteredArrangement() {
|
|
45
|
-
|
|
46
|
-
return fittingArrangements.length > 0
|
|
47
|
-
? fittingArrangements[fittingArrangements.length - 1]
|
|
48
|
-
: centeredLayoutArrangements[0];
|
|
45
|
+
return Math.min(Math.max(this.avatars.length, 1), maxCenteredLayoutAvatars);
|
|
49
46
|
}
|
|
50
47
|
render() {
|
|
51
48
|
const className = classnames("avatar-group", `avatar-group--${this.layout}-stack`, {
|
|
@@ -53,7 +50,7 @@ export class SwirlAvatarGroup {
|
|
|
53
50
|
[`avatar-group--centered-${this.getCenteredArrangement()}`]: this.layout === "centered",
|
|
54
51
|
});
|
|
55
52
|
const badgeClassName = classnames("avatar-group__badge");
|
|
56
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: '43c20e73e894ae03d53b90d95dcd16db43e50ccd' }, h("div", { key: '8b7bdf46aab2a02702bcdbd5b3544b1fa27f7779', "aria-label": this.label, class: className, role: this.semantics }, h("slot", { key: 'e5ace98ce81e1519916e5a79158c48c56b2f19ab', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '6f229b7a50e9d02487f662952a168c9202e26c38', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
|
|
57
54
|
}
|
|
58
55
|
static get is() { return "swirl-avatar-group"; }
|
|
59
56
|
static get encapsulation() { return "shadow"; }
|
|
@@ -60,18 +60,23 @@ export const WithSquareAvatars = TemplateWithSquareAvatars.bind({});
|
|
|
60
60
|
WithSquareAvatars.args = {
|
|
61
61
|
layout: "horizontal",
|
|
62
62
|
};
|
|
63
|
-
const
|
|
63
|
+
const centeredLayoutAvatarMarkup = [
|
|
64
|
+
`<swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="l" variant="square"></swirl-avatar>`,
|
|
65
|
+
`<swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="l" variant="square"></swirl-avatar>`,
|
|
66
|
+
`<swirl-avatar label="Jane Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="l" variant="square"></swirl-avatar>`,
|
|
67
|
+
`<swirl-avatar label="John Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=d" size="l" variant="square"></swirl-avatar>`,
|
|
68
|
+
`<swirl-avatar label="Jane Smith" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=e" size="l" variant="square"></swirl-avatar>`,
|
|
69
|
+
];
|
|
70
|
+
const createCenteredLayoutTemplate = (count) => (args) => {
|
|
64
71
|
const element = generateStoryElement("swirl-avatar-group", args);
|
|
65
|
-
element.innerHTML =
|
|
66
|
-
<swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="l" variant="square"></swirl-avatar>
|
|
67
|
-
<swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="l" variant="square"></swirl-avatar>
|
|
68
|
-
<swirl-avatar label="Jane Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="l" variant="square"></swirl-avatar>
|
|
69
|
-
<swirl-avatar label="John Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=d" size="l" variant="square"></swirl-avatar>
|
|
70
|
-
<swirl-avatar label="Jane Smith" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=e" size="l" variant="square"></swirl-avatar>
|
|
71
|
-
`;
|
|
72
|
+
element.innerHTML = centeredLayoutAvatarMarkup.slice(0, count).join("\n");
|
|
72
73
|
return element;
|
|
73
74
|
};
|
|
74
|
-
export const WithCenteredLayout =
|
|
75
|
+
export const WithCenteredLayout = createCenteredLayoutTemplate(5).bind({});
|
|
75
76
|
WithCenteredLayout.args = {
|
|
76
77
|
layout: "centered",
|
|
77
78
|
};
|
|
79
|
+
export const WithCenteredLayoutTwoAvatars = createCenteredLayoutTemplate(2).bind({});
|
|
80
|
+
WithCenteredLayoutTwoAvatars.args = {
|
|
81
|
+
layout: "centered",
|
|
82
|
+
};
|
|
@@ -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;
|