@getflip/swirl-components 0.349.1 → 0.350.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.
@@ -342,15 +342,15 @@
342
342
  }
343
343
 
344
344
  @media (min-width: 768px) {
345
- .modal--scrolled:not(.modal--has-header-tools) .modal__header {
345
+ .modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header {
346
346
  border-bottom-color: var(--s-border-default);
347
347
  }
348
348
 
349
- .modal--scrolled.modal--has-header-tools .modal__header-tools {
349
+ .modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools {
350
350
  border-bottom-color: var(--s-border-default);
351
351
  }
352
352
 
353
- .modal--scrolled .modal__custom-header {
353
+ .modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header {
354
354
  border-bottom-color: var(--s-border-default);
355
355
  }
356
356
  }
@@ -213,6 +213,7 @@ export class SwirlModal {
213
213
  "modal--padded": this.padded,
214
214
  "modal--scrollable": this.scrollable,
215
215
  "modal--scrolled": this.scrolled,
216
+ "modal--hide-scrolled-header-border": this.hideScrolledHeaderBorder,
216
217
  "modal--scrolled-down": this.scrolledDown,
217
218
  "modal--hide-secondary-content-borders": this.hideSecondaryContentBorders,
218
219
  "modal--has-sidebar-content": this.hasSidebarContent && !this.hideSidebarContent,
@@ -225,29 +226,29 @@ export class SwirlModal {
225
226
  "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
226
227
  "modal--sidebar-scrollable": this.sidebarScrollable,
227
228
  });
228
- return (h(Host, { key: 'e66f9311d7ca20c3334fe3202b1f408cbe696b87' }, h("section", { key: '0d608751e17be78956e86cc8729ddbe765a25d7c', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '57d3784bc7263ac5efd582baf4b57d93fa75914c', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '065391af262cd49132ebe6584c45b3335097b5f3', class: "modal__body", style: !this.isFullscreen
229
+ return (h(Host, { key: 'be9b73a073d5ad2e710bf0c1b240e9f45df860ce' }, h("section", { key: '3ea9bb1a7aa078972190070cc10737399b782b16', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: 'a0e4446c7644d615e99fd5cbb5347695e3e481c4', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '1e8343e39eb77629cc9835283d89b0cbc9378a6c', class: "modal__body", style: !this.isFullscreen
229
230
  ? {
230
231
  "--swirl-modal-max-height": this.maxHeight,
231
232
  "--swirl-modal-height": this.height,
232
233
  minHeight: this.minHeight,
233
234
  maxWidth: this.maxWidth,
234
235
  }
235
- : {} }, h("aside", { key: '7f5974269c8a6b59c5fea664ad5da1a33e57bf43', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '2f74a7ad4ee51e3a251e7d7df08f78711248d998', class: classnames("modal__sidebar-header", {
236
+ : {} }, h("aside", { key: 'e8d4387ca3170fb2dea7130c087aa687774814ed', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'a163ce46b9797d2504a3e5c6bee61d347c6434a6', class: classnames("modal__sidebar-header", {
236
237
  "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
237
- }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'c9d7f2897c3023b82517c20682cd253d0ffef9dc', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '62e7df7aa2305de32318fceced9fe525108bcca3', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'b045e9064b3061bfe8fd8ca8f7ac851a9775a81f', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '854ae9b21e67af4fc437d61d39015e3574493fb8', name: "sidebar-content" })), h("div", { key: 'a48312ab8242d04f7950d3b731064190443df21b', class: "modal__sidebar-footer" }, h("slot", { key: '6468ceb8dab5cfdf96f9c51f2072d98564359f14', name: "sidebar-footer" }))), h("div", { key: '6702d2e205483dd13dffdf40a8849e978911c8cb', class: "modal__main-content" }, h("header", { key: '80cbb4f494f64d148b2c5e7ed5a75621802862e0', class: "modal__custom-header" }, h("slot", { key: 'c6e89f2b06dbd4fa6b90daf97323eb043abc8796', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'b4a171638e311b0cc1cc862367a6d1bd12a01057', class: "modal__header" }, h("div", { key: '293ca4914e222f74ccab3d079fa566494d30b515', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd85d813e5ad6ec87ff8ff22ef2c787221980b98b', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
238
+ }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '2410cdaf7489291d3d3614c73023743a3536e01c', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '001c3921e63a984e7081b58eae914fa7ba835d44', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'b8cf6b1e2baa77700e93ecf9829276e5cbd42d22', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '4c60eef13700f51b91a0d2259fadcaade65cf9ed', name: "sidebar-content" })), h("div", { key: 'd68e8bbfbb078d74af9fc40bad2f133a43098009', class: "modal__sidebar-footer" }, h("slot", { key: '7d72dd8ee71fdbb56d96d55c707594ecc2fc6793', name: "sidebar-footer" }))), h("div", { key: '545a8f3569e9e38e0a5b766b56a0ee4016cac8d5', class: "modal__main-content" }, h("header", { key: '11a14c8055be6364c7a881f565ae4cf23304ae59', class: "modal__custom-header" }, h("slot", { key: '06365db0f0594c57b6049ca8aabd38f8e67048ef', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '543d7edea31e1fbd45f96ce8acb07539bef9c98b', class: "modal__header" }, h("div", { key: 'fe1803b2c451b0cd717cd4d4fbe1c1eb80f3cded', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'f278aa65e8dc869e8f616762645a31c394b81d61', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
238
239
  ? "<swirl-icon-close></swirl-icon-close>"
239
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '3b5e4e317045d5687d280c363ea5eddcbd80939a', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
240
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '913550accf44d556410638bf5c4314a066534f66', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
240
241
  ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
241
242
  : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
242
243
  ? this.fullscreenDisableButtonLabel
243
- : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '76f3d2b6e89e3de35d13d282c4e562e237891ff1', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '11fd87c6ad4d5986f6f9d4b87b168e00b33536e4', class: "modal__content-container", style: {
244
+ : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'a03c70736c99ed27d7d591044cd010e4dea688c7', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'd25236122a69cc01d032eae08e4807d6a43caad2', class: "modal__content-container", style: {
244
245
  gap: this.contentGap
245
246
  ? `var(--s-space-${this.contentGap})`
246
247
  : undefined,
247
- } }, h("div", { key: '4198ca9eb4c3eeb9413df80a3f4d94d089de2cdd', class: "modal__primary-content", style: {
248
+ } }, h("div", { key: '2815292bbc2d5eb6962183b393779be1eb526f8a', class: "modal__primary-content", style: {
248
249
  maxWidth: this.primaryContentMaxWidth,
249
250
  flex: this.primaryContentFlex,
250
- } }, h("div", { key: '76707fc81d3e525fe8e7391cb22769b9bc9744b9', class: "modal__header-tools" }, h("slot", { key: 'a1d281ab59d8a06ed06122e025039f4f5eb77027', name: "header-tools" })), h("div", { key: '87cd1f27b57aab654576a72e3cf460d00d06a8d1', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '09a4833ee5ea6fcce3363838c7689c44f8a01fd2' }))), h("div", { key: '5257ff8721b29c22966745aa29d9e139f529eff8', class: "modal__secondary-content", style: {
251
+ } }, h("div", { key: '278c5b840b69535e7bd1b92eeb11fd1a1acae8b9', class: "modal__header-tools" }, h("slot", { key: '6d4cc0d12b52be14ecb4f8d17fe5e4296610fd04', name: "header-tools" })), h("div", { key: '2eb0a78cceb32d154d4f0781f72b107ef0857675', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '6e49292b835d28e871aca0cae5c655122f47e6ba' }))), h("div", { key: 'f3bfa745697ed50e408562aaeca5c7b18115791e', class: "modal__secondary-content", style: {
251
252
  maxWidth: this.secondaryContentMaxWidth,
252
253
  flex: this.secondaryContentFlex,
253
254
  padding: Boolean(this.secondaryContentPadding)
@@ -265,7 +266,7 @@ export class SwirlModal {
265
266
  paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
266
267
  ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
267
268
  : undefined,
268
- } }, h("slot", { key: '96680fcf90ea5793f19f2429029a4649841c9617', name: "secondary-content" }))), h("div", { key: '728168ff48860f3d030b61686a11343df1423a15', class: "modal__custom-footer" }, h("slot", { key: '34f8c9a0ad33bebcd771d24a2fd73fe8848d858a', name: "custom-footer" })), showControls && (h("footer", { key: '512bab438216731f5f8eb7023b7692afd5c9e670', class: "modal__controls" }, h("swirl-button-group", { key: 'e53d4b0c613ff0835c487ebf25bcdf5645c532ef', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'af1fce2350e157a5cd850d20acd409944156c270', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'ade181a06a887187ed6e964faf6471f21b289e13', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
269
+ } }, h("slot", { key: 'bc465625138a38eff727b6d77f4b2a4d81b5d8c0', name: "secondary-content" }))), h("div", { key: 'e9bcde67ce749b6e2d4437205ed096aeba10b271', class: "modal__custom-footer" }, h("slot", { key: 'b31872b97ec952688037f8ad8a06f5f84ac7c817', name: "custom-footer" })), showControls && (h("footer", { key: '81b89f5408c6eace656904ef9ae0e9bbd41313d8', class: "modal__controls" }, h("swirl-button-group", { key: 'a22c8e6425837ac8193b9407060da27060838bfb', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '43dba207a1f3abe008485451a865fdd60bbcc0fd', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'd3c57dd2eb7e7a36a360aa7f4be0f74122561bbc', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
269
270
  }
270
271
  static get is() { return "swirl-modal"; }
271
272
  static get originalStyleUrls() {
@@ -976,6 +977,25 @@ export class SwirlModal {
976
977
  "setter": false,
977
978
  "reflect": false,
978
979
  "defaultValue": "\"Close sidebar\""
980
+ },
981
+ "hideScrolledHeaderBorder": {
982
+ "type": "boolean",
983
+ "attribute": "hide-scrolled-header-border",
984
+ "mutable": false,
985
+ "complexType": {
986
+ "original": "boolean",
987
+ "resolved": "boolean",
988
+ "references": {}
989
+ },
990
+ "required": false,
991
+ "optional": true,
992
+ "docs": {
993
+ "tags": [],
994
+ "text": ""
995
+ },
996
+ "getter": false,
997
+ "setter": false,
998
+ "reflect": false
979
999
  }
980
1000
  };
981
1001
  }
@@ -138,7 +138,7 @@ export class SwirlResourceListItem {
138
138
  "resource-list-item--wrap-description": this.descriptionWrap,
139
139
  "resource-list-item--wrap-label": this.labelWrap,
140
140
  });
141
- return (h(Host, { key: '43910581e423c8294ab457c2a57f64237b54cdd6', role: hostRole }, h("div", { key: 'ab0b2780717232150f32e87e2318c76e90b8f5c5', class: className, role: containerRole }, h(Tag, { key: 'b0395a0c6e1ddfb373ef7c3129c93c618774aaf4', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, 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: 'f619c5e071cbb9df143f4087c9a0e9e7f2f7c36d', class: "resource-list-item__media" }, h("slot", { key: 'ffe57fbf43568adcdcf96c04fbff860f5f2b8dac', name: "media" }))), h("span", { key: '4394d66aa315b48ce82c3df81f0cfaf7bc74ccb1', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '2f0fb5875316ad19340522b7bf483d959f39d01c', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'b1769ae51201b0cdf1c89027079d9615141cf44a', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '570ed201f5aaf20d68ae87efefd967d68af2a778', class: "resource-list-item__meta" }, h("span", { key: '53d1b22a6458e660a0d609229d23abeab3deffa5', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'af5e115892c913a9cf670c9545877807891eb8fe', class: "resource-list-item__badges" }, h("slot", { key: 'fa3a843bdbb23e7e0875855fa0a63ea8d9b93d13', name: "badges" }))))), this.selectable && (h("span", { key: '05164b24c5e4e82e78a3c679599483baced77f69', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '0dcca5e98ed85bb5686d10e8b4fa6bb736b52df5', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '47d03574a7392fe30e640781b57bd7fcd2d3c3d8' }))))), h("span", { key: '566e7ec233e0bc60c2d2c1a79d81a445e5fac8c3', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '240f3fb8d911922f151cfb32f0a1f4d6da4099d6', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '44adea3818f9cdec7feb46305b9d120ba648999b', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '070a1bd983131334c3041b5b93ee524bab87dff8', "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: '1f0fb8b9273e7ffdc854f09e98dfe189e0310f51', "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: '39b750e0c4794233b1295b1aa729522199f61d1d', size: this.iconSize })))));
141
+ return (h(Host, { key: '6c76f75792d6dc74bd6f5b8344f73b71a15a578b', role: hostRole }, h("div", { key: '7a0f9adcc65b2e078cf1e92a824e7b3b32ca8171', class: className, role: containerRole }, h(Tag, { key: '64293b307dae26d1bd82ac527542ae97875d38af', "aria-checked": ariaChecked, "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, onClick: this.onClick, 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: '2fce8f7495ab34f3cb7b1ea111b5724ebdbc928c', class: "resource-list-item__media" }, h("slot", { key: '6d9931d51a481119e6987169d2f524978047e171', name: "media" }))), h("span", { key: 'dcccc9fa94a5455345d8922427ab5ba53c6d5f1e', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '412c03a02bef3fa75a331829f8af7ae69fba82c6', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '67f45dd519ad32d53b1e85b68679795a4ba44dc8', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '9f5ab5eeed07720b961522a1ef1af3cadeda86dd', class: "resource-list-item__meta" }, h("span", { key: '61e080794fec67e333baebe4c0260bcaf0a2ba6e', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'f696df19b5525800aac6bd38e04772294c1dfc00', class: "resource-list-item__badges" }, h("slot", { key: 'e52d5675e77b9d9dd4733471b18e79114cc7d579', name: "badges" }))))), this.selectable && (h("span", { key: '328bf9f77fb257ce7babfb6e2c2bdf00eb79a09f', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '89b630fa4ef44df45ae92c1b8d8e59c46fb508e6', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'a739f4cd3d40556246756e9aa7191e1cae75308c' }))))), h("span", { key: '7016fecfdb6f9d773ab341b9d659480fa8dda230', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '9e6b697833a71e8878f7aca8bf466f8be91426bb', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: 'f876ed787b3771ccf3ea25a919a57d57bfd85c07', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '194c091ff2a129be9061f2908092d48327ebc8e7', "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: '928ccc6af654fe763af660b030071f65f28275e1', "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: '34e494f339aea261ec37330f315c20336324f29e', size: this.iconSize })))));
142
142
  }
143
143
  static get is() { return "swirl-resource-list-item"; }
144
144
  static get encapsulation() { return "scoped"; }
@@ -622,6 +622,25 @@ export class SwirlResourceListItem {
622
622
  "getter": false,
623
623
  "setter": false,
624
624
  "reflect": false
625
+ },
626
+ "alignItems": {
627
+ "type": "string",
628
+ "attribute": "align-items",
629
+ "mutable": false,
630
+ "complexType": {
631
+ "original": "string",
632
+ "resolved": "string",
633
+ "references": {}
634
+ },
635
+ "required": false,
636
+ "optional": true,
637
+ "docs": {
638
+ "tags": [],
639
+ "text": ""
640
+ },
641
+ "getter": false,
642
+ "setter": false,
643
+ "reflect": false
625
644
  }
626
645
  };
627
646
  }