@ardium-ui/ui 1.0.0

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,98 @@
+/**
+```typescript
+interface OptionContext {
+    $implicit: ArdOption;
+    item: ArdOption;
+    itemData: any;
+}
+```
+ */
+export interface OptionContext {
+    $implicit: ArdOption;
+    item: ArdOption;
+    itemData: any;
+}
+/**
+```typescript
+interface ArdOption {
+    readonly itemData: any;
+    readonly index: number;
+    label: string;
+    value: any;
+    highlighted?: boolean;
+    selected?: boolean;
+}
+```
+ */
+export interface ArdSimplestStorageItem {
+    readonly itemData: any;
+    readonly index: number;
+    value: any;
+    label: string;
+    disabled?: boolean;
+    selected?: boolean;
+    highlighted?: boolean;
+}
+/**
+```typescript
+interface ArdOption {
+    readonly itemData: any;
+    readonly index: number;
+    readonly label: string;
+    readonly value: any;
+    disabled?: boolean;
+    highlighted?: boolean;
+    selected?: boolean;
+}
+```
+ */
+export interface ArdOptionSimple extends ArdSimplestStorageItem {
+    disabled?: boolean;
+}
+/**
+```typescript
+interface ArdOption {
+    readonly itemData: any;
+    readonly index: number;
+    readonly label: string;
+    readonly value: any;
+    readonly group?: any;
+    disabled?: boolean;
+    selected?: boolean;
+    highlighted?: boolean;
+    highlighted_recently?: boolean;
+}
+```
+ */
+export interface ArdOption extends ArdOptionSimple {
+    readonly group?: any;
+    highlighted_recently?: boolean;
+}
+/**
+```typescript
+interface ArdItemGroup {
+    label: string;
+    disabled?: boolean;
+    highlighted?: boolean;
+    selected?: boolean;
+    children: ArdOption[];
+}
+```
+ */
+export interface ArdOptionGroup {
+    label: string;
+    disabled?: boolean;
+    highlighted?: boolean;
+    selected?: boolean;
+    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>;
+export type GroupByFn = (item: any) => any;
+export type SearchFn = (searchTerm: string, item: ArdOption) => boolean;
+export type CompareWithFn = (value: any, optionValue: any) => boolean;

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

@@ -0,0 +1,61 @@
+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";
+};
+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,11 @@
+export declare const ClickStrategy: {
+    readonly None: "none";
+    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[]];

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ardium-ui/ui",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": "^17.0.7",
+    "@angular/core": "^17.0.7",
+    "@angular/cdk": "^17.0.7"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "first-last": "^1.1.1",
+    "more-rounding": "^4.2.1",
+    "resolve-object-path": "^1.1.0",
+    "simple-bool": "^3.0.1"
+  },
+  "exports": {
+    "./prebuilt-themes/*": {
+      "style": "./prebuilt-themes/*.css"
+    },
+    "./themes/default/*": {
+      "sass": "./themes/*.scss"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ardium-ui-ui.mjs",
+      "esm": "./esm2022/ardium-ui-ui.mjs",
+      "default": "./fesm2022/ardium-ui-ui.mjs"
+    }
+  },
+  "module": "fesm2022/ardium-ui-ui.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/prebuilt-themes/default/badge.css

@@ -0,0 +1,208 @@
+.ard-badge-host {
+  position: relative;
+}
+
+.ard-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  background: var(--ard-cmpcl--bgcolored);
+  color: var(--ard-cmpcl--on-bg-colored);
+  font-size: var(--ard-_badge-size);
+  min-width: calc(var(--ard-_badge-size) * 1.375);
+  height: calc(var(--ard-_badge-size) * 1.375);
+  --ard-_badge-overlap-offset-x: 0%;
+}
+.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--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--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--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--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--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--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--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: calc(var(--ard-_badge-size) * 0.25);
+}
+.ard-badge.ard-variant-sharp {
+  border-radius: 0;
+}
+.ard-badge.ard-badge-hidden {
+  display: none;
+}
+.ard-badge .ard-badge-content {
+  padding: 0 calc(var(--ard-_badge-size) * 0.5);
+}
+.ard-badge.ard-badge-size-small {
+  --ard-_badge-size: 0.55rem;
+  font-weight: 300;
+  letter-spacing: 0.2px;
+}
+.ard-badge.ard-badge-size-medium {
+  --ard-_badge-size: 0.667rem;
+  font-weight: 400;
+  letter-spacing: 0.2px;
+}
+.ard-badge.ard-badge-size-large {
+  --ard-_badge-size: 0.8125rem;
+  font-weight: 500;
+  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;EACI;;;AAEJ;EAEI;EACA;EACA;EACA;EAGA;EACA;EAmBA;EACA;EACA;EAuBA;;ACvDA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADrHJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIJ;EACI;;AAQJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAMJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIJ;EAEI;;AAEJ;EAEI;;AAEJ;EAEI;;AAEJ;EAEI","file":"badge.css"}