@luzmo/analytics-components-kit 1.0.1-alpha.94 → 1.0.1-alpha.97

package/components/display-settings-period-over-period/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@lit/localize");require("@luzmo/lucero/accordion");require("@luzmo/lucero/action-button");require("@luzmo/lucero/action-group");require("@luzmo/lucero/checkbox");require("@luzmo/lucero/field-label");require("@luzmo/lucero/menu");require("@luzmo/lucero/number-field");require("@luzmo/lucero/picker");const q=require("../focusable-B3E_hQmm.cjs"),w=require("../sized-mixin-DcvJLFeo.cjs"),I=require("../decompose-numeric-format-B3rVVHpO.cjs"),N=require("../localize-r7ALOUy_.cjs"),y=require("../set-locale-BRRalqne.cjs"),o=require("lit"),l=require("lit/decorators.js"),p=require("../types-VPf7E5dD.cjs"),f={none:()=>t.msg("None"),past:()=>t.msg("Past value",{desc:"Period option"}),absoluteChange:()=>t.msg("Absolute change",{desc:"Period option"}),percentageChange:()=>t.msg("% change",{desc:"Period option"})},g=[{key:"periods",i18n:()=>t.msg("Periods",{desc:"Period option"})},{key:"years",i18n:()=>t.msg("Years",{desc:"Period option"})},{key:"quarters",i18n:()=>t.msg("Quarters",{desc:"Period option"})},{key:"months",i18n:()=>t.msg("Months",{desc:"Period option"})},{key:"weeks",i18n:()=>t.msg("Weeks",{desc:"Period option"})},{key:"days",i18n:()=>t.msg("Days",{desc:"Period option"})},{key:"hours",i18n:()=>t.msg("Hours",{desc:"Period option"})},{key:"minutes",i18n:()=>t.msg("Minutes",{desc:"Period option"})},{key:"seconds",i18n:()=>t.msg("Seconds",{desc:"Period option"})}];var z=(m=>(m.Relative="relative",m.UserDefined="user-defined",m))(z||{});const R=[{key:"relative",i18n:()=>t.msg("Relative",{desc:"Range type option"})},{key:"user-defined",i18n:()=>t.msg("User-defined",{desc:"Range type option"})}],U=":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(--display-settings-period-over-period-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-display-settings-vertical-gap, 0)}:host .settings-container:first-of-type{margin-right:var(--luzmo-spacing-4)}: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 .wrap{flex-wrap:wrap}:host .setting.period-number-setting{display:flex;align-items:center}:host .dynamic-settings-container{max-width:var(--luzmo-display-setting-period-over-period-dynamic-max-width, var(--display-setting-period-over-period-dynamic-max-width))}:host luzmo-accordion{--luzmo-accordion-item-content-area-top-to-content: 0;--luzmo-accordion-item-content-padding-left: var(--luzmo-spacing-1);--luzmo-accordion-item-header-bottom-margin: 0;--luzmo-accordion-item-content-area-bottom-to-content: var(--luzmo-spacing-2);--accordion-item-header-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--accordion-item-content-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host .label-container{display:flex;align-items:center;gap:var(--luzmo-spacing-2)}:host .academy-link{color:var(--luzmo-link-color);text-decoration:none;font-size:var(--luzmo-font-size-s);margin-left:var(--luzmo-spacing-2)}:host .academy-link:hover{color:var(--luzmo-link-color-hover)}:host(:focus){--luzmo-menu-item-label-icon-color-focus: var( --luzmo-menu-item-label-icon-color-focus, var(--luzmo-font-color) )}luzmo-menu-item{--luzmo-menu-item-tooltip-font-size: var( --luzmo-display-settings-tooltip-font-size )}luzmo-field-label{--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-checkbox{--checkbox-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-picker{--picker-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-number-field{--text-field-placeholder-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--stepper-button-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size);--display-setting-period-over-period-dynamic-max-width: 22rem}:host([size=xs]){--display-settings-period-over-period-gap: var(--luzmo-spacing-2);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xs);--display-setting-period-over-period-dynamic-max-width: 17rem}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size-s);--display-setting-period-over-period-dynamic-max-width: 19rem}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4);--display-settings-period-over-period-font-size: var(--luzmo-font-size-l);--display-setting-period-over-period-dynamic-max-width: 26rem}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xl);--display-setting-period-over-period-dynamic-max-width: 30rem}";var F=Object.defineProperty,j=Object.getOwnPropertyDescriptor,n=(m,i,e,s)=>{for(var r=s>1?void 0:s?j(i,e):i,a=m.length-1,d;a>=0;a--)(d=m[a])&&(r=(s?d(i,e,r):d(r))||r);return s&&r&&F(i,e,r),r};exports.LuzmoDisplaySettingsPeriodOverPeriod=class extends w.SizedMixin(q.LuzmoElement,{validSizes:Object.values(w.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.slotContent={},this.linkedDatasetDatetimeColumns=[],this.needsOffsetDatetimeColumn=()=>this.periodOverPeriodUiType===p.PeriodOverPeriodCondition.NoDatetimeColumnButComparisonFilters||this.periodOverPeriodUiType===p.PeriodOverPeriodCondition.NoDatetimeColumnAndNoComparisonFilters}static get styles(){return[o.unsafeCSS(U)]}willUpdate(i){var e,s,r,a,d,c,u,h,P,C,b,$,_,O,D,S,k,L,x,T,E;if(i.has("slotContent")){this._periodComparison=(s=(e=this.slotContent)==null?void 0:e.periodOverPeriod)==null?void 0:s.type,this._numberPeriods=(a=(r=this.slotContent)==null?void 0:r.periodOverPeriod)==null?void 0:a.quantity;const v=(c=(d=this.slotContent)==null?void 0:d.periodOverPeriod)==null?void 0:c.level;this._periodLevel=typeof v=="number"&&v>=0&&v<g.length?g[v].key:((h=(u=this.slotContent)==null?void 0:u.periodOverPeriod)==null?void 0:h.level)||"periods",this._incompletePeriods=(C=(P=this.slotContent)==null?void 0:P.periodOverPeriod)==null?void 0:C.periodToDate,this._offsetDateColumn=($=(b=this.slotContent)==null?void 0:b.periodOverPeriod)==null?void 0:$.offsetDateColumn,this._minLevel=((O=(_=this.slotContent)==null?void 0:_.periodOverPeriod)==null?void 0:O.minLevel)??((k=(S=(D=this.slotContent)==null?void 0:D.periodOverPeriod)==null?void 0:S.offsetDateColumn)==null?void 0:k.lowestLevel)??((L=this.slotContent)==null?void 0:L.lowestLevel)??(((x=this.slotContent)==null?void 0:x.subtype)==="date"?5:9),this._rangeType=(E=(T=this.slotContent)==null?void 0:T.periodOverPeriod)==null?void 0:E.rangeType}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,this._rangeType=this._rangeType??z.Relative,this._offsetDateColumn=this._offsetDateColumn||void 0,i.has("language")&&this.language!==y.getLocale()&&([...y.targetLocales].includes(this.language??"en")||this.language==="en")&&y.setLocale(this.language)}setPeriodComparison(){var h;const i={...this.slotContent};this.setInitialOffsetDateColumn(i),this._periodComparison=this._periodComparisonElement.value;const e=I.decomposeNumericFormat((h=this.slotContent)==null?void 0:h.format),s=["%","y","a%","ay"].includes(e.typeFormat),r=e.typeFormat.includes("a"),a=r?"a":"",d=e.comma===","||r?",":"",c=e.precision?Number.parseInt(e.precision.replace(".",""),10):0,u=["z","az","y","ay","w","aw"].includes(e.typeFormat);this._periodComparison==="percentageChange"&&!s?i.format=`${d}.${c}${a}${u?"y":"%"}`:this._periodComparison!=="percentageChange"&&i.subtype==="currency"&&s&&(i.format=`${d}.${c}${a}${u?"z":"f"}`),this.sendEvent(i)}setNumberOfPeriods(){this._numberPeriods=Number.parseInt(this._numberPeriodsElement.value,10);const i={...this.slotContent};this.sendEvent(i)}setPeriodLevel(){this._periodLevel=this._periodLevelElement.value;const i={...this.slotContent};this.sendEvent(i)}setOffsetDateColumn(){this._offsetDateColumn=this.linkedDatasetDatetimeColumns.find(e=>e.id===this._offsetDateColumnElement.value);const i={...this.slotContent};this.sendEvent(i)}setIncompletePeriods(){this._incompletePeriods=this._incompletePeriodsElement.checked;const i={...this.slotContent};this.sendEvent(i)}setRangeType(i){this._rangeType=i;const e={...this.slotContent};this.setInitialOffsetDateColumn(e),this.sendEvent(e)}sendEvent(i){const e={...i},s=g.findIndex(r=>r.key===this._periodLevel);e.periodOverPeriod={...i.periodOverPeriod,type:this._periodComparison,level:Math.max(s,0),quantity:this._numberPeriods,periodToDate:this._incompletePeriods,minLevel:this._minLevel,rangeType:this._rangeType,offsetDateColumn:this._offsetDateColumn},this._periodComparison==="none"&&delete e.periodOverPeriod,this.dispatchEvent(new CustomEvent("slot-content-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:e}}))}incompletePeriodsSetting(){return o.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@lit/localize");require("@luzmo/lucero/accordion");require("@luzmo/lucero/action-button");require("@luzmo/lucero/action-group");require("@luzmo/lucero/checkbox");require("@luzmo/lucero/field-label");require("@luzmo/lucero/menu");require("@luzmo/lucero/number-field");require("@luzmo/lucero/picker");const y=require("../focusable-QLh-LlNt.cjs"),z=require("../sized-mixin-DcvJLFeo.cjs"),P=require("../decompose-numeric-format-B3rVVHpO.cjs"),C=require("../localize-C4zNlrwK.cjs"),h=require("../set-locale-BRRalqne.cjs"),o=require("lit"),l=require("lit/decorators.js"),a=require("../types-VPf7E5dD.cjs"),u={none:()=>t.msg("None"),past:()=>t.msg("Past value",{desc:"Period option"}),absoluteChange:()=>t.msg("Absolute change",{desc:"Period option"}),percentageChange:()=>t.msg("% change",{desc:"Period option"})},c=[{key:"periods",i18n:()=>t.msg("Periods",{desc:"Period option"})},{key:"years",i18n:()=>t.msg("Years",{desc:"Period option"})},{key:"quarters",i18n:()=>t.msg("Quarters",{desc:"Period option"})},{key:"months",i18n:()=>t.msg("Months",{desc:"Period option"})},{key:"weeks",i18n:()=>t.msg("Weeks",{desc:"Period option"})},{key:"days",i18n:()=>t.msg("Days",{desc:"Period option"})},{key:"hours",i18n:()=>t.msg("Hours",{desc:"Period option"})},{key:"minutes",i18n:()=>t.msg("Minutes",{desc:"Period option"})},{key:"seconds",i18n:()=>t.msg("Seconds",{desc:"Period option"})}];var g=(d=>(d.Relative="relative",d.UserDefined="user-defined",d))(g||{});const b=[{key:"relative",i18n:()=>t.msg("Relative",{desc:"Range type option"})},{key:"user-defined",i18n:()=>t.msg("User-defined",{desc:"Range type option"})}],$=":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(--display-settings-period-over-period-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-display-settings-vertical-gap, 0)}:host .settings-container:first-of-type{margin-right:var(--luzmo-spacing-4)}: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 .wrap{flex-wrap:wrap}:host .setting.period-number-setting{display:flex;align-items:center}:host .dynamic-settings-container{max-width:var(--luzmo-display-setting-period-over-period-dynamic-max-width, var(--display-setting-period-over-period-dynamic-max-width))}:host luzmo-accordion{--luzmo-accordion-item-content-area-top-to-content: 0;--luzmo-accordion-item-content-padding-left: var(--luzmo-spacing-1);--luzmo-accordion-item-header-bottom-margin: 0;--luzmo-accordion-item-content-area-bottom-to-content: var(--luzmo-spacing-2);--accordion-item-header-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--accordion-item-content-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host .label-container{display:flex;align-items:center;gap:var(--luzmo-spacing-2)}:host .academy-link{color:var(--luzmo-link-color);text-decoration:none;font-size:var(--luzmo-font-size-s);margin-left:var(--luzmo-spacing-2)}:host .academy-link:hover{color:var(--luzmo-link-color-hover)}:host(:focus){--luzmo-menu-item-label-icon-color-focus: var( --luzmo-menu-item-label-icon-color-focus, var(--luzmo-font-color) )}luzmo-menu-item{--luzmo-menu-item-tooltip-font-size: var( --luzmo-display-settings-tooltip-font-size )}luzmo-field-label{--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-checkbox{--checkbox-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-picker{--picker-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-number-field{--text-field-placeholder-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--stepper-button-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size);--display-setting-period-over-period-dynamic-max-width: 22rem}:host([size=xs]){--display-settings-period-over-period-gap: var(--luzmo-spacing-2);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xs);--display-setting-period-over-period-dynamic-max-width: 17rem}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size-s);--display-setting-period-over-period-dynamic-max-width: 19rem}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4);--display-settings-period-over-period-font-size: var(--luzmo-font-size-l);--display-setting-period-over-period-dynamic-max-width: 26rem}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xl);--display-setting-period-over-period-dynamic-max-width: 30rem}";var _=Object.defineProperty,O=Object.getOwnPropertyDescriptor,n=(d,i,e,s)=>{for(var r=s>1?void 0:s?O(i,e):i,p=d.length-1,m;p>=0;p--)(m=d[p])&&(r=(s?m(i,e,r):m(r))||r);return s&&r&&_(i,e,r),r};exports.LuzmoDisplaySettingsPeriodOverPeriod=class extends z.SizedMixin(y.LuzmoElement,{validSizes:Object.values(z.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.slotContent={},this.linkedDatasetDatetimeColumns=[],this.needsOffsetDatetimeColumn=()=>this.periodOverPeriodUiType===a.PeriodOverPeriodCondition.NoDatetimeColumnButComparisonFilters||this.periodOverPeriodUiType===a.PeriodOverPeriodCondition.NoDatetimeColumnAndNoComparisonFilters}static get styles(){return[o.unsafeCSS($)]}willUpdate(i){if(i.has("slotContent")){this._periodComparison=this.slotContent?.periodOverPeriod?.type,this._numberPeriods=this.slotContent?.periodOverPeriod?.quantity;const e=this.slotContent?.periodOverPeriod?.level;this._periodLevel=typeof e=="number"&&e>=0&&e<c.length?c[e].key:this.slotContent?.periodOverPeriod?.level||"periods",this._incompletePeriods=this.slotContent?.periodOverPeriod?.periodToDate,this._offsetDateColumn=this.slotContent?.periodOverPeriod?.offsetDateColumn,this._minLevel=this.slotContent?.periodOverPeriod?.minLevel??this.slotContent?.periodOverPeriod?.offsetDateColumn?.lowestLevel??this.slotContent?.lowestLevel??(this.slotContent?.subtype==="date"?5:9),this._rangeType=this.slotContent?.periodOverPeriod?.rangeType}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,this._rangeType=this._rangeType??g.Relative,this._offsetDateColumn=this._offsetDateColumn||void 0,i.has("language")&&this.language!==h.getLocale()&&([...h.targetLocales].includes(this.language??"en")||this.language==="en")&&h.setLocale(this.language)}setPeriodComparison(){const i={...this.slotContent};this.setInitialOffsetDateColumn(i),this._periodComparison=this._periodComparisonElement.value;const e=P.decomposeNumericFormat(this.slotContent?.format),s=["%","y","a%","ay"].includes(e.typeFormat),r=e.typeFormat.includes("a"),p=r?"a":"",m=e.comma===","||r?",":"",v=e.precision?Number.parseInt(e.precision.replace(".",""),10):0,f=["z","az","y","ay","w","aw"].includes(e.typeFormat);this._periodComparison==="percentageChange"&&!s?i.format=`${m}.${v}${p}${f?"y":"%"}`:this._periodComparison!=="percentageChange"&&i.subtype==="currency"&&s&&(i.format=`${m}.${v}${p}${f?"z":"f"}`),this.sendEvent(i)}setNumberOfPeriods(){this._numberPeriods=Number.parseInt(this._numberPeriodsElement.value,10);const i={...this.slotContent};this.sendEvent(i)}setPeriodLevel(){this._periodLevel=this._periodLevelElement.value;const i={...this.slotContent};this.sendEvent(i)}setOffsetDateColumn(){this._offsetDateColumn=this.linkedDatasetDatetimeColumns.find(e=>e.id===this._offsetDateColumnElement.value);const i={...this.slotContent};this.sendEvent(i)}setIncompletePeriods(){this._incompletePeriods=this._incompletePeriodsElement.checked;const i={...this.slotContent};this.sendEvent(i)}setRangeType(i){this._rangeType=i;const e={...this.slotContent};this.setInitialOffsetDateColumn(e),this.sendEvent(e)}sendEvent(i){const e={...i},s=c.findIndex(r=>r.key===this._periodLevel);e.periodOverPeriod={...i.periodOverPeriod,type:this._periodComparison,level:Math.max(s,0),quantity:this._numberPeriods,periodToDate:this._incompletePeriods,minLevel:this._minLevel,rangeType:this._rangeType,offsetDateColumn:this._offsetDateColumn},this._periodComparison==="none"&&delete e.periodOverPeriod,this.dispatchEvent(new CustomEvent("slot-content-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:e}}))}incompletePeriodsSetting(){return o.html`
       <div class="settings-row">
         <div class="setting">
           <luzmo-checkbox
@@ -31,7 +31,7 @@
           </luzmo-checkbox>
         </div>
       </div>
-    `}relativeOffsetSetting(){const i=g.slice(this.needsOffsetDatetimeColumn()?1:0,(this._minLevel??0)+1).map(e=>o.html`<luzmo-menu-item
+    `}relativeOffsetSetting(){const i=c.slice(this.needsOffsetDatetimeColumn()?1:0,(this._minLevel??0)+1).map(e=>o.html`<luzmo-menu-item
         value=${e.key}
         tooltip=${e.key==="periods"?t.msg("Matches the date range visible in the chart or table",{desc:"Tooltip for periods"}):""}
       >
@@ -67,7 +67,7 @@
           </div>
         </div>
       </div>
-    `}rangeTypeSetting(){const i=R.map(e=>o.html`<luzmo-action-button
+    `}rangeTypeSetting(){const i=b.map(e=>o.html`<luzmo-action-button
         data-range-type=${e.key}
         @click=${this._handleRangeTypeClick}
       >
@@ -88,8 +88,8 @@
           ${i}
         </luzmo-action-group>
       </div>
-    `}_handleRangeTypeClick(i){var r;const e=i.currentTarget,s=(r=e==null?void 0:e.dataset)==null?void 0:r.rangeType;s&&this.setRangeType(s)}offsetDateColumnSetting(){var e;const i=this.linkedDatasetDatetimeColumns.map(s=>o.html`<luzmo-menu-item value=${s.id}>
-          ${N.localize(s.name,this.language)}
+    `}_handleRangeTypeClick(i){const s=i.currentTarget?.dataset?.rangeType;s&&this.setRangeType(s)}offsetDateColumnSetting(){const i=this.linkedDatasetDatetimeColumns.map(e=>o.html`<luzmo-menu-item value=${e.id}>
+          ${C.localize(e.name,this.language)}
         </luzmo-menu-item>`);return o.html`
       <div class="settings-container">
         <luzmo-field-label for="offset-date-column">
@@ -101,15 +101,15 @@
             id="offset-date-column"
             size=${this.size}
             variant="highlight"
-            value=${(e=this._offsetDateColumn)==null?void 0:e.id}
+            value=${this._offsetDateColumn?.id}
             @change=${this.setOffsetDateColumn}
           >
             ${i}
           </luzmo-picker>
         </div>
       </div>
-    `}typeOfComparisonSetting(){const i=Object.keys(f).map(e=>o.html`<luzmo-menu-item value=${e}>
-          ${f[e]()}
+    `}typeOfComparisonSetting(){const i=Object.keys(u).map(e=>o.html`<luzmo-menu-item value=${e}>
+          ${u[e]()}
         </luzmo-menu-item>`);return o.html`<div class="settings-container">
       <luzmo-field-label for="period-comparison">
         ${t.msg("Show")}
@@ -123,16 +123,16 @@
       >
         ${i}
       </luzmo-picker>
-    </div>`}renderPeriodSettings(){var e;const i={[p.PeriodOverPeriodCondition.HasDatetimeColumnAndNoComparisonFilters]:()=>o.html`
+    </div>`}renderPeriodSettings(){return{[a.PeriodOverPeriodCondition.HasDatetimeColumnAndNoComparisonFilters]:()=>o.html`
             ${this.relativeOffsetSetting()} ${this.incompletePeriodsSetting()}
-          `,[p.PeriodOverPeriodCondition.NoDatetimeColumnAndNoComparisonFilters]:()=>o.html`
+          `,[a.PeriodOverPeriodCondition.NoDatetimeColumnAndNoComparisonFilters]:()=>o.html`
             ${this.relativeOffsetSetting()} ${this.offsetDateColumnSetting()}
             ${this.incompletePeriodsSetting()}
-          `,[p.PeriodOverPeriodCondition.HasDatetimeColumnAndComparisonFilters]:()=>this._rangeType===z.Relative?o.html`${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
-          ${this.incompletePeriodsSetting()} `:o.html` ${this.rangeTypeSetting()} `,[p.PeriodOverPeriodCondition.NoDatetimeColumnButComparisonFilters]:()=>this._rangeType===z.Relative?o.html`
+          `,[a.PeriodOverPeriodCondition.HasDatetimeColumnAndComparisonFilters]:()=>this._rangeType===g.Relative?o.html`${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
+          ${this.incompletePeriodsSetting()} `:o.html` ${this.rangeTypeSetting()} `,[a.PeriodOverPeriodCondition.NoDatetimeColumnButComparisonFilters]:()=>this._rangeType===g.Relative?o.html`
             ${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
             ${this.offsetDateColumnSetting()} ${this.incompletePeriodsSetting()}
-          `:o.html` ${this.rangeTypeSetting()} `,[p.PeriodOverPeriodCondition.OldImplementation]:()=>""};return((e=i[this.periodOverPeriodUiType])==null?void 0:e.call(i))??""}renderOldUiPeriodSettings(){const i=g.slice(0,(this._minLevel??0)+1).map(e=>o.html`<luzmo-menu-item
+          `:o.html` ${this.rangeTypeSetting()} `,[a.PeriodOverPeriodCondition.OldImplementation]:()=>""}[this.periodOverPeriodUiType]?.()??""}renderOldUiPeriodSettings(){const i=c.slice(0,(this._minLevel??0)+1).map(e=>o.html`<luzmo-menu-item
           value=${e.key}
           tooltip=${e.key==="periods"?t.msg("Matches the date range visible in the chart or table",{desc:"Tooltip for periods"}):""}
         >
@@ -176,8 +176,8 @@
             ${t.msg("Use period-to-date for incomplete periods",{desc:"Checkbox label for incomplete periods"})}
           </luzmo-checkbox>
         </div>
-      </div>`}renderOldUi(){const i=Object.keys(f).map(e=>o.html`<luzmo-menu-item value=${e}>
-          ${f[e]()}
+      </div>`}renderOldUi(){const i=Object.keys(u).map(e=>o.html`<luzmo-menu-item value=${e}>
+          ${u[e]()}
         </luzmo-menu-item>`);return o.html`<div class="settings-container">
       <div class="settings-row">
         <div class="setting">
@@ -207,7 +207,7 @@
         </div>
       </div>
       ${this._periodComparison==="none"?"":this.renderOldUiPeriodSettings()}
-    </div>`}render(){return this.periodOverPeriodUiType===p.PeriodOverPeriodCondition.OldImplementation?this.renderOldUi():o.html`
+    </div>`}render(){return this.periodOverPeriodUiType===a.PeriodOverPeriodCondition.OldImplementation?this.renderOldUi():o.html`
       <luzmo-accordion variant="highlight-child" class="setting">
         <luzmo-accordion-item
           ?open=${this._periodComparison!=="none"}

package/components/display-settings-period-over-period/index.js

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { msg as i, localized as I } from "@lit/localize";
+import { msg as i, localized as y } from "@lit/localize";
 import "@luzmo/lucero/accordion";
 import "@luzmo/lucero/action-button";
 import "@luzmo/lucero/action-group";
@@ -26,26 +26,26 @@ import "@luzmo/lucero/field-label";
 import "@luzmo/lucero/menu";
 import "@luzmo/lucero/number-field";
 import "@luzmo/lucero/picker";
-import { L as N } from "../focusable-DCIFkpiW.js";
-import { S as U, E as R } from "../sized-mixin-cJbo3PKR.js";
-import { d as F } from "../decompose-numeric-format-BuZcjH2k.js";
-import { l as A } from "../localize-BX7q0S0M.js";
-import { g as j, t as M, s as q } from "../set-locale-Dp3N_gXN.js";
-import { unsafeCSS as H, html as t } from "lit";
-import { property as y, query as f, state as E } from "lit/decorators.js";
-import { P as p } from "../types-RxAJdtVT.js";
+import { L as b } from "../focusable-BS2pbY7w.js";
+import { S as C, E as x } from "../sized-mixin-cJbo3PKR.js";
+import { d as $ } from "../decompose-numeric-format-BuZcjH2k.js";
+import { l as P } from "../localize-CcDpq940.js";
+import { g as _, t as k, s as O } from "../set-locale-hKTMz37h.js";
+import { unsafeCSS as D, html as t } from "lit";
+import { property as z, query as u, state as v } from "lit/decorators.js";
+import { P as d } from "../types-RxAJdtVT.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const e = document.createElement("style");
     e.setAttribute("data-luzmo-vars", ""), e.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(e);
   }
 })();
-const h = {
+const g = {
   none: () => i("None"),
   past: () => i("Past value", { desc: "Period option" }),
   absoluteChange: () => i("Absolute change", { desc: "Period option" }),
   percentageChange: () => i("% change", { desc: "Period option" })
-}, g = [
+}, c = [
   { key: "periods", i18n: () => i("Periods", { desc: "Period option" }) },
   { key: "years", i18n: () => i("Years", { desc: "Period option" }) },
   { key: "quarters", i18n: () => i("Quarters", { desc: "Period option" }) },
@@ -56,8 +56,8 @@ const h = {
   { key: "minutes", i18n: () => i("Minutes", { desc: "Period option" }) },
   { key: "seconds", i18n: () => i("Seconds", { desc: "Period option" }) }
 ];
-var v = /* @__PURE__ */ ((o) => (o.Relative = "relative", o.UserDefined = "user-defined", o))(v || {});
-const V = [
+var f = /* @__PURE__ */ ((o) => (o.Relative = "relative", o.UserDefined = "user-defined", o))(f || {});
+const S = [
   {
     key: "relative",
     i18n: () => i("Relative", { desc: "Range type option" })
@@ -66,43 +66,41 @@ const V = [
     key: "user-defined",
     i18n: () => i("User-defined", { desc: "Range type option" })
   }
-], B = ":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(--display-settings-period-over-period-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-display-settings-vertical-gap, 0)}:host .settings-container:first-of-type{margin-right:var(--luzmo-spacing-4)}: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 .wrap{flex-wrap:wrap}:host .setting.period-number-setting{display:flex;align-items:center}:host .dynamic-settings-container{max-width:var(--luzmo-display-setting-period-over-period-dynamic-max-width, var(--display-setting-period-over-period-dynamic-max-width))}:host luzmo-accordion{--luzmo-accordion-item-content-area-top-to-content: 0;--luzmo-accordion-item-content-padding-left: var(--luzmo-spacing-1);--luzmo-accordion-item-header-bottom-margin: 0;--luzmo-accordion-item-content-area-bottom-to-content: var(--luzmo-spacing-2);--accordion-item-header-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--accordion-item-content-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host .label-container{display:flex;align-items:center;gap:var(--luzmo-spacing-2)}:host .academy-link{color:var(--luzmo-link-color);text-decoration:none;font-size:var(--luzmo-font-size-s);margin-left:var(--luzmo-spacing-2)}:host .academy-link:hover{color:var(--luzmo-link-color-hover)}:host(:focus){--luzmo-menu-item-label-icon-color-focus: var( --luzmo-menu-item-label-icon-color-focus, var(--luzmo-font-color) )}luzmo-menu-item{--luzmo-menu-item-tooltip-font-size: var( --luzmo-display-settings-tooltip-font-size )}luzmo-field-label{--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-checkbox{--checkbox-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-picker{--picker-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-number-field{--text-field-placeholder-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--stepper-button-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size);--display-setting-period-over-period-dynamic-max-width: 22rem}:host([size=xs]){--display-settings-period-over-period-gap: var(--luzmo-spacing-2);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xs);--display-setting-period-over-period-dynamic-max-width: 17rem}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size-s);--display-setting-period-over-period-dynamic-max-width: 19rem}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4);--display-settings-period-over-period-font-size: var(--luzmo-font-size-l);--display-setting-period-over-period-dynamic-max-width: 26rem}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xl);--display-setting-period-over-period-dynamic-max-width: 30rem}";
-var G = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, a = (o, e, r, s) => {
-  for (var l = s > 1 ? void 0 : s ? Y(e, r) : e, d = o.length - 1, m; d >= 0; d--)
-    (m = o[d]) && (l = (s ? m(e, r, l) : m(l)) || l);
-  return s && l && G(e, r, l), l;
+], w = ":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(--display-settings-period-over-period-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-display-settings-vertical-gap, 0)}:host .settings-container:first-of-type{margin-right:var(--luzmo-spacing-4)}: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 .wrap{flex-wrap:wrap}:host .setting.period-number-setting{display:flex;align-items:center}:host .dynamic-settings-container{max-width:var(--luzmo-display-setting-period-over-period-dynamic-max-width, var(--display-setting-period-over-period-dynamic-max-width))}:host luzmo-accordion{--luzmo-accordion-item-content-area-top-to-content: 0;--luzmo-accordion-item-content-padding-left: var(--luzmo-spacing-1);--luzmo-accordion-item-header-bottom-margin: 0;--luzmo-accordion-item-content-area-bottom-to-content: var(--luzmo-spacing-2);--accordion-item-header-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--accordion-item-content-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host .label-container{display:flex;align-items:center;gap:var(--luzmo-spacing-2)}:host .academy-link{color:var(--luzmo-link-color);text-decoration:none;font-size:var(--luzmo-font-size-s);margin-left:var(--luzmo-spacing-2)}:host .academy-link:hover{color:var(--luzmo-link-color-hover)}:host(:focus){--luzmo-menu-item-label-icon-color-focus: var( --luzmo-menu-item-label-icon-color-focus, var(--luzmo-font-color) )}luzmo-menu-item{--luzmo-menu-item-tooltip-font-size: var( --luzmo-display-settings-tooltip-font-size )}luzmo-field-label{--field-label-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-checkbox{--checkbox-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-picker{--picker-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}luzmo-number-field{--text-field-placeholder-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) );--stepper-button-font-size: var( --luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size) )}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size);--display-setting-period-over-period-dynamic-max-width: 22rem}:host([size=xs]){--display-settings-period-over-period-gap: var(--luzmo-spacing-2);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xs);--display-setting-period-over-period-dynamic-max-width: 17rem}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size-s);--display-setting-period-over-period-dynamic-max-width: 19rem}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4);--display-settings-period-over-period-font-size: var(--luzmo-font-size-l);--display-setting-period-over-period-dynamic-max-width: 26rem}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xl);--display-setting-period-over-period-dynamic-max-width: 30rem}";
+var L = Object.defineProperty, T = Object.getOwnPropertyDescriptor, s = (o, e, n, a) => {
+  for (var l = a > 1 ? void 0 : a ? T(e, n) : e, m = o.length - 1, p; m >= 0; m--)
+    (p = o[m]) && (l = (a ? p(e, n, l) : p(l)) || l);
+  return a && l && L(e, n, l), l;
 };
-let n = class extends U(
-  N,
+let r = class extends C(
+  b,
   {
-    validSizes: Object.values(R)
+    validSizes: Object.values(x)
   }
 ) {
   constructor() {
-    super(...arguments), this.language = "en", this.slotContent = {}, this.linkedDatasetDatetimeColumns = [], this.needsOffsetDatetimeColumn = () => this.periodOverPeriodUiType === p.NoDatetimeColumnButComparisonFilters || this.periodOverPeriodUiType === p.NoDatetimeColumnAndNoComparisonFilters;
+    super(...arguments), this.language = "en", this.slotContent = {}, this.linkedDatasetDatetimeColumns = [], this.needsOffsetDatetimeColumn = () => this.periodOverPeriodUiType === d.NoDatetimeColumnButComparisonFilters || this.periodOverPeriodUiType === d.NoDatetimeColumnAndNoComparisonFilters;
   }
   static get styles() {
-    return [H(B)];
+    return [D(w)];
   }
   willUpdate(o) {
-    var e, r, s, l, d, m, c, u, b, C, x, $, P, _, k, O, D, S, w, L, T;
     if (o.has("slotContent")) {
-      this._periodComparison = (r = (e = this.slotContent) == null ? void 0 : e.periodOverPeriod) == null ? void 0 : r.type, this._numberPeriods = (l = (s = this.slotContent) == null ? void 0 : s.periodOverPeriod) == null ? void 0 : l.quantity;
-      const z = (m = (d = this.slotContent) == null ? void 0 : d.periodOverPeriod) == null ? void 0 : m.level;
-      this._periodLevel = typeof z == "number" && z >= 0 && z < g.length ? g[z].key : ((u = (c = this.slotContent) == null ? void 0 : c.periodOverPeriod) == null ? void 0 : u.level) || "periods", this._incompletePeriods = (C = (b = this.slotContent) == null ? void 0 : b.periodOverPeriod) == null ? void 0 : C.periodToDate, this._offsetDateColumn = ($ = (x = this.slotContent) == null ? void 0 : x.periodOverPeriod) == null ? void 0 : $.offsetDateColumn, this._minLevel = ((_ = (P = this.slotContent) == null ? void 0 : P.periodOverPeriod) == null ? void 0 : _.minLevel) ?? ((D = (O = (k = this.slotContent) == null ? void 0 : k.periodOverPeriod) == null ? void 0 : O.offsetDateColumn) == null ? void 0 : D.lowestLevel) ?? ((S = this.slotContent) == null ? void 0 : S.lowestLevel) ?? (((w = this.slotContent) == null ? void 0 : w.subtype) === "date" ? 5 : 9), this._rangeType = (T = (L = this.slotContent) == null ? void 0 : L.periodOverPeriod) == null ? void 0 : T.rangeType;
+      this._periodComparison = this.slotContent?.periodOverPeriod?.type, this._numberPeriods = this.slotContent?.periodOverPeriod?.quantity;
+      const e = this.slotContent?.periodOverPeriod?.level;
+      this._periodLevel = typeof e == "number" && e >= 0 && e < c.length ? c[e].key : this.slotContent?.periodOverPeriod?.level || "periods", this._incompletePeriods = this.slotContent?.periodOverPeriod?.periodToDate, this._offsetDateColumn = this.slotContent?.periodOverPeriod?.offsetDateColumn, this._minLevel = this.slotContent?.periodOverPeriod?.minLevel ?? this.slotContent?.periodOverPeriod?.offsetDateColumn?.lowestLevel ?? this.slotContent?.lowestLevel ?? (this.slotContent?.subtype === "date" ? 5 : 9), this._rangeType = this.slotContent?.periodOverPeriod?.rangeType;
     }
-    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, this._rangeType = this._rangeType ?? v.Relative, this._offsetDateColumn = this._offsetDateColumn || void 0, o.has("language") && this.language !== j() && ([...M].includes(this.language ?? "en") || this.language === "en") && q(this.language);
+    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, this._rangeType = this._rangeType ?? f.Relative, this._offsetDateColumn = this._offsetDateColumn || void 0, o.has("language") && this.language !== _() && ([...k].includes(this.language ?? "en") || this.language === "en") && O(this.language);
   }
   setPeriodComparison() {
-    var u;
     const o = { ...this.slotContent };
     this.setInitialOffsetDateColumn(o), this._periodComparison = this._periodComparisonElement.value;
-    const e = F((u = this.slotContent) == null ? void 0 : u.format), r = ["%", "y", "a%", "ay"].includes(
+    const e = $(this.slotContent?.format), n = ["%", "y", "a%", "ay"].includes(
       e.typeFormat
-    ), s = e.typeFormat.includes("a"), l = s ? "a" : "", d = e.comma === "," || s ? "," : "", m = e.precision ? Number.parseInt(e.precision.replace(".", ""), 10) : 0, c = ["z", "az", "y", "ay", "w", "aw"].includes(
+    ), a = e.typeFormat.includes("a"), l = a ? "a" : "", m = e.comma === "," || a ? "," : "", p = e.precision ? Number.parseInt(e.precision.replace(".", ""), 10) : 0, h = ["z", "az", "y", "ay", "w", "aw"].includes(
       e.typeFormat
     );
-    this._periodComparison === "percentageChange" && !r ? o.format = `${d}.${m}${l}${c ? "y" : "%"}` : this._periodComparison !== "percentageChange" && o.subtype === "currency" && r && (o.format = `${d}.${m}${l}${c ? "z" : "f"}`), this.sendEvent(o);
+    this._periodComparison === "percentageChange" && !n ? o.format = `${m}.${p}${l}${h ? "y" : "%"}` : this._periodComparison !== "percentageChange" && o.subtype === "currency" && n && (o.format = `${m}.${p}${l}${h ? "z" : "f"}`), this.sendEvent(o);
   }
   setNumberOfPeriods() {
     this._numberPeriods = Number.parseInt(this._numberPeriodsElement.value, 10);
@@ -132,14 +130,14 @@ let n = class extends U(
     this.setInitialOffsetDateColumn(e), this.sendEvent(e);
   }
   sendEvent(o) {
-    const e = { ...o }, r = g.findIndex(
-      (s) => s.key === this._periodLevel
+    const e = { ...o }, n = c.findIndex(
+      (a) => a.key === this._periodLevel
     );
     e.periodOverPeriod = {
       ...o.periodOverPeriod,
       type: this._periodComparison,
       // Use the index as the numeric level value
-      level: Math.max(r, 0),
+      level: Math.max(n, 0),
       quantity: this._numberPeriods,
       periodToDate: this._incompletePeriods,
       minLevel: this._minLevel,
@@ -176,7 +174,7 @@ let n = class extends U(
     `;
   }
   relativeOffsetSetting() {
-    const o = g.slice(
+    const o = c.slice(
       this.needsOffsetDatetimeColumn() ? 1 : 0,
       (this._minLevel ?? 0) + 1
     ).map((e) => t`<luzmo-menu-item
@@ -223,7 +221,7 @@ let n = class extends U(
     `;
   }
   rangeTypeSetting() {
-    const o = V.map((e) => t`<luzmo-action-button
+    const o = S.map((e) => t`<luzmo-action-button
         data-range-type=${e.key}
         @click=${this._handleRangeTypeClick}
       >
@@ -250,15 +248,13 @@ let n = class extends U(
     `;
   }
   _handleRangeTypeClick(o) {
-    var s;
-    const e = o.currentTarget, r = (s = e == null ? void 0 : e.dataset) == null ? void 0 : s.rangeType;
-    r && this.setRangeType(r);
+    const n = o.currentTarget?.dataset?.rangeType;
+    n && this.setRangeType(n);
   }
   offsetDateColumnSetting() {
-    var e;
     const o = this.linkedDatasetDatetimeColumns.map(
-      (r) => t`<luzmo-menu-item value=${r.id}>
-          ${A(r.name, this.language)}
+      (e) => t`<luzmo-menu-item value=${e.id}>
+          ${P(e.name, this.language)}
         </luzmo-menu-item>`
     );
     return t`
@@ -274,7 +270,7 @@ let n = class extends U(
             id="offset-date-column"
             size=${this.size}
             variant="highlight"
-            value=${(e = this._offsetDateColumn) == null ? void 0 : e.id}
+            value=${this._offsetDateColumn?.id}
             @change=${this.setOffsetDateColumn}
           >
             ${o}
@@ -284,9 +280,9 @@ let n = class extends U(
     `;
   }
   typeOfComparisonSetting() {
-    const o = Object.keys(h).map(
+    const o = Object.keys(g).map(
       (e) => t`<luzmo-menu-item value=${e}>
-          ${h[e]()}
+          ${g[e]()}
         </luzmo-menu-item>`
     );
     return t`<div class="settings-container">
@@ -305,27 +301,25 @@ let n = class extends U(
     </div>`;
   }
   renderPeriodSettings() {
-    var e;
-    const o = {
-      [p.HasDatetimeColumnAndNoComparisonFilters]: () => t`
+    return {
+      [d.HasDatetimeColumnAndNoComparisonFilters]: () => t`
             ${this.relativeOffsetSetting()} ${this.incompletePeriodsSetting()}
           `,
-      [p.NoDatetimeColumnAndNoComparisonFilters]: () => t`
+      [d.NoDatetimeColumnAndNoComparisonFilters]: () => t`
             ${this.relativeOffsetSetting()} ${this.offsetDateColumnSetting()}
             ${this.incompletePeriodsSetting()}
           `,
-      [p.HasDatetimeColumnAndComparisonFilters]: () => this._rangeType === v.Relative ? t`${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
+      [d.HasDatetimeColumnAndComparisonFilters]: () => this._rangeType === f.Relative ? t`${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
           ${this.incompletePeriodsSetting()} ` : t` ${this.rangeTypeSetting()} `,
-      [p.NoDatetimeColumnButComparisonFilters]: () => this._rangeType === v.Relative ? t`
+      [d.NoDatetimeColumnButComparisonFilters]: () => this._rangeType === f.Relative ? t`
             ${this.rangeTypeSetting()} ${this.relativeOffsetSetting()}
             ${this.offsetDateColumnSetting()} ${this.incompletePeriodsSetting()}
           ` : t` ${this.rangeTypeSetting()} `,
-      [p.OldImplementation]: () => ""
-    };
-    return ((e = o[this.periodOverPeriodUiType]) == null ? void 0 : e.call(o)) ?? "";
+      [d.OldImplementation]: () => ""
+    }[this.periodOverPeriodUiType]?.() ?? "";
   }
   renderOldUiPeriodSettings() {
-    const o = g.slice(0, (this._minLevel ?? 0) + 1).map(
+    const o = c.slice(0, (this._minLevel ?? 0) + 1).map(
       (e) => t`<luzmo-menu-item
           value=${e.key}
           tooltip=${e.key === "periods" ? i("Matches the date range visible in the chart or table", {
@@ -381,9 +375,9 @@ let n = class extends U(
       </div>`;
   }
   renderOldUi() {
-    const o = Object.keys(h).map(
+    const o = Object.keys(g).map(
       (e) => t`<luzmo-menu-item value=${e}>
-          ${h[e]()}
+          ${g[e]()}
         </luzmo-menu-item>`
     );
     return t`<div class="settings-container">
@@ -422,7 +416,7 @@ let n = class extends U(
     </div>`;
   }
   render() {
-    return this.periodOverPeriodUiType === p.OldImplementation ? this.renderOldUi() : t`
+    return this.periodOverPeriodUiType === d.OldImplementation ? this.renderOldUi() : t`
       <luzmo-accordion variant="highlight-child" class="setting">
         <luzmo-accordion-item
           ?open=${this._periodComparison !== "none"}
@@ -444,46 +438,46 @@ let n = class extends U(
     this._offsetDateColumn = this.needsOffsetDatetimeColumn() ? this.linkedDatasetDatetimeColumns[0] : void 0, o.periodOverPeriod.offsetDateColumn = this._offsetDateColumn;
   }
 };
-a([
-  y({ type: String, reflect: !0 })
-], n.prototype, "language", 2);
-a([
-  y({ type: Object, attribute: "slot-content" })
-], n.prototype, "slotContent", 2);
-a([
-  y({ type: String, attribute: "period-over-period-type" })
-], n.prototype, "periodOverPeriodUiType", 2);
-a([
-  y({ type: Array, attribute: "linked-dataset-datetime-columns" })
-], n.prototype, "linkedDatasetDatetimeColumns", 2);
-a([
-  f("#period-comparison")
-], n.prototype, "_periodComparisonElement", 2);
-a([
-  f("#number-periods")
-], n.prototype, "_numberPeriodsElement", 2);
-a([
-  f("#period-level")
-], n.prototype, "_periodLevelElement", 2);
-a([
-  f("#offset-date-column")
-], n.prototype, "_offsetDateColumnElement", 2);
-a([
-  f("#incomplete-periods")
-], n.prototype, "_incompletePeriodsElement", 2);
-a([
-  E()
-], n.prototype, "_periodComparison", 2);
-a([
-  E()
-], n.prototype, "_rangeType", 2);
-n = a([
-  I()
-], n);
+s([
+  z({ type: String, reflect: !0 })
+], r.prototype, "language", 2);
+s([
+  z({ type: Object, attribute: "slot-content" })
+], r.prototype, "slotContent", 2);
+s([
+  z({ type: String, attribute: "period-over-period-type" })
+], r.prototype, "periodOverPeriodUiType", 2);
+s([
+  z({ type: Array, attribute: "linked-dataset-datetime-columns" })
+], r.prototype, "linkedDatasetDatetimeColumns", 2);
+s([
+  u("#period-comparison")
+], r.prototype, "_periodComparisonElement", 2);
+s([
+  u("#number-periods")
+], r.prototype, "_numberPeriodsElement", 2);
+s([
+  u("#period-level")
+], r.prototype, "_periodLevelElement", 2);
+s([
+  u("#offset-date-column")
+], r.prototype, "_offsetDateColumnElement", 2);
+s([
+  u("#incomplete-periods")
+], r.prototype, "_incompletePeriodsElement", 2);
+s([
+  v()
+], r.prototype, "_periodComparison", 2);
+s([
+  v()
+], r.prototype, "_rangeType", 2);
+r = s([
+  y()
+], r);
 customElements.get("luzmo-display-settings-period-over-period") || customElements.define(
   "luzmo-display-settings-period-over-period",
-  n
+  r
 );
 export {
-  n as LuzmoDisplaySettingsPeriodOverPeriod
+  r as LuzmoDisplaySettingsPeriodOverPeriod
 };

package/components/{donut-chart-options.config-BulUEiaH.js → donut-chart-options.config-3ZqX8Cbb.js}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const u = [
+const l = [
   {
     key: "general",
     type: "group",
@@ -58,15 +58,12 @@ const u = [
           type: "switch",
           label: "Legend",
           default: !0,
-          calculateValue: ({ options: e }) => {
-            var l, r;
-            return ((l = e == null ? void 0 : e.display) == null ? void 0 : l.legend) !== !1 || ((r = e == null ? void 0 : e.display) == null ? void 0 : r.categoryLabels) === !0;
-          },
-          toOptions: ({ options: e, value: l }) => ({
+          calculateValue: ({ options: e }) => e?.display?.legend !== !1 || e?.display?.categoryLabels === !0,
+          toOptions: ({ options: e, value: t }) => ({
             ...e,
             display: {
               ...e.display,
-              legend: l,
+              legend: t,
               categoryLabels: !1
             }
           })
@@ -78,19 +75,16 @@ const u = [
           type: "radio-button-group",
           enum: ["list", "labels"],
           parseValue: (e) => e ? "labels" : "list",
-          toOptions: ({ options: e, value: l }) => ({
+          toOptions: ({ options: e, value: t }) => ({
             ...e,
             display: {
               ...e.display,
-              categoryLabels: l === "labels",
-              legend: l !== "labels"
+              categoryLabels: t === "labels",
+              legend: t !== "labels"
             }
           })
         },
-        visibleIf: ({ options: e }) => {
-          var l, r;
-          return ((l = e == null ? void 0 : e.display) == null ? void 0 : l.legend) !== !1 || ((r = e == null ? void 0 : e.display) == null ? void 0 : r.categoryLabels) === !0;
-        }
+        visibleIf: ({ options: e }) => e?.display?.legend !== !1 || e?.display?.categoryLabels === !0
       }
     ]
   },
@@ -153,19 +147,14 @@ const u = [
           min: 0,
           max: 24,
           step: 1,
-          extraLabel: ({ options: e, theme: l }) => {
-            var r, a;
-            if (typeof ((r = l == null ? void 0 : l.itemSpecific) == null ? void 0 : r.rounding) == "number")
-              return typeof ((a = e == null ? void 0 : e.slices) == null ? void 0 : a.roundedCorners) != "number" ? "auto" : "reset";
-          },
-          extraLabelHasClickAction: ({ options: e, theme: l }) => {
-            var r, a;
-            return !(typeof ((r = l == null ? void 0 : l.itemSpecific) == null ? void 0 : r.rounding) != "number" || typeof ((a = e == null ? void 0 : e.slices) == null ? void 0 : a.roundedCorners) != "number");
+          extraLabel: ({ options: e, theme: t }) => {
+            if (typeof t?.itemSpecific?.rounding == "number")
+              return typeof e?.slices?.roundedCorners != "number" ? "auto" : "reset";
           },
+          extraLabelHasClickAction: ({ options: e, theme: t }) => !(typeof t?.itemSpecific?.rounding != "number" || typeof e?.slices?.roundedCorners != "number"),
           extraLabelClickAction: ({ options: e }) => {
-            var r;
-            const l = { ...e };
-            return ((r = l == null ? void 0 : l.slices) == null ? void 0 : r.roundedCorners) !== void 0 && delete l.slices.roundedCorners, { value: null, options: l };
+            const t = { ...e };
+            return t?.slices?.roundedCorners !== void 0 && delete t.slices.roundedCorners, { value: null, options: t };
           }
         }
       },
@@ -177,19 +166,14 @@ const u = [
           min: 0,
           max: 20,
           step: 1,
-          extraLabel: ({ options: e, theme: l }) => {
-            var r, a;
-            if (typeof ((r = l == null ? void 0 : l.itemSpecific) == null ? void 0 : r.padding) == "number")
-              return typeof ((a = e == null ? void 0 : e.slices) == null ? void 0 : a.padding) != "number" ? "auto" : "reset";
-          },
-          extraLabelHasClickAction: ({ options: e, theme: l }) => {
-            var r, a;
-            return !(typeof ((r = l == null ? void 0 : l.itemSpecific) == null ? void 0 : r.padding) != "number" || typeof ((a = e == null ? void 0 : e.slices) == null ? void 0 : a.padding) != "number");
+          extraLabel: ({ options: e, theme: t }) => {
+            if (typeof t?.itemSpecific?.padding == "number")
+              return typeof e?.slices?.padding != "number" ? "auto" : "reset";
           },
+          extraLabelHasClickAction: ({ options: e, theme: t }) => !(typeof t?.itemSpecific?.padding != "number" || typeof e?.slices?.padding != "number"),
           extraLabelClickAction: ({ options: e }) => {
-            var r;
-            const l = { ...e };
-            return ((r = l == null ? void 0 : l.slices) == null ? void 0 : r.padding) !== void 0 && delete l.slices.padding, { value: null, options: l };
+            const t = { ...e };
+            return t?.slices?.padding !== void 0 && delete t.slices.padding, { value: null, options: t };
           }
         }
       }
@@ -197,5 +181,5 @@ const u = [
   }
 ];
 export {
-  u as default
+  l as default
 };