cats-data-grid 2.0.4 → 2.0.6

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, OnInit, EventEmitter, Renderer2, NgZone, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { OnChanges, OnInit, ElementRef, EventEmitter, Renderer2, NgZone, ChangeDetectorRef, SimpleChanges, DoCheck, AfterViewInit, OnDestroy } from '@angular/core';
 
 declare class CatsDataGridService {
     constructor();
@@ -34,6 +34,9 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     private renderer;
     private zone;
     private cd;
+    pinMenu: ElementRef;
+    colActionMenu: ElementRef;
+    table: ElementRef;
     tableOptions: any;
     totalRecords: number;
     sortingRequired: boolean;
@@ -45,6 +48,10 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     selectedRowEmpty: boolean;
     filterRequired: boolean;
     threeDotsMenuRequired: boolean;
+    settingsRequired: boolean;
+    settingsClicked: boolean;
+    resetPage: boolean;
+    rowId: any;
     showDropdown: boolean;
     height: number;
     groupByRequired: boolean;
@@ -52,8 +59,10 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     onCheckboxSelection: EventEmitter<any>;
     onScrollEmitter: EventEmitter<any>;
     filter: EventEmitter<any>;
+    onHideSettings: EventEmitter<any>;
     activeFilterIndex: number | null;
     originalRowData: any[];
+    activeAll: boolean;
     pageDetails: any;
     recordsToShow: any;
     sortingColumnIndex: number;
@@ -80,6 +89,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     columnDraggable: any[];
     activeGroups: any[];
     groupBy: string[];
+    groupByField: string;
     dragGroupIndex: number | null;
     dateConfig: DateConfig;
     filterOptions: {
@@ -96,12 +106,24 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     private removeMouseUp;
     private rafId;
     appliedFilters: ColumnFilter[];
+    rowGripFieldName: string;
+    pageNumber: number;
+    pageSize: number;
     appliedFiltersEvent: EventEmitter<ColumnFilter[]>;
     activeGroupsEvent: EventEmitter<any[]>;
     dynamicGroupingFiltering: boolean;
+    atLeastOneColumnChecked: boolean;
+    draggedRowData: any;
+    firstCol: any;
+    isRowSelected: boolean;
+    onRowClicked: EventEmitter<any>;
+    onCellClicked: EventEmitter<any>;
     constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    getColumnDetail(colDefs: any, groupByField: any): any;
+    activeAllSelection(event: Event): void;
+    changeActiveColSelection(event: Event, col: any): void;
     /**
      * @description Prepares and normalizes column definitions for filtering and menu behavior
      * @author Anand Pandey
@@ -136,6 +158,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
      * @returns void
      */
     applyAllFilters(): void;
+    evaluateFieldValue(row: any, field: string): any;
     resetFilter(col: any): void;
     removeActiveFilter(col: any): void;
     /**
@@ -253,7 +276,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
      * @returns {void}
      */
     pinColumn(col: any, index: number, direction: string): void;
-    showPinActions(): void;
+    showPinActions(event: MouseEvent): void;
     hidePinActions(): void;
     /**
      * @description Updates the horizontal left and right offsets of pinned columns by assigning cumulative widths to each pinned column and resetting non-pinned columns.
@@ -442,8 +465,18 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     disableColumnDrag(event: MouseEvent, index: number): void;
     dateTimeSelected(date: any): void;
     convertToNumber(value: number | string): number;
+    hideSettings(): void;
+    dragRow(e: Event, row: any): void;
+    allowRowDrop(e: Event): void;
+    dropRow(targetRow: any): void;
+    moveRow(from: number, to: number): void;
+    clearAllFilter(): void;
+    onBtFirstClick(): void;
+    onBtLastClick(): void;
+    onRowClick(row: any): void;
+    onCellClick(row: any, col: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "appliedFilters": { "alias": "appliedFilters"; "required": false; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "rowId": { "alias": "rowId"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "groupByField": { "alias": "groupByField"; "required": false; }; "appliedFilters": { "alias": "appliedFilters"; "required": false; }; "rowGripFieldName": { "alias": "rowGripFieldName"; "required": false; }; "pageNumber": { "alias": "pageNumber"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "onHideSettings": "onHideSettings"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; "onRowClicked": "onRowClicked"; "onCellClicked": "onCellClicked"; }, never, never, true, never>;
 }
 
 declare class CommonRendererComponent {
@@ -452,7 +485,12 @@ declare class CommonRendererComponent {
     private static _activeTagId;
     activeRowId: i0.WritableSignal<number | null>;
     activeTagId: i0.WritableSignal<string | null>;
+    clickTimer: any;
+    clickDelay: number;
     maxVisible: number;
+    data: any;
+    paramsVal: any;
+    tagClasses: any;
     cellInit(params: any, data: any): void;
     /**
      * @description Returns the renderer type defined in cellRendererParams.
@@ -512,6 +550,8 @@ declare class CommonRendererComponent {
      * @returns {void}
      */
     onActionClick(action: any): void;
+    linkSingleClick(): void;
+    linkDoubleClick(): void;
     /**
      * @description Closes the action menu when clicking outside the component.
      * @author Anand Pandey
@@ -524,19 +564,13 @@ declare class CommonRendererComponent {
      * @author Anand Pandey
      * @returns {string[]}
      */
-    get allTags(): {
-        tagValue: any;
-        class: any;
-    }[];
+    get allTags(): any;
     /**
      * @description Returns the subset of tags that should be visibly displayed in the UI based on maxVisible count.
      * @author Anand Pandey
      * @returns {string[]}
      */
-    get visibleTags(): {
-        tagValue: any;
-        class: any;
-    }[];
+    get visibleTags(): any;
     /**
      * @description Returns the count of tags hidden behind the "+" more indicator.
      * @author Anand Pandey
@@ -563,9 +597,363 @@ declare class CommonRendererComponent {
      * @returns {void}
      */
     closeDropdown(event: MouseEvent): void;
+    /**
+     * @description Returns normalized link values derived from the cell `value`.
+     * Uses the configured `linkKey` from `cellParams` to extract display data
+     * @author Anand Pandey
+     * @returns {Array<{ linkValue: string; class: string }>} Normalized link values
+     */
+    get linkVal(): any;
+    /**
+     * @description Normalizes the component `value` into a consistent array structure.
+     * @author Anand Pandey
+     * @param {string} key Key in `cellParams` used to determine which field to read from object values
+     * @param {string} valueProp Property name assigned to the normalized output value
+     * @returns {Array<{ [key: string]: string; class: string }>} Array of normalized value objects
+     */
+    transformValue(key: string, valueProp: any): {
+        [valueProp]: any;
+        class: any;
+    }[];
+    parseColValue(row: any, col: any): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommonRendererComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CommonRendererComponent, "lib-common-renderer", never, {}, {}, never, never, true, never>;
 }
 
-export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent };
-export type { ColumnFilter, FilterCondition };
+interface CatsTreeTableColumn {
+    field: string;
+    header?: string;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    class?: string;
+    colId?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterType?: 'text' | 'number' | 'date' | 'set';
+    leftPinned?: boolean;
+    rightPinned?: boolean;
+    leftOffset?: number;
+    rightOffset?: number;
+    active?: boolean;
+    filters?: TreeFilterCondition[];
+    options?: any[];
+    filteredOptions?: any[];
+    selectedValues?: Set<any>;
+    cellRenderer?: any;
+    cellRendererParams?: any;
+}
+interface TreeFilterCondition {
+    filterOperation: string;
+    filterValue: any;
+}
+interface CatsTreeRowOptions {
+    showCheckbox?: boolean;
+    showToggle?: boolean;
+    showNodeIcon?: boolean;
+    showLink?: boolean;
+    disabled?: boolean;
+}
+interface CatsTreeExpandEvent<T = any> {
+    node: T;
+    level: number;
+    path: T[];
+    expanded: boolean;
+}
+interface CatsTreeSelectionChangeEvent<T = any> {
+    node: T;
+    level: number;
+    path: T[];
+    checked: boolean;
+    selectedNodes: T[];
+}
+interface CatsTreeLinkClickEvent<T = any> {
+    node: T;
+    level: number;
+    path: T[];
+    url: string | null;
+}
+type RowKind = 'node' | 'loading' | 'no-data';
+interface RowView<T = any> {
+    kind: RowKind;
+    level: number;
+    path: T[];
+    node: T;
+    trackKey: string | number;
+}
+declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, AfterViewInit, OnDestroy {
+    private renderer;
+    private zone;
+    private cd;
+    tableAreaRef: ElementRef<HTMLElement>;
+    pinMenu?: ElementRef<HTMLElement>;
+    data: T[];
+    columns: CatsTreeTableColumn[];
+    idField: string;
+    labelField: string;
+    childrenField: string;
+    treeColumnField?: string;
+    indentPx: number;
+    showHeader: boolean;
+    expandIcon: string;
+    collapseIcon: string;
+    iconBasePath: string;
+    showCheckbox: boolean;
+    showNodeIcon: boolean;
+    noDataText: string;
+    loadingText: string;
+    emitExpandAlways: boolean;
+    sortingRequired: boolean;
+    filterRequired: boolean;
+    threeDotsMenuRequired: boolean;
+    settingsRequired: boolean;
+    settingsClicked: boolean;
+    checkBoxSelection: boolean;
+    checkboxSelectionType: 'multiple' | 'single';
+    isExpandable: (node: T, level: number, path: T[]) => boolean;
+    rowOptionsResolver: (node: T, level: number, path: T[]) => CatsTreeRowOptions;
+    nodeIconResolver: (node: T, level: number, path: T[]) => string | null;
+    linkResolver: (node: T, level: number, path: T[]) => string | null;
+    nodeToggle: EventEmitter<CatsTreeExpandEvent<T>>;
+    selectionChange: EventEmitter<CatsTreeSelectionChangeEvent<T>>;
+    linkClick: EventEmitter<CatsTreeLinkClickEvent<T>>;
+    onHideSettings: EventEmitter<any>;
+    protected rows: RowView<T>[];
+    sortingColumnIndex: number | null;
+    sortingType: {
+        [key: number]: string;
+    };
+    filteredData: T[];
+    originalRowData: T[];
+    activeFilters: Map<string, any>;
+    appliedFilters: any[];
+    menuVisible: boolean[];
+    dragOverIndex: number | null;
+    draggedIndex: number | null;
+    activeFilterIndex: number | null;
+    resizingColumnIndex: number | null;
+    startX: number;
+    startWidth: number;
+    isResizing: boolean;
+    showMoveIcon: {
+        [key: number]: boolean;
+    };
+    showPin: boolean;
+    pinActionClicked: Record<string, string>;
+    columnDraggable: boolean[];
+    showPageSizeList: boolean;
+    activeAll: boolean;
+    atLeastOneColumnChecked: boolean;
+    selectedRow: T[];
+    originalColumns: CatsTreeTableColumn[];
+    private removeMouseMove;
+    private removeMouseUp;
+    private rafId;
+    private removeDragOver;
+    private removeDrop;
+    filterOptions: {
+        label: string;
+        value: string;
+    }[];
+    numberFilterOptions: {
+        label: string;
+        value: string;
+    }[];
+    private expandedKeys;
+    private selectedKeys;
+    private fallbackKey;
+    private fallbackSeq;
+    private resolvedTreeColumnField?;
+    constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngDoCheck(): void;
+    protected get treeColumn(): CatsTreeTableColumn;
+    /**
+     * Initialize column properties for filtering, sorting, and customization
+     */
+    private initializeColumns;
+    /**
+     * Extract unique values from data for set filter
+     */
+    private extractUniqueValues;
+    /**
+     * Sort data based on column and sorting type
+     */
+    protected onSortingRowData(sortingColumnIndex: number, col: CatsTreeTableColumn): void;
+    /**
+     * Sort from the three-dots menu with an explicit direction (matches `cats-data-grid` UX).
+     */
+    protected onSort(col: CatsTreeTableColumn, type: string, sortingColumIndex: number): void;
+    /**
+     * Apply sorting to the row data
+     */
+    private applySort;
+    /**
+     * Apply all active filters
+     */
+    applyAllFilters(): void;
+    /**
+     * Evaluate text filter condition
+     */
+    private evaluateTextFilterCondition;
+    /**
+     * Toggle column filter visibility
+     */
+    protected toggleFilter(col: CatsTreeTableColumn, index: number, event: MouseEvent): void;
+    /**
+     * Reset filter for a column
+     */
+    protected resetFilter(col: CatsTreeTableColumn): void;
+    /**
+     * Start column resize
+     */
+    protected startResize(event: MouseEvent, index: number): void;
+    /**
+     * Handle mouse move during resize
+     */
+    private onMouseMove;
+    /**
+     * Stop column resize
+     */
+    private stopResize;
+    /**
+     * Handle column drag start
+     */
+    protected onDragStart(event: DragEvent, index: number): void;
+    /**
+     * Handle column drag over
+     */
+    protected onDragOver(event: DragEvent, index: number): void;
+    /**
+     * Handle column drop
+     */
+    protected onDrop(event: DragEvent, index: number): void;
+    /**
+     * Handle drag end
+     */
+    protected onDragEnd(): void;
+    /**
+     * Pin column to left or right
+     */
+    protected pinColumn(col: CatsTreeTableColumn, index: number, direction: string): void;
+    protected showPinActions(event: MouseEvent): void;
+    protected hidePinActions(): void;
+    /**
+     * Update pinned column offsets
+     */
+    protected updatePinnedOffsets(): void;
+    /**
+     * Filter set options based on search text
+     */
+    protected filterSetOptions(col: CatsTreeTableColumn, event: any): void;
+    /**
+     * Toggle set filter option
+     */
+    protected toggleSetOption(col: CatsTreeTableColumn, option: any, event: any): void;
+    /**
+     * Toggle select all in set filter
+     */
+    protected toggleSelectAllSetFilter(col: CatsTreeTableColumn, event: any): void;
+    /**
+     * Get column style
+     */
+    protected getStyle(col: CatsTreeTableColumn): any;
+    /**
+     * Toggle column visibility
+     */
+    protected changeActiveColSelection(event: Event, col: CatsTreeTableColumn): void;
+    /**
+     * Compute minimum table width based on active column widths
+     */
+    protected getTableMinWidth(): number;
+    /**
+     * Select/deselect all columns
+     */
+    protected activeAllSelection(event: Event): void;
+    /**
+     * Hide settings
+     */
+    protected hideSettings(): void;
+    /**
+     * Close all menus
+     */
+    protected onClickOutside(): void;
+    /**
+     * Open column menu
+     */
+    protected openMenu(event: MouseEvent, col: CatsTreeTableColumn, index: number): void;
+    /**
+     * On header checkbox change
+     */
+    protected onHeaderCheckboxChange(event: any): void;
+    /**
+     * On row checkbox change
+     */
+    protected onRowCheckboxChange(event: any, node: T): void;
+    /**
+     * Check if all rows are selected
+     */
+    protected checkAllSelected(): boolean;
+    /**
+     * Check if some rows are selected (indeterminate state)
+     */
+    protected checkIndeterminate(): boolean;
+    /**
+     * Check if row is selected
+     */
+    protected isRowSelected(node: T): boolean;
+    protected toggle(node: T, level: number, path: T[]): void;
+    protected isExpanded(node: T): boolean;
+    protected onCheckboxChange(node: T, level: number, path: T[], checked: boolean): void;
+    protected isChecked(node: T): boolean;
+    protected onLinkClicked(e: MouseEvent, node: T, level: number, path: T[]): void;
+    protected resolveIconSrc(icon: string | null): string | null;
+    protected getValue(node: T, fieldPath: string): any;
+    protected isNodeRow(row: RowView<T>): boolean;
+    protected rowOptions(row: RowView<T>): CatsTreeRowOptions;
+    protected showToggleFor(row: RowView<T>): boolean;
+    protected showCheckboxFor(row: RowView<T>): boolean;
+    protected showNodeIconFor(row: RowView<T>): boolean;
+    protected showLinkFor(row: RowView<T>): boolean;
+    protected isDisabledRow(row: RowView<T>): boolean;
+    protected labelFor(row: RowView<T>): any;
+    protected toggleIconFor(row: RowView<T>): string;
+    protected nodeIconFor(row: RowView<T>): string | null;
+    protected linkUrlFor(row: RowView<T>): string | null;
+    private getChildren;
+    private rebuildRows;
+    private walk;
+    private getNodeKey;
+    private getSelectedNodes;
+    /**
+     * Autosize column to fit content
+     */
+    protected autosizeColumn(col: CatsTreeTableColumn, index: number): void;
+    /**
+     * Autosize all columns
+     */
+    protected autosizeAllColumns(): void;
+    /**
+     * Group by column
+     */
+    protected groupByColumn(col: CatsTreeTableColumn, index: number): void;
+    /**
+     * Show column chooser
+     */
+    protected showColumnChooser(colIdx: number): void;
+    /**
+     * Reset columns to original state
+     */
+    protected resetColumns(): void;
+    /**
+     * Save column state
+     */
+    private saveColumnState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommonTreeTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommonTreeTableComponent<any>, "cats-tree-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "labelField": { "alias": "labelField"; "required": false; }; "childrenField": { "alias": "childrenField"; "required": false; }; "treeColumnField": { "alias": "treeColumnField"; "required": false; }; "indentPx": { "alias": "indentPx"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "iconBasePath": { "alias": "iconBasePath"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showNodeIcon": { "alias": "showNodeIcon"; "required": false; }; "noDataText": { "alias": "noDataText"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "emitExpandAlways": { "alias": "emitExpandAlways"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "rowOptionsResolver": { "alias": "rowOptionsResolver"; "required": false; }; "nodeIconResolver": { "alias": "nodeIconResolver"; "required": false; }; "linkResolver": { "alias": "linkResolver"; "required": false; }; }, { "nodeToggle": "nodeToggle"; "selectionChange": "selectionChange"; "linkClick": "linkClick"; "onHideSettings": "onHideSettings"; }, never, never, true, never>;
+}
+
+export { CatsDataGridComponent, CatsDataGridService, ColDefs, CommonRendererComponent, CommonTreeTableComponent };
+export type { CatsTreeExpandEvent, CatsTreeLinkClickEvent, CatsTreeRowOptions, CatsTreeSelectionChangeEvent, CatsTreeTableColumn, ColumnFilter, FilterCondition, TreeFilterCondition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cats-data-grid",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "peerDependencies": {
     "@angular/core": ">=18 <22",
     "@angular/common": ">=18 <22"

package/styles/_index.scss

@@ -1,3 +1,3 @@
-@forward "sass-utils";
-@forward "component";
-@forward "base";
+@forward "sass-utils";
+@forward "component";
+@forward "base";

package/styles/base/_fonts.scss

@@ -1,74 +1,74 @@
-// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-@use "../sass-utils" as *;
-
-:root {
-  --fs-6: 6px;
-  --fs-12: 12px;
-  --fs-14: 14px;
-  --fs-16: 16px;
-  --fs-18: 18px;
-  --fs-20: 20px;
-  --fs-24: 24px;
-  --fs-28: 28px;
-  --fs-30: 30px;
-  --fs-32: 32px;
-  --fs-42: 42px;
-  --fs-48: 48px;
-  --img-w: 28px;
-  --scale: 1;
-}
-
-@include width-range($tablet, $mediumDesktop) {
-  :root {
-    --scale: 1.5;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
-
-@include width-range($largeDesktop, $extraLargeDesktop) {
-  :root {
-    --scale: 1.33;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
-
-@include width-range($xxlargeDesktop, $ultraWideDesktop) {
-  :root {
-    --scale: 1.25;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
+// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
+
+@use "../sass-utils" as *;
+
+:root {
+  --fs-6: 6px;
+  --fs-12: 12px;
+  --fs-14: 14px;
+  --fs-16: 16px;
+  --fs-18: 18px;
+  --fs-20: 20px;
+  --fs-24: 24px;
+  --fs-28: 28px;
+  --fs-30: 30px;
+  --fs-32: 32px;
+  --fs-42: 42px;
+  --fs-48: 48px;
+  --img-w: 28px;
+  --scale: 1;
+}
+
+@include width-range($tablet, $mediumDesktop) {
+  :root {
+    --scale: 1.5;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($largeDesktop, $extraLargeDesktop) {
+  :root {
+    --scale: 1.33;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($xxlargeDesktop, $ultraWideDesktop) {
+  :root {
+    --scale: 1.25;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}