@ardium-pl/ui 5.0.0-alpha.106

package/lib/table-from-csv/table-from-csv.defaults.d.ts

@@ -0,0 +1,7 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { ArdTableDefaults } from './../table/table.defaults';
+export interface ArdTableFromCsvDefaults extends ArdTableDefaults {
+    separator: string;
+}
+export declare const ARD_TABLE_FROM_CSV_DEFAULTS: InjectionToken<ArdTableFromCsvDefaults>;
+export declare function provideTableFromCsvDefaults(config: Partial<ArdTableFromCsvDefaults>): Provider;

package/lib/table-from-csv/table-from-csv.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./table-from-csv.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../table/table.module";
+export declare class ArdiumTableFromCsvModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTableFromCsvModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTableFromCsvModule, [typeof i1.ArdiumTableFromCsvComponent], [typeof i2.CommonModule, typeof i3.ArdiumTableModule], [typeof i1.ArdiumTableFromCsvComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumTableFromCsvModule>;
+}

package/lib/table-pagination/index.d.ts

@@ -0,0 +1,4 @@
+export * from './table-pagination.component';
+export * from './table-pagination.defaults';
+export * from './table-pagination.module';
+export * from './table-pagination.types';

package/lib/table-pagination/table-pagination.component.d.ts

@@ -0,0 +1,40 @@
+import { OnInit } from '@angular/core';
+import { BooleanLike } from '@ardium-ui/devkit';
+import { _FocusableComponentBase } from '../_internal/focusable-component';
+import { ComponentColor } from '../types/colors.types';
+import { ArdTablePaginationDefaults } from './table-pagination.defaults';
+import { CurrentItemsFormatFn, PaginationAlign } from './table-pagination.types';
+import * as i0 from "@angular/core";
+export declare class ArdiumTablePaginationComponent extends _FocusableComponentBase implements OnInit {
+    protected readonly _DEFAULTS: ArdTablePaginationDefaults;
+    constructor(defaults: ArdTablePaginationDefaults);
+    readonly componentId = "506";
+    private readonly _pagination;
+    readonly totalItems: import("@angular/core").InputSignal<number>;
+    readonly options: import("@angular/core").InputSignal<number[] | {
+        value: number;
+        label: string;
+    }[]>;
+    readonly itemsPerPage: import("@angular/core").ModelSignal<number>;
+    readonly page: import("@angular/core").ModelSignal<number>;
+    ngOnInit(): void;
+    readonly color: import("@angular/core").InputSignal<ComponentColor>;
+    readonly align: import("@angular/core").InputSignal<PaginationAlign>;
+    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly ngClasses: import("@angular/core").Signal<string>;
+    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly itemsPerPageText: import("@angular/core").InputSignal<string>;
+    readonly currentItemsFormatFn: import("@angular/core").InputSignal<CurrentItemsFormatFn>;
+    readonly getCurrentItemsContext: import("@angular/core").Signal<import("../_internal/models/pagination.model").PaginationCurrentItemsContext>;
+    readonly firstPageDisabled: import("@angular/core").Signal<boolean>;
+    readonly lastPageDisabled: import("@angular/core").Signal<boolean>;
+    onItemsPerPageChange(newValue: number): void;
+    onPageChange(newPage: number): void;
+    onFirstPage(): void;
+    onPrevPage(): void;
+    onNextPage(): void;
+    onLastPage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTablePaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTablePaginationComponent, "ard-table-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "useFirstLastButtons": { "alias": "useFirstLastButtons"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "itemsPerPageText": { "alias": "itemsPerPageText"; "required": false; "isSignal": true; }; "currentItemsFormatFn": { "alias": "currentItemsFormatFn"; "required": false; "isSignal": true; }; }, { "itemsPerPage": "itemsPerPageChange"; "page": "pageChange"; }, never, never, false, never>;
+}

package/lib/table-pagination/table-pagination.defaults.d.ts

@@ -0,0 +1,20 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { _FocusableComponentDefaults } from '../_internal/focusable-component';
+import { ComponentColor } from './../types/colors.types';
+import { CurrentItemsFormatFn, PaginationAlign } from './table-pagination.types';
+export interface ArdTablePaginationDefaults extends _FocusableComponentDefaults {
+    options: number[] | {
+        value: number;
+        label: string;
+    }[];
+    itemsPerPage: number;
+    page: number;
+    color: ComponentColor;
+    align: PaginationAlign;
+    compact: boolean;
+    useFirstLastButtons: boolean;
+    itemsPerPageText: string;
+    currentItemsFormatFn: CurrentItemsFormatFn;
+}
+export declare const ARD_TABLE_PAGINATION_DEFAULTS: InjectionToken<ArdTablePaginationDefaults>;
+export declare function provideTablePaginationDefaults(config: Partial<ArdTablePaginationDefaults>): Provider;

package/lib/table-pagination/table-pagination.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./table-pagination.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../select/select.module";
+import * as i4 from "../buttons/icon-button/icon-button.module";
+import * as i5 from "../icon/icon.module";
+export declare class ArdiumTablePaginationModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTablePaginationModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTablePaginationModule, [typeof i1.ArdiumTablePaginationComponent], [typeof i2.CommonModule, typeof i3.ArdiumSelectModule, typeof i4.ArdiumIconButtonModule, typeof i5.ArdiumIconModule], [typeof i1.ArdiumTablePaginationComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumTablePaginationModule>;
+}

package/lib/table-pagination/table-pagination.types.d.ts

@@ -0,0 +1,9 @@
+import { PaginationCurrentItemsContext } from '../_internal/models/pagination.model';
+export declare const PaginationAlign: {
+    readonly Left: "left";
+    readonly Center: "center";
+    readonly Right: "right";
+    readonly Split: "split";
+};
+export type PaginationAlign = (typeof PaginationAlign)[keyof typeof PaginationAlign];
+export type CurrentItemsFormatFn = (context: PaginationCurrentItemsContext) => string;

package/lib/text-list/index.d.ts

@@ -0,0 +1,3 @@
+export * from './text-list.component';
+export * from './text-list.module';
+export * from './text-list.pipe';

package/lib/text-list/text-list.component.d.ts

@@ -0,0 +1,9 @@
+import { BooleanLike } from '@ardium-ui/devkit';
+import * as i0 from "@angular/core";
+export declare class ArdiumTextListComponent {
+    readonly values: import("@angular/core").InputSignal<any[]>;
+    readonly separator: import("@angular/core").InputSignal<string>;
+    readonly filter: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTextListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTextListComponent, "ard-text-list", never, { "values": { "alias": "values"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+}

package/lib/text-list/text-list.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./text-list.component";
+import * as i2 from "./text-list.pipe";
+import * as i3 from "@angular/common";
+export declare class ArdiumTextListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTextListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTextListModule, [typeof i1.ArdiumTextListComponent, typeof i2.ArdiumTextListPipe], [typeof i3.CommonModule], [typeof i1.ArdiumTextListComponent, typeof i2.ArdiumTextListPipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumTextListModule>;
+}

package/lib/text-list/text-list.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ArdiumTextListPipe implements PipeTransform {
+    transform(value: any[], separator?: string, filter?: boolean): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTextListPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<ArdiumTextListPipe, "ardTextList", false>;
+}

package/lib/types/alignment.types.d.ts

@@ -0,0 +1,17 @@
+export declare const SimpleOneAxisAlignment: {
+    readonly Left: "left";
+    readonly Right: "right";
+};
+export type SimpleOneAxisAlignment = (typeof SimpleOneAxisAlignment)[keyof typeof SimpleOneAxisAlignment];
+export declare const OneAxisAlignment: {
+    readonly Left: "left";
+    readonly Center: "center";
+    readonly Right: "right";
+};
+export type OneAxisAlignment = (typeof OneAxisAlignment)[keyof typeof OneAxisAlignment];
+export declare const OneAxisAlignmentOrientational: {
+    readonly Start: "start";
+    readonly Center: "center";
+    readonly End: "end";
+};
+export type OneAxisAlignmentOrientational = (typeof OneAxisAlignmentOrientational)[keyof typeof OneAxisAlignmentOrientational];

package/lib/types/button.types.d.ts

@@ -0,0 +1,6 @@
+export declare const ButtonType: {
+    readonly Button: "button";
+    readonly Submit: "submit";
+    readonly Reset: "reset";
+};
+export type ButtonType = (typeof ButtonType)[keyof typeof ButtonType];

package/lib/types/colors.types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * The color of the component.
+ *
+ * @see {@link ButtonColoringMode} to set what part of the component should be colored.
+ */
+export declare const ComponentColor: {
+    /**
+     * The app's standard text color.
+     */
+    readonly None: "none";
+    /**
+     * The app's primary color.
+     */
+    readonly Primary: "primary";
+    /**
+     * The app's secondary color.
+     */
+    readonly Secondary: "secondary";
+    /**
+     * The app's warning color. Usually some shade of yellow.
+     */
+    readonly Warning: "warn";
+    /**
+     * The app's danger color. Usually some shade of red.
+     */
+    readonly Danger: "danger";
+    /**
+     * The app's success color. Usually some shade of green or lime.
+     */
+    readonly Success: "success";
+    /**
+     * The app's info color. Usually some shade of blue or light blue.
+     */
+    readonly Info: "info";
+};
+export type ComponentColor = (typeof ComponentColor)[keyof typeof ComponentColor];
+export declare const SimpleComponentColor: {
+    /**
+     * The current color set by css.
+     */
+    readonly CurrentColor: "currentColor";
+    /**
+     * The app's standard text color.
+     */
+    readonly None: "none";
+    /**
+     * The app's primary color.
+     */
+    readonly Primary: "primary";
+    /**
+     * The app's secondary color.
+     */
+    readonly Secondary: "secondary";
+    /**
+     * The app's warning color. Usually some shade of yellow.
+     */
+    readonly Warning: "warn";
+    /**
+     * The app's danger color. Usually some shade of red.
+     */
+    readonly Danger: "danger";
+    /**
+     * The app's success color. Usually some shade of green or lime.
+     */
+    readonly Success: "success";
+    /**
+     * The app's info color. Usually some shade of blue or light blue.
+     */
+    readonly Info: "info";
+};
+export type SimpleComponentColor = (typeof SimpleComponentColor)[keyof typeof SimpleComponentColor];

package/lib/types/item-storage.types.d.ts

@@ -0,0 +1,50 @@
+export type OptionContext<T extends ArdSimplestStorageItem> = {
+    $implicit: T;
+    item: T;
+} & {
+    [K in keyof Omit<T, 'filtered'>]: T[K];
+};
+export interface ArdSimplestStorageItem {
+    readonly itemData: object;
+    readonly index: number;
+    readonly value: any;
+    readonly label: string;
+    readonly selected: boolean;
+    readonly highlighted: boolean;
+}
+export interface ArdOptionSimple extends ArdSimplestStorageItem {
+    readonly disabled: boolean;
+}
+export interface ArdOption extends ArdOptionSimple {
+    readonly filtered: boolean;
+    readonly isExactMatch: boolean;
+    readonly group: unknown;
+    readonly highlighted_recently: boolean;
+}
+export interface ArdOptionGroup {
+    readonly label: string;
+    readonly disabled: boolean;
+    readonly children: ArdOption[];
+}
+export declare const ArdPanelPosition: {
+    readonly Top: "top";
+    readonly Bottom: "bottom";
+    readonly Auto: "auto";
+};
+export type ArdPanelPosition = (typeof ArdPanelPosition)[keyof typeof ArdPanelPosition];
+export type ArdItemGroupMap = Map<any, ArdOptionGroup>;
+/**
+ * Function used to determine the group label for an item, based on the item's data.
+ */
+export type GroupByFn = (item: any) => any;
+/**
+ * Function used to search for items based on a search term.
+ *
+ * Should return a tuple where the first value is a boolean indicating if the item matches the search term,
+ * and the second value is a boolean indicating if the match is an exact match (used for auto-highlighting).
+ */
+export type SearchFn = (searchTerm: string, item: ArdOption) => [boolean, boolean];
+/**
+ * Function used to compare a value with an option's value to determine if they are considered equal.
+ */
+export type CompareWithFn = (value: any, optionValue: any) => boolean;

package/lib/types/theming.types.d.ts

@@ -0,0 +1,62 @@
+export declare const OutlinedAppearance: {
+    /**
+     * No background with solid border.
+     */
+    readonly Outlined: "outlined";
+};
+export type OutlinedAppearance = (typeof OutlinedAppearance)[keyof typeof OutlinedAppearance];
+export declare const PanelAppearance: {
+    /**
+     * Filled with a background color, with slight shadow.
+     */
+    readonly Raised: "raised";
+};
+export type PanelAppearance = (typeof PanelAppearance)[keyof typeof PanelAppearance];
+export declare const FormElementAppearance: {
+    /**
+     * No background and no border. Useful for when trying to create a component that uses another component inside its borders.
+     */
+    readonly Transparent: "transparent";
+    /**
+     * Slighthly darker/lighter background with rounded but transparent border.
+     */
+    readonly Filled: "filled";
+    /**
+     * No background with solid border.
+     */
+    readonly Outlined: "outlined";
+};
+export type FormElementAppearance = (typeof FormElementAppearance)[keyof typeof FormElementAppearance];
+export declare const DecorationElementAppearance: {
+    readonly Outlined: "outlined";
+    readonly OutlinedStrong: "outlined-strong";
+    readonly Filled: "filled";
+    readonly FilledStrong: "filled-strong";
+};
+export type DecorationElementAppearance = (typeof DecorationElementAppearance)[keyof typeof DecorationElementAppearance];
+export declare const PanelVariant: {
+    /**
+     * Slightly rounded corners.
+     */
+    readonly Rounded: "rounded";
+    /**
+     * Sharp corners.
+     */
+    readonly Sharp: "sharp";
+};
+export type PanelVariant = (typeof PanelVariant)[keyof typeof PanelVariant];
+export declare const FormElementVariant: {
+    /**
+     * Fully rounded corners - pill shaped.
+     */
+    readonly Pill: "pill";
+    /**
+     * Slightly rounded corners.
+     */
+    readonly Rounded: "rounded";
+    /**
+     * Sharp corners.
+     */
+    readonly Sharp: "sharp";
+};
+export type FormElementVariant = (typeof FormElementVariant)[keyof typeof FormElementVariant];

package/lib/types/utility.types.d.ts

@@ -0,0 +1,16 @@
+import { InputSignal } from "@angular/core";
+export declare const ClickStrategy: {
+    readonly Noop: "noop";
+    readonly Default: "default";
+};
+export type ClickStrategy = (typeof ClickStrategy)[keyof typeof ClickStrategy];
+/**
+ * Represents an array type that must contain at least one element.
+ *
+ * @template T - The type of elements in the array.
+ */
+export type NonEmptyArray<T> = [T, ...T[]];
+export type Nullable<T> = T | undefined | null;
+export type TemplateComponent<T> = {
+    [key in keyof T]?: InputSignal<T[key]>;
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ardium-pl/ui",
+  "version": "5.0.0-alpha.106",
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0",
+    "@angular/cdk": ">=18.0.0",
+    "@types/node": "^20.14.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "first-last": "^1.1.1",
+    "more-rounding": "^4.2.2",
+    "resolve-object-path": "^2.0.0",
+    "lodash": "^4.17.23",
+    "@ardium-ui/devkit": "8.3.0",
+    "simple-bool": "^3.0.1",
+    "take-chance": "^4.3.2",
+    "color": "^4.2.3"
+  },
+  "exports": {
+    "./prebuilt-themes/*": {
+      "style": "./prebuilt-themes/*.css"
+    },
+    "./themes/default/*": {
+      "sass": "./themes/*.scss"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ardium-pl-ui.mjs"
+    }
+  },
+  "module": "fesm2022/ardium-pl-ui.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/prebuilt-themes/default/badge.css

@@ -0,0 +1,237 @@
+@layer ard-ui {
+  :root {
+    --ard-badge-small-font-size: 0.55rem;
+    --ard-badge-small-font-weight: 400;
+    --ard-badge-small-letter-spacing: 0.2px;
+    --ard-badge-medium-font-size: 0.667rem;
+    --ard-badge-medium-font-weight: 500;
+    --ard-badge-medium-letter-spacing: 0.2px;
+    --ard-badge-large-font-size: 0.8125rem;
+    --ard-badge-large-font-weight: 600;
+    --ard-badge-large-letter-spacing: 0.2px;
+    --ard-badge-overlap-offset: 0.3em;
+  }
+  .ard-badge-host {
+    position: relative;
+  }
+  .ard-badge {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    font-size: var(--ard-_badge-font-size);
+    min-width: var(--ard-_badge-size);
+    height: var(--ard-_badge-size);
+    --ard-_badge-overlap-offset-x: var(--ard-badge-overlap-offset, 0.3em);
+  }
+  .ard-badge.ard-color-none {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: var(--ard-bg-alt);
+    --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
+    --ard-cmpcl--bg-header: var(--ard-bg-filled);
+    --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
+    --ard-cmpcl--on-bg: var(--ard-text);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: var(--ard-text);
+    --ard-cmpcl--border-light: var(--ard-text2);
+    --ard-cmpcl--content: var(--ard-text);
+    --ard-cmpcl--content-light: var(--ard-text-alt);
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
+  }
+  .ard-badge.ard-color-primary {
+    --ard-cmpcl--bg: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-primary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--content: rgb(var(--ard-primary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
+  }
+  .ard-badge.ard-color-secondary {
+    --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
+    --ard-cmpcl--content: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
+  }
+  .ard-badge.ard-color-warn {
+    --ard-cmpcl--bg: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-warn-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--content: rgb(var(--ard-warn-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
+  }
+  .ard-badge.ard-color-danger {
+    --ard-cmpcl--bg: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-danger-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--content: rgb(var(--ard-danger-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
+    --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
+  }
+  .ard-badge.ard-color-success {
+    --ard-cmpcl--bg: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-success-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-success-100));
+    --ard-cmpcl--content: rgb(var(--ard-success-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-success-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-success-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
+  }
+  .ard-badge.ard-color-info {
+    --ard-cmpcl--bg: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-info-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-info-100));
+    --ard-cmpcl--content: rgb(var(--ard-info-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-info-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-info-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
+  }
+  .ard-badge.ard-color-currentColor {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: currentColor;
+    --ard-cmpcl--on-bg: currentColor;
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--border: currentColor;
+    --ard-cmpcl--border-light: currentColor;
+    --ard-cmpcl--content: currentColor;
+    --ard-cmpcl--content-light: currentColor;
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: currentColor;
+    --ard-cmpcl--overlay-colored-light: currentColor;
+  }
+  .ard-badge.ard-variant-pill {
+    border-radius: 9999px;
+  }
+  .ard-badge.ard-variant-rounded {
+    border-radius: var(--ard-_badge-radius);
+  }
+  .ard-badge.ard-variant-sharp {
+    border-radius: 0;
+  }
+  .ard-badge.ard-badge-hidden {
+    display: none;
+  }
+  .ard-badge .ard-badge-content {
+    padding: 0 var(--ard-_badge-padding);
+  }
+  .ard-badge.ard-badge-size-small {
+    --ard-_badge-font-size: var(--ard-badge-small-font-size, 0.55rem);
+    --ard-_badge-size: var(--ard-badge-small-size, calc(var(--ard-badge-small-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-small-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-small-rounded-radius, calc(var(--ard-badge-small-font-size) * 0.25));
+    font-weight: var(--ard-badge-small-font-weight, 400);
+    letter-spacing: var(--ard-badge-small-letter-spacing, 0.2px);
+  }
+  .ard-badge.ard-badge-size-medium {
+    --ard-_badge-font-size: var(--ard-badge-medium-font-size, 0.667rem);
+    --ard-_badge-size: var(--ard-badge-medium-size, calc(var(--ard-badge-medium-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-medium-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-medium-rounded-radius, calc(var(--ard-badge-medium-font-size) * 0.25));
+    font-weight: var(--ard-badge-medium-font-weight, 500);
+    letter-spacing: var(--ard-badge-medium-letter-spacing, 0.2px);
+  }
+  .ard-badge.ard-badge-size-large {
+    --ard-_badge-font-size: var(--ard-badge-large-font-size, 0.8125rem);
+    --ard-_badge-size: var(--ard-badge-large-size, calc(var(--ard-badge-large-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-large-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-large-rounded-radius, calc(var(--ard-badge-large-font-size) * 0.25));
+    font-weight: var(--ard-badge-large-font-weight, 600);
+    letter-spacing: var(--ard-badge-large-letter-spacing, 0.2px);
+  }
+  .ard-badge.ard-badge-overlap {
+    --ard-_badge-overlap-offset-x: 50%;
+  }
+  .ard-badge.ard-badge-position-above-before {
+    transform: translate(var(--ard-_badge-overlap-offset-x), 50%);
+  }
+  .ard-badge.ard-badge-position-above-after {
+    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), 50%);
+  }
+  .ard-badge.ard-badge-position-below-after {
+    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), -50%);
+  }
+  .ard-badge.ard-badge-position-below-before {
+    transform: translate(var(--ard-_badge-overlap-offset-x), -50%);
+  }
+  .ard-badge.ard-badge-position-above-before, .ard-badge.ard-badge-position-below-before {
+    right: 100%;
+  }
+  .ard-badge.ard-badge-position-above-after, .ard-badge.ard-badge-position-below-after {
+    left: 100%;
+  }
+  .ard-badge.ard-badge-position-below-before, .ard-badge.ard-badge-position-below-after {
+    top: 100%;
+  }
+  .ard-badge.ard-badge-position-above-before, .ard-badge.ard-badge-position-above-after {
+    bottom: 100%;
+  }
+}
+
+/*# sourceMappingURL=badge.css.map */

package/prebuilt-themes/default/badge.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/badge.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAEA;EAGE;IACE;IAEA;IACA;IAGA;IAEA;IACA;IAGA;IAEA;IACA;IAGA;;EAGF;IACE;;EAEF;IAEE;IACA;IACA;IACA;IAGA;IACA;IAmBA;IACA;IACA;IAgCA;;ECzFF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDnGA;IACE;;EAEF;IACE;;EAEF;IACE;;EAIF;IACE;;EAQF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;;EAMF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAIF;IAEE;;EAEF;IAEE;;EAEF;IAEE;;EAEF;IAEE","file":"badge.css"}