@latitude-ui/widgets 0.0.13 → 0.0.15

package/select/public-api.d.ts

@@ -1,6 +0,0 @@
-export * from './src/select/select.directive';
-export * from './src/select-option/select-option.component';
-export * from './src/select-option/select-option.directive';
-export * from './src/select-multiple.component';
-export * from './src/select-single.component';
-export * from './src/select.module';

package/select/src/select/select.directive.d.ts

@@ -1,24 +0,0 @@
-import { Signal } from '@angular/core';
-import { ConnectedOverlayPositionChange, ConnectedPosition } from '@angular/cdk/overlay';
-import { BuildInInputValueAccessor } from '@latitude-ui/widgets/input';
-import { SelectOptionDirective } from '../select-option/select-option.directive';
-import * as i0 from "@angular/core";
-export declare abstract class SelectDirective<T, TValue> extends BuildInInputValueAccessor<TValue> {
-    readonly _children: Signal<readonly SelectOptionDirective<T>[]>;
-    readonly _indexes: Signal<Map<T, SelectOptionDirective<T>>>;
-    readonly _selected: Signal<SelectOptionDirective<T>[]>;
-    readonly _overlayWidth: import("@angular/core").WritableSignal<number>;
-    readonly _overlayState: import("@angular/core").WritableSignal<boolean>;
-    readonly _overlayExpanded: Signal<boolean>;
-    readonly _overlayPositions: import("@angular/core").WritableSignal<ConnectedPosition[]>;
-    readonly _overlayPositionSide: import("@angular/core").WritableSignal<"bottom" | "top" | "left" | "right">;
-    hide(): undefined;
-    open(): undefined;
-    toggle(): void;
-    _updateOverlayPositionSide({ connectionPair }: ConnectedOverlayPositionChange): void;
-    /** ABSTRACT SECTION  */
-    abstract selected: Signal<T[]>;
-    abstract select(option: SelectOptionDirective<T>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectDirective<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectDirective<any, any>, never, never, {}, {}, ["_children"], never, true, never>;
-}

package/select/src/select-dropdown/select-dropdown.component.d.ts

@@ -1,14 +0,0 @@
-import { TextBoxComponent } from '@latitude-ui/widgets/textbox';
-import { SelectDirective } from '../select/select.directive';
-import { SelectOptionDirective } from '../select-option/select-option.directive';
-import * as i0 from "@angular/core";
-export declare class SelectDropDownComponent<T> {
-    readonly dir: SelectDirective<any, any>;
-    readonly selection: import("@angular/core").OutputEmitterRef<SelectOptionDirective<T>>;
-    readonly textbox: import("@angular/core").Signal<TextBoxComponent>;
-    readonly filters: import("@angular/core").WritableSignal<string>;
-    readonly options: import("@angular/core").Signal<readonly SelectOptionDirective<any>[]>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectDropDownComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectDropDownComponent<any>, "lat-select-dropdown", ["latSelectDropDown"], {}, { "selection": "selection"; }, never, never, true, never>;
-}

package/select/src/select-multiple.component.d.ts

@@ -1,10 +0,0 @@
-import { SelectDirective } from './select/select.directive';
-import { SelectOptionDirective } from './select-option/select-option.directive';
-import * as i0 from "@angular/core";
-export declare class SelectMultipleComponent<T> extends SelectDirective<T, T[]> {
-    readonly maxlength: import("@angular/core").InputSignalWithTransform<number, unknown>;
-    selected: import("@angular/core").Signal<T[]>;
-    select(option: SelectOptionDirective<T>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectMultipleComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectMultipleComponent<any>, "lat-select[type=\"multiple\"]", ["latSelect"], { "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}

package/select/src/select-option/select-option.component.d.ts

@@ -1,10 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./select-option.directive";
-export declare class SelectOptionComponent<T> {
-    readonly value: import("@angular/core").InputSignal<T>;
-    readonly label: import("@angular/core").InputSignal<string>;
-    readonly hidden: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionComponent<any>, "lat-select-option", ["latSelectOption"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.SelectOptionDirective; inputs: {}; outputs: {}; }]>;
-}

package/select/src/select-option/select-option.directive.d.ts

@@ -1,14 +0,0 @@
-import { SelectDirective } from '../select/select.directive';
-import { SelectOptionComponent } from './select-option.component';
-import * as i0 from "@angular/core";
-export declare class SelectOptionDirective<T> {
-    readonly select: SelectDirective<any, any>;
-    readonly option: SelectOptionComponent<T>;
-    readonly value: import("@angular/core").Signal<T>;
-    readonly label: import("@angular/core").Signal<string>;
-    readonly hidden: import("@angular/core").Signal<boolean>;
-    readonly disabled: import("@angular/core").Signal<boolean>;
-    readonly selected: import("@angular/core").Signal<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectOptionDirective<any>, never, never, {}, {}, never, never, true, never>;
-}

package/select/src/select-single.component.d.ts

@@ -1,10 +0,0 @@
-import { SelectDirective } from './select/select.directive';
-import { SelectOptionDirective } from './select-option/select-option.directive';
-import * as i0 from "@angular/core";
-export declare class SelectSingleComponent<T> extends SelectDirective<T, T> {
-    readonly nullable: import("@angular/core").InputSignalWithTransform<unknown, boolean>;
-    selected: import("@angular/core").Signal<T[]>;
-    select(option: SelectOptionDirective<T>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectSingleComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectSingleComponent<any>, "lat-select[type=\"single\"]", ["latSelect"], { "nullable": { "alias": "nullable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}

package/select/src/select-trigger/select-trigger.component.d.ts

@@ -1,9 +0,0 @@
-import { SelectDirective } from '../select/select.directive';
-import * as i0 from "@angular/core";
-export declare class SelectTriggerComponent {
-    readonly select: SelectDirective<any, any>;
-    readonly nativeElement: any;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectTriggerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectTriggerComponent, "lat-select-trigger", ["latSelectTrigger"], {}, {}, never, ["lat-select-values"], true, never>;
-}

package/select/src/select-value/select-value.component.d.ts

@@ -1,7 +0,0 @@
-import { SelectDirective } from '../select/select.directive';
-import * as i0 from "@angular/core";
-export declare class SelectValueComponent {
-    readonly select: SelectDirective<any, any>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectValueComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectValueComponent, "lat-select-value", ["latSelectValue"], {}, {}, never, ["*"], true, never>;
-}

package/select/src/select-values/select-values.component.d.ts

@@ -1,7 +0,0 @@
-import { SelectDirective } from '../select/select.directive';
-import * as i0 from "@angular/core";
-export declare class SelectValuesComponent {
-    readonly select: SelectDirective<any, any>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectValuesComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectValuesComponent, "lat-select-values", ["latSelectValues"], {}, {}, never, never, true, never>;
-}

package/select/src/select.module.d.ts

@@ -1,4 +0,0 @@
-import { SelectOptionComponent } from './select-option/select-option.component';
-import { SelectMultipleComponent } from './select-multiple.component';
-import { SelectSingleComponent } from './select-single.component';
-export declare const SelectModule: readonly [typeof SelectOptionComponent, typeof SelectMultipleComponent, typeof SelectSingleComponent];

package/styles/_colors.scss

@@ -1,99 +0,0 @@
-$icon-color: #6d6e6f !default;
-$icon-color-hover: #1e1f21 !default;
-$icon-color-active: #1e1f21 !default;
-$icon-color-strong: #6d6e6f !default;
-$icon-color-disabled: #afabac !default;
-$icon-color-foreground: #ffffff !default;
-
-$text-color: #1e1f21 !default;
-$text-color-strong: #555555 !default;
-$text-color-subtle: #6d6e6f !default;
-$text-color-subtle-hover: #1e1f21 !default;
-$text-color-disabled: #afabac !default;
-$text-color-foreground: #ffffff !default;
-
-$shadow-color: rgba(109, 110, 111, .1) !default;
-$shadow-color-weak: rgba(109, 110, 111, .08) !default;
-$shadow-color-strong: rgba(109, 110, 111, .12) !default;
-
-$outline-color: #edeae9 !default;
-$outline-color-hover: #afabac !default;
-$outline-color-active: #6d6e6f !default;
-$outline-color-strong: #cfcbcb !default;
-
-$background-color: #ffffff !default;
-$background-color-hover: rgba(55, 23, 23, .03) !default;
-$background-color-active: rgba(55, 23, 23, .05) !default;
-$background-color-strong: #f5f3f3 !default;
-$background-color-subtle: #f9f8f8 !default;
-$background-color-subtle-hover: rgba(55, 23, 23, .05) !default;
-$background-color-subtle-active: rgba(55, 23, 23, .06) !default;
-
-$primary-color: #4573d2 !default;
-$primary-color-hover: #426dc6 !default;
-$primary-color-active: #3f66ba !default;
-
-$primary-color-weak: #f1f2fc !default;
-$primary-color-weak-hover: #e7e9fc !default;
-$primary-color-weak-active: #dbe0fd !default;
-
-$danger-color: #fa5252 !default;
-$danger-color-hover: #fa5252 !default;
-$danger-color-active: #fa5252 !default;
-
-$box-shadow-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, .08);
-$box-shadow-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, .1);
-$box-shadow-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, .1);
-$box-shadow-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, .1);
-$box-shadow-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, .12);
-
-:root {
-  --lat-icon-color: #{$icon-color};
-  --lat-icon-color-hover: #{$icon-color-hover};
-  --lat-icon-color-active: #{$icon-color-active};
-  --lat-icon-color-strong: #{$icon-color-strong};
-  --lat-icon-color-disabled: #{$icon-color-disabled};
-  --lat-icon-color-foreground: #{$icon-color-foreground};
-
-  --lat-text-color: #{$text-color};
-  --lat-text-color-strong: #{$text-color-strong};
-  --lat-text-color-subtle: #{$text-color-subtle};
-  --lat-text-color-subtle-hover: #{$text-color-subtle-hover};
-  --lat-text-color-disabled: #{$text-color-disabled};
-  --lat-text-color-foreground: #{$text-color-foreground};
-
-  --lat-shadow-color: #{$shadow-color};
-  --lat-shadow-color-weak: #{$shadow-color-weak};
-  --lat-shadow-color-strong: #{$shadow-color-strong};
-
-  --lat-outline-color: #{$outline-color};
-  --lat-outline-color-hover: #{$outline-color-hover};
-  --lat-outline-color-active: #{$outline-color-active};
-  --lat-outline-color-strong: #{$outline-color-strong};
-
-  --lat-background-color: #{$background-color};
-  --lat-background-color-hover: #{$background-color-hover};
-  --lat-background-color-active: #{$background-color-active};
-  --lat-background-color-strong: #{$background-color-strong};
-  --lat-background-color-subtle: #{$background-color-subtle};
-  --lat-background-color-subtle-hover: #{$background-color-subtle-hover};
-  --lat-background-color-subtle-active: #{$background-color-subtle-active};
-
-  --lat-primary-color: #{$primary-color};
-  --lat-primary-color-hover: #{$primary-color-hover};
-  --lat-primary-color-active: #{$primary-color-active};
-
-  --lat-primary-color-weak: #{$primary-color-weak};
-  --lat-primary-color-weak-hover: #{$primary-color-weak-hover};
-  --lat-primary-color-weak-active: #{$primary-color-weak-active};
-
-  --lat-danger-color: #{$danger-color};
-  --lat-danger-color-hover: #{$danger-color-hover};
-  --lat-danger-color-active: #{$danger-color-active};
-
-  --lat-box-shadow-small: #{$box-shadow-small};
-  --lat-box-shadow-medium: #{$box-shadow-medium};
-  --lat-box-shadow-medium-hover: #{$box-shadow-medium-hover};
-  --lat-box-shadow-medium-active: #{$box-shadow-medium-active};
-  --lat-box-shadow-large: #{$box-shadow-large};
-}

package/styles/_defaults.scss

@@ -1,135 +0,0 @@
-
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: var(--lat-font-family-sans, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'), sans-serif;
-
-  font-size: 16px;
-  font-weight: var(--lat-font-weight-normal, 450);
-  line-height: 24px;
-
-  -webkit-text-size-adjust: 100%;
-  tab-size: 4;
-}
-
-
-body {
-  margin: 0;
-}
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--lat-font-famiy-monospace, ui-monospace, SFMono-Regular, inherit Consolas, 'Liberation Mono', Menlo), monospace;
-  font-size: 1em;
-}
-
-
-small {
-  font-size: 80%;
-}
-
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-
-table {
-  border-color: currentcolor;
-}
-
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
-
-
-legend {
-  padding: 0;
-}
-
-
-progress {
-  vertical-align: baseline;
-}
-
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-
-
-summary {
-  display: list-item;
-}
-
-.lat-root {
-  display: flex;
-
-  overflow: hidden;
-  box-sizing: border-box;
-
-  width: var(--lat-layout-width, 100vw);
-  height: var(--lat-layout-height, 100vw);
-}
-
-
-

package/styles/_index.scss

@@ -1,11 +0,0 @@
-@use "colors";
-@use "typography";
-
-@use "defaults";
-
-@use "button";
-@use "icons";
-@use "listbox";
-
-@use "forms";
-

package/styles/_typography.scss

@@ -1,37 +0,0 @@
-$font-family-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !default;
-$font-family-monospace: "Berkeley Mono", "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
-
-$font-size-tiny: 0.625rem !default;
-$font-size-small: 0.75rem !default;
-$font-size-normal: 0.875rem !default;
-$font-size-medium: 1rem !default;
-$font-size-large: 1.25rem !default;
-
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-
-
-:root {
-  --lat-font-family-sans: #{$font-family-sans};
-  --lat-font-family-monospace: #{$font-family-monospace};
-
-  --lat-font-size-tiny: #{$font-size-tiny};
-  --lat-font-size-small: #{$font-size-small};
-  --lat-font-size-normal: #{$font-size-normal};
-  --lat-font-size-medium: #{$font-size-medium};
-  --lat-font-size-large: #{$font-size-large};
-
-  --lat-font-weight-light: #{$font-weight-light};
-  --lat-font-weight-normal: #{$font-weight-normal};
-  --lat-font-weight-medium: #{$font-weight-medium};
-  --lat-font-weight-semibold: #{$font-weight-semibold};
-  --lat-font-weight-bold: #{$font-weight-bold};
-
-  --lat-font-size: var(--lat-font-size-medium);
-  --lat-font-family: var(--lat-font-family-sans);
-  --lat-font-weight: var(--lat-font-weight-normal);
-
-}

package/styles/button/_index.scss

@@ -1,199 +0,0 @@
-
-lat-button {
-  overflow: hidden;
-  position: relative;
-
-  box-sizing: border-box;
-
-  display: inline-flex;
-
-  gap: 4px;
-  flex-shrink: 0;
-
-  align-items: center;
-  justify-content: center;
-
-  margin: 0;
-  padding: 0;
-
-  outline: none;
-
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  vertical-align: top;
-  text-decoration: none;
-  touch-action: manipulation;
-
-  border-width: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-radius: 4px;
-
-  font-family: var(--lat-font-family-sans), sans-serif;
-  font-weight: var(--lat-font-weight-normal);
-  line-height: normal;
-
-  transition-property: background, border, color, fill, opacity;
-  transition-duration: 0.2s;
-
-  &[data-size] {
-    height: var(--lat-button-height);
-    padding: var(--lat-button-padding);
-    font-size: var(--lat-button-font-size);
-    line-height: var(--lat-button-line-height);
-  }
-
-  &[data-onlyicon="true"] {
-    width: var(--lat-button-height);
-    min-width: var(--lat-button-height);
-  }
-
-  &[data-size="sm"] {
-    --lat-button-height: 24px;
-    --lat-button-padding: 0 8px;
-    --lat-button-font-size: 12px;
-    --lat-button-line-height: 24px;
-  }
-
-  &[data-size="md"] {
-    --lat-button-height: 28px;
-    --lat-button-padding: 0 8px;
-    --lat-button-font-size: 12px;
-    --lat-button-line-height: 28px;
-  }
-
-  &[data-size="lg"] {
-    --lat-button-height: 32px;
-    --lat-button-padding: 0 10px;
-    --lat-button-font-size: 14px;
-    --lat-button-line-height: 32px;
-  }
-
-  &[data-variant="action"] {
-    fill: #ffffff;
-    color: #ffffff;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--lat-primary-color);
-    background-color: var(--lat-primary-color);
-
-    &:hover {
-      fill: #ffffff;
-      color: #ffffff;
-      border-color: var(--lat-primary-color-hover);
-      background-color: var(--lat-primary-color-hover);
-    }
-
-    &:active {
-      fill: #ffffff;
-      color: #ffffff;
-      border-color: var(--lat-primary-color-active);
-      background-color: var(--lat-primary-color-active);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="default"] {
-    fill: var(--lat-icon-color);
-    color: var(--lat-text-color);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--lat-outline-color-strong);
-    background-color: #ffffff;
-
-    &:hover {
-      fill: var(--lat-icon-hover);
-      color: var(--lat-text-color);
-      border-color: var(--lat-outline-color-hover);
-      background-color: var(--lat-background-color-subtle);
-    }
-
-    &:active {
-      fill: var(--lat-icon-hover);
-      color: var(--lat-text-color);
-      border-color: var(--lat-outline-color-active);
-      background-color: var(--lat-background-color-strong);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="text"] {
-    fill: var(--lat-text-color);
-    color: var(--lat-text-color);
-    border-color: transparent;
-    background-color: transparent;
-
-    &:hover {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-hover);
-      background-color: var(--lat-background-color-hover);
-    }
-
-    &:active {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-active);
-      background-color: var(--lat-background-color-active);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="subtle"] {
-    fill: var(--lat-text-color-subtle);
-    color: var(--lat-text-color-subtle);
-    border-color: transparent;
-    background-color: transparent;
-
-    &:hover {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-subtle-hover);
-      background-color: var(--lat-background-color-subtle-hover);
-    }
-
-    &:active {
-      fill: var(--lat-text-color);
-      color: var(--lat-text-color);
-      border-color: var(--lat-background-color-subtle-active);
-      background-color: var(--lat-background-color-subtle-active);
-    }
-
-    &:focus-visible {
-    }
-  }
-
-  &[data-variant="danger"] {
-
-  }
-
-  &[data-variant="success"] {
-
-  }
-
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-
-    fill: var(--lat-text-color-disabled);
-    color: var(--lat-text-color-disabled);
-    background: #ffffff;
-    border-color: var(--lat-outline-color);
-
-    &:hover,
-    &:active,
-    &:focus-visible {
-      fill: var(--lat-text-color-disabled);
-      color: var(--lat-text-color-disabled);
-      background: #ffffff;
-      border-color: var(--lat-outline-color);
-    }
-  }
-
-}