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

package/lib/index-BDXFsKUM.cjs

@@ -0,0 +1,146 @@
+/*! * 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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./decompose-numeric-format-B3rVVHpO.cjs"),s=require("./if-defined-V7yEJWI3.cjs");require("./index-DGz6jCKo.cjs");require("./index-CrWoFMZ3.cjs");require("./index-CvX-HLY1.cjs");require("./index-CfEm5P0J.cjs");require("./index-Dj7PF4Q9.cjs");require("./index-0314DjEl.cjs");const _=require("./index-Bo1DpZ-1.cjs"),z=require("./directive-helpers-BSB0tfc9.cjs"),b=require("./index-kJR406YZ.cjs"),F=":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-numeric-gap, var(--display-settings-numeric-gap))}.duration-angle-down-icon{margin-inline-start:var(--luzmo-numeric-duration-levels-dropdown-icon-margin-inline-start, var(--numeric-duration-levels-dropdown-icon-margin-inline-start))}:host{--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-2 )}:host([size=s]){--display-settings-numeric-gap: var(--luzmo-spacing-3);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-1 )}:host([size=l]){--display-settings-numeric-gap: var(--luzmo-spacing-4);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-3 )}:host([size=xl]){--display-settings-numeric-gap: var(--luzmo-spacing-5);--numeric-duration-levels-dropdown-icon-margin-inline-start: var( --luzmo-spacing-4 )}",S={sum:"Sum",cumulativesum:"Cumulative sum",average:"Average",weightedaverage:"Weighted average",median:"Median",count:"Count",distinctcount:"Distinct count",min:"Minimum",max:"Maximum",stddev:"Standard deviation",rate:"Rate"},v={general:"123",percentage:"%",scientific:"SI"},f={time:"Time",short:"Short",long:"Long"},y={Auto:{auto:!0},"1,000.00":{auto:!1,thousandSeparator:",",decimalSeparator:"."},"1.000,00":{auto:!1,thousandSeparator:".",decimalSeparator:","},"1000.00":{auto:!1,decimalSeparator:"."},"1000,00":{auto:!1,decimalSeparator:","}},A={levels:[{level:1,label:"years"},{level:2,label:"quarters"},{level:3,label:"months"},{level:4,label:"weeks"},{level:5,label:"days"},{level:6,label:"hours"},{level:7,label:"minutes"},{level:8,label:"seconds"},{level:9,label:"milliseconds"}]};var L=Object.defineProperty,r=(h,t,e,i)=>{for(var n=void 0,a=h.length-1,l;a>=0;a--)(l=h[a])&&(n=l(t,e,n)||n);return n&&L(t,e,n),n};class o extends s.SizedMixin(s.LuzmoElement,{validSizes:Object.values(s.ElementSizes)}){constructor(){super(...arguments),this.slotContent={},this.measureColumns=[],this._durationLevels=[],this._renderDurationLevelMenu=!1,this._sendEvent=()=>{const t={...this.slotContent};t.format=this._format,t.aggregationFunc=this._aggregationFunc,this._aggregationWeightColumn?t.aggregationWeight={...this._aggregationWeightColumn}:this._aggregationFunc==="rate"&&(t.aggregationFunc="average"),this._displayMode==="duration"?(t.duration=t.duration??{},t.duration.format=this._durationFormat,t.duration.levels=this._durationLevels):delete t.duration,this.dispatchEvent(new CustomEvent("slot-content-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:t}}))}}static get styles(){return[s.r(F)]}_parseSavedNumericFormatSettings(){var t,e,i,n,a,l,m,d,c,g;if(this._displayMode=((t=this.slotContent)==null?void 0:t.subtype)==="duration"?((n=(i=(e=this.slotContent)==null?void 0:e.duration)==null?void 0:i.levels)==null?void 0:n.length)===1?"numeric":"duration":"numeric",this._durationFormat=((l=(a=this.slotContent)==null?void 0:a.duration)==null?void 0:l.format)??"short",this._durationLevels=((d=(m=this.slotContent)==null?void 0:m.duration)==null?void 0:d.levels)??[1],this._displayMode==="duration")this._precision=2,this._commaDecimals=!1,this._thousandSeparator=!1;else{this._format=((c=this.slotContent)==null?void 0:c.format)??".0f";const u=p.decomposeNumericFormat(this._format??".0f");this._isAuto=((g=u.typeFormat)==null?void 0:g.includes("a"))??!1,["%","a%","y","ay"].includes(u.typeFormat)?this._displayAs="percentage":["s","as","w","aw"].includes(u.typeFormat)?this._displayAs="scientific":this._displayAs="general",this._precision=u.precision?Number.parseInt(u.precision.replace(".",""),10):this._displayAs==="scientific"?1:0,this._commaDecimals=["z","az","y","ay","w","aw"].includes(u.typeFormat),this._thousandSeparator=u.comma===",",this._isAuto?this._numericFormatGroup="Auto":this._commaDecimals&&this._thousandSeparator?this._numericFormatGroup="1.000,00":!this._commaDecimals&&this._thousandSeparator?this._numericFormatGroup="1,000.00":this._commaDecimals&&!this._thousandSeparator?this._numericFormatGroup="1000,00":!this._commaDecimals&&!this._thousandSeparator&&(this._numericFormatGroup="1000.00")}}_setNumericDisplayAs(){var t,e;this._displayAs=((e=(t=this._displayAsElement)==null?void 0:t.selected)==null?void 0:e[0])??"general",this._displayAs==="scientific"&&(this._precision=Math.max(this._precision??0,1),this._thousandSeparator=!1),this._setNumericFormat(),this._sendEvent(),this.requestUpdate()}_setNumericSeparators(t){const e=y[(t==null?void 0:t.detail)??"Auto"];this._thousandSeparator=[",","."].includes((e==null?void 0:e.thousandSeparator)??""),this._commaDecimals=(e==null?void 0:e.decimalSeparator)===",",this._isAuto=e==null?void 0:e.auto,this._setNumericFormat(),this._sendEvent()}_setPrecision(){this._precision=this._precisionElement.value,this._setNumericFormat(),this._sendEvent()}_setNumericFormat(){var i;let t="f";const e=this.slotContent.subtype==="duration"?this._durationLevels&&((i=this._durationLevels)==null?void 0:i.length)===1?"numeric":"duration":"numeric";this._maxDurationLevel=Math.min(...this._durationLevels),e==="duration"?(!["time","short","long"].includes(this._durationFormat??"")||this._maxDurationLevel<6&&this._durationFormat==="time")&&(this._durationFormat="short"):(this._displayAs==="general"&&this._commaDecimals?t="z":this._displayAs==="percentage"&&this._commaDecimals?t="y":this._displayAs==="scientific"&&this._commaDecimals?t="w":this._displayAs==="percentage"?t="%":this._displayAs==="scientific"&&(t="s"),this._format=(this._thousandSeparator||this._isAuto?",":"")+"."+this._precision+(this._isAuto?"a":"")+t)}_setAggregationFunc(){const t=this._aggregationFunc,e=this.slotContent.format;if(this._aggregationElement.value!==t){if(this._aggregationFunc=this._aggregationElement.value,t==="rate"){const i=p.decomposeNumericFormat(e),n=["%","y","a%","ay"].includes(i.typeFormat);this.slotContent.subtype==="currency"&&n&&this._setNumericDisplayAs()}this._sendEvent(),(this._aggregationFunc==="rate"||t==="rate")&&this.requestUpdate()}}_setAggregationWeight(){const t=this._aggregationWeightElement.value;if(t==="none")this._aggregationWeightColumn=void 0;else{const e=this.measureColumns.find(i=>i.columnId===t);this._aggregationWeightColumn={column:e==null?void 0:e.columnId,set:e==null?void 0:e.datasetId,columnSubType:e==null?void 0:e.subtype}}this._sendEvent()}_setDurationLevels(){const t=this._durationLevels,e=this._durationLevelsElement.value.split(",").filter(i=>i!=="").map(i=>Number.parseInt(i,10));this._durationLevels=((e==null?void 0:e.length)??0)>=1?e:t,this._maxDurationLevel=Math.min(...this._durationLevels),this._fillTimeDurationLevels(),this._setNumericFormat(),this._sendEvent(),this.requestUpdate()}_setDurationFormat(){var t,e;this._durationFormat=(e=(t=this._durationFormatElement)==null?void 0:t.selected)==null?void 0:e[0],this._fillTimeDurationLevels(),this._setNumericFormat(),this._sendEvent(),this.requestUpdate()}_fillTimeDurationLevels(){if(this._durationFormat==="time"){const t=this._durationLevels.sort().at(-1);if([7,8,9].includes(t)){const e={lev7:[6],lev8:[6,7],lev9:[6,7,8]};for(const i of e["lev"+t])this._durationLevels.includes(i)||this._durationLevels.push(i);this._durationLevels=[...this._durationLevels].sort()}}}willUpdate(t){var e,i,n;t.has("slotContent")&&(this._parseSavedNumericFormatSettings(),this._aggregationFunc=((e=this.slotContent)==null?void 0:e.aggregationFunc)??((i=this.slotContent)==null?void 0:i.type)==="numeric"?"sum":"count",this._aggregationWeightColumn=(n=this.slotContent)==null?void 0:n.aggregationWeight)}firstUpdated(t){var e;(e=this.slotContent)!=null&&e.duration&&this._durationLevelsOverlay.addEventListener("slottable-request",i=>{this._renderDurationLevelMenu=i.data!==b.removeSlottableRequest})}_renderDurationLevelsSettings(){const t=A.levels.map(e=>{let i=!1;return this._durationFormat==="time"&&e.level>=6&&this._durationLevels.includes(e.level)&&e.level!==Math.max(...this._durationLevels)&&(i=!0),this._durationLevels.length===1&&this._durationLevels.includes(e.level)&&(i=!0),s.x`<luzmo-menu-item
+        value=${e.level}
+        ?selected=${this._durationLevels.includes(e.level)}
+        ?disabled=${i}
+      >
+        ${e.label}
+      </luzmo-menu-item>`});return s.x` <div class="setting">
+      <luzmo-field-label for="duration-levels">
+        Duration levels
+      </luzmo-field-label>
+      <luzmo-action-button id="trigger" size=${this.size}>
+        ${this._durationLevels.length}
+        ${this._durationLevels.length===1?"level":"levels"} active
+        <span class="duration-angle-down-icon">
+          ${_.O2(_.T)}
+        </span>
+      </luzmo-action-button>
+      <luzmo-overlay
+        id="duration-levels-overlay"
+        trigger="trigger@click"
+        type="auto"
+        placement="bottom-start"
+        type="page"
+      >
+        <luzmo-popover style="position: relative">
+          ${this._renderDurationLevelMenu?s.x` <luzmo-menu
+                id="duration-levels"
+                size=${this.size}
+                selects="multiple"
+                .value=${this._durationLevels.join(",")}
+                @change=${this._setDurationLevels}
+              >
+                ${t}
+              </luzmo-menu>`:""}
+        </luzmo-popover>
+      </luzmo-overlay>
+    </div>`}_renderDurationFormatSettings(){const t=Object.keys(f).map(e=>e==="time"&&(this._maxDurationLevel??1)<6?"":s.x`<luzmo-action-button value=${e}>
+        ${f[e]}
+      </luzmo-action-button>`);return s.x` <div class="setting">
+      <luzmo-field-label for="duration-format">Format</luzmo-field-label>
+      <luzmo-action-group
+        emphasized
+        id="duration-format"
+        size=${this.size}
+        compact=""
+        .selected=${[this._durationFormat??"short"]}
+        selects="single"
+        @change=${this._setDurationFormat}
+      >
+        ${t}
+      </luzmo-action-group>
+    </div>`}_renderNumericDisplayAsSettings(){const t=Object.keys(v).map(e=>s.x`<luzmo-action-button value=${e}
+          >${v[e]}</luzmo-action-button
+        >`);return s.x`<div class="setting">
+      <luzmo-field-label for="display-as">Display as</luzmo-field-label>
+      <luzmo-action-group
+        emphasized
+        id="display-as"
+        size=${this.size}
+        compact=""
+        .selected=${[this._displayAs]}
+        selects="single"
+        @change=${this._setNumericDisplayAs}
+      >
+        ${t}
+      </luzmo-action-group>
+    </div>`}_renderNumericFormatSettings(){const t=Object.keys(y).map(e=>s.x`<luzmo-menu-item value=${e}>${e}</luzmo-menu-item>`);return s.x` <div class="setting">
+        <luzmo-field-label for="format">Format</luzmo-field-label>
+        <luzmo-picker
+          id="format"
+          size=${this.size}
+          variant="highlight"
+          value=${this._numericFormatGroup??"Auto"}
+          @change=${this._setNumericSeparators}
+        >
+          ${t}
+        </luzmo-picker>
+      </div>
+      <div class="setting">
+        <luzmo-field-label for="precision" id="precision-label"
+          >${this._displayAs==="scientific"?"Precision":"Decimals"}</luzmo-field-label
+        >
+        <luzmo-number-field
+          id="precision"
+          min=${this._displayAs==="scientific"?1:0}
+          max="22"
+          size=${this.size}
+          value=${this._precision??(this._displayAs==="scientific"?1:0)}
+          @change=${this._setPrecision}
+        ></luzmo-number-field>
+      </div>`}_renderAggregationSettings(){var i,n;const t=Object.entries(S).map(([a,l])=>s.x`<luzmo-menu-item value=${a}>${l}</luzmo-menu-item>`),e=[s.x`<luzmo-menu-item value="none">No weight</luzmo-menu-item>`,...this.measureColumns.map(a=>{var m,d,c;const l=((m=a==null?void 0:a.label)==null?void 0:m[this.language??"en"])??((c=a==null?void 0:a.label)==null?void 0:c[(d=Object.keys(a==null?void 0:a.label))==null?void 0:d[0]])??"Untitled";return s.x`<luzmo-menu-item value=${a.id}>
+          ${l}
+        </luzmo-menu-item>`})];return s.x`<div class="settings-row">
+      <div class="setting">
+        <luzmo-field-label for="aggregation">Aggregation</luzmo-field-label>
+        <luzmo-picker
+          id="aggregation"
+          size=${this.size}
+          variant="highlight"
+          value=${this._aggregationFunc??(((i=this.slotContent)==null?void 0:i.type)==="numeric"?"sum":"count")}
+          @change=${this._setAggregationFunc}
+        >
+          ${t}
+        </luzmo-picker>
+      </div>
+      ${this._aggregationFunc==="rate"?s.x`<div class="setting">
+            <luzmo-field-label for="weighting-column">
+              Denominator
+            </luzmo-field-label>
+            <luzmo-picker
+              id="weighting-column"
+              size=${this.size}
+              variant="highlight"
+              value=${((n=this._aggregationWeightColumn)==null?void 0:n.column)??"none"}
+              @change=${this._setAggregationWeight}
+            >
+              ${e}
+            </luzmo-picker>
+          </div>`:""}
+    </div>`}render(){var t;return s.x`<div class="settings-container">
+      <div class="settings-row">
+      ${this._displayMode==="duration"?this._renderDurationLevelsSettings():this._renderNumericDisplayAsSettings()}
+      ${((t=this._durationLevels)==null?void 0:t.length)>1?this._renderDurationFormatSettings():this._renderNumericFormatSettings()}
+      </div>
+      ${this._renderAggregationSettings()}
+      </div>
+    </div>`}}r([s.n({type:String,reflect:!0})],o.prototype,"language");r([s.n({type:Object,reflect:!0})],o.prototype,"slotContent");r([s.n({type:Array,reflect:!1})],o.prototype,"measureColumns");r([s.e("#display-as")],o.prototype,"_displayAsElement");r([s.e("#precision")],o.prototype,"_precisionElement");r([s.e("#aggregation")],o.prototype,"_aggregationElement");r([s.e("#weighting-column")],o.prototype,"_aggregationWeightElement");r([s.e("#duration-levels")],o.prototype,"_durationLevelsElement");r([s.e("#duration-format")],o.prototype,"_durationFormatElement");r([s.e("#duration-levels-overlay")],o.prototype,"_durationLevelsOverlay");r([z.r()],o.prototype,"_renderDurationLevelMenu");customElements.get("luzmo-display-settings-numeric")||customElements.define("luzmo-display-settings-numeric",o);exports.LuzmoDisplaySettingsNumeric=o;

package/lib/index-Bd4cKS9O.js

@@ -0,0 +1,155 @@
+/*! * 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 { O as d, d as s } from "./index-DdtjeKYI.js";
+import { S as v, r as h, x as g, n as r } from "./if-defined-BbzmSG-O.js";
+import { B as m } from "./button-base-CtfPWS-P.js";
+const z = ':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 f = Object.defineProperty, p = Object.getOwnPropertyDescriptor, c = (i, o, t, n) => {
+  for (var e = n > 1 ? void 0 : n ? p(o, t) : o, u = i.length - 1, l; u >= 0; u--)
+    (l = i[u]) && (e = (n ? l(o, t, e) : l(e)) || e);
+  return n && e && f(o, t, e), e;
+};
+const k = 300;
+let b;
+class a extends v(m, {
+  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, h(z)];
+  }
+  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"));
+  }
+  /**
+   * @private
+   */
+  get itemText() {
+    return (this.textContent || /* c8 ignore next */
+    "").trim();
+  }
+  handlePointerdownHoldAffordance(o) {
+    o.button === 0 && (this.addEventListener("pointerup", this.handlePointerupHoldAffordance), this.addEventListener("pointercancel", this.handlePointerupHoldAffordance), b = setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            source: "pointer"
+          }
+        })
+      );
+    }, k));
+  }
+  handlePointerupHoldAffordance() {
+    clearTimeout(b), this.removeEventListener("pointerup", this.handlePointerupHoldAffordance), this.removeEventListener(
+      "pointercancel",
+      this.handlePointerupHoldAffordance
+    );
+  }
+  /**
+   * @private
+   */
+  handleKeydown(o) {
+    if (!this.holdAffordance)
+      return super.handleKeydown(o);
+    const { code: t, altKey: n } = o;
+    (t === "Space" || n && 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: n } = o;
+    (t === "Space" || n && 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(g`
+        <div
+          class="hold-affordance corner-triangle-${this.size}"
+        >
+          ${d(s)}
+        </div>
+      `), o;
+  }
+  updated(o) {
+    super.updated(o);
+    const t = this.role === "button", n = t && (this.selected || this.toggles) && !(this.hasAttribute("aria-haspopup") && this.hasAttribute("aria-expanded"));
+    (o.has("selected") || o.has("role")) && (n ? 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([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "emphasized", 2);
+c([
+  r({ type: Boolean, reflect: !0, attribute: "hold-affordance" })
+], a.prototype, "holdAffordance", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "quiet", 2);
+c([
+  r({ reflect: !0 })
+], a.prototype, "role", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "selected", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "toggles", 2);
+c([
+  r({ reflect: !0, attribute: "static-color" })
+], a.prototype, "staticColor", 2);
+c([
+  r({ type: String })
+], a.prototype, "value", 1);
+customElements.get("luzmo-action-button") || customElements.define("luzmo-action-button", a);
+export {
+  a as L
+};

package/lib/index-BmAD29P2.js

@@ -0,0 +1,106 @@
+/*! * 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 { S as d, a as g, L as p, r as c, o as m, x as u, n as r } from "./if-defined-BbzmSG-O.js";
+import "./index-Bd4cKS9O.js";
+import "./index-CtEJZdT0.js";
+import "./index-C9xEN5Ji.js";
+import { C as h, h as v } from "./index-DdtjeKYI.js";
+import { r as z } from "./directive-helpers-eY1rHtyn.js";
+const b = ":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-grand-totals-gap, var(--display-settings-grand-totals-gap))}:host{--display-settings-grand-totals-gap: var(--luzmo-spacing-3)}:host([size=s]){--display-settings-grand-totals-gap: var(--luzmo-spacing-3)}:host([size=l]){--display-settings-grand-totals-gap: var(--luzmo-spacing-4)}:host([size=xl]){--display-settings-grand-totals-gap: var(--luzmo-spacing-5)}";
+var f = Object.defineProperty, o = (n, t, e, y) => {
+  for (var s = void 0, l = n.length - 1, i; l >= 0; l--)
+    (i = n[l]) && (s = i(t, e, s) || s);
+  return s && f(t, e, s), s;
+};
+class a extends d(p, {
+  validSizes: Object.values(g)
+}) {
+  constructor() {
+    super(...arguments), this.slotContent = {};
+  }
+  static get styles() {
+    return [c(b)];
+  }
+  willUpdate(t) {
+    var e;
+    t.has("slotContent") && (this._enabled = ((e = this.slotContent) == null ? void 0 : e.grandTotals) ?? !1);
+  }
+  toggleGrandTotals() {
+    this._enabled = !this._enabled, this.sendEvent();
+  }
+  sendEvent() {
+    const t = {
+      enabled: !!this._enabled
+    };
+    this.dispatchEvent(
+      new CustomEvent("slot-content-changed", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          slotContent: {
+            ...this.slotContent,
+            grandTotals: t
+          }
+        }
+      })
+    );
+  }
+  render() {
+    return u`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-field-label for="grand-totals">Grand totals</luzmo-field-label>
+          <luzmo-action-button
+            id="grand-totals"
+            toggles
+            emphasized
+            .size=${this.size}
+            ?selected=${this._enabled}
+            class=${m(this._enabled ? "active" : "inactive")}
+            @click=${this.toggleGrandTotals}
+          >
+            <luzmo-icon
+              slot="icon"
+              .icon=${this._enabled ? h : v}
+            ></luzmo-icon>
+            ${this._enabled ? "Enabled" : "Disabled"}
+          </luzmo-action-button>
+        </div>
+      </div>
+    </div>`;
+  }
+}
+o([
+  r({ type: String, reflect: !0 })
+], a.prototype, "language");
+o([
+  r()
+], a.prototype, "slotContent");
+o([
+  z()
+], a.prototype, "_enabled");
+customElements.get("luzmo-display-settings-grand-totals") || customElements.define(
+  "luzmo-display-settings-grand-totals",
+  a
+);
+export {
+  a as LuzmoDisplaySettingsGrandTotals
+};