@luzmo/analytics-components-kit 1.0.1-alpha.26 → 1.0.1-alpha.28

package/custom-elements.json

@@ -214,34 +214,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-display-settings",
           "customElement": true
         }
@@ -322,34 +300,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-display-settings-binning",
           "customElement": true
         }
@@ -462,34 +418,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-display-settings-datetime",
           "customElement": true
         }
@@ -572,34 +506,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-display-settings-grand-totals",
           "customElement": true
         }
@@ -699,34 +611,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-display-settings-numeric",
           "customElement": true
         }
@@ -887,34 +777,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-display-settings-period-over-period",
           "customElement": true
         }
@@ -1126,34 +994,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-draggable-data-item",
           "customElement": true
         }
@@ -1325,34 +1171,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-draggable-data-item-level",
           "customElement": true
         }
@@ -1520,7 +1344,7 @@
               "kind": "field",
               "name": "hideDelete",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
               "attribute": "hide-delete",
               "reflects": true
@@ -1529,7 +1353,7 @@
               "kind": "field",
               "name": "hideConfiguration",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
               "attribute": "hide-configuration",
               "reflects": true
@@ -1612,14 +1436,14 @@
             {
               "name": "hide-delete",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
               "fieldName": "hideDelete"
             },
             {
               "name": "hide-configuration",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
               "fieldName": "hideConfiguration"
             },
@@ -1631,34 +1455,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-droppable-slot",
           "customElement": true
         }
@@ -1788,6 +1590,12 @@
               "reflects": true
             }
           ],
+          "events": [
+            {
+              "description": "Announces that the `options` of the element have changed",
+              "name": "options-changed"
+            }
+          ],
           "attributes": [
             {
               "name": "language",
@@ -1861,7 +1669,7 @@
           ],
           "superclass": {
             "name": "LuzmoElement",
-            "package": "@luzmo/lucero/utils"
+            "module": "/src/utils/base"
           },
           "tagName": "luzmo-edit-item",
           "customElement": true
@@ -2080,7 +1888,7 @@
           ],
           "superclass": {
             "name": "LuzmoElement",
-            "package": "@luzmo/lucero/utils"
+            "module": "/src/utils/base"
           },
           "tagName": "luzmo-edit-option",
           "customElement": true
@@ -4010,34 +3818,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-slot-menu",
           "customElement": true
         }
@@ -4177,34 +3963,12 @@
               "default": "m",
               "description": "The size of the element",
               "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disable this control. It will not receive focus or events",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this control is rendered, focus it automatically",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The tab index to apply to this control. See general documentation about the tabindex HTML property",
-              "fieldName": "tabIndex"
             }
           ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
           "tagName": "luzmo-slot-menu-list",
           "customElement": true
         }

package/index.d.ts

@@ -22,4 +22,5 @@ export * from './components/edit-option-switch';
 export * from './components/edit-option-text-field';
 export * from './components/slot-menu';
 export * from './components/slot-menu-list';
+export * from './item-definitions/item-list';
 export * from './utils';

package/item-definitions/marker-map/marker-map-options.config.d.ts

@@ -133,7 +133,7 @@ declare const _default: ({
             };
             selects: string;
             toValue: (value: string) => 60 | 30 | 90;
-            parseValue: (value: number) => "M" | "S" | "L";
+            parseValue: (value: number) => "L" | "S" | "M";
         };
     }[];
 })[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.1-alpha.26",
+  "version": "1.0.1-alpha.28",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -142,7 +142,7 @@
       "require": "./components/utils.cjs"
     },
     "./item-list": {
-      "types": "./components/item-list/index.d.ts",
+      "types": "./item-definitions/item-list.d.ts",
       "import": "./components/item-list.js",
       "require": "./components/item-list.cjs"
     }

package/utils/base/base.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, ReactiveElement } from 'lit';
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+export interface LuzmoInterface {
+    shadowRoot: ShadowRoot;
+    isLTR: boolean;
+    hasVisibleFocusInTree(): boolean;
+    dir: 'ltr' | 'rtl';
+}
+export declare function LuzmoMixin<T extends Constructor<ReactiveElement>>(constructor: T): T & Constructor<LuzmoInterface>;
+declare const LuzmoElement_base: typeof LitElement & Constructor<LuzmoInterface>;
+export declare class LuzmoElement extends LuzmoElement_base {
+}
+export {};

package/utils/base/focus-visible.d.ts

@@ -0,0 +1,29 @@
+declare global {
+    interface Window {
+        applyFocusVisiblePolyfill?: (scope: Document | ShadowRoot) => void;
+    }
+}
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+interface OptionalLifecycleCallbacks {
+    connectedCallback?(): void;
+    disconnectedCallback?(): void;
+    manageAutoFocus?(): void;
+}
+type MixableBaseClass = HTMLElement & OptionalLifecycleCallbacks;
+/**
+ * This mixin function is designed to be applied to a class that inherits
+ * from HTMLElement. It makes it easy for a custom element to coordinate with
+ * the :focus-visible polyfill.
+ *
+ * NOTE(cdata): The code here was adapted from an example proposed with the
+ * introduction of ShadowDOM support in the :focus-visible polyfill.
+ *
+ * @see https://github.com/WICG/focus-visible/pull/196
+ * @param SuperClass The base class implementation to decorate with
+ * implementation that coordinates with the :focus-visible polyfill
+ */
+export declare const FocusVisiblePolyfillMixin: <T extends Constructor<MixableBaseClass>>(SuperClass: T) => T;
+export {};

package/utils/base/focusable.d.ts

@@ -0,0 +1,58 @@
+import { PropertyValues } from 'lit';
+import { LuzmoElement } from './base';
+type DisableableElement = HTMLElement & {
+    disabled?: boolean;
+};
+declare const Focusable_base: typeof LuzmoElement;
+/**
+ * Focusable base class handles tabindex setting into shadowed elements automatically.
+ *
+ * This implementation is based heavily on the aybolit delegate-focus-mixin at
+ * https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js
+ */
+export declare class Focusable extends Focusable_base {
+    /**
+     * Disable this control. It will not receive focus or events
+     */
+    disabled: boolean;
+    /**
+     * When this control is rendered, focus it automatically
+     *
+     * @private
+     */
+    autofocus: boolean;
+    /**
+     * The tab index to apply to this control. See general documentation about
+     * the tabindex HTML property
+     *
+     * @private
+     */
+    get tabIndex(): number;
+    set tabIndex(tabIndex: number);
+    private _tabIndex;
+    private onPointerdownManagementOfTabIndex;
+    private manageFocusElementTabindex;
+    private manipulatingTabindex;
+    /**
+     * @private
+     */
+    get focusElement(): DisableableElement;
+    /**
+     * @public
+     * @returns whether the component should manage its focusElement tab-index or not
+     * Needed for action-menu to be supported in action-group in an accessible way
+     */
+    get selfManageFocusElement(): boolean;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    click(): void;
+    protected manageAutoFocus(): void;
+    protected firstUpdated(changes: PropertyValues): void;
+    protected update(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private handleDisabledChanged;
+    protected getUpdateComplete(): Promise<boolean>;
+    private autofocusReady;
+    connectedCallback(): void;
+}
+export {};

package/utils/base/index.d.ts

@@ -0,0 +1,4 @@
+export { LuzmoElement, LuzmoMixin } from './base';
+export { Focusable } from './focusable';
+export { ElementSizes, SizedMixin } from './sized-mixin';
+export type { ElementSize } from './sized-mixin';

package/utils/base/sized-mixin.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveElement } from 'lit';
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+export type ElementSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+export declare const ElementSizes: Record<string, ElementSize>;
+export type DefaultElementSize = Exclude<ElementSize, 'xxs' | 'xs' | 'xxl'>;
+export interface SizedElementInterface {
+    size: ElementSize;
+}
+export declare function SizedMixin<T extends Constructor<ReactiveElement>>(constructor: T, { validSizes, noDefaultSize, defaultSize }?: {
+    validSizes?: ElementSize[];
+    noDefaultSize?: boolean;
+    defaultSize?: ElementSize;
+}): T & Constructor<SizedElementInterface>;
+export {};

package/utils/index.d.ts

@@ -2,3 +2,4 @@ export { decomposeNumericFormat } from './formatter/decompose-numeric-format';
 export { formatter } from './formatter/formatter';
 export { localize } from './formatter/localize';
 export { switchItem } from './switch-item';
+export { themes } from './themes';