@luzmo/lucero 2.5.2 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/color-area/color-area.d.ts +15 -0
- package/components/color-area/index.cjs +1 -1
- package/components/color-area/index.d.ts +1 -0
- package/components/color-area/index.js +1 -1
- package/components/color-area-CFBE-rG3.cjs +80 -0
- package/components/{color-area-qlEAp8ZN.js → color-area-GGa8KJyd.js} +85 -44
- package/components/color-handle/index.cjs +1 -1
- package/components/color-handle/index.js +1 -1
- package/components/{color-handle-Dc0uLgkf.js → color-handle-Ya92rdpA.js} +5 -2
- package/components/{color-handle-BE0Z1gTU.cjs → color-handle-hJ7Kblh4.cjs} +1 -1
- package/components/color-menu/color-menu.d.ts +11 -0
- package/components/color-menu/index.cjs +1 -1
- package/components/color-menu/index.d.ts +1 -0
- package/components/color-menu/index.js +1 -1
- package/components/{color-menu-Cus3S-Re.cjs → color-menu-COhe5VUB.cjs} +1 -1
- package/components/{color-menu-BxFQnH79.js → color-menu-Ct3f01bI.js} +6 -3
- package/components/color-picker/color-picker.d.ts +13 -0
- package/components/color-picker/index.cjs +1 -1
- package/components/color-picker/index.d.ts +1 -0
- package/components/color-picker/index.js +1 -1
- package/components/{color-picker-orFSIqoZ.js → color-picker-DWERcNZi.js} +5 -2
- package/components/{color-picker-BTT1O-76.cjs → color-picker-ELa0yF2F.cjs} +1 -1
- package/components/color-slider/color-slider.d.ts +17 -0
- package/components/color-slider/index.cjs +1 -1
- package/components/color-slider/index.d.ts +1 -0
- package/components/color-slider/index.js +1 -1
- package/components/{color-slider-X1EArAnx.js → color-slider-DNd_ZrD6.js} +95 -56
- package/components/color-slider-IYBn2DL7.cjs +58 -0
- package/components/index.cjs +1 -1
- package/components/index.js +8 -8
- package/components/interaction-BjXWVy_C.cjs +18 -0
- package/components/interaction-BpCLJ1OV.js +83 -0
- package/components/number-field/index.cjs +1 -1
- package/components/number-field/index.js +1 -1
- package/components/number-field/number-field.d.ts +4 -0
- package/components/{number-field-Ceeli_mh.cjs → number-field-CV7g2Q20.cjs} +2 -2
- package/components/{number-field-D9UqpqpW.js → number-field-Crol6vc9.js} +15 -9
- package/components/slider/index.cjs +1 -1
- package/components/slider/index.d.ts +1 -0
- package/components/slider/index.js +1 -1
- package/components/slider/slider.d.ts +18 -0
- package/components/{slider-Ch7OgTdj.js → slider-BFTuAXK1.js} +167 -151
- package/components/slider-Ce6qgPZ4.cjs +136 -0
- package/components/{streaming-listener-Bfyk6Fsx.cjs → streaming-listener-BzGZUHkj.cjs} +1 -1
- package/components/{streaming-listener-B6mDl4pZ.js → streaming-listener-DyS3scAi.js} +1 -1
- package/components/utils.cjs +1 -1
- package/components/utils.js +1 -1
- package/custom-elements.json +1 -1
- package/package.json +1 -1
- package/standalone/chunks/color-area-D-AVcZza.js +66 -0
- package/standalone/chunks/{color-handle-BLQiuRSS.js → color-handle-DO7dxFGx.js} +1 -1
- package/standalone/chunks/{color-menu-BDZh85nX.js → color-menu-DIX2y9m_.js} +1 -1
- package/standalone/chunks/color-slider-MSADvkPC.js +50 -0
- package/standalone/chunks/interaction-BQyflxg-.js +2 -0
- package/standalone/chunks/{number-field-Dc4nBa6l.js → number-field-BoIKbmIv.js} +2 -2
- package/standalone/chunks/{streaming-listener-DbMoHlSj.js → streaming-listener-0FSzb9QY.js} +1 -1
- package/standalone/color-area.js +1 -1
- package/standalone/color-handle.js +1 -1
- package/standalone/color-menu.js +1 -1
- package/standalone/color-picker.js +1 -1
- package/standalone/color-slider.js +1 -1
- package/standalone/manifest.json +7 -6
- package/standalone/number-field.js +1 -1
- package/standalone/slider.js +11 -10
- package/standalone/utils.js +1 -1
- package/utils/reactive-controllers/interaction.d.ts +85 -0
- package/components/color-area-D1fRozE0.cjs +0 -80
- package/components/color-slider-9Ck28Qdk.cjs +0 -57
- package/components/slider-C1AdDTfB.cjs +0 -135
- package/standalone/chunks/color-area-BCI2oMGd.js +0 -66
- package/standalone/chunks/color-slider-Bipcekrc.js +0 -49
package/package.json
CHANGED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
|
|
2
|
+
import"../tokens.js";import{c as e,y as t}from"./lit-DWANyjiY.js";import{g as n,i as r,l as i,u as a,y as o}from"./lucero-runtime-DMlHjBe_.js";import{t as s}from"./language-resolution-BwIkGyuH.js";import{a as c,t as l}from"./platform-wNs7qaiE.js";import"./color-handle-DO7dxFGx.js";import{n as u,t as d}from"./interaction-BQyflxg-.js";import{t as f}from"./color-controller-BlFueK6Y.js";import{t as p}from"./streaming-listener-0FSzb9QY.js";var m=`@media (forced-colors:active){:host{--highcontrast-color-area-border-color-disabled:GrayText;--highcontrast-color-area-border-color:Canvas;--highcontrast-color-area-fill-color-disabled:Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width,64px);min-block-size:var(--luzmo-color-area-min-height,64px);inline-size:var(--luzmo-color-area-width,192px);block-size:var(--luzmo-color-area-height,192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius,var(--luzmo-border-radius-s));display:inline-block;position:relative;border:var(--luzmo-color-area-border-width,var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color,var(--luzmo-color-area-border-color,var(--luzmo-border-color)))!important}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled,var(--luzmo-color-area-disabled-background-color,var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width,var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)!important}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width,192px) - var(--luzmo-border-width)));inset-block-start:0}:host([dir=rtl]) .handle{inset-inline-end:0}.handle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){inset-inline-end:0}.gradient{border-radius:var(--luzmo-color-area-border-radius,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width), 0)}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}`,h=class extends a{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.labelX=`saturation`,this.labelY=`luminosity`,this.isLTR=!0,this.languageResolver=new s(this),this.colorController=new f(this,{manageAs:`hsv`}),this._interaction=new d(this,{value:()=>[this.x,this.y],isEqual:(e,t)=>e[0]===t[0]&&e[1]===t[1]}),this.activeAxis=`x`,this.step=.01,this.altered=0,this.activeKeys=/* @__PURE__ */ new Set,this._valueChanged=!1,this._pointerDown=!1,this.resizeRafId=0,this.handleResize=e=>{let t=e.at(-1);t&&(this.resizeRafId&&cancelAnimationFrame(this.resizeRafId),this.resizeRafId=requestAnimationFrame(()=>{this.resizeRafId=0,this.boundingClientRect=t.contentRect,this.requestUpdate()}))}}static get styles(){return[t(m)]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.colorValue}get color(){return this.colorController.colorValue}set color(e){this.colorController.color=e}get x(){return this.colorController.color.hsv.s/100}set x(e){if(e===this.x)return;let t=this.x;this.inputX?(this.inputX.value=e.toString(),this.colorController.color.set(`s`,this.inputX.valueAsNumber*100)):this.colorController.color.set(`s`,e*100),this.requestUpdate(`x`,t)}get y(){return this.colorController.color.hsv.v/100}set y(e){if(e===this.y)return;let t=this.y;this.inputY&&(this.inputY.value=e.toString(),this.colorController.color.set(`v`,this.inputY.valueAsNumber*100)),this.requestUpdate(`y`,t)}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.activeAxis===`x`?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this.activeKeys.clear(),this._interaction.endKeyboard(),!this._pointerDown&&(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){let{code:t}=e;if(this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(e=>!!e).length,t.search(`Arrow`)===0||t.search(`Page`)===0||t.search(`Home`)===0||t.search(`End`)===0){if(e.preventDefault(),this.disabled||!this._interaction.keyDown(t))return;if(this.disabled){this._interaction.end();return}this.activeKeys.add(t),this.handleKeypress()}}handleKeypress(){let e=0,t=0,n=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(r=>{switch(r){case`ArrowUp`:t=n;break;case`ArrowDown`:t=n*-1;break;case`ArrowLeft`:e=this.step*(this.isLTR?-1:1);break;case`ArrowRight`:e=this.step*(this.isLTR?1:-1);break;case`PageUp`:t=n*10;break;case`PageDown`:t=n*-10;break;case`Home`:e=n*(this.isLTR?-10:10);break;case`End`:e=n*(this.isLTR?10:-10)}}),e===0?t!==0&&(this.activeAxis=`y`,this.inputY.focus()):(this.activeAxis=`x`,this.inputX.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),(e!==0||t!==0)&&(this._valueChanged=!0,this._interaction.commit(()=>this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),()=>{this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor()}))}handleKeyup(e){e.preventDefault();let{code:t}=e;this.activeKeys.delete(t),this._interaction.keyUp(t)}handleInput(e){let{valueAsNumber:t,name:n}=e.target;this[n]=t}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0||!this._interaction.start(u(e))){e.preventDefault();return}if(this.disabled){this._interaction.end(),e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect();let t=e.target;try{t.setPointerCapture(e.pointerId),this._capturedPointer={target:t,pointerId:e.pointerId}}catch{}e.pointerType===`mouse`&&(this.focused=!0)}handlePointermove(e){if(!this._pointerDown)return;let[t,n]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=n,this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown&&this._finishPointer(()=>{this.inputX.focus(),e.pointerType===`mouse`&&(this.focused=!1)})}_finishPointer(e){this._pointerDown=!1;let t=this._capturedPointer;this._capturedPointer=void 0,t?.target.hasPointerCapture(t.pointerId)&&t.target.releasePointerCapture(t.pointerId);let n=this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}));e?.(),n||this.colorController.restorePreviousColor(),this._interaction.end()}endInteraction(){this._pointerDown?this._finishPointer():(this.activeKeys.clear(),this._interaction.end())}calculateHandlePosition(e){
|
|
3
|
+
/* c8 ignore next 3 */
|
|
4
|
+
if(!this.boundingClientRect)return[this.x,this.y];let t=this.boundingClientRect,n=t.left,r=t.top,i=e.clientX,a=e.clientY,o=t.width,s=t.height,c=Math.max(0,Math.min(1,(i-n)/o)),l=Math.max(0,Math.min(1,(a-r)/s));return[this.isLTR?c:1-c,1-l]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent(`pointerdown`,e)),this.handlePointermove(e))}render(){let{width:t=0,height:n=0}=this.boundingClientRect||{},i=l()||c(),a=`Color Picker`,o=r(i?void 0:`2d slider`),s=this.labelX,u=this.labelY,d=new Intl.NumberFormat(this.languageResolver.language,{style:`percent`,unitDisplay:`narrow`}).format(this.x),f=new Intl.NumberFormat(this.languageResolver.language,{style:`percent`,unitDisplay:`narrow`}).format(this.y),m={background:`linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`};return e`
|
|
5
|
+
<div
|
|
6
|
+
@pointerdown=${this.handleAreaPointerdown}
|
|
7
|
+
class="gradient"
|
|
8
|
+
style="background: ${m.background}"
|
|
9
|
+
>
|
|
10
|
+
<slot name="gradient"></slot>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<luzmo-color-handle
|
|
14
|
+
tabindex=${r(this.focused?void 0:`0`)}
|
|
15
|
+
@focus=${this.forwardFocus}
|
|
16
|
+
?focused=${this.focused}
|
|
17
|
+
class="handle"
|
|
18
|
+
color=${this.colorController.getHslString()}
|
|
19
|
+
?disabled=${this.disabled}
|
|
20
|
+
style=${`transform: translate(${(this.isLTR?this.x:1-this.x)*t}px, ${n-this.y*n}px);`}
|
|
21
|
+
${p({start:[`pointerdown`,this.handlePointerdown],streamInside:[`pointermove`,this.handlePointermove],end:[[`pointerup`,`pointercancel`,`pointerleave`,`lostpointercapture`],this.handlePointerup]})}
|
|
22
|
+
></luzmo-color-handle>
|
|
23
|
+
|
|
24
|
+
<fieldset
|
|
25
|
+
class="fieldset"
|
|
26
|
+
aria-label=${r(i?a:void 0)}
|
|
27
|
+
>
|
|
28
|
+
<div role="presentation">
|
|
29
|
+
<input
|
|
30
|
+
type="range"
|
|
31
|
+
class="slider"
|
|
32
|
+
name="x"
|
|
33
|
+
aria-label=${i?s:`${s} ${a}`}
|
|
34
|
+
aria-roledescription=${o}
|
|
35
|
+
aria-orientation="horizontal"
|
|
36
|
+
aria-valuetext=${i?d:`${d}, ${s}${this._valueChanged?``:`, ${f}, ${u}`}`}
|
|
37
|
+
min="0"
|
|
38
|
+
max="1"
|
|
39
|
+
step=${this.step}
|
|
40
|
+
tabindex="-1"
|
|
41
|
+
.value=${String(this.x)}
|
|
42
|
+
@input=${this.handleInput}
|
|
43
|
+
@change=${this.handleChange}
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
<div role="presentation">
|
|
47
|
+
<input
|
|
48
|
+
type="range"
|
|
49
|
+
class="slider"
|
|
50
|
+
name="y"
|
|
51
|
+
aria-label=${i?u:`${u} ${a}`}
|
|
52
|
+
aria-roledescription=${o}
|
|
53
|
+
aria-orientation="vertical"
|
|
54
|
+
aria-valuetext=${i?f:`${f}, ${u}${this._valueChanged?``:`, ${d}, ${s}`}`}
|
|
55
|
+
orient="vertical"
|
|
56
|
+
min="0"
|
|
57
|
+
max="1"
|
|
58
|
+
step=${this.step}
|
|
59
|
+
tabindex="-1"
|
|
60
|
+
.value=${String(this.y)}
|
|
61
|
+
@input=${this.handleInput}
|
|
62
|
+
@change=${this.handleChange}
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
65
|
+
</fieldset>
|
|
66
|
+
`}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener(`focus`,this.handleFocus),this.addEventListener(`blur`,this.handleBlur),this.addEventListener(`keyup`,this.handleKeyup),this.addEventListener(`keydown`,this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&this.colorController.color.set(`s`,this.inputX.valueAsNumber*100),this.y!==this.inputY.valueAsNumber&&this.colorController.color.set(`v`,(1-this.inputY.valueAsNumber)*100),e.has(`focused`)&&this.focused){let e=this.inputX.parentElement,t=this.inputY.parentElement;if(!e.shadowRoot&&!t.shadowRoot){e.attachShadow({mode:`open`}),t.attachShadow({mode:`open`});let n=`<div tabindex="-1"><slot></slot></div>`;e.shadowRoot.innerHTML=n,t.shadowRoot.innerHTML=n}}}connectedCallback(){super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(this.handleResize)),this.observer?.observe(this)}disconnectedCallback(){this._pointerDown=!1,this._capturedPointer=void 0,this.activeKeys.clear(),this.resizeRafId&&=(cancelAnimationFrame(this.resizeRafId),0),this.observer?.disconnect(),this.observer=void 0,super.disconnectedCallback()}};i([o({type:String,reflect:!0})],h.prototype,`dir`,void 0),i([o({type:Boolean,reflect:!0})],h.prototype,`disabled`,void 0),i([o({type:Boolean,reflect:!0})],h.prototype,`focused`,void 0),i([o({type:String,attribute:`label-x`})],h.prototype,`labelX`,void 0),i([o({type:String,attribute:`label-y`})],h.prototype,`labelY`,void 0),i([o({type:Boolean,attribute:`is-ltr`})],h.prototype,`isLTR`,void 0),i([n(`.handle`)],h.prototype,`handle`,void 0),i([o({type:Number})],h.prototype,`hue`,null),i([o({type:String})],h.prototype,`value`,null),i([o({type:String})],h.prototype,`color`,null),i([o({attribute:!1})],h.prototype,`activeAxis`,void 0),i([o({type:Number})],h.prototype,`x`,null),i([o({type:Number})],h.prototype,`y`,null),i([o({type:Number})],h.prototype,`step`,void 0),i([n(`[name="x"]`)],h.prototype,`inputX`,void 0),i([n(`[name="y"]`)],h.prototype,`inputY`,void 0),customElements.get(`luzmo-color-area`)||customElements.define(`luzmo-color-area`,h);export{h as t};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import"../tokens.js";import{c as e,y as t}from"./lit-DWANyjiY.js";import{l as n,u as r,y as i}from"./lucero-runtime-DMlHjBe_.js";import"./color-loupe-_dC69K1Z.js";var a=`:host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), block-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), border-width var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-inline var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-block var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out);background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 0 50%) var(--luzmo-color-loupe-checkerboard-position,left top)/calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size,16px);block-size:var(--luzmo-color-handle-size,16px);margin-inline:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width,1px) var(--luzmo-color-handle-outer-border-color,#0000006b);transition:all var(--luzmo-color-handle-animation-duration,0) var(--luzmo-color-handle-animation-easing,ease-in-out);border-width:var(--luzmo-color-handle-border-width,2px)!important;border-color:var(--luzmo-color-handle-border-color,#fff)!important;border-style:solid!important}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size,24px);block-size:var(--luzmo-color-handle-hitarea-size,24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius,100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size,32px);block-size:var(--luzmo-color-handle-focused-size,32px);margin-inline:calc(var(--luzmo-color-handle-size,16px) * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) * -1);outline:none}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-handle-fill-color-disabled,var(--luzmo-color-handle-fill-color-disabled,var(--luzmo-font-color-disabled)));box-shadow:none;border-color:var(--highcontrast-color-handle-border-color-disabled,var(--luzmo-color-handle-border-color-disabled,var(--luzmo-font-color-disabled)))!important}:host([disabled]) .inner{display:none}.inner{block-size:100%;inline-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width,var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color,#0000006b);background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled:GrayText;--highcontrast-color-handle-fill-color-disabled:Canvas}}`,o=class extends r{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=t(a)}handlePointerdown(e){e.pointerType===`touch`&&(this.open=!0)
|
|
2
|
+
import"../tokens.js";import{c as e,y as t}from"./lit-DWANyjiY.js";import{l as n,u as r,y as i}from"./lucero-runtime-DMlHjBe_.js";import"./color-loupe-_dC69K1Z.js";var a=`:host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), block-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), border-width var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-inline var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-block var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out);background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 0 50%) var(--luzmo-color-loupe-checkerboard-position,left top)/calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size,16px);block-size:var(--luzmo-color-handle-size,16px);margin-inline:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width,1px) var(--luzmo-color-handle-outer-border-color,#0000006b);transition:all var(--luzmo-color-handle-animation-duration,0) var(--luzmo-color-handle-animation-easing,ease-in-out);border-width:var(--luzmo-color-handle-border-width,2px)!important;border-color:var(--luzmo-color-handle-border-color,#fff)!important;border-style:solid!important}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size,24px);block-size:var(--luzmo-color-handle-hitarea-size,24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius,100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size,32px);block-size:var(--luzmo-color-handle-focused-size,32px);margin-inline:calc(var(--luzmo-color-handle-size,16px) * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) * -1);outline:none}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-handle-fill-color-disabled,var(--luzmo-color-handle-fill-color-disabled,var(--luzmo-font-color-disabled)));box-shadow:none;border-color:var(--highcontrast-color-handle-border-color-disabled,var(--luzmo-color-handle-border-color-disabled,var(--luzmo-font-color-disabled)))!important}:host([disabled]) .inner{display:none}.inner{block-size:100%;inline-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width,var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color,#0000006b);background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled:GrayText;--highcontrast-color-handle-fill-color-disabled:Canvas}}`,o=class extends r{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=t(a)}handlePointerdown(e){e.pointerType===`touch`&&(this.open=!0);try{this.setPointerCapture(e.pointerId)}catch{}}handlePointerup(e){this.open=!1,this.hasPointerCapture(e.pointerId)&&this.releasePointerCapture(e.pointerId)}render(){return e`
|
|
3
3
|
<div class="inner" style="background-color: ${this.color}"></div>
|
|
4
4
|
<luzmo-color-loupe
|
|
5
5
|
color=${this.color}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import"../tokens.js";import{c as e,y as t}from"./lit-DWANyjiY.js";import{a as n,c as r,g as i,l as a,v as o,y as s}from"./lucero-runtime-DMlHjBe_.js";import{C as c,E as l,F as u}from"./luzmo-icons-vtQE0BSI.js";import"./popover-Ca-FBqiU.js";import"./color-handle-BLQiuRSS.js";import"./color-area-BCI2oMGd.js";import"./color-field-BaVvupq0.js";import{n as d}from"./color-slider-Bipcekrc.js";import"./divider-vAjIOfo1.js";import"./swatch-DivHeYOK.js";var f=`:host{width:var(--luzmo-color-menu-width,var(--color-menu-width))}.hue-opacity-text-swatches-container{gap:var(--luzmo-color-menu-color-controls-vertical-gap,var(--color-menu-color-controls-vertical-gap));padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding,var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding,var(--color-menu-hue-opacity-text-swatches-horizontal-padding));flex-direction:column;display:flex}.swatch-sliders-container{gap:var(--luzmo-color-menu-swatch-to-sliders-space,var(--color-menu-swatch-to-sliders-space));display:flex}.swatch-example-container{align-items:center;display:flex}.field-container{align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space,var(--color-menu-format-field-to-format-space));display:flex}.format-container{text-transform:uppercase;height:var(--luzmo-color-menu-format-height,var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size,var(--color-menu-format-font-size));color:var(--luzmo-color-menu-format-font-color,var(--color-menu-format-font-color));align-items:center;gap:var(--luzmo-color-menu-format-name-to-icon,var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding,var(--color-menu-format-horizontal-padding));background:0 0;border:none;outline:none;display:flex;position:relative}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover,var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";box-sizing:border-box;border:var(--luzmo-color-menu-format-indicator-width,var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color,var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius,var(--luzmo-border-radius-s));width:100%;height:100%;position:absolute;top:0;left:0}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down,var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{height:calc(var(--color-menu-format-font-size) / 1.5);align-items:center;display:flex}.slider-container{justify-content:center;gap:var(--luzmo-color-menu-slider-gap,var(--color-menu-slider-gap));flex-direction:column;display:flex}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height,var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{gap:var(--luzmo-color-menu-swatches-gap,var(--color-menu-swatches-gap));grid-template-columns:repeat(6,1fr);display:grid}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{justify-content:center;align-items:center;display:flex}:host{--luzmo-text-field-icon-size-valid:0px;--luzmo-text-field-icon-spacing-inline-end-valid:1px;--luzmo-text-field-text-align:center;--color-menu-width:290px;--luzmo-text-field-width:220px;--luzmo-color-slider-control-track-width:8px;--color-menu-height:140px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height);--color-menu-format-font-size:var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-3);--color-menu-format-font-color:var(--luzmo-font-color);--color-menu-format-font-color-hover:var(--luzmo-font-color-hover);--color-menu-format-font-color-down:var(--luzmo-font-color-down);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size:22px}:host([size=s]){--color-menu-width:260px;--luzmo-text-field-width:200px;--luzmo-color-slider-control-track-width:8px;--color-menu-hue-opacity-text-swatches-horizontal-padding:var(--luzmo-spacing-5);--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-4);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-4);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-s);--color-menu-format-font-size:var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-2);--color-menu-swatches-gap:var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size:20px}:host([size=l]){--color-menu-width:350px;--luzmo-text-field-width:240px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-format-height:var(--luzmo-component-height-l);--color-menu-format-font-size:var(--luzmo-font-size);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size:24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size:56px}:host([size=xl]){--color-menu-width:380px;--luzmo-text-field-width:280px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-color-controls-vertical-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-swatch-to-sliders-space:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-xl);--color-menu-format-font-size:var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-3);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size:26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size:64px}`,p=class extends r(n){constructor(...e){super(...e),this.color=`rgb(255, 0, 0)`,this.noAlphaChannel=!1,this._alpha=1,this._rgbColor=`rgb(255, 0, 0)`,this._rgbaColor=`rgb(255, 0, 0, 1)`,this._previousColor=`rgb(255, 0, 0)`}static{this.styles=t(f)}setColor(e){let t=new d(e?.target?.color);this._format=t.format===`name`?`rgb`:t.format,this._rgbaColor=t.toRgbString(),this._alpha=this.noAlphaChannel?1:t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this.colorFieldElement.value=this.formatTextField(t),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleAreaChange(e){e.stopPropagation(),e.preventDefault(),this._rgbColor=this.areaElement.color;let t=new d(this._rgbColor);this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}get focusElement(){return this.areaElement||this.colorFieldElement||this}handleHueSliderChange(e){e.stopPropagation(),e.preventDefault();let t=new d(this._rgbColor).toHsl();t.h=this.hueSliderElement.value;let n=new d(t);this._rgbColor=n.toRgbString(),this._rgbaColor=n.setAlpha(this._alpha).toRgbString(),this.areaElement.color=`hsla(${t.h}, ${t.s*100}%, ${t.l*100}%, ${t.a})`,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(n),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleOpacitySliderChange(e){e.stopPropagation(),e.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;let t=new d(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=t.toRgbString(),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleFieldChange(e){if(e.stopPropagation(),e.preventDefault(),this.colorFieldElement.checkValidity()){let e=new d(this.colorFieldElement.value);this._format=e.format,this._rgbaColor=e.toRgbString(),this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this.noAlphaChannel&&(this._rgbaColor=this._rgbColor,this._alpha=1),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}}formatTextField(e){return this._format===`hsl`?e.toHslString():this._format===`hex`?this.noAlphaChannel?e.toHexString():e.toHex8String():(this._format===`name`&&(this._format=`rgb`),e.toRgbString())}cycleFormat(){let e=[`rgb`,`hsl`,`hex`];this._format=e[(e.indexOf(this._format)+1)%e.length];let t=new d(this.color),n=this.formatTextField(t);this.colorFieldElement.value=n}updated(e){if(e.has(`color`)&&this.color!==this._previousColor){this._previousColor=this.color;let e=new d(this.color);this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.hueSliderElement.color=this._rgbColor,this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._format=`rgb`}e.has(`noAlphaChannel`)&&!this.noAlphaChannel&&(this.opacitySliderElement.color=this._rgbaColor)}renderOpacitySlider(){return e`
|
|
2
|
+
import"../tokens.js";import{c as e,y as t}from"./lit-DWANyjiY.js";import{a as n,c as r,g as i,l as a,v as o,y as s}from"./lucero-runtime-DMlHjBe_.js";import{C as c,E as l,F as u}from"./luzmo-icons-vtQE0BSI.js";import"./popover-Ca-FBqiU.js";import"./color-handle-DO7dxFGx.js";import"./color-area-D-AVcZza.js";import"./color-field-BaVvupq0.js";import{n as d}from"./color-slider-MSADvkPC.js";import"./divider-vAjIOfo1.js";import"./swatch-DivHeYOK.js";var f=`:host{width:var(--luzmo-color-menu-width,var(--color-menu-width))}.hue-opacity-text-swatches-container{gap:var(--luzmo-color-menu-color-controls-vertical-gap,var(--color-menu-color-controls-vertical-gap));padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding,var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding,var(--color-menu-hue-opacity-text-swatches-horizontal-padding));flex-direction:column;display:flex}.swatch-sliders-container{gap:var(--luzmo-color-menu-swatch-to-sliders-space,var(--color-menu-swatch-to-sliders-space));display:flex}.swatch-example-container{align-items:center;display:flex}.field-container{align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space,var(--color-menu-format-field-to-format-space));display:flex}.format-container{text-transform:uppercase;height:var(--luzmo-color-menu-format-height,var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size,var(--color-menu-format-font-size));color:var(--luzmo-color-menu-format-font-color,var(--color-menu-format-font-color));align-items:center;gap:var(--luzmo-color-menu-format-name-to-icon,var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding,var(--color-menu-format-horizontal-padding));background:0 0;border:none;outline:none;display:flex;position:relative}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover,var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";box-sizing:border-box;border:var(--luzmo-color-menu-format-indicator-width,var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color,var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius,var(--luzmo-border-radius-s));width:100%;height:100%;position:absolute;top:0;left:0}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down,var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{height:calc(var(--color-menu-format-font-size) / 1.5);align-items:center;display:flex}.slider-container{justify-content:center;gap:var(--luzmo-color-menu-slider-gap,var(--color-menu-slider-gap));flex-direction:column;display:flex}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height,var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{gap:var(--luzmo-color-menu-swatches-gap,var(--color-menu-swatches-gap));grid-template-columns:repeat(6,1fr);display:grid}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{justify-content:center;align-items:center;display:flex}:host{--luzmo-text-field-icon-size-valid:0px;--luzmo-text-field-icon-spacing-inline-end-valid:1px;--luzmo-text-field-text-align:center;--color-menu-width:290px;--luzmo-text-field-width:220px;--luzmo-color-slider-control-track-width:8px;--color-menu-height:140px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height);--color-menu-format-font-size:var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-3);--color-menu-format-font-color:var(--luzmo-font-color);--color-menu-format-font-color-hover:var(--luzmo-font-color-hover);--color-menu-format-font-color-down:var(--luzmo-font-color-down);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size:22px}:host([size=s]){--color-menu-width:260px;--luzmo-text-field-width:200px;--luzmo-color-slider-control-track-width:8px;--color-menu-hue-opacity-text-swatches-horizontal-padding:var(--luzmo-spacing-5);--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-4);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-4);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-s);--color-menu-format-font-size:var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-2);--color-menu-swatches-gap:var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size:20px}:host([size=l]){--color-menu-width:350px;--luzmo-text-field-width:240px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-format-height:var(--luzmo-component-height-l);--color-menu-format-font-size:var(--luzmo-font-size);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size:24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size:56px}:host([size=xl]){--color-menu-width:380px;--luzmo-text-field-width:280px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-color-controls-vertical-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-swatch-to-sliders-space:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-xl);--color-menu-format-font-size:var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-3);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size:26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size:64px}`,p=class extends r(n){constructor(...e){super(...e),this.color=`rgb(255, 0, 0)`,this.noAlphaChannel=!1,this._alpha=1,this._rgbColor=`rgb(255, 0, 0)`,this._rgbaColor=`rgb(255, 0, 0, 1)`,this._previousColor=`rgb(255, 0, 0)`}static{this.styles=t(f)}setColor(e){let t=new d(e?.target?.color);this._format=t.format===`name`?`rgb`:t.format,this._rgbaColor=t.toRgbString(),this._alpha=this.noAlphaChannel?1:t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this.colorFieldElement.value=this.formatTextField(t),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleAreaChange(e){e.stopPropagation(),e.preventDefault(),this._rgbColor=this.areaElement.color;let t=new d(this._rgbColor);this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}endInteraction(){this.areaElement?.endInteraction(),this.hueSliderElement?.endInteraction(),this.opacitySliderElement?.endInteraction()}get focusElement(){return this.areaElement||this.colorFieldElement||this}handleHueSliderChange(e){e.stopPropagation(),e.preventDefault();let t=new d(this._rgbColor).toHsl();t.h=this.hueSliderElement.value;let n=new d(t);this._rgbColor=n.toRgbString(),this._rgbaColor=n.setAlpha(this._alpha).toRgbString(),this.areaElement.color=`hsla(${t.h}, ${t.s*100}%, ${t.l*100}%, ${t.a})`,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(n),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleOpacitySliderChange(e){e.stopPropagation(),e.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;let t=new d(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=t.toRgbString(),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleFieldChange(e){if(e.stopPropagation(),e.preventDefault(),this.colorFieldElement.checkValidity()){let e=new d(this.colorFieldElement.value);this._format=e.format,this._rgbaColor=e.toRgbString(),this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this.noAlphaChannel&&(this._rgbaColor=this._rgbColor,this._alpha=1),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}}formatTextField(e){return this._format===`hsl`?e.toHslString():this._format===`hex`?this.noAlphaChannel?e.toHexString():e.toHex8String():(this._format===`name`&&(this._format=`rgb`),e.toRgbString())}cycleFormat(){let e=[`rgb`,`hsl`,`hex`];this._format=e[(e.indexOf(this._format)+1)%e.length];let t=new d(this.color),n=this.formatTextField(t);this.colorFieldElement.value=n}updated(e){if(e.has(`color`)&&this.color!==this._previousColor){this._previousColor=this.color;let e=new d(this.color);this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.hueSliderElement.color=this._rgbColor,this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._format=`rgb`}e.has(`noAlphaChannel`)&&!this.noAlphaChannel&&(this.opacitySliderElement.color=this._rgbaColor)}renderOpacitySlider(){return e`
|
|
3
3
|
<luzmo-color-slider
|
|
4
4
|
id="luzmo-opacity-slider"
|
|
5
5
|
label="Opacity"
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
|
|
2
|
+
import"../tokens.js";import{c as e,y as t}from"./lit-DWANyjiY.js";import{a as n,g as r,i,l as a,y as o}from"./lucero-runtime-DMlHjBe_.js";import{t as s}from"./language-resolution-BwIkGyuH.js";import{t as c}from"./style-map-DmBaq1-c.js";import"./color-handle-DO7dxFGx.js";import{n as l,t as u}from"./interaction-BQyflxg-.js";import{t as d}from"./streaming-listener-0FSzb9QY.js";function f(e,t){m(e)&&(e=`100%`);let n=h(e);return e=t===360?e:Math.min(t,Math.max(0,parseFloat(e))),n&&(e=parseInt(String(e*t),10)/100),Math.abs(e-t)<1e-6?1:(e=t===360?(e<0?e%t+t:e%t)/parseFloat(String(t)):e%t/parseFloat(String(t)),e)}function p(e){return Math.min(1,Math.max(0,e))}function m(e){return typeof e==`string`&&e.indexOf(`.`)!==-1&&parseFloat(e)===1}function h(e){return typeof e==`string`&&e.indexOf(`%`)!==-1}function g(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function _(e){return Number(e)<=1?`${Number(e)*100}%`:e}function v(e){return e.length===1?`0`+e:String(e)}function y(e,t,n){return{r:f(e,255)*255,g:f(t,255)*255,b:f(n,255)*255}}function b(e,t,n){e=f(e,255),t=f(t,255),n=f(n,255);let r=Math.max(e,t,n),i=Math.min(e,t,n),a=0,o=0,s=(r+i)/2;if(r===i)o=0,a=0;else{let c=r-i;switch(o=s>.5?c/(2-r-i):c/(r+i),r){case e:a=(t-n)/c+(t<n?6:0);break;case t:a=(n-e)/c+2;break;case n:a=(e-t)/c+4}a/=6}return{h:a,s:o,l:s}}function x(e,t,n){return n<0&&(n+=1),n>1&&--n,n<1/6?e+(t-e)*(6*n):n<1/2?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function S(e,t,n){let r,i,a;if(e=f(e,360),t=f(t,100),n=f(n,100),t===0)i=n,a=n,r=n;else{let o=n<.5?n*(1+t):n+t-n*t,s=2*n-o;r=x(s,o,e+1/3),i=x(s,o,e),a=x(s,o,e-1/3)}return{r:r*255,g:i*255,b:a*255}}function C(e,t,n){e=f(e,255),t=f(t,255),n=f(n,255);let r=Math.max(e,t,n),i=Math.min(e,t,n),a=0,o=r,s=r-i,c=r===0?0:s/r;if(r===i)a=0;else{switch(r){case e:a=(t-n)/s+(t<n?6:0);break;case t:a=(n-e)/s+2;break;case n:a=(e-t)/s+4}a/=6}return{h:a,s:c,v:o}}function w(e,t,n){e=f(e,360)*6,t=f(t,100),n=f(n,100);let r=Math.floor(e),i=e-r,a=n*(1-t),o=n*(1-i*t),s=n*(1-(1-i)*t),c=r%6,l=[n,o,a,a,s,n][c],u=[s,n,n,o,a,a][c],d=[a,a,s,n,n,o][c];return{r:l*255,g:u*255,b:d*255}}function T(e,t,n,r){let i=[v(Math.round(e).toString(16)),v(Math.round(t).toString(16)),v(Math.round(n).toString(16))];return r&&i[0].startsWith(i[0].charAt(1))&&i[1].startsWith(i[1].charAt(1))&&i[2].startsWith(i[2].charAt(1))?i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0):i.join(``)}function E(e,t,n,r,i){let a=[v(Math.round(e).toString(16)),v(Math.round(t).toString(16)),v(Math.round(n).toString(16)),v(k(r))];return i&&a[0].startsWith(a[0].charAt(1))&&a[1].startsWith(a[1].charAt(1))&&a[2].startsWith(a[2].charAt(1))&&a[3].startsWith(a[3].charAt(1))?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join(``)}function D(e,t,n,r){let i=e/100,a=t/100,o=n/100,s=r/100;return{r:255*(1-i)*(1-s),g:255*(1-a)*(1-s),b:255*(1-o)*(1-s)}}function O(e,t,n){let r=1-e/255,i=1-t/255,a=1-n/255,o=Math.min(r,i,a);return o===1?(r=0,i=0,a=0):(r=(r-o)/(1-o)*100,i=(i-o)/(1-o)*100,a=(a-o)/(1-o)*100),o*=100,{c:Math.round(r),m:Math.round(i),y:Math.round(a),k:Math.round(o)}}function k(e){return Math.round(parseFloat(e)*255).toString(16)}function A(e){return j(e)/255}function j(e){return parseInt(e,16)}function M(e){return{r:e>>16,g:(e&65280)>>8,b:e&255}}var N={aliceblue:`#f0f8ff`,antiquewhite:`#faebd7`,aqua:`#00ffff`,aquamarine:`#7fffd4`,azure:`#f0ffff`,beige:`#f5f5dc`,bisque:`#ffe4c4`,black:`#000000`,blanchedalmond:`#ffebcd`,blue:`#0000ff`,blueviolet:`#8a2be2`,brown:`#a52a2a`,burlywood:`#deb887`,cadetblue:`#5f9ea0`,chartreuse:`#7fff00`,chocolate:`#d2691e`,coral:`#ff7f50`,cornflowerblue:`#6495ed`,cornsilk:`#fff8dc`,crimson:`#dc143c`,cyan:`#00ffff`,darkblue:`#00008b`,darkcyan:`#008b8b`,darkgoldenrod:`#b8860b`,darkgray:`#a9a9a9`,darkgreen:`#006400`,darkgrey:`#a9a9a9`,darkkhaki:`#bdb76b`,darkmagenta:`#8b008b`,darkolivegreen:`#556b2f`,darkorange:`#ff8c00`,darkorchid:`#9932cc`,darkred:`#8b0000`,darksalmon:`#e9967a`,darkseagreen:`#8fbc8f`,darkslateblue:`#483d8b`,darkslategray:`#2f4f4f`,darkslategrey:`#2f4f4f`,darkturquoise:`#00ced1`,darkviolet:`#9400d3`,deeppink:`#ff1493`,deepskyblue:`#00bfff`,dimgray:`#696969`,dimgrey:`#696969`,dodgerblue:`#1e90ff`,firebrick:`#b22222`,floralwhite:`#fffaf0`,forestgreen:`#228b22`,fuchsia:`#ff00ff`,gainsboro:`#dcdcdc`,ghostwhite:`#f8f8ff`,goldenrod:`#daa520`,gold:`#ffd700`,gray:`#808080`,green:`#008000`,greenyellow:`#adff2f`,grey:`#808080`,honeydew:`#f0fff0`,hotpink:`#ff69b4`,indianred:`#cd5c5c`,indigo:`#4b0082`,ivory:`#fffff0`,khaki:`#f0e68c`,lavenderblush:`#fff0f5`,lavender:`#e6e6fa`,lawngreen:`#7cfc00`,lemonchiffon:`#fffacd`,lightblue:`#add8e6`,lightcoral:`#f08080`,lightcyan:`#e0ffff`,lightgoldenrodyellow:`#fafad2`,lightgray:`#d3d3d3`,lightgreen:`#90ee90`,lightgrey:`#d3d3d3`,lightpink:`#ffb6c1`,lightsalmon:`#ffa07a`,lightseagreen:`#20b2aa`,lightskyblue:`#87cefa`,lightslategray:`#778899`,lightslategrey:`#778899`,lightsteelblue:`#b0c4de`,lightyellow:`#ffffe0`,lime:`#00ff00`,limegreen:`#32cd32`,linen:`#faf0e6`,magenta:`#ff00ff`,maroon:`#800000`,mediumaquamarine:`#66cdaa`,mediumblue:`#0000cd`,mediumorchid:`#ba55d3`,mediumpurple:`#9370db`,mediumseagreen:`#3cb371`,mediumslateblue:`#7b68ee`,mediumspringgreen:`#00fa9a`,mediumturquoise:`#48d1cc`,mediumvioletred:`#c71585`,midnightblue:`#191970`,mintcream:`#f5fffa`,mistyrose:`#ffe4e1`,moccasin:`#ffe4b5`,navajowhite:`#ffdead`,navy:`#000080`,oldlace:`#fdf5e6`,olive:`#808000`,olivedrab:`#6b8e23`,orange:`#ffa500`,orangered:`#ff4500`,orchid:`#da70d6`,palegoldenrod:`#eee8aa`,palegreen:`#98fb98`,paleturquoise:`#afeeee`,palevioletred:`#db7093`,papayawhip:`#ffefd5`,peachpuff:`#ffdab9`,peru:`#cd853f`,pink:`#ffc0cb`,plum:`#dda0dd`,powderblue:`#b0e0e6`,purple:`#800080`,rebeccapurple:`#663399`,red:`#ff0000`,rosybrown:`#bc8f8f`,royalblue:`#4169e1`,saddlebrown:`#8b4513`,salmon:`#fa8072`,sandybrown:`#f4a460`,seagreen:`#2e8b57`,seashell:`#fff5ee`,sienna:`#a0522d`,silver:`#c0c0c0`,skyblue:`#87ceeb`,slateblue:`#6a5acd`,slategray:`#708090`,slategrey:`#708090`,snow:`#fffafa`,springgreen:`#00ff7f`,steelblue:`#4682b4`,tan:`#d2b48c`,teal:`#008080`,thistle:`#d8bfd8`,tomato:`#ff6347`,turquoise:`#40e0d0`,violet:`#ee82ee`,wheat:`#f5deb3`,white:`#ffffff`,whitesmoke:`#f5f5f5`,yellow:`#ffff00`,yellowgreen:`#9acd32`};function P(e){let t={r:0,g:0,b:0},n=1,r=null,i=null,a=null,o=!1,s=!1;return typeof e==`string`&&(e=z(e)),typeof e==`object`&&(B(e.r)&&B(e.g)&&B(e.b)?(t=y(e.r,e.g,e.b),o=!0,s=String(e.r).substr(-1)===`%`?`prgb`:`rgb`):B(e.h)&&B(e.s)&&B(e.v)?(r=_(e.s),i=_(e.v),t=w(e.h,r,i),o=!0,s=`hsv`):B(e.h)&&B(e.s)&&B(e.l)?(r=_(e.s),a=_(e.l),t=S(e.h,r,a),o=!0,s=`hsl`):B(e.c)&&B(e.m)&&B(e.y)&&B(e.k)&&(t=D(e.c,e.m,e.y,e.k),o=!0,s=`cmyk`),Object.prototype.hasOwnProperty.call(e,`a`)&&(n=e.a)),n=g(n),{ok:o,format:e.format||s,r:Math.min(255,Math.max(t.r,0)),g:Math.min(255,Math.max(t.g,0)),b:Math.min(255,Math.max(t.b,0)),a:n}}var F=`(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)`,I=`[\\s|\\(]+(`+F+`)[,|\\s]+(`+F+`)[,|\\s]+(`+F+`)\\s*\\)?`,L=`[\\s|\\(]+(`+F+`)[,|\\s]+(`+F+`)[,|\\s]+(`+F+`)[,|\\s]+(`+F+`)\\s*\\)?`,R={CSS_UNIT:new RegExp(F),rgb:RegExp(`rgb`+I),rgba:RegExp(`rgba`+L),hsl:RegExp(`hsl`+I),hsla:RegExp(`hsla`+L),hsv:RegExp(`hsv`+I),hsva:RegExp(`hsva`+L),cmyk:RegExp(`cmyk`+L),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function z(e){if(e=e.trim().toLowerCase(),e.length===0)return!1;let t=!1;if(N[e])e=N[e],t=!0;else if(e===`transparent`)return{r:0,g:0,b:0,a:0,format:`name`};let n=R.rgb.exec(e);return n?{r:n[1],g:n[2],b:n[3]}:(n=R.rgba.exec(e),n?{r:n[1],g:n[2],b:n[3],a:n[4]}:(n=R.hsl.exec(e),n?{h:n[1],s:n[2],l:n[3]}:(n=R.hsla.exec(e),n?{h:n[1],s:n[2],l:n[3],a:n[4]}:(n=R.hsv.exec(e),n?{h:n[1],s:n[2],v:n[3]}:(n=R.hsva.exec(e),n?{h:n[1],s:n[2],v:n[3],a:n[4]}:(n=R.cmyk.exec(e),n?{c:n[1],m:n[2],y:n[3],k:n[4]}:(n=R.hex8.exec(e),n?{r:j(n[1]),g:j(n[2]),b:j(n[3]),a:A(n[4]),format:t?`name`:`hex8`}:(n=R.hex6.exec(e),n?{r:j(n[1]),g:j(n[2]),b:j(n[3]),format:t?`name`:`hex`}:(n=R.hex4.exec(e),n?{r:j(n[1]+n[1]),g:j(n[2]+n[2]),b:j(n[3]+n[3]),a:A(n[4]+n[4]),format:t?`name`:`hex8`}:(n=R.hex3.exec(e),n?{r:j(n[1]+n[1]),g:j(n[2]+n[2]),b:j(n[3]+n[3]),format:t?`name`:`hex`}:!1))))))))))}function B(e){return typeof e==`number`?!Number.isNaN(e):R.CSS_UNIT.test(e)}var V=class e{constructor(t=``,n={}){if(t instanceof e)return t;typeof t==`number`&&(t=M(t)),this.originalInput=t;let r=P(t);this.originalInput=t,this.r=r.r,this.g=r.g,this.b=r.b,this.a=r.a,this.roundA=Math.round(100*this.a)/100,this.format=n.format??r.format,this.gradientType=n.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=r.ok}isDark(){return this.getBrightness()<128}isLight(){return!this.isDark()}getBrightness(){let e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3}getLuminance(){let e=this.toRgb(),t,n,r,i=e.r/255,a=e.g/255,o=e.b/255;return t=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,n=a<=.03928?a/12.92:((a+.055)/1.055)**2.4,r=o<=.03928?o/12.92:((o+.055)/1.055)**2.4,.2126*t+.7152*n+.0722*r}getAlpha(){return this.a}setAlpha(e){return this.a=g(e),this.roundA=Math.round(100*this.a)/100,this}isMonochrome(){let{s:e}=this.toHsl();return e===0}toHsv(){let e=C(this.r,this.g,this.b);return{h:e.h*360,s:e.s,v:e.v,a:this.a}}toHsvString(){let e=C(this.r,this.g,this.b),t=Math.round(e.h*360),n=Math.round(e.s*100),r=Math.round(e.v*100);return this.a===1?`hsv(${t}, ${n}%, ${r}%)`:`hsva(${t}, ${n}%, ${r}%, ${this.roundA})`}toHsl(){let e=b(this.r,this.g,this.b);return{h:e.h*360,s:e.s,l:e.l,a:this.a}}toHslString(){let e=b(this.r,this.g,this.b),t=Math.round(e.h*360),n=Math.round(e.s*100),r=Math.round(e.l*100);return this.a===1?`hsl(${t}, ${n}%, ${r}%)`:`hsla(${t}, ${n}%, ${r}%, ${this.roundA})`}toHex(e=!1){return T(this.r,this.g,this.b,e)}toHexString(e=!1){return`#`+this.toHex(e)}toHex8(e=!1){return E(this.r,this.g,this.b,this.a,e)}toHex8String(e=!1){return`#`+this.toHex8(e)}toHexShortString(e=!1){return this.a===1?this.toHexString(e):this.toHex8String(e)}toRgb(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}}toRgbString(){let e=Math.round(this.r),t=Math.round(this.g),n=Math.round(this.b);return this.a===1?`rgb(${e}, ${t}, ${n})`:`rgba(${e}, ${t}, ${n}, ${this.roundA})`}toPercentageRgb(){let e=e=>`${Math.round(f(e,255)*100)}%`;return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}}toPercentageRgbString(){let e=e=>Math.round(f(e,255)*100);return this.a===1?`rgb(${e(this.r)}%, ${e(this.g)}%, ${e(this.b)}%)`:`rgba(${e(this.r)}%, ${e(this.g)}%, ${e(this.b)}%, ${this.roundA})`}toCmyk(){return{...O(this.r,this.g,this.b)}}toCmykString(){let{c:e,m:t,y:n,k:r}=O(this.r,this.g,this.b);return`cmyk(${e}, ${t}, ${n}, ${r})`}toName(){if(this.a===0)return`transparent`;if(this.a<1)return!1;let e=`#`+T(this.r,this.g,this.b,!1);for(let[t,n]of Object.entries(N))if(e===n)return t;return!1}toString(e){let t=!!e;e??=this.format;let n=!1,r=this.a<1&&this.a>=0;return!t&&r&&(e.startsWith(`hex`)||e===`name`)?e===`name`&&this.a===0?this.toName():this.toRgbString():(e===`rgb`&&(n=this.toRgbString()),e===`prgb`&&(n=this.toPercentageRgbString()),(e===`hex`||e===`hex6`)&&(n=this.toHexString()),e===`hex3`&&(n=this.toHexString(!0)),e===`hex4`&&(n=this.toHex8String(!0)),e===`hex8`&&(n=this.toHex8String()),e===`name`&&(n=this.toName()),e===`hsl`&&(n=this.toHslString()),e===`hsv`&&(n=this.toHsvString()),e===`cmyk`&&(n=this.toCmykString()),n||this.toHexString())}toNumber(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)}clone(){return new e(this.toString())}lighten(t=10){let n=this.toHsl();return n.l+=t/100,n.l=p(n.l),new e(n)}brighten(t=10){let n=this.toRgb();return n.r=Math.max(0,Math.min(255,n.r-Math.round(255*-(t/100)))),n.g=Math.max(0,Math.min(255,n.g-Math.round(255*-(t/100)))),n.b=Math.max(0,Math.min(255,n.b-Math.round(255*-(t/100)))),new e(n)}darken(t=10){let n=this.toHsl();return n.l-=t/100,n.l=p(n.l),new e(n)}tint(e=10){return this.mix(`white`,e)}shade(e=10){return this.mix(`black`,e)}desaturate(t=10){let n=this.toHsl();return n.s-=t/100,n.s=p(n.s),new e(n)}saturate(t=10){let n=this.toHsl();return n.s+=t/100,n.s=p(n.s),new e(n)}greyscale(){return this.desaturate(100)}spin(t){let n=this.toHsl(),r=(n.h+t)%360;return n.h=r<0?360+r:r,new e(n)}mix(t,n=50){let r=this.toRgb(),i=new e(t).toRgb(),a=n/100,o={r:(i.r-r.r)*a+r.r,g:(i.g-r.g)*a+r.g,b:(i.b-r.b)*a+r.b,a:(i.a-r.a)*a+r.a};return new e(o)}analogous(t=6,n=30){let r=this.toHsl(),i=360/n,a=[this];for(r.h=(r.h-(i*t>>1)+720)%360;--t;)r.h=(r.h+i)%360,a.push(new e(r));return a}complement(){let t=this.toHsl();return t.h=(t.h+180)%360,new e(t)}monochromatic(t=6){let n=this.toHsv(),{h:r}=n,{s:i}=n,{v:a}=n,o=[],s=1/t;for(;t--;)o.push(new e({h:r,s:i,v:a})),a=(a+s)%1;return o}splitcomplement(){let t=this.toHsl(),{h:n}=t;return[this,new e({h:(n+72)%360,s:t.s,l:t.l}),new e({h:(n+216)%360,s:t.s,l:t.l})]}onBackground(t){let n=this.toRgb(),r=new e(t).toRgb(),i=n.a+r.a*(1-n.a);return new e({r:(n.r*n.a+r.r*r.a*(1-n.a))/i,g:(n.g*n.a+r.g*r.a*(1-n.a))/i,b:(n.b*n.a+r.b*r.a*(1-n.a))/i,a:i})}triad(){return this.polyad(3)}tetrad(){return this.polyad(4)}polyad(t){let n=this.toHsl(),{h:r}=n,i=[this],a=360/t;for(let o=1;o<t;o++)i.push(new e({h:(r+o*a)%360,s:n.s,l:n.l}));return i}equals(t){let n=new e(t);return this.format===`cmyk`||n.format===`cmyk`?this.toCmykString()===n.toCmykString():this.toRgbString()===n.toRgbString()}},H=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,U=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,W=/(^hs[v|l]a?\()\d{1,3}/,G=(e,t)=>t?e.toHexString():e.toHex(),K=class{setColorProcess(e,t,n,r){this.maintains===`hue`?this.setColorMaintainHue(e,t,n,r):this.maintains===`saturation`&&this.setColorMaintainSaturation(e,t,n,r)}setColorMaintainHue(e,t,n,r){let{h:i,s:a,v:o,a:s}=this._color.toHsv(),c;if(r&&n.startsWith(`hs`)){let e=H.exec(t);if(e!==null){let[,t]=e;c=Number(t)}}else if(!r&&n.startsWith(`hs`)){let t=e.originalInput;c=Object.values(t)[0]}this.hue=c||i,this.opacity=s??1,this.applyColorToState({h:i,s:a,v:o,a:s})}setColorMaintainSaturation(e,t,n,r){let{a:i}=this._color.toHsv();if(r&&n.startsWith(`hs`)){let e=H.exec(t);if(e!==null){let[,t,n]=e;this.hue=Number(t),this.saturation=Number(n)}}else if(!r&&n.startsWith(`hs`)){let t=e.originalInput,n=Object.values(t);this.hue=n[0],this.saturation=n[1]}else{let{h:t}=e.toHsv();this.hue=t}this.opacity=i??1,this.applyColorToState(e.toHsv())}constructor(e,{applyColorToState:t,extractColorFromState:n,maintains:r}){this.maintains=`hue`,this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(e,t)=>t?e.toRgbString():e.toRgb(),prgb:(e,t)=>t?e.toPercentageRgbString():e.toPercentageRgb(),hex8:(e,t)=>t?e.toHex8String():e.toHex8(),name:e=>e.toName()||e.toRgbString(),hsl:(e,t)=>{if(this.maintains===`hue`){if(t)return e.toHslString().replace(W,`$1${this.hue}`);let{s:n,l:r,a:i}=e.toHsl();return{h:this.hue,s:n,l:r,a:i}}if(t)return e.toHslString().replace(U,`$1${this.hue}$2${this.saturation}`);let{s:n,l:r,a:i}=e.toHsl();return{h:this.hue,s:n,l:r,a:i}},hsv:(e,t)=>{if(this.maintains===`hue`){if(t)return e.toHsvString().replace(W,`$1${this.hue}`);let{s:n,v:r,a:i}=e.toHsv();return{h:this.hue,s:n,v:r,a:i}}if(t)return e.toHsvString().replace(U,`$1${this.hue}$2${this.saturation}`);let{s:n,v:r,a:i}=e.toHsv();return{h:this.hue,s:n,v:r,a:i}},hex:G,hex3:G,hex4:G,hex6:G},this._color=new V({h:0,s:1,v:1}),this._previousColor=new V({h:0,s:1,v:1}),this._format={format:``,isString:!1},this.host=e,this.applyColorToState=t,this.extractColorFromState=n,this.maintains=r||this.maintains}applyColorFromState(){this._color=new V(this.extractColorFromState(this))}get hue(){return this._hue}set hue(e){let t=Math.min(360,Math.max(0,e));if(t===this.hue)return;let n=this.hue,{s:r,v:i,a}=this._color.toHsv();this._color=new V({h:t,s:r,v:i,a}),this._hue=t,this.host.requestUpdate(`hue`,n)}get opacity(){return this._opacity}set opacity(e){let t=Math.min(1,Math.max(0,e));if(t===this.opacity)return;let n=this.opacity,{h:r,s:i,v:a}=this._color.toHsv();this._color=new V({h:r,s:i,v:a,a:t}),this._opacity=t,this.host.requestUpdate(`opacity`,n)}
|
|
3
|
+
/* c8 ignore next 3 */
|
|
4
|
+
get value(){return this.color}get color(){return this.getColorProcesses[this._format.format||`hex`](this._color,this._format.isString)}set color(e){
|
|
5
|
+
/* c8 ignore next 3 */
|
|
6
|
+
if(e===this.color)return;let t=this._color;this._color=new V(e);let n=this._color.format,r=typeof e==`string`||e instanceof String;n.startsWith(`hex`)&&(r=e.startsWith(`#`)),this._format={format:n,isString:r},this.setColorProcess(this._color,e,n,r),this.host.requestUpdate(`color`,t)}getColor(e){return this._color[{hsl:`toHsl`}[e]]()}setColor(e){this._color=e;let t=typeof this._color.originalInput==`string`||this._color.originalInput instanceof String;this.setColorProcess(this._color,e,this._color.format,t)}getHslString(){return this._color.toHslString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this.setColor(this._previousColor)}},q=`.opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 0 50%) var(--luzmo-color-loupe-checkerboard-position,left top)/calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2);block-size:100%;inline-size:100%;position:absolute}:host{--luzmo-color-slider-gradient-fallback:red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors:active){:host{--highcontrast-color-slider-border-color:CanvasText;--highcontrast-color-slider-border-color-disabled:GrayText;--highcontrast-color-slider-background-color-disabled:Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius:var(--luzmo-color-slider-handle-hitarea-border-radius,0px);min-inline-size:var(--luzmo-color-slider-minimum-length,80px);inline-size:var(--luzmo-color-slider-length,192px);block-size:var(--luzmo-color-slider-control-track-width,24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height,var(--luzmo-color-slider-minimum-length,80px));block-size:var(--luzmo-color-slider-vertical-height,var(--luzmo-color-slider-length,192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width,var(--luzmo-color-slider-control-track-height,24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color,var(--luzmo-color-slider-border-color,var(--luzmo-border-color)))}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width,var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));position:absolute;inset:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color-disabled,var(--luzmo-color-slider-border-color-disabled,var(--luzmo-dimmed-color)));background:var(--highcontrast-color-slider-background-color-disabled,var(--luzmo-color-slider-background-color-disabled,var(--luzmo-dimmed-color)))}.checkerboard,.gradient{border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.gradient:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){transform:scaleX(-1)}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}`,J=class extends n{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.label=`hue`,this.vertical=!1,this.languageResolver=new s(this),this.colorController=new K(this,{
|
|
7
|
+
/* c8 ignore next 3 */
|
|
8
|
+
applyColorToState:()=>{if(this.mode===`opacity`){let e=new V(this.colorController.color);this.sliderHandlePosition=100*e.getAlpha()}else this.sliderHandlePosition=100*(this.colorController.hue/360)},extractColorFromState:e=>this.mode===`opacity`?{...e.getColor(`hsl`),a:this.value}:{...e.getColor(`hsl`),h:this.value},maintains:`saturation`}),this._interaction=new u(this,{value:()=>this.value}),this.sliderHandlePosition=0,this.step=1,this.isLTR=!0,this._altered=0,this._pointerDown=!1}static get styles(){return[t(q)]}get value(){return this.mode===`opacity`?this.colorController.opacity:this.colorController.hue}set value(e){this.mode===`opacity`?this.colorController.opacity=e:this.colorController.hue=e}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get altered(){return this._altered}set altered(e){this._altered=e,this.step=Math.max(1,this.altered*10)}get focusElement(){return this.input}handleKeydown(e){let{key:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(e=>!!e).length;let n=0;switch(t){case`ArrowUp`:n=this.step;break;case`ArrowDown`:n=-this.step;break;case`ArrowLeft`:n=this.step*(this.isLTR?-1:1);break;case`ArrowRight`:n=this.step*(this.isLTR?1:-1);break;default:return}if(e.preventDefault(),this.disabled||!this._interaction.keyDown(t))return;if(this.disabled){this._interaction.end();return}let r=100/(this.mode===`opacity`?100:360);this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+n*r)),this.value=this.mode===`opacity`?Math.min(1,Math.max(0,this.value+n/100)):Math.min(360,Math.max(0,this.value+n)),this.colorController.applyColorFromState(),n!==0&&this._interaction.commit(()=>this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),()=>this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})))}handleKeyup(e){this._interaction.keyUp(e.key)}handleInput(e){let{valueAsNumber:t}=e.target;this.value=t,this.sliderHandlePosition=100*(this.mode===`opacity`?this.value:this.value/360),this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.input.focus()}handleFocus(){this.focused=!0}handleBlur(){this._interaction.endKeyboard(),!this._pointerDown&&(this.altered=0,this.focused=!1)}handlePointerdown(e){if(e.button!==0||!this._interaction.start(l(e))){e.preventDefault();return}if(this.disabled){this._interaction.end(),e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect();let t=e.target;try{t.setPointerCapture(e.pointerId),this._capturedPointer={target:t,pointerId:e.pointerId}}catch{}e.pointerType===`mouse`&&(this.focused=!0)}handlePointermove(e){this._pointerDown&&(this.sliderHandlePosition=this.calculateHandlePosition(e),this.value=(this.mode===`opacity`?1:360)*(this.sliderHandlePosition/100),this.colorController.applyColorFromState(),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0,cancelable:!0})))}handlePointerup(e){this._pointerDown&&this._finishPointer(()=>{this.focus(),e.pointerType===`mouse`&&(this.focused=!1)})}_finishPointer(e){this._pointerDown=!1;let t=this._capturedPointer;this._capturedPointer=void 0,t?.target.hasPointerCapture(t.pointerId)&&t.target.releasePointerCapture(t.pointerId),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor(),e?.(),this._interaction.end()}endInteraction(){this._pointerDown?this._finishPointer():this._interaction.end()}calculateHandlePosition(e){
|
|
9
|
+
/* c8 ignore next 3 */
|
|
10
|
+
if(!this.boundingClientRect)return this.sliderHandlePosition;let t=this.boundingClientRect,n=this.vertical?t.top:t.left,r=this.vertical?e.clientY:e.clientX,i=this.vertical?t.height:t.width,a=Math.max(0,Math.min(1,(r-n)/i));return this.vertical||!this.isLTR?100-100*a:100*a}handleGradientPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent(`pointerdown`,e)),this.handlePointermove(e))}get handlePositionStyles(){return`${this.vertical?`inset-block-end`:`inset-inline-start`}: ${this.sliderHandlePosition}%`}get getColorSliderStyle(){let e=this.vertical?`top`:`right`;return this.mode===`opacity`?{background:`linear-gradient(to ${e}, transparent, ${new V(this.colorController.color).setAlpha(1).toRgbString()})`}:{background:`linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`}}render(){return e`
|
|
11
|
+
<div
|
|
12
|
+
class="opacity-checkerboard checkerboard"
|
|
13
|
+
role="presentation"
|
|
14
|
+
@pointerdown=${this.handleGradientPointerdown}
|
|
15
|
+
>
|
|
16
|
+
<div
|
|
17
|
+
class="gradient"
|
|
18
|
+
role="presentation"
|
|
19
|
+
style=${c(this.getColorSliderStyle)}
|
|
20
|
+
>
|
|
21
|
+
<slot name="gradient"></slot>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
<luzmo-color-handle
|
|
25
|
+
tabindex=${i(this.focused?void 0:`0`)}
|
|
26
|
+
@focus=${this.forwardFocus}
|
|
27
|
+
?focused=${this.focused}
|
|
28
|
+
class="handle"
|
|
29
|
+
color=${this.mode===`opacity`?this.color:`hsl(`+this.value+`, 100%, 50%)`}
|
|
30
|
+
?disabled=${this.disabled}
|
|
31
|
+
style=${this.handlePositionStyles}
|
|
32
|
+
${d({start:[`pointerdown`,this.handlePointerdown],streamInside:[`pointermove`,this.handlePointermove],end:[[`pointerup`,`pointercancel`,`pointerleave`,`lostpointercapture`],this.handlePointerup]})}
|
|
33
|
+
></luzmo-color-handle>
|
|
34
|
+
<input
|
|
35
|
+
type="range"
|
|
36
|
+
class="slider"
|
|
37
|
+
min="0"
|
|
38
|
+
max=${this.mode===`opacity`?`100`:`360`}
|
|
39
|
+
aria-orientation=${i(this.vertical?`vertical`:void 0)}
|
|
40
|
+
orient=${i(this.vertical?`vertical`:void 0)}
|
|
41
|
+
step=${this.step}
|
|
42
|
+
aria-label=${this.label}
|
|
43
|
+
.value=${String(this.mode===`opacity`?this.value*100:this.value)}
|
|
44
|
+
aria-valuetext=${`${new Intl.NumberFormat(this.languageResolver.language,{maximumFractionDigits:0,minimumIntegerDigits:1,style:`unit`,unit:this.mode===`opacity`?`percent`:`degree`,unitDisplay:`narrow`}).format(this.mode===`opacity`?this.value*100:this.value)}`}
|
|
45
|
+
@input=${this.handleInput}
|
|
46
|
+
@change=${this.handleChange}
|
|
47
|
+
@keydown=${this.handleKeydown}
|
|
48
|
+
@keyup=${this.handleKeyup}
|
|
49
|
+
/>
|
|
50
|
+
`}disconnectedCallback(){this._pointerDown=!1,this._capturedPointer=void 0,super.disconnectedCallback()}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener(`focus`,this.handleFocus),this.addEventListener(`blur`,this.handleBlur)}updated(e){e.has(`mode`)&&(this.handle.style.insetInlineStart=``,this.handle.style.insetBlockEnd=``,this.mode===`opacity`&&(this.colorController.color=new V(this.colorController.color).toRgbString(),this.handle.style.insetInlineStart=100*this.colorController.opacity+`%`))}};a([o({type:String,reflect:!0})],J.prototype,`dir`,void 0),a([o({type:String,reflect:!0})],J.prototype,`mode`,void 0),a([o({type:Boolean,reflect:!0})],J.prototype,`disabled`,void 0),a([o({type:Boolean,reflect:!0})],J.prototype,`focused`,void 0),a([r(`.handle`)],J.prototype,`handle`,void 0),a([o({type:String})],J.prototype,`label`,void 0),a([o({type:Boolean,reflect:!0})],J.prototype,`vertical`,void 0),a([o({type:Number})],J.prototype,`value`,null),a([o({type:Number,reflect:!0})],J.prototype,`sliderHandlePosition`,void 0),a([o({type:String})],J.prototype,`color`,null),a([o({type:Number})],J.prototype,`step`,void 0),a([o({type:Boolean,attribute:`is-ltr`})],J.prototype,`isLTR`,void 0),a([r(`input`)],J.prototype,`input`,void 0),customElements.get(`luzmo-color-slider`)||customElements.define(`luzmo-color-slider`,J);export{V as n,J as t};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
|
|
2
|
+
import{t as e}from"./random-id-0GBXy8EY.js";var t=e=>e.pointerType===`touch`||e.pointerType===`pen`?e.pointerType:`mouse`,n=class{constructor(t,n){this._options=n,this._prefix=e(),this._count=0,this._keys=/* @__PURE__ */ new Set,this._host=t,this._host.addController(this)}hostDisconnected(){this._reset()}get active(){return this._id!==void 0}start(e,t){this.end();let n=`${this._prefix}-${this._count+=1}`;return this._id=n,this._source=e,this._handle=t,this._startValue=this._options.value(t),this._dispatch(`luzmo-interaction-start`,{id:n,source:e,handle:t}),this._id===n&&this._host.isConnected}keyDown(e,t){return this.active&&this._source!==`keyboard`?!0:!this.active&&!this.start(`keyboard`,t)?!1:(this._keys.add(e),!0)}keyUp(e){this._source===`keyboard`&&this._keys.delete(e)&&this._keys.size===0&&this.end()}endKeyboard(){this._source===`keyboard`&&this.end()}commit(e,t){this._pendingChange=t,e(),this._flushPendingChange()}end(){this._finish(`luzmo-interaction-end`)}cancel(){this._finish(`luzmo-interaction-cancel`)}_finish(e){let t=this._id;if(t===void 0||(this._flushPendingChange(),this._id!==t))return;let{_source:n,_handle:r,_startValue:i}=this,a=!(this._options.isEqual??Object.is)(i,this._options.value(r));this._reset(),this._dispatch(e,{id:t,source:n,handle:r,changed:a})}_flushPendingChange(){let e=this._pendingChange;this._pendingChange=void 0,e?.()}_reset(){this._id=void 0,this._source=void 0,this._handle=void 0,this._startValue=void 0,this._keys.clear()}_dispatch(e,t){t.handle===void 0&&delete t.handle,this._host.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:t}))}};export{t as n,n as t};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import"../tokens.js";import{c as e,i as t,y as n}from"./lit-DWANyjiY.js";import{g as r,l as i,y as a}from"./lucero-runtime-DMlHjBe_.js";import{C as o,E as s,F as c}from"./luzmo-icons-vtQE0BSI.js";import{r as l,t as u}from"./language-resolution-BwIkGyuH.js";import{a as d,s as f,t as p}from"./platform-wNs7qaiE.js";import{t as m}from"./NumberFormatter-COykocAS.js";import{t as h}from"./NumberParser--1Rm0Yk7.js";import{t as g}from"./streaming-listener-DbMoHlSj.js";import{n as _}from"./text-field-DXzpM1Qn.js";import"./infield-button-B8EkjwP9.js";var v=`#text-field{--stepper-width:calc(var(--luzmo-stepper-height,var(--stepper-height)) * var(--luzmo-stepper-min-width-multiplier,var(--stepper-min-width-multiplier)) + var(--luzmo-stepper-button-width,var(--stepper-button-width)) + var(--luzmo-stepper-border-width,var(--stepper-border-width)) * 2);--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-buttons-border-color,var(--stepper-buttons-border-color)));--luzmo-infield-button-border-width:var(--luzmo-stepper-button-border-width,var(--stepper-button-border-width));--luzmo-infield-button-border-radius-reset:var(--stepper-button-border-radius-reset);--luzmo-text-field-border-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));inline-size:var(--luzmo-stepper-width,var(--stepper-width));block-size:var(--luzmo-stepper-height,var(--stepper-height));border-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));flex-flow:row;display:inline-flex;position:relative}#text-field:after{content:"";inline-size:100%;block-size:var(--luzmo-stepper-focus-indicator-width,var(--stepper-focus-indicator-width));position:absolute;inset-block-end:calc((var(--luzmo-stepper-focus-indicator-gap,var(--stepper-focus-indicator-gap)) + var(--luzmo-stepper-focus-indicator-width,var(--stepper-focus-indicator-width))) * -1);inset-inline-start:0}:host([focused]) #text-field,#text-field:focus{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-border-color-focus,var(--stepper-border-color-focus)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-buttons-border-color-focus,var(--stepper-buttons-border-color-focus)))}:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .input{outline:none}:host([focused]:not([disabled])) #text-field .buttons,:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .buttons,:host(:not([disabled])) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-border-color-focus,var(--stepper-border-color-focus)))}:host([keyboard-focused]) #text-field,#text-field:focus-visible{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-buttons-border-color-keyboard-focus,var(--stepper-buttons-border-color-keyboard-focus)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-buttons-border-color-keyboard-focus,var(--stepper-buttons-border-color-keyboard-focus)))}:host([keyboard-focused]:not([disabled])) #text-field,:host(:not([disabled])) #text-field:focus-visible{outline:var(--luzmo-stepper-focus-indicator-width,var(--stepper-focus-indicator-width)) solid;outline-color:var(--highcontrast-stepper-focus-indicator-color,var(--luzmo-stepper-focus-indicator-color,var(--stepper-focus-indicator-color)));outline-offset:var(--luzmo-stepper-focus-indicator-gap,var(--stepper-focus-indicator-gap))}:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .input{outline:none}:host([keyboard-focused]:not([disabled])) #text-field .buttons,:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .buttons,:host(:not([disabled])) #text-field:focus-visible .input{border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-border-color-keyboard-focus,var(--stepper-border-color-keyboard-focus)))}:host([invalid]:not([disabled])) #text-field{--luzmo-stepper-border-color:var(--luzmo-stepper-border-color-invalid,var(--stepper-border-color-invalid));--luzmo-stepper-border-color-hover:var(--luzmo-stepper-border-color-hover-invalid,var(--stepper-border-color-hover-invalid));--luzmo-stepper-border-color-focus:var(--luzmo-stepper-border-color-focus-invalid,var(--stepper-border-color-focus-invalid));--luzmo-stepper-border-color-focus-hover:var(--luzmo-stepper-border-color-focus-hover-invalid,var(--stepper-border-color-focus-hover-invalid));--luzmo-stepper-border-color-keyboard-focus:var(--luzmo-stepper-border-color-keyboard-focus-invalid,var(--stepper-border-color-keyboard-focus-invalid));--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-invalid,var(--stepper-border-color-invalid));--stepper-focus-indicator-color:var(--luzmo-stepper-focus-indicator-color-invalid,var(--stepper-focus-indicator-color-invalid))}:host([invalid][focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-focus-invalid,var(--stepper-border-color-focus-invalid))}:host([invalid][keyboard-focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus-visible{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-keyboard-focus-invalid,var(--stepper-border-color-keyboard-focus-invalid))}:host([disabled]) #text-field{--luzmo-stepper-border-color:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-hover:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-focus:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-focus-hover:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-keyboard-focus:var(--stepper-button-border-color-disabled);--luzmo-stepper-buttons-background-color:var(--stepper-buttons-background-color-disabled);--luzmo-infield-button-border-width:var(--stepper-button-border-width-disabled);--luzmo-infield-button-border-color:var(--stepper-button-border-color-disabled);--luzmo-text-field-border-color-disabled:var(--stepper-button-border-color-disabled)}#text-field .input{border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));border-inline-end-width:0;border-start-end-radius:0;border-end-end-radius:0}#text-field.hide-stepper .input{border-inline-end-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));border-start-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius))}#text-field .buttons{box-sizing:border-box;font-size:var(--luzmo-stepper-button-font-size,var(--stepper-button-font-size));block-size:var(--luzmo-stepper-height,var(--stepper-height));inline-size:var(--luzmo-stepper-button-width,var(--stepper-button-width));border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));border-style:var(--luzmo-stepper-buttons-border-style,var(--stepper-buttons-border-style));border-width:var(--highcontrast-stepper-buttons-border-width,var(--luzmo-stepper-buttons-border-width,var(--stepper-buttons-border-width)));background-color:var(--highcontrast-stepper-buttons-background-color,var(--luzmo-stepper-buttons-background-color,var(--stepper-buttons-background-color)));transition:border-color var(--luzmo-stepper-animation-duration,var(--stepper-animation-duration)) ease-in-out;border-inline-start-width:0;border-start-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));flex-direction:column;justify-content:center;display:flex}:host([quiet]) #text-field{border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #text-field .input{--luzmo-text-field-focus-indicator-color:transparent}:host([quiet]) #text-field.hide-stepper .input{border-inline-end-width:0;border-end-end-radius:0}:host([quiet]) #text-field .buttons{--luzmo-infield-button-border-color:transparent;border-width:0;border-block-end-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));border-block-end-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));border-block-end-style:solid;border-end-end-radius:0}:host([quiet]) #text-field .button{--luzmo-infield-button-width-stacked:var(--luzmo-stepper-button-width-quiet,var(--stepper-button-width));--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-quiet,var(--stepper-button-border-color-quiet));--luzmo-infield-button-stacked-bottom-border-block-end-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));--luzmo-infield-button-stacked-bottom-border-radius-end-end:0;--luzmo-infield-button-stacked-bottom-border-radius-end-start:0;--luzmo-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #text-field .buttons,:host([quiet]) #text-field .input{background-color:initial}:host([quiet][focused]) #text-field,:host([quiet]) #text-field:focus{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-border-color-focus,var(--stepper-border-color-focus)))}:host([quiet][keyboard-focused]:not([disabled])) #text-field{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-border-color-keyboard-focus,var(--stepper-border-color-keyboard-focus)));outline:none}:host([quiet][keyboard-focused]:not([disabled])) #text-field:after{background-color:var(--highcontrast-stepper-focus-indicator-color,var(--luzmo-stepper-focus-indicator-color,var(--stepper-focus-indicator-color)))}@media (hover:hover){:host(:hover:not([disabled])) #text-field{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-border-color-hover,var(--stepper-border-color-hover)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-buttons-border-color-hover,var(--stepper-buttons-border-color-hover)))}:host([focused]:hover) #text-field,:host(:hover) #text-field:focus{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-buttons-border-color-focus-hover,var(--stepper-buttons-border-color-focus-hover)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-buttons-border-color-focus-hover,var(--stepper-buttons-border-color-focus-hover)))}:host([focused]:hover) #text-field .buttons,:host([focused]:hover) #text-field .input,:host(:hover) #text-field:focus .buttons,:host(:hover) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-border-color-focus-hover,var(--stepper-border-color-focus-hover)))}:host([invalid]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-hover-invalid,var(--stepper-border-color-hover-invalid))}:host([invalid][focused]:not([disabled]):hover) #text-field,:host([invalid]:not([disabled]):hover) #text-field:focus{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-focus-hover-invalid,var(--stepper-border-color-focus-hover-invalid))}:host([quiet]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-border-color-hover,var(--stepper-border-color-hover)))}:host([quiet]:not([disabled]):hover) #text-field .buttons{background-color:initial}:host([quiet][focused]:hover) #text-field,:host([quiet]:hover) #text-field:focus{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-border-color-focus-hover,var(--stepper-border-color-focus-hover)))}:host([quiet][keyboard-focused]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-border-color-hover,var(--stepper-border-color-hover)))}}:host([invalid]) #text-field,:host([valid]) #text-field{--stepper-status-icon-inline-offset:var(--luzmo-stepper-button-width,var(--stepper-button-width))}:host([hide-stepper][invalid]) #text-field,:host([hide-stepper][valid]) #text-field{--stepper-status-icon-inline-offset:0px}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{inset-inline-end:calc(var(--stepper-status-icon-inline-offset) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}:host([quiet][invalid]) #text-field .icon,:host([quiet][valid]) #text-field .icon{inset-inline-end:var(--stepper-status-icon-inline-offset)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}:host([invalid]) #text-field{--highcontrast-stepper-border-color:Highlight;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:Highlight;--highcontrast-infield-button-border-color:Highlight}:host([disabled]) #text-field{--highcontrast-stepper-border-color:GrayText;--highcontrast-infield-button-border-color:GrayText;--highcontrast-stepper-buttons-border-width:var(--luzmo-stepper-border-width,var(--stepper-border-width))}}:host{--text-field-minimum-width-multiplier:2;--stepper-border-width:var(--luzmo-border-width);--stepper-border-color:var(--luzmo-border-color);--stepper-border-color-hover:var(--luzmo-border-color-full-hover);--stepper-border-color-focus:var(--luzmo-border-color-full-focus);--stepper-border-color-focus-hover:var(--luzmo-border-color-full-focus);--stepper-border-color-keyboard-focus:var(--luzmo-border-color-full-focus);--stepper-border-radius:var(--luzmo-border-radius);--stepper-min-width-multiplier:1.5;--stepper-animation-duration:var(--luzmo-animation-duration);--stepper-buttons-background-color:var(--luzmo-background-color);--stepper-buttons-border-style:none;--stepper-buttons-border-width:0;--stepper-buttons-border-color:var(--luzmo-border-color);--stepper-buttons-border-color-hover:var(--luzmo-border-color-full-hover);--stepper-buttons-border-color-focus:var(--luzmo-border-color-full-focus);--stepper-buttons-border-color-keyboard-focus:var(--luzmo-border-color-focus);--stepper-button-font-size:var(--luzmo-font-size);--stepper-button-padding:0px;--stepper-button-border-radius-reset:0;--stepper-button-border-width:var(--luzmo-border-width);--stepper-button-background-color-focus:var(--luzmo-background-color-focus);--stepper-button-background-color-keyboard-focus:var(--luzmo-background-color-focus);--stepper-border-color-invalid:var(--luzmo-negative-color);--stepper-border-color-hover-invalid:var(--luzmo-negative-color-hover);--stepper-border-color-focus-invalid:var(--luzmo-negative-color-focus);--stepper-border-color-focus-hover-invalid:var(--luzmo-negative-color-focus);--stepper-border-color-keyboard-focus-invalid:var(--luzmo-negative-color-focus);--stepper-focus-indicator-width:var(--luzmo-indicator-width);--stepper-focus-indicator-gap:calc(-1 * var(--luzmo-border-width));--stepper-focus-indicator-color:var(--luzmo-indicator-color);--stepper-focus-indicator-color-invalid:var(--luzmo-negative-color-focus);--stepper-button-border-color-quiet:transparent;--stepper-button-border-color-disabled:var(--luzmo-border-color-disabled);--stepper-button-border-width-disabled:var(--luzmo-border-width);--stepper-buttons-background-color-disabled:var(--luzmo-background-color-disabled);--stepper-button-width:20px;--stepper-height:var(--luzmo-component-height);--stepper-status-icon-space:0px}:host([invalid]){--stepper-status-icon-space:calc(var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-start-invalid,var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)))}:host([valid]){--stepper-status-icon-space:calc(var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-start-valid,var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid,var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)))}:host([size=s]) #text-field{--stepper-button-width:16px;--stepper-height:var(--luzmo-component-height-s)}:host([size=m]) #text-field{--stepper-button-width:20px;--stepper-height:var(--luzmo-component-height)}:host([size=l]) #text-field{--stepper-button-width:28px;--stepper-height:var(--luzmo-component-height-l)}:host([size=xl]) #text-field{--stepper-button-width:36px;--stepper-height:var(--luzmo-component-height-xl)}:host{inline-size:var(--luzmo-stepper-width,var(--stepper-width));--number-field-width:calc(var(--luzmo-stepper-height,var(--stepper-height)) * var(--luzmo-stepper-min-width-multiplier,var(--text-field-minimum-width-multiplier)) + var(--luzmo-stepper-button-width,var(--stepper-button-width)) + var(--luzmo-stepper-border-width,var(--stepper-border-width)) * 2);--luzmo-infield-button-border-width:var(--unset-value-resets-inheritance);--stepper-width:calc(var(--number-field-width) + var(--stepper-status-icon-space))}:host([size=s]){--stepper-width:calc(var(--number-field-width) / 5 * 4 + var(--stepper-status-icon-space));--stepper-button-font-size:var(--luzmo-font-size-s)}:host([size=l]){--stepper-width:calc(var(--number-field-width) * 1.25 + var(--stepper-status-icon-space));--stepper-button-font-size:var(--luzmo-font-size-l)}:host([size=xl]){--stepper-width:calc(var(--number-field-width) * 1.25 * 1.25 + var(--stepper-status-icon-space));--stepper-button-font-size:var(--luzmo-font-size-xl)}#text-field{inline-size:100%}.input{font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #text-field:hover .input{border-color:#0000}:host([hide-stepper]:not([quiet])) #text-field input{border:var(--luzmo-stepper-border-width,var(--stepper-border-width)) solid var(--luzmo-stepper-border-color,var(--stepper-border-color));border-radius:var(--luzmo-border-radius)}:host([quiet]) #text-field .button{--luzmo-infield-button-border-color:var(--luzmo-infield-border-color-quiet,transparent);--luzmo-infield-button-edge-to-fill:0;--luzmo-infield-button-border-width:var(--luzmo-infield-button-border-width-quiet,0)}:host([grows]){--number-field-char-count:1;--number-field-content-width:calc(var(--number-field-char-count) * 1ch + var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)) * 2 + var(--stepper-status-icon-space));--number-field-grows-width:calc(var(--number-field-content-width) + var(--luzmo-stepper-button-width,var(--stepper-button-width)) + var(--luzmo-stepper-border-width,var(--stepper-border-width)) * 2);inline-size:var(--number-field-grows-width);min-inline-size:var(--luzmo-stepper-width,var(--stepper-width));max-inline-size:100%}:host([grows]) #text-field{inline-size:100%}:host([grows]) #text-field .input{inline-size:100%;min-inline-size:0}`,y={"1":`1`,"2":`2`,"3":`3`,"4":`4`,"5":`5`,"6":`6`,"7":`7`,"8":`8`,"9":`9`,"0":`0`,"、":`,`,",":`,`,"。":`.`,".":`.`,"%":`%`,"+":`+`,ー:`-`,一:`1`,二:`2`,三:`3`,四:`4`,五:`5`,六:`6`,七:`7`,八:`8`,九:`9`,零:`0`},b=class extends _{constructor(...e){super(...e),this.focused=!1,this._forcedUnit=``,this.formatOptions={},this.hideStepper=!1,this.grows=!1,this.indeterminate=!1,this.keyboardFocused=!1,this.managedInput=!1,this.stepModifier=10,this._value=NaN,this._trackingValue=``,this.decimalsChars=/* @__PURE__ */ new Set([`.`,`,`]),this.valueBeforeFocus=``,this.isIntentDecimal=!1,this.changeCount=0,this.languageResolver=new u(this),this.wasIndeterminate=!1,this.hasRecentlyReceivedPointerDown=!1,this.applyFocusElementLabel=e=>{this.appliedLabel=e},this.isComposing=!1}static get styles(){return[...super.styles,n(v)]}set value(e){let t=this.validateInput(e);if(t===this.value)return;this.lastCommitedValue=t;let n=this._value;this._value=t,this.requestUpdate(`value`,n)}get value(){return this._value}get inputValue(){return this.indeterminate?this.formattedValue:this.inputElement.value}setValue(e=this.value){let t=this.lastCommitedValue;this.value=e,t!==void 0&&t!==this.value&&(this.lastCommitedValue=this.value,this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})))}get valueAsString(){return this._value.toString()}set valueAsString(e){this.value=this.numberParser.parse(e)}get formattedValue(){return Number.isNaN(this.value)?``:this.numberFormatter.format(this.value)+(this.focused?``:this._forcedUnit)}convertValueToNumber(e){let t=[...e].map(e=>y[e]||e).join(``),n=[...this.valueBeforeFocus].filter(e=>this.decimalsChars.has(e)),r=new Set(n);if(d()&&this.inputElement.inputMode===`decimal`&&t!==this.valueBeforeFocus){let e=this.numberFormatter.formatToParts(1000.1).find(e=>e.type===`decimal`).value;for(let n of r)n!==e&&!this.isIntentDecimal&&(t=t.replaceAll(new RegExp(n,`g`),``));let n=!1,i=[...t];for(let t=i.length-1;t>=0;t--){let r=i[t];this.decimalsChars.has(r)&&(n?i[t]=``:(i[t]=e,n=!0))}t=i.join(``)}return this.numberParser.parse(t)}get _step(){return this.step===void 0?this.formatOptions?.style===`percent`?.01:1:this.step}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this.managedInput=!0,this.buttons.setPointerCapture(e.pointerId);let t=this.buttons.children[0].getBoundingClientRect(),n=this.buttons.children[1].getBoundingClientRect();this.findChange=e=>{e.clientX>=t.x&&e.clientY>=t.y&&e.clientX<=t.x+t.width&&e.clientY<=t.y+t.height?this.change=e=>this.increment(e.shiftKey?this.stepModifier:1):e.clientX>=n.x&&e.clientY>=n.y&&e.clientX<=n.x+n.width&&e.clientY<=n.y+n.height&&(this.change=e=>this.decrement(e.shiftKey?this.stepModifier:1))},this.findChange(e),this.startChange(e)}startChange(e){this.changeCount=0,this.doChange(e),this.safty=setTimeout(()=>{this.doNextChange(e)},400)}doChange(e){this.change(e)}handlePointermove(e){this.findChange(e)}handlePointerup(e){this.buttons.releasePointerCapture(e.pointerId),cancelAnimationFrame(this.nextChange),clearTimeout(this.safty),this.managedInput=!1,this.setValue()}doNextChange(e){return this.changeCount+=1,this.changeCount%5==0&&this.doChange(e),requestAnimationFrame(()=>{this.nextChange=this.doNextChange(e)})}stepBy(e){if(this.disabled||this.readonly)return;let t=this.min===void 0?0:this.min,n=this.value;n+=e*this._step,Number.isNaN(this.value)&&(n=t),n=this.valueWithLimits(n),this.requestUpdate(),this._value=this.validateInput(n),this.inputElement.value=this.numberFormatter.format(n),this.inputElement.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.indeterminate=!1,this.focus()}increment(e=1){this.stepBy(1*e)}decrement(e=1){this.stepBy(-1*e)}handleKeydown(e){if(!this.isComposing)switch(e.code){case`ArrowUp`:e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1),this.setValue();break;case`ArrowDown`:e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue()}}onScroll(e){e.preventDefault(),this.managedInput=!0;let t=e.shiftKey?e.deltaX/Math.abs(e.deltaX):e.deltaY/Math.abs(e.deltaY);t!==0&&!Number.isNaN(t)&&(this.stepBy(t*(e.shiftKey?this.stepModifier:1)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.setValue()},100)),this.managedInput=!1}onFocus(){super.onFocus(),this._trackingValue=this.inputValue,this.keyboardFocused=!this.readonly&&!0,this.addEventListener(`wheel`,this.onScroll,{passive:!1}),this.valueBeforeFocus=this.inputElement.value}onBlur(e){super.onBlur(e),this.keyboardFocused=!this.readonly&&!1,this.removeEventListener(`wheel`,this.onScroll),this.isIntentDecimal=!1}handleFocusin(){this.focused=!this.readonly&&!0,this.keyboardFocused=!this.readonly&&!0}handleFocusout(){this.focused=!this.readonly&&!1,this.keyboardFocused=!this.readonly&&!1}handleChange(){let e=this.convertValueToNumber(this.inputValue);this.wasIndeterminate&&(this.wasIndeterminate=!1,this.indeterminateValue=void 0,Number.isNaN(e))?this.indeterminate=!0:(this.setValue(e),this.inputElement.value=this.formattedValue)}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event(`input`,{composed:!0,bubbles:!0}))})}handleInputElementPointerdown(){this.hasRecentlyReceivedPointerDown=!0,this.updateComplete.then(()=>{requestAnimationFrame(()=>{this.hasRecentlyReceivedPointerDown=!1})})}handleInput(e){if(this.isComposing){if(e.data){let t=this.convertValueToNumber(e.data);Number.isNaN(t)&&(this.inputElement.value=this.indeterminate?`-`:this._trackingValue,this.isComposing=!1)}e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(`-`,``)),e.data&&this.decimalsChars.has(e.data)&&(this.isIntentDecimal=!0);let{value:t,selectionStart:n}=this.inputElement,r=[...t].map(e=>y[e]||e).join(``);if(this.numberParser.isValidPartialNumber(r)){this.lastCommitedValue=this.lastCommitedValue??this.value;let e=this.convertValueToNumber(r);!r&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(e)),this._trackingValue=r,this.inputElement.value=r,this.inputElement.setSelectionRange(n,n);return}this.inputElement.value=this.indeterminate?`-`:this._trackingValue,e.stopPropagation();let i=r.length,a=this._trackingValue.length,o=(n||i)-(i-a);this.inputElement.setSelectionRange(o,o)}valueWithLimits(e){let t=e;return this.min!==void 0&&(t=Math.max(this.min,t)),this.max!==void 0&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);let t=e<0?-1:1;if(e*=t,this.step){let t=this.min===void 0?0:this.min,n=Number.parseFloat(this.valueFormatter.format((e-t)%this.step));if(n!==0&&(Math.round(n/this.step)===1?e+=this.step-n:e-=n),this.max!==void 0)for(;e>this.max;)e-=this.step;e=Number.parseFloat(this.valueFormatter.format(e))}return e*=t,e}get displayValue(){let e=this.focused?``:`-`;return this.indeterminate?e:this.formattedValue}clearNumberFormatterCache(){this._numberFormatter=void 0,this._numberParser=void 0}get numberFormatter(){if(!this._numberFormatter||!this._numberFormatterFocused){let{style:e,unit:t,unitDisplay:n,...r}=this.formatOptions;e!==`unit`&&(r.style=e),this._numberFormatterFocused=new m(this.languageResolver.language,r);try{this._numberFormatter=new m(this.languageResolver.language,this.formatOptions),this._forcedUnit=``,this._numberFormatter.format(1)}catch{e===`unit`&&(this._forcedUnit=t),this._numberFormatter=this._numberFormatterFocused}}return this.focused?this._numberFormatterFocused:this._numberFormatter}clearValueFormatterCache(){this._valueFormatter=void 0}get valueFormatter(){if(!this._valueFormatter){let e=this.step?this.step===Math.floor(this.step)?0:this.step.toString().split(`.`)[1].length:0;this._valueFormatter=new m(`en`,{useGrouping:!1,maximumFractionDigits:e})}return this._valueFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){let{style:e,unit:t,unitDisplay:n,...r}=this.formatOptions;e!==`unit`&&(r.style=e),this._numberParserFocused=new h(this.languageResolver.language,r);try{this._numberParser=new h(this.languageResolver.language,this.formatOptions),this._forcedUnit=``,this._numberParser.parse(`0`)}catch{e===`unit`&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete=`off`,e`
|
|
2
|
+
import"../tokens.js";import{c as e,i as t,y as n}from"./lit-DWANyjiY.js";import{g as r,l as i,y as a}from"./lucero-runtime-DMlHjBe_.js";import{C as o,E as s,F as c}from"./luzmo-icons-vtQE0BSI.js";import{r as l,t as u}from"./language-resolution-BwIkGyuH.js";import{a as d,s as f,t as p}from"./platform-wNs7qaiE.js";import{t as m}from"./NumberFormatter-COykocAS.js";import{t as h}from"./NumberParser--1Rm0Yk7.js";import{t as g}from"./streaming-listener-0FSzb9QY.js";import{n as _}from"./text-field-DXzpM1Qn.js";import"./infield-button-B8EkjwP9.js";var v=`#text-field{--stepper-width:calc(var(--luzmo-stepper-height,var(--stepper-height)) * var(--luzmo-stepper-min-width-multiplier,var(--stepper-min-width-multiplier)) + var(--luzmo-stepper-button-width,var(--stepper-button-width)) + var(--luzmo-stepper-border-width,var(--stepper-border-width)) * 2);--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-buttons-border-color,var(--stepper-buttons-border-color)));--luzmo-infield-button-border-width:var(--luzmo-stepper-button-border-width,var(--stepper-button-border-width));--luzmo-infield-button-border-radius-reset:var(--stepper-button-border-radius-reset);--luzmo-text-field-border-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));inline-size:var(--luzmo-stepper-width,var(--stepper-width));block-size:var(--luzmo-stepper-height,var(--stepper-height));border-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));flex-flow:row;display:inline-flex;position:relative}#text-field:after{content:"";inline-size:100%;block-size:var(--luzmo-stepper-focus-indicator-width,var(--stepper-focus-indicator-width));position:absolute;inset-block-end:calc((var(--luzmo-stepper-focus-indicator-gap,var(--stepper-focus-indicator-gap)) + var(--luzmo-stepper-focus-indicator-width,var(--stepper-focus-indicator-width))) * -1);inset-inline-start:0}:host([focused]) #text-field,#text-field:focus{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-border-color-focus,var(--stepper-border-color-focus)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-buttons-border-color-focus,var(--stepper-buttons-border-color-focus)))}:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .input{outline:none}:host([focused]:not([disabled])) #text-field .buttons,:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .buttons,:host(:not([disabled])) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-border-color-focus,var(--stepper-border-color-focus)))}:host([keyboard-focused]) #text-field,#text-field:focus-visible{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-buttons-border-color-keyboard-focus,var(--stepper-buttons-border-color-keyboard-focus)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-buttons-border-color-keyboard-focus,var(--stepper-buttons-border-color-keyboard-focus)))}:host([keyboard-focused]:not([disabled])) #text-field,:host(:not([disabled])) #text-field:focus-visible{outline:var(--luzmo-stepper-focus-indicator-width,var(--stepper-focus-indicator-width)) solid;outline-color:var(--highcontrast-stepper-focus-indicator-color,var(--luzmo-stepper-focus-indicator-color,var(--stepper-focus-indicator-color)));outline-offset:var(--luzmo-stepper-focus-indicator-gap,var(--stepper-focus-indicator-gap))}:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .input{outline:none}:host([keyboard-focused]:not([disabled])) #text-field .buttons,:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .buttons,:host(:not([disabled])) #text-field:focus-visible .input{border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-border-color-keyboard-focus,var(--stepper-border-color-keyboard-focus)))}:host([invalid]:not([disabled])) #text-field{--luzmo-stepper-border-color:var(--luzmo-stepper-border-color-invalid,var(--stepper-border-color-invalid));--luzmo-stepper-border-color-hover:var(--luzmo-stepper-border-color-hover-invalid,var(--stepper-border-color-hover-invalid));--luzmo-stepper-border-color-focus:var(--luzmo-stepper-border-color-focus-invalid,var(--stepper-border-color-focus-invalid));--luzmo-stepper-border-color-focus-hover:var(--luzmo-stepper-border-color-focus-hover-invalid,var(--stepper-border-color-focus-hover-invalid));--luzmo-stepper-border-color-keyboard-focus:var(--luzmo-stepper-border-color-keyboard-focus-invalid,var(--stepper-border-color-keyboard-focus-invalid));--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-invalid,var(--stepper-border-color-invalid));--stepper-focus-indicator-color:var(--luzmo-stepper-focus-indicator-color-invalid,var(--stepper-focus-indicator-color-invalid))}:host([invalid][focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-focus-invalid,var(--stepper-border-color-focus-invalid))}:host([invalid][keyboard-focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus-visible{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-keyboard-focus-invalid,var(--stepper-border-color-keyboard-focus-invalid))}:host([disabled]) #text-field{--luzmo-stepper-border-color:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-hover:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-focus:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-focus-hover:var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-keyboard-focus:var(--stepper-button-border-color-disabled);--luzmo-stepper-buttons-background-color:var(--stepper-buttons-background-color-disabled);--luzmo-infield-button-border-width:var(--stepper-button-border-width-disabled);--luzmo-infield-button-border-color:var(--stepper-button-border-color-disabled);--luzmo-text-field-border-color-disabled:var(--stepper-button-border-color-disabled)}#text-field .input{border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));border-inline-end-width:0;border-start-end-radius:0;border-end-end-radius:0}#text-field.hide-stepper .input{border-inline-end-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));border-start-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius))}#text-field .buttons{box-sizing:border-box;font-size:var(--luzmo-stepper-button-font-size,var(--stepper-button-font-size));block-size:var(--luzmo-stepper-height,var(--stepper-height));inline-size:var(--luzmo-stepper-button-width,var(--stepper-button-width));border-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));border-style:var(--luzmo-stepper-buttons-border-style,var(--stepper-buttons-border-style));border-width:var(--highcontrast-stepper-buttons-border-width,var(--luzmo-stepper-buttons-border-width,var(--stepper-buttons-border-width)));background-color:var(--highcontrast-stepper-buttons-background-color,var(--luzmo-stepper-buttons-background-color,var(--stepper-buttons-background-color)));transition:border-color var(--luzmo-stepper-animation-duration,var(--stepper-animation-duration)) ease-in-out;border-inline-start-width:0;border-start-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius,var(--stepper-border-radius));flex-direction:column;justify-content:center;display:flex}:host([quiet]) #text-field{border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #text-field .input{--luzmo-text-field-focus-indicator-color:transparent}:host([quiet]) #text-field.hide-stepper .input{border-inline-end-width:0;border-end-end-radius:0}:host([quiet]) #text-field .buttons{--luzmo-infield-button-border-color:transparent;border-width:0;border-block-end-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));border-block-end-color:var(--highcontrast-stepper-border-color,var(--luzmo-stepper-border-color,var(--stepper-border-color)));border-block-end-style:solid;border-end-end-radius:0}:host([quiet]) #text-field .button{--luzmo-infield-button-width-stacked:var(--luzmo-stepper-button-width-quiet,var(--stepper-button-width));--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-quiet,var(--stepper-button-border-color-quiet));--luzmo-infield-button-stacked-bottom-border-block-end-width:var(--luzmo-stepper-border-width,var(--stepper-border-width));--luzmo-infield-button-stacked-bottom-border-radius-end-end:0;--luzmo-infield-button-stacked-bottom-border-radius-end-start:0;--luzmo-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #text-field .buttons,:host([quiet]) #text-field .input{background-color:initial}:host([quiet][focused]) #text-field,:host([quiet]) #text-field:focus{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus,var(--luzmo-stepper-border-color-focus,var(--stepper-border-color-focus)))}:host([quiet][keyboard-focused]:not([disabled])) #text-field{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--luzmo-stepper-border-color-keyboard-focus,var(--stepper-border-color-keyboard-focus)));outline:none}:host([quiet][keyboard-focused]:not([disabled])) #text-field:after{background-color:var(--highcontrast-stepper-focus-indicator-color,var(--luzmo-stepper-focus-indicator-color,var(--stepper-focus-indicator-color)))}@media (hover:hover){:host(:hover:not([disabled])) #text-field{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-border-color-hover,var(--stepper-border-color-hover)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-buttons-border-color-hover,var(--stepper-buttons-border-color-hover)))}:host([focused]:hover) #text-field,:host(:hover) #text-field:focus{--luzmo-stepper-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-buttons-border-color-focus-hover,var(--stepper-buttons-border-color-focus-hover)));--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-buttons-border-color-focus-hover,var(--stepper-buttons-border-color-focus-hover)))}:host([focused]:hover) #text-field .buttons,:host([focused]:hover) #text-field .input,:host(:hover) #text-field:focus .buttons,:host(:hover) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-border-color-focus-hover,var(--stepper-border-color-focus-hover)))}:host([invalid]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-hover-invalid,var(--stepper-border-color-hover-invalid))}:host([invalid][focused]:not([disabled]):hover) #text-field,:host([invalid]:not([disabled]):hover) #text-field:focus{--luzmo-infield-button-border-color:var(--luzmo-stepper-border-color-focus-hover-invalid,var(--stepper-border-color-focus-hover-invalid))}:host([quiet]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-border-color-hover,var(--stepper-border-color-hover)))}:host([quiet]:not([disabled]):hover) #text-field .buttons{background-color:initial}:host([quiet][focused]:hover) #text-field,:host([quiet]:hover) #text-field:focus{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--luzmo-stepper-border-color-focus-hover,var(--stepper-border-color-focus-hover)))}:host([quiet][keyboard-focused]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color:var(--highcontrast-stepper-border-color-hover,var(--luzmo-stepper-border-color-hover,var(--stepper-border-color-hover)))}}:host([invalid]) #text-field,:host([valid]) #text-field{--stepper-status-icon-inline-offset:var(--luzmo-stepper-button-width,var(--stepper-button-width))}:host([hide-stepper][invalid]) #text-field,:host([hide-stepper][valid]) #text-field{--stepper-status-icon-inline-offset:0px}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{inset-inline-end:calc(var(--stepper-status-icon-inline-offset) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}:host([quiet][invalid]) #text-field .icon,:host([quiet][valid]) #text-field .icon{inset-inline-end:var(--stepper-status-icon-inline-offset)}@media (forced-colors:active){:host{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-button-background-color-default:Canvas;--highcontrast-stepper-button-background-color-hover:Canvas;--highcontrast-stepper-button-background-color-focus:Canvas;--highcontrast-stepper-button-background-color-keyboard-focus:Canvas;--highcontrast-stepper-focus-indicator-color:Highlight}:host([invalid]) #text-field{--highcontrast-stepper-border-color:Highlight;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:Highlight;--highcontrast-infield-button-border-color:Highlight}:host([disabled]) #text-field{--highcontrast-stepper-border-color:GrayText;--highcontrast-infield-button-border-color:GrayText;--highcontrast-stepper-buttons-border-width:var(--luzmo-stepper-border-width,var(--stepper-border-width))}}:host{--text-field-minimum-width-multiplier:2;--stepper-border-width:var(--luzmo-border-width);--stepper-border-color:var(--luzmo-border-color);--stepper-border-color-hover:var(--luzmo-border-color-full-hover);--stepper-border-color-focus:var(--luzmo-border-color-full-focus);--stepper-border-color-focus-hover:var(--luzmo-border-color-full-focus);--stepper-border-color-keyboard-focus:var(--luzmo-border-color-full-focus);--stepper-border-radius:var(--luzmo-border-radius);--stepper-min-width-multiplier:1.5;--stepper-animation-duration:var(--luzmo-animation-duration);--stepper-buttons-background-color:var(--luzmo-background-color);--stepper-buttons-border-style:none;--stepper-buttons-border-width:0;--stepper-buttons-border-color:var(--luzmo-border-color);--stepper-buttons-border-color-hover:var(--luzmo-border-color-full-hover);--stepper-buttons-border-color-focus:var(--luzmo-border-color-full-focus);--stepper-buttons-border-color-keyboard-focus:var(--luzmo-border-color-focus);--stepper-button-font-size:var(--luzmo-font-size);--stepper-button-padding:0px;--stepper-button-border-radius-reset:0;--stepper-button-border-width:var(--luzmo-border-width);--stepper-button-background-color-focus:var(--luzmo-background-color-focus);--stepper-button-background-color-keyboard-focus:var(--luzmo-background-color-focus);--stepper-border-color-invalid:var(--luzmo-negative-color);--stepper-border-color-hover-invalid:var(--luzmo-negative-color-hover);--stepper-border-color-focus-invalid:var(--luzmo-negative-color-focus);--stepper-border-color-focus-hover-invalid:var(--luzmo-negative-color-focus);--stepper-border-color-keyboard-focus-invalid:var(--luzmo-negative-color-focus);--stepper-focus-indicator-width:var(--luzmo-indicator-width);--stepper-focus-indicator-gap:calc(-1 * var(--luzmo-border-width));--stepper-focus-indicator-color:var(--luzmo-indicator-color);--stepper-focus-indicator-color-invalid:var(--luzmo-negative-color-focus);--stepper-button-border-color-quiet:transparent;--stepper-button-border-color-disabled:var(--luzmo-border-color-disabled);--stepper-button-border-width-disabled:var(--luzmo-border-width);--stepper-buttons-background-color-disabled:var(--luzmo-background-color-disabled);--stepper-button-width:20px;--stepper-height:var(--luzmo-component-height);--stepper-status-icon-space:0px}:host([invalid]){--stepper-status-icon-space:calc(var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-start-invalid,var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)))}:host([valid]){--stepper-status-icon-space:calc(var(--luzmo-text-field-icon-size-valid,var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-start-valid,var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid,var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)))}:host([size=s]) #text-field{--stepper-button-width:16px;--stepper-height:var(--luzmo-component-height-s)}:host([size=m]) #text-field{--stepper-button-width:20px;--stepper-height:var(--luzmo-component-height)}:host([size=l]) #text-field{--stepper-button-width:28px;--stepper-height:var(--luzmo-component-height-l)}:host([size=xl]) #text-field{--stepper-button-width:36px;--stepper-height:var(--luzmo-component-height-xl)}:host{inline-size:var(--luzmo-stepper-width,var(--stepper-width));--number-field-width:calc(var(--luzmo-stepper-height,var(--stepper-height)) * var(--luzmo-stepper-min-width-multiplier,var(--text-field-minimum-width-multiplier)) + var(--luzmo-stepper-button-width,var(--stepper-button-width)) + var(--luzmo-stepper-border-width,var(--stepper-border-width)) * 2);--luzmo-infield-button-border-width:var(--unset-value-resets-inheritance);--stepper-width:calc(var(--number-field-width) + var(--stepper-status-icon-space))}:host([size=s]){--stepper-width:calc(var(--number-field-width) / 5 * 4 + var(--stepper-status-icon-space));--stepper-button-font-size:var(--luzmo-font-size-s)}:host([size=l]){--stepper-width:calc(var(--number-field-width) * 1.25 + var(--stepper-status-icon-space));--stepper-button-font-size:var(--luzmo-font-size-l)}:host([size=xl]){--stepper-width:calc(var(--number-field-width) * 1.25 * 1.25 + var(--stepper-status-icon-space));--stepper-button-font-size:var(--luzmo-font-size-xl)}#text-field{inline-size:100%}.input{font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #text-field:hover .input{border-color:#0000}:host([hide-stepper]:not([quiet])) #text-field input{border:var(--luzmo-stepper-border-width,var(--stepper-border-width)) solid var(--luzmo-stepper-border-color,var(--stepper-border-color));border-radius:var(--luzmo-border-radius)}:host([quiet]) #text-field .button{--luzmo-infield-button-border-color:var(--luzmo-infield-border-color-quiet,transparent);--luzmo-infield-button-edge-to-fill:0;--luzmo-infield-button-border-width:var(--luzmo-infield-button-border-width-quiet,0)}:host([grows]){--number-field-char-count:1;--number-field-content-width:calc(var(--number-field-char-count) * 1ch + var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline)) * 2 + var(--stepper-status-icon-space));--number-field-grows-width:calc(var(--number-field-content-width) + var(--luzmo-stepper-button-width,var(--stepper-button-width)) + var(--luzmo-stepper-border-width,var(--stepper-border-width)) * 2);inline-size:var(--number-field-grows-width);min-inline-size:var(--luzmo-stepper-width,var(--stepper-width));max-inline-size:100%}:host([grows]) #text-field{inline-size:100%}:host([grows]) #text-field .input{inline-size:100%;min-inline-size:0}`,y={"1":`1`,"2":`2`,"3":`3`,"4":`4`,"5":`5`,"6":`6`,"7":`7`,"8":`8`,"9":`9`,"0":`0`,"、":`,`,",":`,`,"。":`.`,".":`.`,"%":`%`,"+":`+`,ー:`-`,一:`1`,二:`2`,三:`3`,四:`4`,五:`5`,六:`6`,七:`7`,八:`8`,九:`9`,零:`0`},b=class extends _{constructor(...e){super(...e),this.focused=!1,this._forcedUnit=``,this.formatOptions={},this.hideStepper=!1,this.grows=!1,this.indeterminate=!1,this.keyboardFocused=!1,this.managedInput=!1,this.stepModifier=10,this._value=NaN,this._trackingValue=``,this.decimalsChars=/* @__PURE__ */ new Set([`.`,`,`]),this.valueBeforeFocus=``,this.isIntentDecimal=!1,this.changeCount=0,this._stepping=!1,this.languageResolver=new u(this),this.wasIndeterminate=!1,this.hasRecentlyReceivedPointerDown=!1,this.applyFocusElementLabel=e=>{this.appliedLabel=e},this.isComposing=!1}static get styles(){return[...super.styles,n(v)]}set value(e){let t=this.validateInput(e);if(t===this.value)return;this.lastCommitedValue=t;let n=this._value;this._value=t,this.requestUpdate(`value`,n)}get value(){return this._value}get inputValue(){return this.indeterminate?this.formattedValue:this.inputElement.value}setValue(e=this.value){let t=this.lastCommitedValue;this.value=e,t!==void 0&&t!==this.value&&(this.lastCommitedValue=this.value,this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})))}get valueAsString(){return this._value.toString()}set valueAsString(e){this.value=this.numberParser.parse(e)}get formattedValue(){return Number.isNaN(this.value)?``:this.numberFormatter.format(this.value)+(this.focused?``:this._forcedUnit)}convertValueToNumber(e){let t=[...e].map(e=>y[e]||e).join(``),n=[...this.valueBeforeFocus].filter(e=>this.decimalsChars.has(e)),r=new Set(n);if(d()&&this.inputElement.inputMode===`decimal`&&t!==this.valueBeforeFocus){let e=this.numberFormatter.formatToParts(1000.1).find(e=>e.type===`decimal`).value;for(let n of r)n!==e&&!this.isIntentDecimal&&(t=t.replaceAll(new RegExp(n,`g`),``));let n=!1,i=[...t];for(let t=i.length-1;t>=0;t--){let r=i[t];this.decimalsChars.has(r)&&(n?i[t]=``:(i[t]=e,n=!0))}t=i.join(``)}return this.numberParser.parse(t)}get _step(){return this.step===void 0?this.formatOptions?.style===`percent`?.01:1:this.step}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this.managedInput=!0,this._stepping=!0,this.buttons.setPointerCapture(e.pointerId);let t=this.buttons.children[0].getBoundingClientRect(),n=this.buttons.children[1].getBoundingClientRect();this.findChange=e=>{e.clientX>=t.x&&e.clientY>=t.y&&e.clientX<=t.x+t.width&&e.clientY<=t.y+t.height?this.change=e=>this.increment(e.shiftKey?this.stepModifier:1):e.clientX>=n.x&&e.clientY>=n.y&&e.clientX<=n.x+n.width&&e.clientY<=n.y+n.height&&(this.change=e=>this.decrement(e.shiftKey?this.stepModifier:1))},this.findChange(e),this.startChange(e)}startChange(e){this.changeCount=0,this.doChange(e),this._stepping&&(this.safty=setTimeout(()=>{this.doNextChange(e)},400))}doChange(e){this.change(e)}handlePointermove(e){this.findChange(e)}handlePointerup(e){this.buttons.releasePointerCapture(e.pointerId),this._stopChange(),this.setValue()}_stopChange(){this._stepping=!1,cancelAnimationFrame(this.nextChange),clearTimeout(this.safty),this.managedInput=!1}doNextChange(e){this.changeCount+=1,this.changeCount%5==0&&this.doChange(e),this._stepping&&(this.nextChange=requestAnimationFrame(()=>{this.doNextChange(e)}))}stepBy(e){if(this.disabled||this.readonly)return;let t=this.min===void 0?0:this.min,n=this.value;n+=e*this._step,Number.isNaN(this.value)&&(n=t),n=this.valueWithLimits(n),this.requestUpdate(),this._value=this.validateInput(n),this.inputElement.value=this.numberFormatter.format(n),this.inputElement.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.indeterminate=!1,this.focus()}increment(e=1){this.stepBy(1*e)}decrement(e=1){this.stepBy(-1*e)}handleKeydown(e){if(!this.isComposing)switch(e.code){case`ArrowUp`:e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1),this.setValue();break;case`ArrowDown`:e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue()}}onScroll(e){e.preventDefault(),this.managedInput=!0;let t=e.shiftKey?e.deltaX/Math.abs(e.deltaX):e.deltaY/Math.abs(e.deltaY);t!==0&&!Number.isNaN(t)&&(this.stepBy(t*(e.shiftKey?this.stepModifier:1)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.setValue()},100)),this.managedInput=!1}onFocus(){super.onFocus(),this._trackingValue=this.inputValue,this.keyboardFocused=!this.readonly&&!0,this.addEventListener(`wheel`,this.onScroll,{passive:!1}),this.valueBeforeFocus=this.inputElement.value}onBlur(e){super.onBlur(e),this.keyboardFocused=!this.readonly&&!1,this.removeEventListener(`wheel`,this.onScroll),this.isIntentDecimal=!1}handleFocusin(){this.focused=!this.readonly&&!0,this.keyboardFocused=!this.readonly&&!0}handleFocusout(){this.focused=!this.readonly&&!1,this.keyboardFocused=!this.readonly&&!1}handleChange(){let e=this.convertValueToNumber(this.inputValue);this.wasIndeterminate&&(this.wasIndeterminate=!1,this.indeterminateValue=void 0,Number.isNaN(e))?this.indeterminate=!0:(this.setValue(e),this.inputElement.value=this.formattedValue)}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event(`input`,{composed:!0,bubbles:!0}))})}handleInputElementPointerdown(){this.hasRecentlyReceivedPointerDown=!0,this.updateComplete.then(()=>{requestAnimationFrame(()=>{this.hasRecentlyReceivedPointerDown=!1})})}handleInput(e){if(this.isComposing){if(e.data){let t=this.convertValueToNumber(e.data);Number.isNaN(t)&&(this.inputElement.value=this.indeterminate?`-`:this._trackingValue,this.isComposing=!1)}e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(`-`,``)),e.data&&this.decimalsChars.has(e.data)&&(this.isIntentDecimal=!0);let{value:t,selectionStart:n}=this.inputElement,r=[...t].map(e=>y[e]||e).join(``);if(this.numberParser.isValidPartialNumber(r)){this.lastCommitedValue=this.lastCommitedValue??this.value;let e=this.convertValueToNumber(r);!r&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(e)),this._trackingValue=r,this.inputElement.value=r,this.inputElement.setSelectionRange(n,n);return}this.inputElement.value=this.indeterminate?`-`:this._trackingValue,e.stopPropagation();let i=r.length,a=this._trackingValue.length,o=(n||i)-(i-a);this.inputElement.setSelectionRange(o,o)}valueWithLimits(e){let t=e;return this.min!==void 0&&(t=Math.max(this.min,t)),this.max!==void 0&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);let t=e<0?-1:1;if(e*=t,this.step){let t=this.min===void 0?0:this.min,n=Number.parseFloat(this.valueFormatter.format((e-t)%this.step));if(n!==0&&(Math.round(n/this.step)===1?e+=this.step-n:e-=n),this.max!==void 0)for(;e>this.max;)e-=this.step;e=Number.parseFloat(this.valueFormatter.format(e))}return e*=t,e}get displayValue(){let e=this.focused?``:`-`;return this.indeterminate?e:this.formattedValue}clearNumberFormatterCache(){this._numberFormatter=void 0,this._numberParser=void 0}get numberFormatter(){if(!this._numberFormatter||!this._numberFormatterFocused){let{style:e,unit:t,unitDisplay:n,...r}=this.formatOptions;e!==`unit`&&(r.style=e),this._numberFormatterFocused=new m(this.languageResolver.language,r);try{this._numberFormatter=new m(this.languageResolver.language,this.formatOptions),this._forcedUnit=``,this._numberFormatter.format(1)}catch{e===`unit`&&(this._forcedUnit=t),this._numberFormatter=this._numberFormatterFocused}}return this.focused?this._numberFormatterFocused:this._numberFormatter}clearValueFormatterCache(){this._valueFormatter=void 0}get valueFormatter(){if(!this._valueFormatter){let e=this.step?this.step===Math.floor(this.step)?0:this.step.toString().split(`.`)[1].length:0;this._valueFormatter=new m(`en`,{useGrouping:!1,maximumFractionDigits:e})}return this._valueFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){let{style:e,unit:t,unitDisplay:n,...r}=this.formatOptions;e!==`unit`&&(r.style=e),this._numberParserFocused=new h(this.languageResolver.language,r);try{this._numberParser=new h(this.languageResolver.language,this.formatOptions),this._forcedUnit=``,this._numberParser.parse(`0`)}catch{e===`unit`&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete=`off`,e`
|
|
3
3
|
${super.renderField()}
|
|
4
4
|
${this.hideStepper?t:e`
|
|
5
5
|
<span
|
|
@@ -38,4 +38,4 @@ import"../tokens.js";import{c as e,i as t,y as n}from"./lit-DWANyjiY.js";import{
|
|
|
38
38
|
</luzmo-infield-button>
|
|
39
39
|
</span>
|
|
40
40
|
`}
|
|
41
|
-
`}update(e){if((e.has(`formatOptions`)||e.has(`resolvedLanguage`))&&this.clearNumberFormatterCache(),e.has(`value`)||e.has(`max`)||e.has(`min`)||e.has(`step`)){let e=this.numberParser.parse(this.formattedValue.replace(this._forcedUnit,``));this.value=e,this.clearValueFormatterCache()}super.update(e)}willUpdate(e){this.multiline=!1,e.has(l)&&this.clearNumberFormatterCache()}firstUpdated(e){super.firstUpdated(e),this.addEventListener(`keydown`,this.handleKeydown),this.addEventListener(`compositionstart`,this.handleCompositionStart),this.addEventListener(`compositionend`,this.handleCompositionEnd)}updated(e){if(this.inputElement&&this.isConnected){if(this.grows){let e=this.displayValue||this.placeholder||``;this.style.setProperty(`--number-field-char-count`,String(e.length))}if(e.has(`min`)||e.has(`formatOptions`)){let e=this.min!==void 0&&this.min>=0,{maximumFractionDigits:t}=this.numberFormatter.resolvedOptions(),n=t&&t>0,r=`numeric`;f()&&!e?r=`text`:(d()&&n||p()&&n&&e)&&(r=`decimal`),this.inputElement.inputMode=r}e.has(`focused`)&&this.focused&&!this.hasRecentlyReceivedPointerDown&&this.formatOptions.unit&&this.setSelectionRange(0,this.displayValue.length)}}};i([r(`.buttons`)],b.prototype,`buttons`,void 0),i([a({type:Boolean,reflect:!0})],b.prototype,`focused`,void 0),i([a({type:Object,attribute:`format-options`})],b.prototype,`formatOptions`,void 0),i([a({type:Boolean,reflect:!0,attribute:`hide-stepper`})],b.prototype,`hideStepper`,void 0),i([a({type:Boolean,reflect:!0,attribute:`grows`})],b.prototype,`grows`,void 0),i([a({type:Boolean,reflect:!0})],b.prototype,`indeterminate`,void 0),i([a({type:Boolean,reflect:!0,attribute:`keyboard-focused`})],b.prototype,`keyboardFocused`,void 0),i([a({type:Number})],b.prototype,`max`,void 0),i([a({type:Number})],b.prototype,`min`,void 0),i([a({type:Number})],b.prototype,`step`,void 0),i([a({type:Number,reflect:!0,attribute:`step-modifier`})],b.prototype,`stepModifier`,void 0),i([a({type:Number})],b.prototype,`value`,null),customElements.get(`luzmo-number-field`)||customElements.define(`luzmo-number-field`,b);export{b as t};
|
|
41
|
+
`}update(e){if((e.has(`formatOptions`)||e.has(`resolvedLanguage`))&&this.clearNumberFormatterCache(),e.has(`value`)||e.has(`max`)||e.has(`min`)||e.has(`step`)){let e=this.numberParser.parse(this.formattedValue.replace(this._forcedUnit,``));this.value=e,this.clearValueFormatterCache()}super.update(e)}willUpdate(e){this.multiline=!1,e.has(l)&&this.clearNumberFormatterCache()}disconnectedCallback(){this._stopChange(),super.disconnectedCallback()}firstUpdated(e){super.firstUpdated(e),this.addEventListener(`keydown`,this.handleKeydown),this.addEventListener(`compositionstart`,this.handleCompositionStart),this.addEventListener(`compositionend`,this.handleCompositionEnd)}updated(e){if(this.inputElement&&this.isConnected){if(this.grows){let e=this.displayValue||this.placeholder||``;this.style.setProperty(`--number-field-char-count`,String(e.length))}if(e.has(`min`)||e.has(`formatOptions`)){let e=this.min!==void 0&&this.min>=0,{maximumFractionDigits:t}=this.numberFormatter.resolvedOptions(),n=t&&t>0,r=`numeric`;f()&&!e?r=`text`:(d()&&n||p()&&n&&e)&&(r=`decimal`),this.inputElement.inputMode=r}e.has(`focused`)&&this.focused&&!this.hasRecentlyReceivedPointerDown&&this.formatOptions.unit&&this.setSelectionRange(0,this.displayValue.length)}}};i([r(`.buttons`)],b.prototype,`buttons`,void 0),i([a({type:Boolean,reflect:!0})],b.prototype,`focused`,void 0),i([a({type:Object,attribute:`format-options`})],b.prototype,`formatOptions`,void 0),i([a({type:Boolean,reflect:!0,attribute:`hide-stepper`})],b.prototype,`hideStepper`,void 0),i([a({type:Boolean,reflect:!0,attribute:`grows`})],b.prototype,`grows`,void 0),i([a({type:Boolean,reflect:!0})],b.prototype,`indeterminate`,void 0),i([a({type:Boolean,reflect:!0,attribute:`keyboard-focused`})],b.prototype,`keyboardFocused`,void 0),i([a({type:Number})],b.prototype,`max`,void 0),i([a({type:Number})],b.prototype,`min`,void 0),i([a({type:Number})],b.prototype,`step`,void 0),i([a({type:Number,reflect:!0,attribute:`step-modifier`})],b.prototype,`stepModifier`,void 0),i([a({type:Number})],b.prototype,`value`,null),customElements.get(`luzmo-number-field`)||customElements.define(`luzmo-number-field`,b);export{b as t};
|
|
@@ -3,6 +3,6 @@ import{i as e}from"./lit-DWANyjiY.js";import{t}from"./directive-Du_3lDov.js";imp
|
|
|
3
3
|
/* c8 ignore next 6 */
|
|
4
4
|
var r=[``,()=>{}],i=t(class extends n{constructor(...e){super(...e),this.start=r,this.streamInside=r,this.end=r,this.streamOutside=r,this.state=`off`,this.handleStart=e=>{this.clearStream(),this.callHandler(this.start[1],e),!e.defaultPrevented&&(this.removeListeners(),this.addListeners(`on`))},this.handleInside=e=>{this.handleStream(this.streamInside[1],e)},this.handleEnd=e=>{this.clearStream(),this.callHandler(this.end[1],e),this.removeListeners(),this.addListeners(`off`)},this.handleOutside=e=>{this.handleStream(this.streamOutside[1],e)}}
|
|
5
5
|
/* c8 ignore next 4 */
|
|
6
|
-
render(t){return e}update(e,[{start:t,end:n,streamInside:i=r,streamOutside:a=r}]){this.element!==e.element&&(this.element=e.element,this.removeListeners()),this.host=e.options?.host||this.element,this.start=t,this.end=n,this.streamInside=i,this.streamOutside=a,this.addListeners()}addListeners(e){this.state=e||this.state,this.state===`off`?(this.addListener(this.streamOutside[0],this.handleOutside),this.addListener(this.start[0],this.handleStart)):this.state===`on`&&(this.addListener(this.streamInside[0],this.handleInside),this.addListener(this.end[0],this.handleEnd))}callHandler(e,t){typeof e==`function`?e.call(this.host,t):e.handleEvent(t)}handleStream(e,t){this.stream||=(this.callHandler(e,t),requestAnimationFrame(()=>{this.stream=void 0}))}clearStream(){this.stream!=null&&(cancelAnimationFrame(this.stream),this.stream=void 0)}addListener(e,t){Array.isArray(e)?e.map(e=>{this.element.addEventListener(e,t)}):this.element.addEventListener(e,t)}removeListener(e,t){Array.isArray(e)?e.map(e=>{this.element.removeEventListener(e,t)}):this.element.removeEventListener(e,t)}removeListeners(){this.removeListener(this.start[0],this.handleStart),this.removeListener(this.streamInside[0],this.handleInside),this.removeListener(this.end[0],this.handleEnd),this.removeListener(this.streamOutside[0],this.handleOutside)}disconnected(){this.removeListeners()}
|
|
6
|
+
render(t){return e}update(e,[{start:t,end:n,streamInside:i=r,streamOutside:a=r}]){this.element!==e.element&&(this.element=e.element,this.removeListeners()),this.host=e.options?.host||this.element,this.start=t,this.end=n,this.streamInside=i,this.streamOutside=a,this.addListeners()}addListeners(e){this.state=e||this.state,this.state===`off`?(this.addListener(this.streamOutside[0],this.handleOutside),this.addListener(this.start[0],this.handleStart)):this.state===`on`&&(this.addListener(this.streamInside[0],this.handleInside),this.addListener(this.end[0],this.handleEnd))}callHandler(e,t){typeof e==`function`?e.call(this.host,t):e.handleEvent(t)}handleStream(e,t){this.stream||=(this.callHandler(e,t),requestAnimationFrame(()=>{this.stream=void 0}))}clearStream(){this.stream!=null&&(cancelAnimationFrame(this.stream),this.stream=void 0)}addListener(e,t){Array.isArray(e)?e.map(e=>{this.element.addEventListener(e,t)}):this.element.addEventListener(e,t)}removeListener(e,t){Array.isArray(e)?e.map(e=>{this.element.removeEventListener(e,t)}):this.element.removeEventListener(e,t)}removeListeners(){this.removeListener(this.start[0],this.handleStart),this.removeListener(this.streamInside[0],this.handleInside),this.removeListener(this.end[0],this.handleEnd),this.removeListener(this.streamOutside[0],this.handleOutside)}disconnected(){this.removeListeners(),this.clearStream(),this.state=`off`}
|
|
7
7
|
/* c8 ignore next 3 */
|
|
8
8
|
reconnected(){this.addListeners()}});export{i as t};
|
package/standalone/color-area.js
CHANGED
package/standalone/color-menu.js
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
*
|
|
18
18
|
*/
|
|
19
19
|
|
|
20
|
-
import"./tokens.js";import{c as e,y as t}from"./chunks/lit-DWANyjiY.js";import{c as n,g as r,l as i,u as a,v as o,y as s}from"./chunks/lucero-runtime-DMlHjBe_.js";import"./chunks/popover-Ca-FBqiU.js";import{n as c}from"./chunks/slottable-request-event-D9FhiqH1.js";import"./chunks/overlay-CgQMEmrM.js";import"./chunks/swatch-DivHeYOK.js";import"./chunks/color-menu-
|
|
20
|
+
import"./tokens.js";import{c as e,y as t}from"./chunks/lit-DWANyjiY.js";import{c as n,g as r,l as i,u as a,v as o,y as s}from"./chunks/lucero-runtime-DMlHjBe_.js";import"./chunks/popover-Ca-FBqiU.js";import{n as c}from"./chunks/slottable-request-event-D9FhiqH1.js";import"./chunks/overlay-CgQMEmrM.js";import"./chunks/swatch-DivHeYOK.js";import"./chunks/color-menu-DIX2y9m_.js";var l=`luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap,var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap,var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host([read-only]) luzmo-swatch{cursor:default;pointer-events:none}:host{--luzmo-popover-content-area-spacing-vertical:0;--color-picker-popover-horizontal-gap:var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap:var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap:var(--luzmo-spacing-5)}`,u=class extends n(a){constructor(...e){super(...e),this.color=`rgb(255, 0, 0)`,this.open=!1,this.disabled=!1,this.readOnly=!1,this.placement=`left-start`,this.rounding=`full`,this.swatches=[],this.noAlphaChannel=!1,this._renderMenu=!1}static{this.styles=t(l)}overlayCloseEvent(){this.endInteraction(),this.open=!1}endInteraction(){this.menuElement?.endInteraction()}overlayOpenEvent(){this.open=!0}handleColorChange(){let e=this.menuElement.color;this.color=typeof e==`string`?e:String(e),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}firstUpdated(){this.overlayElement.addEventListener(`slottable-request`,e=>{this._renderMenu=e.data!==c})}updated(e){e.has(`open`)&&this.open===!0&&(this._renderMenu=!0)}renderColorMenu(){return e`
|
|
21
21
|
<luzmo-color-menu
|
|
22
22
|
.size=${this.size}
|
|
23
23
|
.color=${this.color}
|
package/standalone/manifest.json
CHANGED
|
@@ -85,13 +85,13 @@
|
|
|
85
85
|
"chunks/class-map-E9JVium5.js",
|
|
86
86
|
"chunks/clear-button-B4r_oxfc.js",
|
|
87
87
|
"chunks/close-button-DVCeu3_f.js",
|
|
88
|
-
"chunks/color-area-
|
|
88
|
+
"chunks/color-area-D-AVcZza.js",
|
|
89
89
|
"chunks/color-controller-BlFueK6Y.js",
|
|
90
90
|
"chunks/color-field-BaVvupq0.js",
|
|
91
|
-
"chunks/color-handle-
|
|
91
|
+
"chunks/color-handle-DO7dxFGx.js",
|
|
92
92
|
"chunks/color-loupe-_dC69K1Z.js",
|
|
93
|
-
"chunks/color-menu-
|
|
94
|
-
"chunks/color-slider-
|
|
93
|
+
"chunks/color-menu-DIX2y9m_.js",
|
|
94
|
+
"chunks/color-slider-MSADvkPC.js",
|
|
95
95
|
"chunks/condition-attribute-with-id-Dv8Yd-N1.js",
|
|
96
96
|
"chunks/dependency-manger-BPrqqTnJ.js",
|
|
97
97
|
"chunks/directive-Du_3lDov.js",
|
|
@@ -107,6 +107,7 @@
|
|
|
107
107
|
"chunks/get-label-from-slot-Dfoiptqo.js",
|
|
108
108
|
"chunks/icon-6P1RsbD1.js",
|
|
109
109
|
"chunks/infield-button-B8EkjwP9.js",
|
|
110
|
+
"chunks/interaction-BQyflxg-.js",
|
|
110
111
|
"chunks/keyed-DYJaQjip.js",
|
|
111
112
|
"chunks/language-resolution-BwIkGyuH.js",
|
|
112
113
|
"chunks/lit-DWANyjiY.js",
|
|
@@ -115,7 +116,7 @@
|
|
|
115
116
|
"chunks/manage-help-text-DO3PkWgh.js",
|
|
116
117
|
"chunks/match-media-BMi7j6hf.js",
|
|
117
118
|
"chunks/menu-CefrRBIS.js",
|
|
118
|
-
"chunks/number-field-
|
|
119
|
+
"chunks/number-field-BoIKbmIv.js",
|
|
119
120
|
"chunks/observe-slot-presence-BxmG6A0m.js",
|
|
120
121
|
"chunks/options-rb_zaAJ6.js",
|
|
121
122
|
"chunks/overlay-CgQMEmrM.js",
|
|
@@ -136,7 +137,7 @@
|
|
|
136
137
|
"chunks/skeleton-loader-CymPdQl3.js",
|
|
137
138
|
"chunks/slottable-request-event-D9FhiqH1.js",
|
|
138
139
|
"chunks/strategies-yujlVHBS.js",
|
|
139
|
-
"chunks/streaming-listener-
|
|
140
|
+
"chunks/streaming-listener-0FSzb9QY.js",
|
|
140
141
|
"chunks/style-map-DmBaq1-c.js",
|
|
141
142
|
"chunks/swatch-DivHeYOK.js",
|
|
142
143
|
"chunks/template-property-CyrkVY0Q.js",
|