@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

package/themes/default/table-pagination.scss

@@ -1,27 +1,42 @@
+
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-table-pagination-height: 2.9375rem;
+  --ard-table-pagination-gap: 2rem;
+  --ard-table-pagination-padding: 0 0.5rem 0 1rem;
+  --ard-table-pagination-items-per-page-gap: 0.5rem;
+  --ard-table-pagination-current-page-gap: 1.25rem;
+  --ard-table-pagination-height-compact: 2.1875rem;
+  --ard-table-pagination-font-size-compact: 0.875rem;
+  --ard-table-pagination-select-padding-left: 0.875em;
+  --ard-table-pagination-disabled-text-opacity: 50%;
+}
+
 .ard-pagination {
-  height: 2.9375rem;
+  height: var(--ard-table-pagination-height, 2.9375rem);
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 2rem;
-  padding: 0 0.5rem 0 1rem;
+  gap: var(--ard-table-pagination-gap, 2rem);
+  padding: var(--ard-table-pagination-padding, 0 0.5rem 0 1rem);
   box-sizing: border-box;
 
   .ard-pagination__items-per-page {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--ard-table-pagination-items-per-page-gap, 0.5rem);
   }
   .ard-pagination__current-page {
     display: flex;
     align-items: center;
-    gap: 1.25rem;
+    gap: var(--ard-table-pagination-current-page-gap, 1.25rem);
   }
 
   //! compact
   &.ard-compact {
-    height: 2.1875rem;
-    font-size: 0.875rem;
+    height: var(--ard-table-pagination-height-compact, 2.1875rem);
+    font-size: var(--ard-table-pagination-font-size-compact, 0.875rem);
   }
 
   //! aligns
@@ -40,7 +55,7 @@
 
   //! style overrides
   .ard-select {
-    padding-left: 0.875em;
+    padding-left: var(--ard-table-pagination-select-padding-left, 0.875em);
   }
 }
 
@@ -50,7 +65,7 @@
     user-select: none;
 
     .ard-pagination__text {
-      opacity: 50%;
+      opacity: var(--ard-table-pagination-disabled-text-opacity, 50%);
     }
   }
 }

package/themes/default/table.scss

@@ -1,13 +1,48 @@
 @use './coloring' as CM;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  // --ard-table-background: ;
+  // --ard-table-border-width: ;
+  // --ard-table-border-style: ;
+  // --ard-table-border-color: ;
+  --ard-table-cell-padding: 0 0.75rem;
+  --ard-table-header-gap: 0.75rem;
+  --ard-table-header-cell-height: 3.375rem;
+  --ard-table-header-cell-font-weight: 500;
+  --ard-table-header-cell-letter-spacing: 0.25px;
+  --ard-table-body-cell-height: 3rem;
+  // --ard-table-zebra-background: ;
+  --ard-table-disabled-row-opacity: 50%;
+  --ard-table-bold-row-font-weight: 600;
+  --ard-table-sticky-header-top: 0;
+  --ard-table-sticky-header-z-index: 2;
+  --ard-table-caption-height: 3.125rem;
+  // --ard-table-caption-color: ;
+  // --ard-table-caption-background: ;
+  // --ard-table-caption-border-color: ;
+  --ard-table-progress-bar-height: 0.1875rem;
+  --ard-table-progress-bar-z-index: 1;
+  --ard-table-sort-gap: 0.375rem;
+  --ard-table-sort-border-radius: 0.25rem;
+  --ard-table-sort-outline-offset: 0.25rem;
+  --ard-table-sort-outline-width: 2px;
+  --ard-table-sort-outline-color: black;
+  --ard-table-sort-icon-size: 1rem;
+  --ard-table-sort-icon-weight: 900;
+  --ard-table-border-radius: 0.5rem;
+}
+
 .ard-table {
   @include CM.typeColors();
   border-collapse: collapse;
-  background: ARD.$bg;
+  background: var(--ard-table-background, #{ARD.$bg});
 
   .ard-table__body {
-    border: 1px solid ARD.$detail-ultralight;
+    border: var(--ard-table-border-width, 1px) var(--ard-table-border-style, solid)
+      var(--ard-table-border-color, #{ARD.$detail-ultralight});
   }
   .ard-table__header-cell,
   .ard-table__body-cell {
@@ -16,14 +51,14 @@
     > .ard-table__cell-container {
       height: max-content;
       max-height: 100%;
-      padding: 0 0.75rem;
+      padding: var(--ard-table-cell-padding, 0 0.75rem);
       box-sizing: border-box;
-      font-size: 0.875rem;
+      font-size: var(--ard-form-field-font-size, 0.875rem);
 
       .ard-table__header-template-container {
         display: flex;
         align-items: center;
-        gap: 0.75rem;
+        gap: var(--ard-table-header-gap, 0.75rem);
 
         .ard-table__header-content-container {
           overflow-x: hidden;
@@ -34,12 +69,12 @@
     }
   }
   .ard-table__header-cell {
-    height: 3.375rem;
-    font-weight: 500;
-    letter-spacing: 0.25px;
+    height: var(--ard-table-header-cell-height, 3.375rem);
+    font-weight: var(--ard-table-header-cell-font-weight, 500);
+    letter-spacing: var(--ard-table-header-cell-letter-spacing, 0.25px);
   }
   .ard-table__body-cell {
-    height: 3rem;
+    height: var(--ard-table-body-cell-height, 3rem);
     transition: background-color 0.15s ease;
 
     .ard-table__cell-container {
@@ -50,21 +85,21 @@
   }
   .ard-table__checkbox-cell {
     > .ard-table__cell-container {
-      width: 3rem;
-      height: 3rem;
+      width: var(--ard-table-body-cell-height, 3rem);
+      height: var(--ard-table-body-cell-height, 3rem);
       display: flex;
       justify-content: center;
       align-items: center;
     }
   }
   .ard-table__body-row .ard-table__body-cell {
-    border-bottom: 1px solid ARD.$detail-ultralight;
+    border-bottom: 1px solid var(--ard-table-border-color, #{ARD.$detail-ultralight});
   }
 
   //! empty rows
   .ard-table__empty-row {
     .ard-table__empty-cell {
-      height: 3rem;
+      height: var(--ard-table-body-cell-height, 3rem);
     }
     &:not(:last-of-type) .ard-table__empty-cell {
       border-bottom: 1px solid transparent;
@@ -78,24 +113,24 @@
       pointer-events: none;
     }
     .ard-table__body {
-      opacity: 40%;
+      opacity: var(--ard-table-loading-opacity, 40%);
     }
     .ard-table__header .ard-table__checkbox-cell {
-      opacity: 40%;
+      opacity: var(--ard-table-loading-opacity, 40%);
     }
   }
   .ard-table__progress-bar-row {
-    background-color: ARD.$bg;
-    border-left: 1px solid ARD.$detail-ultralight;
-    border-right: 1px solid ARD.$detail-ultralight;
-    border-bottom: 1px solid ARD.$bg;
+    background-color: var(--ard-table-background, #{ARD.$bg});
+    border-left: 1px solid var(--ard-table-border-color, #{ARD.$detail-ultralight});
+    border-right: 1px solid var(--ard-table-border-color, #{ARD.$detail-ultralight});
+    border-bottom: 1px solid var(--ard-table-background, #{ARD.$bg});
 
     .ard-table__progress-bar-cell {
-      height: 0.1875rem;
+      height: var(--ard-table-progress-bar-height, 0.1875rem);
 
       ard-progress-bar {
         position: relative;
-        z-index: 1;
+        z-index: var(--ard-table-progress-bar-z-index, 1);
         margin: -1px;
 
         & > .ard-progress-bar {
@@ -115,21 +150,21 @@
         font: inherit;
         width: 100%;
         display: flex;
-        gap: 0.375rem;
+        gap: var(--ard-table-sort-gap, 0.375rem);
         cursor: pointer;
-        border-radius: 0.25rem;
-        outline-offset: 0.25rem;
+        border-radius: var(--ard-table-sort-border-radius, 0.25rem);
+        outline-offset: var(--ard-table-sort-outline-offset, 0.25rem);
 
         &:focus-visible {
-          outline: 2px solid black;
+          outline: var(--ard-table-sort-outline-width, 2px) solid var(--ard-table-sort-outline-color, black);
         }
         .ard-table__header-sort-icon {
-          height: 1rem;
+          height: var(--ard-table-sort-icon-size, 1rem);
           overflow: hidden;
         }
         ard-icon {
-          font-size: 1rem;
-          font-weight: 900;
+          font-size: var(--ard-table-sort-icon-size, 1rem);
+          font-weight: var(--ard-table-sort-icon-weight, 900);
         }
       }
     }
@@ -138,13 +173,13 @@
   //! caption
   .ard-table__caption {
     caption-side: bottom;
-    height: 3.125rem;
+    height: var(--ard-table-caption-height, 3.125rem);
     box-sizing: border-box;
-    color: ARD.$detail;
-    background: ARD.$bg;
-    border: 1px solid ARD.$detail-ultralight;
+    color: var(--ard-table-caption-color, #{ARD.$detail});
+    background: var(--ard-table-caption-background, #{ARD.$bg});
+    border: 1px solid var(--ard-table-caption-border-color, #{ARD.$detail-ultralight});
     border-top: none;
-    padding: 0 0.75rem;
+    padding: var(--ard-table-caption-padding, 0 0.75rem);
 
     .ard-table__caption-container {
       display: flex;
@@ -156,14 +191,14 @@
   //! footer
   .ard-table__foot {
     .ard-table__pagination-cell {
-      border: 1px solid ARD.$detail-ultralight;
+      border: 1px solid var(--ard-table-footer-border-color, #{ARD.$detail-ultralight});
     }
   }
 
   //! color
   --ard-_table-header-border: var(--ard-cmpcl--border);
   --ard-_table-header-border-light: var(--ard-cmpcl--border-light);
-  --ard-_table-border: ARD.$border;
+  --ard-_table-border: var(--ard-table-border-color-strong, #{ARD.$border});
   --ard-_table-header-background: var(--ard-cmpcl--bg);
   --ard-_table-header-background-light: var(--ard-cmpcl--bg-header);
   --ard-_table-header-color: var(--ard-cmpcl--content);
@@ -174,7 +209,7 @@
   //! appearances
   &.ard-appearance-strong {
     .ard-table__header {
-      border-bottom: 1px solid ARD.$detail-ultralight;
+      border-bottom: 1px solid var(--ard-table-border-color, #{ARD.$detail-ultralight});
       background-color: var(--ard-_table-header-background);
     }
     .ard-table__header-cell {
@@ -196,14 +231,14 @@
   }
   &.ard-appearance-colorless {
     .ard-table__header-cell {
-      color: ARD.$text;
+      color: var(--ard-table-header-color, #{ARD.$text});
     }
     .ard-table__header {
-      border: 1px solid ARD.$detail-ultralight;
-      background-color: ARD.$bg;
+      border: 1px solid var(--ard-table-border-color, #{ARD.$detail-ultralight});
+      background-color: var(--ard-table-background, #{ARD.$bg});
     }
     .ard-table__header-row .ard-table__header-cell {
-      border-bottom: 1px solid ARD.$detail-ultralight;
+      border-bottom: 1px solid var(--ard-table-border-color, #{ARD.$detail-ultralight});
     }
   }
   //! variants
@@ -211,41 +246,40 @@
     .ard-table,
     .ard-table__header,
     .ard-table__body {
-      border-radius: 8px;
+      border-radius: var(--ard-table-border-radius, 8px);
     }
     .ard-table__header-row:first-child {
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
-
+      border-top-left-radius: var(--ard-table-border-radius, 8px);
+      border-top-right-radius: var(--ard-table-border-radius, 8px);
       .ard-table__header-cell:first-child {
-        border-top-left-radius: 8px;
+        border-top-left-radius: var(--ard-table-border-radius, 8px);
       }
     }
     .ard-table__header-row:first-child .ard-table__header-cell:last-child {
-      border-top-right-radius: 8px;
+      border-top-right-radius: var(--ard-table-border-radius, 8px);
     }
     .ard-table__body-row:last-child .ard-table__body-cell:first-child {
-      border-bottom-left-radius: 8px;
+      border-bottom-left-radius: var(--ard-table-border-radius, 8px);
     }
     .ard-table__body-row:last-child .ard-table__body-cell:last-child {
-      border-bottom-right-radius: 8px;
+      border-bottom-right-radius: var(--ard-table-border-radius, 8px);
     }
     .ard-table__foot {
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+      border-bottom-right-radius: var(--ard-table-border-radius, 8px);
       .ard-table__foot-row {
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
+        border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+        border-bottom-right-radius: var(--ard-table-border-radius, 8px);
 
         .ard-table__pagination-cell {
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
+          border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+          border-bottom-right-radius: var(--ard-table-border-radius, 8px);
         }
       }
     }
     .ard-table__caption {
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+      border-bottom-right-radius: var(--ard-table-border-radius, 8px);
 
       + .ard-table__body {
         * {
@@ -265,35 +299,35 @@
     .ard-table__header-cell,
     .ard-table__body-cell {
       > .ard-table__cell-container {
-        padding: 0 0.625rem;
-        font-size: 0.875rem;
+        padding: var(--ard-table-cell-padding-compact, 0 0.625rem);
+        font-size: var(--ard-table-font-size-compact, 0.875rem);
       }
     }
     .ard-table__header-cell {
-      height: 2.625rem;
+      height: var(--ard-table-header-cell-height-compact, 2.625rem);
 
       > .ard-table__cell-container {
         letter-spacing: 0.18px;
       }
     }
     .ard-table__body-cell {
-      height: 2.25rem;
+      height: var(--ard-table-body-cell-height-compact, 2.25rem);
     }
     .ard-table__checkbox-cell {
       > .ard-table__cell-container {
-        width: 2.25rem;
-        height: 2.25rem;
+        width: var(--ard-table-checkbox-cell-width-compact, 2.25rem);
+        height: var(--ard-table-checkbox-cell-height-compact, 2.25rem);
       }
     }
     .ard-table__caption {
-      height: 2.25rem;
+      height: var(--ard-table-caption-height-compact, 2.25rem);
     }
   }
 
   //! zebra
   &.ard-zebra-table {
     .ard-table__body-row:nth-of-type(2n-1) {
-      background: ARD.$darken-overlay-ultralight;
+      background: var(--ard-table-zebra-background, #{ARD.$darken-overlay-ultralight});
     }
   }
 
@@ -313,21 +347,21 @@
   //! disabled
   .ard-table__disabled-row {
     pointer-events: none;
-    opacity: 50%;
+    opacity: var(--ard-table-disabled-row-opacity, 50%);
     user-select: none;
   }
 
   //! bold
   .ard-table__bold-row {
-    font-weight: 600;
+    font-weight: var(--ard-table-bold-row-font-weight, 700);
   }
 
   //! sticky header
   &.ard-sticky-header {
     .ard-table__header {
       position: sticky;
-      top: 0;
-      z-index: 2;
+      top: var(--ard-table-sticky-header-top, 0);
+      z-index: var(--ard-table-sticky-header-z-index, 2);
     }
   }
 
@@ -364,7 +398,7 @@
   &.ard-header-align-center-center,
   &.ard-header-align-center-right {
     .ard-table__header-cell {
-      vertical-align: middle;
+      vertical-align: center;
     }
   }
   &.ard-header-align-bottom-left,
@@ -410,7 +444,7 @@
   &.ard-align-center-center,
   &.ard-align-center-right {
     .ard-table__body-cell {
-      vertical-align: middle;
+      vertical-align: center;
     }
   }
   &.ard-align-bottom-left,

package/lib/statebox/index.d.ts

@@ -1,4 +0,0 @@
-export * from './statebox.component';
-export * from './statebox.defaults';
-export * from './statebox.module';
-export { StateboxState, StateboxValue } from './statebox.types';

package/lib/statebox/statebox.component.d.ts

@@ -1,26 +0,0 @@
-import { ControlValueAccessor } from '@angular/forms';
-import { _NgModelComponentBase } from './../_internal/ngmodel-component';
-import { ClickStrategy } from './../types/utility.types';
-import { ArdStateboxDefaults } from './statebox.defaults';
-import { StateboxState, StateboxValue, _StateboxInternalState } from './statebox.types';
-import * as i0 from "@angular/core";
-export declare class ArdiumStateboxComponent extends _NgModelComponentBase implements ControlValueAccessor {
-    protected readonly _DEFAULTS: ArdStateboxDefaults;
-    constructor(defaults: ArdStateboxDefaults);
-    readonly states: import("@angular/core").InputSignal<StateboxState[]>;
-    readonly _states: import("@angular/core").Signal<_StateboxInternalState[]>;
-    readonly _defaultState: import("@angular/core").Signal<_StateboxInternalState>;
-    readonly clickStrategy: import("@angular/core").InputSignal<ClickStrategy>;
-    readonly wrapperClasses: import("@angular/core").InputSignal<string>;
-    readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly state: import("@angular/core").ModelSignal<StateboxValue>;
-    private readonly _stateIndex;
-    readonly internalState: import("@angular/core").Signal<_StateboxInternalState>;
-    writeValue(v: StateboxValue): void;
-    private _stateMapFn;
-    onClick(): void;
-    protected _emitChange(): void;
-    readonly ngStyle: import("@angular/core").Signal<Record<string, any>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumStateboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumStateboxComponent, "ard-statebox", never, { "states": { "alias": "states"; "required": false; "isSignal": true; }; "clickStrategy": { "alias": "clickStrategy"; "required": false; "isSignal": true; }; "wrapperClasses": { "alias": "wrapperClasses"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; }, { "state": "stateChange"; }, never, never, false, never>;
-}

package/lib/statebox/statebox.defaults.d.ts

@@ -1,10 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../_internal/ngmodel-component';
-import { ClickStrategy } from './../types/utility.types';
-import { StateboxState } from './statebox.types';
-export interface ArdStateboxDefaults extends _NgModelComponentDefaults {
-    clickStrategy: ClickStrategy;
-    states: StateboxState[];
-}
-export declare const ARD_STATEBOX_DEFAULTS: InjectionToken<ArdStateboxDefaults>;
-export declare function provideStateboxDefaults(config: Partial<ArdStateboxDefaults>): Provider;

package/lib/statebox/statebox.module.d.ts

@@ -1,8 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./statebox.component";
-import * as i2 from "@angular/common";
-export declare class ArdiumStateboxModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumStateboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumStateboxModule, [typeof i1.ArdiumStateboxComponent], [typeof i2.CommonModule], [typeof i1.ArdiumStateboxComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumStateboxModule>;
-}

package/lib/statebox/statebox.types.d.ts

@@ -1,26 +0,0 @@
-import { ComponentColor } from '../types/colors.types';
-export type StateboxValue = string | boolean | number | null | undefined;
-export interface StateboxState {
-    value: StateboxValue;
-    icon?: string;
-    character?: string;
-    color?: ComponentColor;
-    customColor?: string;
-    colorOnCustom?: string;
-    filled?: boolean;
-    keepFrame?: boolean;
-}
-export interface _StateboxInternalState {
-    value: StateboxValue;
-    display: string;
-    displayAsIcon: boolean;
-    color: string;
-    useCustomColor: boolean;
-    colorOnCustom?: string;
-    filled: boolean;
-    keepFrame: boolean;
-}
-export interface _StateboxInternalStateData {
-    state: _StateboxInternalState;
-    index: number;
-}

package/lib/tabber/tab/tab.defaults.d.ts

@@ -1,6 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-export interface ArdTabDefaults {
-    disabled: boolean;
-}
-export declare const ARD_TAB_DEFAULTS: InjectionToken<ArdTabDefaults>;
-export declare function provideTabDefaults(config: Partial<ArdTabDefaults>): Provider;