udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/components/udp-fluent-dialog2.js

@@ -1 +1 @@
-import{p as e,H as t,c as o,h as a,d,t as s}from"./index2.js";import"@fluentui/web-components/dialog.js";import"@fluentui/web-components/dialog-body.js";import{d as n}from"./udp-flexbox2.js";import{d as i}from"./udp-fluent-button2.js";import{d as l}from"./udp-fluent-icon2.js";import{d as c}from"./udp-fluent-icon-button2.js";import{d as u}from"./udp-spinner2.js";const p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dialogCloseEvent=o(this,"dialogClose",7),this.open=!1,this.dialogTitle="",this.showHeaderCloseButton=!0,this.maxHeight="300px",this.type="modal",this.handleToggle=e=>{var t;e.stopPropagation(),"closed"===(null===(t=e.detail)||void 0===t?void 0:t.newState)&&this.dialogCloseEvent.emit()},this.setDialogRef=e=>{this.dialogRef=e}}handleOpenChange(e){var t,o;e?null===(t=this.dialogRef)||void 0===t||t.show():null===(o=this.dialogRef)||void 0===o||o.hide()}componentDidLoad(){var e;this.open&&(null===(e=this.dialogRef)||void 0===e||e.show())}render(){return a(d,{key:"6503e7a76b2bb3b75bac4068ad46f2ed3e92cc5c",style:{"--dialog-max-height":this.maxHeight}},a("fluent-dialog",{key:"77608ee66ae9ceaeaf5f88a0d40651c649f618cf",ref:this.setDialogRef,type:this.type,onToggle:this.handleToggle},a("fluent-dialog-body",{key:"097d33707d5e16d3a0363bf887cea69916a4f0c6"},a("slot",{key:"fce51a10ea0dc792f6838bab7ac27a1795e149cd",name:"header",slot:"title"},this.dialogTitle&&a("udp-fluent-text",{key:"299c39cdd65a86a8db26e30c3c170209e4eed7e5"},this.dialogTitle)),this.showHeaderCloseButton&&a("udp-fluent-icon-button",{key:"2d9eca4397404d520bdee128a46d95d2eb040c35",slot:"close",appearance:"subtle",iconName:"dismiss",ariaLabel:"Close Dialog"}),a("div",{key:"dda10b13a75ade0cb16c48a198728c481b2eccdf",class:"dialog-content"},a("slot",{key:"d1ef17c1d85c1f3092c40dead5a48de9e7c1cd86"})),a("udp-flexbox",{key:"94d97930eec3d8a72b919fc1fda775da771dd767",slot:"action",direction:"row"},a("slot",{key:"23eb15c6243e5f28aafa3d7b83ded05b86b33798",name:"action"})))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return":host{display:block}fluent-dialog::part(dialog){outline:none}.dialog-content{max-height:var(--dialog-max-height, 300px);overflow-y:auto;margin:-2px;padding:2px}"}},[257,"udp-fluent-dialog",{open:[4],dialogTitle:[1,"dialog-title"],showHeaderCloseButton:[4,"show-header-close-button"],maxHeight:[1,"max-height"],type:[1]},void 0,{open:[{handleOpenChange:0}]}]);function r(){"undefined"!=typeof customElements&&["udp-fluent-dialog","udp-flexbox","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner"].forEach((e=>{switch(e){case"udp-fluent-dialog":customElements.get(s(e))||customElements.define(s(e),p);break;case"udp-flexbox":customElements.get(s(e))||n();break;case"udp-fluent-button":customElements.get(s(e))||i();break;case"udp-fluent-icon":customElements.get(s(e))||l();break;case"udp-fluent-icon-button":customElements.get(s(e))||c();break;case"udp-spinner":customElements.get(s(e))||u()}}))}export{p as U,r as d}
+import{p as e,H as t,c as o,h as s,d as a,t as n}from"./index2.js";import"@fluentui/web-components/dialog.js";import"@fluentui/web-components/dialog-body.js";import{d}from"./udp-flexbox2.js";import{d as i}from"./udp-fluent-button2.js";import{d as l}from"./udp-fluent-icon2.js";import{d as c}from"./udp-fluent-icon-button2.js";import{d as u}from"./udp-spinner2.js";const p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dialogCloseEvent=o(this,"dialogClose",7),this.open=!1,this.dialogTitle="",this.showHeaderCloseButton=!0,this.maxHeight="300px",this.type="modal",this.handleToggle=e=>{var t;e.stopPropagation(),"closed"===(null===(t=e.detail)||void 0===t?void 0:t.newState)&&this.dialogCloseEvent.emit()},this.setDialogRef=e=>{this.dialogRef=e}}handleOpenChange(e){var t,o;e?null===(t=this.dialogRef)||void 0===t||t.show():null===(o=this.dialogRef)||void 0===o||o.hide()}componentDidLoad(){var e;this.open&&(null===(e=this.dialogRef)||void 0===e||e.show())}render(){return s(a,{key:"bdc6a742e8edd7617221e3455cd4a34bb8c56765",style:{"--dialog-max-height":this.maxHeight}},s("fluent-dialog",{key:"154d4652d77e56243775e49df95ba2949c387ed6",ref:this.setDialogRef,type:this.type,onToggle:this.handleToggle},s("fluent-dialog-body",{key:"c8fb1b45882f05b26929814f4b6857f6a2192254"},s("slot",{key:"8d4a10893c21404f517d0568c12d0dfab6906322",name:"header",slot:"title"},this.dialogTitle&&s("udp-fluent-text",{key:"1d8c12414b78c0dc9598529e96f5cd1709a9c2d6"},this.dialogTitle)),this.showHeaderCloseButton&&s("udp-fluent-icon-button",{key:"f6601c314e32a74a89d603c9ea899c3ea58026d0",slot:"close",appearance:"subtle",iconName:"dismiss",ariaLabel:"Close Dialog"}),s("div",{key:"c317d7af79b48a39308c9778f779e2cc698bc35d",class:"dialog-content"},s("slot",{key:"f7f688477f49c2a201ce91f6b8ce02384600d9cf"})),s("udp-flexbox",{key:"57f73d7491219fa5311ac0caaa074b52fa00988a",slot:"action",direction:"row"},s("slot",{key:"faad63095de48894e82c9d70c87d3d9730c78ba4",name:"action"})))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return":host{display:block}fluent-dialog::part(dialog){outline:none}.dialog-content{max-height:var(--dialog-max-height, 300px);overflow-y:auto;margin:-2px;padding:2px}"}},[257,"udp-fluent-dialog",{open:[4],dialogTitle:[1,"dialog-title"],showHeaderCloseButton:[4,"show-header-close-button"],maxHeight:[1,"max-height"],type:[1]},void 0,{open:[{handleOpenChange:0}]}]);function f(){"undefined"!=typeof customElements&&["udp-fluent-dialog","udp-flexbox","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner"].forEach((e=>{switch(e){case"udp-fluent-dialog":customElements.get(n(e))||customElements.define(n(e),p);break;case"udp-flexbox":customElements.get(n(e))||d();break;case"udp-fluent-button":customElements.get(n(e))||i();break;case"udp-fluent-icon":customElements.get(n(e))||l();break;case"udp-fluent-icon-button":customElements.get(n(e))||c();break;case"udp-spinner":customElements.get(n(e))||u()}}))}export{p as U,f as d}

package/dist/components/udp-fluent-divider2.js

@@ -1 +1 @@
-import{p as e,H as t,h as n,d as i,t as s}from"./index2.js";import"@fluentui/web-components/divider.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.alignContent="center",this.orientation="horizontal"}render(){return n(i,{key:"3ad3337f235573394f659a183a7fb0639931c7d4",style:{background:"transparent"}},n("fluent-divider",{key:"0d65508604ff3ead42bfd0f87388930ad4854fe3","align-content":this.alignContent,appearance:this.appearance,inset:this.inset,role:this.role,orientation:this.orientation},n("slot",{key:"a993a8486ba0ec0dd0e72c95eab3adb46c09eff0"})))}},[257,"udp-fluent-divider",{alignContent:[1,"align-content"],appearance:[1],inset:[4],role:[1],orientation:[1]}]);function d(){"undefined"!=typeof customElements&&["udp-fluent-divider"].forEach((e=>{"udp-fluent-divider"===e&&(customElements.get(s(e))||customElements.define(s(e),a))}))}export{a as U,d}
+import{p as e,H as t,h as n,d as i,t as s}from"./index2.js";import"@fluentui/web-components/divider.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.alignContent="center",this.orientation="horizontal"}render(){return n(i,{key:"f85009a84bb481a0ba52fed82c3d26021be81b67",style:{background:"transparent"}},n("fluent-divider",{key:"f237b3c0842bc7ed6ea19343e3dbee2a74b9a74d","align-content":this.alignContent,appearance:this.appearance,inset:this.inset,role:this.role,orientation:this.orientation},n("slot",{key:"f08a91b63a1b88d059ecf6a03688675e8a61f841"})))}},[257,"udp-fluent-divider",{alignContent:[1,"align-content"],appearance:[1],inset:[4],role:[1],orientation:[1]}]);function d(){"undefined"!=typeof customElements&&["udp-fluent-divider"].forEach((e=>{"udp-fluent-divider"===e&&(customElements.get(s(e))||customElements.define(s(e),a))}))}export{a as U,d}

package/dist/components/udp-fluent-drawer2.js

@@ -1 +1 @@
-import{p as t,H as e,c as i,h as o,d as s,t as a}from"./index2.js";import"@fluentui/web-components/drawer.js";import"@fluentui/web-components/drawer-body.js";import"@fluentui/web-components/button.js";import{d as r}from"./udp-flexbox2.js";import{d as n}from"./udp-fluent-button2.js";import{d}from"./udp-fluent-icon2.js";import{d as l}from"./udp-fluent-icon-button2.js";import{d as h}from"./udp-spinner2.js";import{d as c}from"./udp-text2.js";const u={small:320,medium:590,large:940,full:1/0},p=t(class t extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.drawerCloseEvent=i(this,"drawerClose",3),this.open=!1,this.drawerTitle="",this.size="medium",this.position="end",this.excludeVerticalPadding=!1,this.hasFooter=!1,this.hasToolbar=!1,this.showTopShadow=!1,this.showBottomShadow=!1,this.effectiveSize="medium",this.isLocked=!1,this.clickStartedOnBackdrop=!1,this.handleDialogMouseDown=t=>{this.drawerRef&&this.drawerRef.dialog&&(this.clickStartedOnBackdrop=t.target===this.drawerRef.dialog)},this.handleWindowResize=()=>{clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=setTimeout((()=>{this.calculateEffectiveSize()}),100)},this.handleScroll=()=>{this.checkScrollShadows()},this.handleToggle=t=>{t.stopPropagation(),"closed"===t.detail.newState?(this.isLocked&&(this.handleLock(!1),this.isLocked=!1),this.drawerCloseEvent.emit()):"open"===t.detail.newState&&(this.isLocked||(this.handleLock(!0),this.isLocked=!0))},this.setDrawerRef=t=>{this.drawerRef=t}}handleOpenChange(t){var e,i;clearTimeout(this.lockFallbackTimer),t?((null===(e=this.drawerRef)||void 0===e?void 0:e.dialog)&&!this.drawerRef.dialog.open&&this.drawerRef.show(),this.lockFallbackTimer=setTimeout((()=>{this.open&&!this.isLocked&&(this.handleLock(!0),this.isLocked=!0)}),50)):(null===(i=this.drawerRef)||void 0===i?void 0:i.dialog)&&this.drawerRef.dialog.open&&this.drawerRef.hide()}handleSizeChange(){this.calculateEffectiveSize()}componentWillLoad(){this.checkFooter(),this.checkToolbar(),this.updateDrawerWidth()}updateDrawerWidth(){this.drawerWidth&&this.drawerWidth.length>0?this.el.style.setProperty("--drawer-width",this.drawerWidth):this.el.style.removeProperty("--drawer-width")}componentDidLoad(){var t;this.calculateEffectiveSize(),this.open&&(null===(t=this.drawerRef)||void 0===t||t.show(),this.isLocked||(this.handleLock(!0),this.isLocked=!0)),this.mutationObserver=new MutationObserver((()=>{this.checkFooter(),this.checkToolbar(),this.checkScrollShadows()})),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0}),this.contentRef&&(this.resizeObserver=new ResizeObserver((()=>{this.checkScrollShadows()})),this.resizeObserver.observe(this.contentRef),window.addEventListener("resize",this.handleWindowResize),this.checkScrollShadows()),this.setupBackdropClickHandling()}setupBackdropClickHandling(){if(!this.drawerRef||!this.drawerRef.dialog)return;const t=this.drawerRef.dialog;t.addEventListener("mousedown",this.handleDialogMouseDown);const e=this.drawerRef.clickHandler.bind(this.drawerRef);this.drawerRef.clickHandler=i=>this.open&&i.target===t?this.clickStartedOnBackdrop?e(i):(i.preventDefault(),!0):e(i)}disconnectedCallback(){var e,i;clearTimeout(this.lockFallbackTimer),clearTimeout(this.resizeDebounceTimer),this.isLocked&&(this.handleLock(!1),this.isLocked=!1),0===t.openDrawers.size&&null!==t.unlockTimer&&(clearTimeout(t.unlockTimer),t.unlockTimer=null),null===(e=this.mutationObserver)||void 0===e||e.disconnect(),null===(i=this.resizeObserver)||void 0===i||i.disconnect(),window.removeEventListener("resize",this.handleWindowResize),this.drawerRef&&this.drawerRef.dialog&&this.drawerRef.dialog.removeEventListener("mousedown",this.handleDialogMouseDown)}checkFooter(){const t=Array.from(this.el.children);this.hasFooter=t.some((t=>"footer"===t.getAttribute("slot")))}checkToolbar(){const t=Array.from(this.el.children);this.hasToolbar=t.some((t=>"toolbar"===t.getAttribute("slot")))}calculateEffectiveSize(){const t=window.innerWidth;let e=u.medium;if(this.drawerWidth&&this.drawerWidth.endsWith("px")){const t=parseInt(this.drawerWidth,10);!isNaN(t)&&t>0&&(e=t)}else this.size&&u[this.size]&&(e=u[this.size]);t<e?"full"!==this.effectiveSize&&(this.effectiveSize="full"):this.effectiveSize!==this.size&&(this.effectiveSize=this.size)}checkScrollShadows(){if(!this.contentRef)return;const{scrollTop:t,scrollHeight:e,clientHeight:i}=this.contentRef,o=t>0,s=Math.ceil(t+i)<e;this.showTopShadow!==o&&(this.showTopShadow=o),this.showBottomShadow!==s&&(this.showBottomShadow=s)}handleLock(e){e?(null!==t.unlockTimer&&(clearTimeout(t.unlockTimer),t.unlockTimer=null),0===t.openDrawers.size&&this.lockBodyScroll(),t.openDrawers.add(this)):(t.openDrawers.delete(this),0===t.openDrawers.size&&(t.unlockTimer=setTimeout((()=>{0===t.openDrawers.size&&this.unlockBodyScroll(),t.unlockTimer=null}),t.UNLOCK_DELAY_MS)))}getScrollbarWidth(){return window.innerWidth-document.documentElement.clientWidth}lockBodyScroll(){const e=document.documentElement,i=document.body;if("fixed"===i.style.position)return;null===t.originalBodyStyles&&(t.originalBodyStyles={htmlOverflow:e.style.overflow,bodyOverflow:i.style.overflow,bodyPosition:i.style.position,bodyTop:i.style.top,bodyWidth:i.style.width,bodyPaddingRight:i.style.paddingRight,bodyTouchAction:i.style.touchAction});const o=window.scrollY,s=this.getScrollbarWidth();e.style.overflow="hidden",i.style.overflow="hidden",i.style.position="fixed",i.style.top=`-${o}px`,i.style.width="100%",i.style.touchAction="none",s>0&&(i.style.paddingRight=`${s}px`)}unlockBodyScroll(){const e=document.documentElement,i=document.body,o=i.style.top;if(t.originalBodyStyles&&(e.style.overflow=t.originalBodyStyles.htmlOverflow,i.style.overflow=t.originalBodyStyles.bodyOverflow,i.style.position=t.originalBodyStyles.bodyPosition,i.style.top=t.originalBodyStyles.bodyTop,i.style.width=t.originalBodyStyles.bodyWidth,i.style.paddingRight=t.originalBodyStyles.bodyPaddingRight,i.style.touchAction=t.originalBodyStyles.bodyTouchAction,t.originalBodyStyles=null),o&&""!==o){const t=parseInt(o.replace("px",""),10);isNaN(t)||window.scrollTo(0,Math.abs(t))}}render(){return o(s,{key:"8cadf705643dc434d09e681d287f355ebd7abfec",class:{"has-footer":this.hasFooter}},o("fluent-drawer",{key:"8b8941993ccc2b0f071b70cb63aad5d1be1ac9f7",ref:this.setDrawerRef,onToggle:this.handleToggle,type:"modal",position:this.position,size:this.effectiveSize},o("fluent-drawer-body",{key:"ff81cc6c0983789fcef21b951003b88fe9d5ae27"},o("udp-text",{key:"00eedc037ab82ed21b938a7cfce5cc66c915d112",variant:"subtitle1",slot:"title"},this.drawerTitle),o("udp-fluent-icon-button",{key:"012b31c2d5872f7d30793f34767538c992eadebb",slot:"close",appearance:"subtle",iconName:"dismiss","aria-label":"close"}),this.hasToolbar&&o("udp-flexbox",{key:"9a93216871d7d3755653be6ae16ab09c288353ed",class:"drawer-toolbar",direction:"row",width:"100%"},o("slot",{key:"748b2ebd652cfd81b378387ec1c7a85b19443ace",name:"toolbar"})),o("div",{key:"fc1339687085903a01b0ce5afa6adebe62932bf2",class:"drawer-scroll-container",ref:t=>this.contentRef=t,onScroll:this.handleScroll},o("div",{key:"6750d301a807118b86005208a06e25514bb58b73",class:"scroll-shadow top "+(this.showTopShadow?"visible":"")}),o("div",{key:"4d4070e6b4aef7e1560f425cac5a9a337f9cf612",class:"drawer-content-inner"+(this.excludeVerticalPadding?"":" vertical-padding")},o("slot",{key:"250d3a74e4bf3923e234b5f83890812929f58e6c"})),o("div",{key:"9297ccb919031f826ee25f5b655c42acd81db50c",class:"scroll-shadow bottom "+(this.showBottomShadow?"visible":"")})),this.hasFooter&&o("udp-flexbox",{key:"a2949f7b7e8abd57c504c74950029d2b54979166",slot:"footer",direction:"row"},o("slot",{key:"03f9d4541b11a10e3ffaafc5f4ac4a9606cf33e0",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}],size:[{handleSizeChange:0}],drawerWidth:[{updateDrawerWidth:0}]}}static get style(){return'fluent-drawer-body{padding:0;background-color:var(--colorNeutralBackground2)}fluent-drawer-body::part(header){background:var(--colorNeutralBackground1);overflow:visible;padding:var(--spacingHorizontalM);border-bottom:1px solid var(--colorNeutralStroke3)}fluent-drawer-body::part(content){overflow:hidden;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0}fluent-button[slot="close"]{margin:2px;}fluent-drawer-body::part(footer){display:none}.drawer-toolbar{position:relative;z-index:10;background:var(--colorNeutralBackground1);padding:var(--spacingVerticalNone) var(--spacingHorizontalM);border-bottom:1px solid var(--colorNeutralStroke2);width:100%}.drawer-scroll-container{padding:0;overflow-y:auto;flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column}.drawer-content-inner{padding:var(--spacingHorizontalM);flex:1 0 auto;}.drawer-content-inner.vertical-padding{padding-top:var(--spacingVerticalXXXL);padding-bottom:var(--spacingVerticalXXXL)}.scroll-shadow{position:sticky;left:0;right:0;height:24px;z-index:100;pointer-events:none;opacity:0;transition:opacity 0.2s ease;flex-shrink:0}.scroll-shadow.visible{opacity:1}.scroll-shadow.top{top:0;margin-bottom:-24px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent)}.scroll-shadow.bottom{bottom:0;margin-top:-24px;background:linear-gradient(to top, rgba(0, 0, 0, 0.12), transparent)}:host(.has-footer) fluent-drawer-body::part(footer){display:block;background:var(--colorNeutralBackground1);border-top:1px solid var(--colorNeutralStroke3);padding-top:var(--spacingVerticalS);padding-bottom:var(--spacingVerticalM);padding-left:var(--spacingHorizontalM);padding-right:var(--spacingHorizontalM)}'}},[257,"udp-fluent-drawer",{open:[4],drawerTitle:[1,"drawer-title"],size:[1],position:[1],drawerWidth:[1,"drawer-width"],excludeVerticalPadding:[4,"exclude-vertical-padding"],hasFooter:[32],hasToolbar:[32],showTopShadow:[32],showBottomShadow:[32],effectiveSize:[32]},void 0,{open:[{handleOpenChange:0}],size:[{handleSizeChange:0}],drawerWidth:[{updateDrawerWidth:0}]}]);function b(){"undefined"!=typeof customElements&&["udp-fluent-drawer","udp-flexbox","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text"].forEach((t=>{switch(t){case"udp-fluent-drawer":customElements.get(a(t))||customElements.define(a(t),p);break;case"udp-flexbox":customElements.get(a(t))||r();break;case"udp-fluent-button":customElements.get(a(t))||n();break;case"udp-fluent-icon":customElements.get(a(t))||d();break;case"udp-fluent-icon-button":customElements.get(a(t))||l();break;case"udp-spinner":customElements.get(a(t))||h();break;case"udp-text":customElements.get(a(t))||c()}}))}p.openDrawers=new Set,p.unlockTimer=null,p.UNLOCK_DELAY_MS=300,p.originalBodyStyles=null;export{p as U,b as d}
+import{p as t,H as e,c as i,h as o,d as s,t as a}from"./index2.js";import"@fluentui/web-components/drawer.js";import"@fluentui/web-components/drawer-body.js";import"@fluentui/web-components/button.js";import{d as r}from"./udp-flexbox2.js";import{d}from"./udp-fluent-button2.js";import{d as n}from"./udp-fluent-icon2.js";import{d as l}from"./udp-fluent-icon-button2.js";import{d as h}from"./udp-spinner2.js";import{d as c}from"./udp-text2.js";const u={small:320,medium:590,large:940,full:1/0},p=t(class t extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.drawerCloseEvent=i(this,"drawerClose",3),this.open=!1,this.drawerTitle="",this.size="medium",this.position="end",this.excludeVerticalPadding=!1,this.hasFooter=!1,this.hasToolbar=!1,this.showTopShadow=!1,this.showBottomShadow=!1,this.effectiveSize="medium",this.isLocked=!1,this.clickStartedOnBackdrop=!1,this.handleDialogMouseDown=t=>{this.drawerRef&&this.drawerRef.dialog&&(this.clickStartedOnBackdrop=t.target===this.drawerRef.dialog)},this.handleWindowResize=()=>{clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=setTimeout((()=>{this.calculateEffectiveSize()}),100)},this.handleScroll=()=>{this.checkScrollShadows()},this.handleToggle=t=>{t.stopPropagation(),"closed"===t.detail.newState?(this.isLocked&&(this.handleLock(!1),this.isLocked=!1),this.drawerCloseEvent.emit()):"open"===t.detail.newState&&(this.isLocked||(this.handleLock(!0),this.isLocked=!0))},this.setDrawerRef=t=>{this.drawerRef=t}}handleOpenChange(t){var e,i;clearTimeout(this.lockFallbackTimer),t?((null===(e=this.drawerRef)||void 0===e?void 0:e.dialog)&&!this.drawerRef.dialog.open&&this.drawerRef.show(),this.lockFallbackTimer=setTimeout((()=>{this.open&&!this.isLocked&&(this.handleLock(!0),this.isLocked=!0)}),50)):(null===(i=this.drawerRef)||void 0===i?void 0:i.dialog)&&this.drawerRef.dialog.open&&this.drawerRef.hide()}handleSizeChange(){this.calculateEffectiveSize()}componentWillLoad(){this.checkFooter(),this.checkToolbar(),this.updateDrawerWidth()}updateDrawerWidth(){this.drawerWidth&&this.drawerWidth.length>0?this.el.style.setProperty("--drawer-width",this.drawerWidth):this.el.style.removeProperty("--drawer-width")}componentDidLoad(){var t;this.calculateEffectiveSize(),this.open&&(null===(t=this.drawerRef)||void 0===t||t.show(),this.isLocked||(this.handleLock(!0),this.isLocked=!0)),this.mutationObserver=new MutationObserver((()=>{this.checkFooter(),this.checkToolbar(),this.checkScrollShadows()})),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0}),this.contentRef&&(this.resizeObserver=new ResizeObserver((()=>{this.checkScrollShadows()})),this.resizeObserver.observe(this.contentRef),window.addEventListener("resize",this.handleWindowResize),this.checkScrollShadows()),this.setupBackdropClickHandling()}setupBackdropClickHandling(){if(!this.drawerRef||!this.drawerRef.dialog)return;const t=this.drawerRef.dialog;t.addEventListener("mousedown",this.handleDialogMouseDown);const e=this.drawerRef.clickHandler.bind(this.drawerRef);this.drawerRef.clickHandler=i=>this.open&&i.target===t?this.clickStartedOnBackdrop?e(i):(i.preventDefault(),!0):e(i)}disconnectedCallback(){var e,i;clearTimeout(this.lockFallbackTimer),clearTimeout(this.resizeDebounceTimer),this.isLocked&&(this.handleLock(!1),this.isLocked=!1),0===t.openDrawers.size&&null!==t.unlockTimer&&(clearTimeout(t.unlockTimer),t.unlockTimer=null),null===(e=this.mutationObserver)||void 0===e||e.disconnect(),null===(i=this.resizeObserver)||void 0===i||i.disconnect(),window.removeEventListener("resize",this.handleWindowResize),this.drawerRef&&this.drawerRef.dialog&&this.drawerRef.dialog.removeEventListener("mousedown",this.handleDialogMouseDown)}checkFooter(){const t=Array.from(this.el.children);this.hasFooter=t.some((t=>"footer"===t.getAttribute("slot")))}checkToolbar(){const t=Array.from(this.el.children);this.hasToolbar=t.some((t=>"toolbar"===t.getAttribute("slot")))}calculateEffectiveSize(){const t=window.innerWidth;let e=u.medium;if(this.drawerWidth&&this.drawerWidth.endsWith("px")){const t=parseInt(this.drawerWidth,10);!isNaN(t)&&t>0&&(e=t)}else this.size&&u[this.size]&&(e=u[this.size]);t<e?"full"!==this.effectiveSize&&(this.effectiveSize="full"):this.effectiveSize!==this.size&&(this.effectiveSize=this.size)}checkScrollShadows(){if(!this.contentRef)return;const{scrollTop:t,scrollHeight:e,clientHeight:i}=this.contentRef,o=t>0,s=Math.ceil(t+i)<e;this.showTopShadow!==o&&(this.showTopShadow=o),this.showBottomShadow!==s&&(this.showBottomShadow=s)}handleLock(e){e?(null!==t.unlockTimer&&(clearTimeout(t.unlockTimer),t.unlockTimer=null),0===t.openDrawers.size&&this.lockBodyScroll(),t.openDrawers.add(this)):(t.openDrawers.delete(this),0===t.openDrawers.size&&(t.unlockTimer=setTimeout((()=>{0===t.openDrawers.size&&this.unlockBodyScroll(),t.unlockTimer=null}),t.UNLOCK_DELAY_MS)))}getScrollbarWidth(){return window.innerWidth-document.documentElement.clientWidth}lockBodyScroll(){const e=document.documentElement,i=document.body;if("fixed"===i.style.position)return;null===t.originalBodyStyles&&(t.originalBodyStyles={htmlOverflow:e.style.overflow,bodyOverflow:i.style.overflow,bodyPosition:i.style.position,bodyTop:i.style.top,bodyWidth:i.style.width,bodyPaddingRight:i.style.paddingRight,bodyTouchAction:i.style.touchAction});const o=window.scrollY,s=this.getScrollbarWidth();e.style.overflow="hidden",i.style.overflow="hidden",i.style.position="fixed",i.style.top=`-${o}px`,i.style.width="100%",i.style.touchAction="none",s>0&&(i.style.paddingRight=`${s}px`)}unlockBodyScroll(){const e=document.documentElement,i=document.body,o=i.style.top;if(t.originalBodyStyles&&(e.style.overflow=t.originalBodyStyles.htmlOverflow,i.style.overflow=t.originalBodyStyles.bodyOverflow,i.style.position=t.originalBodyStyles.bodyPosition,i.style.top=t.originalBodyStyles.bodyTop,i.style.width=t.originalBodyStyles.bodyWidth,i.style.paddingRight=t.originalBodyStyles.bodyPaddingRight,i.style.touchAction=t.originalBodyStyles.bodyTouchAction,t.originalBodyStyles=null),o&&""!==o){const t=parseInt(o.replace("px",""),10);isNaN(t)||window.scrollTo(0,Math.abs(t))}}render(){return o(s,{key:"45b1f4b2583f7e77fd033c162c15b1115e49ac8f",class:{"has-footer":this.hasFooter}},o("fluent-drawer",{key:"63eb8dec0d50001a00f25feb3ba1e0f7b7fdc132",ref:this.setDrawerRef,onToggle:this.handleToggle,type:"modal",position:this.position,size:this.effectiveSize},o("fluent-drawer-body",{key:"04abd30d742279e395f4271847e8de12c26a5235"},o("udp-text",{key:"a9196ab5508a93901ae4a3f674f6a57c8d80f09b",variant:"subtitle1",slot:"title"},this.drawerTitle),o("udp-fluent-icon-button",{key:"723f3d8af9739883b236d9eaef49fb4d8a9ca97f",slot:"close",appearance:"subtle",iconName:"dismiss","aria-label":"close"}),this.hasToolbar&&o("udp-flexbox",{key:"d26a9652357c47d072acd3a2e2d498a3ddc13973",class:"drawer-toolbar",direction:"row",width:"100%"},o("slot",{key:"f79e5ebc5c04127907bee559467c69ae97e8b208",name:"toolbar"})),o("div",{key:"24ff4b4102b64248534fecbed9c8b0583586948e",class:"drawer-scroll-container",ref:t=>this.contentRef=t,onScroll:this.handleScroll},o("div",{key:"d563034faa7be9798d629b1300f79780dd0dfd8e",class:"scroll-shadow top "+(this.showTopShadow?"visible":"")}),o("div",{key:"33411705f0a93d13fe7669ea93bd43b9902ef2f1",class:"drawer-content-inner"+(this.excludeVerticalPadding?"":" vertical-padding")},o("slot",{key:"59d98bbdc85d325a854f6d17f29f5493356dbf92"})),o("div",{key:"4260000ac7c4cfdb963edb7cd2ecdcd19aff7f2e",class:"scroll-shadow bottom "+(this.showBottomShadow?"visible":"")})),this.hasFooter&&o("udp-flexbox",{key:"0453a08e0c9a29236a8f3bd8ea49bbb5e2214538",slot:"footer",direction:"row"},o("slot",{key:"9e7a06250114e7a9a849c67439f35aedf6c5ce8a",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}],size:[{handleSizeChange:0}],drawerWidth:[{updateDrawerWidth:0}]}}static get style(){return'fluent-drawer-body{padding:0;background-color:var(--colorNeutralBackground2)}fluent-drawer-body::part(header){background:var(--colorNeutralBackground1);overflow:visible;padding:var(--spacingHorizontalM);border-bottom:1px solid var(--colorNeutralStroke3)}fluent-drawer-body::part(content){overflow:hidden;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0}fluent-button[slot="close"]{margin:2px;}fluent-drawer-body::part(footer){display:none}.drawer-toolbar{position:relative;z-index:10;background:var(--colorNeutralBackground1);padding:var(--spacingVerticalNone) var(--spacingHorizontalM);border-bottom:1px solid var(--colorNeutralStroke2);width:100%}.drawer-scroll-container{padding:0;overflow-y:auto;flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column}.drawer-content-inner{padding:var(--spacingHorizontalM);flex:1 0 auto;}.drawer-content-inner.vertical-padding{padding-top:var(--spacingVerticalXXXL);padding-bottom:var(--spacingVerticalXXXL)}.scroll-shadow{position:sticky;left:0;right:0;height:24px;z-index:100;pointer-events:none;opacity:0;transition:opacity 0.2s ease;flex-shrink:0}.scroll-shadow.visible{opacity:1}.scroll-shadow.top{top:0;margin-bottom:-24px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent)}.scroll-shadow.bottom{bottom:0;margin-top:-24px;background:linear-gradient(to top, rgba(0, 0, 0, 0.12), transparent)}:host(.has-footer) fluent-drawer-body::part(footer){display:block;background:var(--colorNeutralBackground1);border-top:1px solid var(--colorNeutralStroke3);padding-top:var(--spacingVerticalS);padding-bottom:var(--spacingVerticalM);padding-left:var(--spacingHorizontalM);padding-right:var(--spacingHorizontalM)}'}},[257,"udp-fluent-drawer",{open:[4],drawerTitle:[1,"drawer-title"],size:[1],position:[1],drawerWidth:[1,"drawer-width"],excludeVerticalPadding:[4,"exclude-vertical-padding"],hasFooter:[32],hasToolbar:[32],showTopShadow:[32],showBottomShadow:[32],effectiveSize:[32]},void 0,{open:[{handleOpenChange:0}],size:[{handleSizeChange:0}],drawerWidth:[{updateDrawerWidth:0}]}]);function f(){"undefined"!=typeof customElements&&["udp-fluent-drawer","udp-flexbox","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text"].forEach((t=>{switch(t){case"udp-fluent-drawer":customElements.get(a(t))||customElements.define(a(t),p);break;case"udp-flexbox":customElements.get(a(t))||r();break;case"udp-fluent-button":customElements.get(a(t))||d();break;case"udp-fluent-icon":customElements.get(a(t))||n();break;case"udp-fluent-icon-button":customElements.get(a(t))||l();break;case"udp-spinner":customElements.get(a(t))||h();break;case"udp-text":customElements.get(a(t))||c()}}))}p.openDrawers=new Set,p.unlockTimer=null,p.UNLOCK_DELAY_MS=300,p.originalBodyStyles=null;export{p as U,f as d}

package/dist/components/udp-fluent-dropdown2.js

@@ -1 +1 @@
-import{p as e,H as t,c as i,h as o,d as n,t as s}from"./index2.js";import"@fluentui/web-components/dropdown.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import"@fluentui/web-components/option.js";import"@fluentui/web-components/listbox.js";import{d as r}from"./udp-fluent-badge2.js";import{d as l}from"./udp-fluent-button2.js";import{d as a}from"./udp-fluent-icon2.js";import{d}from"./udp-fluent-icon-button2.js";import{d as p}from"./udp-spinner2.js";import{d as c}from"./udp-text2.js";import{d as u}from"./udp-tooltip2.js";const h=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.options=[],this.optionLabel="label",this.optionValue="value",this.optionDisabled="disabled",this.optionIcon="icon",this.iconPosition="start",this.optionBadges="badges",this.optionGroup="group",this.appearance="outline",this.controlSize="medium",this.disabled=!1,this.required=!1,this.loading=!1,this.includeErrorPadding=!0,this.multiple=!1,this.autofocus=!1,this.clearable=!1,this.showClearButton=!1,this.selectionForOverlay=null,this.typeaheadBuffer="",this.handleTogglePopover=e=>{var t,i,o,n;if(!this.dropdownRef||this.disabled)return;const s=this.dropdownRef;s.open?(s.open=!1,null===(i=null===(t=s.listbox)||void 0===t?void 0:t.hidePopover)||void 0===i||i.call(t)):(e||(s.open=!0,null===(n=null===(o=s.listbox)||void 0===o?void 0:o.showPopover)||void 0===n||n.call(o)),this.dropdownRef.focus())},this.handleClear=e=>{e.stopPropagation(),this.dropdownRef.querySelectorAll("fluent-option").forEach((e=>{e.selected=!1})),this.showClearButton=!1,this.selectionForOverlay=this.multiple?[]:null,this.dropdownRef.value="",this.valueChanged.emit(this.multiple?[]:""),this.dropdownRef.focus()},this.handleKeyDown=e=>{var t,i,o;if(this.disabled||this.loading)return;if(("Backspace"===e.key||"Delete"===e.key)&&this.showClearButton&&this.clearable)return e.preventDefault(),e.stopPropagation(),void this.handleClear(e);if(this.multiple&&"Enter"===e.key){if(!this.dropdownRef||!this.dropdownRef.open)return;const t=this.dropdownRef;if(t&&Array.isArray(t.enabledOptions)&&"number"==typeof t.activeIndex){const i=t.enabledOptions[t.activeIndex];if(i&&!i.disabled){const t=i.value,o=this.findOptionByValue(t),n=void 0!==o?o:t,s=Array.isArray(this.selectionForOverlay)?[...this.selectionForOverlay]:this.getValuesAsArray(),r=this.getOptionValue(n),l=s.findIndex((e=>this.getOptionValue(e)===r));-1!==l?s.splice(l,1):s.push(n),this.selectionForOverlay=s,this.showClearButton=s.length>0,this.valueChanged.emit(s),e.preventDefault(),e.stopPropagation()}}return}if("Escape"===e.key){if(!this.dropdownRef)return;return void(this.dropdownRef.open&&(this.dropdownRef.open=!1,null===(i=null===(t=this.dropdownRef.listbox)||void 0===t?void 0:t.hidePopover)||void 0===i||i.call(t),e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation()))}if(e.ctrlKey||e.altKey||e.metaKey||e.key.length>1)return;clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer+=e.key;const n=null===(o=this.options)||void 0===o?void 0:o.findIndex((e=>{const t=this.resolveProp(e,this.optionLabel,!0),i=this.resolveProp(e,this.optionDisabled);return t&&!i&&String(t).toLowerCase().startsWith(this.typeaheadBuffer.toLowerCase())}));if(-1!==n){const e=this.dropdownRef,t=Array.from(this.dropdownRef.querySelectorAll("fluent-option"))[n];if(t&&e&&Array.isArray(e.enabledOptions)){const i=e.enabledOptions.indexOf(t);-1!==i&&(e.activeIndex=i,t.scrollIntoView({block:"nearest"}))}}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),1e3)},this.handleChange=e=>{if(e.stopPropagation(),this.multiple&&this.dropdownRef.selectedOptions){const e=Array.from(this.dropdownRef.selectedOptions).map((e=>{const t=this.findOptionByValue(e.value);return void 0!==t?t:e.value}));this.valueChanged.emit(e),this.showClearButton=e.length>0,this.selectionForOverlay=e}else{const e=this.dropdownRef.value,t=this.findOptionByValue(e),i=void 0!==t?t:e;this.valueChanged.emit(i),this.showClearButton=null!=e,this.selectionForOverlay=i}}}syncSelectionForOverlay(){this.selectionForOverlay=null!=this.value&&""!==this.value?this.value:this.multiple?[]:null}componentDidLoad(){this.patchDropdownShadow(),this.syncSelectionForOverlay(),this.valueHandler()}patchDropdownShadow(){var e;const t=null===(e=this.dropdownRef)||void 0===e?void 0:e.shadowRoot;if(!t)return;const i=new CSSStyleSheet;i.replaceSync('\n      .control { min-width: 0; }\n      :host([appearance="outline"]) .control,\n      :host([appearance="transparent"]) .control { margin: -1px 0; }\n    '),t.adoptedStyleSheets=[...t.adoptedStyleSheets,i]}valueHandler(){this.dropdownRef&&requestAnimationFrame((()=>{const e=this.dropdownRef.querySelectorAll("fluent-option");if(Array.isArray(this.value)){const t=this.value.map((e=>this.getOptionValue(e)));this.showClearButton=t.length>0,e.forEach((e=>{e.value&&(e.selected=t.includes(e.value))}))}else if(null!=this.value){const t=this.getOptionValue(this.value);this.showClearButton=!!t,e.forEach((e=>{e.value&&(e.selected=e.value===t)}))}else e.forEach((e=>{e.value&&(e.selected=!1)})),this.showClearButton=!1}))}resolveProp(e,t,i=!1){return"object"!=typeof e||null===e?i?e:void 0:"function"==typeof t?t(e):"string"==typeof t?e[t]:void 0}getOptionValue(e){const t=this.resolveProp(e,this.optionValue,!0);return null!=t?String(t):""}findOptionByValue(e){var t;return null===(t=this.options)||void 0===t?void 0:t.find((t=>this.getOptionValue(t)===e))}getValuesAsArray(){return Array.isArray(this.value)?[...this.value]:null!=this.value?[this.value]:[]}getOptionBadges(e){const t=this.resolveProp(e,this.optionBadges);return Array.isArray(t)?t:[]}getOptionGroup(e){if(!this.optionGroup)return;const t=this.resolveProp(e,this.optionGroup);return null!=t&&""!==t?String(t):void 0}getSelectedOverlayOptions(){const e=this.selectionForOverlay,t=e=>{var t;const i=this.getOptionValue(e);return null!==(t=this.findOptionByValue(i))&&void 0!==t?t:e};if(this.multiple){if(!Array.isArray(e)||0===e.length)return[];const i=e.map(t);return i.some((e=>this.getOptionBadges(e).length>0))?i:[]}if(null==e)return[];const i=t(e);return this.getOptionBadges(i).length>0?[i]:[]}renderBadges(e){return 0===e.length?null:o("span",{class:"option-badges"},e.map(((e,t)=>{var i,n,s;return o("udp-fluent-badge",{key:t,appearance:null!==(i=e.appearance)&&void 0!==i?i:"filled",color:e.color,shape:null!==(n=e.shape)&&void 0!==n?n:"circular",size:null!==(s=e.size)&&void 0!==s?s:"small",startIconName:e.startIconName,endIconName:e.endIconName},e.label)})))}render(){var e,t;const i=!!this.error,s=this.error||this.hint,r=this.getSelectedOverlayOptions(),l=r.length>0,a="underline"===this.appearance?"transparent":this.appearance;return o(n,{key:"50df70a796294b82aad1a961cd213bbb4ef0480e",class:{"has-error":i}},o("fluent-field",{key:"f424752cc9ed1f5e2c4525e562cee8feaff4e87f",class:{"no-message":!s&&!this.includeErrorPadding,"no-label":!this.label}},this.label&&o("fluent-label",{key:"6357f3c97ec8daf3c652a3fd9e67626740b1a034",slot:"label",disabled:this.disabled,onClick:()=>this.handleTogglePopover(!1),style:{paddingTop:"2px",paddingBottom:"2px"}},this.label,this.popupHint&&o("udp-tooltip",{key:"54bf2223c4813ea0a3b6219dd80192ce335475f3",content:this.popupHint,positioning:"above"},o("udp-fluent-icon",{key:"a9adfa504c930c6bd018639098bb5701e01e6626",name:"info",size:"xs",class:"popup-hint-icon"}))),o("div",{key:"ee145cd5bd31ca5e110fb65cd2617dd169b42dd6",slot:"input",class:{"input-wrapper":!0,"has-overlay":l}},o("fluent-dropdown",{key:"20b0f614cb02288f61feac07133f032cd2a4217c",type:"dropdown",name:this.name,appearance:a,size:this.controlSize,required:this.required,disabled:this.disabled,placeholder:this.placeholder,multiple:this.multiple,onChange:this.handleChange,onKeyDown:this.handleKeyDown,onFocusout:()=>this.inputBlur.emit(),onFocusin:()=>this.inputFocus.emit(),onInvalid:e=>e.preventDefault(),ref:e=>this.dropdownRef=e},o("fluent-listbox",{key:"0e069f111f08d400ef4ca397d4987488ba624be2"},this.loading&&o("fluent-option",{key:"d4b38c16bb861c1991ecd520d9ddc95b6bc711f7",disabled:!0,ref:e=>null==e?void 0:e.toggleAttribute("disabled",!0)},o("span",{key:"c8cc2f930af8ca94225ff18417ab1454fc093778"},"Loading..."),o("span",{key:"905fb8ec9aa854eb3c8483d7168a31a87ce84956",slot:"indicator"})),!this.loading&&0===(null===(e=this.options)||void 0===e?void 0:e.length)&&o("fluent-option",{key:"7c115d63198f63874ff73e118026f6912f419c90",disabled:!0,value:"empty",ref:e=>null==e?void 0:e.toggleAttribute("disabled",!0)},"No options available"),!this.loading&&(null===(t=this.options)||void 0===t?void 0:t.length)>0&&(()=>{const e=[];let t;return this.options.forEach(((i,n)=>{const s=this.getOptionGroup(i);s&&s!==t&&(e.push(o("fluent-option",{key:`__group_${s}`,class:"option-group-header",disabled:!0,"aria-hidden":"true",ref:e=>null==e?void 0:e.toggleAttribute("disabled",!0)},s)),t=s);const r=this.resolveProp(i,this.optionLabel,!0),l=this.resolveProp(i,this.optionValue,!0),a=this.resolveProp(i,this.optionDisabled),d=this.resolveProp(i,this.optionIcon),p=this.getOptionBadges(i),c=null!=l?String(l):"";e.push(o("fluent-option",{key:n,disabled:!!a,value:c,ref:e=>null==e?void 0:e.toggleAttribute("disabled",!!a)},d&&"start"===this.iconPosition&&o("span",{slot:"start",class:"option-icon-slot"},o("udp-fluent-icon",{name:d,size:"sm"})),r,d&&"end"===this.iconPosition&&o("span",{class:"option-icon-end",style:{pointerEvents:"none",marginLeft:"4px"}},o("udp-fluent-icon",{name:d,size:"sm"})),this.renderBadges(p)))})),e})()),o("div",{key:"4d73df096ec43408424d04d8a176c19ee0244bd3",slot:"indicator",class:"indicator-wrapper"},o("udp-fluent-icon-button",{key:"4a70fa9e3f928417fe9e57b92ca7d11a0b2d99f5",class:{"clear-button":!0,"is-visible":this.showClearButton&&!this.disabled&&this.clearable},slot:"indicator",iconName:"dismiss",appearance:"transparent",size:"small",onClick:this.handleClear,onMouseDown:e=>e.preventDefault(),ariaLabel:"Clear",tabIndex:-1}),o("udp-fluent-icon",{key:"4d11b1ed4cc8ffea3a96cb1d5d3d2b22aa022cb0",name:"chevron-down",size:"sm",class:"chevron-down",onClick:e=>{e.stopPropagation(),this.handleTogglePopover(!1)}}))),l&&o("div",{key:"1fb5c41ad21a75c5b58ac6398f799d0a40f80de5",class:{"selected-overlay":!0,multi:r.length>1},"aria-hidden":"true"},r.map(((e,t)=>o("span",{class:"selected-item",key:this.getOptionValue(e)||t},t>0&&o("span",{class:"selected-separator"},", "),o("span",{class:"selected-label"},this.resolveProp(e,this.optionLabel,!0)),this.renderBadges(this.getOptionBadges(e))))))),o("div",{key:"26f160c5e649f3d7ebb726c92c24511e322b656a",class:{"message-wrapper":!0,includeErrorPadding:this.includeErrorPadding},slot:"message",onClick:()=>this.handleTogglePopover(!0)},o("udp-text",{key:"69af6f8f00d3703b0d42d93988d0568ee7783967",variant:"caption1",class:{message:!0,error:i}},s))))}static get delegatesFocus(){return!0}static get watchers(){return{value:[{syncSelectionForOverlay:0},{valueHandler:0}],options:[{valueHandler:0}]}}static get style(){return':host{display:block;width:100%}fluent-field{width:100%;grid-template-columns:minmax(0, 1fr)}fluent-dropdown{width:100%;max-width:100%}fluent-dropdown[appearance="outline"],fluent-dropdown[appearance="transparent"]{--borderRadiusMedium:5px}fluent-dropdown>button,fluent-dropdown>input{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}fluent-dropdown[appearance="filled-darker"],fluent-dropdown[appearance="filled-lighter"]{--spacingVerticalSNudge:5px;box-shadow:var(--shadow2);border-radius:var(--borderRadiusMedium)}fluent-dropdown[appearance="filled-darker"][size=\'small\'],fluent-dropdown[appearance="filled-lighter"][size=\'small\']{--spacingVerticalXS:3px}fluent-dropdown[appearance="outline"][size=\'large\'],fluent-dropdown[appearance="transparent"][size=\'large\']{--spacingVerticalS:9px}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-field.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}.clear-button{display:none;color:var(--colorNeutralForeground3)}.clear-button.is-visible{display:inline-flex;margin-top:-2px;margin-bottom:-2px}.indicator-wrapper{display:flex;align-items:center}fluent-dropdown[size=\'small\'] .indicator-wrapper{height:16px}.message{color:var(--colorNeutralForeground3)}.message-wrapper{display:flex;flex-direction:column;width:100%}.message-wrapper.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-dropdown[appearance="outline"]:focus-within{--colorStrokeFocus1:var(--colorNeutralStroke1);--colorStrokeFocus2:transparent}fluent-dropdown[appearance="filled-darker"]:focus-within,fluent-dropdown[appearance="filled-lighter"]:focus-within,fluent-dropdown[appearance="transparent"]:focus-within{--colorStrokeFocus1:transparent;--colorStrokeFocus2:transparent}:host(.has-error) fluent-dropdown:not(:focus-within){--colorNeutralStroke1:var(--colorPaletteRedBorder2);--colorNeutralStroke1Hover:var(--colorPaletteRedBorder2);--colorNeutralStrokeAccessible:var(--colorPaletteRedBorder2);--colorNeutralStrokeAccessibleHover:var(--colorPaletteRedBorder2)}fluent-option:state(active){border:2px solid var(--colorNeutralStrokeAccessible)}::slotted([slot="start"]){display:inline-flex;align-items:center;margin-right:0.5em}::slotted(.option-icon-slot){display:inline-flex;align-items:center;justify-content:center;width:1.5em}::slotted(.option-icon-end){display:inline-flex;align-items:center;justify-content:center;width:1.5em;margin-left:0.5em}fluent-option{min-height:32px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}fluent-option::part(content){display:flex;align-items:center;gap:6px}.option-badges{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;pointer-events:none}fluent-option.option-group-header{pointer-events:none;color:var(--colorNeutralForeground2);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);text-transform:uppercase;letter-spacing:0.04em;line-height:24px;opacity:1;padding-top:10px}fluent-option.option-group-header:first-child{padding-top:0}fluent-option.option-group-header::part(content){min-height:24px;align-items:center}fluent-option.option-group-header:state(active){border:none}.input-wrapper{position:relative;display:block;width:100%}.selected-overlay{position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:60px;display:flex;align-items:center;gap:6px;padding-inline-start:10px;pointer-events:none;overflow:hidden;font:inherit;color:var(--colorNeutralForeground1);z-index:1}.selected-overlay .selected-item{display:inline-flex;align-items:center;gap:6px;min-width:0}.selected-overlay .selected-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.selected-overlay.multi .selected-item,.selected-overlay.multi .selected-label{flex-shrink:0}.selected-overlay.multi .selected-label{overflow:visible;text-overflow:clip}.selected-overlay .selected-separator{flex-shrink:0}.input-wrapper.has-overlay fluent-dropdown>button{color:transparent}'}},[17,"udp-fluent-dropdown",{value:[8],name:[1],options:[16],optionLabel:[1,"option-label"],optionValue:[1,"option-value"],optionDisabled:[1,"option-disabled"],optionIcon:[1,"option-icon"],iconPosition:[1,"icon-position"],optionBadges:[1,"option-badges"],optionGroup:[1,"option-group"],appearance:[1],controlSize:[1,"control-size"],disabled:[4],required:[4],loading:[4],label:[1],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"],placeholder:[1],multiple:[4],autofocus:[4],clearable:[4],showClearButton:[32],selectionForOverlay:[32]},void 0,{value:[{syncSelectionForOverlay:0},{valueHandler:0}],options:[{valueHandler:0}]}]);function f(){"undefined"!=typeof customElements&&["udp-fluent-dropdown","udp-fluent-badge","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text","udp-tooltip"].forEach((e=>{switch(e){case"udp-fluent-dropdown":customElements.get(s(e))||customElements.define(s(e),h);break;case"udp-fluent-badge":customElements.get(s(e))||r();break;case"udp-fluent-button":customElements.get(s(e))||l();break;case"udp-fluent-icon":customElements.get(s(e))||a();break;case"udp-fluent-icon-button":customElements.get(s(e))||d();break;case"udp-spinner":customElements.get(s(e))||p();break;case"udp-text":customElements.get(s(e))||c();break;case"udp-tooltip":customElements.get(s(e))||u()}}))}export{h as U,f as d}
+import{p as e,H as t,c as i,h as o,d as n,t as s}from"./index2.js";import"@fluentui/web-components/dropdown.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import"@fluentui/web-components/option.js";import"@fluentui/web-components/listbox.js";import{d as l}from"./udp-fluent-badge2.js";import{d as r}from"./udp-fluent-button2.js";import{d as a}from"./udp-fluent-icon2.js";import{d}from"./udp-fluent-icon-button2.js";import{d as p}from"./udp-spinner2.js";import{d as c}from"./udp-text2.js";import{d as u}from"./udp-tooltip2.js";const h=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.options=[],this.optionLabel="label",this.optionValue="value",this.optionDisabled="disabled",this.optionIcon="icon",this.iconPosition="start",this.optionBadges="badges",this.optionGroup="group",this.appearance="outline",this.controlSize="medium",this.disabled=!1,this.required=!1,this.loading=!1,this.includeErrorPadding=!0,this.multiple=!1,this.autofocus=!1,this.clearable=!1,this.valueAs="option",this.showClearButton=!1,this.selectionForOverlay=null,this.typeaheadBuffer="",this.handleTogglePopover=e=>{var t,i,o,n;if(!this.dropdownRef||this.disabled)return;const s=this.dropdownRef;s.open?(s.open=!1,null===(i=null===(t=s.listbox)||void 0===t?void 0:t.hidePopover)||void 0===i||i.call(t)):(e||(s.open=!0,null===(n=null===(o=s.listbox)||void 0===o?void 0:o.showPopover)||void 0===n||n.call(o)),this.dropdownRef.focus())},this.handleClear=e=>{e.stopPropagation(),this.dropdownRef.querySelectorAll("fluent-option").forEach((e=>{e.selected=!1})),this.showClearButton=!1,this.selectionForOverlay=this.multiple?[]:null,this.dropdownRef.value="",this.valueChanged.emit(this.multiple?[]:""),this.dropdownRef.focus()},this.handleKeyDown=e=>{var t,i,o;if(this.disabled||this.loading)return;if(("Backspace"===e.key||"Delete"===e.key)&&this.showClearButton&&this.clearable)return e.preventDefault(),e.stopPropagation(),void this.handleClear(e);if(this.multiple&&"Enter"===e.key){if(!this.dropdownRef||!this.dropdownRef.open)return;const t=this.dropdownRef;if(t&&Array.isArray(t.enabledOptions)&&"number"==typeof t.activeIndex){const i=t.enabledOptions[t.activeIndex];if(i&&!i.disabled){const t=i.value,o=this.findOptionByValue(t),n=void 0!==o?o:t,s=Array.isArray(this.selectionForOverlay)?[...this.selectionForOverlay]:this.getValuesAsArray(),l=this.getOptionValue(n),r=s.findIndex((e=>this.getOptionValue(e)===l));-1!==r?s.splice(r,1):s.push(n),this.selectionForOverlay=s,this.showClearButton=s.length>0,this.valueChanged.emit(s.map((e=>this.toEmitValue(e)))),e.preventDefault(),e.stopPropagation()}}return}if("Escape"===e.key){if(!this.dropdownRef)return;return void(this.dropdownRef.open&&(this.dropdownRef.open=!1,null===(i=null===(t=this.dropdownRef.listbox)||void 0===t?void 0:t.hidePopover)||void 0===i||i.call(t),e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation()))}if(e.ctrlKey||e.altKey||e.metaKey||e.key.length>1)return;clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer+=e.key;const n=null===(o=this.options)||void 0===o?void 0:o.findIndex((e=>{const t=this.resolveProp(e,this.optionLabel,!0),i=this.resolveProp(e,this.optionDisabled);return t&&!i&&String(t).toLowerCase().startsWith(this.typeaheadBuffer.toLowerCase())}));if(-1!==n){const e=this.dropdownRef,t=Array.from(this.dropdownRef.querySelectorAll("fluent-option"))[n];if(t&&e&&Array.isArray(e.enabledOptions)){const i=e.enabledOptions.indexOf(t);-1!==i&&(e.activeIndex=i,t.scrollIntoView({block:"nearest"}))}}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),1e3)},this.handleChange=e=>{if(e.stopPropagation(),this.multiple&&this.dropdownRef.selectedOptions){const e=Array.from(this.dropdownRef.selectedOptions).map((e=>{const t=this.findOptionByValue(e.value);return void 0!==t?t:e.value}));this.valueChanged.emit(e.map((e=>this.toEmitValue(e)))),this.showClearButton=e.length>0,this.selectionForOverlay=e}else{const e=this.dropdownRef.value,t=this.findOptionByValue(e),i=void 0!==t?t:e;this.valueChanged.emit(this.toEmitValue(i)),this.showClearButton=null!=e,this.selectionForOverlay=i}}}syncSelectionForOverlay(){this.selectionForOverlay=null!=this.value&&""!==this.value?this.value:this.multiple?[]:null}componentDidLoad(){this.patchDropdownShadow(),this.syncSelectionForOverlay(),this.valueHandler()}patchDropdownShadow(){var e;const t=null===(e=this.dropdownRef)||void 0===e?void 0:e.shadowRoot;if(!t)return;const i=new CSSStyleSheet;i.replaceSync('\n      .control { min-width: 0; }\n      :host([appearance="outline"]) .control,\n      :host([appearance="transparent"]) .control { margin: -1px 0; }\n    '),t.adoptedStyleSheets=[...t.adoptedStyleSheets,i]}valueHandler(){this.dropdownRef&&requestAnimationFrame((()=>{const e=this.dropdownRef.querySelectorAll("fluent-option");if(Array.isArray(this.value)){const t=this.value.map((e=>this.getOptionValue(e)));this.showClearButton=t.length>0,e.forEach((e=>{e.value&&(e.selected=t.includes(e.value))}))}else if(null!=this.value){const t=this.getOptionValue(this.value);this.showClearButton=!!t,e.forEach((e=>{e.value&&(e.selected=e.value===t)}))}else e.forEach((e=>{e.value&&(e.selected=!1)})),this.showClearButton=!1}))}resolveProp(e,t,i=!1){return"object"!=typeof e||null===e?i?e:void 0:"function"==typeof t?t(e):"string"==typeof t?e[t]:void 0}getOptionValue(e){const t=this.resolveProp(e,this.optionValue,!0);return null!=t?String(t):""}findOptionByValue(e){var t;return null===(t=this.options)||void 0===t?void 0:t.find((t=>this.getOptionValue(t)===e))}toEmitValue(e){return"value"===this.valueAs?this.getOptionValue(e):e}getValuesAsArray(){return Array.isArray(this.value)?[...this.value]:null!=this.value?[this.value]:[]}getOptionBadges(e){const t=this.resolveProp(e,this.optionBadges);return Array.isArray(t)?t:[]}getOptionGroup(e){if(!this.optionGroup)return;const t=this.resolveProp(e,this.optionGroup);return null!=t&&""!==t?String(t):void 0}getSelectedOverlayOptions(){const e=this.selectionForOverlay,t=e=>{var t;const i=this.getOptionValue(e);return null!==(t=this.findOptionByValue(i))&&void 0!==t?t:e};if(this.multiple){if(!Array.isArray(e)||0===e.length)return[];const i=e.map(t);return i.some((e=>this.getOptionBadges(e).length>0))?i:[]}if(null==e)return[];const i=t(e);return this.getOptionBadges(i).length>0?[i]:[]}renderBadges(e){return 0===e.length?null:o("span",{class:"option-badges"},e.map(((e,t)=>{var i,n,s;return o("udp-fluent-badge",{key:t,appearance:null!==(i=e.appearance)&&void 0!==i?i:"filled",color:e.color,shape:null!==(n=e.shape)&&void 0!==n?n:"circular",size:null!==(s=e.size)&&void 0!==s?s:"small",startIconName:e.startIconName,endIconName:e.endIconName},e.label)})))}render(){var e,t;const i=!!this.error,s=this.error||this.hint,l=this.getSelectedOverlayOptions(),r=l.length>0,a="underline"===this.appearance?"transparent":this.appearance;return o(n,{key:"2739e491826ba8d094f3ecc454c888d4815f0bc9",class:{"has-error":i}},o("fluent-field",{key:"49d9f2af0b1b490ba19cb8ffd76f9e81d80d40e4",class:{"no-message":!s&&!this.includeErrorPadding,"no-label":!this.label}},this.label&&o("fluent-label",{key:"db3f23065b207e958f1885a93f3f9c3607c32c18",slot:"label",disabled:this.disabled,onClick:()=>this.handleTogglePopover(!1),style:{paddingTop:"2px",paddingBottom:"2px"}},this.label,this.popupHint&&o("udp-tooltip",{key:"cd9957075c3688082d4b21046b77265bbe8e77b3",content:this.popupHint,positioning:"above"},o("udp-fluent-icon",{key:"0198aed441b9c9a1776f0fa3d6d8c4c56b08fe37",name:"info",size:"xs",class:"popup-hint-icon"}))),o("div",{key:"c2ada338eda46b6c44d3c8bd03e370e08d79df1c",slot:"input",class:{"input-wrapper":!0,"has-overlay":r}},o("fluent-dropdown",{key:"edbb729b64ca2d23160a9b094ae3e15aee5fad49",type:"dropdown",name:this.name,appearance:a,size:this.controlSize,required:this.required,disabled:this.disabled,placeholder:this.placeholder,multiple:this.multiple,onChange:this.handleChange,onKeyDown:this.handleKeyDown,onFocusout:()=>this.inputBlur.emit(),onFocusin:()=>this.inputFocus.emit(),onInvalid:e=>e.preventDefault(),ref:e=>this.dropdownRef=e},o("fluent-listbox",{key:"648c741cf3f5676f0048e22afe355626cf8f0cb4"},this.loading&&o("fluent-option",{key:"1dd8f2d7b137c0921bb6393489604fef65b88b63",disabled:!0,ref:e=>null==e?void 0:e.toggleAttribute("disabled",!0)},o("span",{key:"1cd40a943df80a3e4e32279939451f2a884fa611"},"Loading..."),o("span",{key:"b00ec9c25a83e8ca28c4a7c350750e07cc323d00",slot:"indicator"})),!this.loading&&0===(null===(e=this.options)||void 0===e?void 0:e.length)&&o("fluent-option",{key:"9e459a8416fe0e063196c47ddbca0b2c16859c9e",disabled:!0,value:"empty",ref:e=>null==e?void 0:e.toggleAttribute("disabled",!0)},"No options available"),!this.loading&&(null===(t=this.options)||void 0===t?void 0:t.length)>0&&(()=>{const e=[];let t;return this.options.forEach(((i,n)=>{const s=this.getOptionGroup(i);s&&s!==t&&(e.push(o("fluent-option",{key:`__group_${s}`,class:"option-group-header",disabled:!0,"aria-hidden":"true",ref:e=>null==e?void 0:e.toggleAttribute("disabled",!0)},s)),t=s);const l=this.resolveProp(i,this.optionLabel,!0),r=this.resolveProp(i,this.optionValue,!0),a=this.resolveProp(i,this.optionDisabled),d=this.resolveProp(i,this.optionIcon),p=this.getOptionBadges(i),c=null!=r?String(r):"";e.push(o("fluent-option",{key:n,disabled:!!a,value:c,ref:e=>null==e?void 0:e.toggleAttribute("disabled",!!a)},d&&"start"===this.iconPosition&&o("span",{slot:"start",class:"option-icon-slot"},o("udp-fluent-icon",{name:d,size:"sm"})),l,d&&"end"===this.iconPosition&&o("span",{class:"option-icon-end",style:{pointerEvents:"none",marginLeft:"4px"}},o("udp-fluent-icon",{name:d,size:"sm"})),this.renderBadges(p)))})),e})()),o("div",{key:"759461d74da6528e4b33be11cc4a3b80c8f80789",slot:"indicator",class:"indicator-wrapper"},o("udp-fluent-icon-button",{key:"7f43ab70441f994632c89fec4f42772a679fe423",class:{"clear-button":!0,"is-visible":this.showClearButton&&!this.disabled&&this.clearable},slot:"indicator",iconName:"dismiss",appearance:"transparent",size:"small",onClick:this.handleClear,onMouseDown:e=>e.preventDefault(),ariaLabel:"Clear",tabIndex:-1}),o("udp-fluent-icon",{key:"59f53079ac480470026413b158154e5e3e4ca505",name:"chevron-down",size:"sm",class:"chevron-down",onClick:e=>{e.stopPropagation(),this.handleTogglePopover(!1)}}))),r&&o("div",{key:"9f2c12555d194f036e0a81618cb2ae77a595eac0",class:{"selected-overlay":!0,multi:l.length>1},"aria-hidden":"true"},l.map(((e,t)=>o("span",{class:"selected-item",key:this.getOptionValue(e)||t},t>0&&o("span",{class:"selected-separator"},", "),o("span",{class:"selected-label"},this.resolveProp(e,this.optionLabel,!0)),this.renderBadges(this.getOptionBadges(e))))))),o("div",{key:"f336e3cc721c256dae4de0da6e05f87ca3455c43",class:{"message-wrapper":!0,includeErrorPadding:this.includeErrorPadding},slot:"message",onClick:()=>this.handleTogglePopover(!0)},o("udp-text",{key:"bf2bc3358bee4302fc663d0a06edf61eb4a11f13",variant:"caption1",class:{message:!0,error:i}},s))))}static get delegatesFocus(){return!0}static get watchers(){return{value:[{syncSelectionForOverlay:0},{valueHandler:0}],options:[{valueHandler:0}]}}static get style(){return':host{display:block;width:100%}fluent-field{width:100%;grid-template-columns:minmax(0, 1fr)}fluent-dropdown{width:100%;max-width:100%}fluent-dropdown[appearance="outline"],fluent-dropdown[appearance="transparent"]{--borderRadiusMedium:5px}fluent-dropdown>button,fluent-dropdown>input{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}fluent-dropdown[appearance="filled-darker"],fluent-dropdown[appearance="filled-lighter"]{--spacingVerticalSNudge:5px;box-shadow:var(--shadow2);border-radius:var(--borderRadiusMedium)}fluent-dropdown[appearance="filled-darker"][size=\'small\'],fluent-dropdown[appearance="filled-lighter"][size=\'small\']{--spacingVerticalXS:3px}fluent-dropdown[appearance="outline"][size=\'large\'],fluent-dropdown[appearance="transparent"][size=\'large\']{--spacingVerticalS:9px}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-field.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}.clear-button{display:none;color:var(--colorNeutralForeground3)}.clear-button.is-visible{display:inline-flex;margin-top:-2px;margin-bottom:-2px}.indicator-wrapper{display:flex;align-items:center}fluent-dropdown[size=\'small\'] .indicator-wrapper{height:16px}.message{color:var(--colorNeutralForeground3)}.message-wrapper{display:flex;flex-direction:column;width:100%}.message-wrapper.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-dropdown[appearance="outline"]:focus-within{--colorStrokeFocus1:var(--colorNeutralStroke1);--colorStrokeFocus2:transparent}fluent-dropdown[appearance="filled-darker"]:focus-within,fluent-dropdown[appearance="filled-lighter"]:focus-within,fluent-dropdown[appearance="transparent"]:focus-within{--colorStrokeFocus1:transparent;--colorStrokeFocus2:transparent}:host(.has-error) fluent-dropdown:not(:focus-within){--colorNeutralStroke1:var(--colorPaletteRedBorder2);--colorNeutralStroke1Hover:var(--colorPaletteRedBorder2);--colorNeutralStrokeAccessible:var(--colorPaletteRedBorder2);--colorNeutralStrokeAccessibleHover:var(--colorPaletteRedBorder2)}fluent-option:state(active){border:2px solid var(--colorNeutralStrokeAccessible)}::slotted([slot="start"]){display:inline-flex;align-items:center;margin-right:0.5em}::slotted(.option-icon-slot){display:inline-flex;align-items:center;justify-content:center;width:1.5em}::slotted(.option-icon-end){display:inline-flex;align-items:center;justify-content:center;width:1.5em;margin-left:0.5em}fluent-option{min-height:32px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}fluent-option::part(content){display:flex;align-items:center;gap:6px}.option-badges{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;pointer-events:none}fluent-option.option-group-header{pointer-events:none;color:var(--colorNeutralForeground2);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);text-transform:uppercase;letter-spacing:0.04em;line-height:24px;opacity:1;padding-top:10px}fluent-option.option-group-header:first-child{padding-top:0}fluent-option.option-group-header::part(content){min-height:24px;align-items:center}fluent-option.option-group-header:state(active){border:none}.input-wrapper{position:relative;display:block;width:100%}.selected-overlay{position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:60px;display:flex;align-items:center;gap:6px;padding-inline-start:10px;pointer-events:none;overflow:hidden;font:inherit;color:var(--colorNeutralForeground1);z-index:1}.selected-overlay .selected-item{display:inline-flex;align-items:center;gap:6px;min-width:0}.selected-overlay .selected-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.selected-overlay.multi .selected-item,.selected-overlay.multi .selected-label{flex-shrink:0}.selected-overlay.multi .selected-label{overflow:visible;text-overflow:clip}.selected-overlay .selected-separator{flex-shrink:0}.input-wrapper.has-overlay fluent-dropdown>button{color:transparent}'}},[17,"udp-fluent-dropdown",{value:[8],name:[1],options:[16],optionLabel:[1,"option-label"],optionValue:[1,"option-value"],optionDisabled:[1,"option-disabled"],optionIcon:[1,"option-icon"],iconPosition:[1,"icon-position"],optionBadges:[1,"option-badges"],optionGroup:[1,"option-group"],appearance:[1],controlSize:[1,"control-size"],disabled:[4],required:[4],loading:[4],label:[1],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"],placeholder:[1],multiple:[4],autofocus:[4],clearable:[4],valueAs:[1,"value-as"],showClearButton:[32],selectionForOverlay:[32]},void 0,{value:[{syncSelectionForOverlay:0},{valueHandler:0}],options:[{valueHandler:0}]}]);function f(){"undefined"!=typeof customElements&&["udp-fluent-dropdown","udp-fluent-badge","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text","udp-tooltip"].forEach((e=>{switch(e){case"udp-fluent-dropdown":customElements.get(s(e))||customElements.define(s(e),h);break;case"udp-fluent-badge":customElements.get(s(e))||l();break;case"udp-fluent-button":customElements.get(s(e))||r();break;case"udp-fluent-icon":customElements.get(s(e))||a();break;case"udp-fluent-icon-button":customElements.get(s(e))||d();break;case"udp-spinner":customElements.get(s(e))||p();break;case"udp-text":customElements.get(s(e))||c();break;case"udp-tooltip":customElements.get(s(e))||u()}}))}export{h as U,f as d}

package/dist/components/udp-fluent-file-input.js

@@ -1,2 +1,2 @@
 import "../stencil-library/stencil-library.css";
-import{p as e,H as t,c as i,h as o,d as n,t as r}from"./index2.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as s}from"./udp-fluent-badge2.js";import{d as a}from"./udp-fluent-button2.js";import{d as l}from"./udp-fluent-icon2.js";import{d as c}from"./udp-fluent-icon-button2.js";import{d}from"./udp-spinner2.js";import{d as u}from"./udp-text2.js";function p(e){return"pending"===e.kind?e.file.name:e.name}function h(e){return(e||"").trim().toLowerCase()}function f(e){if("pending"===e.kind){const t=e.file;return`pending::${h(t.name)}::${t.size}::${t.lastModified}`}return"stored::"+e.driveFileId}function b(e){var t;const i=null===(t=e.dataTransfer)||void 0===t?void 0:t.types;return!!i&&Array.from(i).includes("Files")}function m(e,t,i,o,n,r){if(t.accept&&!function(e,t){if(!t)return!0;const i=t.split(",").map((e=>e.trim())).filter((e=>e.length>0));if(0===i.length)return!0;const o=(e.type||"").toLowerCase(),n=(e.name||"").toLowerCase();for(const e of i){const t=e.toLowerCase();if(t.startsWith(".")){if(n.endsWith(t))return!0}else if(t.endsWith("/*")){const e=t.slice(0,-1);if(o.startsWith(e))return!0}else if(o===t)return!0}return!1}(e,t.accept))return"mime";if(null!=t.maxFileSizeBytes&&e.size>t.maxFileSizeBytes)return"size";if(!r&&n<=0)return"maxFiles";const s=h(e.name);return!r&&o.has(s)||i.has(s)?"duplicate":null}function g(e){if(!e)return null;const t=new Date(e);return Number.isNaN(t.getTime())?null:new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(t)}function x(e,t){const i=URL.createObjectURL(e),o=document.createElement("a");o.href=i,o.download=t,o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o),setTimeout((()=>URL.revokeObjectURL(i)),1e3)}const v=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.fileRejected=i(this,"fileRejected",7),this.downloadRequested=i(this,"downloadRequested",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.view="list",this.value=[],this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.hideDragAndDrop=!1,this.hideButton=!1,this.displayUploadTime=!1,this.appearance="outline",this.disableLightbox=!1,this.items=[],this.isDragging=!1,this.fieldHasFocus=!1,this.lightboxIndex=-1,this.previews=new Map,this.lightboxTrigger=null,this.requestDownload=e=>{this.disabled||("pending"!==e.kind?"function"==typeof this.loadStoredFile?this.loadStoredFile(e).then((t=>{x(t instanceof File?t:new File([t],e.name,{type:t.type||"application/octet-stream"}),e.name)})).catch((()=>{})):this.downloadRequested.emit(e):x(e.file,e.file.name))},this.handleBrowseClick=e=>{var t;this.disabled||this.readonly||(e.preventDefault(),e.stopPropagation(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleInputChange=e=>{const t=e.target;t.files&&t.files.length>0&&this.intakeFiles(t.files),t.value=""},this.handleDragEnter=e=>{this.disabled||this.readonly||this.hideDragAndDrop||b(e)&&(e.preventDefault(),e.stopPropagation(),this.isDragging=!0)},this.handleDragOver=e=>{this.disabled||this.readonly||this.hideDragAndDrop||b(e)&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy"))},this.handleDragLeave=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation();const t=e.currentTarget,i=e.relatedTarget;t&&i&&t.contains(i)||(this.isDragging=!1)},this.handleDrop=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation(),this.isDragging=!1;const t=e.dataTransfer;t&&t.files&&t.files.length>0&&this.intakeFiles(t.files)},this.handleDropZoneKeyDown=e=>{var t;this.disabled||this.readonly||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleFieldFocusIn=()=>{this.fieldHasFocus||(this.fieldHasFocus=!0,this.inputFocus.emit())},this.handleFieldFocusOut=e=>{const t=e.relatedTarget,i=e.currentTarget;t&&i&&i.contains(t)||this.fieldHasFocus&&(this.fieldHasFocus=!1,this.inputBlur.emit())},this.handleLightboxKeyDown=e=>{"ArrowRight"===e.key?(e.preventDefault(),this.navigateLightbox(1)):"ArrowLeft"===e.key&&(e.preventDefault(),this.navigateLightbox(-1))},this.handleBackdropClick=e=>{e.target===e.currentTarget&&this.closeLightbox()},this.handleDialogClose=()=>{var e;this.lightboxIndex>=0&&(this.lightboxIndex=-1),null===(e=this.lightboxTrigger)||void 0===e||e.focus(),this.lightboxTrigger=null}}componentWillLoad(){this.items=Array.isArray(this.value)?this.value:[],"gallery"===this.view&&this.syncPreviews(this.items)}onValueChange(e){const t=Array.isArray(e)?e:[];t!==this.items&&(this.items=t,"gallery"===this.view&&this.syncPreviews(t))}onViewChange(e){"gallery"===e?this.syncPreviews(this.items):(this.clearPreviews(),this.lightboxIndex=-1)}disconnectedCallback(){this.clearPreviews()}clearPreviews(){this.previews.forEach((e=>{e.revokable&&e.url&&URL.revokeObjectURL(e.url)})),this.previews=new Map}syncPreviews(e){const t=new Set,i=new Map(this.previews);for(const o of e){const e=f(o);t.add(e),i.has(e)||i.set(e,this.createPreview(o))}for(const[e,o]of Array.from(i.entries()))t.has(e)||(o.revokable&&o.url&&URL.revokeObjectURL(o.url),i.delete(e));this.previews=i}createPreview(e){if("pending"===e.kind)return{url:URL.createObjectURL(e.file),loading:!1,revokable:!0,status:"ready"};if("function"!=typeof this.loadStoredFile)return{url:null,loading:!1,revokable:!1,status:"unavailable"};const t={url:null,loading:!0,revokable:!1,status:"loading"},i=f(e);return this.loadStoredFile(e).then((e=>{const o=e instanceof Blob?e:new Blob([e]),n=URL.createObjectURL(o);this.previews.get(i)===t?this.previews=new Map(this.previews).set(i,{url:n,loading:!1,revokable:!0,status:"ready"}):URL.revokeObjectURL(n)})).catch((()=>{this.previews.get(i)===t&&(this.previews=new Map(this.previews).set(i,Object.assign(Object.assign({},t),{loading:!1,status:"error"})))})),t}intakeFiles(e){if(this.disabled||this.readonly)return;const t=function(e,t,i){const o=Array.from(e),n=[],r=[],s=new Set,a=new Set(t.map((e=>h(p(e)))));let l=null==i.maxFiles?1/0:Math.max(0,i.maxFiles-t.length);const c=1===i.maxFiles,d=(new Date).toISOString();for(const e of o){const t=m(e,i,s,a,l,c);t?r.push({file:e,reason:t}):(s.add(h(e.name)),n.push({kind:"pending",file:e,uploadedAt:d}),l-=1)}return 0===n.length?{accepted:n,rejected:r,next:null}:{accepted:n,rejected:r,next:c?n:[...t,...n]}}(e,this.items,{accept:this.accept,maxFiles:this.maxFiles,maxFileSizeBytes:this.maxFileSizeBytes});t.rejected.forEach((e=>this.fileRejected.emit(e))),t.next&&this.commit(t.next)}commit(e){this.items=e,"gallery"===this.view&&this.syncPreviews(e),this.valueChanged.emit(e)}removeAt(e){if(this.disabled||this.readonly)return;if(e<0||e>=this.items.length)return;const t=this.items.slice();t.splice(e,1),this.commit(t)}openLightbox(e,t){this.disableLightbox||e<0||e>=this.items.length||(this.lightboxIndex=e,this.lightboxTrigger=null!=t?t:null,requestAnimationFrame((()=>{this.dialogRef&&!this.dialogRef.open&&this.dialogRef.showModal()})))}closeLightbox(){var e;this.lightboxIndex<0||(this.lightboxIndex=-1,(null===(e=this.dialogRef)||void 0===e?void 0:e.open)&&this.dialogRef.close())}navigateLightbox(e){if(this.lightboxIndex<0)return;const t=this.items.length;0!==t&&(this.lightboxIndex=(this.lightboxIndex+e+t)%t)}render(){const e=!!this.error,t=this.error||this.hint,i=!t&&!this.includeErrorPadding,r=1!==this.maxFiles,s=this.items.length>0,a=!(this.readonly||null!=this.maxFiles&&1!==this.maxFiles&&this.items.length>=this.maxFiles);return o(n,{key:"72e0adf855126be24a828e5d196e2d8917137b3b",class:{"has-error":e,["view-"+this.view]:!0,["appearance-"+this.appearance]:!0,disabled:this.disabled,readonly:this.readonly}},o("fluent-field",{key:"3defd0f86d964201f8470bc6ef69c62bce6388e4",class:{"no-message":i}},o("div",{key:"4e8f09739d8db8ad756a049838594229e812460a",slot:"input",class:"root"},this.label&&o("fluent-label",{key:"b12d4baf70aeeb7530597db4f663b8c8a1b0fd8c",class:"field-label",required:this.required,disabled:this.disabled},this.label),o("input",{key:"6b35002df8db2a1f653f5aac63d3b42ade9a877e",ref:e=>this.fileInputRef=e,type:"file",class:"hidden-input",name:this.name,accept:this.accept,multiple:r,disabled:this.disabled||this.readonly,onChange:this.handleInputChange,onClick:e=>e.stopPropagation()}),this.renderDropContainer({hasFiles:s,showDropZone:a,allowMultiple:r})),o("udp-text",{key:"b382f1802365a7330fa284eea8c26c388010ab2a",slot:"message",variant:"caption1",class:{message:!0,error:e,"include-error-padding":this.includeErrorPadding}},t)),"gallery"===this.view&&o("dialog",{key:"f50c537ae4a75d6d9e2b56dd8e4cfc41fca05ab0",class:"lightbox",ref:e=>this.dialogRef=e,onClose:this.handleDialogClose,onClick:this.handleBackdropClick,onKeyDown:this.handleLightboxKeyDown},this.lightboxIndex>=0&&this.renderLightboxContent()))}renderDropContainer(e){const{hasFiles:t,showDropZone:i,allowMultiple:n}=e,r=!this.hideDragAndDrop&&!this.readonly;return o("div",Object.assign({class:{"drop-container":!0,dragging:this.isDragging,"has-files":t,"no-dnd":!r,readonly:this.readonly},onDragEnter:this.handleDragEnter,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop,onFocusin:this.handleFieldFocusIn,onFocusout:this.handleFieldFocusOut},!r||t||this.readonly?{}:{role:"button",tabIndex:0,onKeyDown:this.handleDropZoneKeyDown}),t&&"list"===this.view&&this.renderFileList(),t&&"gallery"===this.view&&this.renderGallery(),!t&&this.readonly&&this.renderEmptyReadonly(n),i&&!t&&this.renderEmptyPrompt(n),i&&t&&this.renderCompactPrompt(n))}renderEmptyPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n=this.itemNoun(e),r=this.dragAndDropMessage||`Drag and drop ${n} here`,s=this.browseFileMessage||"Browse "+n,a="gallery"===this.view?"image":"cloud-upload";return o("div",{class:"empty-prompt"},o("slot",{name:"start"}),t&&o("div",{class:"empty-prompt-content"},o("udp-fluent-icon",{name:a,size:"sm",class:"empty-prompt-icon"}),o("span",{class:"empty-prompt-text"},r)),i&&o("udp-fluent-button",{class:"empty-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},s),o("slot",{name:"end"}))}renderEmptyReadonly(e){const t=this.itemNoun(e);return o("div",{class:"empty-readonly"},o("span",{class:"empty-readonly-text"},"No ",t," attached"))}renderCompactPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n="Drag and drop more "+this.itemNoun(e),r=e?"Browse":"Browse "+this.singularNoun();return o("div",{class:"compact-prompt"},t&&o("div",{class:"compact-prompt-text"},o("udp-fluent-icon",{name:"gallery"===this.view?"image":"cloud-upload",size:"sm",class:"compact-prompt-icon"}),o("span",null,n)),i&&o("udp-fluent-button",{class:"compact-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},r))}itemNoun(e){return"gallery"===this.view?e?"images":"an image":e?"files":"a file"}singularNoun(){return"gallery"===this.view?"image":"file"}renderFileList(){return o("ul",{class:"file-list",role:"list"},this.items.map(((e,t)=>this.renderFileRow(e,t))))}renderFileRow(e,t){const i=p(e),n="pending"===e.kind?function(e){if(!Number.isFinite(e)||e<0)return"";if(e<1024)return e+" B";let t=e/1024,i=0;for(;t>=1024&&i<3;)t/=1024,i+=1;return`${t.toFixed(t>=10||0===i?0:1)} ${["KB","MB","GB","TB"][i]}`}(e.file.size):null,r=this.displayUploadTime?g(e.uploadedAt):null,s=[i,n,r].filter(Boolean);return o("li",{class:"file-chip",key:`${e.kind}:${i}:${t}`,title:s.join(" · ")},o("udp-fluent-icon",{name:"document",size:"sm",class:"file-chip-icon"}),o("button",{type:"button",class:"file-chip-name",disabled:this.disabled,"aria-label":"Download "+i,onClick:()=>this.requestDownload(e)},o("span",{class:"file-chip-name-text"},i)),(n||r||"stored"===e.kind)&&o("span",{class:"file-chip-detail"},n&&o("span",null,n),r&&o("span",null,r),"stored"===e.kind&&o("udp-fluent-badge",{class:"file-chip-saved-badge",appearance:"filled",color:"subtle",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"file-chip-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+i,disabled:this.disabled,onClick:()=>this.removeAt(t)}))}renderGallery(){return o("ul",{class:"gallery",role:"list"},this.items.map(((e,t)=>this.renderThumb(e,t))))}renderThumb(e,t){const i=f(e),n=this.previews.get(i),r=p(e),s=this.displayUploadTime?g(e.uploadedAt):null,a=!this.disableLightbox&&!!(null==n?void 0:n.url);return o("li",{class:"thumb",key:i},o("div",{class:"thumb-frame"},o("button",{type:"button",class:{"thumb-button":!0,clickable:a},onClick:e=>a&&this.openLightbox(t,e.currentTarget),disabled:!a,title:r},(null==n?void 0:n.url)?o("img",{class:"thumb-img",src:n.url,alt:r}):(null==n?void 0:n.loading)?o("udp-spinner",{size:"small"}):o("udp-fluent-icon",{name:"error"===(null==n?void 0:n.status)?"warning":"image",size:"md",class:"thumb-placeholder-icon"}),"stored"===e.kind&&o("udp-fluent-badge",{class:"thumb-saved-badge",appearance:"filled",color:"brand",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"thumb-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+r,disabled:this.disabled,onClick:()=>this.removeAt(t)})),o("div",{class:"thumb-meta"},o("button",{type:"button",class:"thumb-name",disabled:this.disabled,"aria-label":"Download "+r,onClick:()=>this.requestDownload(e),title:"Download "+r},o("span",{class:"thumb-name-text"},r)),s&&o("span",{class:"thumb-stamp"},s)))}renderLightboxContent(){const e=this.items[this.lightboxIndex];if(!e)return null;const t=this.previews.get(f(e)),i=p(e),n=this.items.length,r=n>1;return o("div",{class:"lightbox-content","aria-label":i},o("div",{class:"lightbox-header"},o("span",{class:"lightbox-name",title:i},i),o("udp-fluent-icon-button",{class:"lightbox-close",iconName:"dismiss",appearance:"subtle",size:"large",ariaLabel:"Close preview",onClick:()=>this.closeLightbox()})),o("div",{class:"lightbox-stage"},r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-prev",iconName:"chevron-left",appearance:"subtle",size:"medium",ariaLabel:"Previous image",onClick:()=>this.navigateLightbox(-1)}),(null==t?void 0:t.url)?o("img",{class:"lightbox-image",src:t.url,alt:i}):(null==t?void 0:t.loading)?o("udp-spinner",{size:"medium"}):o("span",{class:"lightbox-error"},"No preview available"),r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-next",iconName:"chevron-right",appearance:"subtle",size:"medium",ariaLabel:"Next image",onClick:()=>this.navigateLightbox(1)})),r&&o("div",{class:"lightbox-counter"},this.lightboxIndex+1," / ",n))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],view:[{onViewChange:0}]}}static get style(){return":host{display:block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}.hidden-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.drop-container{border:2px dashed var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);transition:background-color 100ms ease,     border-color 100ms ease;outline:none;padding:var(--spacingVerticalM, 12px);display:flex;flex-direction:column;justify-content:center;gap:var(--spacingVerticalM, 12px);min-height:144px;box-sizing:border-box}.drop-container.has-files{justify-content:space-between;border-color:var(--colorNeutralStroke2, #e0e0e0);cursor:default}:host(.appearance-filled) .drop-container{background-color:var(--colorNeutralBackground2, #fafafa)}.drop-container[role='button']{cursor:pointer}.drop-container[role='button']:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.drop-container.dragging{background-color:var(--colorNeutralBackground1Hover, #f5f5f5);border-color:var(--colorNeutralStrokeAccessible, #616161)}.drop-container.no-dnd:not(.readonly){border-style:solid}.drop-container.readonly{cursor:default;border-style:solid}.drop-container.has-files.dragging{border-style:dashed;background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.empty-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalXS, 4px);pointer-events:none;}.empty-prompt-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacingVerticalXXS, 2px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.empty-prompt-icon{color:inherit}.empty-prompt-text{color:inherit;text-align:center}.empty-prompt-button{pointer-events:auto}.empty-readonly{display:flex;align-items:center;justify-content:center}.empty-readonly-text{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);font-style:italic}.compact-prompt{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);padding:var(--spacingVerticalM, 12px) 0 0 0;border-top:1px dashed var(--colorNeutralStroke3, #ebebeb);pointer-events:none}.compact-prompt-text{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);flex:1 1 auto;min-width:0}.compact-prompt-icon{color:inherit;flex:0 0 auto}.compact-prompt-button{pointer-events:auto;flex:0 0 auto}.file-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--spacingHorizontalXS, 4px) var(--spacingHorizontalS, 8px);max-height:80px;overflow-y:auto;scrollbar-gutter:stable}.file-chip{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);padding:4px var(--spacingHorizontalXS, 4px) 4px var(--spacingHorizontalS, 8px);border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);max-width:280px;min-width:0;flex:0 0 auto;height:32px;box-sizing:border-box}.file-chip-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.file-chip-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;min-width:0;flex:1 1 auto;font-size:var(--fontSizeBase200, 12px);line-height:1}.file-chip-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.file-chip-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip-detail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:11px;line-height:1}.file-chip-remove{flex:0 0 auto}.gallery{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalM, 12px)}.thumb{display:flex;flex-direction:column;gap:var(--spacingVerticalXS, 4px)}.thumb-frame{position:relative;width:80px;height:80px}.thumb-button{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;margin:0;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);overflow:hidden;cursor:default;transition:border-color 100ms ease, transform 100ms ease}.thumb-button.clickable{cursor:zoom-in}.thumb-button.clickable:hover{border-color:var(--colorBrandStroke1, #0f6cbd);transform:scale(1.02)}.thumb-button:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.thumb-button:disabled{cursor:not-allowed;opacity:0.7}.thumb-img{width:100%;height:100%;object-fit:cover;display:block}.thumb-placeholder-icon{color:var(--colorNeutralForeground3, #707070)}.thumb-saved-badge{position:absolute;bottom:4px;left:4px}.thumb-meta{display:flex;flex-direction:column;gap:2px;max-width:100%}.thumb-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;display:block;max-width:100%;overflow:hidden}.thumb-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.thumb-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fontSizeBase200, 12px)}.thumb-stamp{font-size:10px;color:var(--colorNeutralForeground3, #707070)}.thumb-remove{position:absolute;top:4px;right:4px}:host(.disabled){opacity:0.6}:host(.disabled) .drop-container{cursor:not-allowed}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}:host(.has-error) .drop-container{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.lightbox{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:var(--spacingVerticalL, 16px);border:none;background:transparent;box-sizing:border-box;align-items:center;justify-content:center}.lightbox[open]{display:flex;flex-direction:column;animation:lightbox-fade-in 100ms ease}.lightbox::backdrop{background-color:rgba(0, 0, 0, 0.85);animation:lightbox-fade-in 100ms ease}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}.lightbox-content{display:flex;flex-direction:column;width:100%;height:100%;max-width:1200px;gap:var(--spacingVerticalS, 8px)}.lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);color:#ffffff;padding:0 var(--spacingHorizontalS, 8px)}.lightbox-name{font-size:var(--fontSizeBase300, 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.lightbox-stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain}.lightbox-error{color:#ffffff;font-style:italic}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:var(--spacingHorizontalS, 8px)}.lightbox-next{right:var(--spacingHorizontalS, 8px)}.lightbox-nav,.lightbox-close{--colorNeutralForeground2:#ffffff;--colorNeutralForeground2Hover:#ffffff;--colorNeutralForeground2Pressed:#ffffff;--colorNeutralForeground2BrandHover:#ffffff;--colorNeutralForeground2BrandPressed:#ffffff;--colorSubtleBackgroundHover:rgba(255, 255, 255, 0.12);--colorSubtleBackgroundPressed:rgba(255, 255, 255, 0.18);--colorSubtleBackgroundSelected:rgba(255, 255, 255, 0.18)}.lightbox-counter{text-align:center;color:rgba(255, 255, 255, 0.8);font-size:var(--fontSizeBase200, 12px);padding:4px 0}"}},[257,"udp-fluent-file-input",{view:[1],value:[16],name:[1],label:[1],hint:[1],error:[1],includeErrorPadding:[4,"include-error-padding"],required:[4],disabled:[4],readonly:[4],accept:[1],maxFiles:[2,"max-files"],maxFileSizeBytes:[2,"max-file-size-bytes"],hideDragAndDrop:[4,"hide-drag-and-drop"],hideButton:[4,"hide-button"],displayUploadTime:[4,"display-upload-time"],dragAndDropMessage:[1,"drag-and-drop-message"],browseFileMessage:[1,"browse-file-message"],appearance:[1],disableLightbox:[4,"disable-lightbox"],loadStoredFile:[16],items:[32],isDragging:[32],lightboxIndex:[32],previews:[32]},void 0,{value:[{onValueChange:0}],view:[{onViewChange:0}]}]),y=v,w=function(){"undefined"!=typeof customElements&&["udp-fluent-file-input","udp-fluent-badge","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text"].forEach((e=>{switch(e){case"udp-fluent-file-input":customElements.get(r(e))||customElements.define(r(e),v);break;case"udp-fluent-badge":customElements.get(r(e))||s();break;case"udp-fluent-button":customElements.get(r(e))||a();break;case"udp-fluent-icon":customElements.get(r(e))||l();break;case"udp-fluent-icon-button":customElements.get(r(e))||c();break;case"udp-spinner":customElements.get(r(e))||d();break;case"udp-text":customElements.get(r(e))||u()}}))};export{y as UdpFluentFileInput,w as defineCustomElement}
+import{p as e,H as t,c as i,h as o,d as n,t as r}from"./index2.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as s}from"./udp-fluent-badge2.js";import{d as a}from"./udp-fluent-button2.js";import{d as l}from"./udp-fluent-icon2.js";import{d as c}from"./udp-fluent-icon-button2.js";import{d}from"./udp-spinner2.js";import{d as u}from"./udp-text2.js";function p(e){return"pending"===e.kind?e.file.name:e.name}function h(e){return(e||"").trim().toLowerCase()}function f(e){if("pending"===e.kind){const t=e.file;return`pending::${h(t.name)}::${t.size}::${t.lastModified}`}return"stored::"+e.driveFileId}function m(e){var t;const i=null===(t=e.dataTransfer)||void 0===t?void 0:t.types;return!!i&&Array.from(i).includes("Files")}function b(e,t,i,o,n,r){if(t.accept&&!function(e,t){if(!t)return!0;const i=t.split(",").map((e=>e.trim())).filter((e=>e.length>0));if(0===i.length)return!0;const o=(e.type||"").toLowerCase(),n=(e.name||"").toLowerCase();for(const e of i){const t=e.toLowerCase();if(t.startsWith(".")){if(n.endsWith(t))return!0}else if(t.endsWith("/*")){const e=t.slice(0,-1);if(o.startsWith(e))return!0}else if(o===t)return!0}return!1}(e,t.accept))return"mime";if(null!=t.maxFileSizeBytes&&e.size>t.maxFileSizeBytes)return"size";if(!r&&n<=0)return"maxFiles";const s=h(e.name);return!r&&o.has(s)||i.has(s)?"duplicate":null}function g(e){if(!e)return null;const t=new Date(e);return Number.isNaN(t.getTime())?null:new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(t)}function x(e,t){const i=URL.createObjectURL(e),o=document.createElement("a");o.href=i,o.download=t,o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o),setTimeout((()=>URL.revokeObjectURL(i)),1e3)}const v=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.fileRejected=i(this,"fileRejected",7),this.downloadRequested=i(this,"downloadRequested",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.view="list",this.value=[],this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.hideDragAndDrop=!1,this.hideButton=!1,this.displayUploadTime=!1,this.appearance="outline",this.disableLightbox=!1,this.items=[],this.isDragging=!1,this.fieldHasFocus=!1,this.lightboxIndex=-1,this.previews=new Map,this.lightboxTrigger=null,this.requestDownload=e=>{this.disabled||("pending"!==e.kind?"function"==typeof this.loadStoredFile?this.loadStoredFile(e).then((t=>{x(t instanceof File?t:new File([t],e.name,{type:t.type||"application/octet-stream"}),e.name)})).catch((()=>{})):this.downloadRequested.emit(e):x(e.file,e.file.name))},this.handleBrowseClick=e=>{var t;this.disabled||this.readonly||(e.preventDefault(),e.stopPropagation(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleInputChange=e=>{const t=e.target;t.files&&t.files.length>0&&this.intakeFiles(t.files),t.value=""},this.handleDragEnter=e=>{this.disabled||this.readonly||this.hideDragAndDrop||m(e)&&(e.preventDefault(),e.stopPropagation(),this.isDragging=!0)},this.handleDragOver=e=>{this.disabled||this.readonly||this.hideDragAndDrop||m(e)&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy"))},this.handleDragLeave=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation();const t=e.currentTarget,i=e.relatedTarget;t&&i&&t.contains(i)||(this.isDragging=!1)},this.handleDrop=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation(),this.isDragging=!1;const t=e.dataTransfer;t&&t.files&&t.files.length>0&&this.intakeFiles(t.files)},this.handleDropZoneKeyDown=e=>{var t;this.disabled||this.readonly||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleFieldFocusIn=()=>{this.fieldHasFocus||(this.fieldHasFocus=!0,this.inputFocus.emit())},this.handleFieldFocusOut=e=>{const t=e.relatedTarget,i=e.currentTarget;t&&i&&i.contains(t)||this.fieldHasFocus&&(this.fieldHasFocus=!1,this.inputBlur.emit())},this.handleLightboxKeyDown=e=>{"ArrowRight"===e.key?(e.preventDefault(),this.navigateLightbox(1)):"ArrowLeft"===e.key&&(e.preventDefault(),this.navigateLightbox(-1))},this.handleBackdropClick=e=>{e.target===e.currentTarget&&this.closeLightbox()},this.handleDialogClose=()=>{var e;this.lightboxIndex>=0&&(this.lightboxIndex=-1),null===(e=this.lightboxTrigger)||void 0===e||e.focus(),this.lightboxTrigger=null}}componentWillLoad(){this.items=Array.isArray(this.value)?this.value:[],"gallery"===this.view&&this.syncPreviews(this.items)}onValueChange(e){const t=Array.isArray(e)?e:[];t!==this.items&&(this.items=t,"gallery"===this.view&&this.syncPreviews(t))}onViewChange(e){"gallery"===e?this.syncPreviews(this.items):(this.clearPreviews(),this.lightboxIndex=-1)}disconnectedCallback(){this.clearPreviews()}clearPreviews(){this.previews.forEach((e=>{e.revokable&&e.url&&URL.revokeObjectURL(e.url)})),this.previews=new Map}syncPreviews(e){const t=new Set,i=new Map(this.previews);for(const o of e){const e=f(o);t.add(e),i.has(e)||i.set(e,this.createPreview(o))}for(const[e,o]of Array.from(i.entries()))t.has(e)||(o.revokable&&o.url&&URL.revokeObjectURL(o.url),i.delete(e));this.previews=i}createPreview(e){if("pending"===e.kind)return{url:URL.createObjectURL(e.file),loading:!1,revokable:!0,status:"ready"};if("function"!=typeof this.loadStoredFile)return{url:null,loading:!1,revokable:!1,status:"unavailable"};const t={url:null,loading:!0,revokable:!1,status:"loading"},i=f(e);return this.loadStoredFile(e).then((e=>{const o=e instanceof Blob?e:new Blob([e]),n=URL.createObjectURL(o);this.previews.get(i)===t?this.previews=new Map(this.previews).set(i,{url:n,loading:!1,revokable:!0,status:"ready"}):URL.revokeObjectURL(n)})).catch((()=>{this.previews.get(i)===t&&(this.previews=new Map(this.previews).set(i,Object.assign(Object.assign({},t),{loading:!1,status:"error"})))})),t}intakeFiles(e){if(this.disabled||this.readonly)return;const t=function(e,t,i){const o=Array.from(e),n=[],r=[],s=new Set,a=new Set(t.map((e=>h(p(e)))));let l=null==i.maxFiles?1/0:Math.max(0,i.maxFiles-t.length);const c=1===i.maxFiles,d=(new Date).toISOString();for(const e of o){const t=b(e,i,s,a,l,c);t?r.push({file:e,reason:t}):(s.add(h(e.name)),n.push({kind:"pending",file:e,uploadedAt:d}),l-=1)}return 0===n.length?{accepted:n,rejected:r,next:null}:{accepted:n,rejected:r,next:c?n:[...t,...n]}}(e,this.items,{accept:this.accept,maxFiles:this.maxFiles,maxFileSizeBytes:this.maxFileSizeBytes});t.rejected.forEach((e=>this.fileRejected.emit(e))),t.next&&this.commit(t.next)}commit(e){this.items=e,"gallery"===this.view&&this.syncPreviews(e),this.valueChanged.emit(e)}removeAt(e){if(this.disabled||this.readonly)return;if(e<0||e>=this.items.length)return;const t=this.items.slice();t.splice(e,1),this.commit(t)}openLightbox(e,t){this.disableLightbox||e<0||e>=this.items.length||(this.lightboxIndex=e,this.lightboxTrigger=null!=t?t:null,requestAnimationFrame((()=>{this.dialogRef&&!this.dialogRef.open&&this.dialogRef.showModal()})))}closeLightbox(){var e;this.lightboxIndex<0||(this.lightboxIndex=-1,(null===(e=this.dialogRef)||void 0===e?void 0:e.open)&&this.dialogRef.close())}navigateLightbox(e){if(this.lightboxIndex<0)return;const t=this.items.length;0!==t&&(this.lightboxIndex=(this.lightboxIndex+e+t)%t)}render(){const e=!!this.error,t=this.error||this.hint,i=!t&&!this.includeErrorPadding,r=1!==this.maxFiles,s=this.items.length>0,a=!(this.readonly||null!=this.maxFiles&&1!==this.maxFiles&&this.items.length>=this.maxFiles);return o(n,{key:"f354dcacff6ea8f24686dfe5930eea1e78ae4d40",class:{"has-error":e,["view-"+this.view]:!0,["appearance-"+this.appearance]:!0,disabled:this.disabled,readonly:this.readonly}},o("fluent-field",{key:"590e90d7804164a55e975e42d1160d1eb09499d1",class:{"no-message":i}},o("div",{key:"fa2ab44d483a584739ed51c256f250a242766996",slot:"input",class:"root"},this.label&&o("fluent-label",{key:"bd9496e2b72d80e9c05cb7549de9e2316d61666f",class:"field-label",required:this.required,disabled:this.disabled},this.label),o("input",{key:"975aeed3eb16151005f0619c2746a6ca93c64551",ref:e=>this.fileInputRef=e,type:"file",class:"hidden-input",name:this.name,accept:this.accept,multiple:r,disabled:this.disabled||this.readonly,onChange:this.handleInputChange,onClick:e=>e.stopPropagation()}),this.renderDropContainer({hasFiles:s,showDropZone:a,allowMultiple:r})),o("udp-text",{key:"2297fe8bb95d794aed9f13fdbac668507d8a21fb",slot:"message",variant:"caption1",class:{message:!0,error:e,"include-error-padding":this.includeErrorPadding}},t)),"gallery"===this.view&&o("dialog",{key:"de9555dc4c4f2348b664a48806f4f8b677a9bf2d",class:"lightbox",ref:e=>this.dialogRef=e,onClose:this.handleDialogClose,onClick:this.handleBackdropClick,onKeyDown:this.handleLightboxKeyDown},this.lightboxIndex>=0&&this.renderLightboxContent()))}renderDropContainer(e){const{hasFiles:t,showDropZone:i,allowMultiple:n}=e,r=!this.hideDragAndDrop&&!this.readonly;return o("div",Object.assign({class:{"drop-container":!0,dragging:this.isDragging,"has-files":t,"no-dnd":!r,readonly:this.readonly},onDragEnter:this.handleDragEnter,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop,onFocusin:this.handleFieldFocusIn,onFocusout:this.handleFieldFocusOut},!r||t||this.readonly?{}:{role:"button",tabIndex:0,onKeyDown:this.handleDropZoneKeyDown}),t&&"list"===this.view&&this.renderFileList(),t&&"gallery"===this.view&&this.renderGallery(),!t&&this.readonly&&this.renderEmptyReadonly(n),i&&!t&&this.renderEmptyPrompt(n),i&&t&&this.renderCompactPrompt(n))}renderEmptyPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n=this.itemNoun(e),r=this.dragAndDropMessage||`Drag and drop ${n} here`,s=this.browseFileMessage||"Browse "+n,a="gallery"===this.view?"image":"cloud-upload";return o("div",{class:"empty-prompt"},o("slot",{name:"start"}),t&&o("div",{class:"empty-prompt-content"},o("udp-fluent-icon",{name:a,size:"sm",class:"empty-prompt-icon"}),o("span",{class:"empty-prompt-text"},r)),i&&o("udp-fluent-button",{class:"empty-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},s),o("slot",{name:"end"}))}renderEmptyReadonly(e){const t=this.itemNoun(e);return o("div",{class:"empty-readonly"},o("span",{class:"empty-readonly-text"},"No ",t," attached"))}renderCompactPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n="Drag and drop more "+this.itemNoun(e),r=e?"Browse":"Browse "+this.singularNoun();return o("div",{class:"compact-prompt"},t&&o("div",{class:"compact-prompt-text"},o("udp-fluent-icon",{name:"gallery"===this.view?"image":"cloud-upload",size:"sm",class:"compact-prompt-icon"}),o("span",null,n)),i&&o("udp-fluent-button",{class:"compact-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},r))}itemNoun(e){return"gallery"===this.view?e?"images":"an image":e?"files":"a file"}singularNoun(){return"gallery"===this.view?"image":"file"}renderFileList(){return o("ul",{class:"file-list",role:"list"},this.items.map(((e,t)=>this.renderFileRow(e,t))))}renderFileRow(e,t){const i=p(e),n="pending"===e.kind?function(e){if(!Number.isFinite(e)||e<0)return"";if(e<1024)return e+" B";let t=e/1024,i=0;for(;t>=1024&&i<3;)t/=1024,i+=1;return`${t.toFixed(t>=10||0===i?0:1)} ${["KB","MB","GB","TB"][i]}`}(e.file.size):null,r=this.displayUploadTime?g(e.uploadedAt):null,s=[i,n,r].filter(Boolean);return o("li",{class:"file-chip",key:`${e.kind}:${i}:${t}`,title:s.join(" · ")},o("udp-fluent-icon",{name:"document",size:"sm",class:"file-chip-icon"}),o("button",{type:"button",class:"file-chip-name",disabled:this.disabled,"aria-label":"Download "+i,onClick:()=>this.requestDownload(e)},o("span",{class:"file-chip-name-text"},i)),(n||r||"stored"===e.kind)&&o("span",{class:"file-chip-detail"},n&&o("span",null,n),r&&o("span",null,r),"stored"===e.kind&&o("udp-fluent-badge",{class:"file-chip-saved-badge",appearance:"filled",color:"subtle",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"file-chip-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+i,disabled:this.disabled,onClick:()=>this.removeAt(t)}))}renderGallery(){return o("ul",{class:"gallery",role:"list"},this.items.map(((e,t)=>this.renderThumb(e,t))))}renderThumb(e,t){const i=f(e),n=this.previews.get(i),r=p(e),s=this.displayUploadTime?g(e.uploadedAt):null,a=!this.disableLightbox&&!!(null==n?void 0:n.url);return o("li",{class:"thumb",key:i},o("div",{class:"thumb-frame"},o("button",{type:"button",class:{"thumb-button":!0,clickable:a},onClick:e=>a&&this.openLightbox(t,e.currentTarget),disabled:!a,title:r},(null==n?void 0:n.url)?o("img",{class:"thumb-img",src:n.url,alt:r}):(null==n?void 0:n.loading)?o("udp-spinner",{size:"small"}):o("udp-fluent-icon",{name:"error"===(null==n?void 0:n.status)?"warning":"image",size:"md",class:"thumb-placeholder-icon"}),"stored"===e.kind&&o("udp-fluent-badge",{class:"thumb-saved-badge",appearance:"filled",color:"brand",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"thumb-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+r,disabled:this.disabled,onClick:()=>this.removeAt(t)})),o("div",{class:"thumb-meta"},o("button",{type:"button",class:"thumb-name",disabled:this.disabled,"aria-label":"Download "+r,onClick:()=>this.requestDownload(e),title:"Download "+r},o("span",{class:"thumb-name-text"},r)),s&&o("span",{class:"thumb-stamp"},s)))}renderLightboxContent(){const e=this.items[this.lightboxIndex];if(!e)return null;const t=this.previews.get(f(e)),i=p(e),n=this.items.length,r=n>1;return o("div",{class:"lightbox-content","aria-label":i},o("div",{class:"lightbox-header"},o("span",{class:"lightbox-name",title:i},i),o("udp-fluent-icon-button",{class:"lightbox-close",iconName:"dismiss",appearance:"subtle",size:"large",ariaLabel:"Close preview",onClick:()=>this.closeLightbox()})),o("div",{class:"lightbox-stage"},r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-prev",iconName:"chevron-left",appearance:"subtle",size:"medium",ariaLabel:"Previous image",onClick:()=>this.navigateLightbox(-1)}),(null==t?void 0:t.url)?o("img",{class:"lightbox-image",src:t.url,alt:i}):(null==t?void 0:t.loading)?o("udp-spinner",{size:"medium"}):o("span",{class:"lightbox-error"},"No preview available"),r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-next",iconName:"chevron-right",appearance:"subtle",size:"medium",ariaLabel:"Next image",onClick:()=>this.navigateLightbox(1)})),r&&o("div",{class:"lightbox-counter"},this.lightboxIndex+1," / ",n))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],view:[{onViewChange:0}]}}static get style(){return":host{display:block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}.hidden-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.drop-container{border:2px dashed var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);transition:background-color 100ms ease,     border-color 100ms ease;outline:none;padding:var(--spacingVerticalM, 12px);display:flex;flex-direction:column;justify-content:center;gap:var(--spacingVerticalM, 12px);min-height:144px;box-sizing:border-box}.drop-container.has-files{justify-content:space-between;border-color:var(--colorNeutralStroke2, #e0e0e0);cursor:default}:host(.appearance-filled) .drop-container{background-color:var(--colorNeutralBackground2, #fafafa)}.drop-container[role='button']{cursor:pointer}.drop-container[role='button']:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.drop-container.dragging{background-color:var(--colorNeutralBackground1Hover, #f5f5f5);border-color:var(--colorNeutralStrokeAccessible, #616161)}.drop-container.no-dnd:not(.readonly){border-style:solid}.drop-container.readonly{cursor:default;border-style:solid}.drop-container.has-files.dragging{border-style:dashed;background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.empty-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalXS, 4px);pointer-events:none;}.empty-prompt-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacingVerticalXXS, 2px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.empty-prompt-icon{color:inherit}.empty-prompt-text{color:inherit;text-align:center}.empty-prompt-button{pointer-events:auto}.empty-readonly{display:flex;align-items:center;justify-content:center}.empty-readonly-text{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);font-style:italic}.compact-prompt{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);padding:var(--spacingVerticalM, 12px) 0 0 0;border-top:1px dashed var(--colorNeutralStroke3, #ebebeb);pointer-events:none}.compact-prompt-text{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);flex:1 1 auto;min-width:0}.compact-prompt-icon{color:inherit;flex:0 0 auto}.compact-prompt-button{pointer-events:auto;flex:0 0 auto}.file-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--spacingHorizontalXS, 4px) var(--spacingHorizontalS, 8px);max-height:80px;overflow-y:auto;scrollbar-gutter:stable}.file-chip{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);padding:4px var(--spacingHorizontalXS, 4px) 4px var(--spacingHorizontalS, 8px);border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);max-width:280px;min-width:0;flex:0 0 auto;height:32px;box-sizing:border-box}.file-chip-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.file-chip-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;min-width:0;flex:1 1 auto;font-size:var(--fontSizeBase200, 12px);line-height:1}.file-chip-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.file-chip-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip-detail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:11px;line-height:1}.file-chip-remove{flex:0 0 auto}.gallery{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalM, 12px)}.thumb{display:flex;flex-direction:column;gap:var(--spacingVerticalXS, 4px)}.thumb-frame{position:relative;width:80px;height:80px}.thumb-button{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;margin:0;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);overflow:hidden;cursor:default;transition:border-color 100ms ease, transform 100ms ease}.thumb-button.clickable{cursor:zoom-in}.thumb-button.clickable:hover{border-color:var(--colorBrandStroke1, #0f6cbd);transform:scale(1.02)}.thumb-button:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.thumb-button:disabled{cursor:not-allowed;opacity:0.7}.thumb-img{width:100%;height:100%;object-fit:cover;display:block}.thumb-placeholder-icon{color:var(--colorNeutralForeground3, #707070)}.thumb-saved-badge{position:absolute;bottom:4px;left:4px}.thumb-meta{display:flex;flex-direction:column;gap:2px;max-width:100%}.thumb-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;display:block;max-width:100%;overflow:hidden}.thumb-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.thumb-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fontSizeBase200, 12px)}.thumb-stamp{font-size:10px;color:var(--colorNeutralForeground3, #707070)}.thumb-remove{position:absolute;top:4px;right:4px}:host(.disabled){opacity:0.6}:host(.disabled) .drop-container{cursor:not-allowed}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}:host(.has-error) .drop-container{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.lightbox{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:var(--spacingVerticalL, 16px);border:none;background:transparent;box-sizing:border-box;align-items:center;justify-content:center}.lightbox[open]{display:flex;flex-direction:column;animation:lightbox-fade-in 100ms ease}.lightbox::backdrop{background-color:rgba(0, 0, 0, 0.85);animation:lightbox-fade-in 100ms ease}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}.lightbox-content{display:flex;flex-direction:column;width:100%;height:100%;max-width:1200px;gap:var(--spacingVerticalS, 8px)}.lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);color:#ffffff;padding:0 var(--spacingHorizontalS, 8px)}.lightbox-name{font-size:var(--fontSizeBase300, 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.lightbox-stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain}.lightbox-error{color:#ffffff;font-style:italic}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:var(--spacingHorizontalS, 8px)}.lightbox-next{right:var(--spacingHorizontalS, 8px)}.lightbox-nav,.lightbox-close{--colorNeutralForeground2:#ffffff;--colorNeutralForeground2Hover:#ffffff;--colorNeutralForeground2Pressed:#ffffff;--colorNeutralForeground2BrandHover:#ffffff;--colorNeutralForeground2BrandPressed:#ffffff;--colorSubtleBackgroundHover:rgba(255, 255, 255, 0.12);--colorSubtleBackgroundPressed:rgba(255, 255, 255, 0.18);--colorSubtleBackgroundSelected:rgba(255, 255, 255, 0.18)}.lightbox-counter{text-align:center;color:rgba(255, 255, 255, 0.8);font-size:var(--fontSizeBase200, 12px);padding:4px 0}"}},[257,"udp-fluent-file-input",{view:[1],value:[16],name:[1],label:[1],hint:[1],error:[1],includeErrorPadding:[4,"include-error-padding"],required:[4],disabled:[4],readonly:[4],accept:[1],maxFiles:[2,"max-files"],maxFileSizeBytes:[2,"max-file-size-bytes"],hideDragAndDrop:[4,"hide-drag-and-drop"],hideButton:[4,"hide-button"],displayUploadTime:[4,"display-upload-time"],dragAndDropMessage:[1,"drag-and-drop-message"],browseFileMessage:[1,"browse-file-message"],appearance:[1],disableLightbox:[4,"disable-lightbox"],loadStoredFile:[16],items:[32],isDragging:[32],lightboxIndex:[32],previews:[32]},void 0,{value:[{onValueChange:0}],view:[{onViewChange:0}]}]),y=v,w=function(){"undefined"!=typeof customElements&&["udp-fluent-file-input","udp-fluent-badge","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text"].forEach((e=>{switch(e){case"udp-fluent-file-input":customElements.get(r(e))||customElements.define(r(e),v);break;case"udp-fluent-badge":customElements.get(r(e))||s();break;case"udp-fluent-button":customElements.get(r(e))||a();break;case"udp-fluent-icon":customElements.get(r(e))||l();break;case"udp-fluent-icon-button":customElements.get(r(e))||c();break;case"udp-spinner":customElements.get(r(e))||d();break;case"udp-text":customElements.get(r(e))||u()}}))};export{y as UdpFluentFileInput,w as defineCustomElement}

package/dist/components/udp-fluent-icon-button2.js

@@ -1 +1 @@
-import{p as e,H as r,h as o,d as t,t as a}from"./index2.js";import"@fluentui/web-components/button.js";import{a as s}from"./icon-size-helpers.js";import{d as n}from"./udp-fluent-button2.js";import{d as i}from"./udp-fluent-icon2.js";import{d as l}from"./udp-spinner2.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.iconVariant="regular",this.appearance="secondary",this.shape="circular",this.size="medium",this.disabled=!1,this.loading=!1,this.disabledFocusable=!1,this.fillOnHover=!1,this.isHovered=!1}render(){const e=this.fillOnHover&&this.isHovered,r=e?"filled":this.iconVariant,a=e?"var(--colorBrandForeground1)":this.iconColor;return o(t,{key:"51fb3b256f38d5b911a2b811ab952c7e734b5e01",exportparts:"button",onMouseEnter:()=>this.isHovered=!0,onMouseLeave:()=>this.isHovered=!1},o("udp-fluent-button",{key:"5b6e9ea46f340d9c7b4ac571a5af6c20e5456185",appearance:this.appearance,disabled:this.disabled,"disabled-focusable":this.disabledFocusable,loading:this.loading,shape:this.shape,size:this.size,iconOnly:!0,"aria-label":this.ariaLabel,tabIndex:this.tabIndex},o("udp-fluent-icon",{key:"fbf26754b80d3f3f8e3c28f10c3b88ba12b22372",name:this.iconName,size:s(this.size,"standard"),variant:r,color:a})))}static get style(){return':host{display:inline-block;--_hover-overlay:color-mix(in srgb, currentColor 6%, transparent);--_pressed-overlay:color-mix(in srgb, currentColor 12%, transparent);--colorNeutralBackground1Hover:color-mix(in srgb, currentColor 6%, var(--colorNeutralBackground1));--colorNeutralBackground1Pressed:color-mix(in srgb, currentColor 12%, var(--colorNeutralBackground1));--colorSubtleBackground:transparent;--colorSubtleBackgroundHover:var(--_hover-overlay);--colorSubtleBackgroundPressed:var(--_pressed-overlay);--colorTransparentBackgroundHover:var(--_hover-overlay);--colorTransparentBackgroundPressed:var(--_pressed-overlay)}:host([appearance="transparent"]),:host([appearance="subtle"]){--colorNeutralStroke1:transparent;--colorNeutralStroke1Hover:transparent;--colorNeutralStroke1Pressed:transparent;--colorNeutralStroke1Selected:transparent}'}},[1,"udp-fluent-icon-button",{iconName:[1,"icon-name"],iconVariant:[1,"icon-variant"],appearance:[513],shape:[1],size:[1],disabled:[4],loading:[516],disabledFocusable:[4,"disabled-focusable"],ariaLabel:[1,"aria-label"],fillOnHover:[4,"fill-on-hover"],iconColor:[1,"icon-color"],tabIndex:[2,"tab-index"],isHovered:[32]}]);function u(){"undefined"!=typeof customElements&&["udp-fluent-icon-button","udp-fluent-button","udp-fluent-icon","udp-spinner"].forEach((e=>{switch(e){case"udp-fluent-icon-button":customElements.get(a(e))||customElements.define(a(e),c);break;case"udp-fluent-button":customElements.get(a(e))||n();break;case"udp-fluent-icon":customElements.get(a(e))||i();break;case"udp-spinner":customElements.get(a(e))||l()}}))}export{c as U,u as d}
+import{p as e,H as r,h as o,d as t,t as a}from"./index2.js";import"@fluentui/web-components/button.js";import{a as s}from"./icon-size-helpers.js";import{d as n}from"./udp-fluent-button2.js";import{d as i}from"./udp-fluent-icon2.js";import{d as l}from"./udp-spinner2.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.iconVariant="regular",this.appearance="secondary",this.shape="circular",this.size="medium",this.disabled=!1,this.loading=!1,this.disabledFocusable=!1,this.fillOnHover=!1,this.isHovered=!1}render(){const e=this.fillOnHover&&this.isHovered,r=e?"filled":this.iconVariant,a=e?"var(--colorBrandForeground1)":this.iconColor;return o(t,{key:"0cb2fc447a4c7f3114fed7a760ce398fd067b9b6",exportparts:"button",onMouseEnter:()=>this.isHovered=!0,onMouseLeave:()=>this.isHovered=!1},o("udp-fluent-button",{key:"527a9b7739a4cb656360e80517e5a50769acd28a",appearance:this.appearance,disabled:this.disabled,"disabled-focusable":this.disabledFocusable,loading:this.loading,shape:this.shape,size:this.size,iconOnly:!0,"aria-label":this.ariaLabel,tabIndex:this.tabIndex},o("udp-fluent-icon",{key:"07f3ba0b0cec8064fc23504d895d0ddad14ae7ba",name:this.iconName,size:s(this.size,"standard"),variant:r,color:a})))}static get style(){return':host{display:inline-block;--_hover-overlay:color-mix(in srgb, currentColor 6%, transparent);--_pressed-overlay:color-mix(in srgb, currentColor 12%, transparent);--colorNeutralBackground1Hover:color-mix(in srgb, currentColor 6%, var(--colorNeutralBackground1));--colorNeutralBackground1Pressed:color-mix(in srgb, currentColor 12%, var(--colorNeutralBackground1));--colorSubtleBackground:transparent;--colorSubtleBackgroundHover:var(--_hover-overlay);--colorSubtleBackgroundPressed:var(--_pressed-overlay);--colorTransparentBackgroundHover:var(--_hover-overlay);--colorTransparentBackgroundPressed:var(--_pressed-overlay)}:host([appearance="transparent"]),:host([appearance="subtle"]){--colorNeutralStroke1:transparent;--colorNeutralStroke1Hover:transparent;--colorNeutralStroke1Pressed:transparent;--colorNeutralStroke1Selected:transparent}'}},[1,"udp-fluent-icon-button",{iconName:[1,"icon-name"],iconVariant:[1,"icon-variant"],appearance:[513],shape:[1],size:[1],disabled:[4],loading:[516],disabledFocusable:[4,"disabled-focusable"],ariaLabel:[1,"aria-label"],fillOnHover:[4,"fill-on-hover"],iconColor:[1,"icon-color"],tabIndex:[2,"tab-index"],isHovered:[32]}]);function u(){"undefined"!=typeof customElements&&["udp-fluent-icon-button","udp-fluent-button","udp-fluent-icon","udp-spinner"].forEach((e=>{switch(e){case"udp-fluent-icon-button":customElements.get(a(e))||customElements.define(a(e),c);break;case"udp-fluent-button":customElements.get(a(e))||n();break;case"udp-fluent-icon":customElements.get(a(e))||i();break;case"udp-spinner":customElements.get(a(e))||l()}}))}export{c as U,u as d}

package/dist/components/udp-fluent-image.js

@@ -1,2 +1,2 @@
 import "../stencil-library/stencil-library.css";
-import{p as e,H as t,h as s,d as a,t as d}from"./index2.js";import"@fluentui/web-components/image.js";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.block=!1,this.bordered=!1,this.shadow=!1}render(){return s(a,{key:"e15162e6a2db7cd2adf51c8aaca8ef228125d381"},s("fluent-image",{key:"f6023b888997ccee55e0aa822017b38548ba4f8f",block:this.block,bordered:this.bordered,shadow:this.shadow,fit:this.fit,shape:this.shape},s("slot",{key:"ab38d953d04f53cef35ee4edea016c8b0a7ed17d"})))}},[257,"udp-fluent-image",{block:[4],bordered:[4],shadow:[4],fit:[1],shape:[1]}]),o=i,n=function(){"undefined"!=typeof customElements&&["udp-fluent-image"].forEach((e=>{"udp-fluent-image"===e&&(customElements.get(d(e))||customElements.define(d(e),i))}))};export{o as UdpFluentImage,n as defineCustomElement}
+import{p as e,H as t,h as s,d as i,t as a}from"./index2.js";import"@fluentui/web-components/image.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.block=!1,this.bordered=!1,this.shadow=!1}render(){return s(i,{key:"a9b75daa5afbc90ec287f644d1bb271da9891fb3"},s("fluent-image",{key:"327669128e7913a1da5b098c479521a05c7c801a",block:this.block,bordered:this.bordered,shadow:this.shadow,fit:this.fit,shape:this.shape},s("slot",{key:"6de9e3c57e22656480c064e3bb8054513f210b81"})))}},[257,"udp-fluent-image",{block:[4],bordered:[4],shadow:[4],fit:[1],shape:[1]}]),d=o,n=function(){"undefined"!=typeof customElements&&["udp-fluent-image"].forEach((e=>{"udp-fluent-image"===e&&(customElements.get(a(e))||customElements.define(a(e),o))}))};export{d as UdpFluentImage,n as defineCustomElement}

package/dist/components/udp-fluent-inline-edit.js

@@ -1,2 +1,2 @@
 import "../stencil-library/stencil-library.css";
-import{p as e,H as t,c as i,h as n,d as r,t as o}from"./index2.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.value="",this.readonly=!1,this.handleInput=e=>{this.valueChanged.emit(e.target.value)}}async focusInput(){var e;null===(e=this.inputEl)||void 0===e||e.focus()}render(){return n(r,{key:"879abc38ee965578e4952a9dd8497bd389e3a447"},n("input",{key:"ebf0bf56de88206d6a977461f1109d79e10c31da",ref:e=>this.inputEl=e,class:"inline-edit-input",type:"text",value:this.value,placeholder:this.placeholder,readOnly:this.readonly,maxlength:this.maxLength,"aria-label":this.ariaLabel,onInput:this.handleInput,onBlur:()=>this.inputBlur.emit(),onFocus:()=>this.inputFocus.emit()}))}static get delegatesFocus(){return!0}get el(){return this}static get style(){return":host{display:block;width:100%}.inline-edit-input{font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:var(--borderRadiusMedium);padding:2px var(--spacingHorizontalXS);margin:0;width:100%;outline:none;cursor:text;transition:background-color 0.15s ease, border-color 0.15s ease}.inline-edit-input::placeholder{color:var(--colorNeutralForeground3);font-style:italic}.inline-edit-input:hover:not(:read-only){background-color:var(--colorNeutralBackground1Hover)}.inline-edit-input:focus:not(:read-only){background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke2)}.inline-edit-input:read-only{cursor:default}"}},[17,"udp-fluent-inline-edit",{value:[1],placeholder:[1],readonly:[4],maxLength:[2,"max-length"],ariaLabel:[1,"aria-label"],focusInput:[64]}]),s=a,l=function(){"undefined"!=typeof customElements&&["udp-fluent-inline-edit"].forEach((e=>{"udp-fluent-inline-edit"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))};export{s as UdpFluentInlineEdit,l as defineCustomElement}
+import{p as e,H as t,c as i,h as n,d as r,t as o}from"./index2.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.value="",this.readonly=!1,this.handleInput=e=>{this.valueChanged.emit(e.target.value)}}async focusInput(){var e;null===(e=this.inputEl)||void 0===e||e.focus()}render(){return n(r,{key:"08168e950fcd3afde547e7fcad5c3fe6154b4a85"},n("input",{key:"a3c48452bd044b0ba762d2d20e3ce7ffcd0925a4",ref:e=>this.inputEl=e,class:"inline-edit-input",type:"text",value:this.value,placeholder:this.placeholder,readOnly:this.readonly,maxlength:this.maxLength,"aria-label":this.ariaLabel,onInput:this.handleInput,onBlur:()=>this.inputBlur.emit(),onFocus:()=>this.inputFocus.emit()}))}static get delegatesFocus(){return!0}get el(){return this}static get style(){return":host{display:block;width:100%}.inline-edit-input{font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:var(--borderRadiusMedium);padding:2px var(--spacingHorizontalXS);margin:0;width:100%;outline:none;cursor:text;transition:background-color 0.15s ease, border-color 0.15s ease}.inline-edit-input::placeholder{color:var(--colorNeutralForeground3);font-style:italic}.inline-edit-input:hover:not(:read-only){background-color:var(--colorNeutralBackground1Hover)}.inline-edit-input:focus:not(:read-only){background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke2)}.inline-edit-input:read-only{cursor:default}"}},[17,"udp-fluent-inline-edit",{value:[1],placeholder:[1],readonly:[4],maxLength:[2,"max-length"],ariaLabel:[1,"aria-label"],focusInput:[64]}]),s=a,l=function(){"undefined"!=typeof customElements&&["udp-fluent-inline-edit"].forEach((e=>{"udp-fluent-inline-edit"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))};export{s as UdpFluentInlineEdit,l as defineCustomElement}

package/dist/components/udp-fluent-link.js

@@ -1,2 +1,2 @@
 import "../stencil-library/stencil-library.css";
-import{p as e,H as t,h as n,d,t as s}from"./index2.js";import"@fluentui/web-components/link.js";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.inline=!1}render(){return n(d,{key:"8e4e353fedc29c8959c73e9d98fd953129876a75"},n("fluent-link",{key:"363d4d097735d66e76428c976fb367e1013bd359",inline:this.inline,href:this.href,target:this.target,download:this.download,hreflang:this.hreflang,ping:this.ping,referrerpolicy:this.referrerpolicy,rel:this.rel,type:this.type},n("slot",{key:"934841452c3a0dc7b04073f72c3e5dda0d0d98b3",name:"start",slot:"start"}),n("slot",{key:"0a8509f81e4c12fdfdfce33930079bdbdd82d70f"}),n("slot",{key:"a8adc130c3374dd1aae628d79c7ea2a1c18c7fc4",name:"end",slot:"end"})))}},[257,"udp-fluent-link",{inline:[4],href:[1],target:[1],download:[1],hreflang:[1],ping:[1],referrerpolicy:[1],rel:[1],type:[1]}]),l=i,r=function(){"undefined"!=typeof customElements&&["udp-fluent-link"].forEach((e=>{"udp-fluent-link"===e&&(customElements.get(s(e))||customElements.define(s(e),i))}))};export{l as UdpFluentLink,r as defineCustomElement}
+import{p as e,H as t,h as n,d as s,t as i}from"./index2.js";import"@fluentui/web-components/link.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.inline=!1}render(){return n(s,{key:"09291fcdf82c0aeb386323b711198f8e0a3982eb"},n("fluent-link",{key:"2d9e44fb8b66111f0e08e6a344f744acbe680aaf",inline:this.inline,href:this.href,target:this.target,download:this.download,hreflang:this.hreflang,ping:this.ping,referrerpolicy:this.referrerpolicy,rel:this.rel,type:this.type},n("slot",{key:"ace22a91cfedd35cd3861928433ce987d3f098dc",name:"start",slot:"start"}),n("slot",{key:"b1feb5881053d751c03d63e9388a09e87ab63b2f"}),n("slot",{key:"ec3a5aba47dcc703c327000de5eacd59d25096fb",name:"end",slot:"end"})))}},[257,"udp-fluent-link",{inline:[4],href:[1],target:[1],download:[1],hreflang:[1],ping:[1],referrerpolicy:[1],rel:[1],type:[1]}]),r=l,a=function(){"undefined"!=typeof customElements&&["udp-fluent-link"].forEach((e=>{"udp-fluent-link"===e&&(customElements.get(i(e))||customElements.define(i(e),l))}))};export{r as UdpFluentLink,a as defineCustomElement}

package/dist/components/udp-fluent-location-input.js

@@ -1,2 +1,2 @@
 import "../stencil-library/stencil-library.css";
-import{p as t,H as i,c as e,h as s,d as o,t as n}from"./index2.js";import{Map as a}from"ol";import l from"ol/View";import r from"ol/Overlay";import h from"ol/layer/Tile";import{XYZ as d}from"ol/source";import{defaults as u}from"ol/interaction/defaults";import{toLonLat as c,fromLonLat as p}from"ol/proj";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import"@fluentui/web-components/listbox.js";import"@fluentui/web-components/option.js";import"@fluentui/web-components/text-input.js";import{d as m}from"./udp-fluent-button2.js";import{d as f}from"./udp-fluent-icon2.js";import{d as b}from"./udp-fluent-icon-button2.js";import{d as v}from"./udp-popover2.js";import{d as g}from"./udp-spinner2.js";import{d as w}from"./udp-text2.js";const x=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChanged=e(this,"valueChanged",7),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.geolocationDenied=e(this,"geolocationDenied",7),this.providerFailed=e(this,"providerFailed",7),this.value=null,this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.showMap=!0,this.hideAddressSearch=!1,this.mapHeight="320px",this.defaultCenter={lat:49.2827,lng:-123.1207},this.defaultZoom=13,this.countrySet="",this.language="en-US",this.showGeolocationButton=!0,this.geolocationButtonLabel="Use my location",this.searchPlaceholder="Search an address",this.searchDebounceMs=300,this.appearance="outline",this.controlSize="medium",this.searchQuery="",this.suggestions=[],this.isSearching=!1,this.isOpen=!1,this.highlightedIndex=-1,this.isReverseGeocoding=!1,this.isLocating=!1,this.searchAbort=null,this.searchDebounceId=null,this.blurCloseTimeoutId=null,this.ignoreNextInputClick=!1,this.isInternalUpdate=!1,this.handleMapClick=t=>{if(this.disabled||this.readonly)return;const[i,e]=c(t.coordinate);this.commitFromCoords(e,i)},this.handleSearchInput=t=>{const i=t.target.value;this.searchQuery=i,this.highlightedIndex=-1,this.isOpen=i.trim().length>0,this.scheduleSearch(i)},this.handleSearchFocus=()=>{var t,i,e,s;if(this.disabled||this.readonly)return;null!=this.blurCloseTimeoutId&&(window.clearTimeout(this.blurCloseTimeoutId),this.blurCloseTimeoutId=null);const o=null!==(s=null===(e=null===(i=null===(t=this.value)||void 0===t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)||void 0===e?void 0:e.trim())&&void 0!==s?s:"",n=this.searchQuery.trim();n.length>0&&n!==o&&(this.isOpen=!0),this.inputFocus.emit()},this.handleSearchBlur=()=>{null!=this.blurCloseTimeoutId&&window.clearTimeout(this.blurCloseTimeoutId),this.blurCloseTimeoutId=window.setTimeout((()=>{this.blurCloseTimeoutId=null,this.isOpen=!1}),150),this.inputBlur.emit()},this.handleSearchClick=()=>{var t,i,e,s;if(this.disabled||this.readonly)return;if(this.ignoreNextInputClick)return void(this.ignoreNextInputClick=!1);if(this.isOpen)return;const o=null!==(s=null===(e=null===(i=null===(t=this.value)||void 0===t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)||void 0===e?void 0:e.trim())&&void 0!==s?s:"",n=this.searchQuery.trim();n.length>0&&n!==o&&(this.isOpen=!0)},this.handleSearchKeyDown=t=>{"Escape"!==t.key&&"Tab"!==t.key?0!==this.suggestions.length&&("ArrowDown"===t.key?(t.preventDefault(),this.isOpen=!0,this.highlightedIndex=(this.highlightedIndex+1)%this.suggestions.length):"ArrowUp"===t.key?(t.preventDefault(),this.isOpen=!0,this.highlightedIndex=this.highlightedIndex<=0?this.suggestions.length-1:this.highlightedIndex-1):"Enter"===t.key&&this.highlightedIndex>=0&&(t.preventDefault(),this.handleSuggestionSelect(this.suggestions[this.highlightedIndex]))):this.isOpen=!1},this.handleSuggestionSelect=t=>{this.searchQuery=t.address.freeformAddress,this.internalInput&&(this.internalInput.value=this.searchQuery),this.suggestions=[],this.isOpen=!1,this.commitValue({latitude:t.position.lat,longitude:t.position.lng,address:t.address,timestamp:(new Date).toISOString()})},this.handleSuggestionMouseDown=t=>{t.preventDefault()},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleLabelMouseDown=t=>{var i,e,s;this.disabled||this.readonly||(t.preventDefault(),this.ignoreNextInputClick=!0,this.searchQuery.trim().length>0&&(this.isOpen=!this.isOpen),null===(s=null===(e=null===(i=this.internalInput)||void 0===i?void 0:i.shadowRoot)||void 0===e?void 0:e.querySelector("input"))||void 0===s||s.focus())},this.handleGeoMouseDown=t=>{t.preventDefault()},this.handleUseMyLocation=async()=>{if(!this.disabled&&!this.readonly)if("geolocation"in navigator){this.isLocating=!0;try{const t=await function(t){return new Promise(((i,e)=>{navigator.geolocation.getCurrentPosition(i,e,t)}))}({enableHighAccuracy:!0,timeout:3e4,maximumAge:0});await this.commitFromCoords(t.coords.latitude,t.coords.longitude)}catch(t){this.geolocationDenied.emit({reason:y(t),message:t instanceof GeolocationPositionError?t.message:void 0})}finally{this.isLocating=!1}}else this.geolocationDenied.emit({reason:"unsupported"})}}componentWillLoad(){var t,i,e;this.searchQuery=null!==(e=null===(i=null===(t=this.value)||void 0===t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)&&void 0!==e?e:""}componentDidLoad(){this.internalInput&&this.searchQuery&&(this.internalInput.value=this.searchQuery),this.showMap&&this.initMap()}disconnectedCallback(){this.searchAbort&&this.searchAbort.abort(),null!=this.searchDebounceId&&window.clearTimeout(this.searchDebounceId),null!=this.blurCloseTimeoutId&&window.clearTimeout(this.blurCloseTimeoutId),this.destroyMap()}onValueChange(t){var i,e;this.isInternalUpdate?this.isInternalUpdate=!1:(this.searchQuery=null!==(e=null===(i=null==t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)&&void 0!==e?e:"",this.internalInput&&(this.internalInput.value=this.searchQuery),this.updateMarker(null!=t?t:null))}onShowMapChange(t){t&&!this.map?this.initMap():!t&&this.map&&this.destroyMap()}onMapHeightChange(){this.map&&requestAnimationFrame((()=>{var t;return null===(t=this.map)||void 0===t?void 0:t.updateSize()}))}onTileUrlChange(){this.map?(this.destroyMap(),this.initMap()):this.showMap&&this.initMap()}initMap(){var t,i;if(!this.mapEl||!this.tileUrlTemplate)return;const e=null!=(null===(t=this.value)||void 0===t?void 0:t.latitude)&&null!=(null===(i=this.value)||void 0===i?void 0:i.longitude),s=p(e?[this.value.longitude,this.value.latitude]:[this.defaultCenter.lng,this.defaultCenter.lat]);this.map=new a({target:this.mapEl,controls:[],interactions:u({keyboard:!1}),layers:[new h({source:new d({url:this.tileUrlTemplate})})],view:new l({center:s,zoom:e?16:this.defaultZoom})});const o=document.createElement("div");o.className="map-marker";const n=document.createElement("udp-fluent-icon");n.setAttribute("name","location"),n.setAttribute("variant","filled"),n.setAttribute("size","lg"),n.setAttribute("color","#ef4444"),o.appendChild(n),this.markerOverlay=new r({element:o,positioning:"bottom-center",stopEvent:!1}),this.map.addOverlay(this.markerOverlay),e&&this.markerOverlay.setPosition(s),this.map.on("singleclick",this.handleMapClick)}destroyMap(){this.map&&(this.map.un("singleclick",this.handleMapClick),this.map.dispose(),this.map=void 0),this.markerOverlay=void 0}updateMarker(t){if(!this.map||!this.markerOverlay)return;if(null==(null==t?void 0:t.latitude)||null==(null==t?void 0:t.longitude))return void this.markerOverlay.setPosition(void 0);const i=p([t.longitude,t.latitude]),e=this.markerOverlay.getPosition();this.markerOverlay.setPosition(i),(!e||e[0]!==i[0]||e[1]!==i[1])&&this.map.getView().animate({center:i,zoom:16,duration:400})}async commitFromCoords(t,i){let e=null;if("function"==typeof this.reverseGeocode){this.isReverseGeocoding=!0;try{e=await this.reverseGeocode(t,i,{language:this.language})}catch(t){this.providerFailed.emit({phase:"reverseGeocode",error:t})}finally{this.isReverseGeocoding=!1}}this.commitValue({latitude:t,longitude:i,address:e,timestamp:(new Date).toISOString()})}scheduleSearch(t){if(null!=this.searchDebounceId&&(window.clearTimeout(this.searchDebounceId),this.searchDebounceId=null),0===t.trim().length)return this.suggestions=[],this.isSearching=!1,void(this.searchAbort&&this.searchAbort.abort());this.searchDebounceId=window.setTimeout((()=>{this.searchDebounceId=null,this.runSearch(t)}),this.searchDebounceMs)}async runSearch(t){if("function"!=typeof this.searchAddresses)return;this.searchAbort&&this.searchAbort.abort();const i=new AbortController;this.searchAbort=i;const e=i.signal;this.isSearching=!0;try{const i=await this.searchAddresses(t,{signal:e,countrySet:this.countrySet||void 0,language:this.language});if(e.aborted)return;this.suggestions=i}catch(t){if(e.aborted)return;if("AbortError"===(null==t?void 0:t.name))return;this.suggestions=[],this.providerFailed.emit({phase:"search",error:t})}finally{this.searchAbort===i&&(this.searchAbort=null,this.isSearching=!1)}}renderSearchPicker(t){return s("udp-popover",{open:this.isOpen,position:"bottom-start",toggleOnTriggerClick:!1,matchTriggerWidth:!0,onPopoverClose:this.handlePopoverClose},s("fluent-text-input",{slot:"trigger",ref:t=>this.internalInput=t,class:{"no-label":!this.label},value:this.searchQuery,name:this.name,placeholder:this.searchPlaceholder,disabled:this.disabled,readonly:this.readonly,appearance:"filled"===this.appearance?"filled-lighter":"outline",controlSize:this.controlSize,autocomplete:"off",onInput:this.handleSearchInput,onFocus:this.handleSearchFocus,onBlur:this.handleSearchBlur,onKeyDown:this.handleSearchKeyDown,onClick:this.handleSearchClick},this.label&&s("fluent-label",{required:this.required,disabled:this.disabled,onMouseDown:this.handleLabelMouseDown},this.label),t&&s("div",{slot:"end",class:"end-slot"},s("udp-fluent-icon-button",{class:"geo-button",iconName:"location",appearance:"transparent",size:"small",ariaLabel:this.geolocationButtonLabel,title:this.geolocationButtonLabel,loading:this.isLocating,disabled:this.disabled||this.isLocating,tabindex:-1,onMouseDown:this.handleGeoMouseDown,onClick:()=>{this.handleUseMyLocation()}}))),s("div",{slot:"content",class:"listbox-container"},this.renderListbox()))}renderListbox(){const t=this.searchQuery.trim(),i=this.isSearching,e=!this.isSearching&&0===this.suggestions.length&&t.length>0;return i||!this.isSearching&&this.suggestions.length>0||e?i?s("div",{class:"listbox-status","aria-live":"polite"},s("udp-spinner",{size:"tiny"}),s("span",null,"Searching…")):e?s("div",{class:"listbox-status listbox-status--empty","aria-live":"polite"},'No matches for "',t,'"'):s("fluent-listbox",null,this.suggestions.map(((t,i)=>s("fluent-option",{key:t.id,value:t.id,class:{active:i===this.highlightedIndex},onMouseDown:this.handleSuggestionMouseDown,onClick:()=>this.handleSuggestionSelect(t)},s("span",{slot:"checked-indicator"}),s("span",{class:"listbox-option-row"},s("udp-fluent-icon",{name:"location",size:"sm",class:"listbox-option-icon"}),s("span",{class:"listbox-option-text"},t.address.freeformAddress)))))):null}commitValue(t){var i,e;this.isInternalUpdate=!0,this.value=t;const s=null!==(e=null===(i=t.address)||void 0===i?void 0:i.freeformAddress)&&void 0!==e?e:"";this.searchQuery!==s&&(this.searchQuery=s,this.internalInput&&(this.internalInput.value=s)),this.updateMarker(t),this.valueChanged.emit(t)}render(){const t=!!this.error,i=this.error||this.hint,e=!i&&!this.includeErrorPadding,n=!this.hideAddressSearch,a=this.showGeolocationButton&&!this.readonly&&!this.disabled,l=this.showMap&&!this.tileUrlTemplate;return s(o,{key:"601cd4442b5d5e76e7ef0212a1e85519e4cca2ff",class:{"has-error":t,["size-"+this.controlSize]:!0,["appearance-"+this.appearance]:!0,disabled:this.disabled,readonly:this.readonly}},s("fluent-field",{key:"70ad6dd2d541b900c377eb4ec526730d4c516db3",class:{"no-message":e}},s("div",{key:"72a3bc5ce4421c26bb23b3da1f3ee14a3a16150c",slot:"input",class:"root"},!n&&this.label&&s("fluent-label",{key:"95bd83bcc2e7f3d0e3d6b4b70217864ab475b359",class:"field-label",required:this.required,disabled:this.disabled},this.label),n&&this.renderSearchPicker(a),this.showMap&&s("div",{key:"0792bd7c41542b80c99a84e3963cd938e1dc0986",class:{"map-wrap":!0,"is-loading":this.isReverseGeocoding},style:{height:this.mapHeight}},l&&s("div",{key:"4e30328fd6a6681ab04a227f815d89b3436d3bd7",class:"map-empty"},s("udp-text",{key:"b988050206716dc513c882555558d1a55922aa15",variant:"caption1",class:"map-empty-text"},"Map provider not configured.")),s("div",{key:"793021c95121c83745b2ff17f38836e136233078",ref:t=>this.mapEl=t,class:"map","aria-label":this.label?this.label+" map":"Location map"}),this.isReverseGeocoding&&s("div",{key:"d7733cd85c5516a2b3b5b436b0a9b14cca7fb759",class:"map-loading","aria-hidden":"true"},s("udp-spinner",{key:"01b866ebd737be06211eb239181557c3e42aff93",size:"small"})))),s("udp-text",{key:"6976838fbbe6b48f2d22a8d5d53148af448438eb",slot:"message",variant:"caption1",class:{message:!0,error:t,"include-error-padding":this.includeErrorPadding}},i)))}static get watchers(){return{value:[{onValueChange:0}],showMap:[{onShowMapChange:0}],mapHeight:[{onMapHeightChange:0}],tileUrlTemplate:[{onTileUrlChange:0}]}}static get style(){return":host{display:inline-block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}udp-popover{width:100%;display:block}fluent-text-input{width:100%;max-width:100%}.end-slot{display:inline-flex;align-items:center;margin-right:4px}.listbox-container{max-height:300px;overflow-y:auto}fluent-listbox{width:100%;background:var(--colorNeutralBackground1);border:none;border-radius:var(--borderRadiusMedium)}fluent-option{cursor:pointer}fluent-option:hover{background:var(--colorNeutralBackground1Hover)}fluent-option.active{box-shadow:inset 0 0 0 2px var(--colorNeutralStrokeAccessible)}fluent-option[disabled]{color:var(--colorNeutralForegroundDisabled);cursor:default}udp-popover::part(content){padding:0}.listbox-option-row{display:flex;align-items:center;gap:var(--spacingHorizontalS, 8px);min-width:0}.listbox-option-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.listbox-option-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listbox-status{display:flex;align-items:center;gap:var(--spacingHorizontalS, 8px);padding:var(--spacingVerticalS, 8px) var(--spacingHorizontalM, 12px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.listbox-status--empty{font-style:italic}fluent-text-input.no-label::part(label){display:none}.map-wrap{position:relative;width:100%;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);overflow:hidden;background-color:var(--colorNeutralBackground2, #fafafa)}.map{width:100%;height:100%;cursor:crosshair}:host(.disabled) .map,:host(.readonly) .map{cursor:grab}.map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}.map-empty-text{color:var(--colorNeutralForeground3, #707070);font-style:italic}.map-loading{position:absolute;top:var(--spacingVerticalS, 8px);right:var(--spacingHorizontalS, 8px);padding:var(--spacingVerticalXS, 4px);background-color:rgba(255, 255, 255, 0.9);border-radius:var(--borderRadiusMedium, 4px);z-index:2}:host(.disabled){opacity:0.6}:host(.has-error) .map-wrap{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}"}},[1,"udp-fluent-location-input",{value:[16],name:[1],label:[1],hint:[1],error:[1],includeErrorPadding:[4,"include-error-padding"],required:[4],disabled:[4],readonly:[4],showMap:[4,"show-map"],hideAddressSearch:[4,"hide-address-search"],mapHeight:[1,"map-height"],defaultCenter:[16],defaultZoom:[2,"default-zoom"],countrySet:[1,"country-set"],language:[1],tileUrlTemplate:[1,"tile-url-template"],searchAddresses:[16],reverseGeocode:[16],showGeolocationButton:[4,"show-geolocation-button"],geolocationButtonLabel:[1,"geolocation-button-label"],searchPlaceholder:[1,"search-placeholder"],searchDebounceMs:[2,"search-debounce-ms"],appearance:[1],controlSize:[1,"control-size"],searchQuery:[32],suggestions:[32],isSearching:[32],isOpen:[32],highlightedIndex:[32],isReverseGeocoding:[32],isLocating:[32]},void 0,{value:[{onValueChange:0}],showMap:[{onShowMapChange:0}],mapHeight:[{onMapHeightChange:0}],tileUrlTemplate:[{onTileUrlChange:0}]}]);function y(t){if(t instanceof GeolocationPositionError){if(t.code===GeolocationPositionError.PERMISSION_DENIED)return"permission";if(t.code===GeolocationPositionError.POSITION_UNAVAILABLE)return"unavailable";if(t.code===GeolocationPositionError.TIMEOUT)return"timeout"}return"unavailable"}const k=x,S=function(){"undefined"!=typeof customElements&&["udp-fluent-location-input","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-popover","udp-spinner","udp-text"].forEach((t=>{switch(t){case"udp-fluent-location-input":customElements.get(n(t))||customElements.define(n(t),x);break;case"udp-fluent-button":customElements.get(n(t))||m();break;case"udp-fluent-icon":customElements.get(n(t))||f();break;case"udp-fluent-icon-button":customElements.get(n(t))||b();break;case"udp-popover":customElements.get(n(t))||v();break;case"udp-spinner":customElements.get(n(t))||g();break;case"udp-text":customElements.get(n(t))||w()}}))};export{k as UdpFluentLocationInput,S as defineCustomElement}
+import{p as t,H as i,c as e,h as s,d as o,t as n}from"./index2.js";import{Map as a}from"ol";import l from"ol/View";import r from"ol/Overlay";import h from"ol/layer/Tile";import{XYZ as d}from"ol/source";import{defaults as c}from"ol/interaction/defaults";import{toLonLat as u,fromLonLat as p}from"ol/proj";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import"@fluentui/web-components/listbox.js";import"@fluentui/web-components/option.js";import"@fluentui/web-components/text-input.js";import{d as m}from"./udp-fluent-button2.js";import{d as f}from"./udp-fluent-icon2.js";import{d as v}from"./udp-fluent-icon-button2.js";import{d as b}from"./udp-popover2.js";import{d as g}from"./udp-spinner2.js";import{d as w}from"./udp-text2.js";const x=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChanged=e(this,"valueChanged",7),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.geolocationDenied=e(this,"geolocationDenied",7),this.providerFailed=e(this,"providerFailed",7),this.value=null,this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.showMap=!0,this.hideAddressSearch=!1,this.mapHeight="320px",this.defaultCenter={lat:49.2827,lng:-123.1207},this.defaultZoom=13,this.countrySet="",this.language="en-US",this.showGeolocationButton=!0,this.geolocationButtonLabel="Use my location",this.searchPlaceholder="Search an address",this.searchDebounceMs=300,this.appearance="outline",this.controlSize="medium",this.searchQuery="",this.suggestions=[],this.isSearching=!1,this.isOpen=!1,this.highlightedIndex=-1,this.isReverseGeocoding=!1,this.isLocating=!1,this.searchAbort=null,this.searchDebounceId=null,this.blurCloseTimeoutId=null,this.ignoreNextInputClick=!1,this.isInternalUpdate=!1,this.handleMapClick=t=>{if(this.disabled||this.readonly)return;const[i,e]=u(t.coordinate);this.commitFromCoords(e,i)},this.handleSearchInput=t=>{const i=t.target.value;this.searchQuery=i,this.highlightedIndex=-1,this.isOpen=i.trim().length>0,this.scheduleSearch(i)},this.handleSearchFocus=()=>{var t,i,e,s;if(this.disabled||this.readonly)return;null!=this.blurCloseTimeoutId&&(window.clearTimeout(this.blurCloseTimeoutId),this.blurCloseTimeoutId=null);const o=null!==(s=null===(e=null===(i=null===(t=this.value)||void 0===t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)||void 0===e?void 0:e.trim())&&void 0!==s?s:"",n=this.searchQuery.trim();n.length>0&&n!==o&&(this.isOpen=!0),this.inputFocus.emit()},this.handleSearchBlur=()=>{null!=this.blurCloseTimeoutId&&window.clearTimeout(this.blurCloseTimeoutId),this.blurCloseTimeoutId=window.setTimeout((()=>{this.blurCloseTimeoutId=null,this.isOpen=!1}),150),this.inputBlur.emit()},this.handleSearchClick=()=>{var t,i,e,s;if(this.disabled||this.readonly)return;if(this.ignoreNextInputClick)return void(this.ignoreNextInputClick=!1);if(this.isOpen)return;const o=null!==(s=null===(e=null===(i=null===(t=this.value)||void 0===t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)||void 0===e?void 0:e.trim())&&void 0!==s?s:"",n=this.searchQuery.trim();n.length>0&&n!==o&&(this.isOpen=!0)},this.handleSearchKeyDown=t=>{"Escape"!==t.key&&"Tab"!==t.key?0!==this.suggestions.length&&("ArrowDown"===t.key?(t.preventDefault(),this.isOpen=!0,this.highlightedIndex=(this.highlightedIndex+1)%this.suggestions.length):"ArrowUp"===t.key?(t.preventDefault(),this.isOpen=!0,this.highlightedIndex=this.highlightedIndex<=0?this.suggestions.length-1:this.highlightedIndex-1):"Enter"===t.key&&this.highlightedIndex>=0&&(t.preventDefault(),this.handleSuggestionSelect(this.suggestions[this.highlightedIndex]))):this.isOpen=!1},this.handleSuggestionSelect=t=>{this.searchQuery=t.address.freeformAddress,this.internalInput&&(this.internalInput.value=this.searchQuery),this.suggestions=[],this.isOpen=!1,this.commitValue({latitude:t.position.lat,longitude:t.position.lng,address:t.address,timestamp:(new Date).toISOString()})},this.handleSuggestionMouseDown=t=>{t.preventDefault()},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleLabelMouseDown=t=>{var i,e,s;this.disabled||this.readonly||(t.preventDefault(),this.ignoreNextInputClick=!0,this.searchQuery.trim().length>0&&(this.isOpen=!this.isOpen),null===(s=null===(e=null===(i=this.internalInput)||void 0===i?void 0:i.shadowRoot)||void 0===e?void 0:e.querySelector("input"))||void 0===s||s.focus())},this.handleGeoMouseDown=t=>{t.preventDefault()},this.handleUseMyLocation=async()=>{if(!this.disabled&&!this.readonly)if("geolocation"in navigator){this.isLocating=!0;try{const t=await function(t){return new Promise(((i,e)=>{navigator.geolocation.getCurrentPosition(i,e,t)}))}({enableHighAccuracy:!0,timeout:3e4,maximumAge:0});await this.commitFromCoords(t.coords.latitude,t.coords.longitude)}catch(t){this.geolocationDenied.emit({reason:y(t),message:t instanceof GeolocationPositionError?t.message:void 0})}finally{this.isLocating=!1}}else this.geolocationDenied.emit({reason:"unsupported"})}}componentWillLoad(){var t,i,e;this.searchQuery=null!==(e=null===(i=null===(t=this.value)||void 0===t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)&&void 0!==e?e:""}componentDidLoad(){this.internalInput&&this.searchQuery&&(this.internalInput.value=this.searchQuery),this.showMap&&this.initMap()}disconnectedCallback(){this.searchAbort&&this.searchAbort.abort(),null!=this.searchDebounceId&&window.clearTimeout(this.searchDebounceId),null!=this.blurCloseTimeoutId&&window.clearTimeout(this.blurCloseTimeoutId),this.destroyMap()}onValueChange(t){var i,e;this.isInternalUpdate?this.isInternalUpdate=!1:(this.searchQuery=null!==(e=null===(i=null==t?void 0:t.address)||void 0===i?void 0:i.freeformAddress)&&void 0!==e?e:"",this.internalInput&&(this.internalInput.value=this.searchQuery),this.updateMarker(null!=t?t:null))}onShowMapChange(t){t&&!this.map?this.initMap():!t&&this.map&&this.destroyMap()}onMapHeightChange(){this.map&&requestAnimationFrame((()=>{var t;return null===(t=this.map)||void 0===t?void 0:t.updateSize()}))}onTileUrlChange(){this.map?(this.destroyMap(),this.initMap()):this.showMap&&this.initMap()}initMap(){var t,i;if(!this.mapEl||!this.tileUrlTemplate)return;const e=null!=(null===(t=this.value)||void 0===t?void 0:t.latitude)&&null!=(null===(i=this.value)||void 0===i?void 0:i.longitude),s=p(e?[this.value.longitude,this.value.latitude]:[this.defaultCenter.lng,this.defaultCenter.lat]);this.map=new a({target:this.mapEl,controls:[],interactions:c({keyboard:!1}),layers:[new h({source:new d({url:this.tileUrlTemplate})})],view:new l({center:s,zoom:e?16:this.defaultZoom})});const o=document.createElement("div");o.className="map-marker";const n=document.createElement("udp-fluent-icon");n.setAttribute("name","location"),n.setAttribute("variant","filled"),n.setAttribute("size","lg"),n.setAttribute("color","#ef4444"),o.appendChild(n),this.markerOverlay=new r({element:o,positioning:"bottom-center",stopEvent:!1}),this.map.addOverlay(this.markerOverlay),e&&this.markerOverlay.setPosition(s),this.map.on("singleclick",this.handleMapClick)}destroyMap(){this.map&&(this.map.un("singleclick",this.handleMapClick),this.map.dispose(),this.map=void 0),this.markerOverlay=void 0}updateMarker(t){if(!this.map||!this.markerOverlay)return;if(null==(null==t?void 0:t.latitude)||null==(null==t?void 0:t.longitude))return void this.markerOverlay.setPosition(void 0);const i=p([t.longitude,t.latitude]),e=this.markerOverlay.getPosition();this.markerOverlay.setPosition(i),(!e||e[0]!==i[0]||e[1]!==i[1])&&this.map.getView().animate({center:i,zoom:16,duration:400})}async commitFromCoords(t,i){let e=null;if("function"==typeof this.reverseGeocode){this.isReverseGeocoding=!0;try{e=await this.reverseGeocode(t,i,{language:this.language})}catch(t){this.providerFailed.emit({phase:"reverseGeocode",error:t})}finally{this.isReverseGeocoding=!1}}this.commitValue({latitude:t,longitude:i,address:e,timestamp:(new Date).toISOString()})}scheduleSearch(t){if(null!=this.searchDebounceId&&(window.clearTimeout(this.searchDebounceId),this.searchDebounceId=null),0===t.trim().length)return this.suggestions=[],this.isSearching=!1,void(this.searchAbort&&this.searchAbort.abort());this.searchDebounceId=window.setTimeout((()=>{this.searchDebounceId=null,this.runSearch(t)}),this.searchDebounceMs)}async runSearch(t){if("function"!=typeof this.searchAddresses)return;this.searchAbort&&this.searchAbort.abort();const i=new AbortController;this.searchAbort=i;const e=i.signal;this.isSearching=!0;try{const i=await this.searchAddresses(t,{signal:e,countrySet:this.countrySet||void 0,language:this.language});if(e.aborted)return;this.suggestions=i}catch(t){if(e.aborted)return;if("AbortError"===(null==t?void 0:t.name))return;this.suggestions=[],this.providerFailed.emit({phase:"search",error:t})}finally{this.searchAbort===i&&(this.searchAbort=null,this.isSearching=!1)}}renderSearchPicker(t){return s("udp-popover",{open:this.isOpen,position:"bottom-start",toggleOnTriggerClick:!1,matchTriggerWidth:!0,onPopoverClose:this.handlePopoverClose},s("fluent-text-input",{slot:"trigger",ref:t=>this.internalInput=t,class:{"no-label":!this.label},value:this.searchQuery,name:this.name,placeholder:this.searchPlaceholder,disabled:this.disabled,readonly:this.readonly,appearance:"filled"===this.appearance?"filled-lighter":"outline",controlSize:this.controlSize,autocomplete:"off",onInput:this.handleSearchInput,onFocus:this.handleSearchFocus,onBlur:this.handleSearchBlur,onKeyDown:this.handleSearchKeyDown,onClick:this.handleSearchClick},this.label&&s("fluent-label",{required:this.required,disabled:this.disabled,onMouseDown:this.handleLabelMouseDown},this.label),t&&s("div",{slot:"end",class:"end-slot"},s("udp-fluent-icon-button",{class:"geo-button",iconName:"location",appearance:"transparent",size:"small",ariaLabel:this.geolocationButtonLabel,title:this.geolocationButtonLabel,loading:this.isLocating,disabled:this.disabled||this.isLocating,tabindex:-1,onMouseDown:this.handleGeoMouseDown,onClick:()=>{this.handleUseMyLocation()}}))),s("div",{slot:"content",class:"listbox-container"},this.renderListbox()))}renderListbox(){const t=this.searchQuery.trim(),i=this.isSearching,e=!this.isSearching&&0===this.suggestions.length&&t.length>0;return i||!this.isSearching&&this.suggestions.length>0||e?i?s("div",{class:"listbox-status","aria-live":"polite"},s("udp-spinner",{size:"tiny"}),s("span",null,"Searching…")):e?s("div",{class:"listbox-status listbox-status--empty","aria-live":"polite"},'No matches for "',t,'"'):s("fluent-listbox",null,this.suggestions.map(((t,i)=>s("fluent-option",{key:t.id,value:t.id,class:{active:i===this.highlightedIndex},onMouseDown:this.handleSuggestionMouseDown,onClick:()=>this.handleSuggestionSelect(t)},s("span",{slot:"checked-indicator"}),s("span",{class:"listbox-option-row"},s("udp-fluent-icon",{name:"location",size:"sm",class:"listbox-option-icon"}),s("span",{class:"listbox-option-text"},t.address.freeformAddress)))))):null}commitValue(t){var i,e;this.isInternalUpdate=!0,this.value=t;const s=null!==(e=null===(i=t.address)||void 0===i?void 0:i.freeformAddress)&&void 0!==e?e:"";this.searchQuery!==s&&(this.searchQuery=s,this.internalInput&&(this.internalInput.value=s)),this.updateMarker(t),this.valueChanged.emit(t)}render(){const t=!!this.error,i=this.error||this.hint,e=!i&&!this.includeErrorPadding,n=!this.hideAddressSearch,a=this.showGeolocationButton&&!this.readonly&&!this.disabled,l=this.showMap&&!this.tileUrlTemplate;return s(o,{key:"f1647d4aefa6ba6da591eacaddf5543f4c8860ae",class:{"has-error":t,["size-"+this.controlSize]:!0,["appearance-"+this.appearance]:!0,disabled:this.disabled,readonly:this.readonly}},s("fluent-field",{key:"3f5c9b6c67c34974c259b713bfe9cc8d0df3fac5",class:{"no-message":e}},s("div",{key:"be083a603cadb7a6951d5ee7d270ed7194fedc75",slot:"input",class:"root"},!n&&this.label&&s("fluent-label",{key:"4d757d73ef0ab47cdabd76f78cb987571965f0e8",class:"field-label",required:this.required,disabled:this.disabled},this.label),n&&this.renderSearchPicker(a),this.showMap&&s("div",{key:"01c8b0cc7cb2fe9cbbbd1e52ba424729ba639692",class:{"map-wrap":!0,"is-loading":this.isReverseGeocoding},style:{height:this.mapHeight}},l&&s("div",{key:"138cd191f359f2d4123d6b296a17a64cbdd045a7",class:"map-empty"},s("udp-text",{key:"4c0d835212cd57c7b9a326ce823d2c294c64abcb",variant:"caption1",class:"map-empty-text"},"Map provider not configured.")),s("div",{key:"27b6abd55835869484fe06ea3fe3b6f6cc58e4af",ref:t=>this.mapEl=t,class:"map","aria-label":this.label?this.label+" map":"Location map"}),this.isReverseGeocoding&&s("div",{key:"ddbcc61cb0e401e3553c29a184fc188d90a4e94c",class:"map-loading","aria-hidden":"true"},s("udp-spinner",{key:"4a2932d0f22c352ddbc4c49f90be693623776fb7",size:"small"})))),s("udp-text",{key:"6adfe5777d9e8f32a508aa51c6ec1625cfef0adb",slot:"message",variant:"caption1",class:{message:!0,error:t,"include-error-padding":this.includeErrorPadding}},i)))}static get watchers(){return{value:[{onValueChange:0}],showMap:[{onShowMapChange:0}],mapHeight:[{onMapHeightChange:0}],tileUrlTemplate:[{onTileUrlChange:0}]}}static get style(){return":host{display:inline-block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}udp-popover{width:100%;display:block}fluent-text-input{width:100%;max-width:100%}.end-slot{display:inline-flex;align-items:center;margin-right:4px}.listbox-container{max-height:300px;overflow-y:auto}fluent-listbox{width:100%;background:var(--colorNeutralBackground1);border:none;border-radius:var(--borderRadiusMedium)}fluent-option{cursor:pointer}fluent-option:hover{background:var(--colorNeutralBackground1Hover)}fluent-option.active{box-shadow:inset 0 0 0 2px var(--colorNeutralStrokeAccessible)}fluent-option[disabled]{color:var(--colorNeutralForegroundDisabled);cursor:default}udp-popover::part(content){padding:0}.listbox-option-row{display:flex;align-items:center;gap:var(--spacingHorizontalS, 8px);min-width:0}.listbox-option-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.listbox-option-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listbox-status{display:flex;align-items:center;gap:var(--spacingHorizontalS, 8px);padding:var(--spacingVerticalS, 8px) var(--spacingHorizontalM, 12px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.listbox-status--empty{font-style:italic}fluent-text-input.no-label::part(label){display:none}.map-wrap{position:relative;width:100%;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);overflow:hidden;background-color:var(--colorNeutralBackground2, #fafafa)}.map{width:100%;height:100%;cursor:crosshair}:host(.disabled) .map,:host(.readonly) .map{cursor:grab}.map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}.map-empty-text{color:var(--colorNeutralForeground3, #707070);font-style:italic}.map-loading{position:absolute;top:var(--spacingVerticalS, 8px);right:var(--spacingHorizontalS, 8px);padding:var(--spacingVerticalXS, 4px);background-color:rgba(255, 255, 255, 0.9);border-radius:var(--borderRadiusMedium, 4px);z-index:2}:host(.disabled){opacity:0.6}:host(.has-error) .map-wrap{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}"}},[1,"udp-fluent-location-input",{value:[16],name:[1],label:[1],hint:[1],error:[1],includeErrorPadding:[4,"include-error-padding"],required:[4],disabled:[4],readonly:[4],showMap:[4,"show-map"],hideAddressSearch:[4,"hide-address-search"],mapHeight:[1,"map-height"],defaultCenter:[16],defaultZoom:[2,"default-zoom"],countrySet:[1,"country-set"],language:[1],tileUrlTemplate:[1,"tile-url-template"],searchAddresses:[16],reverseGeocode:[16],showGeolocationButton:[4,"show-geolocation-button"],geolocationButtonLabel:[1,"geolocation-button-label"],searchPlaceholder:[1,"search-placeholder"],searchDebounceMs:[2,"search-debounce-ms"],appearance:[1],controlSize:[1,"control-size"],searchQuery:[32],suggestions:[32],isSearching:[32],isOpen:[32],highlightedIndex:[32],isReverseGeocoding:[32],isLocating:[32]},void 0,{value:[{onValueChange:0}],showMap:[{onShowMapChange:0}],mapHeight:[{onMapHeightChange:0}],tileUrlTemplate:[{onTileUrlChange:0}]}]);function y(t){if(t instanceof GeolocationPositionError){if(t.code===GeolocationPositionError.PERMISSION_DENIED)return"permission";if(t.code===GeolocationPositionError.POSITION_UNAVAILABLE)return"unavailable";if(t.code===GeolocationPositionError.TIMEOUT)return"timeout"}return"unavailable"}const k=x,S=function(){"undefined"!=typeof customElements&&["udp-fluent-location-input","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-popover","udp-spinner","udp-text"].forEach((t=>{switch(t){case"udp-fluent-location-input":customElements.get(n(t))||customElements.define(n(t),x);break;case"udp-fluent-button":customElements.get(n(t))||m();break;case"udp-fluent-icon":customElements.get(n(t))||f();break;case"udp-fluent-icon-button":customElements.get(n(t))||v();break;case"udp-popover":customElements.get(n(t))||b();break;case"udp-spinner":customElements.get(n(t))||g();break;case"udp-text":customElements.get(n(t))||w()}}))};export{k as UdpFluentLocationInput,S as defineCustomElement}

package/dist/components/udp-fluent-number-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UdpFluentNumberInput extends Components.UdpFluentNumberInput, HTMLElement {}
+export const UdpFluentNumberInput: {
+    prototype: UdpFluentNumberInput;
+    new (): UdpFluentNumberInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/udp-fluent-number-input.js

@@ -0,0 +1,2 @@
+import "../stencil-library/stencil-library.css";
+import{p as t,H as e,c as o,h as i,d as s,t as l}from"./index2.js";import"@fluentui/web-components/text-input.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as n}from"./udp-fluent-icon2.js";import{d as a}from"./udp-text2.js";import{d as r}from"./udp-tooltip2.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChanged=o(this,"valueChanged",7),this.inputBlur=o(this,"inputBlur",7),this.inputFocus=o(this,"inputFocus",7),this.liveValue=null,this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.autofocus=!1,this.autocomplete="off",this.appearance="outline",this.controlSize="medium",this.handleInput=t=>{t.stopPropagation();const e=t.target;this.liveValue=e.value,this.valueChanged.emit(e.value)},this.handleBlur=()=>{var t,e;if(null!=this.decimals&&this.internalInput){const o=parseFloat(null!==(e=null!==(t=this.liveValue)&&void 0!==t?t:this.value)&&void 0!==e?e:"");if(!isNaN(o)){const t=o.toFixed(this.decimals);this.internalInput.value=t,this.liveValue=t,this.valueChanged.emit(t)}}this.inputBlur.emit()}}componentDidLoad(){this.internalInput&&null!=this.value&&(this.internalInput.value=this.value),this.applyNumberAttrs()}componentDidUpdate(){this.applyNumberAttrs()}applyNumberAttrs(){var t,e,o,i,s;const l=null===(e=null===(t=this.internalInput)||void 0===t?void 0:t.shadowRoot)||void 0===e?void 0:e.querySelector("input");l&&(l.setAttribute("inputmode","decimal"),l.min=null!==(o=this.min)&&void 0!==o?o:"",l.max=null!==(i=this.max)&&void 0!==i?i:"",l.step=null!==(s=this.step)&&void 0!==s?s:"")}select(){var t;return null===(t=this.internalInput)||void 0===t||t.select(),Promise.resolve()}render(){const t=!!this.error,e=this.error||this.hint;return i(s,{key:"f87601660bf0d04ca3a617768a6178a9b83b3c39",class:{"has-error":t}},i("fluent-field",{key:"0a6bfa77b060b198f431cfd01dce8626d22b795c",class:{"no-message":!e&&!this.includeErrorPadding}},i("fluent-text-input",{key:"70ee74cccec3b0223e4c36f6bec74a167dd66d8b",ref:t=>this.internalInput=t,slot:"input",class:{"no-label":!this.label},name:this.name,value:this.value,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readonly:this.readonly,autofocus:this.autofocus,autocomplete:this.autocomplete,spellcheck:"false",appearance:this.appearance,controlSize:this.controlSize,onInput:this.handleInput,onBlur:this.handleBlur,onFocus:()=>this.inputFocus.emit(),onInvalid:t=>t.preventDefault()},i("slot",{key:"72120dfefa9008c4283629e119887ff3e32d3894",slot:"start",name:"start"}),i("slot",{key:"3df3db74bd839bab72aa758468359451e0019c0b",slot:"end",name:"end"}),this.label&&i("fluent-label",{key:"9e4ad92775c6af795ffc5762b5f8045cd327ea6d",required:this.required,disabled:this.disabled},this.label,this.popupHint&&i("udp-tooltip",{key:"97261e93f5652e11beb4c92aad11ab1e6e76c877",content:this.popupHint,positioning:"above"},i("udp-fluent-icon",{key:"30894a2646b319aaccd96618aa6d5a8f5509769b",name:"info",size:"xs",class:"popup-hint-icon"})))),i("udp-text",{key:"34ba101a49953809cb238f2b1c1cb4709661707a",slot:"message",variant:"caption1",class:{message:!0,error:t,includeErrorPadding:this.includeErrorPadding}},e)))}static get delegatesFocus(){return!0}static get style(){return"fluent-text-input[disabled]::part(control){color:var(--colorNeutralForegroundDisabled);-webkit-text-fill-color:var(--colorNeutralForegroundDisabled)}fluent-text-input[disabled]::part(root){background-color:var(--colorNeutralBackgroundDisabled)}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-text-input::part(control):-webkit-autofill,fluent-text-input::part(control):-webkit-autofill:hover,fluent-text-input::part(control):-webkit-autofill:focus,fluent-text-input::part(control):-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--colorNeutralBackground1) inset !important;-webkit-text-fill-color:var(--colorNeutralForeground1) !important;transition:background-color 5000s ease-in-out 0s}:host{display:block;width:100%}fluent-field{width:100%}fluent-text-input{width:100%;max-width:100%}.message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-text-input.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}:host(.has-error) fluent-text-input::part(root){border-color:var(--colorPaletteRedBorder2)}:host(.has-error:focus-within) fluent-text-input::part(root){border-color:var(--colorNeutralStroke1)}"}},[273,"udp-fluent-number-input",{value:[1],name:[1],label:[1],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"],placeholder:[1],required:[4],disabled:[4],readonly:[4],autofocus:[4],autocomplete:[1],appearance:[1],controlSize:[1,"control-size"],min:[1],max:[1],step:[1],decimals:[2],select:[64]}]),d=u,c=function(){"undefined"!=typeof customElements&&["udp-fluent-number-input","udp-fluent-icon","udp-text","udp-tooltip"].forEach((t=>{switch(t){case"udp-fluent-number-input":customElements.get(l(t))||customElements.define(l(t),u);break;case"udp-fluent-icon":customElements.get(l(t))||n();break;case"udp-text":customElements.get(l(t))||a();break;case"udp-tooltip":customElements.get(l(t))||r()}}))};export{d as UdpFluentNumberInput,c as defineCustomElement}

package/dist/components/udp-fluent-radio-group2.js

@@ -1 +1 @@
-import{p as e,H as t,c as i,h as s,d as o,t as a}from"./index2.js";import"@fluentui/web-components/radio-group.js";import"@fluentui/web-components/radio.js";import"@fluentui/web-components/field.js";import{d as n}from"./udp-fluent-icon2.js";import{d as l}from"./udp-text2.js";import{d}from"./udp-tooltip2.js";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.radioRefs=new Map,this.disabled=!1,this.orientation="horizontal",this.includeErrorPadding=!0,this.handleChange=e=>{e.stopPropagation(),this.valueChanged.emit(e.target.value)},this.handleLabelClick=(e,t)=>{if(this.disabled||t)return;const i=Array.from(this.el.shadowRoot.querySelectorAll("fluent-radio")).find((t=>t.value===e));i&&i.click()}}componentDidLoad(){this.internalInput&&null!=this.value&&requestAnimationFrame((()=>{this.internalInput.value=this.value}))}componentDidRender(){var e;this.internalInput&&null!=this.value&&(this.internalInput.value=this.value),null===(e=this.items)||void 0===e||e.forEach((e=>{const t=this.radioRefs.get(e.value);t&&t.toggleAttribute("disabled",e.disabled||!1)}))}render(){var e;const t=!!this.error,i=this.error||this.hint;return s(o,{key:"d362c805087543ed3781aaec4ce39faf1311af70"},s("fluent-field",{key:"e647409f786e725a45ead081a86164fb51616756","label-position":"above",class:{"no-label":!this.label,"no-message":!i&&!this.includeErrorPadding}},s("fluent-label",{key:"5480bdd2fcbfb0e248a5e65cb11c5e7f204c0827",slot:"label",disabled:this.disabled},this.label,this.popupHint&&s("udp-tooltip",{key:"d962af5d2625c558c20ad9e5e5e9da83a896503d",content:this.popupHint,positioning:"above"},s("udp-fluent-icon",{key:"ca29d2ead9264be5bfd22d3acde71f9b19e3cfb7",name:"info",size:"xs",class:"popup-hint-icon"}))),s("fluent-radio-group",{key:"14a43823ad8f347082d2ba6e645a6c06c6cd6fcf",ref:e=>this.internalInput=e,slot:"input",name:this.name,disabled:this.disabled,orientation:this.orientation,onChange:this.handleChange},null===(e=this.items)||void 0===e?void 0:e.map((e=>s("fluent-field",{"label-position":"after"},s("fluent-label",{slot:"label",onClick:()=>this.handleLabelClick(e.value,e.disabled)},e.label),s("fluent-radio",{slot:"input",value:e.value,disabled:e.disabled,ref:t=>this.radioRefs.set(e.value,t)}))))),s("udp-text",{key:"6adbc14b96274ccba3d0d916f600b588dcf4e005",slot:"message",variant:"caption1",class:{message:!0,error:t,includeErrorPadding:this.includeErrorPadding}},i)))}static get delegatesFocus(){return!0}get el(){return this}static get style(){return".message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-field.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}"}},[17,"udp-fluent-radio-group",{items:[16],name:[1],label:[1],disabled:[4],orientation:[1],value:[1],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"]}]);function u(){"undefined"!=typeof customElements&&["udp-fluent-radio-group","udp-fluent-icon","udp-text","udp-tooltip"].forEach((e=>{switch(e){case"udp-fluent-radio-group":customElements.get(a(e))||customElements.define(a(e),r);break;case"udp-fluent-icon":customElements.get(a(e))||n();break;case"udp-text":customElements.get(a(e))||l();break;case"udp-tooltip":customElements.get(a(e))||d()}}))}export{r as U,u as d}
+import{p as e,H as t,c as i,h as s,d as o,t as n}from"./index2.js";import"@fluentui/web-components/radio-group.js";import"@fluentui/web-components/radio.js";import"@fluentui/web-components/field.js";import{d as a}from"./udp-fluent-icon2.js";import{d as l}from"./udp-text2.js";import{d as r}from"./udp-tooltip2.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.radioRefs=new Map,this.disabled=!1,this.orientation="horizontal",this.includeErrorPadding=!0,this.handleChange=e=>{e.stopPropagation(),this.valueChanged.emit(e.target.value)},this.handleLabelClick=(e,t)=>{if(this.disabled||t)return;const i=Array.from(this.el.shadowRoot.querySelectorAll("fluent-radio")).find((t=>t.value===e));i&&i.click()}}componentDidLoad(){this.internalInput&&null!=this.value&&requestAnimationFrame((()=>{this.internalInput.value=this.value}))}componentDidRender(){var e;this.internalInput&&null!=this.value&&(this.internalInput.value=this.value),null===(e=this.items)||void 0===e||e.forEach((e=>{const t=this.radioRefs.get(e.value);t&&t.toggleAttribute("disabled",e.disabled||!1)}))}render(){var e;const t=!!this.error,i=this.error||this.hint;return s(o,{key:"310105e91fd86663ac9db8daa7305f8c6dff9c27"},s("fluent-field",{key:"88ac237d7e1f5700dec8be7f18ef057bc611f7db","label-position":"above",class:{"no-label":!this.label,"no-message":!i&&!this.includeErrorPadding}},s("fluent-label",{key:"1911ee90e0bf02780ddeb1ceec4d57d7c7c03170",slot:"label",disabled:this.disabled},this.label,this.popupHint&&s("udp-tooltip",{key:"a917bcd2e9b5c583dfc1c2f582b21966dc1da1ff",content:this.popupHint,positioning:"above"},s("udp-fluent-icon",{key:"149612a75db4b940228b65a45fcb398fe388dade",name:"info",size:"xs",class:"popup-hint-icon"}))),s("fluent-radio-group",{key:"4b7608cb7452a5a195c1e2b07e0b215899308d1c",ref:e=>this.internalInput=e,slot:"input",name:this.name,disabled:this.disabled,orientation:this.orientation,onChange:this.handleChange},null===(e=this.items)||void 0===e?void 0:e.map((e=>s("fluent-field",{"label-position":"after"},s("fluent-label",{slot:"label",onClick:()=>this.handleLabelClick(e.value,e.disabled)},e.label),s("fluent-radio",{slot:"input",value:e.value,disabled:e.disabled,ref:t=>this.radioRefs.set(e.value,t)}))))),s("udp-text",{key:"2902bac054f7096a946566bc494ef7783a958406",slot:"message",variant:"caption1",class:{message:!0,error:t,includeErrorPadding:this.includeErrorPadding}},i)))}static get delegatesFocus(){return!0}get el(){return this}static get style(){return".message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-field.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}"}},[17,"udp-fluent-radio-group",{items:[16],name:[1],label:[1],disabled:[4],orientation:[1],value:[1],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"]}]);function u(){"undefined"!=typeof customElements&&["udp-fluent-radio-group","udp-fluent-icon","udp-text","udp-tooltip"].forEach((e=>{switch(e){case"udp-fluent-radio-group":customElements.get(n(e))||customElements.define(n(e),d);break;case"udp-fluent-icon":customElements.get(n(e))||a();break;case"udp-text":customElements.get(n(e))||l();break;case"udp-tooltip":customElements.get(n(e))||r()}}))}export{d as U,u as d}