@luzmo/analytics-components-kit 1.0.1-alpha.3 → 1.0.1-alpha.4

package/lib/index-D5puKlcm.cjs

@@ -0,0 +1,96 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const e=require("./if-defined-V7yEJWI3.cjs"),_=require("./decompose-numeric-format-B3rVVHpO.cjs"),P=require("./directive-helpers-BSB0tfc9.cjs"),p=require("./index-Bo1DpZ-1.cjs");require("./index-CvX-HLY1.cjs");require("./index-CfEm5P0J.cjs");require("./index-Dj7PF4Q9.cjs");var E=Object.defineProperty,m=(a,o,t,l)=>{for(var r=void 0,i=a.length-1,c;i>=0;i--)(c=a[i])&&(r=c(o,t,r)||r);return r&&E(o,t,r),r};function C(a){class o extends a{constructor(){super(...arguments),this.checked=!1,this.readonly=!1}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;const l=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:this.checked});this.dispatchEvent(l)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return e.x`
+        <input
+          id="input"
+          name=${e.o(this.name||void 0)}
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.readonly}
+          @change=${this.handleChange}
+        />
+      `}}return m([e.n({type:Boolean,reflect:!0})],o.prototype,"checked"),m([e.n({type:String,reflect:!0})],o.prototype,"name"),m([e.n({type:Boolean,reflect:!0})],o.prototype,"readonly"),m([e.e("#input")],o.prototype,"inputElement"),o}const w=':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-color-negative)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-color-negative)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-color-negative)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-color-negative)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-color-disabled)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-color-disabled)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';var $=Object.defineProperty,h=(a,o,t,l)=>{for(var r=void 0,i=a.length-1,c;i>=0;i--)(c=a[i])&&(r=c(o,t,r)||r);return r&&$(o,t,r),r};const L=()=>e.x`<div id="checkmark">${p.O2(p.F)}</div>`,O=()=>e.x`<div id="partialCheckmark">${p.O2(p.$)}</div>`,x=class x extends e.SizedMixin(C(e.LuzmoElement),{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.autofocus=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[e.r(w)]}click(){var o;this.disabled||(o=this.inputElement)==null||o.click()}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return e.x`
+      ${super.render()}
+      <span id="box">
+        ${this.checked?L():e.x``}
+        ${this.indeterminate?O():e.x``}
+      </span>
+      <label id="label" for="input"><slot></slot></label>
+    `}updated(o){super.updated(o),o.has("disabled")&&(o.get("disabled")!==void 0||this.disabled)&&(this.disabled?(this.inputElement.tabIndex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.inputElement.tabIndex,this.inputElement.removeAttribute("tabindex")),this.inputElement.disabled=this.disabled),o.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate),o.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid"))}};x.shadowRootOptions={...e.LuzmoElement.shadowRootOptions,delegatesFocus:!0};let n=x;h([e.n({type:Boolean,reflect:!0})],n.prototype,"disabled");h([e.n({type:Boolean,reflect:!0})],n.prototype,"indeterminate");h([e.n({type:Boolean,reflect:!0})],n.prototype,"autofocus");h([e.n({type:Boolean,reflect:!0})],n.prototype,"invalid");h([e.n({type:Boolean,reflect:!0})],n.prototype,"emphasized");h([e.n({reflect:!0,type:Number,attribute:"tabindex"})],n.prototype,"tabIndex");customElements.get("luzmo-checkbox")||customElements.define("luzmo-checkbox",n);const y={none:"None",past:"Past value",absoluteChange:"Absolute change",percentageChange:"% change"},I=["periods","years","quarters","months","weeks","days","hours","minutes","seconds"],j=":host{font-family:var(--luzmo-display-settings-period-over-period-font-family, var(--luzmo-font-family));font-size:var(--luzmo-display-settings-period-over-period-font-size, var(--luzmo-font-size));color:var(--luzmo-display-settings-period-over-period-color, var(--luzmo-font-color))}:host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-period-over-period-gap, var(--display-settings-period-over-period-gap))}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3)}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3)}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4)}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5)}";var S=Object.defineProperty,d=(a,o,t,l)=>{for(var r=void 0,i=a.length-1,c;i>=0;i--)(c=a[i])&&(r=c(o,t,r)||r);return r&&S(o,t,r),r};class s extends e.SizedMixin(e.LuzmoElement,{validSizes:Object.values(e.ElementSizes)}){constructor(){super(...arguments),this.slotContent={}}static get styles(){return[e.r(j)]}willUpdate(o){var t,l,r,i,c,u,b,v,z,k,f,g;o.has("slotContent")&&(this._periodComparison=(l=(t=this.slotContent)==null?void 0:t.PeriodOverPeriod)==null?void 0:l.type,this._numberPeriods=(i=(r=this.slotContent)==null?void 0:r.PeriodOverPeriod)==null?void 0:i.quantity,this._periodLevel=(u=(c=this.slotContent)==null?void 0:c.PeriodOverPeriod)==null?void 0:u.level,this._incompletePeriods=(v=(b=this.slotContent)==null?void 0:b.PeriodOverPeriod)==null?void 0:v.periodToDate,this._minLevel=((k=(z=this.slotContent)==null?void 0:z.PeriodOverPeriod)==null?void 0:k.minLevel)??((f=this.slotContent)==null?void 0:f.lowestLevel)??(((g=this.slotContent)==null?void 0:g.subtype)==="date"?5:9)),this._periodComparison=this._periodComparison??"none",this._numberPeriods=this._numberPeriods??1,this._periodLevel=this._periodLevel??"periods",this._incompletePeriods=this._incompletePeriods??!1,this._minLevel=this._minLevel??9}setPeriodComparison(){var v;const o={...this.slotContent};this._periodComparison=this._periodComparisonElement.value;const t=_.decomposeNumericFormat((v=this.slotContent)==null?void 0:v.format),l=["%","y","a%","ay"].includes(t.typeFormat),r=t.typeFormat.includes("a"),i=r?"a":"",c=t.comma===","||r?",":"",u=t.precision?Number.parseInt(t.precision.replace(".",""),10):0,b=["z","az","y","ay","w","aw"].includes(t.typeFormat);this._periodComparison==="percentageChange"&&!l?o.format=`${c}.${u}${i}${b?"y":"%"}`:this._periodComparison!=="percentageChange"&&o.subtype==="currency"&&l&&(o.format=`${c}.${u}${i}${b?"z":"f"}`),this.sendEvent(o)}setNumberOfPeriods(){this._numberPeriods=Number.parseInt(this._numberPeriodsElement.value,10);const o={...this.slotContent};this.sendEvent(o)}setPeriodLevel(){this._periodLevel=this._periodLevelElement.value;const o={...this.slotContent};this.sendEvent(o)}setIncompletePeriods(){this._incompletePeriods=this._incompletePeriodsElement.checked;const o={...this.slotContent};this.sendEvent(o)}sendEvent(o){const t={...o};t.PeriodOverPeriod={type:this._periodComparison,level:this._periodLevel,quantity:this._numberPeriods,periodToDate:this._incompletePeriods,minLevel:this._minLevel},this._periodComparison==="none"&&delete t.PeriodOverPeriod,this.dispatchEvent(new CustomEvent("slot-content-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:t}}))}renderPeriodSettings(){const o=I.slice(0,(this._minLevel??0)+1).map(t=>e.x`<luzmo-menu-item value=${t}>
+          ${t}
+        </luzmo-menu-item>`);return e.x` <div class="settings-row">
+        <div class="setting">
+          ${["percentageChange","absoluteChange"].includes(this._periodComparison??"")?e.x`<luzmo-field-label for="number-periods" side-aligned="start">
+                From
+              </luzmo-field-label>`:""}
+          <luzmo-number-field
+            id="number-periods"
+            min="1"
+            max="9999999999"
+            value=${this._numberPeriods??1}
+            @change=${this.setNumberOfPeriods}
+          ></luzmo-number-field>
+        </div>
+        <div class="setting">
+          <luzmo-picker
+            id="period-level"
+            size=${this.size}
+            variant="highlight"
+            value=${this._periodLevel??"period(s)"}
+            @change=${this.setPeriodLevel}
+          >
+            ${o}
+          </luzmo-picker>
+        </div>
+        <div>ago</div>
+      </div>
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-checkbox
+            id="incomplete-periods"
+            size=${this.size}
+            emphasized
+            ?checked=${this._incompletePeriods??!1}
+            @change=${this.setIncompletePeriods}
+          >
+            Use period-to-date for incomplete periods
+          </luzmo-checkbox>
+        </div>
+      </div>`}render(){const o=Object.keys(y).map(t=>e.x`<luzmo-menu-item value=${t}>
+          ${y[t]}
+        </luzmo-menu-item>`);return e.x`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-field-label for="period-comparison">
+            Period comparison
+          </luzmo-field-label>
+          <luzmo-picker
+            id="period-comparison"
+            size=${this.size}
+            variant="highlight"
+            value=${this._periodComparison??"none"}
+            @change=${this.setPeriodComparison}
+          >
+            ${o}
+          </luzmo-picker>
+        </div>
+      </div>
+      ${this._periodComparison==="none"?"":this.renderPeriodSettings()}
+    </div>`}}d([e.n({type:String,reflect:!0})],s.prototype,"language");d([e.e("#period-comparison")],s.prototype,"_periodComparisonElement");d([e.e("#number-periods")],s.prototype,"_numberPeriodsElement");d([e.e("#period-level")],s.prototype,"_periodLevelElement");d([e.e("#incomplete-periods")],s.prototype,"_incompletePeriodsElement");d([P.r()],s.prototype,"_periodComparison");customElements.get("luzmo-display-settings-period-over-period")||customElements.define("luzmo-display-settings-period-over-period",s);const T=Object.freeze(Object.defineProperty({__proto__:null,LuzmoDisplaySettingsPeriodOverPeriod:s},Symbol.toStringTag,{value:"Module"}));exports.CheckboxMixin=C;exports.LuzmoCheckbox=n;exports.LuzmoDisplaySettingsPeriodOverPeriod=s;exports.index=T;

package/lib/index-DGz6jCKo.cjs

@@ -0,0 +1,26 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const b=require("./index-Bo1DpZ-1.cjs"),n=require("./if-defined-V7yEJWI3.cjs"),s=require("./button-base-B4PdJFVe.cjs"),v=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-sans-font-family-stack, var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height-100, var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out;border-style:solid;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%;flex-shrink:0}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors: active){:host{--highcontrast-action-button-focus-indicator-color: ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default: Highlight;--highcontrast-action-button-background-color-hover: Highlight;--highcontrast-action-button-background-color-focus: Highlight;--highcontrast-action-button-background-color-down: Highlight;--highcontrast-action-button-background-color-disabled: ButtonFace;--highcontrast-action-button-border-color-default: HighlightText;--highcontrast-action-button-border-color-hover: HighlightText;--highcontrast-action-button-border-color-focus: HighlightText;--highcontrast-action-button-border-color-down: HighlightText;--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-default: HighlightText;--highcontrast-action-button-content-color-hover: HighlightText;--highcontrast-action-button-content-color-focus: HighlightText;--highcontrast-action-button-content-color-down: HighlightText;--highcontrast-action-button-content-color-disabled: GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius: calc( var(--action-button-border-radius) + var(--action-button-focus-indicator-gap) );--action-button-edge-to-visual: calc( var(--action-button-edge-to-visual-size) - var(--action-button-border-width) );--action-button-edge-to-text: calc( var(--action-button-edge-to-text-size) - var(--action-button-border-width) );--action-button-edge-to-visual-only: calc( var(--action-button-edge-to-visual-only-size) - var( --action-button-border-width ) );min-inline-size:var(--luzmo-action-button-min-width, var(--action-button-min-width));block-size:var(--luzmo-action-button-height, var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius, var(--action-button-border-radius));border-width:var(--luzmo-action-button-border-width, var(--action-button-border-width));gap:calc(var(--luzmo-action-button-text-to-visual, var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default, var(--luzmo-action-button-background-color-default, var(--action-button-background-color-default)));border-color:var(--highcontrast-action-button-border-color-default, var(--luzmo-action-button-border-color-default, var(--action-button-border-color-default)));color:var(--highcontrast-action-button-content-color-default, var(--luzmo-action-button-content-color-default, var(--action-button-content-color-default)));position:relative}:host:dir(rtl),:host([dir=rtl]){--logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover, var(--luzmo-action-button-background-color-hover, var(--action-button-background-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover, var(--luzmo-action-button-border-color-hover, var(--action-button-border-color-hover)));color:var(--highcontrast-action-button-content-color-hover, var(--luzmo-action-button-content-color-hover, var(--action-button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus, var(--luzmo-action-button-background-color-focus, var(--action-button-background-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus, var(--luzmo-action-button-border-color-focus, var(--action-button-border-color-focus)));color:var(--highcontrast-action-button-content-color-focus, var(--luzmo-action-button-content-color-focus, var(--action-button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down, var(--luzmo-action-button-background-color-down, var(--action-button-background-color-down)));border-color:var(--highcontrast-action-button-border-color-down, var(--luzmo-action-button-border-color-down, var(--action-button-border-color-down)));color:var(--highcontrast-action-button-content-color-down, var(--luzmo-action-button-content-color-down, var(--action-button-content-color-down)))}:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled, var(--luzmo-action-button-background-color-disabled, var(--action-button-background-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled, var(--luzmo-action-button-border-color-disabled, var(--action-button-border-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled, var(--luzmo-action-button-content-color-disabled, var(--action-button-content-color-disabled)))}:host([selected]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected )}:host([selected][emphasized]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected-emphasized );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected-emphasized );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected-emphasized );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected-emphasized );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected-emphasized );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected-emphasized );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected-emphasized );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected-emphasized )}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-down: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-static-content-color )}::slotted([slot=icon]){inline-size:var(--luzmo-action-button-icon-size, var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size, var(--action-button-font-size));white-space:nowrap;color:inherit;color:var(--luzmo-action-button-label-color, inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);position:absolute;font-size:var(--action-button-corner-triangle-size);inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap, var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width, var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius, var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-thickness, var(--action-button-focus-indicator-thickness)) var(--highcontrast-action-button-focus-indicator-color, var(--luzmo-action-button-focus-indicator-color, var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration: var(--luzmo-animation-duration);--action-button-border-radius: var(--luzmo-border-radius);--action-button-border-width: var(--luzmo-border-width);--action-button-content-color-default: var(--luzmo-font-color);--action-button-content-color-hover: var(--luzmo-font-color-hover);--action-button-content-color-down: var(--luzmo-font-color-down);--action-button-content-color-focus: var(--luzmo-font-color-focus);--action-button-focus-indicator-gap: var(--luzmo-indicator-gap);--action-button-focus-indicator-thickness: var(--luzmo-indicator-width);--action-button-focus-indicator-color: var(--luzmo-indicator-color);--action-button-background-color-default: var(--luzmo-background-color);--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-border-color-default: var(--luzmo-border-color);--action-button-border-color-hover: var(--luzmo-border-color-hover);--action-button-border-color-down: var(--luzmo-border-color-down);--action-button-border-color-focus: var(--luzmo-border-color-focus);--action-button-background-color-disabled: var(--luzmo-background-color);--action-button-border-color-disabled: var(--luzmo-border-color-disabled);--action-button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--action-button-background-color-default: transparent;--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-background-color-disabled: transparent;--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([selected]){--action-button-background-color-default: var(--luzmo-font-color);--action-button-background-color-hover: var(--luzmo-font-color-hover);--action-button-background-color-down: var(--luzmo-font-color-down);--action-button-background-color-focus: var(--luzmo-font-color-focus);--action-button-content-color-default: var(--luzmo-background-color);--action-button-content-color-hover: var(--luzmo-background-color);--action-button-content-color-down: var(--luzmo-background-color);--action-button-content-color-focus: var(--luzmo-background-color);--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent;--action-button-background-color-disabled: var( --luzmo-background-color-disabled )}:host([selected][emphasized]){--action-button-background-color-default: var(--luzmo-primary);--action-button-background-color-hover: var(--luzmo-primary-hover);--action-button-background-color-down: var(--luzmo-primary-down);--action-button-background-color-focus: var(--luzmo-primary-focus);--action-button-content-color-default: var(--luzmo-primary-inverse-color);--action-button-content-color-hover: var(--luzmo-primary-inverse-color);--action-button-content-color-down: var(--luzmo-primary-inverse-color);--action-button-content-color-focus: var(--luzmo-primary-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([static-color=black]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(0, 0, 0, .25);--action-button-background-color-down: rgba(0, 0, 0, .4);--action-button-background-color-focus: rgba(0, 0, 0, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(0, 0, 0, .4);--action-button-border-color-hover: rgba(0, 0, 0, .55);--action-button-border-color-down: rgba(0, 0, 0, .7);--action-button-border-color-focus: rgba(0, 0, 0, .25);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0);--action-button-content-color-disabled: rgba(0, 0, 0, .55);--action-button-focus-indicator-color: rgb(0, 0, 0)}:host([static-color=black][selected]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-background-color-disabled: rgba(0, 0, 0, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=black][selected][emphasized]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=white]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(255, 255, 255, .25);--action-button-background-color-down: rgba(255, 255, 255, .4);--action-button-background-color-focus: rgba(255, 255, 255, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(255, 255, 255, .4);--action-button-border-color-hover: rgba(255, 255, 255, .55);--action-button-border-color-down: rgba(255, 255, 255, .7);--action-button-border-color-focus: rgba(255, 255, 255, .55);--action-button-border-color-disabled: rgba(255, 255, 255, .25);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255);--action-button-content-color-disabled: rgba(255, 255, 255, .55);--action-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=white][selected]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-background-color-disabled: rgba(255, 255, 255, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0)}:host([static-color=white][selected][emphasized]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-content-color-default: rgb(0, 0, 0)}:host{--action-button-min-width: var(--luzmo-component-height);--action-button-height: var(--luzmo-component-height);--action-button-icon-size: var(--luzmo-font-size-l);--action-button-font-size: var(--luzmo-font-size);--action-button-text-to-visual: var(--luzmo-spacing-2);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-3);--action-button-edge-to-text-size: 12px;--action-button-corner-triangle-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xs]){--action-button-min-width: var(--luzmo-component-height-xs);--action-button-height: var(--luzmo-component-height-xs);--action-button-icon-size: var(--luzmo-font-size-s);--action-button-font-size: var(--luzmo-font-size-xs);--action-button-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-2);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width: var(--luzmo-component-height-s);--action-button-height: var(--luzmo-component-height-s);--action-button-icon-size: var(--luzmo-font-size);--action-button-font-size: var(--luzmo-font-size-s);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-3);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width: var(--luzmo-component-height-l);--action-button-height: var(--luzmo-component-height-l);--action-button-icon-size: var(--luzmo-font-size-xl);--action-button-font-size: var(--luzmo-font-size-l);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width: var(--luzmo-component-height-xl);--action-button-height: var(--luzmo-component-height-xl);--action-button-icon-size: var(--luzmo-font-size-xxl);--action-button-font-size: var(--luzmo-font-size-xl);--action-button-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-size: var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-4);--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height, 0);--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=s]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=m]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width) )}:host([size=l]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-3) - var(--action-button-border-width) )}:host([size=xl]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-4) - var(--action-button-border-width) )}@media (forced-colors: active){:host{--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-disabled: GrayText}}';var h=Object.defineProperty,g=Object.getOwnPropertyDescriptor,c=(i,o,t,a)=>{for(var e=a>1?void 0:a?g(o,t):o,u=i.length-1,l;u>=0;u--)(l=i[u])&&(e=(a?l(o,t,e):l(e))||e);return a&&e&&h(o,t,e),e};const m=300;let d;class r extends n.SizedMixin(s.ButtonBase,{validSizes:["xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.emphasized=!1,this.holdAffordance=!1,this.quiet=!1,this.role="button",this.selected=!1,this.toggles=!1,this._value="",this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected)},this.addEventListener("click",this.onClick)}static get styles(){return[...super.styles,n.r(v)]}get value(){return this._value||this.itemText}set value(o){o!==this._value&&(this._value=o||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}handlePointerdownHoldAffordance(o){o.button===0&&(this.addEventListener("pointerup",this.handlePointerupHoldAffordance),this.addEventListener("pointercancel",this.handlePointerupHoldAffordance),d=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},m))}handlePointerupHoldAffordance(){clearTimeout(d),this.removeEventListener("pointerup",this.handlePointerupHoldAffordance),this.removeEventListener("pointercancel",this.handlePointerupHoldAffordance)}handleKeydown(o){if(!this.holdAffordance)return super.handleKeydown(o);const{code:t,altKey:a}=o;(t==="Space"||a&&t==="ArrowDown")&&(o.preventDefault(),t==="ArrowDown"&&(o.stopPropagation(),o.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(o){if(!this.holdAffordance)return super.handleKeyup(o);const{code:t,altKey:a}=o;(t==="Space"||a&&t==="ArrowDown")&&(o.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const o=super.buttonContent;return this.holdAffordance&&o.unshift(n.x`
+        <div
+          class="hold-affordance corner-triangle-${this.size}"
+        >
+          ${b.O2(b.d1)}
+        </div>
+      `),o}updated(o){super.updated(o);const t=this.role==="button",a=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(o.has("selected")||o.has("role"))&&(a?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false"))),o.has("holdAffordance")&&(this.holdAffordance?this.addEventListener("pointerdown",this.handlePointerdownHoldAffordance):(this.removeEventListener("pointerdown",this.handlePointerdownHoldAffordance),this.handlePointerupHoldAffordance()))}}c([n.n({type:Boolean,reflect:!0})],r.prototype,"emphasized",2);c([n.n({type:Boolean,reflect:!0,attribute:"hold-affordance"})],r.prototype,"holdAffordance",2);c([n.n({type:Boolean,reflect:!0})],r.prototype,"quiet",2);c([n.n({reflect:!0})],r.prototype,"role",2);c([n.n({type:Boolean,reflect:!0})],r.prototype,"selected",2);c([n.n({type:Boolean,reflect:!0})],r.prototype,"toggles",2);c([n.n({reflect:!0,attribute:"static-color"})],r.prototype,"staticColor",2);c([n.n({type:String})],r.prototype,"value",1);customElements.get("luzmo-action-button")||customElements.define("luzmo-action-button",r);exports.LuzmoActionButton=r;

package/lib/index-DJp_9h0l.js

@@ -0,0 +1,327 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n, e as p, o as $, x as a, S as P, L as z, r as w, a as L } from "./if-defined-BbzmSG-O.js";
+import { d as O } from "./decompose-numeric-format-BuZcjH2k.js";
+import { r as j } from "./directive-helpers-eY1rHtyn.js";
+import { O as E, j as I, $ as S } from "./index-DdtjeKYI.js";
+import "./index-CtEJZdT0.js";
+import "./index-D37RwuEH.js";
+import "./index-CBCm4_7S.js";
+var T = Object.defineProperty, x = (c, o, e, l) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && T(o, e, t), t;
+};
+function B(c) {
+  class o extends c {
+    constructor() {
+      super(...arguments), this.checked = !1, this.readonly = !1;
+    }
+    handleChange() {
+      if (this.readonly) {
+        this.inputElement.checked = this.checked;
+        return;
+      }
+      this.checked = this.inputElement.checked;
+      const l = new CustomEvent("change", {
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0,
+        detail: this.checked
+      });
+      this.dispatchEvent(l) || (this.checked = !this.inputElement.checked, this.inputElement.checked = this.checked);
+    }
+    render() {
+      return a`
+        <input
+          id="input"
+          name=${$(this.name || void 0)}
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.readonly}
+          @change=${this.handleChange}
+        />
+      `;
+    }
+  }
+  return x([
+    n({ type: Boolean, reflect: !0 })
+  ], o.prototype, "checked"), x([
+    n({ type: String, reflect: !0 })
+  ], o.prototype, "name"), x([
+    n({ type: Boolean, reflect: !0 })
+  ], o.prototype, "readonly"), x([
+    p("#input")
+  ], o.prototype, "inputElement"), o;
+}
+const D = ':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-color-negative)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-color-negative)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-color-negative)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-color-negative)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-color-negative)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-color-disabled)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-color-disabled)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';
+var F = Object.defineProperty, d = (c, o, e, l) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && F(o, e, t), t;
+};
+const A = () => a`<div id="checkmark">${E(I)}</div>`, N = () => a`<div id="partialCheckmark">${E(S)}</div>`, k = class k extends P(B(z), {
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.indeterminate = !1, this.autofocus = !1, this.invalid = !1, this.emphasized = !1, this.tabIndex = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("autofocus") && this.updateComplete.then(() => {
+      this.focus();
+    });
+  }
+  static get styles() {
+    return [w(D)];
+  }
+  click() {
+    var o;
+    this.disabled || (o = this.inputElement) == null || o.click();
+  }
+  handleChange() {
+    this.indeterminate = !1, super.handleChange();
+  }
+  render() {
+    return a`
+      ${super.render()}
+      <span id="box">
+        ${this.checked ? A() : a``}
+        ${this.indeterminate ? N() : a``}
+      </span>
+      <label id="label" for="input"><slot></slot></label>
+    `;
+  }
+  updated(o) {
+    super.updated(o), o.has("disabled") && (o.get("disabled") !== void 0 || this.disabled) && (this.disabled ? (this.inputElement.tabIndex = this.tabIndex, this.tabIndex = -1) : (this.tabIndex = this.inputElement.tabIndex, this.inputElement.removeAttribute("tabindex")), this.inputElement.disabled = this.disabled), o.has("indeterminate") && (this.inputElement.indeterminate = this.indeterminate), o.has("invalid") && (this.invalid ? this.inputElement.setAttribute("aria-invalid", "true") : this.inputElement.removeAttribute("aria-invalid"));
+  }
+};
+k.shadowRootOptions = {
+  ...z.shadowRootOptions,
+  delegatesFocus: !0
+};
+let s = k;
+d([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+d([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "indeterminate");
+d([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "autofocus");
+d([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "invalid");
+d([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "emphasized");
+d([
+  n({ reflect: !0, type: Number, attribute: "tabindex" })
+], s.prototype, "tabIndex");
+customElements.get("luzmo-checkbox") || customElements.define("luzmo-checkbox", s);
+const _ = {
+  none: "None",
+  past: "Past value",
+  absoluteChange: "Absolute change",
+  percentageChange: "% change"
+}, H = [
+  "periods",
+  "years",
+  "quarters",
+  "months",
+  "weeks",
+  "days",
+  "hours",
+  "minutes",
+  "seconds"
+], R = ":host{font-family:var(--luzmo-display-settings-period-over-period-font-family, var(--luzmo-font-family));font-size:var(--luzmo-display-settings-period-over-period-font-size, var(--luzmo-font-size));color:var(--luzmo-display-settings-period-over-period-color, var(--luzmo-font-color))}:host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-period-over-period-gap, var(--display-settings-period-over-period-gap))}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3)}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3)}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4)}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5)}";
+var M = Object.defineProperty, u = (c, o, e, l) => {
+  for (var t = void 0, r = c.length - 1, i; r >= 0; r--)
+    (i = c[r]) && (t = i(o, e, t) || t);
+  return t && M(o, e, t), t;
+};
+class h extends P(
+  z,
+  {
+    validSizes: Object.values(L)
+  }
+) {
+  constructor() {
+    super(...arguments), this.slotContent = {};
+  }
+  static get styles() {
+    return [w(R)];
+  }
+  willUpdate(o) {
+    var e, l, t, r, i, b, v, m, f, g, y, C;
+    o.has("slotContent") && (this._periodComparison = (l = (e = this.slotContent) == null ? void 0 : e.PeriodOverPeriod) == null ? void 0 : l.type, this._numberPeriods = (r = (t = this.slotContent) == null ? void 0 : t.PeriodOverPeriod) == null ? void 0 : r.quantity, this._periodLevel = (b = (i = this.slotContent) == null ? void 0 : i.PeriodOverPeriod) == null ? void 0 : b.level, this._incompletePeriods = (m = (v = this.slotContent) == null ? void 0 : v.PeriodOverPeriod) == null ? void 0 : m.periodToDate, this._minLevel = ((g = (f = this.slotContent) == null ? void 0 : f.PeriodOverPeriod) == null ? void 0 : g.minLevel) ?? ((y = this.slotContent) == null ? void 0 : y.lowestLevel) ?? (((C = this.slotContent) == null ? void 0 : C.subtype) === "date" ? 5 : 9)), this._periodComparison = this._periodComparison ?? "none", this._numberPeriods = this._numberPeriods ?? 1, this._periodLevel = this._periodLevel ?? "periods", this._incompletePeriods = this._incompletePeriods ?? !1, this._minLevel = this._minLevel ?? 9;
+  }
+  setPeriodComparison() {
+    var m;
+    const o = { ...this.slotContent };
+    this._periodComparison = this._periodComparisonElement.value;
+    const e = O((m = this.slotContent) == null ? void 0 : m.format), l = ["%", "y", "a%", "ay"].includes(
+      e.typeFormat
+    ), t = e.typeFormat.includes("a"), r = t ? "a" : "", i = e.comma === "," || t ? "," : "", b = e.precision ? Number.parseInt(e.precision.replace(".", ""), 10) : 0, v = ["z", "az", "y", "ay", "w", "aw"].includes(
+      e.typeFormat
+    );
+    this._periodComparison === "percentageChange" && !l ? o.format = `${i}.${b}${r}${v ? "y" : "%"}` : this._periodComparison !== "percentageChange" && o.subtype === "currency" && l && (o.format = `${i}.${b}${r}${v ? "z" : "f"}`), this.sendEvent(o);
+  }
+  setNumberOfPeriods() {
+    this._numberPeriods = Number.parseInt(this._numberPeriodsElement.value, 10);
+    const o = { ...this.slotContent };
+    this.sendEvent(o);
+  }
+  setPeriodLevel() {
+    this._periodLevel = this._periodLevelElement.value;
+    const o = { ...this.slotContent };
+    this.sendEvent(o);
+  }
+  setIncompletePeriods() {
+    this._incompletePeriods = this._incompletePeriodsElement.checked;
+    const o = { ...this.slotContent };
+    this.sendEvent(o);
+  }
+  sendEvent(o) {
+    const e = { ...o };
+    e.PeriodOverPeriod = {
+      type: this._periodComparison,
+      level: this._periodLevel,
+      quantity: this._numberPeriods,
+      periodToDate: this._incompletePeriods,
+      minLevel: this._minLevel
+    }, this._periodComparison === "none" && delete e.PeriodOverPeriod, this.dispatchEvent(
+      new CustomEvent("slot-content-changed", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          slotContent: e
+        }
+      })
+    );
+  }
+  renderPeriodSettings() {
+    const o = H.slice(0, (this._minLevel ?? 0) + 1).map(
+      (e) => a`<luzmo-menu-item value=${e}>
+          ${e}
+        </luzmo-menu-item>`
+    );
+    return a` <div class="settings-row">
+        <div class="setting">
+          ${["percentageChange", "absoluteChange"].includes(
+      this._periodComparison ?? ""
+    ) ? a`<luzmo-field-label for="number-periods" side-aligned="start">
+                From
+              </luzmo-field-label>` : ""}
+          <luzmo-number-field
+            id="number-periods"
+            min="1"
+            max="9999999999"
+            value=${this._numberPeriods ?? 1}
+            @change=${this.setNumberOfPeriods}
+          ></luzmo-number-field>
+        </div>
+        <div class="setting">
+          <luzmo-picker
+            id="period-level"
+            size=${this.size}
+            variant="highlight"
+            value=${this._periodLevel ?? "period(s)"}
+            @change=${this.setPeriodLevel}
+          >
+            ${o}
+          </luzmo-picker>
+        </div>
+        <div>ago</div>
+      </div>
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-checkbox
+            id="incomplete-periods"
+            size=${this.size}
+            emphasized
+            ?checked=${this._incompletePeriods ?? !1}
+            @change=${this.setIncompletePeriods}
+          >
+            Use period-to-date for incomplete periods
+          </luzmo-checkbox>
+        </div>
+      </div>`;
+  }
+  render() {
+    const o = Object.keys(_).map(
+      (e) => a`<luzmo-menu-item value=${e}>
+          ${_[e]}
+        </luzmo-menu-item>`
+    );
+    return a`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-field-label for="period-comparison">
+            Period comparison
+          </luzmo-field-label>
+          <luzmo-picker
+            id="period-comparison"
+            size=${this.size}
+            variant="highlight"
+            value=${this._periodComparison ?? "none"}
+            @change=${this.setPeriodComparison}
+          >
+            ${o}
+          </luzmo-picker>
+        </div>
+      </div>
+      ${this._periodComparison === "none" ? "" : this.renderPeriodSettings()}
+    </div>`;
+  }
+}
+u([
+  n({ type: String, reflect: !0 })
+], h.prototype, "language");
+u([
+  p("#period-comparison")
+], h.prototype, "_periodComparisonElement");
+u([
+  p("#number-periods")
+], h.prototype, "_numberPeriodsElement");
+u([
+  p("#period-level")
+], h.prototype, "_periodLevelElement");
+u([
+  p("#incomplete-periods")
+], h.prototype, "_incompletePeriodsElement");
+u([
+  j()
+], h.prototype, "_periodComparison");
+customElements.get("luzmo-display-settings-period-over-period") || customElements.define(
+  "luzmo-display-settings-period-over-period",
+  h
+);
+const W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LuzmoDisplaySettingsPeriodOverPeriod: h
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  B as C,
+  s as L,
+  h as a,
+  W as i
+};