@luzmo/analytics-components-kit 1.0.8-beta.7 → 1.0.9-beta.1

package/custom-elements.json

@@ -5340,7 +5340,7 @@
                 "text": "string[]"
               },
               "default": "[]",
-              "description": "The IDs of the selected data fields. If not provided, the first item will be selected (when allowEmpty is false).",
+              "description": "The IDs of the selected data fields. If not provided, the first item will be selected when `allowEmpty` is false and the picker is not readonly.",
               "attribute": "value",
               "reflects": true
             },
@@ -5399,6 +5399,28 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents selection changes while preserving the picker's normal appearance.",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Keeps the picker editable while applying the select's reduced-chrome treatment.",
+              "attribute": "quiet",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "search",
@@ -5550,7 +5572,7 @@
                 "text": "string[]"
               },
               "default": "[]",
-              "description": "The IDs of the selected data fields. If not provided, the first item will be selected (when allowEmpty is false).",
+              "description": "The IDs of the selected data fields. If not provided, the first item will be selected when `allowEmpty` is false and the picker is not readonly.",
               "fieldName": "value"
             },
             {
@@ -5598,6 +5620,24 @@
               "description": "Whether the picker is disabled",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents selection changes while preserving the picker's normal appearance.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Keeps the picker editable while applying the select's reduced-chrome treatment.",
+              "fieldName": "quiet"
+            },
             {
               "name": "search",
               "type": {
@@ -7973,6 +8013,28 @@
               "description": "Which period-over-period UI variant to render, based on available datetime columns and comparison filters.",
               "attribute": "period-over-period-type"
             },
+            {
+              "kind": "field",
+              "name": "allowPeriodsWithoutDatetimeColumn",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Offer the \"Periods\" offset when there is no datetime category (an offset date column is needed). The item\nthen shifts by the length of the period selected by its date filters.",
+              "attribute": "allow-periods-without-datetime-column",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hidePastValue",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the \"Past value\" comparison type, e.g. for items that only show the change.",
+              "attribute": "hide-past-value",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "linkedDatasetDatetimeColumns",
@@ -8112,6 +8174,24 @@
               "description": "Which period-over-period UI variant to render, based on available datetime columns and comparison filters.",
               "fieldName": "periodOverPeriodUiType"
             },
+            {
+              "name": "allow-periods-without-datetime-column",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Offer the \"Periods\" offset when there is no datetime category (an offset date column is needed). The item\nthen shifts by the length of the period selected by its date filters.",
+              "fieldName": "allowPeriodsWithoutDatetimeColumn"
+            },
+            {
+              "name": "hide-past-value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the \"Past value\" comparison type, e.g. for items that only show the change.",
+              "fieldName": "hidePastValue"
+            },
             {
               "name": "linked-dataset-datetime-columns",
               "type": {
@@ -8557,6 +8637,30 @@
           "description": "",
           "name": "LuzmoFilterItem",
           "cssProperties": [
+            {
+              "description": "Border for outline badges, tint for subtle badges, and background for filled badges.",
+              "name": "--luzmo-filter-item-column-badge-color"
+            },
+            {
+              "description": "Label and icon color for column badges.",
+              "name": "--luzmo-filter-item-column-badge-font-color"
+            },
+            {
+              "description": "Font size of the text display. Defaults follow `size` (`--luzmo-font-size-s` through `--luzmo-font-size-xl`).",
+              "name": "--luzmo-filter-item-text-font-size"
+            },
+            {
+              "description": "Color of the expression in a text display. Defaults to the sentence color.",
+              "name": "--luzmo-filter-item-text-expression-color"
+            },
+            {
+              "description": "Weight of the expression in a text display. Defaults to normal.",
+              "name": "--luzmo-filter-item-text-expression-font-weight"
+            },
+            {
+              "description": "Space between a field icon and its name in a text display. Defaults to `--luzmo-spacing-1`, and `--luzmo-spacing-2` at `l` and `xl`.",
+              "name": "--luzmo-filter-item-text-icon-gap"
+            },
             {
               "description": "Gap between the field, expression and value controls of a filter row.",
               "name": "--luzmo-filter-item-gap"
@@ -8586,6 +8690,16 @@
               "name": "--luzmo-filter-item-value-min-width"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The read-only filter sentence rendered by `display=\"text\"`.",
+              "name": "filter-item-text"
+            },
+            {
+              "description": "A column or formula reference in the read-only sentence.",
+              "name": "filter-item-text-field"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -8670,6 +8784,61 @@
               "description": "The filter to display",
               "attribute": "filter"
             },
+            {
+              "kind": "field",
+              "name": "display",
+              "type": {
+                "text": "FilterItemDisplay"
+              },
+              "default": "'rich'",
+              "description": "Presentation of the filter item: editable controls or a read-only sentence.",
+              "attribute": "display",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "columnDisplay",
+              "type": {
+                "text": "FilterColumnDisplay"
+              },
+              "default": "'text'",
+              "description": "Presentation of column and formula references in text display.",
+              "attribute": "column-display",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes rich-editor control chrome while keeping the controls editable.",
+              "attribute": "quiet",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents changes while preserving the selected display and visual treatment.",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables every rich-editor control and applies its disabled treatment.",
+              "attribute": "disabled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "allowParameters",
@@ -8730,6 +8899,15 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Presentation of column and formula references in text display.",
+              "name": "column-display",
+              "type": {
+                "text": "FilterColumnDisplay"
+              },
+              "default": "'text'",
+              "fieldName": "columnDisplay"
+            },
             {
               "name": "api-url",
               "type": {
@@ -8798,6 +8976,42 @@
               "description": "The filter to display",
               "fieldName": "filter"
             },
+            {
+              "name": "display",
+              "type": {
+                "text": "FilterItemDisplay"
+              },
+              "default": "'rich'",
+              "description": "Presentation of the filter item: editable controls or a read-only sentence.",
+              "fieldName": "display"
+            },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes rich-editor control chrome while keeping the controls editable.",
+              "fieldName": "quiet"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents changes while preserving the selected display and visual treatment.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables every rich-editor control and applies its disabled treatment.",
+              "fieldName": "disabled"
+            },
             {
               "name": "allow-parameters",
               "type": {
@@ -10259,6 +10473,74 @@
           "kind": "class",
           "description": "",
           "name": "LuzmoFilters",
+          "cssProperties": [
+            {
+              "description": "Font size of the text and outline displays. Defaults follow `size` (`--luzmo-font-size-s` through `--luzmo-font-size-xl`).",
+              "name": "--luzmo-filters-text-font-size"
+            },
+            {
+              "description": "Space between the parts of an outline filter. Defaults follow `size` (`--luzmo-spacing-1` through `--luzmo-spacing-4`). The text display uses word spacing instead.",
+              "name": "--luzmo-filters-text-part-gap"
+            },
+            {
+              "description": "Space between a field icon and its name in the text display. Defaults to `--luzmo-spacing-1` at `s` and `m`, and `--luzmo-spacing-2` at `l` and `xl`.",
+              "name": "--luzmo-filters-text-icon-gap"
+            },
+            {
+              "description": "Indent of a nested outline group. Defaults follow `size` from `--luzmo-spacing-1` to `--luzmo-spacing-4`.",
+              "name": "--luzmo-filters-outline-children-margin-inline-start"
+            },
+            {
+              "description": "Padding inside an outline bracket. Sizes `s` and `m` use `--luzmo-spacing-3`, `l` uses `--luzmo-spacing-4`, and `xl` uses `--luzmo-spacing-5`.",
+              "name": "--luzmo-filters-outline-children-padding-inline-start"
+            },
+            {
+              "description": "Inset of the outline bracket from the start edge of its children. Size `s` uses `--luzmo-spacing-1`, `m` and `l` use `--luzmo-spacing-2`, and `xl` uses `--luzmo-spacing-3`.",
+              "name": "--luzmo-filters-outline-bracket-inset"
+            },
+            {
+              "description": "Color of an expression such as \"is in\" or \">\". Defaults to the sentence color. Set it to `var(--luzmo-primary)` to use the primary color. An empty value uses the sentence color.",
+              "name": "--luzmo-filters-expression-color"
+            },
+            {
+              "description": "Weight of an expression such as \"is in\" or \">\". Defaults to normal (`--luzmo-font-weight`). Set it to `var(--luzmo-font-weight-bold)` for bold. An empty value uses normal.",
+              "name": "--luzmo-filters-expression-font-weight"
+            },
+            {
+              "description": "Color of an AND/OR label. Defaults to the sentence color. Set it to `var(--luzmo-primary)` to use the primary color. An empty value uses the sentence color.",
+              "name": "--luzmo-filters-condition-color"
+            },
+            {
+              "description": "Weight of an AND/OR label. The outline defaults to bold and the text sentence defaults to normal. Set the token to apply one weight to both. An empty value uses normal.",
+              "name": "--luzmo-filters-condition-font-weight"
+            },
+            {
+              "description": "Font size of the AND/OR label in the outline. Defaults one step below the sentence for the current `size`.",
+              "name": "--luzmo-filters-outline-condition-font-size"
+            },
+            {
+              "description": "Border for outline badges, tint for subtle badges, and background for filled badges.",
+              "name": "--luzmo-filters-column-badge-color"
+            },
+            {
+              "description": "Label and icon color for column badges.",
+              "name": "--luzmo-filters-column-badge-font-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The inline sentence shown when `display` is `text`.",
+              "name": "filters-text"
+            },
+            {
+              "description": "The bracket layout shown when `display` is `outline`.",
+              "name": "filters-outline"
+            },
+            {
+              "description": "One filter row in the outline, including its delete button when shown.",
+              "name": "filters-outline-row"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -10353,6 +10635,50 @@
               "attribute": "format",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "display",
+              "type": {
+                "text": "FiltersDisplay"
+              },
+              "default": "'rich'",
+              "description": "How the filters are presented. `rich` is the editable group editor. `text` is a read-only\nsentence, with parentheses around nested AND/OR groups. `outline` is one wrapping filter per\nline inside bracket rails, and can delete a filter unless `readonly` is set.",
+              "attribute": "display",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "columnDisplay",
+              "type": {
+                "text": "FilterColumnDisplay"
+              },
+              "default": "'text'",
+              "description": "Presentation of column and formula references in text and outline displays.",
+              "attribute": "column-display",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes rich-editor control chrome while keeping the filters editable.",
+              "attribute": "quiet",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents changes while preserving the selected display and visual treatment.\nIn `outline`, this hides the delete buttons.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "allowParameters",
@@ -10420,7 +10746,7 @@
               "type": {
                 "text": "CustomEvent<FiltersChangedEventDetail>"
               },
-              "description": "Announces that the filters have changed, carrying the emitted groups and the format they are in"
+              "description": "Announces that the filters have changed, carrying the emitted groups and the format they are in. `display=\"text\"` never fires this. Outline fires it after a filter is deleted."
             },
             {
               "type": {
@@ -10438,6 +10764,15 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Presentation of column and formula references in text and outline displays.",
+              "name": "column-display",
+              "type": {
+                "text": "FilterColumnDisplay"
+              },
+              "default": "'text'",
+              "fieldName": "columnDisplay"
+            },
             {
               "name": "api-url",
               "type": {
@@ -10514,6 +10849,33 @@
               "description": "Output format for the `luzmo-filters-changed` event.\n\n`canonical` emits `ItemFilterGroup[]`; `clean` emits the clean clause groups\nthat aligned hosts consume. A tree that cannot be represented cleanly falls\nback to canonical output, and the event says which format it carries.",
               "fieldName": "format"
             },
+            {
+              "name": "display",
+              "type": {
+                "text": "FiltersDisplay"
+              },
+              "default": "'rich'",
+              "description": "How the filters are presented. `rich` is the editable group editor. `text` is a read-only\nsentence, with parentheses around nested AND/OR groups. `outline` is one wrapping filter per\nline inside bracket rails, and can delete a filter unless `readonly` is set.",
+              "fieldName": "display"
+            },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes rich-editor control chrome while keeping the filters editable.",
+              "fieldName": "quiet"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents changes while preserving the selected display and visual treatment.\nIn `outline`, this hides the delete buttons.",
+              "fieldName": "readonly"
+            },
             {
               "name": "allow-parameters",
               "type": {
@@ -13545,6 +13907,43 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/interactive-viz-item/load-config-panel.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ensureConfigPanelLoaded"
+        },
+        {
+          "kind": "function",
+          "name": "isConfigPanelLoaded",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ensureConfigPanelLoaded",
+          "declaration": {
+            "name": "ensureConfigPanelLoaded",
+            "module": "src/components/interactive-viz-item/load-config-panel.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isConfigPanelLoaded",
+          "declaration": {
+            "name": "isConfigPanelLoaded",
+            "module": "src/components/interactive-viz-item/load-config-panel.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/interactive-viz-item/types.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.8-beta.7",
+  "version": "1.0.9-beta.1",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -334,7 +334,7 @@
     "@lit/task": "^1.0.1",
     "@luzmo/embed": "^7.5.0",
     "@luzmo/icons": "^1.0.1-alpha.46",
-    "@luzmo/lucero": "^2.2.0",
+    "@luzmo/lucero": "^2.2.1",
     "colorjs.io": "^0.5.2",
     "lit": "^3.3.2",
     "yjs": "^13.6.29"

package/react/components/filters.component.ts

@@ -16,7 +16,7 @@ const LuzmoFiltersComponent = createComponent({
 /**
  * React wrapper for <luzmo-filters>
  *
- * @event onLuzmoFiltersChanged - Announces that the filters have changed, carrying the emitted groups and the format they are in
+ * @event onLuzmoFiltersChanged - Announces that the filters have changed, carrying the emitted groups and the format they are in. `display="text"` never fires this. Outline fires it after a filter is deleted.
  * @event onLuzmoParameterCreated - Announces that a parameter was created and added to `parameters`.
  * @event onLuzmoParameterRemoved - Announces that a parameter was detached from a filter.
  */

package/react/esm/components/filters.component.d.ts

@@ -3,7 +3,7 @@ import { LuzmoFilters as LuzmoFiltersClass, FilterParameter, FiltersChangedEvent
 /**
  * React wrapper for <luzmo-filters>
  *
- * @event onLuzmoFiltersChanged - Announces that the filters have changed, carrying the emitted groups and the format they are in
+ * @event onLuzmoFiltersChanged - Announces that the filters have changed, carrying the emitted groups and the format they are in. `display="text"` never fires this. Outline fires it after a filter is deleted.
  * @event onLuzmoParameterCreated - Announces that a parameter was created and added to `parameters`.
  * @event onLuzmoParameterRemoved - Announces that a parameter was detached from a filter.
  */

package/react/esm/components/filters.component.js

@@ -14,7 +14,7 @@ const LuzmoFiltersComponent = createComponent({
 /**
  * React wrapper for <luzmo-filters>
  *
- * @event onLuzmoFiltersChanged - Announces that the filters have changed, carrying the emitted groups and the format they are in
+ * @event onLuzmoFiltersChanged - Announces that the filters have changed, carrying the emitted groups and the format they are in. `display="text"` never fires this. Outline fires it after a filter is deleted.
  * @event onLuzmoParameterCreated - Announces that a parameter was created and added to `parameters`.
  * @event onLuzmoParameterRemoved - Announces that a parameter was detached from a filter.
  */

package/react/package.json

@@ -29,7 +29,7 @@
   "peerDependencies": {
     "@lit/react": "^1.0.6",
     "react": "^18.0.0 || ^19.0.0",
-    "@luzmo/analytics-components-kit": "^1.0.8-beta.7"
+    "@luzmo/analytics-components-kit": "^1.0.9-beta.1"
   },
-  "version": "1.0.8-beta.7"
+  "version": "1.0.9-beta.1"
 }

package/utils/create-lazy-loader.d.ts

@@ -0,0 +1,5 @@
+export interface LazyLoader<T> {
+    load: () => Promise<T>;
+    isLoaded: () => boolean;
+}
+export declare const createLazyLoader: <T>(loader: () => Promise<T>) => LazyLoader<T>;

package/utils/filters/filter-text.d.ts

@@ -0,0 +1,64 @@
+import type { ColumnSubtype, ColumnType } from '@luzmo/dashboard-contents-types';
+import type { FilterCondition, FilterGroup } from '../../components/filters';
+/** Read-only field shown beside a filter expression. */
+export interface FilterTextField {
+    label: string;
+    tooltip: string;
+    type?: ColumnType;
+    subtype?: ColumnSubtype;
+    formula: boolean;
+    datasetId?: string;
+    fieldId?: string;
+}
+/** One filter row, shared by the inline sentence and the outline. */
+export interface FilterTextLeaf {
+    field: FilterTextField;
+    expression: string;
+    valueText: string;
+    /** Full value list, or a note when a hierarchy name could not be retrieved. */
+    valueTooltip?: string;
+    /** Hierarchy names for this value are still loading. */
+    valuePending?: boolean;
+    valueField?: FilterTextField;
+}
+/** Dataset metadata the text formatter uses to resolve column and formula names. */
+export interface FilterTextDataset {
+    id: string;
+    name?: Record<string, string> | string;
+    columns?: Array<{
+        id?: string;
+        name?: Record<string, string> | string;
+        type?: ColumnType;
+        subtype?: ColumnSubtype;
+    }>;
+    formulas?: Array<{
+        id?: string;
+        name?: Record<string, string> | string;
+        type?: ColumnType;
+        subtype?: ColumnSubtype;
+    }>;
+}
+export interface FilterTextContext {
+    datasets: FilterTextDataset[];
+    contentLanguage: string;
+    timeZone?: string;
+    /** Localized hierarchy member names keyed by `datasetId:fieldId:memberId`. */
+    hierarchyLabels?: Map<string, string>;
+    /** True while those names are being retrieved. */
+    hierarchyLabelsLoading?: boolean;
+}
+/** One column or formula whose selected hierarchy members still need names. */
+export interface HierarchyMemberRequest {
+    datasetId: string;
+    columnId?: string;
+    formulaId?: string;
+    ids: string[];
+}
+/** Lookup key for a fetched hierarchy member label. */
+export declare function hierarchyMemberKey(datasetId: string, fieldId: string, memberId: string): string;
+/** Describes one filter leaf for both read-only displays. Returns null when the leaf has nothing to show. */
+export declare function describeFilterLeaf(condition: FilterCondition, context: FilterTextContext): FilterTextLeaf | null;
+/** Hierarchy members in `group` that are stored as ids and still need a localized name. */
+export declare function collectHierarchyMemberRequests(group: FilterGroup, context: FilterTextContext): HierarchyMemberRequest[];
+/** Localized hierarchy member names for the ids still stored on a read-only filter. */
+export declare function loadHierarchyMemberLabels(lookups: HierarchyMemberRequest[], contentLanguage: string): Promise<Map<string, string>>;

package/utils/filters/index.d.ts

@@ -1 +1,2 @@
 export * from './expressions';
+export type { FilterColumnDisplay, FilterItemDisplay } from './presentation';

package/utils/filters/presentation.d.ts

@@ -0,0 +1,4 @@
+/** Presentation of one filter item. */
+export type FilterItemDisplay = 'rich' | 'text';
+/** Presentation of column and formula references in read-only filter text. */
+export type FilterColumnDisplay = 'text' | 'outline' | 'subtle' | 'fill';

package/utils/filters/tests/filter-text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/formatter/localized-template.d.ts

@@ -0,0 +1,4 @@
+/** Private-use markers passed through `msg(str``)` so translations can reorder rendered parts. */
+export declare const localizedPartMarkers: readonly ["", "", ""];
+/** Replaces localized private-use markers with their corresponding renderable values. */
+export declare function renderLocalizedParts<T>(message: string, parts: readonly T[]): Array<string | T>;