@getflip/swirl-components 0.524.0 → 0.526.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 +72 -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-modal.cjs.entry.js +11 -8
- package/dist/cjs/swirl-tag.cjs.entry.js +12 -3
- 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-modal/swirl-modal.js +30 -8
- package/dist/collection/components/swirl-modal/swirl-modal.stories.js +3 -0
- package/dist/collection/components/swirl-tag/swirl-tag.css +30 -0
- package/dist/collection/components/swirl-tag/swirl-tag.js +50 -2
- package/dist/components/swirl-avatar-group.js +1 -1
- package/dist/components/swirl-modal.js +1 -1
- package/dist/components/swirl-tag2.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-modal.entry.js +11 -8
- package/dist/esm/swirl-tag.entry.js +12 -3
- package/dist/swirl-components/p-c451c3fe.entry.js +1 -0
- package/dist/swirl-components/p-dff515cc.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-modal/swirl-modal.d.ts +1 -0
- package/dist/types/components/swirl-modal/swirl-modal.stories.d.ts +3 -0
- package/dist/types/components/swirl-tag/swirl-tag.d.ts +3 -0
- package/dist/types/components.d.ts +14 -0
- package/package.json +1 -1
- package/vscode-data.json +8 -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-acba183a.entry.js +0 -1
|
@@ -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
|
};
|
|
@@ -3,20 +3,25 @@
|
|
|
3
3
|
var index = require('./index-DfC2lanl.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
const swirlTagCss = () => `:host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}`;
|
|
6
|
+
const swirlTagCss = () => `:host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag--interactive{position:relative;font-family:inherit;cursor:pointer}.tag--interactive::after{position:absolute;border-radius:inherit;content:"";inset:calc(-1 * var(--s-border-width-default));pointer-events:none}.tag--interactive:hover::after{background-color:var(--s-state-hovered)}.tag--interactive:active::after{background-color:var(--s-state-pressed)}.tag--interactive:focus:not(:focus-visible){outline:none}.tag--interactive:focus-visible{outline-color:var(--s-focus-default)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}`;
|
|
7
7
|
|
|
8
8
|
const SwirlTag = class {
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
index.registerInstance(this, hostRef);
|
|
11
11
|
this.removeTag = index.createEvent(this, "remove", 7);
|
|
12
|
+
this.tagClick = index.createEvent(this, "tagClick", 7);
|
|
12
13
|
this.iconPosition = "start";
|
|
13
14
|
this.intent = "default";
|
|
15
|
+
this.interactive = false;
|
|
14
16
|
this.size = "m";
|
|
15
17
|
this.removalButtonLabel = "Remove";
|
|
16
18
|
this.variant = "default";
|
|
17
19
|
this.onRemove = (event) => {
|
|
18
20
|
this.removeTag?.emit(event);
|
|
19
21
|
};
|
|
22
|
+
this.onClick = (event) => {
|
|
23
|
+
this.tagClick.emit(event);
|
|
24
|
+
};
|
|
20
25
|
}
|
|
21
26
|
componentDidLoad() {
|
|
22
27
|
this.forceIconProps();
|
|
@@ -38,8 +43,12 @@ const SwirlTag = class {
|
|
|
38
43
|
}
|
|
39
44
|
}
|
|
40
45
|
render() {
|
|
41
|
-
const
|
|
42
|
-
|
|
46
|
+
const Tag = this.interactive ? "button" : "span";
|
|
47
|
+
const className = index$1.classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, {
|
|
48
|
+
"tag--hide-label": this.hideLabel,
|
|
49
|
+
"tag--interactive": this.interactive,
|
|
50
|
+
});
|
|
51
|
+
return (index.h(index.Host, { key: '9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a' }, index.h(Tag, { key: '99dc3fb14fd345e4275bb8442be97fd254080c30', class: className, onClick: this.interactive ? this.onClick : undefined, part: "tag", tabIndex: this.interactive && this.el.ariaHidden === "true" ? -1 : undefined, type: this.interactive ? "button" : undefined }, this.icon && (index.h("span", { key: 'ee15018f6a8aa37397f235e7e10c32a567cc63d7', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (index.h("span", { class: "tag__label" }, this.label)) : (index.h("swirl-visually-hidden", null, this.label)), this.removable && (index.h("button", { key: '63fe4e28921608f31474a7a2698193b83cd065e9', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: '51d9a82d4a1632c4b990e14ff170d14eeb3c2b45', size: 16 }))))));
|
|
43
52
|
}
|
|
44
53
|
get el() { return index.getElement(this); }
|
|
45
54
|
};
|
|
@@ -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
|
+
};
|
|
@@ -63,6 +63,9 @@ export class SwirlModal {
|
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
this.onBackdropClick = () => {
|
|
66
|
+
if (this.disableBackdropClose) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
66
69
|
this.close();
|
|
67
70
|
};
|
|
68
71
|
this.onCloseButtonClick = () => {
|
|
@@ -290,29 +293,29 @@ export class SwirlModal {
|
|
|
290
293
|
"modal--show-backdrop": this.showBackdrop === true,
|
|
291
294
|
"modal--hide-backdrop": this.showBackdrop === false,
|
|
292
295
|
});
|
|
293
|
-
return (h(Host, { key: '
|
|
296
|
+
return (h(Host, { key: '23fc47450954cdec1465b6cacc87665b74392b40' }, h("dialog", { key: 'bdee3e6f0b8903e63341b93e73525387d4878229', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '3b880ae4075a3249f2a56a424db3269183cc160d', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'df55123f4afffde7862c80f99166d4dcc28c227e', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
294
297
|
? {
|
|
295
298
|
"--swirl-modal-max-height": this.maxHeight,
|
|
296
299
|
"--swirl-modal-height": this.height,
|
|
297
300
|
minHeight: this.minHeight,
|
|
298
301
|
maxWidth: this.maxWidth,
|
|
299
302
|
}
|
|
300
|
-
: {} }, h("aside", { key: '
|
|
303
|
+
: {} }, h("aside", { key: 'f3b77cc6ef02ffe087f7e6701deb79c6edc0d45e', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'ed35b62a6ec6d77a9360ffa80b9effab505c4f4e', class: classnames("modal__sidebar-header", {
|
|
301
304
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
302
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
305
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'd73cb3f8b8d032245a4efbb4fba158bde22e19d2', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '9529520318f4ee7ace2adb71927f2587c22c01b4', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'b9893e1d9193c99c53a33c02773e96d4611b3040', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '6086f942484525006d1de352ced3693f2afac73c', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: '7911c4c01757dc9157a611558d7830997891032a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '4154270c217c274954ae83060fc31069e2696c2e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '5e78d1d3053ff0f54331ec072878084720b31110', class: "modal__main-content" }, h("header", { key: '84bf917f205c56a871e13fbcb749690bba1cbb06', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '5fd2bb6788938d18f9e40cfe42eaa8b36379e6ad', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'c6c03d149d8e1c15e491e1ed7071821348b76c1f', class: "modal__header" }, h("div", { key: '45235c736ee6686599513f1f80bff3b68c0a100e', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '2c6edcc7f1bcd33fcf880fa48567f6eddc067afd', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
303
306
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
304
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
307
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '673043a824362619f11c54f31a15fa9477117883', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
305
308
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
306
309
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
307
310
|
? this.fullscreenDisableButtonLabel
|
|
308
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
311
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '1719c5b97263cf10c305770607eb1ea7145acb51', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'c32ad1be58ce0bfd733a059fabc88411a810de30', class: "modal__content-container", style: {
|
|
309
312
|
gap: this.contentGap
|
|
310
313
|
? `var(--s-space-${this.contentGap})`
|
|
311
314
|
: undefined,
|
|
312
|
-
} }, h("div", { key: '
|
|
315
|
+
} }, h("div", { key: '8d7a796fc546b0b7bebfa213f831c628393f9dfe', class: "modal__primary-content", style: {
|
|
313
316
|
maxWidth: this.primaryContentMaxWidth,
|
|
314
317
|
flex: this.primaryContentFlex,
|
|
315
|
-
} }, h("div", { key: '
|
|
318
|
+
} }, h("div", { key: '7299870c633ed4456d08d22dc1eb750e4898b41c', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '27b39b1bbceb3890fd3f2dea32642a901c87c076', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: 'f8336f9a3638c1e9285d94900764f09293aa6c30', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '57fad6f717f5256c938b0142b88c42d59dc968e3' }))), h("div", { key: '05ab11a1b5ff7804a6b56041fdfcf4230f414ba4', class: "modal__secondary-content", style: {
|
|
316
319
|
maxWidth: this.secondaryContentMaxWidth,
|
|
317
320
|
flex: this.secondaryContentFlex,
|
|
318
321
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -330,7 +333,7 @@ export class SwirlModal {
|
|
|
330
333
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
331
334
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
332
335
|
: undefined,
|
|
333
|
-
} }, h("slot", { key: '
|
|
336
|
+
} }, h("slot", { key: '6602b580cc959944932c42bfe74f838fa7dc37a4', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: '17afe035cebb37925f6cf912448a29db22359ee6', class: "modal__custom-footer" }, h("slot", { key: '44c6d8340fc1b9c32521cc61ed0b5b4cee37ec50', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: '6e7732616ce97db76e752bdd8c3e540d380c3fe7', class: "modal__controls" }, h("swirl-button-group", { key: '146060354a8cd62c236d025b576ef48a357be7f2', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'eabd37aa403ab8b87fc6edb76821f3ccb25e8f7d', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6988e29d8e1caf2faa8dfbbce0ef454e4552fdee', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
334
337
|
}
|
|
335
338
|
static get is() { return "swirl-modal"; }
|
|
336
339
|
static get encapsulation() { return "shadow"; }
|
|
@@ -386,6 +389,25 @@ export class SwirlModal {
|
|
|
386
389
|
"attribute": "close-button-label",
|
|
387
390
|
"defaultValue": "\"Close modal\""
|
|
388
391
|
},
|
|
392
|
+
"disableBackdropClose": {
|
|
393
|
+
"type": "boolean",
|
|
394
|
+
"mutable": false,
|
|
395
|
+
"complexType": {
|
|
396
|
+
"original": "boolean",
|
|
397
|
+
"resolved": "boolean",
|
|
398
|
+
"references": {}
|
|
399
|
+
},
|
|
400
|
+
"required": false,
|
|
401
|
+
"optional": true,
|
|
402
|
+
"docs": {
|
|
403
|
+
"tags": [],
|
|
404
|
+
"text": ""
|
|
405
|
+
},
|
|
406
|
+
"getter": false,
|
|
407
|
+
"setter": false,
|
|
408
|
+
"reflect": false,
|
|
409
|
+
"attribute": "disable-backdrop-close"
|
|
410
|
+
},
|
|
389
411
|
"fullscreenEnableButtonLabel": {
|
|
390
412
|
"type": "string",
|
|
391
413
|
"mutable": false,
|
|
@@ -2,6 +2,9 @@ import { generateStoryElement } from "../../utils";
|
|
|
2
2
|
import Docs from "./swirl-modal.mdx";
|
|
3
3
|
export default {
|
|
4
4
|
argTypes: {
|
|
5
|
+
disableBackdropClose: {
|
|
6
|
+
description: "Prevents the modal from closing when the backdrop is clicked.",
|
|
7
|
+
},
|
|
5
8
|
returnFocusTo: {
|
|
6
9
|
control: "text",
|
|
7
10
|
description: "Use when modal trigger element is unmounted before the modal is closed.",
|
|
@@ -196,6 +196,36 @@
|
|
|
196
196
|
border-color: var(--s-text-on-image);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
+
.tag--interactive {
|
|
200
|
+
position: relative;
|
|
201
|
+
font-family: inherit;
|
|
202
|
+
cursor: pointer;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.tag--interactive::after {
|
|
206
|
+
position: absolute;
|
|
207
|
+
border-radius: inherit;
|
|
208
|
+
content: "";
|
|
209
|
+
inset: calc(-1 * var(--s-border-width-default));
|
|
210
|
+
pointer-events: none;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.tag--interactive:hover::after {
|
|
214
|
+
background-color: var(--s-state-hovered);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.tag--interactive:active::after {
|
|
218
|
+
background-color: var(--s-state-pressed);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.tag--interactive:focus:not(:focus-visible) {
|
|
222
|
+
outline: none;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.tag--interactive:focus-visible {
|
|
226
|
+
outline-color: var(--s-focus-default);
|
|
227
|
+
}
|
|
228
|
+
|
|
199
229
|
.tag__icon {
|
|
200
230
|
display: inline-flex;
|
|
201
231
|
margin-right: var(--s-space-4);
|
|
@@ -4,12 +4,16 @@ export class SwirlTag {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.iconPosition = "start";
|
|
6
6
|
this.intent = "default";
|
|
7
|
+
this.interactive = false;
|
|
7
8
|
this.size = "m";
|
|
8
9
|
this.removalButtonLabel = "Remove";
|
|
9
10
|
this.variant = "default";
|
|
10
11
|
this.onRemove = (event) => {
|
|
11
12
|
this.removeTag?.emit(event);
|
|
12
13
|
};
|
|
14
|
+
this.onClick = (event) => {
|
|
15
|
+
this.tagClick.emit(event);
|
|
16
|
+
};
|
|
13
17
|
}
|
|
14
18
|
componentDidLoad() {
|
|
15
19
|
this.forceIconProps();
|
|
@@ -31,8 +35,12 @@ export class SwirlTag {
|
|
|
31
35
|
}
|
|
32
36
|
}
|
|
33
37
|
render() {
|
|
34
|
-
const
|
|
35
|
-
|
|
38
|
+
const Tag = this.interactive ? "button" : "span";
|
|
39
|
+
const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, {
|
|
40
|
+
"tag--hide-label": this.hideLabel,
|
|
41
|
+
"tag--interactive": this.interactive,
|
|
42
|
+
});
|
|
43
|
+
return (h(Host, { key: '9637cdd4b1ad7b0dccb5c04a0ddefd8ee2325f7a' }, h(Tag, { key: '99dc3fb14fd345e4275bb8442be97fd254080c30', class: className, onClick: this.interactive ? this.onClick : undefined, part: "tag", tabIndex: this.interactive && this.el.ariaHidden === "true" ? -1 : undefined, type: this.interactive ? "button" : undefined }, this.icon && (h("span", { key: 'ee15018f6a8aa37397f235e7e10c32a567cc63d7', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '63fe4e28921608f31474a7a2698193b83cd065e9', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '51d9a82d4a1632c4b990e14ff170d14eeb3c2b45', size: 16 }))))));
|
|
36
44
|
}
|
|
37
45
|
static get is() { return "swirl-tag"; }
|
|
38
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -138,6 +146,26 @@ export class SwirlTag {
|
|
|
138
146
|
"attribute": "intent",
|
|
139
147
|
"defaultValue": "\"default\""
|
|
140
148
|
},
|
|
149
|
+
"interactive": {
|
|
150
|
+
"type": "boolean",
|
|
151
|
+
"mutable": false,
|
|
152
|
+
"complexType": {
|
|
153
|
+
"original": "boolean",
|
|
154
|
+
"resolved": "boolean",
|
|
155
|
+
"references": {}
|
|
156
|
+
},
|
|
157
|
+
"required": false,
|
|
158
|
+
"optional": true,
|
|
159
|
+
"docs": {
|
|
160
|
+
"tags": [],
|
|
161
|
+
"text": ""
|
|
162
|
+
},
|
|
163
|
+
"getter": false,
|
|
164
|
+
"setter": false,
|
|
165
|
+
"reflect": false,
|
|
166
|
+
"attribute": "interactive",
|
|
167
|
+
"defaultValue": "false"
|
|
168
|
+
},
|
|
141
169
|
"label": {
|
|
142
170
|
"type": "string",
|
|
143
171
|
"mutable": false,
|
|
@@ -290,6 +318,26 @@ export class SwirlTag {
|
|
|
290
318
|
}
|
|
291
319
|
}
|
|
292
320
|
}
|
|
321
|
+
}, {
|
|
322
|
+
"method": "tagClick",
|
|
323
|
+
"name": "tagClick",
|
|
324
|
+
"bubbles": true,
|
|
325
|
+
"cancelable": true,
|
|
326
|
+
"composed": true,
|
|
327
|
+
"docs": {
|
|
328
|
+
"tags": [],
|
|
329
|
+
"text": ""
|
|
330
|
+
},
|
|
331
|
+
"complexType": {
|
|
332
|
+
"original": "MouseEvent",
|
|
333
|
+
"resolved": "MouseEvent",
|
|
334
|
+
"references": {
|
|
335
|
+
"MouseEvent": {
|
|
336
|
+
"location": "global",
|
|
337
|
+
"id": "global::MouseEvent"
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
293
341
|
}];
|
|
294
342
|
}
|
|
295
343
|
static get elementRef() { return "el"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as a,HTMLElement as r,h as
|
|
1
|
+
import{proxyCustomElement as a,HTMLElement as r,h as t,Host as e,transformTag as i}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const s=a(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.layout="diagonal",this.semantics="group",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!this.badge)return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");r||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("horizontal"===this.layout?(a,r)=>{a.style.position="relative",a.style.zIndex=this.avatars.length-r+""}:a=>{a.style.position="",a.style.zIndex=""})}getCenteredArrangement(){return Math.min(Math.max(this.avatars.length,1),5)}render(){const a=o("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":!!this.badge,["avatar-group--centered-"+this.getCenteredArrangement()]:"centered"===this.layout}),r=o("avatar-group__badge");return t(e,{key:"43c20e73e894ae03d53b90d95dcd16db43e50ccd"},t("div",{key:"8b7bdf46aab2a02702bcdbd5b3544b1fa27f7779","aria-label":this.label,class:a,role:this.semantics},t("slot",{key:"e5ace98ce81e1519916e5a79158c48c56b2f19ab",onSlotchange:this.onSlotChange}),this.badge&&t("span",{key:"6f229b7a50e9d02487f662952a168c9202e26c38",class:r,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group--centered-stack{display:inline-flex;align-items:center}.avatar-group--centered-stack .avatar-group__badge{display:none}.avatar-group--centered-stack ::slotted(*){display:inline-flex;border-radius:var(--swirl-avatar-radius);box-shadow:var(--s-shadow-level-1)}.avatar-group--centered-1 ::slotted(:nth-child(1)){box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-1 ::slotted(:nth-child(n+2)){display:none}.avatar-group--centered-2 ::slotted(:nth-child(1)),.avatar-group--centered-3 ::slotted(:nth-child(1)){z-index:2;order:2;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-2 ::slotted(:nth-child(2)),.avatar-group--centered-3 ::slotted(:nth-child(2)){z-index:1;order:3;transform:scale(0.833333);margin-right:calc(var(--swirl-avatar-size) * -0.083333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-2 ::slotted(:nth-child(1)){margin-left:calc(var(--swirl-avatar-size) * 0.583334)}.avatar-group--centered-2 ::slotted(:nth-child(n+3)){display:none}.avatar-group--centered-3 ::slotted(:nth-child(3)){z-index:1;order:1;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.083333)}.avatar-group--centered-3 ::slotted(:nth-child(n+4)){display:none}.avatar-group--centered-4 ::slotted(:nth-child(1)),.avatar-group--centered-5 ::slotted(:nth-child(1)){z-index:3;order:3;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-4 ::slotted(:nth-child(2)),.avatar-group--centered-5 ::slotted(:nth-child(2)){z-index:2;order:4;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-4 ::slotted(:nth-child(3)),.avatar-group--centered-5 ::slotted(:nth-child(3)){z-index:2;order:2;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-4 ::slotted(:nth-child(4)),.avatar-group--centered-5 ::slotted(:nth-child(4)){z-index:1;order:5;transform:scale(0.666667);margin-right:calc(var(--swirl-avatar-size) * -0.166667);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-4 ::slotted(:nth-child(3)){margin-left:calc(var(--swirl-avatar-size) * 0.333333)}.avatar-group--centered-4 ::slotted(:nth-child(n+5)){display:none}.avatar-group--centered-5 ::slotted(:nth-child(5)){z-index:1;order:1;transform:scale(0.666667);margin-left:calc(var(--swirl-avatar-size) * -0.166667)}.avatar-group--centered-5 ::slotted(:nth-child(n+6)){display:none}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}"}},[257,"swirl-avatar-group",{badge:[1],label:[1],layout:[1],semantics:[1],avatars:[32]}]),d=s,l=function(){"undefined"!=typeof customElements&&["swirl-avatar-group"].forEach((a=>{"swirl-avatar-group"===a&&(customElements.get(i(a))||customElements.define(i(a),s))}))};export{d as SwirlAvatarGroup,l as defineCustomElement}
|