@luzmo/analytics-components-kit 1.0.1-alpha.96 → 1.0.1-alpha.98

package/components/edit-option/helpers/control-templates/color-palette-picker-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const colorPalettePickerMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/color-picker-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const colorPickerMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/color-range-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const colorRangeMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/multi-language-field-template.d.ts

@@ -0,0 +1,8 @@
+import { ControlMarkupArgs } from '../control-markup';
+export interface MultiLanguageFieldArguments {
+    label?: string;
+    value?: Record<string, string>;
+    language?: string;
+    placeholder?: string;
+}
+export declare const multiLanguageFieldMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/number-field-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const numberFieldMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/picker-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const pickerMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/position-picker-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const positionPickerMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/positions-number-field-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const positionsNumberFieldMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/radio-button-group.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const radioButtonGroupMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/slider-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const sliderMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/switch-template.d.ts

@@ -0,0 +1,2 @@
+import { ControlMarkupArgs } from '../control-markup';
+export declare const switchMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/control-templates/text-field-template.d.ts

@@ -0,0 +1,7 @@
+import { ControlMarkupArgs } from '../control-markup';
+export interface TextFieldArguments {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+}
+export declare const textFieldMarkup: (args: ControlMarkupArgs) => import("lit-html").TemplateResult<1>;

package/components/edit-option/helpers/generate-callback.d.ts

@@ -0,0 +1 @@
+export declare const generateCallback: (args: any) => (e: CustomEvent) => any;

package/components/edit-option/helpers/get-control-by-key.d.ts

@@ -0,0 +1 @@
+export declare const getControlByKey: (key: string, config: any[], full?: boolean) => any;

package/components/edit-option/helpers/get-default-value.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultValue: (args: any) => any;

package/components/edit-option/helpers/get-enum-values.d.ts

@@ -0,0 +1 @@
+export declare const getEnumValues: (args: any) => any;

package/components/edit-option/helpers/get-extra-label-values.d.ts

@@ -0,0 +1,7 @@
+import { ControlMarkupArgs } from './control-markup';
+export declare const getExtraLabelValues: (args: ControlMarkupArgs) => {
+    extraLabel: any;
+    extraLabelTooltip: any;
+    extraLabelHasClickAction: any;
+    extraLabelClickAction: () => any;
+};

package/components/edit-option/helpers/get-value-by-key.d.ts

@@ -0,0 +1 @@
+export declare const getValueByKey: (args: any, key: string) => any;

package/components/edit-option/index.cjs

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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 t=require("../index-CQ9ck-BO.cjs");exports.LuzmoEditOption=t.LuzmoEditOption;

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

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

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

@@ -0,0 +1,27 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/action-group';
+import '@luzmo/lucero/icon';
+import { TemplateResult } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export type ButtonContent = {
+    icon?: {
+        icon: [number, number, string | string[]];
+        name: string;
+    };
+    iconName?: string;
+    label?: string;
+    buttonText?: string;
+};
+export declare class LuzmoEditOptionActionButtonGroup extends LuzmoEditOptionBase {
+    static styles: (import("lit").CSSResultOrNative | import("lit").CSSResultArray)[];
+    values: Record<string, ButtonContent>;
+    disabled: boolean;
+    selects: 'single' | 'multiple' | undefined;
+    value: [string] | undefined;
+    default: [string] | undefined;
+    private actionGroup;
+    private _handleEvent;
+    private _generateButtonContents;
+    private _generateActionButtons;
+    protected renderController(): TemplateResult<1>;
+}

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

@@ -0,0 +1,52 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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 z=Object.getPrototypeOf;var b=Reflect.get;var d=(c,t,n)=>b(z(c),n,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@luzmo/icons");require("@luzmo/lucero/action-button");require("@luzmo/lucero/action-group");require("@luzmo/lucero/icon");const r=require("lit"),l=require("lit/decorators.js"),g=require("../edit-option-base-VhTih9T1.cjs"),h="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,n,s)=>{for(var u=void 0,p=c.length-1,m;p>=0;p--)(m=c[p])&&(u=m(t,n,u)||u);return u&&v(t,n,u),u};const f={alignBottom:o.luzmoAlignBottom,alignMiddle:o.luzmoAlignMiddle,alignTop:o.luzmoAlignTop,alignLeft:o.luzmoAlignLeft,alignCenter:o.luzmoAlignCenter,alignRight:o.luzmoAlignRight,ban:o.luzmoBan,borderSolid:o.luzmoBorderSolid,borderDashed:o.luzmoBorderDashed,borderDotted:o.luzmoBorderDotted,compress:o.luzmoCompress,expand:o.luzmoExpand,arrowsExpand:o.luzmoArrowsExpand,arrowsHorizontal:o.luzmoArrowsHorizontal,arrowsVertical:o.luzmoArrowsVertical,italic:o.luzmoItalic,bold:o.luzmoBold,underline:o.luzmoUnderline,rows:o.luzmoRows,columns:o.luzmoColumns,table:o.luzmoTable},a=class a extends g.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}_handleEvent(){var n,s,u;const t=this.selects==="multiple"?(n=this.actionGroup)==null?void 0:n.selected:(u=(s=this.actionGroup)==null?void 0:s.selected)==null?void 0:u[0];this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:t}}))}_generateButtonContents(t){return typeof t=="string"?r.html`${t}`:t.iconName||t.icon?r.html`
+        <luzmo-icon
+          slot="icon"
+          .size=${this.size}
+          .icon=${t.icon??f[t.iconName]}
+          .label=${t.label??""}
+        ></luzmo-icon>
+        ${t.buttonText??""}
+      `:r.html`${t.buttonText??""}`}_generateActionButtons(){return Object.entries(this.values).map(([t,n])=>r.html`
+        <luzmo-action-button value=${t} ?disabled=${this.disabled}>
+          ${this._generateButtonContents(n)}
+          ${n.label?r.html`<luzmo-tooltip
+                self-managed
+                placement="top"
+                size=${this.size}
+              >
+                ${n.label}
+              </luzmo-tooltip>`:""}
+        </luzmo-action-button>
+      `)}renderController(){const t=this._generateActionButtons();return r.html`
+      <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=[...d(a,a,"styles"),r.unsafeCSS(h)];let e=a;i([l.property({type:Array})],e.prototype,"values");i([l.property({type:Boolean,reflect:!0})],e.prototype,"disabled");i([l.property({type:String})],e.prototype,"selects");i([l.property({type:Array})],e.prototype,"value");i([l.property({type:Array})],e.prototype,"default");i([l.query("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-base/edit-option-base.d.ts

@@ -0,0 +1,23 @@
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/tooltip';
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+declare const LuzmoEditOptionBase_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+export declare abstract class LuzmoEditOptionBase extends LuzmoEditOptionBase_base {
+    static styles: CSSResultArray;
+    disabled: boolean;
+    hideLabel: 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-VhTih9T1.cjs

@@ -0,0 +1,53 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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("@luzmo/lucero/field-label");require("@luzmo/lucero/tooltip");const e=require("lit"),o=require("lit/decorators.js"),c=require("./focusable-B3E_hQmm.cjs"),h=require("./sized-mixin-DcvJLFeo.cjs"),u=":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,i=(s,l,n,g)=>{for(var a=void 0,r=s.length-1,d;r>=0;r--)(d=s[r])&&(a=d(l,n,a)||a);return a&&b(l,n,a),a};const p=class p extends h.SizedMixin(c.LuzmoElement,{defaultSize:"s",validSizes:["s","m","l","xl"]}){constructor(){super(...arguments),this.disabled=!1,this.hideLabel=!1,this.label="",this.tooltip="",this.extraLabel="",this.extraLabelHasClickAction=!1,this.extraLabelTooltip=""}handleExtraLabelClick(l){if(this.extraLabelHasClickAction&&typeof this.extraLabelClickAction=="function"){const{value:n}=this.extraLabelClickAction();this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:n}}))}l.preventDefault(),this.dispatchEvent(new CustomEvent("extraLabelClick",{bubbles:!0,composed:!0}))}render(){return e.html`
+      <div class="luzmo-edit-option">
+        ${this.label&&!this.hideLabel?e.html`
+              <luzmo-field-label
+                .size=${this.size}
+                for="luzmo-edit-option-control"
+                side-aligned="start"
+              >
+                ${this.label}
+                ${this.tooltip?e.html`
+                      *<luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        ${this.tooltip}
+                      </luzmo-tooltip>
+                    `:e.nothing}
+              </luzmo-field-label>
+            `:e.nothing}
+
+        <div class="control-container">
+          ${this.extraLabel?e.html`
+                <div
+                  class="extra-label ${this.extraLabelHasClickAction?"extra-link":""}"
+                  @click=${this.handleExtraLabelClick}
+                >
+                  <span class=""> ${this.extraLabel} </span>
+                </div>
+              `:e.nothing}
+          ${this.renderController()}
+        </div>
+      </div>
+    `}};p.styles=[e.unsafeCSS(u)];let t=p;i([o.property({type:Boolean,reflect:!0})],t.prototype,"disabled");i([o.property({type:Boolean,reflect:!0,attribute:"hide-label"})],t.prototype,"hideLabel");i([o.property({type:String,reflect:!0})],t.prototype,"label");i([o.property({type:String,reflect:!0})],t.prototype,"tooltip");i([o.property({type:String,attribute:"extra-label"})],t.prototype,"extraLabel");i([o.property({type:Boolean,attribute:"extra-label-has-click-action"})],t.prototype,"extraLabelHasClickAction");i([o.property()],t.prototype,"extraLabelClickAction");i([o.property({type:String,attribute:"extra-label-tooltip"})],t.prototype,"extraLabelTooltip");exports.LuzmoEditOptionBase=t;

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

@@ -0,0 +1,42 @@
+import '@luzmo/lucero/color-palette';
+import '@luzmo/lucero/color-palette-group';
+import { TemplateResult } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionColorPalettePicker extends LuzmoEditOptionBase {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    /**
+     * The selected color palette key of the picker
+     */
+    value?: string;
+    /**
+     * The default color palette key of the picker
+     */
+    default: string;
+    /**
+     * The color palette keys of the picker
+     */
+    values: string[];
+    /**
+     * Whether the picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the picker is horizontal
+     */
+    horizontal: boolean;
+    /**
+     * The function to parse the value
+     */
+    parseValue?: (value: any) => string;
+    /**
+     * The function to convert the value to a string
+     */
+    toValue?: (value: string) => any;
+    /**
+     * The number of colors to display
+     */
+    numberOfColors: number;
+    private _setColorPalette;
+    private generateColorsClasses;
+    protected renderController(): TemplateResult;
+}

package/components/edit-option-color-palette-picker/index.cjs

@@ -0,0 +1,37 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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 y=Object.getPrototypeOf;var f=Reflect.get;var d=(p,o,e)=>f(y(p),e,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/color-palette");require("@luzmo/lucero/color-palette-group");const u=require("lit"),l=require("lit/decorators.js"),m=require("../color-palettes-DhNHcib8.cjs"),b=require("../edit-option-base-VhTih9T1.cjs"),g=".luzmo-edit-option{height:fit-content;align-items:start}.control-container{align-items:start}.color-classes{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--luzmo-spacing-2)}.extra-label{height:var(--edit-option-component-height);display:flex;align-items:center}";var v=Object.defineProperty,a=(p,o,e,c)=>{for(var r=void 0,s=p.length-1,i;s>=0;s--)(i=p[s])&&(r=i(o,e,r)||r);return r&&v(o,e,r),r};const n=class n extends b.LuzmoEditOptionBase{constructor(){super(...arguments),this.default="OrRd",this.values=[],this.disabled=!1,this.horizontal=!1,this.numberOfColors=5}_setColorPalette(o){const e=o.target.selected;this.value=e,this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(e??""):e}}))}generateColorsClasses(o){const e=m.getColorMaps(),c=(s,i)=>u.html`
+        <luzmo-color-palette
+          .size=${this.size}
+          .value=${s}
+          ?disabled=${this.disabled}
+          ?horizontal=${this.horizontal}
+          .colors=${i}
+        ></luzmo-color-palette>
+      `,r=(this.values??[]).map(s=>{const i=`colors${this.numberOfColors??5}`,h=e[s][i];return c(s,Array.isArray(h)?h:[])});return u.html`
+      <luzmo-color-palette-group
+        .size=${this.size}
+        ?disabled=${this.disabled}
+        ?horizontal=${this.horizontal}
+        .selected=${o}
+        @change=${this._setColorPalette.bind(this)}
+        >${r}</luzmo-color-palette-group
+      >
+    `}renderController(){const o=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,e=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return this.generateColorsClasses(o??e??"OrRd")}};n.styles=[d(n,n,"styles"),u.unsafeCSS(g)];let t=n;a([l.property({type:String,reflect:!0})],t.prototype,"value");a([l.property({type:String,reflect:!0})],t.prototype,"default");a([l.property({type:Array,attribute:"values"})],t.prototype,"values");a([l.property({type:Boolean,reflect:!0})],t.prototype,"disabled");a([l.property({type:Boolean,reflect:!0})],t.prototype,"horizontal");a([l.property()],t.prototype,"parseValue");a([l.property()],t.prototype,"toValue");a([l.property({type:Number,attribute:"number-of-colors"})],t.prototype,"numberOfColors");customElements.get("luzmo-edit-option-palette-picker")||customElements.define("luzmo-edit-option-color-palette-picker",t);exports.LuzmoEditOptionColorPalettePicker=t;

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

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionColorPalettePicker } from './edit-option-color-palette-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-color-palette-picker': LuzmoEditOptionColorPalettePicker;
+    }
+}
+export { LuzmoEditOptionColorPalettePicker } from './edit-option-color-palette-picker';

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

@@ -0,0 +1,28 @@
+import { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/color-picker';
+import '@luzmo/lucero/menu';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+/**
+ * @element luzmo-edit-option-color-picker
+ * @description A component that allows the user to select a color from a color picker.
+ * @fires option-changed - Emitted when the color is changed.
+ */
+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>;
+}

package/components/edit-option-color-picker/index.cjs

@@ -1,3 +1,22 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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 u=Object.getPrototypeOf;var h=Reflect.get;var c=(i,l,p)=>h(u(i),p,l);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/color-picker");require("@luzmo/lucero/menu");const d=require("lit"),t=require("lit/decorators.js"),y=require("../edit-option-base-VhTih9T1.cjs");var m=Object.defineProperty,r=(i,l,p,f)=>{for(var o=void 0,n=i.length-1,a;n>=0;n--)(a=i[n])&&(o=a(l,p,o)||o);return o&&m(l,p,o),o};const s=class s extends y.LuzmoEditOptionBase{constructor(){super(...arguments),this.value="transparent",this.disabled=!1,this.noAlphaChannel=!1,this.swatches=[],this.rounding="full",this.shape="circle",this.placement="left-start",this.debounce=50}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.colorPicker.color}}))},this.debounce??200)}renderController(){return d.html`
       <luzmo-color-picker
         .color=${this.value}

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

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionColorPicker } from './edit-option-color-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-color-picker': LuzmoEditOptionColorPicker;
+    }
+}
+export { LuzmoEditOptionColorPicker } from './edit-option-color-picker';

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

@@ -0,0 +1,99 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/color-field';
+import '@luzmo/lucero/color-picker';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/number-field';
+import '@luzmo/lucero/text-field';
+import { PropertyValues, TemplateResult } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+/**
+ * @element luzmo-edit-option-color-range
+ * @description A component that allows the user to create a color range.
+ * @fires option-changed - Emitted when the color range is changed.
+ */
+export declare class LuzmoEditOptionColorRange extends LuzmoEditOptionBase {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    /**
+     * The color range
+     */
+    value?: {
+        color: string;
+        value?: number;
+    }[];
+    /**
+     * The default color range
+     */
+    default?: {
+        color: string;
+        value?: number;
+    }[];
+    /**
+     * Whether the color-range is disabled
+     * @default false
+     * @type {boolean}
+     */
+    disabled: boolean;
+    /**
+     * Range with percentage values
+     */
+    percentage: boolean;
+    /**
+     * Range colors can have alpha values
+     */
+    noAlphaChannel: boolean;
+    /**
+     * The number of values in the range can be changed
+     */
+    editRangeSize: boolean;
+    /**
+     * The values in the range can be changed by the user in the input field
+     */
+    noValues: boolean;
+    /**
+     * The minimum range size
+     */
+    minimumRangeSize: number;
+    /**
+     * Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded
+     */
+    negativeInfinityValue: boolean;
+    /**
+     * The color pickers can be read-only
+     */
+    readOnlyColorPicker: boolean;
+    /**
+     * Whether the colors are reversed
+     */
+    reverse: boolean;
+    /**
+     * The debounce time in milliseconds
+     */
+    debounce: number;
+    /**
+     * The function to parse the value
+     */
+    parseValue?: (value: any) => {
+        color: string;
+        value?: number;
+    }[];
+    /**
+     * The function to convert the value
+     */
+    toValue?: (value: any) => any;
+    private colorRangeLines;
+    /**
+     * @internal
+     */
+    debounceTimeout: any;
+    private _ranges;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _handleChangeEvent;
+    private _getIndex;
+    private _extrapolateNewValue;
+    private _setColor;
+    private _setNumber;
+    private _removeRangeValue;
+    private _addRangeValue;
+    private renderRangeValues;
+    protected renderController(): TemplateResult;
+}