@ascentgl/ads-ui 0.0.1

package/src/assets/sass/ads-ui/overrides/angular-material/_modal.scss

@@ -0,0 +1,42 @@
+@import '../../abstracts/variables';
+@import '../../abstracts/functions';
+
+.mat-mdc-dialog-panel.ads-confirmation {
+  .mat-mdc-dialog-title {
+    --mat-dialog-headline-padding: 24px 32px 16px 32px;
+    --mdc-dialog-subhead-color: #{color(dark)};
+    --mdc-dialog-subhead-line-height: 24px;
+    --mdc-dialog-subhead-size: 18px;
+    --mdc-dialog-subhead-weight: #{font-weight(semibold)};
+
+    &::before {
+      content: none;
+    }
+
+    .cross-icon-container {
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      cursor: pointer;
+    }
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content {
+    padding-top: 8px;
+  }
+
+  .mat-mdc-dialog-content {
+    --mat-dialog-content-padding: 8px 32px 0;
+    --mat-dialog-with-actions-content-padding: 8px 32px 0;
+    --mdc-dialog-supporting-text-color: #{color(dark)};
+    --mdc-dialog-supporting-text-line-height: 24px;
+    --mdc-dialog-supporting-text-size: 16px;
+    --mdc-dialog-supporting-text-weight: #{font-weight(regular)};
+  }
+
+  .mat-mdc-dialog-actions {
+    --mat-dialog-actions-padding: 24px 32px 32px;
+    --mat-dialog-actions-alignment: end;
+    gap: 16px;
+  }
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_search-dropdown-modal.scss

@@ -0,0 +1,32 @@
+.cdk-overlay-pane.search-dropdown-modal .mat-mdc-dialog-container {
+  .mat-mdc-dialog-surface {
+    padding: 24px;
+  }
+
+  .mat-mdc-dialog-title {
+    font-size: 18px;
+    font-weight: font-weight(semibold);
+    font-family: Poppins, serif;
+
+    --mat-dialog-headline-padding: 0;
+
+    margin-bottom: 24px;
+  }
+
+  .mat-mdc-dialog-content {
+    --mat-dialog-with-actions-content-padding: 0;
+
+    margin-bottom: 24px;
+
+    &.full-width {
+      width: calc(100% + 48px);
+      position: relative;
+      left: -24px;
+    }
+  }
+
+  .mat-mdc-dialog-actions {
+    --mat-dialog-actions-alignment: flex-end;
+    --mat-dialog-actions-padding: 0;
+  }
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_snackbar.scss

@@ -0,0 +1,37 @@
+@import '../../abstracts/variables';
+@import '../../abstracts/functions';
+
+.mdc-snackbar.mat-mdc-snack-bar-container {
+  margin: 32px;
+  width: 100%;
+
+  &.error {
+    --mdc-snackbar-container-color: #{color(error)};
+
+    & > .button {
+      color: color(error);
+    }
+  }
+
+  &.primary {
+    --mdc-snackbar-container-color: #{color(primary)};
+  }
+
+  &.secondary {
+    --mdc-snackbar-container-color: #{color(secondary)};
+  }
+
+  .mdc-snackbar__label {
+    padding: 16px 24px;
+    --mdc-snackbar-supporting-text-size: 16px;
+    --mdc-snackbar-supporting-text-weight: #{font-weight(regular)};
+    --mdc-snackbar-supporting-text-line-height: 24px;
+    --mdc-snackbar-supporting-text-color: #{color(white)};
+  }
+
+  .mdc-snackbar__surface {
+    padding-right: 0;
+    min-width: 200px;
+    max-width: unset;
+  }
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_tabs.scss

@@ -0,0 +1,63 @@
+@import '../../abstracts/variables';
+@import '../../abstracts/functions';
+
+.ads-mat-group {
+  .mat-mdc-tab-header {
+    --mat-tab-header-inactive-label-text-color: #646c8d;
+    --mat-tab-header-active-label-text-color: #646c8d;
+    --mat-tab-header-label-text-font: Poppins, Roboto, sans-serif;
+    --mat-tab-header-label-text-tracking: normal;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    padding: 0 4px;
+
+    .mdc-tab {
+      --mdc-secondary-navigation-tab-container-height: 45px;
+      --mat-tab-header-label-text-weight: 400;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      min-width: 60px;
+
+      &.has-icon {
+        padding-right: 0;
+      }
+
+      &:hover {
+        background-color: color(light);
+      }
+
+      &--active {
+        box-shadow:
+          0 100px 80px #00000012,
+          0 22.3363px 17.869px #0000000b,
+          0 6.6501px 5.32008px #00000007;
+        text-shadow: 0 0 0.5px #646c8d;
+      }
+
+      .menu-button {
+        cursor: pointer;
+        padding: 16px 24px;
+      }
+    }
+  }
+
+  mat-tab-body {
+    padding-top: 12px;
+  }
+}
+
+.ads-mat-menu.mat-mdc-menu-panel {
+  border-radius: 0;
+  min-width: 160px;
+  max-width: none;
+  top: 1px;
+  position: relative;
+
+  .mat-mdc-menu-content {
+    padding: 0;
+
+    .mat-mdc-menu-item:not([disabled]):hover {
+      color: color(white);
+      --mat-menu-item-hover-state-layer-color: #{color(primary)};
+    }
+  }
+}

package/src/assets/sass/ads-ui/overrides/angular-material/_tooltip.scss

@@ -0,0 +1,73 @@
+@import '../../abstracts/variables';
+@import '../../abstracts/functions';
+
+.mat-mdc-tooltip-panel-above,
+.mat-mdc-tooltip-panel-below,
+.mat-mdc-tooltip-panel-left,
+.mat-mdc-tooltip-panel-right {
+  .mdc-tooltip::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+}
+
+.mat-mdc-tooltip-panel-above {
+  .mdc-tooltip::after {
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 8px 8px 0 8px;
+    border-color: color(white) transparent transparent transparent;
+    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
+  }
+}
+
+.mat-mdc-tooltip-panel-below {
+  .mdc-tooltip::after {
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 8px 8px 8px;
+    border-color: transparent transparent color(white) transparent;
+    box-shadow: 0 -4px 50px 0 rgba(0, 0, 0, 0.4);
+  }
+}
+
+.mat-mdc-tooltip-panel-left {
+  .mdc-tooltip::after {
+    top: 50%;
+    right: -8px;
+    transform: translateY(-50%);
+    border-width: 8px 0 8px 8px;
+    border-color: transparent transparent transparent color(white);
+    box-shadow: -4px 0 50px 0 rgba(0, 0, 0, 0.4);
+  }
+}
+
+.mat-mdc-tooltip-panel-right {
+  .mdc-tooltip::after {
+    top: 50%;
+    left: -8px;
+    transform: translateY(-50%);
+    border-width: 8px 8px 8px 0;
+    border-color: transparent color(white) transparent transparent;
+    box-shadow: 4px 0 50px 0 rgba(0, 0, 0, 0.4);
+  }
+}
+
+.mat-mdc-tooltip-panel .mdc-tooltip {
+  .mdc-tooltip__surface {
+    background-color: color(white);
+    color: color(dark);
+    font-size: 14px;
+    line-height: 21px;
+    padding: 8px 16px;
+    border-radius: 3px;
+    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.4);
+    max-width: 100%;
+    position: relative;
+  }
+}

package/src/assets/sass/ads-ui/themes/_ads-palette.scss

@@ -0,0 +1,98 @@
+$primary: (
+  50: #e0e9f1,
+  100: #b3c8db,
+  200: #80a4c3,
+  300: #4d80ab,
+  400: #266499,
+  500: #5756b3,
+  600: #00427f,
+  700: #003974,
+  800: #00316a,
+  900: #002157,
+  A100: #89aaff,
+  A200: #5685ff,
+  A400: #2361ff,
+  A700: #094fff,
+  contrast: (
+    50: #000,
+    100: #000,
+    200: #000,
+    300: #fff,
+    400: #fff,
+    500: #fff,
+    600: #fff,
+    700: #fff,
+    800: #fff,
+    900: #fff,
+    A100: #000,
+    A200: #000,
+    A400: #fff,
+    A700: #fff,
+  ),
+);
+
+$accent: (
+  50: #e0f3f9,
+  100: #b3e0f0,
+  200: #80cce6,
+  300: #4db8db,
+  400: #26a8d4,
+  500: #09c,
+  600: #0091c7,
+  700: #0086c0,
+  800: #007cb9,
+  900: #006bad,
+  A100: #d7edff,
+  A200: #a4d7ff,
+  A400: #71c0ff,
+  A700: #58b5ff,
+  contrast: (
+    50: #000,
+    100: #000,
+    200: #000,
+    300: #000,
+    400: #000,
+    500: #fff,
+    600: #fff,
+    700: #fff,
+    800: #fff,
+    900: #fff,
+    A100: #000,
+    A200: #000,
+    A400: #000,
+    A700: #000,
+  ),
+);
+
+$warn: (
+  50: #f7e0e2,
+  100: #ebb3b8,
+  200: #de8088,
+  300: #d04d58,
+  400: #c62635,
+  500: #bc0011,
+  600: #b6000f,
+  700: #ad000c,
+  800: #a5000a,
+  900: #970005,
+  A100: #ffc2c2,
+  A200: #ff8f90,
+  A400: #ff5c5d,
+  A700: #ff4244,
+  contrast: (
+    50: #000,
+    100: #000,
+    200: #000,
+    300: #000,
+    400: #000,
+    500: #fff,
+    600: #fff,
+    700: #fff,
+    800: #fff,
+    900: #fff,
+    A100: #000,
+    A200: #000,
+    A400: #000,
+    A700: #000,
+  ),
+);

package/src/lib/components/avatar/avatar.component.d.ts

@@ -0,0 +1,30 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { AdsIconRegistry } from '@ascentgl/ads-icons';
+import { Size } from './avatar.types';
+import * as i0 from "@angular/core";
+export declare class AdsAvatarComponent implements OnChanges {
+    private registry;
+    constructor(registry: AdsIconRegistry);
+    /**
+     * The alt text for the avatar
+     */
+    alt?: string;
+    /**
+     * The id attribute for the avatar icon
+     */
+    id: string;
+    /**
+     * The size of the avatar
+     */
+    size: Size;
+    /**
+     * The path to the image to display
+     */
+    src?: string;
+    /**
+     * @ignore
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsAvatarComponent, "ads-avatar", never, { "alt": { "alias": "alt"; "required": false; }; "id": { "alias": "id"; "required": false; }; "size": { "alias": "size"; "required": false; }; "src": { "alias": "src"; "required": false; }; }, {}, never, never, false, never>;
+}

package/src/lib/components/avatar/avatar.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./avatar.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@ascentgl/ads-icons";
+export declare class AdsAvatarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsAvatarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsAvatarModule, [typeof i1.AdsAvatarComponent], [typeof i2.CommonModule, typeof i3.AdsIconModule], [typeof i1.AdsAvatarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AdsAvatarModule>;
+}

package/src/lib/components/avatar/avatar.types.d.ts

@@ -0,0 +1 @@
+export type Size = 'sm' | 'md' | 'lg';

package/src/lib/components/avatar/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ascentgl/ads-ui/src/lib/components/avatar" />
+export * from './public-api';

package/src/lib/components/avatar/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './avatar.component';
+export * from './avatar.module';

package/src/lib/components/buttons/button-container/button-container.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class AdsButtonContainerComponent {
+    /** How buttons in the container should be placed */
+    justify: import("@angular/core").InputSignal<"flex-start" | "flex-end" | "center">;
+    /** The gap between elements */
+    gap: import("@angular/core").InputSignal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsButtonContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsButtonContainerComponent, "ads-button-container", never, { "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+}

package/src/lib/components/buttons/button-container/button-container.module.d.ts

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

package/src/lib/components/buttons/button-container/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ascentgl/ads-ui/src/lib/components/buttons/button-container" />
+export * from './public-api';

package/src/lib/components/buttons/button-container/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './button-container.component';
+export * from './button-container.module';

package/src/lib/components/buttons/selection-button/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ascentgl/ads-ui/src/lib/components/buttons/selection-button" />
+export * from './public-api';

package/src/lib/components/buttons/selection-button/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './selection-button.component';
+export * from './selection-button.module';

package/src/lib/components/buttons/selection-button/selection-button.component.d.ts

@@ -0,0 +1,40 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { AdsIconRegistry } from '@ascentgl/ads-icons';
+import { adsIcon } from '@ascentgl/ads-icons/icons';
+import * as i0 from "@angular/core";
+export declare class AdsSelectionButtonComponent {
+    private registry;
+    constructor(registry: AdsIconRegistry);
+    /** @ignore */
+    button: ElementRef;
+    /**
+     * aria-label for the button
+     */
+    ariaLabel: string;
+    /**
+     *  Whether the button is disabled
+     */
+    disabled: boolean;
+    /**
+     * The icon to display
+     */
+    icon: adsIcon;
+    /**
+     * The unique ID for the selection button
+     */
+    id: string;
+    /** Whether to show the active icon when button is in the active state */
+    showActiveIcon: boolean;
+    /**
+     * Event emitted when the button is clicked
+     */
+    stateChanged: EventEmitter<boolean>;
+    /** @ignore */
+    active: boolean;
+    /** @ignore */
+    onClick(): void;
+    /** @ignore */
+    onMouseleave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsSelectionButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsSelectionButtonComponent, "ads-selection-button", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "id": { "alias": "id"; "required": false; }; "showActiveIcon": { "alias": "showActiveIcon"; "required": false; }; }, { "stateChanged": "stateChanged"; }, never, never, false, never>;
+}

package/src/lib/components/buttons/selection-button/selection-button.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./selection-button.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/core";
+import * as i4 from "@ascentgl/ads-icons";
+export declare class AdsSelectionButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsSelectionButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsSelectionButtonModule, [typeof i1.AdsSelectionButtonComponent], [typeof i2.CommonModule, typeof i3.MatRippleModule, typeof i4.AdsIconModule], [typeof i1.AdsSelectionButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AdsSelectionButtonModule>;
+}

package/src/lib/components/card/card.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class AdsCardComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsCardComponent, "ads-card", never, {}, {}, never, ["*"], false, never>;
+}

package/src/lib/components/card/card.module.d.ts

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

package/src/lib/components/card/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ascentgl/ads-ui/src/lib/components/card" />
+export * from './public-api';

package/src/lib/components/card/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './card.component';
+export * from './card.module';

package/src/lib/components/divider/divider.component.d.ts

@@ -0,0 +1,26 @@
+import { OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export type DividerStyle = {
+    margin: string | number;
+    'background-color': string;
+};
+export declare class DividerComponent implements OnChanges {
+    /**
+     * The divider left and right margin
+     */
+    margin: string | number;
+    /**
+     * The divider color
+     */
+    color: 'primary' | 'secondary' | 'light';
+    /** @ignore */
+    style: DividerStyle;
+    /** @ignore */
+    private colors;
+    /** @ignore */
+    ngOnChanges(): void;
+    /** @ignore */
+    private setDividerStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DividerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "ads-divider", never, { "margin": { "alias": "margin"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
+}

package/src/lib/components/divider/divider.module.d.ts

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

package/src/lib/components/divider/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ascentgl/ads-ui/src/lib/components/divider" />
+export * from './public-api';

package/src/lib/components/divider/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './divider.component';
+export * from './divider.module';

package/src/lib/components/drag-and-drop-list/dom.element.d.ts

@@ -0,0 +1,17 @@
+export declare class DomElement {
+    private domElement;
+    constructor(domElement: HTMLElement);
+    get dom(): HTMLElement;
+    canDrop(): boolean;
+    canDrag(): boolean;
+    isDropBlocked(): boolean;
+    makeDraggable(): void;
+    makeUnDraggable(): void;
+    unblockDrop(): void;
+    clone(): HTMLElement;
+    blockDrop(): void;
+    draggedOver(): void;
+    draggedOut(): void;
+    isDragged(): void;
+    isNotDragged(): void;
+}