@getflip/swirl-components 0.420.0 → 0.420.1
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 +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +9 -2
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +9 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-resource-list-item2.js +9 -2
- package/dist/esm/swirl-app-layout_5.entry.js +9 -2
- package/dist/swirl-components/{p-98ff5d70.entry.js → p-a71e79c0.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.d.ts +1 -0
- package/package.json +1 -1
package/components.json
CHANGED
|
@@ -696,6 +696,7 @@ const SwirlResourceListItem = class {
|
|
|
696
696
|
this.updateMediaState();
|
|
697
697
|
}
|
|
698
698
|
componentDidLoad() {
|
|
699
|
+
this.parentSemantics = this.el.closest("swirl-resource-list")?.semantics;
|
|
699
700
|
this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
|
|
700
701
|
this.forceIconProps(isDesktop);
|
|
701
702
|
this.updateIconSize(isDesktop);
|
|
@@ -732,6 +733,9 @@ const SwirlResourceListItem = class {
|
|
|
732
733
|
return this.el.querySelector('[slot="control"] button');
|
|
733
734
|
}
|
|
734
735
|
makeControlFocusable() {
|
|
736
|
+
if (this.parentSemantics !== "grid") {
|
|
737
|
+
return;
|
|
738
|
+
}
|
|
735
739
|
const control = this.getControl();
|
|
736
740
|
if (!Boolean(control)) {
|
|
737
741
|
return;
|
|
@@ -739,6 +743,9 @@ const SwirlResourceListItem = class {
|
|
|
739
743
|
control.tabIndex = 0;
|
|
740
744
|
}
|
|
741
745
|
makeControlUnfocusable() {
|
|
746
|
+
if (this.parentSemantics !== "grid") {
|
|
747
|
+
return;
|
|
748
|
+
}
|
|
742
749
|
const control = this.getControl();
|
|
743
750
|
if (!Boolean(control)) {
|
|
744
751
|
return;
|
|
@@ -769,7 +776,7 @@ const SwirlResourceListItem = class {
|
|
|
769
776
|
const labelContainerStyles = {
|
|
770
777
|
minHeight: this.labelMinHeight ?? undefined,
|
|
771
778
|
};
|
|
772
|
-
const renderLabel = () => (index.h("span", { key: '
|
|
779
|
+
const renderLabel = () => (index.h("span", { key: '4ea7c31f515f297a49d3e4ae457f141d10207d32', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label));
|
|
773
780
|
const className = index$1.classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
|
|
774
781
|
"resource-list-item--active": this.active,
|
|
775
782
|
"resource-list-item--checked": this.checked,
|
|
@@ -786,7 +793,7 @@ const SwirlResourceListItem = class {
|
|
|
786
793
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
787
794
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
788
795
|
});
|
|
789
|
-
return (index.h(index.Host, { key: '
|
|
796
|
+
return (index.h(index.Host, { key: '088ed55cf56852341a0374b37f0b5f024fc72035', role: hostRole }, index.h("div", { key: '8ec9769f5c90136c3a86ea5a967f8e87a8a88973', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: '134b9a1a9645d97447937ab7e3501f48aab9cb9f', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: '269e9e19598891a53fe896840fec876aba5f096c', class: "resource-list-item__media" }, index.h("slot", { key: 'e676975dec132755e9492d4f14e271f0371d030c', name: "media" }))), index.h("span", { key: '0c597785a34fc0d6362f3e80b98802c3d732e0b7', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (index.h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition, positioning: "fixed" }, renderLabel())) : (renderLabel()), this.description && (index.h("span", { key: '2dd25de843ee96dfe2c9352e3e4e4b8659de7e9d', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (index.h("span", { key: 'a9da2a1442ea6adfaba6027dc11f6a5a84453ad4', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'f76cef21e8fb5387f34e99fd3765a19c179faf7e', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'bebb799ffa8ee3fc6275f61451e80ae4c4fe1ce6' }))))), showMeta && (index.h("span", { key: '04dd2f96b4e64ae93f015ecb85cd384a2c0890a2', class: "resource-list-item__meta" }, this.meta && (index.h("span", { key: '57f895be000f5fd1c62ab6f2b0b6ddc89fbdce60', class: "resource-list-item__meta-text" }, this.meta)), index.h("span", { key: '91efc58635fb8efcf2c652059b6cf63fcdae28f4', class: "resource-list-item__badges" }, index.h("slot", { key: '8c3c18cbc29e8bc931ad0c41b6d5e5ef5fd7554a', name: "badges" })))), index.h("span", { key: '66802320e490115b2e653a91ffa4b2da7e8415a0', class: "resource-list-item__control", onClick: this.onControlClick }, index.h("slot", { key: 'acb0bf6a1c293a6f83021c069afc90c26efdb655', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '2b3d071301fff6629bead54ba951c5cb9ff6472b', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: '05a78400347d5b4861b6a8865f733b0bb93361ff', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { key: '39bfbf3b67ee035fb415f1c309db2471007c8f7d', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: 'c474e283823ad5a849e343cdfdc0cdaa31deb277', size: this.iconSize })))));
|
|
790
797
|
}
|
|
791
798
|
get el() { return index.getElement(this); }
|
|
792
799
|
};
|
|
@@ -53,6 +53,7 @@ export class SwirlResourceListItem {
|
|
|
53
53
|
this.updateMediaState();
|
|
54
54
|
}
|
|
55
55
|
componentDidLoad() {
|
|
56
|
+
this.parentSemantics = this.el.closest("swirl-resource-list")?.semantics;
|
|
56
57
|
this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
|
|
57
58
|
this.forceIconProps(isDesktop);
|
|
58
59
|
this.updateIconSize(isDesktop);
|
|
@@ -89,6 +90,9 @@ export class SwirlResourceListItem {
|
|
|
89
90
|
return this.el.querySelector('[slot="control"] button');
|
|
90
91
|
}
|
|
91
92
|
makeControlFocusable() {
|
|
93
|
+
if (this.parentSemantics !== "grid") {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
92
96
|
const control = this.getControl();
|
|
93
97
|
if (!Boolean(control)) {
|
|
94
98
|
return;
|
|
@@ -96,6 +100,9 @@ export class SwirlResourceListItem {
|
|
|
96
100
|
control.tabIndex = 0;
|
|
97
101
|
}
|
|
98
102
|
makeControlUnfocusable() {
|
|
103
|
+
if (this.parentSemantics !== "grid") {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
99
106
|
const control = this.getControl();
|
|
100
107
|
if (!Boolean(control)) {
|
|
101
108
|
return;
|
|
@@ -126,7 +133,7 @@ export class SwirlResourceListItem {
|
|
|
126
133
|
const labelContainerStyles = {
|
|
127
134
|
minHeight: this.labelMinHeight ?? undefined,
|
|
128
135
|
};
|
|
129
|
-
const renderLabel = () => (h("span", { key: '
|
|
136
|
+
const renderLabel = () => (h("span", { key: '4ea7c31f515f297a49d3e4ae457f141d10207d32', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label));
|
|
130
137
|
const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
|
|
131
138
|
"resource-list-item--active": this.active,
|
|
132
139
|
"resource-list-item--checked": this.checked,
|
|
@@ -143,7 +150,7 @@ export class SwirlResourceListItem {
|
|
|
143
150
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
144
151
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
145
152
|
});
|
|
146
|
-
return (h(Host, { key: '
|
|
153
|
+
return (h(Host, { key: '088ed55cf56852341a0374b37f0b5f024fc72035', role: hostRole }, h("div", { key: '8ec9769f5c90136c3a86ea5a967f8e87a8a88973', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '134b9a1a9645d97447937ab7e3501f48aab9cb9f', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '269e9e19598891a53fe896840fec876aba5f096c', class: "resource-list-item__media" }, h("slot", { key: 'e676975dec132755e9492d4f14e271f0371d030c', name: "media" }))), h("span", { key: '0c597785a34fc0d6362f3e80b98802c3d732e0b7', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition, positioning: "fixed" }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '2dd25de843ee96dfe2c9352e3e4e4b8659de7e9d', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: 'a9da2a1442ea6adfaba6027dc11f6a5a84453ad4', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'f76cef21e8fb5387f34e99fd3765a19c179faf7e', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'bebb799ffa8ee3fc6275f61451e80ae4c4fe1ce6' }))))), showMeta && (h("span", { key: '04dd2f96b4e64ae93f015ecb85cd384a2c0890a2', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '57f895be000f5fd1c62ab6f2b0b6ddc89fbdce60', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '91efc58635fb8efcf2c652059b6cf63fcdae28f4', class: "resource-list-item__badges" }, h("slot", { key: '8c3c18cbc29e8bc931ad0c41b6d5e5ef5fd7554a', name: "badges" })))), h("span", { key: '66802320e490115b2e653a91ffa4b2da7e8415a0', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'acb0bf6a1c293a6f83021c069afc90c26efdb655', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '2b3d071301fff6629bead54ba951c5cb9ff6472b', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '05a78400347d5b4861b6a8865f733b0bb93361ff', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '39bfbf3b67ee035fb415f1c309db2471007c8f7d', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'c474e283823ad5a849e343cdfdc0cdaa31deb277', size: this.iconSize })))));
|
|
147
154
|
}
|
|
148
155
|
static get is() { return "swirl-resource-list-item"; }
|
|
149
156
|
static get encapsulation() { return "scoped"; }
|