@getflip/swirl-components 0.378.0 → 0.379.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/{media-query.service-DRPgROAV.js → media-query.service-BcAHijM-.js} +1 -1
- package/dist/cjs/swirl-action-list_2.cjs.entry.js +2 -2
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +5 -4
- package/dist/cjs/swirl-autocomplete.cjs.entry.js +1 -1
- package/dist/cjs/swirl-banner.cjs.entry.js +2 -2
- package/dist/cjs/swirl-button.cjs.entry.js +2 -2
- package/dist/cjs/swirl-carousel.cjs.entry.js +1 -1
- package/dist/cjs/swirl-chip.cjs.entry.js +2 -2
- package/dist/cjs/swirl-console-layout.cjs.entry.js +1 -1
- package/dist/cjs/swirl-date-input.cjs.entry.js +2 -2
- package/dist/cjs/swirl-date-picker_2.cjs.entry.js +1 -1
- package/dist/cjs/swirl-file-chip.cjs.entry.js +4 -4
- package/dist/cjs/swirl-file-viewer_8.cjs.entry.js +3 -3
- package/dist/cjs/swirl-form-control.cjs.entry.js +1 -1
- package/dist/cjs/swirl-icon-error_3.cjs.entry.js +2 -2
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +6 -5
- package/dist/cjs/swirl-inline-status.cjs.entry.js +2 -2
- package/dist/cjs/swirl-lightbox.cjs.entry.js +1 -1
- package/dist/cjs/swirl-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/swirl-menu.cjs.entry.js +1 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +1 -1
- package/dist/cjs/swirl-option-list_2.cjs.entry.js +2 -2
- package/dist/cjs/swirl-pagination.cjs.entry.js +1 -1
- package/dist/cjs/swirl-pdf-reader.cjs.entry.js +1 -1
- package/dist/cjs/swirl-popover_2.cjs.entry.js +1 -1
- package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js +2 -2
- package/dist/cjs/swirl-search.cjs.entry.js +2 -2
- package/dist/cjs/swirl-select.cjs.entry.js +1 -1
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table-column.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table-row.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tabs.cjs.entry.js +1 -1
- package/dist/cjs/swirl-text-input.cjs.entry.js +2 -2
- package/dist/cjs/swirl-time-input.cjs.entry.js +2 -2
- package/dist/cjs/swirl-toast.cjs.entry.js +2 -2
- package/dist/cjs/swirl-toolbar.cjs.entry.js +1 -1
- package/dist/cjs/{utils-Br2wWntR.js → utils-CllbYlRY.js} +9 -3
- package/dist/collection/components/swirl-file-chip/swirl-file-chip.js +4 -4
- package/dist/collection/components/swirl-file-viewer/swirl-file-viewer.js +3 -2
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css +2 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +4 -3
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +89 -64
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +2 -1
- package/dist/collection/utils.js +8 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-file-chip.js +4 -4
- package/dist/components/swirl-file-viewer2.js +3 -2
- package/dist/components/swirl-image-grid-item.js +5 -4
- package/dist/components/swirl-resource-list-item2.js +3 -2
- package/dist/components/utils.js +9 -3
- package/dist/esm/{media-query.service-Cx_VEA2f.js → media-query.service-CpP-qu5C.js} +1 -1
- package/dist/esm/swirl-action-list_2.entry.js +2 -2
- package/dist/esm/swirl-app-layout_5.entry.js +5 -4
- package/dist/esm/swirl-autocomplete.entry.js +1 -1
- package/dist/esm/swirl-banner.entry.js +2 -2
- package/dist/esm/swirl-button.entry.js +2 -2
- package/dist/esm/swirl-carousel.entry.js +1 -1
- package/dist/esm/swirl-chip.entry.js +2 -2
- package/dist/esm/swirl-console-layout.entry.js +1 -1
- package/dist/esm/swirl-date-input.entry.js +2 -2
- package/dist/esm/swirl-date-picker_2.entry.js +1 -1
- package/dist/esm/swirl-file-chip.entry.js +4 -4
- package/dist/esm/swirl-file-viewer_8.entry.js +3 -3
- package/dist/esm/swirl-form-control.entry.js +1 -1
- package/dist/esm/swirl-icon-error_3.entry.js +2 -2
- package/dist/esm/swirl-image-grid-item.entry.js +6 -5
- package/dist/esm/swirl-inline-status.entry.js +2 -2
- package/dist/esm/swirl-lightbox.entry.js +1 -1
- package/dist/esm/swirl-menu-item.entry.js +1 -1
- package/dist/esm/swirl-menu.entry.js +1 -1
- package/dist/esm/swirl-modal.entry.js +1 -1
- package/dist/esm/swirl-option-list_2.entry.js +2 -2
- package/dist/esm/swirl-pagination.entry.js +1 -1
- package/dist/esm/swirl-pdf-reader.entry.js +1 -1
- package/dist/esm/swirl-popover_2.entry.js +1 -1
- package/dist/esm/swirl-resource-list-file-item.entry.js +2 -2
- package/dist/esm/swirl-search.entry.js +2 -2
- package/dist/esm/swirl-select.entry.js +1 -1
- package/dist/esm/swirl-shell-layout.entry.js +1 -1
- package/dist/esm/swirl-tab-bar.entry.js +1 -1
- package/dist/esm/swirl-table-column.entry.js +1 -1
- package/dist/esm/swirl-table-row.entry.js +1 -1
- package/dist/esm/swirl-table.entry.js +1 -1
- package/dist/esm/swirl-tabs.entry.js +1 -1
- package/dist/esm/swirl-text-input.entry.js +2 -2
- package/dist/esm/swirl-time-input.entry.js +2 -2
- package/dist/esm/swirl-toast.entry.js +2 -2
- package/dist/esm/swirl-toolbar.entry.js +1 -1
- package/dist/esm/{utils-D_MUFqkF.js → utils-DytJsmhr.js} +9 -3
- package/dist/swirl-components/{p-9b194c8e.entry.js → p-042ee5d4.entry.js} +1 -1
- package/dist/swirl-components/{p-a3e441ad.entry.js → p-06a5f3c1.entry.js} +1 -1
- package/dist/swirl-components/p-09e93aa1.entry.js +28 -0
- package/dist/swirl-components/{p-e517cd73.entry.js → p-2fbcec3f.entry.js} +1 -1
- package/dist/swirl-components/{p-7cfe4152.entry.js → p-312ea63e.entry.js} +1 -1
- package/dist/swirl-components/{p-d0eef94b.entry.js → p-399aed40.entry.js} +1 -1
- package/dist/swirl-components/{p-8fde973e.entry.js → p-3a6b64cb.entry.js} +1 -1
- package/dist/swirl-components/{p-a69e51f6.entry.js → p-3f6d068c.entry.js} +1 -1
- package/dist/swirl-components/{p-88eb9355.entry.js → p-43c2b8e6.entry.js} +1 -1
- package/dist/swirl-components/{p-1391a5d3.entry.js → p-55b4198e.entry.js} +1 -1
- package/dist/swirl-components/{p-e522318e.entry.js → p-575286d9.entry.js} +1 -1
- package/dist/swirl-components/{p-da514121.entry.js → p-64e4d854.entry.js} +1 -1
- package/dist/swirl-components/{p-902ce47c.entry.js → p-6732eaec.entry.js} +1 -1
- package/dist/swirl-components/{p-568a408c.entry.js → p-6f8ef29e.entry.js} +1 -1
- package/dist/swirl-components/{p-5d7196f1.entry.js → p-732afaa1.entry.js} +1 -1
- package/dist/swirl-components/{p-5c9616ed.entry.js → p-744bb10c.entry.js} +1 -1
- package/dist/swirl-components/{p-4dd68258.entry.js → p-750914d8.entry.js} +1 -1
- package/dist/swirl-components/{p-da776a4e.entry.js → p-7eaa0fa6.entry.js} +1 -1
- package/dist/swirl-components/{p-2f6c0ee1.entry.js → p-84522af5.entry.js} +1 -1
- package/dist/swirl-components/{p-972e517c.entry.js → p-8b45e69a.entry.js} +1 -1
- package/dist/swirl-components/{p-61db9ac1.entry.js → p-90243eec.entry.js} +1 -1
- package/dist/swirl-components/{p-d7ec0d2f.entry.js → p-95fb200f.entry.js} +1 -1
- package/dist/swirl-components/{p-02bbee65.entry.js → p-96833a92.entry.js} +1 -1
- package/dist/swirl-components/{p-d0175591.entry.js → p-98f60469.entry.js} +1 -1
- package/dist/swirl-components/{p-f606869b.entry.js → p-9961cf33.entry.js} +1 -1
- package/dist/swirl-components/{p-ffeff0e0.entry.js → p-99f1851e.entry.js} +1 -1
- package/dist/swirl-components/{p-LU4x678Z.js → p-DJ2FyZeW.js} +1 -1
- package/dist/swirl-components/{p-D_MUFqkF.js → p-DytJsmhr.js} +1 -1
- package/dist/swirl-components/{p-34d35e00.entry.js → p-b9a299b9.entry.js} +1 -1
- package/dist/swirl-components/{p-61300d7a.entry.js → p-c8e30ded.entry.js} +1 -1
- package/dist/swirl-components/{p-2260cef7.entry.js → p-d17cd35b.entry.js} +1 -1
- package/dist/swirl-components/{p-4bddfd6a.entry.js → p-d39e3e71.entry.js} +1 -1
- package/dist/swirl-components/{p-5c201837.entry.js → p-d9d2d3cd.entry.js} +1 -1
- package/dist/swirl-components/{p-1032eb2d.entry.js → p-e6b1e277.entry.js} +1 -1
- package/dist/swirl-components/{p-9355912f.entry.js → p-e6b4ebfa.entry.js} +1 -1
- package/dist/swirl-components/p-e872b698.entry.js +1 -0
- package/dist/swirl-components/{p-ae0e5da7.entry.js → p-f28a4f8e.entry.js} +1 -1
- package/dist/swirl-components/{p-12e9c7db.entry.js → p-fdb3db3c.entry.js} +1 -1
- package/dist/swirl-components/{p-93f2b062.entry.js → p-ffc82946.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/utils.d.ts +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-7585dac1.entry.js +0 -1
- package/dist/swirl-components/p-783627a1.entry.js +0 -28
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,h as r,H as t,d as l}from"./p-CWOhMVtL.js";import{c as s}from"./p-orsBiyT_.js";import{j as e,k as i}from"./p-D_MUFqkF.js";const n=class{constructor(r){o(this,r),this.fontSize="default",this.labelPosition="inside",this.descriptionId=`form-control-description-${Math.round(1e5*Math.random())}`,this.labelId=`form-control-label-${Math.round(1e5*Math.random())}`,this.listenToInputValueChanges=()=>{this.inputEl.addEventListener("valueChange",this.checkInputValue)},this.checkInputValue=()=>{this.inputValue=this.inputEl?.value},this.onFocusIn=()=>{this.hasFocus=!0},this.onFocusOut=()=>{this.hasFocus=!1},this.onKeyDown=o=>{"Tab"===o.key&&setTimeout((()=>{e(i(),this.el)||(this.hasFocus=!1)}))},this.onLabelClick=()=>{Boolean(this.inputEl.getAttribute("contenteditable"))&&this.inputEl.focus()}}componentWillLoad(){this.inputEl=this.el.firstElementChild,this.associateDescriptionWithInputElement(),this.associateLabelWithInputElement(),this.setInputElementDisabledState(),this.setInputElementInlineState(),this.setInputElementInvalidState(),this.setInputElementLabel(),this.checkInputValue(),this.listenToInputValueChanges()}componentDidRender(){this.checkInputValue()}watchDescription(){this.associateDescriptionWithInputElement()}watchErrorMessage(){this.associateDescriptionWithInputElement()}setInputElementDisabledState(){Boolean(this.inputEl)&&(this.disabled?this.inputEl.setAttribute("disabled","true"):this.inputEl.removeAttribute("disabled"))}setInputElementInlineState(){Boolean(this.inputEl)&&(this.inline||"outside"===this.labelPosition?this.inputEl.setAttribute("inline","true"):this.inputEl.removeAttribute("inline"))}setInputElementInvalidState(){Boolean(this.inputEl)&&(this.invalid?this.inputEl.setAttribute("invalid","true"):this.inputEl.removeAttribute("invalid"))}setInputElementLabel(){if(!Boolean(this.inputEl))return;let o=this.label;this.secondaryLabel&&(o+=` ${this.secondaryLabel}`),this.inputEl.setAttribute("label",o)}onWindowClick(o){this.hasFocus&&(this.el.contains(o.target)||(o.stopPropagation(),this.hasFocus=!1))}associateLabelWithInputElement(){Boolean(this.inputEl.getAttribute("contenteditable"))&&(this.inputEl.setAttribute("aria-labelledby",this.labelId),this.inputEl.setAttribute("aria-describedby",this.descriptionId))}associateDescriptionWithInputElement(){Boolean(this.inputEl)&&(Boolean(this.description)||Boolean(this.errorMessage)?Boolean(this.inputEl.getAttribute("contenteditable"))?this.inputEl.setAttribute("aria-describedby",this.descriptionId):this.inputEl.setAttribute("swirl-aria-describedby",this.descriptionId):(this.inputEl.removeAttribute("aria-describedby"),this.inputEl.removeAttribute("swirl-aria-describedby")))}render(){const o=Boolean(this.errorMessage),l=Boolean(this.description)&&!o,e=Boolean(this.inputEl.getAttribute("contenteditable")),i=Boolean(this.el.querySelector('[slot="prefix"]')),n=Boolean(this.icon),c=Array.isArray(this.inputValue)?this.inputValue.length>0:Boolean(this.inputValue)||e&&Boolean(this.inputEl.innerHTML),a=Boolean(this.inputEl.getAttribute("show-character-counter")),f=Boolean(this.inputEl.getAttribute("placeholder"))||Boolean(this.inputEl.placeholder),m=s("form-control",`form-control--font-size-${this.fontSize}`,`form-control--label-position-${this.labelPosition}`,{"form-control--disabled":this.disabled,"form-control--has-character-counter":a,"form-control--has-focus":this.hasFocus,"form-control--has-placeholder":f,"form-control--has-prefix":i,"form-control--has-icon":n,"form-control--has-value":c,"form-control--hide-label":this.hideLabel,"form-control--inline":this.inline,"form-control--invalid":this.invalid,"form-control--is-select":"SWIRL-SELECT"===this.inputEl.tagName}),d=e?"div":"label";return r(t,{key:"13d2a3e34d0519deb13fc0c48bdcd50e5c998afa",onFocusin:this.onFocusIn,onFocusout:this.onFocusOut,onKeyDown:this.onKeyDown},r("div",{key:"fa2959507fcbb63ff9b46e3a5250b24a5b8e3020",class:m,role:"group"},r("span",{key:"5da5d74a5a29102e15bf5075b696f0cc53712830",class:"form-control__controls"},r("span",{key:"7dd1a58fdac4a4b4ef6932d8c92068a5a77b58bb",class:"form-control__prefix"},r("slot",{key:"78928c653468ce923e22d73f7f3db1f048a5d066",name:"prefix"})),r(d,{key:"5b632cf43b54e83db9e908d76120119696b351b8",class:"form-control__label",onClick:this.onLabelClick},n&&r("span",{key:"9f3dd8179cd5a9ab2f373f360676002c3f375b30",class:"form-control__icon"},r("swirl-icon",{key:"84f763010a68c9782cde47af8028ecba5ee21c0a",glyph:this.icon,size:20})),r("span",{key:"8525bb87b93fd1fcec6bf9299f77b66055f664d3",class:"form-control__label-text",id:this.labelId},this.label,this.secondaryLabel&&"outside"===this.labelPosition&&r("span",{key:"fd4ceb7d0951b4b5f6c8c1f9ccf1339789cc9d55",class:"form-control__secondary-label"},this.secondaryLabel),this.tooltip&&r("span",{key:"045855d7e63c2f3c63fa716f485c0248e8a08567",class:"form-control__tooltip"},r("swirl-tooltip",{key:"e9ff35f3bff49113de0535f62e9d80f7003fb962",content:this.tooltip,positioning:"fixed",position:"top"},r("swirl-icon-help",{key:"61d4d4df9d518d9294a510530003df16c0215dd5",size:16,tabindex:"0"})))),r("span",{key:"748d81f068640f3cbff2ab1b31a87046442c6521",class:"form-control__input"},r("slot",{key:"c395ac72ad7d609f88e91fa38cddab6b871e66ec"})))),l&&r("span",{key:"632118d7120ae262a52ca6eb3f8449c77a7288c9",class:"form-control__description",id:this.descriptionId},this.description),r("span",{key:"d9dc941f07cb0df699afbba834de82546f06b361","aria-live":"polite"},o&&r("span",{key:"c3f41f71bb570cbe08348205cbccf0170d4757e7",class:"form-control__error-message",id:this.descriptionId},r("swirl-inline-error",{key:"3b579f6ff3941f7cafedf0991022026b6ac9e5fd",message:this.errorMessage,size:"s"})))))}get el(){return l(this)}static get watchers(){return{description:["watchDescription"],errorMessage:["watchErrorMessage"],disabled:["setInputElementDisabledState"],inline:["setInputElementInlineState"],invalid:["setInputElementInvalidState"],label:["setInputElementLabel"]}}};n.style='.sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:"";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url(\'data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z" fill="%236E6E6E"/></svg>\');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__icon.sc-swirl-form-control{position:absolute;top:0px;bottom:0px;margin:auto;display:flex;align-items:center;justify-content:center;width:var(--s-space-20)}.form-control--has-icon.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control--has-icon.sc-swirl-form-control .form-control__input.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}';export{n as swirl_form_control}
|
|
1
|
+
import{r as o,h as r,H as t,d as l}from"./p-CWOhMVtL.js";import{c as s}from"./p-orsBiyT_.js";import{j as e,k as i}from"./p-DytJsmhr.js";const n=class{constructor(r){o(this,r),this.fontSize="default",this.labelPosition="inside",this.descriptionId=`form-control-description-${Math.round(1e5*Math.random())}`,this.labelId=`form-control-label-${Math.round(1e5*Math.random())}`,this.listenToInputValueChanges=()=>{this.inputEl.addEventListener("valueChange",this.checkInputValue)},this.checkInputValue=()=>{this.inputValue=this.inputEl?.value},this.onFocusIn=()=>{this.hasFocus=!0},this.onFocusOut=()=>{this.hasFocus=!1},this.onKeyDown=o=>{"Tab"===o.key&&setTimeout((()=>{e(i(),this.el)||(this.hasFocus=!1)}))},this.onLabelClick=()=>{Boolean(this.inputEl.getAttribute("contenteditable"))&&this.inputEl.focus()}}componentWillLoad(){this.inputEl=this.el.firstElementChild,this.associateDescriptionWithInputElement(),this.associateLabelWithInputElement(),this.setInputElementDisabledState(),this.setInputElementInlineState(),this.setInputElementInvalidState(),this.setInputElementLabel(),this.checkInputValue(),this.listenToInputValueChanges()}componentDidRender(){this.checkInputValue()}watchDescription(){this.associateDescriptionWithInputElement()}watchErrorMessage(){this.associateDescriptionWithInputElement()}setInputElementDisabledState(){Boolean(this.inputEl)&&(this.disabled?this.inputEl.setAttribute("disabled","true"):this.inputEl.removeAttribute("disabled"))}setInputElementInlineState(){Boolean(this.inputEl)&&(this.inline||"outside"===this.labelPosition?this.inputEl.setAttribute("inline","true"):this.inputEl.removeAttribute("inline"))}setInputElementInvalidState(){Boolean(this.inputEl)&&(this.invalid?this.inputEl.setAttribute("invalid","true"):this.inputEl.removeAttribute("invalid"))}setInputElementLabel(){if(!Boolean(this.inputEl))return;let o=this.label;this.secondaryLabel&&(o+=` ${this.secondaryLabel}`),this.inputEl.setAttribute("label",o)}onWindowClick(o){this.hasFocus&&(this.el.contains(o.target)||(o.stopPropagation(),this.hasFocus=!1))}associateLabelWithInputElement(){Boolean(this.inputEl.getAttribute("contenteditable"))&&(this.inputEl.setAttribute("aria-labelledby",this.labelId),this.inputEl.setAttribute("aria-describedby",this.descriptionId))}associateDescriptionWithInputElement(){Boolean(this.inputEl)&&(Boolean(this.description)||Boolean(this.errorMessage)?Boolean(this.inputEl.getAttribute("contenteditable"))?this.inputEl.setAttribute("aria-describedby",this.descriptionId):this.inputEl.setAttribute("swirl-aria-describedby",this.descriptionId):(this.inputEl.removeAttribute("aria-describedby"),this.inputEl.removeAttribute("swirl-aria-describedby")))}render(){const o=Boolean(this.errorMessage),l=Boolean(this.description)&&!o,e=Boolean(this.inputEl.getAttribute("contenteditable")),i=Boolean(this.el.querySelector('[slot="prefix"]')),n=Boolean(this.icon),c=Array.isArray(this.inputValue)?this.inputValue.length>0:Boolean(this.inputValue)||e&&Boolean(this.inputEl.innerHTML),a=Boolean(this.inputEl.getAttribute("show-character-counter")),f=Boolean(this.inputEl.getAttribute("placeholder"))||Boolean(this.inputEl.placeholder),m=s("form-control",`form-control--font-size-${this.fontSize}`,`form-control--label-position-${this.labelPosition}`,{"form-control--disabled":this.disabled,"form-control--has-character-counter":a,"form-control--has-focus":this.hasFocus,"form-control--has-placeholder":f,"form-control--has-prefix":i,"form-control--has-icon":n,"form-control--has-value":c,"form-control--hide-label":this.hideLabel,"form-control--inline":this.inline,"form-control--invalid":this.invalid,"form-control--is-select":"SWIRL-SELECT"===this.inputEl.tagName}),d=e?"div":"label";return r(t,{key:"13d2a3e34d0519deb13fc0c48bdcd50e5c998afa",onFocusin:this.onFocusIn,onFocusout:this.onFocusOut,onKeyDown:this.onKeyDown},r("div",{key:"fa2959507fcbb63ff9b46e3a5250b24a5b8e3020",class:m,role:"group"},r("span",{key:"5da5d74a5a29102e15bf5075b696f0cc53712830",class:"form-control__controls"},r("span",{key:"7dd1a58fdac4a4b4ef6932d8c92068a5a77b58bb",class:"form-control__prefix"},r("slot",{key:"78928c653468ce923e22d73f7f3db1f048a5d066",name:"prefix"})),r(d,{key:"5b632cf43b54e83db9e908d76120119696b351b8",class:"form-control__label",onClick:this.onLabelClick},n&&r("span",{key:"9f3dd8179cd5a9ab2f373f360676002c3f375b30",class:"form-control__icon"},r("swirl-icon",{key:"84f763010a68c9782cde47af8028ecba5ee21c0a",glyph:this.icon,size:20})),r("span",{key:"8525bb87b93fd1fcec6bf9299f77b66055f664d3",class:"form-control__label-text",id:this.labelId},this.label,this.secondaryLabel&&"outside"===this.labelPosition&&r("span",{key:"fd4ceb7d0951b4b5f6c8c1f9ccf1339789cc9d55",class:"form-control__secondary-label"},this.secondaryLabel),this.tooltip&&r("span",{key:"045855d7e63c2f3c63fa716f485c0248e8a08567",class:"form-control__tooltip"},r("swirl-tooltip",{key:"e9ff35f3bff49113de0535f62e9d80f7003fb962",content:this.tooltip,positioning:"fixed",position:"top"},r("swirl-icon-help",{key:"61d4d4df9d518d9294a510530003df16c0215dd5",size:16,tabindex:"0"})))),r("span",{key:"748d81f068640f3cbff2ab1b31a87046442c6521",class:"form-control__input"},r("slot",{key:"c395ac72ad7d609f88e91fa38cddab6b871e66ec"})))),l&&r("span",{key:"632118d7120ae262a52ca6eb3f8449c77a7288c9",class:"form-control__description",id:this.descriptionId},this.description),r("span",{key:"d9dc941f07cb0df699afbba834de82546f06b361","aria-live":"polite"},o&&r("span",{key:"c3f41f71bb570cbe08348205cbccf0170d4757e7",class:"form-control__error-message",id:this.descriptionId},r("swirl-inline-error",{key:"3b579f6ff3941f7cafedf0991022026b6ac9e5fd",message:this.errorMessage,size:"s"})))))}get el(){return l(this)}static get watchers(){return{description:["watchDescription"],errorMessage:["watchErrorMessage"],disabled:["setInputElementDisabledState"],inline:["setInputElementInlineState"],invalid:["setInputElementInvalidState"],label:["setInputElementLabel"]}}};n.style='.sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:"";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url(\'data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z" fill="%236E6E6E"/></svg>\');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__icon.sc-swirl-form-control{position:absolute;top:0px;bottom:0px;margin:auto;display:flex;align-items:center;justify-content:center;width:var(--s-space-20)}.form-control--has-icon.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control--has-icon.sc-swirl-form-control .form-control__input.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}';export{n as swirl_form_control}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,h as t,H as e,d as s}from"./p-CWOhMVtL.js";import{q as a,k as o}from"./p-
|
|
1
|
+
import{r as i,h as t,H as e,d as s}from"./p-CWOhMVtL.js";import{q as a,k as o}from"./p-DytJsmhr.js";import{c as n}from"./p-orsBiyT_.js";import{D as r}from"./p-DJ2FyZeW.js";const c=class{constructor(t){i(this,t),this.onKeyDown=i=>{"ArrowDown"===i.code||"ArrowRight"===i.code?(i.preventDefault(),this.focusNextItem()):"ArrowUp"!==i.code&&"ArrowLeft"!==i.code||(i.preventDefault(),this.focusPreviousItem())},this.onFocusOut=i=>{if(this.isInsidePopover)return;const t=i.relatedTarget,e=i.target,s="SWIRL-ACTION-LIST-ITEM"===e?.tagName,a=null===t||!this.el.contains(t);!this.isInsidePopover&&a&&s&&this.container.setAttribute("tabindex","0")},this.onFocus=()=>{if(this.isInsidePopover)return;this.container.removeAttribute("tabindex");const i=this.getItems(),t=this.getActiveItemIndex();t>-1?i[t]?.focus():i[0]?.focus()}}componentDidLoad(){queueMicrotask((()=>{this.isInsidePopover=null!==this.el.closest("swirl-popover"),this.isInsidePopover||this.container.setAttribute("tabindex","0")})),this.setSectionSeparator()}getItems(){return a(this.el,'[role="menuitem"]')}focusNextItem(){const i=this.getItems();i[(this.getActiveItemIndex()+1)%i.length].focus()}focusPreviousItem(){const i=this.getItems(),t=this.getActiveItemIndex(),e=0===t?i.length-1:t-1;i[e]?.focus()}getActiveItemIndex(){const i=this.getItems(),t=o();return i.findIndex((i=>i===t||i===t?.querySelector('[role="menuitem"]')))}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((i=>i.isConnected)).forEach(((i,t)=>{0===t&&"SWIRL-ACTION-LIST-ITEM"!==i.previousElementSibling?.tagName&&(i.hasSeparator=!1)}))}render(){return t(e,{key:"43302205ab460e62eea276473fa508302174a25d"},t("div",{key:"a6483438c92378439d9d225b92dac7db282d56ea","aria-orientation":"vertical",class:"action-list",onFocusout:this.isInsidePopover?void 0:this.onFocusOut,onFocus:this.isInsidePopover?void 0:this.onFocus,onKeyDown:this.onKeyDown,part:"action-list",ref:i=>this.container=i,role:"menu"},t("slot",{key:"7c1b11a88d2d2428a0c29e3bc191407f544ccd07",onSlotchange:this.setSectionSeparator})))}get el(){return s(this)}};c.style=":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";const l=class{constructor(t){i(this,t),this.intent="default",this.size="m",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((i=>{this.forceIconProps(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0],e=this.suffixEl?.children[0];t?.setAttribute("size",i?"20":"24");const s=this.iconBadgeEl?.children[0];s?.setAttribute("size","xs"),s?.setAttribute("variant","dot"),"SWIRL-TAG"!==e?.tagName&&e?.setAttribute("size",i?"20":"24")}render(){const i=Boolean(this.badge),s=Boolean(this.iconBadge),a=Boolean(this.el.querySelector('[slot="suffix"]')),o=(Boolean(this.suffix)||a)&&!this.disabled,r=n("action-list-item",`action-list-item--intent-${this.intent}`,`action-list-item--size-${this.size}`);return t(e,{key:"6e0ba3475bbabc4b456d23070aada4ad73a7bef7"},t("button",{key:"568753980452f56f6305573cfacc1540728f8a64","aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,class:r,disabled:this.disabled,part:"action-list-item",role:"menuitem",tabIndex:-1,type:"button"},t("slot",{key:"90c23d6a829bdb2903ff76eda7852101b174b198",name:"avatar"}),this.icon&&t("span",{key:"1855b294b64760c5399cfb9b371715399ed2e985",class:"action-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},s&&t("span",{key:"1db1f001b6a4e9d40d4e11dddb5f2a45c8c81106",class:"action-list-item__icon-badge",innerHTML:this.iconBadge,ref:i=>this.iconBadgeEl=i})),t("span",{key:"a55df1b640cb5c5109dc632c39dca728fce290da",class:"action-list-item__label-container"},t("span",{key:"ae479a05bbfd854b8472d3977d7489df73e611cb",class:"action-list-item__label"},this.label),this.description&&t("span",{key:"959761897cc5c8d4d2474795460b66bb5d22475b",class:"action-list-item__description"},this.description)),i&&t("span",{key:"cd679c3648c86d6d7f5c9c37f1d02e8b14cd2bfe",class:"action-list-item__badge",innerHTML:this.badge}),o&&t("span",{key:"88754ec73e17680ebdc939f42df996dace73fdce",class:"action-list-item__suffix",innerHTML:a?void 0:this.suffix,ref:i=>this.suffixEl=i},t("slot",{key:"37b5c4659a5ff5c1e36e9dd47292180e9b9a5dac",name:"suffix"}))))}get el(){return s(this)}};l.style=":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}";export{c as swirl_action_list,l as swirl_action_list_item}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,c as t,h as s,H as e,d as o}from"./p-CWOhMVtL.js";import{S as l}from"./p-CMrz6687.js";import{l as n,q as a}from"./p-D_MUFqkF.js";import{v as r}from"./p-DD3477fe.js";import{c as h}from"./p-orsBiyT_.js";import{D as c}from"./p-LU4x678Z.js";const d=class{constructor(s){i(this,s),this.itemDrop=t(this,"itemDrop",7),this.valueChange=t(this,"valueChange",7),this.allowDeselect=!0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.selectAllLabel="Select all",this.value=[],this.selectAllState=!1,this.selectAllValue=r(),this.onClick=i=>{i.preventDefault();const t=i.target,s=t?.closest("swirl-option-list-item"),e=i.composedPath()[0],o=Boolean(n(e,'[role="option"]'));if(Boolean(s)&&o)if(s.value===this.selectAllValue)this.selectAllChanged();else{const i=this.items.findIndex((i=>i.value===s.value));this.focusItem(i),this.selectItem(i)}else i.preventDefault()},this.onKeyDown=i=>{if("ArrowDown"===i.code)i.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===i.code)i.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===i.code||"Enter"===i.code){if(!i.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return i.preventDefault(),void this.stopDrag(this.dragging);const t=i.composedPath()[0],s=Boolean(n(t,'[role="option"]')),e=t?.closest("swirl-option-list-item")?.value===this.selectAllValue;if(!s&&!e)return;i.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):e?this.selectAllChanged():this.selectFocusedItem()}else"Home"===i.code?(i.preventDefault(),this.showSelectAll?this.focusSelectAll():this.focusItem(0)):"End"===i.code?(i.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===i.code&&(i.metaKey||i.ctrlKey)&&this.multiSelect?(i.preventDefault(),this.selectAllItems()):"Tab"===i.code&&Boolean(this.dragging)&&i.preventDefault()},this.resetTabIndex=()=>{this.removeItemsTabIndex(),this.focusedItem=void 0;const i=this.items[0]?.querySelector('[role="option"]'),t=this.selectAllEl?.querySelector('[role="option"]');(t||i)?.setAttribute("tabIndex","0")},this.selectAllChanged=()=>{if(this.disabled)return;const i=this.items?.length||0;this.updateValue((this.value?.length||0)===i?[]:this.items.map((i=>i.value)))},this.toggleDrag=i=>{const t=i.detail;Boolean(this.dragging)?this.stopDrag(t):this.startDrag(t)},this.startDrag=i=>{this.dragging=i,this.draggingStartIndex=this.getItemIndex(this.dragging),i.setAttribute("dragging","true");const t=this.getItemIndex(this.dragging);this.focusItem(t),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=i=>{this.dragging=void 0,i.removeAttribute("dragging");const t=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${t+1}`,this.itemDrop.emit({item:i,oldIndex:this.draggingStartIndex,newIndex:t}),this.draggingStartIndex=void 0,this.focusItem(t)}}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop(),this.setSectionSeparator(),this.setSelectAllState(),this.subscribeToSwirlPopover()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.unsubscribeFromSwirlPopover(),this.observer?.disconnect(),this.sortable?.destroy()}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue(),this.setSelectAllState()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setSelectAllState()})),this.observer.observe(this.listboxEl,{childList:!0,subtree:!0})}setSelectAllState(){const i=this.items?.length||0,t=this.value?.length||0;this.selectAllState=0!==i&&0!==t&&(t===i||"indeterminate")}updateItems(){this.items=a(this.el,"swirl-option-list-item").filter((i=>i.value!==this.selectAllValue)),this.selectAllEl?.querySelector('[tabindex="0"]')||this.items.some((i=>i.querySelector('[tabindex="0"]')))||this.resetTabIndex()}removeItemsTabIndex(){this.selectAllEl?.querySelector('[role="option"]')?.removeAttribute("tabIndex"),this.items.forEach((i=>i.querySelector('[role="option"]')?.removeAttribute("tabIndex")))}setItemDisabledState(){this.disabled&&this.items.forEach((i=>i.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((i=>i.context="multi-select")):(this.items.forEach((i=>i.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=l.create(this.listboxEl,{animation:150,draggable:'swirl-option-list-item[allow-drag="true"]',handle:".option-list-item__drag-handle",onEnd:i=>{this.itemDrop.emit({item:i.item,oldIndex:i.oldIndex,newIndex:i.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const i=a(this.el,"swirl-option-list-section");this.allowDrag&&i.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?i=>{i.setAttribute("allow-drag","true"),i.addEventListener("toggleDrag",this.toggleDrag)}:i=>{i.removeAttribute("allow-drag"),i.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(i){if(this.disabled)return;const t=this.items[i];if(t.disabled)return;const s=this.value.includes(t.value);s&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(s?this.value.filter((i=>i!==t.value)):[...this.value,t.value]))}updateValue(i){this.value=i,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const i=this.items.every((i=>this.value.includes(i.value)));this.updateValue(i?[]:this.items.map((i=>i.value)))}syncItemsWithValue(){this.items?.forEach((i=>i.selected=this.value.includes(i.value)))}focusItem(i){if(this.disabled)return;this.removeItemsTabIndex();const t=this.items[i]?.querySelector('[role="option"]');Boolean(t)&&(t.setAttribute("tabIndex","0"),t.focus(),this.focusedItem=t)}focusNextItem(){if(this.disabled)return;const i=this.getActiveItemIndex(),t=Math.min(i+1,this.items.length-1);this.focusItem(t)}focusPreviousItem(){const i=this.getActiveItemIndex();if(i<=0&&this.showSelectAll)this.focusSelectAll();else{const t=Math.max(i-1,0);this.focusItem(t)}}focusSelectAll(){const i=this.selectAllEl?.querySelector('[role="option"]');i&&(this.removeItemsTabIndex(),i.setAttribute("tabIndex","0"),i.focus(),this.focusedItem=void 0)}getActiveItemIndex(){return Boolean(this.focusedItem)?this.items.map((i=>i.querySelector('[role="option"]'))).findIndex((i=>i===this.focusedItem)):Boolean(this.selectAllEl)?-1:0}getItemIndex(i){return this.items.map((i=>i)).findIndex((t=>t===i))}moveDraggedItemDown(){const i=this.dragging.nextElementSibling;Boolean(i)&&(i.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const i=this.dragging.previousElementSibling;Boolean(i)&&i!==this.selectAllEl&&(i.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((i=>i.isConnected)).forEach(((i,t)=>{0===t&&"SWIRL-OPTION-LIST-ITEM"!==i.previousElementSibling?.tagName&&(i.hasSeparator=!1)}))}subscribeToSwirlPopover(){this.swirlPopover=n(this.el,"swirl-popover"),this.swirlPopover?.addEventListener("popoverClose",this.resetTabIndex)}unsubscribeFromSwirlPopover(){this.swirlPopover?.removeEventListener("popoverClose",this.resetTabIndex)}render(){const i=this.multiSelect?"true":void 0,t=Boolean(this.dragging)?0:void 0,o=this.multiSelect&&this.showSelectAll;return s(e,{key:"8f003735c4c5347724373773834fb0cf1111dba9"},s("swirl-visually-hidden",{key:"f0274d5671f707a6130791dc6537d9044387c877",role:"alert"},this.assistiveText),s("div",{key:"1e99aa245849dcc45e27e5ba2dd33f25954dc164","aria-label":this.label,"aria-multiselectable":i,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:i=>this.listboxEl=i,role:"listbox",tabIndex:t},o&&s("swirl-option-list-item",{key:"f4c317311dbc15bd1109ede4dec5bb2c63dc7c76",ref:i=>this.selectAllEl=i,label:this.selectAllLabel,disabled:this.disabled,context:"multi-select",selected:!0===this.selectAllState,indeterminate:"indeterminate"===this.selectAllState,value:this.selectAllValue}),s("slot",{key:"657775578ac2cb72820fedae1a39281cb02d4466",onSlotchange:this.setSectionSeparator})))}get el(){return o(this)}static get watchers(){return{allowDrag:["watchAllowDrag"],disabled:["watchDisabled"],multiSelect:["watchMultiSelect"],value:["watchValue"]}}};d.style=".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";const p=class{constructor(s){i(this,s),this.toggleDrag=t(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.iconSize=24,this.elementId=r(),this.mediaQueryUnsubscribe=()=>{},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.onBlur=()=>{this.focused=!1},this.onFocus=()=>{this.focused=!0}}componentDidLoad(){this.mediaQueryUnsubscribe=c.subscribe((i=>{this.forceIconProps(i),this.updateIconSize(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0];t?.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,t=this.indeterminate?void 0:String(this.selected),o="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,n=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),r=this.selected&&"single-select"===this.context,c=h("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected,"option-list-item--indeterminate":this.indeterminate&&!this.selected,"option-list-item--show-avatar":a});return s(e,{key:"f8c00ccd0edb0d188d0f65e621a3b3bd0f85ecf4"},s("div",{key:"b2cee25c44a70638fe775d0ae34386aa1bdf57c2","aria-checked":"menuitemradio"===this.swirlAriaRole?t:void 0,"aria-describedby":Boolean(this.description)?`option-list-item-${this.elementId}-description`:void 0,"aria-disabled":i,"aria-labelledby":`option-list-item-${this.elementId}-label`,"aria-selected":"option"===this.swirlAriaRole?t:void 0,class:c,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole},l&&s("span",{key:"fc899506beea9dcb1898b196a21e557aa45b1b43",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},n&&s("span",{key:"52d35bd66d1b51121720dd338ca9db2c494789d2",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),o&&s("span",{key:"cab616b7087d2d16b4009495e871d48de58e11ea",class:"option-list-item__checkbox"},s("span",{key:"3dea1f0a44b4d46467ecbd8369c2b6aaed3123cc",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"9b678ac705e7320d73748713068cfee00c3f47eb",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"76be874ba26f15a52f46d850861de625a5a7dec0",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"cff0e637854a7ebf4b21ee72646099d770f737c4",class:"option-list-item__avatar"},s("slot",{key:"aa0246a84d995d205ca6dccadace99a1225cc5cf",name:"avatar"})),s("span",{key:"6d909506dce28d3265ef93e0ee8050664eeb7e42",class:"option-list-item__label-container"},s("span",{key:"68470d33d2055d239e86fd07469fa59e19333965",class:"option-list-item__label",id:`option-list-item-${this.elementId}-label`,part:"option-list-item__label"},this.label),this.description&&s("span",{key:"412f387f6e43974077d9b6b78b3c57fa5734f7b7",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),r&&s("span",{key:"e7d77c2368b9e4d44da76612233dd627dbf91007",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"1488cac89c93b82ea6160de2181e34eff34f561b",size:this.iconSize}))),this.allowDrag&&s("button",{key:"97bb0b22816c33b08a34a4c879cfbb6c1115239e","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,tabIndex:this.focused?0:-1,type:"button"},s("swirl-icon-drag-handle",{key:"fb047094366a625ef1ba88b69bcde10411e1023a",size:this.iconSize})))}get el(){return o(this)}};p.style='.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}';export{d as swirl_option_list,p as swirl_option_list_item}
|
|
1
|
+
import{r as i,c as t,h as s,H as e,d as o}from"./p-CWOhMVtL.js";import{S as l}from"./p-CMrz6687.js";import{l as n,q as a}from"./p-DytJsmhr.js";import{v as r}from"./p-DD3477fe.js";import{c as h}from"./p-orsBiyT_.js";import{D as c}from"./p-DJ2FyZeW.js";const d=class{constructor(s){i(this,s),this.itemDrop=t(this,"itemDrop",7),this.valueChange=t(this,"valueChange",7),this.allowDeselect=!0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.selectAllLabel="Select all",this.value=[],this.selectAllState=!1,this.selectAllValue=r(),this.onClick=i=>{i.preventDefault();const t=i.target,s=t?.closest("swirl-option-list-item"),e=i.composedPath()[0],o=Boolean(n(e,'[role="option"]'));if(Boolean(s)&&o)if(s.value===this.selectAllValue)this.selectAllChanged();else{const i=this.items.findIndex((i=>i.value===s.value));this.focusItem(i),this.selectItem(i)}else i.preventDefault()},this.onKeyDown=i=>{if("ArrowDown"===i.code)i.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===i.code)i.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===i.code||"Enter"===i.code){if(!i.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return i.preventDefault(),void this.stopDrag(this.dragging);const t=i.composedPath()[0],s=Boolean(n(t,'[role="option"]')),e=t?.closest("swirl-option-list-item")?.value===this.selectAllValue;if(!s&&!e)return;i.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):e?this.selectAllChanged():this.selectFocusedItem()}else"Home"===i.code?(i.preventDefault(),this.showSelectAll?this.focusSelectAll():this.focusItem(0)):"End"===i.code?(i.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===i.code&&(i.metaKey||i.ctrlKey)&&this.multiSelect?(i.preventDefault(),this.selectAllItems()):"Tab"===i.code&&Boolean(this.dragging)&&i.preventDefault()},this.resetTabIndex=()=>{this.removeItemsTabIndex(),this.focusedItem=void 0;const i=this.items[0]?.querySelector('[role="option"]'),t=this.selectAllEl?.querySelector('[role="option"]');(t||i)?.setAttribute("tabIndex","0")},this.selectAllChanged=()=>{if(this.disabled)return;const i=this.items?.length||0;this.updateValue((this.value?.length||0)===i?[]:this.items.map((i=>i.value)))},this.toggleDrag=i=>{const t=i.detail;Boolean(this.dragging)?this.stopDrag(t):this.startDrag(t)},this.startDrag=i=>{this.dragging=i,this.draggingStartIndex=this.getItemIndex(this.dragging),i.setAttribute("dragging","true");const t=this.getItemIndex(this.dragging);this.focusItem(t),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=i=>{this.dragging=void 0,i.removeAttribute("dragging");const t=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${t+1}`,this.itemDrop.emit({item:i,oldIndex:this.draggingStartIndex,newIndex:t}),this.draggingStartIndex=void 0,this.focusItem(t)}}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop(),this.setSectionSeparator(),this.setSelectAllState(),this.subscribeToSwirlPopover()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.unsubscribeFromSwirlPopover(),this.observer?.disconnect(),this.sortable?.destroy()}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue(),this.setSelectAllState()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setSelectAllState()})),this.observer.observe(this.listboxEl,{childList:!0,subtree:!0})}setSelectAllState(){const i=this.items?.length||0,t=this.value?.length||0;this.selectAllState=0!==i&&0!==t&&(t===i||"indeterminate")}updateItems(){this.items=a(this.el,"swirl-option-list-item").filter((i=>i.value!==this.selectAllValue)),this.selectAllEl?.querySelector('[tabindex="0"]')||this.items.some((i=>i.querySelector('[tabindex="0"]')))||this.resetTabIndex()}removeItemsTabIndex(){this.selectAllEl?.querySelector('[role="option"]')?.removeAttribute("tabIndex"),this.items.forEach((i=>i.querySelector('[role="option"]')?.removeAttribute("tabIndex")))}setItemDisabledState(){this.disabled&&this.items.forEach((i=>i.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((i=>i.context="multi-select")):(this.items.forEach((i=>i.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=l.create(this.listboxEl,{animation:150,draggable:'swirl-option-list-item[allow-drag="true"]',handle:".option-list-item__drag-handle",onEnd:i=>{this.itemDrop.emit({item:i.item,oldIndex:i.oldIndex,newIndex:i.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const i=a(this.el,"swirl-option-list-section");this.allowDrag&&i.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?i=>{i.setAttribute("allow-drag","true"),i.addEventListener("toggleDrag",this.toggleDrag)}:i=>{i.removeAttribute("allow-drag"),i.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(i){if(this.disabled)return;const t=this.items[i];if(t.disabled)return;const s=this.value.includes(t.value);s&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(s?this.value.filter((i=>i!==t.value)):[...this.value,t.value]))}updateValue(i){this.value=i,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const i=this.items.every((i=>this.value.includes(i.value)));this.updateValue(i?[]:this.items.map((i=>i.value)))}syncItemsWithValue(){this.items?.forEach((i=>i.selected=this.value.includes(i.value)))}focusItem(i){if(this.disabled)return;this.removeItemsTabIndex();const t=this.items[i]?.querySelector('[role="option"]');Boolean(t)&&(t.setAttribute("tabIndex","0"),t.focus(),this.focusedItem=t)}focusNextItem(){if(this.disabled)return;const i=this.getActiveItemIndex(),t=Math.min(i+1,this.items.length-1);this.focusItem(t)}focusPreviousItem(){const i=this.getActiveItemIndex();if(i<=0&&this.showSelectAll)this.focusSelectAll();else{const t=Math.max(i-1,0);this.focusItem(t)}}focusSelectAll(){const i=this.selectAllEl?.querySelector('[role="option"]');i&&(this.removeItemsTabIndex(),i.setAttribute("tabIndex","0"),i.focus(),this.focusedItem=void 0)}getActiveItemIndex(){return Boolean(this.focusedItem)?this.items.map((i=>i.querySelector('[role="option"]'))).findIndex((i=>i===this.focusedItem)):Boolean(this.selectAllEl)?-1:0}getItemIndex(i){return this.items.map((i=>i)).findIndex((t=>t===i))}moveDraggedItemDown(){const i=this.dragging.nextElementSibling;Boolean(i)&&(i.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const i=this.dragging.previousElementSibling;Boolean(i)&&i!==this.selectAllEl&&(i.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((i=>i.isConnected)).forEach(((i,t)=>{0===t&&"SWIRL-OPTION-LIST-ITEM"!==i.previousElementSibling?.tagName&&(i.hasSeparator=!1)}))}subscribeToSwirlPopover(){this.swirlPopover=n(this.el,"swirl-popover"),this.swirlPopover?.addEventListener("popoverClose",this.resetTabIndex)}unsubscribeFromSwirlPopover(){this.swirlPopover?.removeEventListener("popoverClose",this.resetTabIndex)}render(){const i=this.multiSelect?"true":void 0,t=Boolean(this.dragging)?0:void 0,o=this.multiSelect&&this.showSelectAll;return s(e,{key:"8f003735c4c5347724373773834fb0cf1111dba9"},s("swirl-visually-hidden",{key:"f0274d5671f707a6130791dc6537d9044387c877",role:"alert"},this.assistiveText),s("div",{key:"1e99aa245849dcc45e27e5ba2dd33f25954dc164","aria-label":this.label,"aria-multiselectable":i,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:i=>this.listboxEl=i,role:"listbox",tabIndex:t},o&&s("swirl-option-list-item",{key:"f4c317311dbc15bd1109ede4dec5bb2c63dc7c76",ref:i=>this.selectAllEl=i,label:this.selectAllLabel,disabled:this.disabled,context:"multi-select",selected:!0===this.selectAllState,indeterminate:"indeterminate"===this.selectAllState,value:this.selectAllValue}),s("slot",{key:"657775578ac2cb72820fedae1a39281cb02d4466",onSlotchange:this.setSectionSeparator})))}get el(){return o(this)}static get watchers(){return{allowDrag:["watchAllowDrag"],disabled:["watchDisabled"],multiSelect:["watchMultiSelect"],value:["watchValue"]}}};d.style=".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";const p=class{constructor(s){i(this,s),this.toggleDrag=t(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.iconSize=24,this.elementId=r(),this.mediaQueryUnsubscribe=()=>{},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.onBlur=()=>{this.focused=!1},this.onFocus=()=>{this.focused=!0}}componentDidLoad(){this.mediaQueryUnsubscribe=c.subscribe((i=>{this.forceIconProps(i),this.updateIconSize(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0];t?.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,t=this.indeterminate?void 0:String(this.selected),o="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,n=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),r=this.selected&&"single-select"===this.context,c=h("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected,"option-list-item--indeterminate":this.indeterminate&&!this.selected,"option-list-item--show-avatar":a});return s(e,{key:"f8c00ccd0edb0d188d0f65e621a3b3bd0f85ecf4"},s("div",{key:"b2cee25c44a70638fe775d0ae34386aa1bdf57c2","aria-checked":"menuitemradio"===this.swirlAriaRole?t:void 0,"aria-describedby":Boolean(this.description)?`option-list-item-${this.elementId}-description`:void 0,"aria-disabled":i,"aria-labelledby":`option-list-item-${this.elementId}-label`,"aria-selected":"option"===this.swirlAriaRole?t:void 0,class:c,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole},l&&s("span",{key:"fc899506beea9dcb1898b196a21e557aa45b1b43",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},n&&s("span",{key:"52d35bd66d1b51121720dd338ca9db2c494789d2",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),o&&s("span",{key:"cab616b7087d2d16b4009495e871d48de58e11ea",class:"option-list-item__checkbox"},s("span",{key:"3dea1f0a44b4d46467ecbd8369c2b6aaed3123cc",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"9b678ac705e7320d73748713068cfee00c3f47eb",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"76be874ba26f15a52f46d850861de625a5a7dec0",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"cff0e637854a7ebf4b21ee72646099d770f737c4",class:"option-list-item__avatar"},s("slot",{key:"aa0246a84d995d205ca6dccadace99a1225cc5cf",name:"avatar"})),s("span",{key:"6d909506dce28d3265ef93e0ee8050664eeb7e42",class:"option-list-item__label-container"},s("span",{key:"68470d33d2055d239e86fd07469fa59e19333965",class:"option-list-item__label",id:`option-list-item-${this.elementId}-label`,part:"option-list-item__label"},this.label),this.description&&s("span",{key:"412f387f6e43974077d9b6b78b3c57fa5734f7b7",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),r&&s("span",{key:"e7d77c2368b9e4d44da76612233dd627dbf91007",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"1488cac89c93b82ea6160de2181e34eff34f561b",size:this.iconSize}))),this.allowDrag&&s("button",{key:"97bb0b22816c33b08a34a4c879cfbb6c1115239e","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,tabIndex:this.focused?0:-1,type:"button"},s("swirl-icon-drag-handle",{key:"fb047094366a625ef1ba88b69bcde10411e1023a",size:this.iconSize})))}get el(){return o(this)}};p.style='.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}';export{d as swirl_option_list,p as swirl_option_list_item}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,c as e,h as a,H as t,d as s}from"./p-CWOhMVtL.js";import{c as i}from"./p-orsBiyT_.js";import{d as l,i as n}from"./p-D_MUFqkF.js";const d=class{constructor(a){o(this,a),this.backButtonClick=e(this,"backButtonClick",7),this.helpButtonClick=e(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=Boolean(this.el.querySelector('[slot="app-bar"]'))},this.updateFooterStatus=()=>{this.hasFooter=Boolean(this.el.querySelector('[slot="footer"]'))},this.onMainScroll=l((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=o=>{this.backButtonClick.emit(o)},this.onHelpButtonClick=o=>{this.helpButtonClick.emit(o)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=o=>{const e=o.target,a=Boolean(e.closest(".console-layout__mobile-navigation-button")),t="overlays"===e.closest("[slot]")?.slot;o.composedPath().includes(this.sidebarEl)||a||t||!this.sidebarActive||this.deactivateSidebar()},this.onKeyDown=o=>{"Escape"===o.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{n()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const o={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(o).some((e=>o[e]!==this.contentScrollState[e]))&&(this.contentScrollState=o)}onWindowResize(){const o=n();o||this.sidebarActive?o&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive||this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),n()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,n()&&this.sidebarEl.setAttribute("inert","")}render(){const o=Boolean(this.maxContentWidth)?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const e=i("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!Boolean(this.appName)&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom});return a(t,{key:"b3ef80cdb42c4fce7ac3a717100dddfad186c32b"},a("div",{key:"62b19ea2e6a656d490f0770b98a6b752a55a570b",class:e,onClick:this.onClick,onKeyDown:this.onKeyDown},a("header",{key:"db1f75fd30733e512214e15f4b26a2a3cacf36a8","aria-hidden":String(!this.sidebarActive),class:"console-layout__sidebar",ref:o=>this.sidebarEl=o},a("div",{key:"039f15bd92194ccc337551dd0724cc8189485cf3",class:"console-layout__header"},a("div",{key:"ece1f49939e39e0cc043556cb94f1654f61b8035",class:"console-layout__logo"},a("svg",{key:"67881170e60d0bd0bc9437af13bddaf7d0328076",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 16 26",width:"16",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"d75f3c2176c1772f839a30b5aa3fd68a6966fb19",d:"M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z",fill:"#145AF5"}),a("path",{key:"099b5f94df4688bdb48a12927cf3c71d3b208f36",d:"M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z",fill:"#145AF5"}),a("path",{key:"0dfd623bea11168f41898f22025fdc7b9fac1316",d:"M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z",fill:"#80A8F4"}),a("path",{key:"fb492c2455e67fe229fe23811dc424d536f537a0",d:"M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z",fill:"#80A8F4"})),a("swirl-text",{key:"9318d2ce556e7db74520d33b6f1f4e2310ea72a1",class:"console-layout__logo-text",weight:"medium"},this.logoText))),a("nav",{key:"668e4495501473c5f8872711a972abbda24407ea","aria-label":this.navigationLabel,class:"console-layout__navigation"},a("slot",{key:"81d7f3f1bfdb264ea37b183d4f311405db8eea43",name:"navigation"})),a("div",{key:"13effdcd10da2f588fac241ad7e9110c7e74801b",class:"console-layout__user"},a("slot",{key:"59d933f6e0867559d68f54166f3f9764a9c63bd7",name:"user"}))),a("main",{key:"1070ca1e540daa834a6b5934d5ccc5e74b82a70c","aria-labelledby":Boolean(this.appName)?"app-name":void 0,class:"console-layout__main"},a("header",{key:"560cd5cf2d7af584699a092a305f5f7d4fd2765f",class:"console-layout__app-bar console-layout__app-bar--custom"},a("slot",{key:"e9cda793e02051f0b5c08a2b71cfffe40c343d1a",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),a("header",{key:"9e562fdfb5c00c9e47a31c32a0bd6d86ebe171c6",class:"console-layout__app-bar"},a("span",{key:"c0e523db2ebb54694dfe085c908b1f16bb2446b7",class:"console-layout__mobile-navigation-button"},a("swirl-button",{key:"facc935ce87b3a48a5a0864e57c24e760f2ef9f3",swirlAriaExpanded:String(this.sidebarActive),hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),a("div",{key:"aef154152693fcc5e8ebf87fcd65c672c3f09df1",class:"console-layout__app-name"},this.appName&&a("swirl-heading",{key:"5d4cef7055da88d0a5ee714b66a55df7479c5257",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&a("swirl-button",{key:"07bd89d408f0c31a54e41af43f1c7011874c1f87",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),a("section",{key:"034ac139ab9db03f85b981d99c8460ff66f20cb3","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:o=>this.contentEl=o},a("div",{key:"a23bd2d50c89591ab0866e6879af30cd3c516f34",class:"console-layout__content-container"},a("header",{key:"020e4fb160d85df02f787570f55ee9aa22f05597",class:"console-layout__content-header",style:o},this.showBackButton&&a("swirl-button",{key:"aa87631266cd53d188b6092c1bcab6c105a55c6a",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),Boolean(this.heading)&&a("div",{key:"2c16a98bf702d29a10b09dd619f536be98d83d2d",class:"console-layout__heading-container"},a("swirl-heading",{key:"7d50ae02e49ad7593f18dc350999d5cb6c43cae7",as:Boolean(this.appName)?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&a("swirl-text",{key:"e50b5e2bbdad7b5fd9ac353b1bd52e19306740ad",class:"console-layout__subheading",color:"subdued"},this.subheading)),!Boolean(this.heading)&&a("div",{key:"823833f49a24fea48f4c826e6c0e53dfc854a026",class:"console-layout__heading-container"},a("slot",{key:"306decbfba6b29de3a4ab23635745a19950d99a3",name:"heading"})),a("div",{key:"3a3b6555d5d09191913eca4ebb25da4f81478eee",class:"console-layout__content-header-tools"},a("slot",{key:"49fd8de80bdec3b59a2204fded4b5a218ebb85e1",name:"content-header-tools"}))),a("div",{key:"2f90c13fbca1d30cefe36c435a78b650e5edf319",class:"console-layout__integration",style:o},a("slot",{key:"41121fe5b93009c6f51fe0829f45dffdc12811cd",name:"content"})))),a("footer",{key:"9f0acbfcca2b10435f9c7c16750a48a96d7d3ccf",class:"console-layout__footer"},a("slot",{key:"271614a88a7e645148a4b3c84b5dc0c8cdf8767e",name:"footer",onSlotchange:this.updateFooterStatus})),a("div",{key:"5cebe84de96ce72a839939e1cdf7256f8b3d6910",class:"console-layout__overlays"},a("slot",{key:"a1fe1be42259a8fc517ba54fd77b9ad59be9db27",name:"overlays"})))))}get el(){return s(this)}};d.style=':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"\n "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"\n "navigation"\n "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"\n "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"\n "content"\n "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}';export{d as swirl_console_layout}
|
|
1
|
+
import{r as o,c as e,h as a,H as t,d as s}from"./p-CWOhMVtL.js";import{c as i}from"./p-orsBiyT_.js";import{d as l,i as n}from"./p-DytJsmhr.js";const d=class{constructor(a){o(this,a),this.backButtonClick=e(this,"backButtonClick",7),this.helpButtonClick=e(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=Boolean(this.el.querySelector('[slot="app-bar"]'))},this.updateFooterStatus=()=>{this.hasFooter=Boolean(this.el.querySelector('[slot="footer"]'))},this.onMainScroll=l((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=o=>{this.backButtonClick.emit(o)},this.onHelpButtonClick=o=>{this.helpButtonClick.emit(o)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=o=>{const e=o.target,a=Boolean(e.closest(".console-layout__mobile-navigation-button")),t="overlays"===e.closest("[slot]")?.slot;o.composedPath().includes(this.sidebarEl)||a||t||!this.sidebarActive||this.deactivateSidebar()},this.onKeyDown=o=>{"Escape"===o.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{n()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const o={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(o).some((e=>o[e]!==this.contentScrollState[e]))&&(this.contentScrollState=o)}onWindowResize(){const o=n();o||this.sidebarActive?o&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive||this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),n()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,n()&&this.sidebarEl.setAttribute("inert","")}render(){const o=Boolean(this.maxContentWidth)?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const e=i("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!Boolean(this.appName)&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom});return a(t,{key:"b3ef80cdb42c4fce7ac3a717100dddfad186c32b"},a("div",{key:"62b19ea2e6a656d490f0770b98a6b752a55a570b",class:e,onClick:this.onClick,onKeyDown:this.onKeyDown},a("header",{key:"db1f75fd30733e512214e15f4b26a2a3cacf36a8","aria-hidden":String(!this.sidebarActive),class:"console-layout__sidebar",ref:o=>this.sidebarEl=o},a("div",{key:"039f15bd92194ccc337551dd0724cc8189485cf3",class:"console-layout__header"},a("div",{key:"ece1f49939e39e0cc043556cb94f1654f61b8035",class:"console-layout__logo"},a("svg",{key:"67881170e60d0bd0bc9437af13bddaf7d0328076",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 16 26",width:"16",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"d75f3c2176c1772f839a30b5aa3fd68a6966fb19",d:"M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z",fill:"#145AF5"}),a("path",{key:"099b5f94df4688bdb48a12927cf3c71d3b208f36",d:"M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z",fill:"#145AF5"}),a("path",{key:"0dfd623bea11168f41898f22025fdc7b9fac1316",d:"M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z",fill:"#80A8F4"}),a("path",{key:"fb492c2455e67fe229fe23811dc424d536f537a0",d:"M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z",fill:"#80A8F4"})),a("swirl-text",{key:"9318d2ce556e7db74520d33b6f1f4e2310ea72a1",class:"console-layout__logo-text",weight:"medium"},this.logoText))),a("nav",{key:"668e4495501473c5f8872711a972abbda24407ea","aria-label":this.navigationLabel,class:"console-layout__navigation"},a("slot",{key:"81d7f3f1bfdb264ea37b183d4f311405db8eea43",name:"navigation"})),a("div",{key:"13effdcd10da2f588fac241ad7e9110c7e74801b",class:"console-layout__user"},a("slot",{key:"59d933f6e0867559d68f54166f3f9764a9c63bd7",name:"user"}))),a("main",{key:"1070ca1e540daa834a6b5934d5ccc5e74b82a70c","aria-labelledby":Boolean(this.appName)?"app-name":void 0,class:"console-layout__main"},a("header",{key:"560cd5cf2d7af584699a092a305f5f7d4fd2765f",class:"console-layout__app-bar console-layout__app-bar--custom"},a("slot",{key:"e9cda793e02051f0b5c08a2b71cfffe40c343d1a",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),a("header",{key:"9e562fdfb5c00c9e47a31c32a0bd6d86ebe171c6",class:"console-layout__app-bar"},a("span",{key:"c0e523db2ebb54694dfe085c908b1f16bb2446b7",class:"console-layout__mobile-navigation-button"},a("swirl-button",{key:"facc935ce87b3a48a5a0864e57c24e760f2ef9f3",swirlAriaExpanded:String(this.sidebarActive),hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),a("div",{key:"aef154152693fcc5e8ebf87fcd65c672c3f09df1",class:"console-layout__app-name"},this.appName&&a("swirl-heading",{key:"5d4cef7055da88d0a5ee714b66a55df7479c5257",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&a("swirl-button",{key:"07bd89d408f0c31a54e41af43f1c7011874c1f87",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),a("section",{key:"034ac139ab9db03f85b981d99c8460ff66f20cb3","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:o=>this.contentEl=o},a("div",{key:"a23bd2d50c89591ab0866e6879af30cd3c516f34",class:"console-layout__content-container"},a("header",{key:"020e4fb160d85df02f787570f55ee9aa22f05597",class:"console-layout__content-header",style:o},this.showBackButton&&a("swirl-button",{key:"aa87631266cd53d188b6092c1bcab6c105a55c6a",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),Boolean(this.heading)&&a("div",{key:"2c16a98bf702d29a10b09dd619f536be98d83d2d",class:"console-layout__heading-container"},a("swirl-heading",{key:"7d50ae02e49ad7593f18dc350999d5cb6c43cae7",as:Boolean(this.appName)?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&a("swirl-text",{key:"e50b5e2bbdad7b5fd9ac353b1bd52e19306740ad",class:"console-layout__subheading",color:"subdued"},this.subheading)),!Boolean(this.heading)&&a("div",{key:"823833f49a24fea48f4c826e6c0e53dfc854a026",class:"console-layout__heading-container"},a("slot",{key:"306decbfba6b29de3a4ab23635745a19950d99a3",name:"heading"})),a("div",{key:"3a3b6555d5d09191913eca4ebb25da4f81478eee",class:"console-layout__content-header-tools"},a("slot",{key:"49fd8de80bdec3b59a2204fded4b5a218ebb85e1",name:"content-header-tools"}))),a("div",{key:"2f90c13fbca1d30cefe36c435a78b650e5edf319",class:"console-layout__integration",style:o},a("slot",{key:"41121fe5b93009c6f51fe0829f45dffdc12811cd",name:"content"})))),a("footer",{key:"9f0acbfcca2b10435f9c7c16750a48a96d7d3ccf",class:"console-layout__footer"},a("slot",{key:"271614a88a7e645148a4b3c84b5dc0c8cdf8767e",name:"footer",onSlotchange:this.updateFooterStatus})),a("div",{key:"5cebe84de96ce72a839939e1cdf7256f8b3d6910",class:"console-layout__overlays"},a("slot",{key:"a1fe1be42259a8fc517ba54fd77b9ad59be9db27",name:"overlays"})))))}get el(){return s(this)}};d.style=':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"\n "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"\n "navigation"\n "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"\n "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"\n "content"\n "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}';export{d as swirl_console_layout}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,H as s,d as o}from"./p-CWOhMVtL.js";import{d as a,e as h}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{c as n}from"./p-DIdMBZfn.js";import{q as d}from"./p-D_MUFqkF.js";const r=class{constructor(e){i(this,e),this.activeSlideChange=t(this,"activeSlideChange",7),this.lightboxClose=t(this,"lightboxClose",7),this.closeButtonLabel="Close modal",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download",this.menuLabel="Slide options",this.menuTriggerLabel="Open slide menu",this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.activeSlideIndex=0,this.closing=!1,this.isOpen=!1,this.dragging=!1,this.onCloseButtonClick=()=>{this.close()},this.onDownloadButtonClick=()=>{this.slides[this.activeSlideIndex]?.download(),this.menu.close()},this.onNextSlideClick=()=>{this.activateSlide(Math.min(this.slides.length-1,this.activeSlideIndex+1))},this.onPreviousSlideClick=()=>{this.activateSlide(Math.max(0,this.activeSlideIndex-1))},this.registerSlides=()=>{this.slides=Array.from(this.el.children).filter((i=>"SWIRL-FILE-VIEWER"===i.tagName)),this.setSlideAttributes()},this.onPointerDown=i=>{this.slides.length<=1||(this.dragging=!0,this.dragStartPosition=i instanceof MouseEvent?i.clientX:i.touches[0].clientX,this.slides.forEach((i=>{i.style.transition="none"})))},this.onPointerMove=async i=>{if(!this.dragging)return;const t=!(i instanceof MouseEvent)&&i.touches.length>1,e=this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image"),s=!!Boolean(e)&&await e.getZoom()>1;if(t||s)return;i.preventDefault();const o=i instanceof MouseEvent?i.clientX-this.dragStartPosition:i.touches[0].clientX-this.dragStartPosition;this.slides.forEach((i=>{const t=this.activeSlideIndex*i.getBoundingClientRect().width;this.dragDelta=o,i.style.transform=`translate3d(${(-t+this.dragDelta)/16}rem, 0, 0)`}))},this.onPointerUp=()=>{if(!this.dragging)return;this.dragging=!1,this.dragStartPosition=void 0;const i=this.dragDelta/this.slides[this.activeSlideIndex].getBoundingClientRect().width;this.dragDelta=0;const t=i>.2,e=i<-.2;this.slides.forEach((i=>{i.style.transition=""})),t?this.onPreviousSlideClick():e?this.onNextSlideClick():this.resetSlidePositions()},this.onBackdropClick=i=>{i.target===this.slidesContainer&&this.close()},this.onContextMenu=i=>{this.downloadButtonEnabled||i.preventDefault()}}componentWillLoad(){this.registerSlides()}componentDidLoad(){this.activateSlide(0)}componentDidRender(){this.focusTrap?.updateContainerElements(this.modalEl)}disconnectedCallback(){this.focusTrap?.deactivate(),this.unlockBodyScroll(),this.containerObserver?.disconnect(),this.activateSlideTimeout&&clearTimeout(this.activateSlideTimeout),this.closingTimeout&&clearTimeout(this.closingTimeout)}watchActiveSlideIndex(){this.activeSlideChange.emit(this.activeSlideIndex)}onKeyDown(i){this.isOpen&&("Escape"===i.code?(i.stopImmediatePropagation(),this.close()):"ArrowLeft"===i.code?this.onPreviousSlideClick():"ArrowRight"===i.code&&this.onNextSlideClick())}async open(){this.isOpen=!0,this.lockBodyScroll(),this.activateSlide(this.activeSlideIndex||0),setTimeout((()=>{this.focusTrap=n(this.modalEl,{allowOutsideClick:!0,checkCanFocusTrap:i=>(this.containerObserver?.disconnect(),new Promise((t=>{const e=i[0];-1===e.tabIndex?(this.containerObserver=new MutationObserver((()=>{-1!==e.tabIndex&&(this.containerObserver.disconnect(),t())})),this.containerObserver.observe(e,{attributes:!0,attributeFilter:["tabindex"]})):t()}))),tabbableOptions:{getShadowRoot:i=>i.shadowRoot}}),this.focusTrap?.activate()}))}async close(){this.closing||(this.closing=!0,this.focusTrap?.deactivate(),this.unlockBodyScroll(),this.closingTimeout&&(clearTimeout(this.closingTimeout),this.closingTimeout=void 0),this.closingTimeout=setTimeout((()=>{this.isOpen=!1,this.resetImageZoom(),this.stopAllMediaPlayers(),this.closing=!1,this.lightboxClose.emit()}),150))}async activateSlide(i){this.menu?.close?.(),this.dragging=!1,this.activeSlideIndex=i,this.slides.forEach(((i,t)=>{t===this.activeSlideIndex?(i.removeAttribute("aria-hidden"),i.setAttribute("active","true")):t===this.activeSlideIndex-1||t===this.activeSlideIndex+1?(i.setAttribute("aria-hidden","true"),i.setAttribute("active","true")):i.setAttribute("aria-hidden","true"),i.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`})),this.activateSlideTimeout&&(clearTimeout(this.activateSlideTimeout),this.activateSlideTimeout=void 0),this.activateSlideTimeout=setTimeout((()=>{this.slides.forEach(((i,t)=>{t!==this.activeSlideIndex&&t!==this.activeSlideIndex-1&&t!==this.activeSlideIndex+1&&i.setAttribute("active","false")}))}),300),this.stopAllMediaPlayers(),this.resetImageZoom()}setSlideAttributes(){this.slides.forEach((i=>{i.setAttribute("active","false"),i.setAttribute("aria-label",i.file),i.setAttribute("aria-roledescription","slide"),i.setAttribute("role","group"),i.addEventListener("dragstart",(i=>i.preventDefault()))}))}resetSlidePositions(){this.slides.forEach((i=>{i.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`}))}getCurrentFileName(){const i=this.slides[this.activeSlideIndex];return i?.fileName||i?.file?.split("/").pop()}getCurrentFileType(){return this.slides[this.activeSlideIndex]?.type}getCurrentThumbnailUrl(){return this.slides[this.activeSlideIndex]?.thumbnailUrl}lockBodyScroll(){a(this.el)}unlockBodyScroll(){h(this.el)}getMediaPlayers(){return d(this.el,"video")}stopAllMediaPlayers(){this.getMediaPlayers().forEach((i=>i.pause()))}resetImageZoom(){this.slides.forEach((i=>{const t=i?.shadowRoot?.querySelector("swirl-file-viewer-image");Boolean(t)&&t.resetZoom()}))}render(){const i=this.slides.length>1,t=this.getCurrentFileName(),o=this.getCurrentFileType(),a=this.getCurrentThumbnailUrl(),h=Boolean(this.el.querySelector("[slot='menu-items']"))||this.downloadButtonEnabled,n=Boolean(this.el.querySelector("[slot='toolbar']")),d=l("lightbox",{"lightbox--closing":this.closing,"lightbox--hide-menu":!h,"lightbox--hide-toolbar":!n});return e(s,{key:"ef7cbd047bac3b62cbe456739dfae225d8cd1ebb"},e("section",{key:"0b4afe464da9265b4194bb84bba9b6d8c448098a","aria-hidden":String(!this.isOpen),"aria-label":this.label,"aria-modal":"true",class:d,id:"lightbox",onMouseDown:this.onPointerDown,onMouseMove:this.onPointerMove,onMouseOut:this.onPointerUp,onMouseUp:this.onPointerUp,onTouchEnd:this.onPointerUp,onTouchMove:this.onPointerMove,onTouchStart:this.onPointerDown,ref:i=>this.modalEl=i,role:"dialog",tabIndex:this.isOpen?0:-1},e("div",{key:"ecd048b4faf20813533758b2715968034f8a9db9",class:"lightbox__body",role:"document"},e("header",{key:"2f8353ffd549af1e10c805fe275e774b37765458",class:"lightbox__header"},e("button",{key:"5ce3b219b1ba9262e9401779d8f04ba8ea0fc142","aria-label":this.closeButtonLabel,class:"lightbox__close-button",onClick:this.onCloseButtonClick},e("swirl-icon-close",{key:"e1cb9b066b52bc783c1a8f0d2f9e2970f0e97bf6"})),e("div",{key:"31256a598b10c19da8bf1cbcad9833af7c7bcc56",class:"lightbox__toolbar"},e("slot",{key:"ad83d374d525eecf8fe5ca8660efa84cce08627f",name:"toolbar"})),!this.hideMenu&&e("swirl-popover-trigger",{key:"5b77ce1398a13995711e7b28172e06efc6a2a0a6",swirlPopover:this.menu},e("button",{key:"a68c4b8cc54e55ae66963c194694c74b4a2805dd","aria-label":this.menuTriggerLabel,class:"lightbox__menu-button"},e("swirl-icon-more-vertikal",{key:"f6dd02f0a167a7402ec7376796dc456761eee0ea"})))),e("div",{key:"bcee1e42640015d0e61eca98575cd04d8db31c9c","aria-roledescription":"carousel",class:"lightbox__content",role:"group"},e("div",{key:"24f4a799a7e6741760d058537cd151a847133755","aria-atomic":"false","aria-live":"polite",class:"lightbox__slides",onClick:this.onBackdropClick,onContextMenu:this.onContextMenu,ref:i=>this.slidesContainer=i},e("slot",{key:"ef904861260bac6237ff60038e16a7b21d1b9e97",onSlotchange:this.registerSlides}))),e("div",{key:"7c9a493998e7f8599721fbbb17d1a9ccd4ae0a52",class:"lightbox__controls"},e("button",{key:"656d337ef4e3eb6e769986b7bb5e30e33fb07f89","aria-label":this.previousSlideButtonLabel,class:"lightbox__previous-slide-button",disabled:0===this.activeSlideIndex,onClick:this.onPreviousSlideClick},e("swirl-icon-arrow-left",{key:"7c8cd8e3fdb8b65fcf0038ec5e3f7b2138e9f143"})),e("button",{key:"46dc45a573b6149da44eb6cae3d33815ff20387d","aria-label":this.nextSlideButtonLabel,class:"lightbox__next-slide-button",disabled:this.activeSlideIndex===this.slides.length-1,onClick:this.onNextSlideClick},e("swirl-icon-arrow-right",{key:"9f269109dbf618bc7ff12659421f92817283e899"}))),i&&e("span",{key:"c5b1b8aecd9e85dec1f550fe23b8c49bbf0a25d5",class:"lightbox__pagination"},e("span",{key:"782ddc05a9dd831dd3f37103e468e2b27ee1fe96","aria-current":"page"},this.activeSlideIndex+1)," /"," ",this.slides.length)),!this.hideMenu&&e("swirl-popover",{key:"23e003effb0ba1eb188975848799790e72a3488e",animation:"scale-in-y",disableScrollLock:!0,id:"slide-menu",label:this.menuLabel,placement:"bottom-end",ref:i=>this.menu=i},e("swirl-stack",{key:"01a5fb48b943dcc5a1a61065b2dc8aa51aff08b4"},e("div",{key:"ccf3eda1d3ec4bf960bb23381f39008602a315d9",class:"lightbox__meta"},a&&e("div",{key:"670f49f30b7d18b8206ded66d03a7bf56d77c25b",class:"lightbox__thumbnail"},e("swirl-thumbnail",{key:"3375186fbb76b4632dddfdc084bd153363fc6a0f",alt:"",src:a})),e("div",{key:"dd3a475b70000242f7bd5d61c67c8cddefcf412d",class:"lightbox__file-info"},e("swirl-text",{key:"ec46e19e664f58f7db4219122d10242430e4d05e",truncate:!0,weight:"semibold"},t),e("swirl-text",{key:"5ac54930081a8de2a8b585890490eccea6a0aa3c",color:"subdued",size:"sm",truncate:!0},o))),h&&e("swirl-separator",{key:"b39268cdb64e0928b44c5c2033d5e3c240aad8f4"}),e("swirl-action-list",{key:"c7d2fe73dccf2a7f23dda4d3bdff4d21bd0aa6ee"},this.downloadButtonEnabled&&e("swirl-action-list-item",{key:"c01cbfa680c74214085a90f72ad6a942a52a5363",icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownloadButtonClick}),e("slot",{key:"d50b99132f45df1e7a9addb3089eb8fcaf42d732",name:"menu-items"}))))))}get el(){return o(this)}static get watchers(){return{activeSlideIndex:["watchActiveSlideIndex"]}}};r.style=':host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden="true"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox--hide-menu .lightbox__menu{display:none}.lightbox--hide-toolbar .lightbox__toolbar{display:none}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__toolbar{pointer-events:auto}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__menu-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}';export{r as swirl_lightbox}
|
|
1
|
+
import{r as i,c as t,h as e,H as s,d as o}from"./p-CWOhMVtL.js";import{d as a,e as h}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{c as n}from"./p-DIdMBZfn.js";import{q as d}from"./p-DytJsmhr.js";const r=class{constructor(e){i(this,e),this.activeSlideChange=t(this,"activeSlideChange",7),this.lightboxClose=t(this,"lightboxClose",7),this.closeButtonLabel="Close modal",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download",this.menuLabel="Slide options",this.menuTriggerLabel="Open slide menu",this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.activeSlideIndex=0,this.closing=!1,this.isOpen=!1,this.dragging=!1,this.onCloseButtonClick=()=>{this.close()},this.onDownloadButtonClick=()=>{this.slides[this.activeSlideIndex]?.download(),this.menu.close()},this.onNextSlideClick=()=>{this.activateSlide(Math.min(this.slides.length-1,this.activeSlideIndex+1))},this.onPreviousSlideClick=()=>{this.activateSlide(Math.max(0,this.activeSlideIndex-1))},this.registerSlides=()=>{this.slides=Array.from(this.el.children).filter((i=>"SWIRL-FILE-VIEWER"===i.tagName)),this.setSlideAttributes()},this.onPointerDown=i=>{this.slides.length<=1||(this.dragging=!0,this.dragStartPosition=i instanceof MouseEvent?i.clientX:i.touches[0].clientX,this.slides.forEach((i=>{i.style.transition="none"})))},this.onPointerMove=async i=>{if(!this.dragging)return;const t=!(i instanceof MouseEvent)&&i.touches.length>1,e=this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image"),s=!!Boolean(e)&&await e.getZoom()>1;if(t||s)return;i.preventDefault();const o=i instanceof MouseEvent?i.clientX-this.dragStartPosition:i.touches[0].clientX-this.dragStartPosition;this.slides.forEach((i=>{const t=this.activeSlideIndex*i.getBoundingClientRect().width;this.dragDelta=o,i.style.transform=`translate3d(${(-t+this.dragDelta)/16}rem, 0, 0)`}))},this.onPointerUp=()=>{if(!this.dragging)return;this.dragging=!1,this.dragStartPosition=void 0;const i=this.dragDelta/this.slides[this.activeSlideIndex].getBoundingClientRect().width;this.dragDelta=0;const t=i>.2,e=i<-.2;this.slides.forEach((i=>{i.style.transition=""})),t?this.onPreviousSlideClick():e?this.onNextSlideClick():this.resetSlidePositions()},this.onBackdropClick=i=>{i.target===this.slidesContainer&&this.close()},this.onContextMenu=i=>{this.downloadButtonEnabled||i.preventDefault()}}componentWillLoad(){this.registerSlides()}componentDidLoad(){this.activateSlide(0)}componentDidRender(){this.focusTrap?.updateContainerElements(this.modalEl)}disconnectedCallback(){this.focusTrap?.deactivate(),this.unlockBodyScroll(),this.containerObserver?.disconnect(),this.activateSlideTimeout&&clearTimeout(this.activateSlideTimeout),this.closingTimeout&&clearTimeout(this.closingTimeout)}watchActiveSlideIndex(){this.activeSlideChange.emit(this.activeSlideIndex)}onKeyDown(i){this.isOpen&&("Escape"===i.code?(i.stopImmediatePropagation(),this.close()):"ArrowLeft"===i.code?this.onPreviousSlideClick():"ArrowRight"===i.code&&this.onNextSlideClick())}async open(){this.isOpen=!0,this.lockBodyScroll(),this.activateSlide(this.activeSlideIndex||0),setTimeout((()=>{this.focusTrap=n(this.modalEl,{allowOutsideClick:!0,checkCanFocusTrap:i=>(this.containerObserver?.disconnect(),new Promise((t=>{const e=i[0];-1===e.tabIndex?(this.containerObserver=new MutationObserver((()=>{-1!==e.tabIndex&&(this.containerObserver.disconnect(),t())})),this.containerObserver.observe(e,{attributes:!0,attributeFilter:["tabindex"]})):t()}))),tabbableOptions:{getShadowRoot:i=>i.shadowRoot}}),this.focusTrap?.activate()}))}async close(){this.closing||(this.closing=!0,this.focusTrap?.deactivate(),this.unlockBodyScroll(),this.closingTimeout&&(clearTimeout(this.closingTimeout),this.closingTimeout=void 0),this.closingTimeout=setTimeout((()=>{this.isOpen=!1,this.resetImageZoom(),this.stopAllMediaPlayers(),this.closing=!1,this.lightboxClose.emit()}),150))}async activateSlide(i){this.menu?.close?.(),this.dragging=!1,this.activeSlideIndex=i,this.slides.forEach(((i,t)=>{t===this.activeSlideIndex?(i.removeAttribute("aria-hidden"),i.setAttribute("active","true")):t===this.activeSlideIndex-1||t===this.activeSlideIndex+1?(i.setAttribute("aria-hidden","true"),i.setAttribute("active","true")):i.setAttribute("aria-hidden","true"),i.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`})),this.activateSlideTimeout&&(clearTimeout(this.activateSlideTimeout),this.activateSlideTimeout=void 0),this.activateSlideTimeout=setTimeout((()=>{this.slides.forEach(((i,t)=>{t!==this.activeSlideIndex&&t!==this.activeSlideIndex-1&&t!==this.activeSlideIndex+1&&i.setAttribute("active","false")}))}),300),this.stopAllMediaPlayers(),this.resetImageZoom()}setSlideAttributes(){this.slides.forEach((i=>{i.setAttribute("active","false"),i.setAttribute("aria-label",i.file),i.setAttribute("aria-roledescription","slide"),i.setAttribute("role","group"),i.addEventListener("dragstart",(i=>i.preventDefault()))}))}resetSlidePositions(){this.slides.forEach((i=>{i.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`}))}getCurrentFileName(){const i=this.slides[this.activeSlideIndex];return i?.fileName||i?.file?.split("/").pop()}getCurrentFileType(){return this.slides[this.activeSlideIndex]?.type}getCurrentThumbnailUrl(){return this.slides[this.activeSlideIndex]?.thumbnailUrl}lockBodyScroll(){a(this.el)}unlockBodyScroll(){h(this.el)}getMediaPlayers(){return d(this.el,"video")}stopAllMediaPlayers(){this.getMediaPlayers().forEach((i=>i.pause()))}resetImageZoom(){this.slides.forEach((i=>{const t=i?.shadowRoot?.querySelector("swirl-file-viewer-image");Boolean(t)&&t.resetZoom()}))}render(){const i=this.slides.length>1,t=this.getCurrentFileName(),o=this.getCurrentFileType(),a=this.getCurrentThumbnailUrl(),h=Boolean(this.el.querySelector("[slot='menu-items']"))||this.downloadButtonEnabled,n=Boolean(this.el.querySelector("[slot='toolbar']")),d=l("lightbox",{"lightbox--closing":this.closing,"lightbox--hide-menu":!h,"lightbox--hide-toolbar":!n});return e(s,{key:"ef7cbd047bac3b62cbe456739dfae225d8cd1ebb"},e("section",{key:"0b4afe464da9265b4194bb84bba9b6d8c448098a","aria-hidden":String(!this.isOpen),"aria-label":this.label,"aria-modal":"true",class:d,id:"lightbox",onMouseDown:this.onPointerDown,onMouseMove:this.onPointerMove,onMouseOut:this.onPointerUp,onMouseUp:this.onPointerUp,onTouchEnd:this.onPointerUp,onTouchMove:this.onPointerMove,onTouchStart:this.onPointerDown,ref:i=>this.modalEl=i,role:"dialog",tabIndex:this.isOpen?0:-1},e("div",{key:"ecd048b4faf20813533758b2715968034f8a9db9",class:"lightbox__body",role:"document"},e("header",{key:"2f8353ffd549af1e10c805fe275e774b37765458",class:"lightbox__header"},e("button",{key:"5ce3b219b1ba9262e9401779d8f04ba8ea0fc142","aria-label":this.closeButtonLabel,class:"lightbox__close-button",onClick:this.onCloseButtonClick},e("swirl-icon-close",{key:"e1cb9b066b52bc783c1a8f0d2f9e2970f0e97bf6"})),e("div",{key:"31256a598b10c19da8bf1cbcad9833af7c7bcc56",class:"lightbox__toolbar"},e("slot",{key:"ad83d374d525eecf8fe5ca8660efa84cce08627f",name:"toolbar"})),!this.hideMenu&&e("swirl-popover-trigger",{key:"5b77ce1398a13995711e7b28172e06efc6a2a0a6",swirlPopover:this.menu},e("button",{key:"a68c4b8cc54e55ae66963c194694c74b4a2805dd","aria-label":this.menuTriggerLabel,class:"lightbox__menu-button"},e("swirl-icon-more-vertikal",{key:"f6dd02f0a167a7402ec7376796dc456761eee0ea"})))),e("div",{key:"bcee1e42640015d0e61eca98575cd04d8db31c9c","aria-roledescription":"carousel",class:"lightbox__content",role:"group"},e("div",{key:"24f4a799a7e6741760d058537cd151a847133755","aria-atomic":"false","aria-live":"polite",class:"lightbox__slides",onClick:this.onBackdropClick,onContextMenu:this.onContextMenu,ref:i=>this.slidesContainer=i},e("slot",{key:"ef904861260bac6237ff60038e16a7b21d1b9e97",onSlotchange:this.registerSlides}))),e("div",{key:"7c9a493998e7f8599721fbbb17d1a9ccd4ae0a52",class:"lightbox__controls"},e("button",{key:"656d337ef4e3eb6e769986b7bb5e30e33fb07f89","aria-label":this.previousSlideButtonLabel,class:"lightbox__previous-slide-button",disabled:0===this.activeSlideIndex,onClick:this.onPreviousSlideClick},e("swirl-icon-arrow-left",{key:"7c8cd8e3fdb8b65fcf0038ec5e3f7b2138e9f143"})),e("button",{key:"46dc45a573b6149da44eb6cae3d33815ff20387d","aria-label":this.nextSlideButtonLabel,class:"lightbox__next-slide-button",disabled:this.activeSlideIndex===this.slides.length-1,onClick:this.onNextSlideClick},e("swirl-icon-arrow-right",{key:"9f269109dbf618bc7ff12659421f92817283e899"}))),i&&e("span",{key:"c5b1b8aecd9e85dec1f550fe23b8c49bbf0a25d5",class:"lightbox__pagination"},e("span",{key:"782ddc05a9dd831dd3f37103e468e2b27ee1fe96","aria-current":"page"},this.activeSlideIndex+1)," /"," ",this.slides.length)),!this.hideMenu&&e("swirl-popover",{key:"23e003effb0ba1eb188975848799790e72a3488e",animation:"scale-in-y",disableScrollLock:!0,id:"slide-menu",label:this.menuLabel,placement:"bottom-end",ref:i=>this.menu=i},e("swirl-stack",{key:"01a5fb48b943dcc5a1a61065b2dc8aa51aff08b4"},e("div",{key:"ccf3eda1d3ec4bf960bb23381f39008602a315d9",class:"lightbox__meta"},a&&e("div",{key:"670f49f30b7d18b8206ded66d03a7bf56d77c25b",class:"lightbox__thumbnail"},e("swirl-thumbnail",{key:"3375186fbb76b4632dddfdc084bd153363fc6a0f",alt:"",src:a})),e("div",{key:"dd3a475b70000242f7bd5d61c67c8cddefcf412d",class:"lightbox__file-info"},e("swirl-text",{key:"ec46e19e664f58f7db4219122d10242430e4d05e",truncate:!0,weight:"semibold"},t),e("swirl-text",{key:"5ac54930081a8de2a8b585890490eccea6a0aa3c",color:"subdued",size:"sm",truncate:!0},o))),h&&e("swirl-separator",{key:"b39268cdb64e0928b44c5c2033d5e3c240aad8f4"}),e("swirl-action-list",{key:"c7d2fe73dccf2a7f23dda4d3bdff4d21bd0aa6ee"},this.downloadButtonEnabled&&e("swirl-action-list-item",{key:"c01cbfa680c74214085a90f72ad6a942a52a5363",icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownloadButtonClick}),e("slot",{key:"d50b99132f45df1e7a9addb3089eb8fcaf42d732",name:"menu-items"}))))))}get el(){return o(this)}static get watchers(){return{activeSlideIndex:["watchActiveSlideIndex"]}}};r.style=':host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden="true"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox--hide-menu .lightbox__menu{display:none}.lightbox--hide-toolbar .lightbox__toolbar{display:none}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__toolbar{pointer-events:auto}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__menu-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}';export{r as swirl_lightbox}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s,d as a}from"./p-CWOhMVtL.js";import{c as n}from"./p-orsBiyT_.js";import{f as d,I as o,p as r,i as h}from"./p-D3UoejeY.js";import{D as p}from"./p-
|
|
1
|
+
import{r as t,c as i,h as e,H as s,d as a}from"./p-CWOhMVtL.js";import{c as n}from"./p-orsBiyT_.js";import{f as d,I as o,p as r,i as h}from"./p-D3UoejeY.js";import{D as p}from"./p-DJ2FyZeW.js";import{i as c}from"./p-DytJsmhr.js";const l="yyyy-MM-dd",u=class{constructor(e){t(this,e),this.invalidInput=i(this,"invalidInput",7),this.valueChange=i(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.readonly=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),c()||this.focus())},this.onMouseDown=()=>{"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{const i=this.pickerPopover.contains(t.relatedTarget);this.setReadOnly(!i)},this.onPickDate=t=>{const i=t.detail,e=d(i,l);this.value=e,this.inputEl.value=d(i,this.pattern),this.mask.updateValue(),this.setReadOnly(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id=`swirl-date-input-${t}`,this.setReadOnly(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setReadOnly(t){this.readonly=!("pick"!==this.preferredInputMode||!c())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern||(this.pattern=l),this.mask=o(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:o.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:o.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:o.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:o.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=d(t,this.pattern);return h(t)?(this.value=d(t,l),i):(this.invalidInput.emit(t.toString()),"")},parse:t=>r(t,this.pattern,new Date)}),this.updateValue()}updateValue(){if(this.value){const t=r(this.value,l,new Date);if(h(t)){const i=d(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}}render(){const t=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,i=Boolean(this.value)?r(this.value,l,new Date):void 0,a=h(i)?i:void 0,d=n("date-input",{"date-input--inline":this.inline});return e(s,{key:"296586c42ea07c1dd87e2ac73fd471d06c5388ff"},e("div",{key:"60a4b7b6f64ba7153237c0a8e44cb9901634af38",class:d},e("input",{key:"b6bd34da2c91953732dad0464e8d0761942ed69b","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),e("swirl-popover-trigger",{key:"393e6bd9195072f69aa6d6c81d58d0b8005772dc",swirlPopover:`popover-${this.id}`},e("button",{key:"54c0316dede478077bbfc0f4db5258c2095ce2a4","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},e("swirl-icon-today",{key:"92915fd3f39a3475ed1856f02f4fc1fdf36c3a39",size:this.iconSize})))),!this.disabled&&e("swirl-popover",{key:"3c01647d3ea1b303522b82764a51557bf64c91f4",animation:"scale-in-y",class:"date-input__date-picker-popover",id:`popover-${this.id}`,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},e("swirl-date-picker",{key:"f89ad21726f83f25c13eb50d1aedc2ca14d3e9dd",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:a,startDate:a})))}get el(){return a(this)}static get watchers(){return{format:["watchFormat"],value:["watchValue"]}}};u.style=".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}";export{u as swirl_date_input}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as s}from"./p-
|
|
1
|
+
import{g as s}from"./p-DytJsmhr.js";const t=new class{constructor(){this.listeners=new Set,this.onChange=s=>{this.listeners.forEach((t=>t(s.matches)))},this.mediaQueryList=s(),this.mediaQueryList.addEventListener("change",this.onChange)}subscribe(s){return this.listeners.add(s),s(this.mediaQueryList.matches),()=>{this.listeners.delete(s)}}};export{t as D}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function n(t,o){return t?t instanceof ShadowRoot?n(t.host,o):t instanceof HTMLElement&&t.matches(o)?t:n(t.parentNode,o):null}function t(n,t){let o=n;for(;null!==o;){if(o===t)return!0;o=o.parentNode,o instanceof ShadowRoot&&(o=o.host)}return!1}function o(n=document){const t=n.activeElement;if(Boolean(t))return Boolean(t.shadowRoot)?o(t.shadowRoot):t}const i=()=>document.documentElement.classList.contains("disable-desktop-style-tweaks")?window.matchMedia(null):window.matchMedia("(min-width: 992px) and (max-width: 1439px) and (hover: hover), (min-width: 1440px)");function
|
|
1
|
+
function n(t,o){return t?t instanceof ShadowRoot?n(t.host,o):t instanceof HTMLElement&&t.matches(o)?t:n(t.parentNode,o):null}function t(n,t){let o=n;for(;null!==o;){if(o===t)return!0;o=o.parentNode,o instanceof ShadowRoot&&(o=o.host)}return!1}function o(n=document){const t=n.activeElement;if(Boolean(t))return Boolean(t.shadowRoot)?o(t.shadowRoot):t}const i=()=>document.documentElement.classList.contains("disable-desktop-style-tweaks")?window.matchMedia(null):window.matchMedia("(min-width: 992px) and (max-width: 1439px) and (hover: hover), (min-width: 1440px)");function e(n,t,o=!1){let i;return async function(){const e=this,a=arguments,r=o&&!Boolean(i);clearTimeout(i),i=setTimeout((function(){i=null,o||n.apply(e,a)}),t),r&&n.apply(e,a)}}function a(n,t){const o=t.scrollTop,i=o+t.clientHeight,e=t.getBoundingClientRect(),a=n.getBoundingClientRect().top-e.top+o,r=a+n.offsetHeight;return(r>i?i:r)-(a<o?o:a)}function r(){return!window.matchMedia("(min-width: 768px)").matches}function c(){return window.matchMedia("(min-width: 992px)").matches}function u(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function s(n,t,o=[]){return n?n instanceof ShadowRoot?s(n.host,t,o):n instanceof HTMLElement&&n.matches(t)?s(n.parentNode,t,[...o,n]):s(n.parentNode,t,o):o}function f(n,t){const o=function n(t,o){if(!Boolean(o))return[];const i=Array.from(o.querySelectorAll(t)),e=Boolean(window.HTMLSlotElement)&&o instanceof HTMLSlotElement?o.assignedElements():[],a=[...Array.from(o.children),...e],r=n(t,o.shadowRoot);return[...i,...a.map((o=>n(t,o))).flat(),...r]}(t,n).filter(((n,t,o)=>!o.some(((o,i)=>o.isSameNode(n)&&i>t))));return o}function p(n){const t=new Date(n);return t.setMinutes(t.getMinutes()+t.getTimezoneOffset()),t}function l(n){if(n instanceof Date)return`${n.getFullYear()}-${String(n.getMonth()+1).padStart(2,"0")}-${String(n.getDate()).padStart(2,"0")}`}function d(n,t){return(n%t+t)%t}function m(n){return["image/jpeg","image/png","image/avif","image/gif","image/webp"].includes(n)}function w(n){return n.startsWith("video/")}function g(n){return n.startsWith("audio/")}function h(n){return n.startsWith("application/pdf")}function x(n){return n.startsWith("application/zip")||n.startsWith("application/x-zip")||n.startsWith("application/vnd.rar")||n.startsWith("application/x-7z")||n.startsWith("application/x-tar")||n.startsWith("application/x-gzip")}function v(n){return n.startsWith("application/msword")||n.startsWith("application/vnd.openxmlformats-officedocument.wordprocessingml.document")||n.startsWith("application/vnd.apple.pages")}export{m as a,w as b,g as c,e as d,h as e,x as f,i as g,v as h,r as i,t as j,o as k,n as l,c as m,d as n,l as o,s as p,f as q,p as r,u as s,a as t}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as s,d as n}from"./p-CWOhMVtL.js";import{P as o,N as a,D as h,k as r,b as l}from"./p-BtsCuEVE.js";import{c as m}from"./p-orsBiyT_.js";import{q as u,l as c,p as d,i as b,k as f}from"./p-
|
|
1
|
+
import{r as t,c as e,h as i,H as s,d as n}from"./p-CWOhMVtL.js";import{P as o,N as a,D as h,k as r,b as l}from"./p-BtsCuEVE.js";import{c as m}from"./p-orsBiyT_.js";import{q as u,l as c,p as d,i as b,k as f}from"./p-DytJsmhr.js";const p=class{constructor(i){t(this,i),this.done=e(this,"done",7),this.valueChange=e(this,"valueChange",7),this.active=!0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.mobileDoneButtonLabel="Done",this.variant="action",this.activeLevel=0,this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((t=>{t.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,u(this.el,"swirl-menu").forEach((t=>{t.active=!1,t.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.swirlPopover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const t=this.el.parentElement;Boolean(t)&&Boolean(this.menuContainer)&&requestAnimationFrame((async()=>{this.position=await o(t,this.menuContainer,{placement:"right-start",strategy:"fixed",middleware:[h({mainAxis:-10,crossAxis:0}),r(),l()]})}))},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),t.stopPropagation(),this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),t.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===t.code)t.preventDefault(),t.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===t.code){t.preventDefault();const e=c(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!Boolean(e))return;this.rootMenu.activateMenuItem(e)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()}}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.addEventListener("change",this.mediaQueryHandler),this.parentMenu=c(this.el.parentElement,"swirl-menu"),this.swirlPopover=c(this.el,"swirl-popover"),this.rootMenu=d(this.el,"swirl-menu").pop(),Boolean(this.parentMenu)&&queueMicrotask((()=>{this.active=!1})),this.swirlPopover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){this.swirlPopover?.removeEventListener("popoverClose",this.resetMenu),this.mobileMediaQuery.removeEventListener?.("change",this.mediaQueryHandler),this.observer?.disconnect()}watchActive(){this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=a(this.el.parentElement,this.menuContainer,this.reposition)}watchValue(){this.updateActiveItem()}async activateMenuItem(t){if(Boolean(this.parentMenu))return;const e=await t.getParentMenu(),i=u(this.el,"swirl-menu").filter((t=>t.level>=e.level&&t!==e));i.forEach((t=>{t.active=!1,t.parentElement.expanded=!1}));const s=await t.getSubMenu();Boolean(s)&&(t.expanded=!0,s.active=!0,this.activeLevel=s.level,setTimeout((()=>{s.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(Boolean(this.parentMenu)||0===this.activeLevel)return;const t=(u(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).parentElement;t.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),u(this.el,"swirl-menu").filter((t=>t.level>this.activeLevel)).forEach((t=>{t.active=!1})),(u(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(t){this.focusItem(this.items[t])}async updateSelection(t){this.valueChange.emit(t.value)}async updateActiveItem(){u(this.el,"swirl-menu-item").filter((t=>c(t,"swirl-menu")===this.el)).forEach((t=>{t.updateValue()})),this.parentMenu&&"action"===this.parentMenu.variant&&this.parentMenu.updateActiveItem()}observeSlotChanges(){this.observer=new MutationObserver((()=>{requestAnimationFrame((()=>{this.updateItems()}))})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const t=b();t!==this.mobile&&(this.mobile=t)}updateItems(){this.items=[...u(this.el,'[role="menuitem"]'),...u(this.el,'[role="menuitemradio"]')].filter((t=>c(t,"swirl-menu")===this.el))}updateLevel(){const t=d(this.el.parentNode,"swirl-menu");this.level=t.length}focusItem(t){[...u(this.rootMenu,'[role="menuitem"]'),...u(this.rootMenu,'[role="menuitemradio"]')].forEach((t=>{t.tabIndex=-1})),Boolean(t)&&(t.tabIndex=0,t.focus())}focusNextItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[(t+1)%this.items.length])}focusPreviousItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[0===t?this.items.length-1:t-1])}getActiveItemIndex(){const t=f();return this.items.findIndex((e=>e===t||e===t?.querySelector('[role="menuitem"]')||e===t?.querySelector('[role="menuitemradio"]')))}render(){const t=!Boolean(this.parentMenu),e=t&&this.mobile?void 0:this.label,n=t&&this.mobile?"menu-title":void 0,o=t?"menubar":"menu",a=m("menu",`menu--level-${this.level}`,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":t});return i(s,{key:"e82f0ed6771d2a4e0a57d4d86ccdc12dcd55a140"},i("div",{key:"41a2a9a44e01be2abae3215db54380c1217c14a4",class:a},this.mobile&&t&&i("div",{key:"b185a2e8fcd3bdcf927d944aa256fde86824e660",class:"menu__mobile-header"},0===this.activeLevel&&i("swirl-button",{key:"5343d6fba63e3a0c31f12a58ac95d7e3c9d5c224",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&i("swirl-button",{key:"24b268a706c41ccf67f42e286564a6d8978f37ea",hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),i("span",{key:"24a7266f29ff496e3976979d8df62bdbeb935057",class:"menu__title",id:"menu-title"},i("swirl-heading",{key:"0e16bf442dd66fb50f40f28e168919d4f97d5e3c",align:"center",as:"span",level:4,text:this.label,truncate:!0})),i("swirl-button",{key:"c015629a25243719f85a32297774eef39febc19f",class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),i("div",{key:"39f5b638d7097c9d8418e2319555c8266a44473e","aria-label":e,"aria-labelledby":n,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:t=>this.menuContainer=t,role:o,style:!this.mobile&&this.level>0?{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:""}:this.mobile?{left:t?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},i("slot",{key:"e9cd98c6be964be86a6b0e631e0d80514276a08e"}))))}get el(){return n(this)}static get watchers(){return{active:["watchActive"],value:["watchValue"]}}};p.style=":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{background-color:var(--s-surface-overlay-default);}";export{p as swirl_menu}
|