@getflip/swirl-components 0.435.0 → 0.436.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.
Files changed (41) hide show
  1. package/components.json +2 -8
  2. package/dist/cjs/swirl-app-layout_5.cjs.entry.js +1 -1
  3. package/dist/cjs/swirl-box.cjs.entry.js +3 -3
  4. package/dist/cjs/swirl-form-control.cjs.entry.js +1 -1
  5. package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +2 -2
  6. package/dist/cjs/swirl-table-row-group.cjs.entry.js +2 -2
  7. package/dist/cjs/swirl-tooltip.cjs.entry.js +9 -6
  8. package/dist/collection/components/swirl-box/swirl-box.js +3 -3
  9. package/dist/collection/components/swirl-form-control/swirl-form-control.js +1 -1
  10. package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +1 -1
  11. package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js +2 -2
  12. package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js +2 -2
  13. package/dist/collection/components/swirl-tooltip/swirl-tooltip.css +10 -2
  14. package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +9 -7
  15. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
  16. package/dist/components/swirl-box2.js +3 -3
  17. package/dist/components/swirl-form-control.js +1 -1
  18. package/dist/components/swirl-resource-list-item2.js +1 -1
  19. package/dist/components/swirl-shell-navigation-item.js +2 -2
  20. package/dist/components/swirl-table-row-group.js +2 -2
  21. package/dist/components/swirl-tooltip2.js +9 -6
  22. package/dist/esm/swirl-app-layout_5.entry.js +1 -1
  23. package/dist/esm/swirl-box.entry.js +3 -3
  24. package/dist/esm/swirl-form-control.entry.js +1 -1
  25. package/dist/esm/swirl-shell-navigation-item.entry.js +2 -2
  26. package/dist/esm/swirl-table-row-group.entry.js +2 -2
  27. package/dist/esm/swirl-tooltip.entry.js +9 -6
  28. package/dist/swirl-components/p-460a10a6.entry.js +1 -0
  29. package/dist/swirl-components/p-46fd6324.entry.js +1 -0
  30. package/dist/swirl-components/p-55fd0793.entry.js +1 -0
  31. package/dist/swirl-components/{p-84903c22.entry.js → p-661bf0ca.entry.js} +1 -1
  32. package/dist/swirl-components/p-989ed4ed.entry.js +1 -0
  33. package/dist/swirl-components/p-c58d14ae.entry.js +1 -0
  34. package/dist/swirl-components/swirl-components.esm.js +1 -1
  35. package/dist/types/components.d.ts +0 -6
  36. package/package.json +1 -1
  37. package/dist/swirl-components/p-13d33aa2.entry.js +0 -1
  38. package/dist/swirl-components/p-30a16008.entry.js +0 -1
  39. package/dist/swirl-components/p-6e78cdee.entry.js +0 -1
  40. package/dist/swirl-components/p-a33b8b46.entry.js +0 -1
  41. package/dist/swirl-components/p-c7376c8c.entry.js +0 -1
package/dist/swirl-components/p-c7376c8c.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as n,h as i,H as e,d as a}from"./p-Dj_4Fda9.js";import{c as t}from"./p-orsBiyT_.js";const l=class{constructor(i){n(this,i),this.hideLabel=!1,this.inlineLabelColor="default",this.markAsNewLabel="New",this.useCustomIconSize=!1,this.variant="default"}componentWillLoad(){this.forceIconProps()}componentDidRender(){this.forceIconProps()}forceIconProps(){if(this.useCustomIconSize)return;const n=this.el.querySelector("[slot='icon']"),i=this.hideLabel&&"app-icon"===this.variant||"default"===this.variant;n&&(n.tagName.startsWith("SWIRL-ICON")||n.tagName.startsWith("SWIRL-EMOJI")||n.tagName.startsWith("SWIRL-SYMBOL"))&&n.setAttribute("size",i?"20":"32")}render(){const n=Boolean(this.el.querySelector("swirl-app-icon")),a=t("shell-navigation-item",`shell-navigation-item--${this.variant}`,{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--filled":this.filled,"shell-navigation-item--inline-label":this.inlineLabel,"shell-navigation-item--gradient":this.withGradient,"shell-navigation-item--hide-label":this.hideLabel,"shell-navigation-item--has-app-icon":n}),l=t("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),s=null!=this.badgeLabel,o=!s&&this.markAsNew&&!this.hideLabel&&"default"===this.variant,r=!s&&this.markAsNew&&this.hideLabel&&"default"===this.variant,h=Boolean(this.href);return i(e,{key:"a2007f2d997b7bdeb29eb196f968bbdc5b948b6d"},i("swirl-tooltip",{key:"aa823491de6843a2da81b6628209c89c377fb8fc",active:this.hideLabel,content:this.description?`${this.label} ${this.description}`:this.label,delay:100,position:"right",positioning:"fixed"},i(h?"a":"button",{key:"052b0eaf4c45bfe7896561620ed9ca6e3ed032df","aria-current":this.swirlAriaCurrent,class:a,href:this.href,target:this.target,type:h?void 0:"button",title:this.hideLabel?void 0:this.label},i("span",{key:"1143b0c1346d20be772dc85d6dd3197eda0e9a36",class:"shell-navigation-item__icon"},i("slot",{key:"2cbe00549fabd4eab0803fb702f6f027f9478f85",name:"icon"})),this.hideLabel?i("swirl-visually-hidden",null,i("span",{class:l},this.label)):"default"!==this.variant?i("span",{class:l},this.label):i("div",{class:"shell-navigation-item__text-wrapper"},i("span",{class:l},this.label),this.description&&i("span",{class:"shell-navigation-item__description"},this.description)),s&&i("span",{key:"c086a06adbb294ca2467a95cabe20cd9aef33178",class:"shell-navigation-item__badge-wrapper"},i("swirl-badge",{key:"e20ee4c3840fdfe441d9f31756c890497c205359","aria-label":this.badgeLabel,class:t("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"})),o&&i("swirl-tag",{key:"4ff1ae301eaa2ad076637304bc6f2694b681c94f",class:"shell-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"s",variant:"strong"}),r&&i("swirl-badge",{key:"4d391a70e64454295907d47e8a9983235fa40fc4",class:"shell-navigation-item__is-new-badge",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"xs",variant:"dot"}))))}get el(){return a(this)}};l.style='/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-overlay-default);\n }\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: "";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n align-items: start;\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n\n .shell-navigation-item .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-default);\n }\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n';export{l as swirl_shell_navigation_item}