@lmvz-ds/components 0.22.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/cjs/{aria-loader-Cec1zR2g.js → aria-loader-BRo2FTGh.js} +1 -0
- package/cjs/index.cjs.js +1 -1
- package/cjs/lmvz-button_3.cjs.entry.js +375 -0
- package/cjs/lmvz-card.cjs.entry.js +2 -2
- package/cjs/lmvz-checkbox.cjs.entry.js +3 -3
- package/cjs/lmvz-chip.cjs.entry.js +3 -3
- package/cjs/lmvz-components.cjs.js +1 -1
- package/cjs/lmvz-header_2.cjs.entry.js +3 -3
- package/cjs/lmvz-input.cjs.entry.js +4 -4
- package/cjs/lmvz-menuitem.cjs.entry.js +3 -3
- package/cjs/lmvz-modal.cjs.entry.js +6 -109
- package/cjs/lmvz-select.cjs.entry.js +3 -3
- package/cjs/lmvz-toggle.cjs.entry.js +3 -3
- package/cjs/loader.cjs.js +1 -1
- package/cjs/{reactive-controller-host-DnSTWHCF.js → reactive-controller-host-BOFg4vL-.js} +1 -1
- package/collection/collection-manifest.json +1 -0
- package/collection/components/lmvz-button/lmvz-button.css +28 -17
- package/collection/components/lmvz-button/lmvz-button.js +6 -7
- package/collection/components/lmvz-button-group/lmvz-button-group.css +14 -0
- package/collection/components/lmvz-button-group/lmvz-button-group.js +216 -0
- package/collection/components/lmvz-card/lmvz-card.css +27 -16
- package/collection/components/lmvz-card/lmvz-card.js +1 -1
- package/collection/components/lmvz-checkbox/lmvz-checkbox.js +1 -1
- package/collection/components/lmvz-chip/lmvz-chip.js +1 -1
- package/collection/components/lmvz-header/lmvz-header.js +1 -1
- package/collection/components/lmvz-icon/lmvz-icon.js +1 -1
- package/collection/components/lmvz-input/lmvz-input.js +2 -2
- package/collection/components/lmvz-menuitem/lmvz-menuitem.js +1 -1
- package/collection/components/lmvz-modal/lmvz-modal.css +24 -30
- package/collection/components/lmvz-modal/lmvz-modal.js +4 -108
- package/collection/components/lmvz-select/lmvz-select.js +1 -1
- package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
- package/collection/integration/header-integration/header-integration.js +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.d.ts.bak +2 -0
- package/components/index.js +1 -1
- package/components/lmvz-button-group.d.ts +11 -0
- package/components/lmvz-button-group.d.ts.bak +11 -0
- package/components/lmvz-button-group.js +1 -0
- package/components/lmvz-button.js +1 -1
- package/components/lmvz-card.js +1 -1
- package/components/lmvz-checkbox.js +1 -1
- package/components/lmvz-chip.js +1 -1
- package/components/lmvz-header.js +1 -1
- package/components/lmvz-icon.js +1 -1
- package/components/lmvz-input.js +1 -1
- package/components/lmvz-menuitem.js +1 -1
- package/components/lmvz-modal.js +1 -1
- package/components/lmvz-select.js +1 -1
- package/components/lmvz-toggle.js +1 -1
- package/components/p-CdDO7mQa.js +1 -0
- package/components/p-Cg2XX_J-.js +1 -0
- package/components/p-DSvYtVoD.js +1 -0
- package/components/p-K_EPq-vy.js +1 -0
- package/components/p-slgmfnHm.js +1 -0
- package/esm/{aria-loader-BVolm0lC.js → aria-loader-GfsGHZHY.js} +1 -1
- package/esm/index.js +1 -1
- package/esm/lmvz-button_3.entry.js +371 -0
- package/esm/lmvz-card.entry.js +2 -2
- package/esm/lmvz-checkbox.entry.js +3 -3
- package/esm/lmvz-chip.entry.js +3 -3
- package/esm/lmvz-components.js +1 -1
- package/esm/lmvz-header_2.entry.js +3 -3
- package/esm/lmvz-input.entry.js +4 -4
- package/esm/lmvz-menuitem.entry.js +3 -3
- package/esm/lmvz-modal.entry.js +6 -109
- package/esm/lmvz-select.entry.js +3 -3
- package/esm/lmvz-toggle.entry.js +3 -3
- package/esm/loader.js +1 -1
- package/esm/{reactive-controller-host-lF2kXM1x.js → reactive-controller-host-CroMsXdS.js} +1 -1
- package/hydrate/index.js +268 -184
- package/hydrate/index.mjs +268 -184
- package/lmvz-components/index.esm.js +1 -1
- package/lmvz-components/lmvz-components.esm.js +1 -1
- package/lmvz-components/p-05896617.entry.js +1 -0
- package/lmvz-components/{p-1b181e90.entry.js → p-267344a7.entry.js} +1 -1
- package/lmvz-components/{p-ea335543.entry.js → p-2b09b8bc.entry.js} +1 -1
- package/lmvz-components/p-3df92762.entry.js +1 -0
- package/lmvz-components/{p-f8ea0eb2.entry.js → p-5f550b9f.entry.js} +1 -1
- package/lmvz-components/p-8e43fabb.entry.js +1 -0
- package/lmvz-components/{p-DCTzMRMQ.js → p-BRl6zKXT.js} +1 -1
- package/lmvz-components/p-CdDO7mQa.js +1 -0
- package/lmvz-components/p-d1dacf7e.entry.js +1 -0
- package/lmvz-components/{p-d984e118.entry.js → p-f6d1d9df.entry.js} +1 -1
- package/lmvz-components/p-f7f32879.entry.js +1 -0
- package/lmvz-components/{p-08a08b63.entry.js → p-fa4e00cf.entry.js} +1 -1
- package/manifest.json +105 -11
- package/package.json +5 -1
- package/types/components/lmvz-button/lmvz-button.d.ts +1 -1
- package/types/components/lmvz-button-group/lmvz-button-group.d.ts +20 -0
- package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -16
- package/types/components.d.ts +27 -3
- package/cjs/lmvz-button_2.cjs.entry.js +0 -198
- package/components/p-Boj0PCdB.js +0 -1
- package/components/p-Cc6dOWwS.js +0 -1
- package/components/p-DBc1BzQb.js +0 -1
- package/esm/lmvz-button_2.entry.js +0 -195
- package/lmvz-components/p-23fb2476.entry.js +0 -1
- package/lmvz-components/p-6bb145e4.entry.js +0 -1
- package/lmvz-components/p-7a310b1e.entry.js +0 -1
- package/lmvz-components/p-b7940687.entry.js +0 -1
- package/lmvz-components/p-db8306a5.entry.js +0 -1
- package/lmvz-components/p-dhVSUYqd.js +0 -1
package/components/lmvz-modal.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,c as e,h as i,H as s,t as o}from"./p-CK8cAKcB.js";import{t as a}from"./p-CcxjkCOx.js";import{R as n,a as l,i as r}from"./p-DBc1BzQb.js";import{i as d,g as c}from"./p-DOTK1OW3.js";import{d as h}from"./p-Cc6dOWwS.js";import{d as m}from"./p-Boj0PCdB.js";const f=a("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");let u=0;const p=t(class extends n{get el(){return this}inheritedAriaAttributes={};dialogEl;dialogStateObserver;actionsStateObserver;headerSlot;actionsSlot;closeButtonEl;previouslyFocusedElement=null;wrappedDialogShowModal;lastActionValidationMessage;pendingCloseReturnValue;dialogTitleId="lmvz-modal-title-"+u++;hasActions=!1;hasHeader=!1;open=!1;closeLabel="Schliessen";dialogClose;dialogCancel;get dialog(){return this.dialogEl}get validationEl(){return this.dialogEl??this.el}get validationSlot(){return this.actionsSlot}constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dialogClose=e(this,"close",6),this.dialogCancel=e(this,"cancel",1),this.addController(new l(this,{validationTiming:"slot"}))}handleFormDialogSubmit(t){const e=t.submitter;("dialog"===t.target.method||"dialog"===e?.getAttribute("formmethod"))&&(t.preventDefault(),this.dialogEl?.close(e?.value??""))}connectedCallback(){this.inheritedAriaAttributes=d(this.el,["role"]),Object.defineProperty(this.el,"dialog",{configurable:!0,enumerable:!0,get:()=>(this.ensureDialogShowModalCapture(),this.dialogEl)}),super.connectedCallback()}componentDidLoad(){this.handleHeaderSlotChange(),this.handleActionsSlotChange(),this.observeDialogState(),this.syncDialogVisibility(),super.componentDidLoad()}disconnectedCallback(){this.actionsStateObserver?.disconnect(),this.dialogStateObserver?.disconnect(),super.disconnectedCallback()}componentDidRender(){this.open&&this.focusPrimaryAction(),super.componentDidRender()}handleOpenChange(){this.syncDialogVisibility()}get dialogAccessibilityAttributes(){const t={...this.inheritedAriaAttributes};if(delete t["aria-label"],delete t["aria-labelledby"],this.hasHeader)return t["aria-labelledby"]=this.dialogTitleId,t;const e=this.inheritedAriaAttributes["aria-labelledby"];if("string"==typeof e)return t["aria-labelledby"]=e,t;const i=this.inheritedAriaAttributes["aria-label"];return"string"==typeof i&&(t["aria-label"]=i),t}get actionButtons(){return(this.actionsSlot?.assignedElements({flatten:!0})??[]).filter((t=>this.isVisibleActionButton(t)))}get enabledActionButtons(){return this.actionButtons.filter((t=>!this.isDisabledActionButton(t)))}get assignedActionElements(){return this.actionsSlot?.assignedElements({flatten:!0})??[]}isDisabledActionButton(t){return t.hasAttribute("disabled")||!0===t.disabled}getActionVariant(t){const e=t.getAttribute("variant")??t.variant;return"primary"===e||"secondary"===e||"tertiary"===e?e:"secondary"}getActionValidationResult(){if(!this.actionButtons.length)return{};const t=this.actionButtons.filter((t=>"primary"===this.getActionVariant(t))),e=this.actionButtons.filter((t=>"secondary"===this.getActionVariant(t))),i=[1!==t.length?`${t.length} primary action${1===t.length?"":"s"}`:void 0,e.length>1?e.length+" secondary actions":void 0].filter((t=>!!t));return{errorMessage:i.length?`LmvzModal actions slot must contain exactly one primary action, at most one secondary action, and optional tertiary actions. Received ${i.join(" and ")}.`:void 0,primaryAction:t[0]}}hasAssignedContent(t){return!!t?.assignedNodes({flatten:!0}).some((t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE))}observeDialogState(){this.dialogEl&&"undefined"!=typeof MutationObserver&&(this.dialogStateObserver?.disconnect(),this.dialogStateObserver=new MutationObserver((()=>{this.dialogEl&&this.dialogEl.open!==this.open&&(this.open=!!this.dialogEl.open)})),this.dialogStateObserver.observe(this.dialogEl,{attributes:!0,attributeFilter:["open"]}))}isVisibleActionButton(t){return"LMVZ-BUTTON"===t.tagName&&!t.hasAttribute("hidden")}capturePreviouslyFocusedElement(){const t=this.dialogEl,e=c(document);t&&e&&!t.contains(e)&&(this.previouslyFocusedElement=e)}ensureDialogShowModalCapture(){const t=this.dialogEl;if(!t||"function"!=typeof t.showModal)return;const e=t.showModal;if(e===this.wrappedDialogShowModal)return;const i=()=>(this.capturePreviouslyFocusedElement(),e.call(t));Object.defineProperty(t,"showModal",{configurable:!0,value:i}),this.wrappedDialogShowModal=i}syncDialogVisibility(){const t=this.dialogEl;if(t)return this.open?(t.open||(this.capturePreviouslyFocusedElement(),"function"==typeof t.showModal?t.showModal():t.setAttribute("open","")),void this.focusPrimaryAction()):void(t.open&&("function"==typeof t.close?t.close():(t.removeAttribute("open"),this.handleDialogClose())))}focusPrimaryAction(){const t=this.enabledActionButtons.find((t=>"primary"===this.getActionVariant(t)))??this.enabledActionButtons[0]??this.closeButtonEl;t&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{this.open&&t.focus()}))}restoreFocus(){this.previouslyFocusedElement?.isConnected&&(this.previouslyFocusedElement.focus(),this.previouslyFocusedElement=null)}handleCloseButtonClick=()=>{if(!this.dialogEl)return;const t=this.dialogEl;if("function"==typeof t.requestClose)return this.pendingCloseReturnValue="close",void t.requestClose("close");"function"!=typeof this.dialogEl.close?this.handleDialogClose():this.dialogEl.close("close")};handleDialogCancel=t=>{if(t.preventDefault(),this.dialogCancel.emit().defaultPrevented)return void(this.pendingCloseReturnValue=void 0);const e=this.pendingCloseReturnValue;this.pendingCloseReturnValue=void 0,this.dialogEl?.close(e)};handleDialogClose=()=>{console.log("Dialog close handler called"),this.open&&(this.open=!1),this.restoreFocus(),this.dialogClose.emit()};handleHeaderSlotChange=()=>{this.hasHeader=this.hasAssignedContent(this.headerSlot)};observeActionState(){"undefined"!=typeof MutationObserver&&(this.actionsStateObserver?.disconnect(),this.assignedActionElements.length&&(this.actionsStateObserver=new MutationObserver((()=>{this.syncActionsState()})),this.assignedActionElements.forEach((t=>{this.actionsStateObserver?.observe(t,{attributes:!0,attributeFilter:["disabled","hidden","variant"]})}))))}syncActionsState(){const t=this.assignedActionElements;t.forEach((t=>{["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())||(t.hasAttribute("hidden")||t.setAttribute("hidden",""),"true"!==t.getAttribute("aria-hidden")&&t.setAttribute("aria-hidden","true"))})),this.hasActions=t.some((t=>this.isVisibleActionButton(t))),this.checkActions(),this.open&&this.focusPrimaryAction()}handleActionsSlotChange=()=>{this.syncActionsState(),this.observeActionState()};checkActions(){if(!r())return;const{errorMessage:t}=this.getActionValidationResult();t?this.lastActionValidationMessage!==t&&(console.error(t),this.lastActionValidationMessage=t):this.lastActionValidationMessage=void 0}render(){return i(s,{key:"f319dcb33aaa6426e568fba1bfb6c8c3927432cb"},i("dialog",{key:"1c5b1659b243a2af19ec5b41d19a2096b522671c",ref:t=>this.dialogEl=t,onCancel:this.handleDialogCancel,onClose:this.handleDialogClose,...this.dialogAccessibilityAttributes},i("div",{key:"2d0260f11a75e28688a14b0263df0d00f8ba54b9",class:"modal-shell"},i("header",{key:"d96739e3b0a7f2c04e46585ddf4e431c91a698ce",class:{header:!0,"has-title":this.hasHeader}},i("div",{key:"f5202ac26195a3571e3767e0d3683c2bc960c2ec",class:"title",id:this.dialogTitleId,hidden:!this.hasHeader},i("slot",{key:"2568ee3465bc070e353e647c58735a34005907d7",name:"header",ref:t=>this.headerSlot=t,onSlotchange:this.handleHeaderSlotChange})),i("lmvz-button",{key:"7978e838dc84ce83ee674aa111523b260d1861da",ref:t=>this.closeButtonEl=t,type:"button",class:"close-button","aria-label":this.closeLabel,onClick:this.handleCloseButtonClick,variant:"tertiary"},i("lmvz-icon",{key:"9f235507acbf2ee42747bfc44302fcae47d9ba0e",icon:f}))),i("div",{key:"7eeab9b2f0fd5d41c0218380436e2f092481813a",class:"body"},i("slot",{key:"8904e87fa438caf2b7f34c4025ff688d94f4dea2"})),i("footer",{key:"0610abd150de228da893092e9f38721087144564",class:"actions",hidden:!this.hasActions},i("slot",{key:"0f5457cb2544602a3b980f90e7297ed700d62fee",name:"actions",ref:t=>this.actionsSlot=t,onSlotchange:this.handleActionsSlotChange})))))}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } } :host { display: contents; color: var(--lmvz-semantic-color-on-surface-primary, #000000); --lmvz-modal-shell-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); --lmvz-modal-shell-gap: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); --lmvz-modal-actions-gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-modal-viewport-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); --lmvz-modal-shell-max-width: 40rem; } dialog { border: none; padding: 0; background: transparent; color: var(--lmvz-semantic-color-on-surface-primary, #000000); } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.19); } .modal-shell { display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); inline-size: min(calc(100vw - (2 * var(--lmvz-modal-viewport-padding))), var(--lmvz-modal-shell-max-width)); max-inline-size: 100%; padding: var(--lmvz-modal-shell-padding); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); overflow: auto; } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--lmvz-modal-actions-gap); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } .close-button { display: inline-flex; flex: none; } ::slotted([slot='actions'][hidden]) { display: none; } "}},[769,"lmvz-modal",{open:[1540],closeLabel:[1,"close-label"],hasActions:[32],hasHeader:[32]},[[0,"submit","handleFormDialogSubmit"]],{open:[{handleOpenChange:0}]}]),v=p,b=function(){"undefined"!=typeof customElements&&["lmvz-modal","lmvz-button","lmvz-icon"].forEach((t=>{switch(t){case"lmvz-modal":customElements.get(o(t))||customElements.define(o(t),p);break;case"lmvz-button":customElements.get(o(t))||h();break;case"lmvz-icon":customElements.get(o(t))||m()}}))};export{v as LmvzModal,b as defineCustomElement}
|
|
1
|
+
import{p as e,c as t,h as i,H as o,t as s}from"./p-CK8cAKcB.js";import{t as a}from"./p-CcxjkCOx.js";import{R as l,A as n}from"./p-slgmfnHm.js";import{i as r,g as d}from"./p-DOTK1OW3.js";import{d as c}from"./p-K_EPq-vy.js";import{d as m}from"./p-DSvYtVoD.js";import{d as h}from"./p-Cg2XX_J-.js";const f=a("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");let u=0;const b=e(class extends l{get el(){return this}inheritedAriaAttributes={};dialogEl;dialogStateObserver;headerSlot;buttonGroupEl;closeButtonEl;previouslyFocusedElement=null;wrappedDialogShowModal;pendingCloseReturnValue;dialogTitleId="lmvz-modal-title-"+u++;hasHeader=!1;open=!1;closeLabel="Schliessen";dialogClose;dialogCancel;get dialog(){return this.dialogEl}get validationEl(){return this.dialogEl??this.el}constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dialogClose=t(this,"close",6),this.dialogCancel=t(this,"cancel",1),this.addController(new n(this,{validationTiming:"slot"}))}handleFormDialogSubmit(e){const t=e.submitter;("dialog"===e.target.method||"dialog"===t?.getAttribute("formmethod"))&&(e.preventDefault(),this.dialogEl?.close(t?.value??""))}connectedCallback(){this.inheritedAriaAttributes=r(this.el,["role"]),Object.defineProperty(this.el,"dialog",{configurable:!0,enumerable:!0,get:()=>(this.ensureDialogShowModalCapture(),this.dialogEl)}),super.connectedCallback()}componentDidLoad(){this.handleHeaderSlotChange(),this.observeDialogState(),this.syncDialogVisibility(),super.componentDidLoad()}disconnectedCallback(){this.dialogStateObserver?.disconnect(),super.disconnectedCallback()}componentDidRender(){this.open&&this.focusPrimaryAction(),super.componentDidRender()}handleOpenChange(){this.syncDialogVisibility()}get dialogAccessibilityAttributes(){const e={...this.inheritedAriaAttributes};if(delete e["aria-label"],delete e["aria-labelledby"],this.hasHeader)return e["aria-labelledby"]=this.dialogTitleId,e;const t=this.inheritedAriaAttributes["aria-labelledby"];if("string"==typeof t)return e["aria-labelledby"]=t,e;const i=this.inheritedAriaAttributes["aria-label"];return"string"==typeof i&&(e["aria-label"]=i),e}hasAssignedContent(e){return!!e?.assignedNodes({flatten:!0}).some((e=>e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():e.nodeType===Node.ELEMENT_NODE))}observeDialogState(){this.dialogEl&&"undefined"!=typeof MutationObserver&&(this.dialogStateObserver?.disconnect(),this.dialogStateObserver=new MutationObserver((()=>{this.dialogEl&&this.dialogEl.open!==this.open&&(this.open=!!this.dialogEl.open)})),this.dialogStateObserver.observe(this.dialogEl,{attributes:!0,attributeFilter:["open"]}))}capturePreviouslyFocusedElement(){const e=this.dialogEl,t=d(document);e&&t&&!e.contains(t)&&(this.previouslyFocusedElement=t)}ensureDialogShowModalCapture(){const e=this.dialogEl;if(!e||"function"!=typeof e.showModal)return;const t=e.showModal;if(t===this.wrappedDialogShowModal)return;const i=()=>(this.capturePreviouslyFocusedElement(),t.call(e));Object.defineProperty(e,"showModal",{configurable:!0,value:i}),this.wrappedDialogShowModal=i}syncDialogVisibility(){const e=this.dialogEl;if(e)return this.open?(e.open||(this.capturePreviouslyFocusedElement(),"function"==typeof e.showModal?e.showModal():e.setAttribute("open","")),void this.focusPrimaryAction()):void(e.open&&("function"==typeof e.close?e.close():(e.removeAttribute("open"),this.handleDialogClose())))}focusPrimaryAction(){const e=this.buttonGroupEl?.primaryEnabledAction??this.closeButtonEl;e&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{this.open&&e.focus()}))}restoreFocus(){this.previouslyFocusedElement?.isConnected&&(this.previouslyFocusedElement.focus(),this.previouslyFocusedElement=null)}handleCloseButtonClick=()=>{if(!this.dialogEl)return;const e=this.dialogEl;if("function"==typeof e.requestClose)return this.pendingCloseReturnValue="close",void e.requestClose("close");"function"!=typeof this.dialogEl.close?this.handleDialogClose():this.dialogEl.close("close")};handleDialogCancel=e=>{if(e.preventDefault(),this.dialogCancel.emit().defaultPrevented)return void(this.pendingCloseReturnValue=void 0);const t=this.pendingCloseReturnValue;this.pendingCloseReturnValue=void 0,this.dialogEl?.close(t)};handleDialogClose=()=>{console.log("Dialog close handler called"),this.open&&(this.open=!1),this.restoreFocus(),this.dialogClose.emit()};handleHeaderSlotChange=()=>{this.hasHeader=this.hasAssignedContent(this.headerSlot)};render(){return i(o,{key:"f014c692b82fae6dd96dffdbda4043aa9174004f"},i("dialog",{key:"8939eda4aba44f1b6c9e8983cacddba83f668692",ref:e=>this.dialogEl=e,onCancel:this.handleDialogCancel,onClose:this.handleDialogClose,...this.dialogAccessibilityAttributes},i("div",{key:"93f43c5f7c258494c86f9604b7eeac0046f912d6",class:"modal-shell"},i("header",{key:"2e8177a5e0812007fede430533e6a0aa9b7bc0ea",class:{header:!0,"has-title":this.hasHeader}},i("div",{key:"fb4b537386077b837758f4b61c45433ad6c747cc",class:"title",id:this.dialogTitleId,hidden:!this.hasHeader},i("slot",{key:"2507b2b7af3b18e859e87b7d682bdf189c4df53d",name:"header",ref:e=>this.headerSlot=e,onSlotchange:this.handleHeaderSlotChange})),i("lmvz-button",{key:"5e4bcd8771babae9a9dc34fc908eb9210639a497",ref:e=>this.closeButtonEl=e,type:"button",class:"close-button","aria-label":this.closeLabel,onClick:this.handleCloseButtonClick,variant:"tertiary"},i("lmvz-icon",{key:"32aada0eea679fd1610eb704ac02cca1f27168ff",icon:f}))),i("div",{key:"1dc811f3edcd9ab1611483c90345483fee94b318",class:"body"},i("slot",{key:"cf870234c54d659cdd85d1a736626707f65cca4a"})),i("footer",{key:"c2ed7badb41a09d1187af2221f33fc2a87bcb606",class:"actions",hidden:!this.buttonGroupEl?.hasActions},i("lmvz-button-group",{key:"c4846b44ff94b0411d79d88b3bb8447dd2a5967a",ref:e=>this.buttonGroupEl=e},i("slot",{key:"3aa5aa7b3a5d68c5c3c2da1739bee57316db07ff",name:"actions"}))))))}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { position: relative; display: flex; flex-direction: column; inline-size: fit-content; max-inline-size: clamp(40rem, 100%, 80vw); gap: var(--lmvz-modal-shell-gap); padding-block: var(--lmvz-component-modal-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)); padding-inline: var(--lmvz-component-modal-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-modal-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); overflow: auto; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } @media (min-width: 768px) { .modal-shell { max-inline-size: 100vw; } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } "}},[769,"lmvz-modal",{open:[1540],closeLabel:[1,"close-label"],hasHeader:[32]},[[0,"submit","handleFormDialogSubmit"]],{open:[{handleOpenChange:0}]}]),p=b,g=function(){"undefined"!=typeof customElements&&["lmvz-modal","lmvz-button","lmvz-button-group","lmvz-icon"].forEach((e=>{switch(e){case"lmvz-modal":customElements.get(s(e))||customElements.define(s(e),b);break;case"lmvz-button":customElements.get(s(e))||c();break;case"lmvz-button-group":customElements.get(s(e))||m();break;case"lmvz-icon":customElements.get(s(e))||h()}}))};export{p as LmvzModal,g as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,c as l,h as t,H as a,t as s}from"./p-CK8cAKcB.js";import{R as o,
|
|
1
|
+
import{p as e,c as l,h as t,H as a,t as s}from"./p-CK8cAKcB.js";import{R as o,A as c}from"./p-slgmfnHm.js";let i=0;const r=e(class extends o{get el(){return this}get validationEl(){return this.el}selectId="lmvz-select-"+i++;nativeSelectEl;constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzChange=l(this,"lmvzChange",7),this.addController(new c(this))}lmvzChange;value;label;helperText;disabled=!1;required=!1;name;selectedLabel="";get hasValue(){return!!this.value}componentDidLoad(){this.syncSelectedLabel(),super.componentDidLoad()}handleValueChange(e){this.nativeSelectEl&&this.nativeSelectEl.value!==(e??"")&&(this.nativeSelectEl.value=e??""),this.syncSelectedLabel()}syncSelectedLabel(){if(!this.nativeSelectEl)return;const e=this.nativeSelectEl.selectedIndex;this.selectedLabel=e>=0?this.nativeSelectEl.options[e]?.text??"":""}handleChange=e=>{const l=e.target;this.value=l.value,this.syncSelectedLabel(),this.lmvzChange.emit(l.value)};render(){const e=this.hasValue;return t(a,{key:"f4d3104f4022581e4661f2181eec5d56ac7027af"},t("div",{key:"1f8b1fdf7c6d8c65390298e0cd9dca24ef4903d7",class:"select-wrapper"},t("label",{key:"ff7a2e509c637424387b38b163739183deda3cba",htmlFor:this.selectId,class:e?"floating-label":"assistive-label"},this.label,this.required&&e&&t("span",{key:"7e3c03652d16dd1a20628d800ccae4221062d4b8","aria-hidden":"true"}," *")),t("div",{key:"a2ee01b6ddfa98565fc1c41c9b9391091d254daf","aria-hidden":"true"},t("span",{key:"c96a6960f693baca0ba48b44e569ad87c1bbc980"},e?this.selectedLabel:this.label,this.required&&!e&&t("span",{key:"4631b13509919f7bfd0e5a1287334cd3a8412e50","aria-hidden":"true"}," *")),t("span",{key:"4781647ee3a6a780e4253b9f92738c4645e20578"},t("img",{key:"c83dab75df9ff20ec40b63f45cbe8262d1c71d7d",src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=",alt:""}))),t("select",{key:"035b19878300ac1f7b04b61157e39587782b44f7",id:this.selectId,ref:e=>this.nativeSelectEl=e,name:this.name,disabled:this.disabled,required:this.required,"aria-label":this.label,onChange:this.handleChange},!e&&t("option",{key:"da76b299a1df9da8475e115b82d7e427cc659bfa",value:"",disabled:!0,selected:!0,hidden:!0}),t("slot",{key:"1a91b540bc8ab97723df24c9c77d2bd52d941c92"}))),this.helperText&&t("div",{key:"347fe4d805a58e03f2cb2ef427b0dba0b805e8be",role:"status"},this.helperText))}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; padding-top: var(--lmvz-internal-select-floating-label-top-offset); --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-select-height: 40px; --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem); --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1); --lmvz-select-label-minimized-padding-x: 4px; --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } div[aria-hidden].sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); cursor: pointer; position: relative; z-index: 1; transition: background-color 0.15s ease; } .sc-lmvz-select-h:not([disabled]) .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select { background-color: var(--lmvz-select-bg-hover); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select { outline: 2px solid var(--lmvz-select-focus-color); outline-offset: 2px; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem); font-weight: var(--lmvz-global-font-weight-500, 500); color: var(--lmvz-select-text-color); line-height: 1.4; letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } img.sc-lmvz-select { display: block; width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } select.sc-lmvz-select { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; border: none; background: transparent; margin: 0; padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { margin-top: 4px; padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; }"}},[774,"lmvz-select",{value:[1025],label:[1],helperText:[1,"helper-text"],disabled:[516],required:[516],name:[1],selectedLabel:[32]},void 0,{value:[{handleValueChange:0}]}]),n=r,d=function(){"undefined"!=typeof customElements&&["lmvz-select"].forEach((e=>{"lmvz-select"===e&&(customElements.get(s(e))||customElements.define(s(e),r))}))};export{n as LmvzSelect,d as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,c as t,h as o,H as l,t as a}from"./p-CK8cAKcB.js";import{R as r,
|
|
1
|
+
import{p as e,c as t,h as o,H as l,t as a}from"./p-CK8cAKcB.js";import{R as r,A as s}from"./p-slgmfnHm.js";import{c}from"./p-DOTK1OW3.js";let i=0;const n=e(class extends r{get el(){return this}get validationEl(){return this.el}internals;nativeInputElement;toggleId="lmvz-toggle-"+i++;lmvzChange;label;checked=!1;disabled=!1;required=!1;name;value="on";form;constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzChange=t(this,"lmvzChange",7),this.internals=this.attachInternals(),this.addController(new s(this))}formAssociatedCallback(e){this.internals.setFormValue?.(this.checked?this.value:null)}formResetCallback(){this.checked=!1}formStateRestoreCallback(e){this.checked=e===this.value,this.internals.setFormValue?.(this.checked?this.value:null)}handleCheckedChange(e){this.internals.setFormValue?.(e?this.value:null)}handleDisabledChange(e){e&&this.nativeInputElement&&this.nativeInputElement.blur()}async focusToggle(){this.nativeInputElement?.focus()}async blurToggle(){this.nativeInputElement?.blur()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??!1}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??!1}async getInputElement(){return this.nativeInputElement||await new Promise((e=>c(this.el,e))),Promise.resolve(this.nativeInputElement)}handleChange=e=>{const t=e.target.checked;this.checked=t,this.lmvzChange.emit(t)};render(){return o(l,{key:"b7d3c3d2ae30744669032797b2fefcd1e7fe0b61"},o("span",{key:"93dc128b588e19a5e322cb93efae33669375709a",class:"track"},o("input",{key:"80650720ac6276f7c8996e071d8104e98002e06e",type:"checkbox",role:"switch",id:this.toggleId,checked:this.checked,disabled:this.disabled,required:this.required,name:this.name,value:this.value,form:this.form,ref:e=>this.nativeInputElement=e,onChange:this.handleChange}),o("span",{key:"59838c27a032d7a116faea67fa1dc75cf9ee92cd",class:"thumb","aria-hidden":"true"})),o("label",{key:"809057cf268adf05c8163a802a6020dca9b666b9",htmlFor:this.toggleId},this.label))}static get formAssociated(){return!0}static get watchers(){return{checked:[{handleCheckedChange:0}],disabled:[{handleDisabledChange:0}]}}static get style(){return"@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } .sc-lmvz-toggle-h { display: inline-flex; align-items: center; gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem)); padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-round, 999px); cursor: pointer; background-color: transparent; user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover { background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled][checked].sc-lmvz-toggle-h { background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [disabled].sc-lmvz-toggle-h { cursor: not-allowed; opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; } .track.sc-lmvz-toggle { position: relative; flex-shrink: 0; width: var(--lmvz-global-s32, 32px); height: var(--lmvz-global-s20, 20px); border-radius: var(--lmvz-semantic-border-radius-round, 999px); background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle { border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: inherit; } .sc-lmvz-toggle-h:focus-within { outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc); outline-offset: 2px; } .thumb.sc-lmvz-toggle { position: absolute; width: var(--lmvz-global-s13, 13px); height: var(--lmvz-global-s13, 13px); border-radius: 50%; background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a); top: 50%; transform: translateY(-50%); left: var(--lmvz-global-s4, 4px); transition: left 0.2s ease, background-color 0.2s ease; pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle { left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px)); background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); color: var(--lmvz-semantic-color-on-surface-primary, #000000); cursor: pointer; }"}},[578,"lmvz-toggle",{label:[1],checked:[1540],disabled:[516],required:[516],name:[1],value:[1],form:[1],focusToggle:[64],blurToggle:[64],checkValidity:[64],reportValidity:[64],getInputElement:[64]},void 0,{checked:[{handleCheckedChange:0}],disabled:[{handleDisabledChange:0}]}]),m=n,d=function(){"undefined"!=typeof customElements&&["lmvz-toggle"].forEach((e=>{"lmvz-toggle"===e&&(customElements.get(a(e))||customElements.define(a(e),n))}))};export{m as LmvzToggle,d as defineCustomElement}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function n(n){return!!n&&"object"==typeof n&&"function"==typeof n.then}const o=Symbol("LMVZ__ariaValidationRuntimeState"),t="lmvz:aria-validation-runtime-changed";function i(){const n=globalThis;return n[o]||(n[o]={enabled:!1}),n[o]}function a(){"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent(t))}const e=()=>i().enabled,r=()=>i().verboseLogging??!1,u=(n={})=>{const o=i();o.enabled||(Object.assign(o,n),o.enabled=!0,async function(...n){const o=await async function(){const n=i();if(!n.enabled)return null;if(n.runtime)return n.runtime;n.loadPromise||(n.loadPromise=import("./p-0s99QfRy.js").catch((()=>null)));const o=await n.loadPromise;return o&&(n.runtime=o),o}();i().enabled&&(o?o.initializeValidationStream(...n):console.warn("Failed to load aria validation runtime"))}().then((()=>{a()})))},l=()=>{const n=i();n.enabled&&(n.enabled=!1,a())};function s(...o){const{enabled:t,runtime:a,loadPromise:e,lazyCondition:r}=i();if(t){if(!r)return u();(function(o,t=[]){const i=o(...t);return n(i)?i:Promise.resolve(i)})(r).then((n=>{n&&u()}))}function u(){if(a)return a.enqueueValidation(...o);e?e.then((n=>{n?.enqueueValidation?n.enqueueValidation(...o):console.error("Failed to load aria validation runtime")})).catch((()=>{console.error("Failed to enqueue validation due to an error while loading the runtime")})):console.warn("neither runtime nor load promise found for aria validation. This should not happen, as enabling aria validation should have triggered the loading of the runtime.")}}export{t as A,n as a,l as d,u as e,e as i,s as q,r as u}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as i,h as e,H as o,t as n}from"./p-CK8cAKcB.js";import{t,e as s,p as c}from"./p-CcxjkCOx.js";import{R as r,A as a}from"./p-slgmfnHm.js";const l=Symbol.for("LMVZ__iconProviderRegistry"),m={};function v(){return"undefined"==typeof window?m:window[l]??(window[l]={})}function h(i,e){const o=v(),n=i;Object.prototype.hasOwnProperty.call(o,n)&&console.warn(`Icon provider with name "${n}" is already registered. Overwriting existing provider.`),o[n]=e}function d(i){const e=v();if(i)return e[i];const o=Object.keys(e);if(0===o.length)return;o.length>1&&console.warn(`Multiple icon providers registered (${o.join(", ")}). Using the first one: "${o[0]}".`);const n=o[0];return n?e[n]:void 0}function z(i,e){return{iconset:i,icon:e}}const p=i(class extends r{intersectionObserver;ariaValidationController=new a(this);get el(){return this}validationEl;icon;weight="medium";size="md";iconset;iconData;visible=!1;ariaLabel;get ariaHidden(){return!this.ariaLabel}constructor(i){super(!1),!1!==i&&this.__registerHost(),this.addController(this.ariaValidationController)}connectedCallback(){this.waitUntilVisible((()=>{this.visible=!0,this.loadIconPathData()})),super.connectedCallback()}disconnectedCallback(){this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,super.disconnectedCallback()}async loadIconPathData(){const{icon:i,iconset:e,visible:o}=this;if(!i||!o)return;const n=c(i);this.iconData=n||await async function(i){const{icon:e,iconset:o}=i;return await(async()=>{const i=d(o);if(i)try{const n=await Promise.resolve(i.resolve(e));if(!n?.svg)return void console.warn(`Icon "${e}"${o?` from set "${o}"`:""} not found in provider. Using default icon.`);const s=t(n.svg);if(s)return s}catch(i){return void console.error(`Error resolving icon "${e}" with provider:`,i)}else console.warn(`No icon provider registered. Unable to resolve icon "${e}"${o?` from set "${o}"`:""}. Using default icon.`)})()||(console.error(`Icon "${e}" not found${o?` in set "${o}"`:""}. Using default icon.`),s())}({icon:i,iconset:e})}componentDidRender(){this.validationEl=this.el.querySelector("svg"),this.ariaValidationController.revalidateAria(),super.componentDidRender()}render(){return e(o,{key:"03b4391d02a77409257bcda51c2b65ad9a9e0a0c",role:"img","aria-hidden":`${this.ariaHidden}`,innerHTML:this.iconData})}waitUntilVisible(i,e=50){"undefined"!=typeof window&&window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver((e=>{e.some((e=>!!e.isIntersecting&&(this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,i(),!0)))}),{rootMargin:`${e}px`}),this.intersectionObserver.observe(this.el)):i()}static get watchers(){return{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}}static get style(){return".sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}"}},[514,"lmvz-icon",{icon:[513],weight:[513],size:[513],iconset:[513],ariaLabel:[513,"aria-label"],iconData:[32],visible:[32]},void 0,{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}]);function u(){"undefined"!=typeof customElements&&["lmvz-icon"].forEach((i=>{"lmvz-icon"===i&&(customElements.get(n(i))||customElements.define(n(i),p))}))}export{p as L,u as d,d as g,h as r,z as t}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as t,d as e,h as n,H as s,t as i}from"./p-CK8cAKcB.js";import{a as o,i as a}from"./p-CdDO7mQa.js";import{a as r}from"./p-DOTK1OW3.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}actionsSlot;validationMessageCache=[];actionsStateObserver;get primaryEnabledAction(){return this.enabledButtons.find(p)??this.enabledButtons[0]}get hasActions(){return this.assignedButtons.some((t=>l(t)&&u(t)&&!h(t)))}componentDidLoad(){this.handleActionsSlotChange()}disconnectedCallback(){this.actionsStateObserver?.disconnect()}get assignedElements(){return this.actionsSlot?.assignedElements({flatten:!0})??[]}get assignedButtons(){return this.assignedElements.filter(u)}get visibleButtons(){return this.assignedButtons.filter(l)}get enabledButtons(){return this.visibleButtons.filter((t=h,(...e)=>{const n=t(...e);return o(n)?n.then((t=>!t)):!n}));var t}getActionValidationResult(){if(!this.visibleButtons.length)return[];const t=this.visibleButtons.filter(p),e=this.visibleButtons.filter(f),n=[],s=this.visibleButtons.toReversed();if(1!==t.length&&n.push("LmvzModal actions slot must contain exactly one primary action."),e.length>1&&n.push(`LmvzModal actions slot must contain at most one secondary action (received ${e.length})`),t.length){const i=e[0];0!==s.indexOf(t[0])&&n.push("Primary action must be the last focusable element in the actions slot (i.e. rightmost button)."),i&&1!==s.indexOf(i)&&n.push("Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).")}else e.length&&0!==s.indexOf(e[0])&&n.push("Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).");return n}handleActionsSlotChange=()=>{this.observeActionState(),this.syncActionsState()};observeActionState(){"undefined"!=typeof MutationObserver&&(this.actionsStateObserver?.disconnect(),this.assignedButtons.length&&(this.actionsStateObserver=new MutationObserver((()=>{this.syncActionsState()})),this.assignedButtons.forEach((t=>{this.actionsStateObserver?.observe(t,{attributes:!0,attributeFilter:["disabled","hidden","variant"]})}))))}syncActionsState(){this.assignedElements.forEach((t=>{["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())||(t.hasAttribute("hidden")||t.setAttribute("hidden",""),"true"!==t.getAttribute("aria-hidden")&&t.setAttribute("aria-hidden","true"))})),this.checkActions();const t=this.visibleButtons.length;for(let e=0;e<t;e++){const n=e===t-1?"primary":e===t-2?"secondary":"tertiary",s=this.visibleButtons.at(e);s&&(d(s)?s.getAttribute("variant")||s.setAttribute("variant",n):s.classList.add(n))}this.focusPrimaryAction()}focusPrimaryAction(){const t=this.primaryEnabledAction;t&&"undefined"!=typeof window&&window.requestAnimationFrame((()=>{r(t)&&t.focus()}))}checkActions(){if(!a())return;const t=this.getActionValidationResult();t.length&&t.forEach((t=>{this.validationMessageCache.includes(t)||(console.warn(t),this.validationMessageCache.push(t))}))}render(){return n(s,{key:"56b60821ecaa2301d13e78d621e873aa74cd170e"},n("slot",{key:"e6a1422950fa5b0026356b7788a607a690116186",ref:t=>this.actionsSlot=t,onSlotchange:this.handleActionsSlotChange}))}static get style(){return":host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}"}},[257,"lmvz-button-group",{primaryEnabledAction:[2064],hasActions:[2052,"has-actions"]}]);function u(t){return["LMVZ-BUTTON","BUTTON"].includes(t.tagName.toUpperCase())}function d(t){return"LMVZ-BUTTON"===t?.tagName.toUpperCase()}function h(t){return t.hasAttribute("disabled")||!0===t.disabled}function l(t){return!t.hasAttribute("hidden")}function m(t){const e=t.getAttribute("variant")??t.variant;return"primary"===e||"secondary"===e||"tertiary"===e?e:"secondary"}function p(t){return"primary"===m(t)}function f(t){return"secondary"===m(t)}function y(){"undefined"!=typeof customElements&&["lmvz-button-group"].forEach((t=>{"lmvz-button-group"===t&&(customElements.get(i(t))||customElements.define(i(t),c))}))}export{c as L,y as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as t,c as o,h as r,H as e,t as n}from"./p-CK8cAKcB.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,A as i}from"./p-slgmfnHm.js";import{E as m}from"./p-CN0JX9-m.js";import{i as s,f as d}from"./p-DOTK1OW3.js";const c=t(class extends l{get el(){return this}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant;disabled=!1;type="button";form;formMethod;name;value;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation",7),this.addController(new i(this)),this.addController(new m(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=s(this.el),super.connectedCallback()}disconnectedCallback(){this.formButtonEl?.remove(),this.formButtonEl=null,this.formEl=null,super.disconnectedCallback()}renderHiddenButton(){if("submit"!==this.type)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);const t=d(this.form,this.el);if(!t)return this.formButtonEl?.remove(),this.formButtonEl=null,void(this.formEl=null);this.formEl=t;const o=this.formButtonEl??document.createElement("button");o.type="submit",o.style.display="none",o.disabled=this.disabled,o.name=this.name??"",o.value=this.value??"",this.formMethod?o.setAttribute("formmethod",this.formMethod):o.removeAttribute("formmethod"),this.formButtonEl!==o&&(this.formButtonEl=o),o.parentElement!==t&&(o.remove(),t.appendChild(o))}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),r(e,{key:"8196de85afc3878c6f38e582d7c031f5d19bcd36","aria-disabled":this.disabled?"true":null},r("button",{key:"226f2f4ddbf861a8aed66d72c1980aa713e667f3",ref:t=>this.validationEl=t,disabled:this.disabled,type:this.type,class:a(this.variant??"secondary",{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},r("slot",{key:"436ecc98fc7d7350c67d01d13e5fd4566a238b03"})))}static get delegatesFocus(){return!0}static get style(){return" @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1],formMethod:[1,"form-method"],name:[1],value:[1]}]);function v(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(n(t))||customElements.define(n(t),c))}))}export{c as L,v as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{i as t,u as s,A as i,q as o}from"./p-CdDO7mQa.js";import{B as e,d as n}from"./p-CK8cAKcB.js";class h{host;config;visibilityObserver;elementQueued=!1;elementValidated=!1;elementLoaded=!1;static knownValidationErrors=[];get disabled(){return!t()}get useVerboseLogging(){return this.config?.verboseLogging||e.isDev||s()}constructor(t,s){this.host=t,this.config=s}onRuntimeConfigChange=()=>{t()&&this.checkLazyValidation()};hostDidLoad(){this.elementLoaded=!0,"undefined"!=typeof window&&window.addEventListener(i,this.onRuntimeConfigChange),this.elementQueued||this.elementValidated||("slot"!==this.config?.validationTiming?this.host.validationEl?.checkVisibility?.()&&"load"===this.config?.validationTiming?this.enqueueValidation():this.observeVisibilityOnce():this.observeSlot())}hostDidUpdate(){this.checkLazyValidation()}hostDisconnected(){this.discardVisibilityObserver(),"undefined"!=typeof window&&window.removeEventListener(i,this.onRuntimeConfigChange)}revalidateAria(){this.enqueueValidation()}observeSlot(){this.host.validationSlot?.addEventListener("slotchange",this.enqueueValidation.bind(this))}observeVisibilityOnce(){window.setTimeout((()=>{this.host.validationEl&&(this.visibilityObserver=new IntersectionObserver((t=>{for(const s of t)s.target===this.host.validationEl&&s.isIntersecting&&(this.checkLazyValidation(),this.discardVisibilityObserver())}),{root:this.host.validationEl?.parentElement,rootMargin:"0px",threshold:.01}),this.visibilityObserver.observe(this.host.validationEl))}))}checkLazyValidation(){this.elementLoaded&&(this.config?.reValidateOnPropChanges||!this.elementQueued&&!this.elementValidated)&&this.host.validationEl?.checkVisibility?.()&&this.enqueueValidation()}enqueueValidation(){t()&&(this.elementQueued=!0,o({context:{include:this.host.validationEl,exclude:h.knownValidationErrors},onComplete:(t,s)=>{this.elementValidated=!0;const i=this.host.tagName||this.host.validationEl?.tagName||"Element";if(t)return console.error("Error running ARIA validation:",t,i),void(this.host.validationEl?.tagName||console.dir(this.host));const o=[i];if(!s?.violations.length)return void(this.useVerboseLogging&&(console.log(...o,"has no ARIA violations"),this.host.validationEl?.tagName||console.dir(this.host)));const e=s.violations.length,n=[...o,s.violations.at(0).id,e>1?`(+${e-1} more)`:""].filter(Boolean).join(" ");this.useVerboseLogging?console.group(n):console.groupCollapsed(n);const r=s.violations.flatMap((t=>(console.dir(t,{showHidden:!0,compact:!1}),t.nodes.map((t=>t.target)))));this.host.validationEl?console.log("element:",this.host.validationEl):console.dir(this.host),console.groupEnd(),h.knownValidationErrors.push(...r)}}))}discardVisibilityObserver(){this.visibilityObserver&&(this.visibilityObserver.disconnect(),this.visibilityObserver=void 0)}}const r=class extends n{constructor(){super(!1)}controllers=new Set;addController(t){this.controllers.add(t)}removeController(t){this.controllers.delete(t)}get activeControllers(){return Array.from(this.controllers).filter((t=>!t.disabled))}connectedCallback(){this.controllers.size||console.warn("ReactiveControllerHost connected with no controllers registered.",this),this.activeControllers.forEach((t=>t.hostConnected?.()))}disconnectedCallback(){this.activeControllers.forEach((t=>t.hostDisconnected?.()))}componentWillLoad(){this.activeControllers.forEach((t=>t.hostWillLoad?.()))}componentDidLoad(){this.activeControllers.forEach((t=>t.hostDidLoad?.()))}componentWillRender(){this.activeControllers.forEach((t=>t.hostWillRender?.()))}componentDidRender(){this.activeControllers.forEach((t=>t.hostDidRender?.()))}componentWillUpdate(){this.activeControllers.forEach((t=>t.hostWillUpdate?.()))}componentDidUpdate(){this.activeControllers.forEach((t=>t.hostDidUpdate?.()))}};export{h as A,r as R}
|
|
@@ -111,4 +111,4 @@ function queueValidation(...args) {
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
export { ARIA_VALIDATION_RUNTIME_CHANGED_EVENT as A, disableAriaValidation as d, enableAriaValidation as e, isAriaValidationEnabled as i, queueValidation as q, useVerboseLogging as u };
|
|
114
|
+
export { ARIA_VALIDATION_RUNTIME_CHANGED_EVENT as A, isPromise as a, disableAriaValidation as d, enableAriaValidation as e, isAriaValidationEnabled as i, queueValidation as q, useVerboseLogging as u };
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, d as disableAriaValidation, e as enableAriaValidation, i as isAriaValidationEnabled, q as queueValidation, u as useVerboseLogging } from './aria-loader-
|
|
1
|
+
export { A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, d as disableAriaValidation, e as enableAriaValidation, i as isAriaValidationEnabled, q as queueValidation, u as useVerboseLogging } from './aria-loader-GfsGHZHY.js';
|
|
2
2
|
export { c as chipSizes, a as chipTypes, i as iconSizes, b as iconWeights, d as inputTypes, t as textSizes } from './ds.constants-Bmi89ll1.js';
|
|
3
3
|
export { g as getRegisteredIconProvider, r as registerIconProvider, t as typedIconFromSet } from './icons-CmuFKDRz.js';
|
|
4
4
|
import './svg-B2YoIRuh.js';
|
|
@@ -0,0 +1,371 @@
|
|
|
1
|
+
import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-Aa_425iY.js';
|
|
2
|
+
import { c as classNames } from './index-BfTCfPZ1.js';
|
|
3
|
+
import { R as ReactiveControllerHost, A as AriaValidationController } from './reactive-controller-host-CroMsXdS.js';
|
|
4
|
+
import { E as ElementActivationController } from './element-activation-controller-CN0JX9-m.js';
|
|
5
|
+
import { i as inheritAriaAttributes, f as findFormByRef, a as canReceiveFocus } from './component-DOTK1OW3.js';
|
|
6
|
+
import { a as isPromise, i as isAriaValidationEnabled } from './aria-loader-GfsGHZHY.js';
|
|
7
|
+
import { p as parseSvgString } from './svg-B2YoIRuh.js';
|
|
8
|
+
import { a as resolveIconSvg } from './icons-CmuFKDRz.js';
|
|
9
|
+
import './logger-CGmJG63p.js';
|
|
10
|
+
|
|
11
|
+
const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'), local('Router'); font-weight: 400 normal; } @font-face { font-family: Router; src: local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'), local('Router'); font-weight: 500; } @font-face { font-family: Router; src: local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'), local('Router'); font-weight: 700 bold; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4); outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
|
|
12
|
+
|
|
13
|
+
const LmvzButton = class extends ReactiveControllerHost {
|
|
14
|
+
get el() { return getElement(this); }
|
|
15
|
+
validationEl;
|
|
16
|
+
inheritedAttributes = {};
|
|
17
|
+
formEl = null;
|
|
18
|
+
formButtonEl = null;
|
|
19
|
+
lmvzActivation;
|
|
20
|
+
get ti() {
|
|
21
|
+
return 0;
|
|
22
|
+
}
|
|
23
|
+
scale = 'default';
|
|
24
|
+
variant;
|
|
25
|
+
disabled = false;
|
|
26
|
+
type = 'button';
|
|
27
|
+
form;
|
|
28
|
+
formMethod;
|
|
29
|
+
name;
|
|
30
|
+
value;
|
|
31
|
+
constructor(hostRef) {
|
|
32
|
+
super();
|
|
33
|
+
registerInstance(this, hostRef);
|
|
34
|
+
this.lmvzActivation = createEvent(this, "lmvzActivation", 7);
|
|
35
|
+
this.addController(new AriaValidationController(this));
|
|
36
|
+
this.addController(new ElementActivationController(this, {
|
|
37
|
+
localHandler: this.handleClick.bind(this),
|
|
38
|
+
keys: ['Enter'],
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
connectedCallback() {
|
|
42
|
+
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
43
|
+
super.connectedCallback();
|
|
44
|
+
}
|
|
45
|
+
disconnectedCallback() {
|
|
46
|
+
this.formButtonEl?.remove();
|
|
47
|
+
this.formButtonEl = null;
|
|
48
|
+
this.formEl = null;
|
|
49
|
+
super.disconnectedCallback();
|
|
50
|
+
}
|
|
51
|
+
renderHiddenButton() {
|
|
52
|
+
if (this.type !== 'submit') {
|
|
53
|
+
this.formButtonEl?.remove();
|
|
54
|
+
this.formButtonEl = null;
|
|
55
|
+
this.formEl = null;
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
const formEl = findFormByRef(this.form, this.el);
|
|
59
|
+
if (!formEl) {
|
|
60
|
+
this.formButtonEl?.remove();
|
|
61
|
+
this.formButtonEl = null;
|
|
62
|
+
this.formEl = null;
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
this.formEl = formEl;
|
|
66
|
+
const formButtonEl = this.formButtonEl ?? document.createElement('button');
|
|
67
|
+
formButtonEl.type = 'submit';
|
|
68
|
+
formButtonEl.style.display = 'none';
|
|
69
|
+
formButtonEl.disabled = this.disabled;
|
|
70
|
+
formButtonEl.name = this.name ?? '';
|
|
71
|
+
formButtonEl.value = this.value ?? '';
|
|
72
|
+
if (this.formMethod) {
|
|
73
|
+
formButtonEl.setAttribute('formmethod', this.formMethod);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
formButtonEl.removeAttribute('formmethod');
|
|
77
|
+
}
|
|
78
|
+
if (this.formButtonEl !== formButtonEl) {
|
|
79
|
+
this.formButtonEl = formButtonEl;
|
|
80
|
+
}
|
|
81
|
+
if (formButtonEl.parentElement !== formEl) {
|
|
82
|
+
formButtonEl.remove();
|
|
83
|
+
formEl.appendChild(formButtonEl);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
submitForm(ev) {
|
|
87
|
+
if (this.formEl && this.formButtonEl) {
|
|
88
|
+
ev.preventDefault();
|
|
89
|
+
this.formButtonEl.click();
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
handleClick = (ev) => {
|
|
93
|
+
if (this.type === 'submit') {
|
|
94
|
+
this.submitForm(ev);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
render() {
|
|
98
|
+
this.renderHiddenButton();
|
|
99
|
+
return (h(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '226f2f4ddbf861a8aed66d72c1980aa713e667f3', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '436ecc98fc7d7350c67d01d13e5fd4566a238b03' }))));
|
|
100
|
+
}
|
|
101
|
+
static get delegatesFocus() { return true; }
|
|
102
|
+
};
|
|
103
|
+
LmvzButton.style = lmvzButtonCss();
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Returns a function that delegates to the given predicate/filter and negates its result.
|
|
107
|
+
* The returned function preserves the input function's types, arguments and timing.
|
|
108
|
+
*
|
|
109
|
+
* @param delegate - The predicate/filter function to negate.
|
|
110
|
+
* @returns A function that returns the negated result.
|
|
111
|
+
*/
|
|
112
|
+
function negate(delegate) {
|
|
113
|
+
return (...args) => {
|
|
114
|
+
const result = delegate(...args);
|
|
115
|
+
return isPromise(result) ? result.then((res) => !res) : !result;
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}`;
|
|
120
|
+
|
|
121
|
+
const LmvzButtonGroup = class {
|
|
122
|
+
constructor(hostRef) {
|
|
123
|
+
registerInstance(this, hostRef);
|
|
124
|
+
}
|
|
125
|
+
actionsSlot;
|
|
126
|
+
validationMessageCache = [];
|
|
127
|
+
actionsStateObserver;
|
|
128
|
+
get primaryEnabledAction() {
|
|
129
|
+
return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
|
|
130
|
+
}
|
|
131
|
+
get hasActions() {
|
|
132
|
+
return this.assignedButtons.some((element) => isVisible(element) && isActionButton(element) && !isDisabledButton(element));
|
|
133
|
+
}
|
|
134
|
+
componentDidLoad() {
|
|
135
|
+
this.handleActionsSlotChange();
|
|
136
|
+
}
|
|
137
|
+
disconnectedCallback() {
|
|
138
|
+
this.actionsStateObserver?.disconnect();
|
|
139
|
+
}
|
|
140
|
+
get assignedElements() {
|
|
141
|
+
return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
|
|
142
|
+
}
|
|
143
|
+
get assignedButtons() {
|
|
144
|
+
return this.assignedElements.filter(isActionButton);
|
|
145
|
+
}
|
|
146
|
+
get visibleButtons() {
|
|
147
|
+
return this.assignedButtons.filter(isVisible);
|
|
148
|
+
}
|
|
149
|
+
get enabledButtons() {
|
|
150
|
+
return this.visibleButtons.filter(negate(isDisabledButton));
|
|
151
|
+
}
|
|
152
|
+
getActionValidationResult() {
|
|
153
|
+
if (!this.visibleButtons.length) {
|
|
154
|
+
return [];
|
|
155
|
+
}
|
|
156
|
+
const primaryActions = this.visibleButtons.filter(isPrimaryAction);
|
|
157
|
+
const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
|
|
158
|
+
const issues = [];
|
|
159
|
+
const order = this.visibleButtons.toReversed();
|
|
160
|
+
if (primaryActions.length !== 1)
|
|
161
|
+
issues.push('LmvzModal actions slot must contain exactly one primary action.');
|
|
162
|
+
if (secondaryActions.length > 1)
|
|
163
|
+
issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
|
|
164
|
+
if (primaryActions.length) {
|
|
165
|
+
const primaryAction = primaryActions[0];
|
|
166
|
+
const secondaryAction = secondaryActions[0];
|
|
167
|
+
if (order.indexOf(primaryAction) !== 0)
|
|
168
|
+
issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
|
|
169
|
+
if (secondaryAction && order.indexOf(secondaryAction) !== 1)
|
|
170
|
+
issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
|
|
171
|
+
}
|
|
172
|
+
else if (secondaryActions.length) {
|
|
173
|
+
const secondaryAction = secondaryActions[0];
|
|
174
|
+
if (order.indexOf(secondaryAction) !== 0)
|
|
175
|
+
issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
|
|
176
|
+
}
|
|
177
|
+
return issues;
|
|
178
|
+
}
|
|
179
|
+
handleActionsSlotChange = () => {
|
|
180
|
+
this.observeActionState();
|
|
181
|
+
this.syncActionsState();
|
|
182
|
+
};
|
|
183
|
+
observeActionState() {
|
|
184
|
+
if (typeof MutationObserver === 'undefined')
|
|
185
|
+
return;
|
|
186
|
+
this.actionsStateObserver?.disconnect();
|
|
187
|
+
if (!this.assignedButtons.length)
|
|
188
|
+
return;
|
|
189
|
+
this.actionsStateObserver = new MutationObserver(() => {
|
|
190
|
+
this.syncActionsState();
|
|
191
|
+
});
|
|
192
|
+
this.assignedButtons.forEach((element) => {
|
|
193
|
+
this.actionsStateObserver?.observe(element, {
|
|
194
|
+
attributes: true,
|
|
195
|
+
attributeFilter: ['disabled', 'hidden', 'variant'],
|
|
196
|
+
});
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
syncActionsState() {
|
|
200
|
+
const assignedElements = this.assignedElements;
|
|
201
|
+
assignedElements.forEach((element) => {
|
|
202
|
+
const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
203
|
+
if (isAllowedAction)
|
|
204
|
+
return;
|
|
205
|
+
if (!element.hasAttribute('hidden')) {
|
|
206
|
+
element.setAttribute('hidden', '');
|
|
207
|
+
}
|
|
208
|
+
if (element.getAttribute('aria-hidden') !== 'true') {
|
|
209
|
+
element.setAttribute('aria-hidden', 'true');
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
this.checkActions();
|
|
213
|
+
const length = this.visibleButtons.length;
|
|
214
|
+
for (let i = 0; i < length; i++) {
|
|
215
|
+
const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
|
|
216
|
+
const element = this.visibleButtons.at(i);
|
|
217
|
+
if (!element)
|
|
218
|
+
continue;
|
|
219
|
+
if (isLmvzButton(element)) {
|
|
220
|
+
if (!element.getAttribute('variant'))
|
|
221
|
+
element.setAttribute('variant', variant);
|
|
222
|
+
}
|
|
223
|
+
else {
|
|
224
|
+
element.classList.add(variant);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
this.focusPrimaryAction();
|
|
228
|
+
}
|
|
229
|
+
focusPrimaryAction() {
|
|
230
|
+
const focusTarget = this.primaryEnabledAction;
|
|
231
|
+
if (!focusTarget || typeof window === 'undefined')
|
|
232
|
+
return;
|
|
233
|
+
window.requestAnimationFrame(() => {
|
|
234
|
+
if (canReceiveFocus(focusTarget)) {
|
|
235
|
+
focusTarget.focus();
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
checkActions() {
|
|
240
|
+
if (!isAriaValidationEnabled())
|
|
241
|
+
return;
|
|
242
|
+
const issues = this.getActionValidationResult();
|
|
243
|
+
if (!issues.length) {
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
issues.forEach((issue) => {
|
|
247
|
+
if (this.validationMessageCache.includes(issue))
|
|
248
|
+
return;
|
|
249
|
+
console.warn(issue);
|
|
250
|
+
this.validationMessageCache.push(issue);
|
|
251
|
+
});
|
|
252
|
+
}
|
|
253
|
+
render() {
|
|
254
|
+
return (h(Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, h("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
function isActionButton(element) {
|
|
258
|
+
return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
|
|
259
|
+
}
|
|
260
|
+
function isLmvzButton(element) {
|
|
261
|
+
return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
|
|
262
|
+
}
|
|
263
|
+
function isDisabledButton(element) {
|
|
264
|
+
return element.hasAttribute('disabled') || element.disabled === true;
|
|
265
|
+
}
|
|
266
|
+
function isVisible(element) {
|
|
267
|
+
return !element.hasAttribute('hidden');
|
|
268
|
+
}
|
|
269
|
+
function getActionVariant(element) {
|
|
270
|
+
const variant = element.getAttribute('variant') ?? element.variant;
|
|
271
|
+
return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
|
|
272
|
+
}
|
|
273
|
+
function isPrimaryAction(element) {
|
|
274
|
+
return getActionVariant(element) === 'primary';
|
|
275
|
+
}
|
|
276
|
+
function isSecondaryAction(element) {
|
|
277
|
+
return getActionVariant(element) === 'secondary';
|
|
278
|
+
}
|
|
279
|
+
LmvzButtonGroup.style = lmvzButtonGroupCss();
|
|
280
|
+
|
|
281
|
+
const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
|
|
282
|
+
|
|
283
|
+
const LmvzIcon = class extends ReactiveControllerHost {
|
|
284
|
+
intersectionObserver;
|
|
285
|
+
ariaValidationController = new AriaValidationController(this);
|
|
286
|
+
get el() { return getElement(this); }
|
|
287
|
+
validationEl;
|
|
288
|
+
icon;
|
|
289
|
+
weight = 'medium';
|
|
290
|
+
size = 'md';
|
|
291
|
+
iconset;
|
|
292
|
+
iconData;
|
|
293
|
+
visible = false;
|
|
294
|
+
ariaLabel;
|
|
295
|
+
get ariaHidden() {
|
|
296
|
+
return !this.ariaLabel;
|
|
297
|
+
}
|
|
298
|
+
constructor(hostRef) {
|
|
299
|
+
super();
|
|
300
|
+
registerInstance(this, hostRef);
|
|
301
|
+
this.addController(this.ariaValidationController);
|
|
302
|
+
}
|
|
303
|
+
connectedCallback() {
|
|
304
|
+
this.waitUntilVisible(() => {
|
|
305
|
+
this.visible = true;
|
|
306
|
+
this.loadIconPathData();
|
|
307
|
+
});
|
|
308
|
+
super.connectedCallback();
|
|
309
|
+
}
|
|
310
|
+
disconnectedCallback() {
|
|
311
|
+
if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
|
|
312
|
+
this.intersectionObserver.disconnect();
|
|
313
|
+
}
|
|
314
|
+
this.intersectionObserver = undefined;
|
|
315
|
+
super.disconnectedCallback();
|
|
316
|
+
}
|
|
317
|
+
async loadIconPathData() {
|
|
318
|
+
const { icon, iconset, visible } = this;
|
|
319
|
+
if (!icon || !visible) {
|
|
320
|
+
return;
|
|
321
|
+
}
|
|
322
|
+
const maybeIcon = parseSvgString(icon);
|
|
323
|
+
if (maybeIcon) {
|
|
324
|
+
this.iconData = maybeIcon;
|
|
325
|
+
return;
|
|
326
|
+
}
|
|
327
|
+
this.iconData = await resolveIconSvg({
|
|
328
|
+
icon,
|
|
329
|
+
iconset,
|
|
330
|
+
});
|
|
331
|
+
}
|
|
332
|
+
componentDidRender() {
|
|
333
|
+
this.validationEl = this.el.querySelector('svg');
|
|
334
|
+
this.ariaValidationController.revalidateAria();
|
|
335
|
+
super.componentDidRender();
|
|
336
|
+
}
|
|
337
|
+
render() {
|
|
338
|
+
return h(Host, { key: '03b4391d02a77409257bcda51c2b65ad9a9e0a0c', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
|
|
339
|
+
}
|
|
340
|
+
waitUntilVisible(callback, rootMargin = 50) {
|
|
341
|
+
if (typeof window === 'undefined' || !window.IntersectionObserver) {
|
|
342
|
+
callback();
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
345
|
+
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
346
|
+
entries.some((entry) => {
|
|
347
|
+
if (entry.isIntersecting) {
|
|
348
|
+
if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
|
|
349
|
+
this.intersectionObserver.disconnect();
|
|
350
|
+
}
|
|
351
|
+
this.intersectionObserver = undefined;
|
|
352
|
+
callback();
|
|
353
|
+
return true;
|
|
354
|
+
}
|
|
355
|
+
return false;
|
|
356
|
+
});
|
|
357
|
+
}, { rootMargin: `${rootMargin}px` });
|
|
358
|
+
this.intersectionObserver.observe(this.el);
|
|
359
|
+
}
|
|
360
|
+
static get watchers() { return {
|
|
361
|
+
"icon": [{
|
|
362
|
+
"loadIconPathData": 0
|
|
363
|
+
}],
|
|
364
|
+
"iconset": [{
|
|
365
|
+
"loadIconPathData": 0
|
|
366
|
+
}]
|
|
367
|
+
}; }
|
|
368
|
+
};
|
|
369
|
+
LmvzIcon.style = lmvzIconCss();
|
|
370
|
+
|
|
371
|
+
export { LmvzButton as lmvz_button, LmvzButtonGroup as lmvz_button_group, LmvzIcon as lmvz_icon };
|