igniteui-grid-lite 0.4.0-beta.1 → 0.4.0-beta.3

package/internal/types.d.ts

@@ -1,4 +1,5 @@
-import type { ReactiveControllerHost, TemplateResult } from 'lit';
+import type { Theme } from 'igniteui-webcomponents';
+import type { CSSResult, ReactiveControllerHost, TemplateResult } from 'lit';
 import type IgcGridLiteCell from '../components/cell.js';
 import type { IgcGridLite } from '../components/grid.js';
 import type IgcGridLiteHeader from '../components/header.js';
@@ -6,6 +7,14 @@ import type IgcGridLiteRow from '../components/row.js';
 import type { SortComparer } from '../operations/sort/types.js';
 export type NavigationState = 'previous' | 'current';
 export type GridHost<T extends object> = ReactiveControllerHost & IgcGridLite<T>;
+export type Themes = {
+    light: {
+        [K in Theme | 'shared']?: CSSResult;
+    };
+    dark: {
+        [K in Theme | 'shared']?: CSSResult;
+    };
+};
 type FlatKeys<T> = keyof T;
 type DotPaths<T> = {
     [K in keyof T & string]: T[K] extends object ? K | `${K}.${DotPaths<T[K]>}` : K;

package/internal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/internal/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactiveControllerHost, TemplateResult } from 'lit';\nimport type IgcGridLiteCell from '../components/cell.js';\nimport type { IgcGridLite } from '../components/grid.js';\nimport type IgcGridLiteHeader from '../components/header.js';\nimport type IgcGridLiteRow from '../components/row.js';\nimport type { SortComparer } from '../operations/sort/types.js';\n\nexport type NavigationState = 'previous' | 'current';\nexport type GridHost<T extends object> = ReactiveControllerHost & IgcGridLite<T>;\n\ntype FlatKeys<T> = keyof T;\ntype DotPaths<T> = {\n  [K in keyof T & string]: T[K] extends object\n    ? K | `${K}.${DotPaths<T[K]>}` // Note: resolving `never` will collapse the entire interpolated string to never, leaving only valid paths\n    : K;\n}[keyof T & string];\ntype NestedKeys<T> = Exclude<DotPaths<T>, FlatKeys<T>>;\n\n/**\n * Helper type for resolving keys of type T.\n */\nexport type Keys<T> = FlatKeys<T> | NestedKeys<T>;\n\n/** Recursive T[K] property type resolve with nested dot paths support */\ntype PathValue<T, P extends string> = P extends `${infer K}.${infer Rest}`\n  ? K extends keyof T\n    ? PathValue<T[K], Rest>\n    : never\n  : P extends keyof T\n    ? T[P]\n    : never;\n\n/**\n * Helper type for resolving types of type T.\n */\nexport type PropertyType<T, K extends Keys<T> = Keys<T>> = K extends NestedKeys<T>\n  ? PathValue<T, K> // nested path\n  : K extends keyof T\n    ? T[K] // flat key\n    : never;\n\n/** The data for the current column. */\nexport type DataType = 'number' | 'string' | 'boolean';\n\n/**\n * Configures the sort behavior for the grid.\n */\nexport interface GridLiteSortingOptions {\n  /**\n   * The sorting mode - either 'single' or 'multiple' column sorting.\n   */\n  mode: 'single' | 'multiple';\n}\n\n/**\n * Extended sort configuration for a column.\n */\nexport interface BaseColumnSortConfiguration<T, K extends Keys<T> = Keys<T>> {\n  /**\n   * Custom comparer function for sort operations for this column.\n   */\n  comparer?: SortComparer<T, K>;\n}\n\n/**\n * See {@link BaseColumnSortConfiguration} for the full documentation.\n */\nexport type ColumnSortConfiguration<T, K extends Keys<T> = Keys<T>> = K extends Keys<T>\n  ? BaseColumnSortConfiguration<T, K>\n  : never;\n\n/** Configuration object for grid columns. */\nexport interface BaseColumnConfiguration<T extends object, K extends Keys<T> = Keys<T>> {\n  /**\n   * The field from the data for this column.\n   */\n  field: K;\n  /**\n   * The type of data this column will reference.\n   *\n   * Affects the default filter operands if the column is with filtering enabled.\n   *\n   * @remarks\n   * If not passed, `string` is assumed to be the default type.\n   *\n   */\n  dataType?: DataType;\n  /**\n   * Optional text to display in the column header. By default, the column field is used\n   * to render the header text.\n   */\n  header?: string;\n  /**\n   * Width for the current column.\n   *\n   * Accepts most CSS units for controlling width.\n   *\n   * @remarks\n   * If not passed, the column will try to size itself based on the number of other\n   * columns and the total width of the grid.\n   *\n   */\n  width?: string;\n  /**\n   * Whether the column is hidden or not.\n   */\n  hidden?: boolean;\n  /**\n   * Whether the the column can be resized or not.\n   */\n  resizable?: boolean;\n  /**\n   * Whether the column can be sorted.\n   */\n  sortable?: boolean;\n  /**\n   * Whether the sort operations will be case sensitive.\n   */\n  sortingCaseSensitive?: boolean;\n  /**\n   * Sort configuration options for the column (e.g., custom comparer).\n   */\n  sortConfiguration?: ColumnSortConfiguration<T, K>;\n  /**\n   * Whether the column can be filtered.\n   */\n  filterable?: boolean;\n  /**\n   * Whether the filter operations will be case sensitive.\n   */\n  filteringCaseSensitive?: boolean;\n  /**\n   * Header template callback.\n   */\n  headerTemplate?: (params: IgcHeaderContext<T>) => TemplateResult | unknown;\n  /**\n   * Cell template callback.\n   */\n  cellTemplate?: (params: IgcCellContext<T, K>) => TemplateResult | unknown;\n}\n\n/**\n * See {@link BaseColumnConfiguration} for the full documentation.\n */\nexport type ColumnConfiguration<T extends object, K extends Keys<T> = Keys<T>> = K extends Keys<T>\n  ? BaseColumnConfiguration<T, K>\n  : never;\n\nexport interface ActiveNode<T> {\n  column: Keys<T>;\n  row: number;\n}\n\n/**\n * Context object for the column header template callback.\n */\nexport interface IgcHeaderContext<T extends object> {\n  /**\n   * The header element parent of the template.\n   */\n  parent: IgcGridLiteHeader<T>;\n  /**\n   * The current configuration for the column.\n   */\n  column: ColumnConfiguration<T>;\n}\n\n/**\n * Context object for the row cell template callback.\n */\nexport interface BaseIgcCellContext<T extends object, K extends Keys<T> = Keys<T>> {\n  /**\n   * The cell element parent of the template.\n   */\n  parent: IgcGridLiteCell<T>;\n  /**\n   * The row element containing the cell.\n   */\n  row: IgcGridLiteRow<T>;\n  /**\n   * The current configuration for the column.\n   */\n  column: ColumnConfiguration<T, K>;\n  /**\n   * The value from the data source for this cell.\n   */\n  value: PropertyType<T, K>;\n}\n\n/**\n * See {@link BaseIgcCellContext} for the full documentation.\n */\nexport type IgcCellContext<T extends object, K extends Keys<T> = Keys<T>> = K extends Keys<T>\n  ? BaseIgcCellContext<T, K>\n  : never;\n\n/**\n * The parameters passed to a {@link DataPipelineHook} callback.\n */\nexport type DataPipelineParams<T extends object> = {\n  /**\n   * The current data state of the grid.\n   */\n  data: T[];\n  /**\n   * The grid component itself.\n   */\n  grid: IgcGridLite<T>;\n  /**\n   * The type of data operation being performed.\n   */\n  type: 'sort' | 'filter';\n};\n\n/**\n * Callback function for customizing data operations in the grid.\n */\nexport type DataPipelineHook<T extends object> = (\n  state: DataPipelineParams<T>\n) => T[] | Promise<T[]>;\n\n/**\n * Configuration for customizing the various data operations of the grid.\n */\nexport interface DataPipelineConfiguration<T extends object> {\n  /**\n   * Hook for customizing sort operations.\n   */\n  sort?: DataPipelineHook<T>;\n  /**\n   * Hook for customizing filter operations.\n   */\n  filter?: DataPipelineHook<T>;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/internal/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Theme } from 'igniteui-webcomponents';\nimport type { CSSResult, ReactiveControllerHost, TemplateResult } from 'lit';\nimport type IgcGridLiteCell from '../components/cell.js';\nimport type { IgcGridLite } from '../components/grid.js';\nimport type IgcGridLiteHeader from '../components/header.js';\nimport type IgcGridLiteRow from '../components/row.js';\nimport type { SortComparer } from '../operations/sort/types.js';\n\nexport type NavigationState = 'previous' | 'current';\nexport type GridHost<T extends object> = ReactiveControllerHost & IgcGridLite<T>;\n\nexport type Themes = {\n  light: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n  dark: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n};\n\ntype FlatKeys<T> = keyof T;\ntype DotPaths<T> = {\n  [K in keyof T & string]: T[K] extends object\n    ? K | `${K}.${DotPaths<T[K]>}` // Note: resolving `never` will collapse the entire interpolated string to never, leaving only valid paths\n    : K;\n}[keyof T & string];\ntype NestedKeys<T> = Exclude<DotPaths<T>, FlatKeys<T>>;\n\n/**\n * Helper type for resolving keys of type T.\n */\nexport type Keys<T> = FlatKeys<T> | NestedKeys<T>;\n\n/** Recursive T[K] property type resolve with nested dot paths support */\ntype PathValue<T, P extends string> = P extends `${infer K}.${infer Rest}`\n  ? K extends keyof T\n    ? PathValue<T[K], Rest>\n    : never\n  : P extends keyof T\n    ? T[P]\n    : never;\n\n/**\n * Helper type for resolving types of type T.\n */\nexport type PropertyType<T, K extends Keys<T> = Keys<T>> = K extends NestedKeys<T>\n  ? PathValue<T, K> // nested path\n  : K extends keyof T\n    ? T[K] // flat key\n    : never;\n\n/** The data for the current column. */\nexport type DataType = 'number' | 'string' | 'boolean';\n\n/**\n * Configures the sort behavior for the grid.\n */\nexport interface GridLiteSortingOptions {\n  /**\n   * The sorting mode - either 'single' or 'multiple' column sorting.\n   */\n  mode: 'single' | 'multiple';\n}\n\n/**\n * Extended sort configuration for a column.\n */\nexport interface BaseColumnSortConfiguration<T, K extends Keys<T> = Keys<T>> {\n  /**\n   * Custom comparer function for sort operations for this column.\n   */\n  comparer?: SortComparer<T, K>;\n}\n\n/**\n * See {@link BaseColumnSortConfiguration} for the full documentation.\n */\nexport type ColumnSortConfiguration<T, K extends Keys<T> = Keys<T>> = K extends Keys<T>\n  ? BaseColumnSortConfiguration<T, K>\n  : never;\n\n/** Configuration object for grid columns. */\nexport interface BaseColumnConfiguration<T extends object, K extends Keys<T> = Keys<T>> {\n  /**\n   * The field from the data for this column.\n   */\n  field: K;\n  /**\n   * The type of data this column will reference.\n   *\n   * Affects the default filter operands if the column is with filtering enabled.\n   *\n   * @remarks\n   * If not passed, `string` is assumed to be the default type.\n   *\n   */\n  dataType?: DataType;\n  /**\n   * Optional text to display in the column header. By default, the column field is used\n   * to render the header text.\n   */\n  header?: string;\n  /**\n   * Width for the current column.\n   *\n   * Accepts most CSS units for controlling width.\n   *\n   * @remarks\n   * If not passed, the column will try to size itself based on the number of other\n   * columns and the total width of the grid.\n   *\n   */\n  width?: string;\n  /**\n   * Whether the column is hidden or not.\n   */\n  hidden?: boolean;\n  /**\n   * Whether the the column can be resized or not.\n   */\n  resizable?: boolean;\n  /**\n   * Whether the column can be sorted.\n   */\n  sortable?: boolean;\n  /**\n   * Whether the sort operations will be case sensitive.\n   */\n  sortingCaseSensitive?: boolean;\n  /**\n   * Sort configuration options for the column (e.g., custom comparer).\n   */\n  sortConfiguration?: ColumnSortConfiguration<T, K>;\n  /**\n   * Whether the column can be filtered.\n   */\n  filterable?: boolean;\n  /**\n   * Whether the filter operations will be case sensitive.\n   */\n  filteringCaseSensitive?: boolean;\n  /**\n   * Header template callback.\n   */\n  headerTemplate?: (params: IgcHeaderContext<T>) => TemplateResult | unknown;\n  /**\n   * Cell template callback.\n   */\n  cellTemplate?: (params: IgcCellContext<T, K>) => TemplateResult | unknown;\n}\n\n/**\n * See {@link BaseColumnConfiguration} for the full documentation.\n */\nexport type ColumnConfiguration<T extends object, K extends Keys<T> = Keys<T>> = K extends Keys<T>\n  ? BaseColumnConfiguration<T, K>\n  : never;\n\nexport interface ActiveNode<T> {\n  column: Keys<T>;\n  row: number;\n}\n\n/**\n * Context object for the column header template callback.\n */\nexport interface IgcHeaderContext<T extends object> {\n  /**\n   * The header element parent of the template.\n   */\n  parent: IgcGridLiteHeader<T>;\n  /**\n   * The current configuration for the column.\n   */\n  column: ColumnConfiguration<T>;\n}\n\n/**\n * Context object for the row cell template callback.\n */\nexport interface BaseIgcCellContext<T extends object, K extends Keys<T> = Keys<T>> {\n  /**\n   * The cell element parent of the template.\n   */\n  parent: IgcGridLiteCell<T>;\n  /**\n   * The row element containing the cell.\n   */\n  row: IgcGridLiteRow<T>;\n  /**\n   * The current configuration for the column.\n   */\n  column: ColumnConfiguration<T, K>;\n  /**\n   * The value from the data source for this cell.\n   */\n  value: PropertyType<T, K>;\n}\n\n/**\n * See {@link BaseIgcCellContext} for the full documentation.\n */\nexport type IgcCellContext<T extends object, K extends Keys<T> = Keys<T>> = K extends Keys<T>\n  ? BaseIgcCellContext<T, K>\n  : never;\n\n/**\n * The parameters passed to a {@link DataPipelineHook} callback.\n */\nexport type DataPipelineParams<T extends object> = {\n  /**\n   * The current data state of the grid.\n   */\n  data: T[];\n  /**\n   * The grid component itself.\n   */\n  grid: IgcGridLite<T>;\n  /**\n   * The type of data operation being performed.\n   */\n  type: 'sort' | 'filter';\n};\n\n/**\n * Callback function for customizing data operations in the grid.\n */\nexport type DataPipelineHook<T extends object> = (\n  state: DataPipelineParams<T>\n) => T[] | Promise<T[]>;\n\n/**\n * Configuration for customizing the various data operations of the grid.\n */\nexport interface DataPipelineConfiguration<T extends object> {\n  /**\n   * Hook for customizing sort operations.\n   */\n  sort?: DataPipelineHook<T>;\n  /**\n   * Hook for customizing filter operations.\n   */\n  filter?: DataPipelineHook<T>;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-grid-lite",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0-beta.3",
   "description": "Web component data grid following open-wc recommendations",
   "keywords": [
     "lit",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@lit-labs/virtualizer": "~2.1.0",
     "@lit/context": "~1.1.5",
-    "igniteui-webcomponents": "~6.4.0",
+    "igniteui-webcomponents": "~6.5.0",
     "lit": "^3.3.0"
   }
 }

package/styles/themes/grid-header-themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../internal/theming.js';
+import type { Themes } from '../../internal/types.js';
 export declare const all: Themes;

package/styles/themes/grid-header-themes.js

@@ -3,18 +3,18 @@ import { styles as bootstrap } from './shared/header.bootstrap.css.js';
 import { styles as fluent } from './shared/header.fluent.css.js';
 const light = {
     bootstrap: css `
-      ${bootstrap}
+    ${bootstrap}
   `,
     fluent: css `
-      ${fluent}
+    ${fluent}
   `,
 };
 const dark = {
     bootstrap: css `
-      ${bootstrap}
+    ${bootstrap}
   `,
     fluent: css `
-      ${fluent}
+    ${fluent}
   `,
 };
 export const all = { light, dark };

package/styles/themes/grid-header-themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-header-themes.js","sourceRoot":"","sources":["../../../src/styles/themes/grid-header-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAK1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEjE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;QACR,SAAS;GACd;IACD,MAAM,EAAE,GAAG,CAAA;QACL,MAAM;GACX;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;QACR,SAAS;GACd;IACD,MAAM,EAAE,GAAG,CAAA;QACL,MAAM;GACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../internal/theming.js';\n\n// Shared\nimport { styles as bootstrap } from './shared/header.bootstrap.css.js';\nimport { styles as fluent } from './shared/header.fluent.css.js';\n\nconst light = {\n  bootstrap: css`\n      ${bootstrap}\n  `,\n  fluent: css`\n      ${fluent}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n      ${bootstrap}\n  `,\n  fluent: css`\n      ${fluent}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"grid-header-themes.js","sourceRoot":"","sources":["../../../src/styles/themes/grid-header-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEjE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../internal/types.js';\n// Shared\nimport { styles as bootstrap } from './shared/header.bootstrap.css.js';\nimport { styles as fluent } from './shared/header.fluent.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/styles/themes/grid-themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../internal/theming.js';
+import type { Themes } from '../../internal/types.js';
 export declare const all: Themes;

package/styles/themes/grid-themes.js

@@ -11,36 +11,36 @@ import { styles as shared } from './light/grid.shared.css.js';
 import { styles as bootstrap } from './shared/grid.common.css.js';
 const light = {
     shared: css `
-      ${shared}
+    ${shared}
   `,
     bootstrap: css `
-      ${bootstrap} ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
     material: css `
-      ${materialLight}
+    ${materialLight}
   `,
     fluent: css `
-      ${fluentLight}
+    ${fluentLight}
   `,
     indigo: css `
-      ${indigoLight}
+    ${indigoLight}
   `,
 };
 const dark = {
     shared: css `
-      ${shared}
+    ${shared}
   `,
     bootstrap: css `
-      ${bootstrapDark}
+    ${bootstrapDark}
   `,
     material: css `
-      ${materialDark}
+    ${materialDark}
   `,
     fluent: css `
-      ${fluentDark}
+    ${fluentDark}
   `,
     indigo: css `
-      ${indigoDark}
+    ${indigoDark}
   `,
 };
 export const all = { light, dark };

package/styles/themes/grid-themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-themes.js","sourceRoot":"","sources":["../../../src/styles/themes/grid-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAErE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;QACL,MAAM;GACX;IACD,SAAS,EAAE,GAAG,CAAA;QACR,SAAS,IAAI,cAAc;GAChC;IACD,QAAQ,EAAE,GAAG,CAAA;QACP,aAAa;GAClB;IACD,MAAM,EAAE,GAAG,CAAA;QACL,WAAW;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;QACL,WAAW;GAChB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;QACL,MAAM;GACX;IACD,SAAS,EAAE,GAAG,CAAA;QACR,aAAa;GAClB;IACD,QAAQ,EAAE,GAAG,CAAA;QACP,YAAY;GACjB;IACD,MAAM,EAAE,GAAG,CAAA;QACL,UAAU;GACf;IACD,MAAM,EAAE,GAAG,CAAA;QACL,UAAU;GACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../internal/theming.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/grid.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/grid.fluent.css.js';\nimport { styles as indigoDark } from './dark/grid.indigo.css.js';\nimport { styles as materialDark } from './dark/grid.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/grid.bootstrap.css.js';\nimport { styles as fluentLight } from './light/grid.fluent.css.js';\nimport { styles as indigoLight } from './light/grid.indigo.css.js';\nimport { styles as materialLight } from './light/grid.material.css.js';\nimport { styles as shared } from './light/grid.shared.css.js';\n// Shared\nimport { styles as bootstrap } from './shared/grid.common.css.js';\n\nconst light = {\n  shared: css`\n      ${shared}\n  `,\n  bootstrap: css`\n      ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n      ${materialLight}\n  `,\n  fluent: css`\n      ${fluentLight}\n  `,\n  indigo: css`\n      ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n      ${shared}\n  `,\n  bootstrap: css`\n      ${bootstrapDark}\n  `,\n  material: css`\n      ${materialDark}\n  `,\n  fluent: css`\n      ${fluentDark}\n  `,\n  indigo: css`\n      ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"grid-themes.js","sourceRoot":"","sources":["../../../src/styles/themes/grid-themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAErE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\nimport type { Themes } from '../../internal/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/grid.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/grid.fluent.css.js';\nimport { styles as indigoDark } from './dark/grid.indigo.css.js';\nimport { styles as materialDark } from './dark/grid.material.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/grid.bootstrap.css.js';\nimport { styles as fluentLight } from './light/grid.fluent.css.js';\nimport { styles as indigoLight } from './light/grid.indigo.css.js';\nimport { styles as materialLight } from './light/grid.material.css.js';\nimport { styles as shared } from './light/grid.shared.css.js';\n// Shared\nimport { styles as bootstrap } from './shared/grid.common.css.js';\n\nconst light = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${shared}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/internal/theming.d.ts

@@ -1,34 +0,0 @@
-import type { CSSResult, ReactiveController, ReactiveControllerHost, ReactiveElement } from 'lit';
-type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
-export type Themes = {
-    light: {
-        [K in Theme | 'shared']?: CSSResult;
-    };
-    dark: {
-        [K in Theme | 'shared']?: CSSResult;
-    };
-};
-type ThemeChangedCallback = (theme: Theme) => unknown;
-type ThemingControllerConfig = {
-    themeChange?: ThemeChangedCallback;
-};
-declare class ThemingController implements ReactiveController {
-    private readonly _host;
-    private readonly _themes;
-    private readonly _options?;
-    private _theme;
-    private _variant;
-    get theme(): Theme;
-    constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig);
-    /** @internal */
-    hostConnected(): void;
-    /** @internal */
-    hostDisconnected(): void;
-    /** @internal */
-    handleEvent(): void;
-    private _getStyles;
-    protected _adoptStyles(): void;
-    private _handleThemeChanged;
-}
-export declare function addThemingController(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig): ThemingController;
-export type { ThemingController };

package/internal/theming.js

@@ -1,121 +0,0 @@
-import { adoptStyles, css, isServer } from 'lit';
-const CHANGE_THEME_EVENT = 'igc-change-theme';
-let theme;
-let themeVariant;
-function isStyleRule(rule) {
-    return rule != null && 'style' in rule;
-}
-function cssKeyToJsKey(key) {
-    return key.replace(/^--|-./g, (match) => {
-        return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();
-    });
-}
-function getAllCssVariableNames() {
-    const cssVars = new Set();
-    const styleSheets = Array.from(document.styleSheets);
-    for (const sheet of styleSheets) {
-        let rules;
-        try {
-            rules = sheet.cssRules;
-        }
-        catch {
-            continue;
-        }
-        if (!rules) {
-            continue;
-        }
-        for (const rule of Array.from(rules)) {
-            if (isStyleRule(rule)) {
-                const length = rule.style.length;
-                for (let i = 0; i < length; i++) {
-                    const style = rule.style[i];
-                    if (style.startsWith('--')) {
-                        cssVars.add(style);
-                    }
-                }
-            }
-        }
-    }
-    return cssVars;
-}
-function getElementCssVariables(allCssVars, element, pseudo) {
-    const cssVars = {};
-    const styles = getComputedStyle(element, pseudo);
-    for (const key of allCssVars) {
-        const value = styles.getPropertyValue(key);
-        if (value) {
-            cssVars[cssKeyToJsKey(key)] = value.trim();
-        }
-    }
-    return cssVars;
-}
-function getAllCssVariables() {
-    return isServer ? {} : getElementCssVariables(getAllCssVariableNames(), document.documentElement);
-}
-function isOfTypeTheme(theme) {
-    return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);
-}
-function isOfTypeThemeVariant(variant) {
-    return ['light', 'dark'].includes(variant);
-}
-function getTheme() {
-    const cssVars = getAllCssVariables();
-    const foundTheme = cssVars.igTheme;
-    const foundVariant = cssVars.igThemeVariant;
-    theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
-    themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
-    return { theme, themeVariant };
-}
-class ThemingController {
-    get theme() {
-        return this._theme;
-    }
-    constructor(host, themes, config) {
-        this._theme = 'bootstrap';
-        this._variant = 'light';
-        this._host = host;
-        this._themes = themes;
-        this._options = config;
-        this._host.addController(this);
-    }
-    hostConnected() {
-        this._handleThemeChanged();
-        globalThis.addEventListener(CHANGE_THEME_EVENT, this);
-    }
-    hostDisconnected() {
-        globalThis.removeEventListener(CHANGE_THEME_EVENT, this);
-    }
-    handleEvent() {
-        this._handleThemeChanged();
-    }
-    _getStyles() {
-        const props = this._themes[this._variant];
-        const styles = { shared: css ``, theme: css `` };
-        for (const [name, sheet] of Object.entries(props)) {
-            if (name === 'shared') {
-                styles.shared = sheet;
-            }
-            if (name === this.theme) {
-                styles.theme = sheet;
-            }
-        }
-        return styles;
-    }
-    _adoptStyles() {
-        const { theme: currentTheme, themeVariant } = getTheme();
-        this._theme = currentTheme;
-        this._variant = themeVariant;
-        const ctor = this._host.constructor;
-        const { shared, theme } = this._getStyles();
-        adoptStyles(this._host.shadowRoot, [...ctor.elementStyles, shared, theme]);
-    }
-    _handleThemeChanged() {
-        this._adoptStyles();
-        this._options?.themeChange?.call(this._host, this._theme);
-        this._host.requestUpdate();
-    }
-}
-export function addThemingController(host, themes, config) {
-    return new ThemingController(host, themes, config);
-}
-//# sourceMappingURL=theming.js.map

package/internal/theming.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theming.js","sourceRoot":"","sources":["../../src/internal/theming.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  CSSResult,\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n} from 'lit';\nimport { adoptStyles, css, isServer } from 'lit';\n\ntype Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\ntype ThemeVariant = 'light' | 'dark';\n\nexport type Themes = {\n  light: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n  dark: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n};\n\ntype ThemeChangedCallback = (theme: Theme) => unknown;\ntype ThemingControllerConfig = {\n  themeChange?: ThemeChangedCallback;\n};\n\nconst CHANGE_THEME_EVENT = 'igc-change-theme';\nlet theme: Theme;\nlet themeVariant: ThemeVariant;\n\nfunction isStyleRule(rule: CSSRule): rule is CSSStyleRule {\n  return rule != null && 'style' in rule;\n}\n\nfunction cssKeyToJsKey(key: string): string {\n  return key.replace(/^--|-./g, (match) => {\n    return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();\n  });\n}\n\nfunction getAllCssVariableNames(): Set<string> {\n  const cssVars = new Set<string>();\n  const styleSheets = Array.from(document.styleSheets);\n\n  for (const sheet of styleSheets) {\n    let rules: CSSRuleList | undefined;\n\n    // Potential CORS or access errors\n    try {\n      rules = sheet.cssRules;\n    } catch {\n      continue;\n    }\n\n    if (!rules) {\n      continue;\n    }\n\n    for (const rule of Array.from(rules)) {\n      if (isStyleRule(rule)) {\n        const length = rule.style.length;\n\n        for (let i = 0; i < length; i++) {\n          const style = rule.style[i];\n\n          if (style.startsWith('--')) {\n            cssVars.add(style);\n          }\n        }\n      }\n    }\n  }\n\n  return cssVars;\n}\n\nfunction getElementCssVariables(\n  allCssVars: Set<string>,\n  element: HTMLElement,\n  pseudo?: string\n): Record<string, string> {\n  const cssVars: Record<string, string> = {};\n  const styles = getComputedStyle(element, pseudo);\n\n  for (const key of allCssVars) {\n    const value = styles.getPropertyValue(key);\n\n    if (value) {\n      cssVars[cssKeyToJsKey(key)] = value.trim();\n    }\n  }\n\n  return cssVars;\n}\n\nfunction getAllCssVariables(): Record<string, string> {\n  /* c8 ignore next 2 */\n  return isServer ? {} : getElementCssVariables(getAllCssVariableNames(), document.documentElement);\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nfunction isOfTypeThemeVariant(variant: string): variant is ThemeVariant {\n  return ['light', 'dark'].includes(variant);\n}\n\nfunction getTheme() {\n  const cssVars = getAllCssVariables();\n  const foundTheme = cssVars.igTheme;\n  const foundVariant = cssVars.igThemeVariant;\n\n  theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';\n  themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';\n\n  return { theme, themeVariant };\n}\n\nclass ThemingController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & ReactiveElement;\n  private readonly _themes: Themes;\n  private readonly _options?: ThemingControllerConfig;\n\n  private _theme: Theme = 'bootstrap';\n  private _variant: ThemeVariant = 'light';\n\n  public get theme(): Theme {\n    return this._theme;\n  }\n\n  constructor(\n    host: ReactiveControllerHost & ReactiveElement,\n    themes: Themes,\n    config?: ThemingControllerConfig\n  ) {\n    this._host = host;\n    this._themes = themes;\n    this._options = config;\n    this._host.addController(this);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._handleThemeChanged();\n    globalThis.addEventListener(CHANGE_THEME_EVENT, this);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    globalThis.removeEventListener(CHANGE_THEME_EVENT, this);\n  }\n\n  /** @internal */\n  public handleEvent(): void {\n    this._handleThemeChanged();\n  }\n\n  private _getStyles() {\n    const props = this._themes[this._variant];\n    const styles = { shared: css``, theme: css`` };\n\n    for (const [name, sheet] of Object.entries(props)) {\n      if (name === 'shared') {\n        styles.shared = sheet;\n      }\n      if (name === this.theme) {\n        styles.theme = sheet;\n      }\n    }\n\n    return styles;\n  }\n\n  protected _adoptStyles(): void {\n    const { theme: currentTheme, themeVariant } = getTheme();\n    this._theme = currentTheme;\n    this._variant = themeVariant;\n\n    const ctor = this._host.constructor as typeof LitElement;\n    const { shared, theme } = this._getStyles();\n\n    adoptStyles(this._host.shadowRoot!, [...ctor.elementStyles, shared, theme]);\n  }\n\n  private _handleThemeChanged(): void {\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\n  }\n}\n\nexport function addThemingController(\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  config?: ThemingControllerConfig\n): ThemingController {\n  return new ThemingController(host, themes, config);\n}\n\nexport type { ThemingController };\n"]}