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

package/components/edit-option-action-button-group/index.cjs

@@ -0,0 +1,44 @@
+/*! * 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";var d=Object.getPrototypeOf;var b=Reflect.get;var s=(c,t,u)=>b(d(c),u,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../luzmo-icons-BrtBl3E5.cjs");require("../index-CtHO6VyI.cjs");require("../index-CTPox3yS.cjs");require("../index-liTHhAef.cjs");const n=require("../property-Su1Q6aME.cjs"),m=require("../query-D5qWDopr.cjs"),g=require("../edit-option-base-DnrerC_T.cjs"),z="luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";var v=Object.defineProperty,i=(c,t,u,f)=>{for(var r=void 0,l=c.length-1,p;l>=0;l--)(p=c[l])&&(r=p(t,u,r)||r);return r&&v(t,u,r),r};const h={alignBottom:o.U,alignMiddle:o.P,alignTop:o.E,alignLeft:o.G,alignCenter:o.q,alignRight:o.O,ban:o.a1,borderSolid:o.b2,borderDashed:o.k2,borderDotted:o.S2,compress:o.Y,expand:o._,arrowsExpand:o.c1,arrowsHorizontal:o.J,arrowsVertical:o.j,italic:o.w1,bold:o.D1,underline:o.x1,rows:o.E1,columns:o.P1,table:o.r1},a=class a extends g.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}_handleEvent(){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.actionGroup.selected}}))}_generateButtonContents(t){return typeof t=="string"?n.x`${t}`:t.iconName||t.icon?n.x`
+        <luzmo-icon
+          slot="icon"
+          .icon=${t.icon??h[t.iconName]}
+          .label=${t.label??""}
+        ></luzmo-icon>
+        ${t.buttonText??""}
+      `:n.x`${t.buttonText??""}`}_generateActionButtons(){return Object.entries(this.values).map(([t,u])=>n.x`
+        <luzmo-action-button value=${t} ?disabled=${this.disabled}
+          >${this._generateButtonContents(u)}</luzmo-action-button
+        >
+      `)}renderController(){const t=this._generateActionButtons();return n.x`
+      <luzmo-action-group
+        compact
+        quiet
+        emphasized
+        .selects=${this.selects??"single"}
+        .size=${this.size}
+        .selected=${this.value||this.default||[]}
+        @change=${this._handleEvent}
+        .disabled=${this.disabled}
+      >
+        ${t}
+      </luzmo-action-group>
+    `}};a.styles=[...s(a,a,"styles"),n.r(z)];let e=a;i([n.n({type:Array})],e.prototype,"values");i([n.n({type:Boolean,reflect:!0})],e.prototype,"disabled");i([n.n({type:String})],e.prototype,"selects");i([n.n({type:Array})],e.prototype,"value");i([n.n({type:Array})],e.prototype,"default");i([m.e("luzmo-action-group")],e.prototype,"actionGroup");customElements.get("luzmo-edit-option-action-button-group")||customElements.define("luzmo-edit-option-action-button-group",e);exports.LuzmoEditOptionActionButtonGroup=e;

package/components/edit-option-action-button-group/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionActionButtonGroup } from './edit-option-action-button-group';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-action-button-group': LuzmoEditOptionActionButtonGroup;
+    }
+}
+export { LuzmoEditOptionActionButtonGroup } from './edit-option-action-button-group';

package/components/edit-option-action-button-group/index.js

@@ -0,0 +1,144 @@
+/*! * 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.
+ * */
+var z = Object.getPrototypeOf;
+var d = Reflect.get;
+var s = (r, o, e) => d(z(r), e, o);
+import { r as b, P as g, E as f, a as h, D as v, w as x, j as y, J as w, c as k, _ as $, Y as C, S as q, e as S, f as E, g as _, i as B, q as P, G as D, l as j, m as A, U as H } from "../luzmo-icons-CZEpXpvy.js";
+import "../index-EQldC-LR.js";
+import "../index-BGaxFTL4.js";
+import "../index-BC-nmKjU.js";
+import { r as N, x as n, n as c } from "../property-CD3dwBJC.js";
+import { e as T } from "../query-Ddbd72Um.js";
+import { L as U } from "../edit-option-base-oIvlolV9.js";
+const p = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.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-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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-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(r);
+  }
+};
+p();
+const M = "luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";
+var R = Object.defineProperty, u = (r, o, e, F) => {
+  for (var l = void 0, i = r.length - 1, m; i >= 0; i--)
+    (m = r[i]) && (l = m(o, e, l) || l);
+  return l && R(o, e, l), l;
+};
+const V = {
+  alignBottom: H,
+  alignMiddle: A,
+  alignTop: j,
+  alignLeft: D,
+  alignCenter: P,
+  alignRight: B,
+  ban: _,
+  borderSolid: E,
+  borderDashed: S,
+  borderDotted: q,
+  compress: C,
+  expand: $,
+  arrowsExpand: k,
+  arrowsHorizontal: w,
+  arrowsVertical: y,
+  italic: x,
+  bold: v,
+  underline: h,
+  rows: f,
+  columns: g,
+  table: b
+}, a = class a extends U {
+  constructor() {
+    super(...arguments), this.values = {}, this.disabled = !1;
+  }
+  _handleEvent() {
+    this.dispatchEvent(
+      new CustomEvent("option-changed", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          value: this.actionGroup.selected
+        }
+      })
+    );
+  }
+  _generateButtonContents(o) {
+    return typeof o == "string" ? n`${o}` : o.iconName || o.icon ? n`
+        <luzmo-icon
+          slot="icon"
+          .icon=${o.icon ?? V[o.iconName]}
+          .label=${o.label ?? ""}
+        ></luzmo-icon>
+        ${o.buttonText ?? ""}
+      ` : n`${o.buttonText ?? ""}`;
+  }
+  _generateActionButtons() {
+    return Object.entries(this.values).map(
+      ([o, e]) => n`
+        <luzmo-action-button value=${o} ?disabled=${this.disabled}
+          >${this._generateButtonContents(e)}</luzmo-action-button
+        >
+      `
+    );
+  }
+  renderController() {
+    const o = this._generateActionButtons();
+    return n`
+      <luzmo-action-group
+        compact
+        quiet
+        emphasized
+        .selects=${this.selects ?? "single"}
+        .size=${this.size}
+        .selected=${this.value || this.default || []}
+        @change=${this._handleEvent}
+        .disabled=${this.disabled}
+      >
+        ${o}
+      </luzmo-action-group>
+    `;
+  }
+};
+a.styles = [...s(a, a, "styles"), N(M)];
+let t = a;
+u([
+  c({ type: Array })
+], t.prototype, "values");
+u([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+u([
+  c({ type: String })
+], t.prototype, "selects");
+u([
+  c({ type: Array })
+], t.prototype, "value");
+u([
+  c({ type: Array })
+], t.prototype, "default");
+u([
+  T("luzmo-action-group")
+], t.prototype, "actionGroup");
+customElements.get("luzmo-edit-option-action-button-group") || customElements.define(
+  "luzmo-edit-option-action-button-group",
+  t
+);
+export {
+  t as LuzmoEditOptionActionButtonGroup
+};

package/components/edit-option-base/edit-option-base.d.ts

@@ -0,0 +1,22 @@
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/tooltip';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import { CSSResultArray, TemplateResult } from 'lit';
+declare const LuzmoEditOptionBase_base: typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+export declare abstract class LuzmoEditOptionBase extends LuzmoEditOptionBase_base {
+    static styles: CSSResultArray;
+    disabled: boolean;
+    label: string;
+    tooltip: string;
+    extraLabel: string;
+    extraLabelHasClickAction: boolean;
+    extraLabelClickAction: any;
+    extraLabelTooltip: string;
+    protected abstract renderController(): TemplateResult;
+    protected handleExtraLabelClick(event: MouseEvent): void;
+    render(): TemplateResult<1>;
+}
+export {};

package/components/edit-option-base-DnrerC_T.cjs

@@ -0,0 +1,53 @@
+/*! * 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";require("./index-C_3Ak4MQ.cjs");require("./index-CayjvyyX.cjs");const t=require("./property-Su1Q6aME.cjs"),c=require("./sized-mixin-PyCYpyQq-sKzDjc75.cjs"),d=":host{font-family:var(--luzmo-edit-option-component-font-family, var(--luzmo-font-family))}.luzmo-edit-option{height:var(--luzmo-edit-option-component-height, var(--edit-option-component-height));width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--luzmo-spacing-3);color:var(--luzmo-font-color);font-size:var(--luzmo-font-size-s)}.control-container{display:flex;align-items:center;gap:var(--luzmo-edit-option-control-container-gap, var(--edit-option-control-container-gap));justify-content:end;flex:1}.extra-label{padding-left:var(--luzmo-edit-option-extra-label-padding-left, var(--edit-option-extra-label-padding-left));padding-right:var(--luzmo-edit-option-extra-label-padding-right, var(--edit-option-extra-label-padding-right));font-size:var(--luzmo-edit-option-extra-label-font-size, var(--edit-option-extra-label-font-size))}.extra-link{text-align:right;text-decoration:underline;cursor:pointer}.extra-link:hover{color:var(--luzmo-font-color-hover)}.extra-link.disabled{opacity:.65;cursor:not-allowed}.extra-link.disabled:hover{color:var(--luzmo-font-color-disabled)}:host{--edit-option-component-height: var(--luzmo-component-height);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-s)}:host([size=s]){--edit-option-component-height: var(--luzmo-component-height-s);--edit-option-extra-label-padding-right: var(--luzmo-spacing-3);--edit-option-extra-label-padding-left: var(--luzmo-spacing-4);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-xs)}:host([size=l]){--edit-option-component-height: var(--luzmo-component-height-l);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-3);--edit-option-extra-label-font-size: var(--luzmo-font-size)}:host([size=xl]){--edit-option-component-height: var(--luzmo-component-height-xl);--edit-option-extra-label-padding-right: var(--luzmo-spacing-5);--edit-option-extra-label-padding-left: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--edit-option-control-container-gap: var(--luzmo-spacing-4);--edit-option-extra-label-font-size: var(--luzmo-font-size-l)}:host{display:block}";var u=Object.defineProperty,o=(s,a,l,h)=>{for(var i=void 0,n=s.length-1,p;n>=0;n--)(p=s[n])&&(i=p(a,l,i)||i);return i&&u(a,l,i),i};const r=class r extends c.m(t.I,{defaultSize:"s",validSizes:["s","m","l","xl"]}){constructor(){super(...arguments),this.disabled=!1,this.label="",this.tooltip="",this.extraLabel="",this.extraLabelHasClickAction=!1,this.extraLabelTooltip=""}handleExtraLabelClick(a){if(this.extraLabelHasClickAction&&typeof this.extraLabelClickAction=="function"){const{value:l}=this.extraLabelClickAction();this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:l}}))}a.preventDefault(),this.dispatchEvent(new CustomEvent("extraLabelClick",{bubbles:!0,composed:!0}))}render(){return t.x`
+      <div class="luzmo-edit-option">
+        ${this.label?t.x`
+              <luzmo-field-label
+                .size=${this.size}
+                for="luzmo-edit-option-control"
+                side-aligned="start"
+              >
+                ${this.label}
+                ${this.tooltip?t.x`
+                      *<luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        ${this.tooltip}
+                      </luzmo-tooltip>
+                    `:t.E}
+              </luzmo-field-label>
+            `:t.E}
+
+        <div class="control-container">
+          ${this.extraLabel?t.x`
+                <div
+                  class="extra-label ${this.extraLabelHasClickAction?"extra-link":""}"
+                  @click=${this.handleExtraLabelClick}
+                >
+                  <span class=""> ${this.extraLabel} </span>
+                </div>
+              `:t.E}
+          ${this.renderController()}
+        </div>
+      </div>
+    `}};r.styles=[t.r(d)];let e=r;o([t.n({type:Boolean,reflect:!0})],e.prototype,"disabled");o([t.n({type:String,reflect:!0})],e.prototype,"label");o([t.n({type:String,reflect:!0})],e.prototype,"tooltip");o([t.n({type:String,attribute:"extra-label"})],e.prototype,"extraLabel");o([t.n({type:Boolean,attribute:"extra-label-has-click-action"})],e.prototype,"extraLabelHasClickAction");o([t.n()],e.prototype,"extraLabelClickAction");o([t.n({type:String,attribute:"extra-label-tooltip"})],e.prototype,"extraLabelTooltip");exports.LuzmoEditOptionBase=e;

package/components/edit-option-base-oIvlolV9.js

@@ -0,0 +1,120 @@
+/*! * 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 "./index-B5VaT0lQ.js";
+import "./index-DskAouD-.js";
+import { I as h, r as m, E as p, x as n, n as e } from "./property-CD3dwBJC.js";
+import { m as u } from "./sized-mixin-PyCYpyQq-B40Ek2UB.js";
+const g = ":host{font-family:var(--luzmo-edit-option-component-font-family, var(--luzmo-font-family))}.luzmo-edit-option{height:var(--luzmo-edit-option-component-height, var(--edit-option-component-height));width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--luzmo-spacing-3);color:var(--luzmo-font-color);font-size:var(--luzmo-font-size-s)}.control-container{display:flex;align-items:center;gap:var(--luzmo-edit-option-control-container-gap, var(--edit-option-control-container-gap));justify-content:end;flex:1}.extra-label{padding-left:var(--luzmo-edit-option-extra-label-padding-left, var(--edit-option-extra-label-padding-left));padding-right:var(--luzmo-edit-option-extra-label-padding-right, var(--edit-option-extra-label-padding-right));font-size:var(--luzmo-edit-option-extra-label-font-size, var(--edit-option-extra-label-font-size))}.extra-link{text-align:right;text-decoration:underline;cursor:pointer}.extra-link:hover{color:var(--luzmo-font-color-hover)}.extra-link.disabled{opacity:.65;cursor:not-allowed}.extra-link.disabled:hover{color:var(--luzmo-font-color-disabled)}:host{--edit-option-component-height: var(--luzmo-component-height);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-s)}:host([size=s]){--edit-option-component-height: var(--luzmo-component-height-s);--edit-option-extra-label-padding-right: var(--luzmo-spacing-3);--edit-option-extra-label-padding-left: var(--luzmo-spacing-4);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-xs)}:host([size=l]){--edit-option-component-height: var(--luzmo-component-height-l);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-3);--edit-option-extra-label-font-size: var(--luzmo-font-size)}:host([size=xl]){--edit-option-component-height: var(--luzmo-component-height-xl);--edit-option-extra-label-padding-right: var(--luzmo-spacing-5);--edit-option-extra-label-padding-left: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--edit-option-control-container-gap: var(--luzmo-spacing-4);--edit-option-extra-label-font-size: var(--luzmo-font-size-l)}:host{display:block}";
+var b = Object.defineProperty, o = (d, a, l, z) => {
+  for (var i = void 0, r = d.length - 1, c; r >= 0; r--)
+    (c = d[r]) && (i = c(a, l, i) || i);
+  return i && b(a, l, i), i;
+};
+const s = class s extends u(h, {
+  defaultSize: "s",
+  validSizes: ["s", "m", "l", "xl"]
+}) {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.label = "", this.tooltip = "", this.extraLabel = "", this.extraLabelHasClickAction = !1, this.extraLabelTooltip = "";
+  }
+  handleExtraLabelClick(a) {
+    if (this.extraLabelHasClickAction && typeof this.extraLabelClickAction == "function") {
+      const { value: l } = this.extraLabelClickAction();
+      this.dispatchEvent(
+        new CustomEvent("option-changed", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            value: l
+          }
+        })
+      );
+    }
+    a.preventDefault(), this.dispatchEvent(
+      new CustomEvent("extraLabelClick", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return n`
+      <div class="luzmo-edit-option">
+        ${this.label ? n`
+              <luzmo-field-label
+                .size=${this.size}
+                for="luzmo-edit-option-control"
+                side-aligned="start"
+              >
+                ${this.label}
+                ${this.tooltip ? n`
+                      *<luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        ${this.tooltip}
+                      </luzmo-tooltip>
+                    ` : p}
+              </luzmo-field-label>
+            ` : p}
+
+        <div class="control-container">
+          ${this.extraLabel ? n`
+                <div
+                  class="extra-label ${this.extraLabelHasClickAction ? "extra-link" : ""}"
+                  @click=${this.handleExtraLabelClick}
+                >
+                  <span class=""> ${this.extraLabel} </span>
+                </div>
+              ` : p}
+          ${this.renderController()}
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [m(g)];
+let t = s;
+o([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+o([
+  e({ type: String, reflect: !0 })
+], t.prototype, "label");
+o([
+  e({ type: String, reflect: !0 })
+], t.prototype, "tooltip");
+o([
+  e({ type: String, attribute: "extra-label" })
+], t.prototype, "extraLabel");
+o([
+  e({ type: Boolean, attribute: "extra-label-has-click-action" })
+], t.prototype, "extraLabelHasClickAction");
+o([
+  e()
+], t.prototype, "extraLabelClickAction");
+o([
+  e({ type: String, attribute: "extra-label-tooltip" })
+], t.prototype, "extraLabelTooltip");
+export {
+  t as L
+};

package/components/edit-option-color-picker/edit-option-color-picker.d.ts

@@ -0,0 +1,23 @@
+import { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/color-picker';
+import '@luzmo/lucero/menu';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionColorPicker extends LuzmoEditOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    value: string;
+    disabled: boolean;
+    noAlphaChannel: boolean;
+    swatches: string[];
+    rounding: 'full' | 'light' | 'none';
+    shape: 'circle' | 'rectangle';
+    /**
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     * @attr
+     */
+    placement: Placement;
+    debounce: number;
+    private colorPicker;
+    debounceTimeout: any;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}