@theseam/ui-common 0.2.9

package/framework/schema-form-controls/schema-form-submit/schema-form-submit.component.d.ts

@@ -0,0 +1,18 @@
+import { OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService } from '@ajsf/core';
+export declare class TheSeamSchemaFormSubmitComponent implements OnInit {
+    private jsf;
+    formControl?: AbstractControl;
+    controlName?: string;
+    controlValue: any;
+    controlDisabled: boolean;
+    boundControl: boolean;
+    options: any;
+    layoutNode: any;
+    layoutIndex: number[] | undefined | null;
+    dataIndex: number[] | undefined | null;
+    constructor(jsf: JsonSchemaFormService);
+    ngOnInit(): void;
+    updateValue(event: any): void;
+}

package/framework/schema-form-controls/schema-form-submit-split/schema-form-submit-split.component.d.ts

@@ -0,0 +1,34 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { JsonSchemaFormService, TitleMapItem } from '@ajsf/core';
+export declare type TheSeamSchemaFormSubmitSplitItem = TitleMapItem;
+export declare class TheSeamSchemaFormSubmitSplitComponent implements OnInit, OnDestroy {
+    private jsf;
+    /** @ignore */
+    private readonly _ngUnsubscribe;
+    formControl?: AbstractControl;
+    controlName?: string;
+    controlValue: any;
+    controlDisabled: boolean;
+    boundControl: boolean;
+    options: any;
+    layoutNode: any;
+    layoutIndex: number[] | undefined | null;
+    dataIndex: number[] | undefined | null;
+    _buttonLabel: string;
+    _dropdownObj: any;
+    _dropdownDisabled: boolean;
+    _selectList: TheSeamSchemaFormSubmitSplitItem[];
+    _selectedItem?: TheSeamSchemaFormSubmitSplitItem;
+    constructor(jsf: JsonSchemaFormService);
+    /** @ignore */
+    ngOnInit(): void;
+    /** @ignore */
+    ngOnDestroy(): void;
+    updateValue(event: any): void;
+    private _initDropdown;
+    private _getDropdownControl;
+    private _setSelectListCheckedProp;
+    private _getSelectedItem;
+    _setDropdownValue(value: any): void;
+}

package/framework/side-nav/_side-nav-theme.scss

@@ -0,0 +1,5 @@
+@import './styles/utilities';
+
+@import './side-nav.component';
+@import './side-nav-item/side-nav-item.component';
+@import './side-nav-toggle/side-nav-toggle.component';

package/framework/side-nav/index.d.ts

@@ -0,0 +1,6 @@
+export * from './side-nav-item/side-nav-item.component';
+export * from './side-nav-toggle/side-nav-toggle.component';
+export * from './side-nav.component';
+export * from './side-nav.models';
+export * from './side-nav.module';
+export * from './side-nav-utils';

package/framework/side-nav/side-nav-item/side-nav-item.component.d.ts

@@ -0,0 +1,65 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import type { SeamIcon } from '@theseam/ui-common/icon';
+import type { ThemeTypes } from '@theseam/ui-common/models';
+import { SideNavComponent } from '../side-nav.component';
+import { ISideNavItem } from '../side-nav.models';
+export interface SideNavItemBadgeTooltip {
+    tooltip?: string;
+    class?: string;
+    placement?: string;
+    container?: string;
+    disabled?: boolean;
+}
+export declare class SideNavItemComponent implements OnDestroy {
+    private readonly _sideNav;
+    private readonly _parent?;
+    static ngAcceptInputType_hierLevel: NumberInput;
+    static ngAcceptInputType_indentSize: NumberInput;
+    static ngAcceptInputType_expanded: BooleanInput;
+    static ngAcceptInputType_compact: BooleanInput;
+    static ngAcceptInputType_active: BooleanInput;
+    private readonly _ngUnsubscribe;
+    readonly faAngleLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    itemType: 'divider' | 'basic' | 'link' | 'button' | 'title' | undefined | null;
+    icon: SeamIcon | undefined | null;
+    label: string | undefined | null;
+    active: boolean;
+    set link(value: string | undefined | null);
+    get link(): string | undefined | null;
+    private readonly _link;
+    readonly link$: Observable<string | null | undefined>;
+    queryParams: {
+        [k: string]: any;
+    } | undefined | null;
+    children: ISideNavItem[] | undefined | null;
+    hierLevel: number;
+    indentSize: number;
+    set expanded(value: boolean);
+    get expanded(): boolean;
+    private readonly _expanded;
+    readonly expanded$: Observable<boolean>;
+    set compact(value: boolean);
+    get compact(): boolean;
+    private readonly _compact;
+    readonly compact$: Observable<boolean>;
+    badgeText: string | undefined | null;
+    badgeTheme: ThemeTypes | undefined | null;
+    /**
+     * Content to provide to assistive technology, such as screen readers.
+     */
+    badgeSrContent: string | undefined | null;
+    get badgeTooltip(): string | SideNavItemBadgeTooltip | undefined | null;
+    set badgeTooltip(value: string | SideNavItemBadgeTooltip | undefined | null);
+    private _badgeTooltip;
+    get _isActiveCssClass(): boolean;
+    get _attrDataHierLevel(): number;
+    readonly childGroupAnimState$: Observable<string>;
+    readonly compactAnimState$: Observable<string>;
+    constructor(_sideNav: SideNavComponent, _parent?: SideNavItemComponent | undefined);
+    ngOnDestroy(): void;
+    get hasChildren(): boolean;
+    toggleChildren(): void;
+    _linkClicked(): void;
+}

package/framework/side-nav/side-nav-item/side-nav-item.component.scss

@@ -0,0 +1,158 @@
+@import '../styles/utilities';
+
+seam-side-nav-item {
+  display: block;
+
+  transition: 250ms ease-in-out background-color;
+  &.seam-side-nav-item--active {
+    background-color: $seam-side-nav-item-bg-color-active;
+
+    .active,
+    &:active {
+      background-color: $seam-side-nav-item-bg-color-active;
+    }
+
+    .side-nav-item {
+      &:hover {
+        background-color: $seam-side-nav-item-bg-color-hover;
+      }
+    }
+
+    .nav-link {
+      color: $seam-side-nav-item-color-active;
+    }
+  }
+
+  &:not(.side-nav-item--icon) {
+    .side-nav-item--badge {
+      top: -10px;
+      position: relative;
+      margin-left: 5px;
+    }
+  }
+
+  //
+  .side-nav-item--icon {
+    width: 24px;
+    max-width: 24px;
+    min-width: 24px;
+    height: 24px;
+    max-height: 24px;
+    min-height: 24px;
+    text-align: center;
+
+    .side-nav-item--badge {
+      top: -35px;
+      right: -12px;
+      position: relative;
+
+      &.side-nav-item--badge-no-icon {
+        top: -13px;
+      }
+    }
+  }
+
+  .side-nav-item {
+    min-height: 45px;
+    transition: 250ms ease-in-out background-color;
+
+    &:hover {
+      background-color: $seam-side-nav-item-bg-color-hover;
+    }
+
+    &.active {
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  a.side-nav-item:not([href]):not([tabindex]) {
+    color: $seam-side-nav-item-disabled-color;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .nav-link {
+    color: $seam-side-nav-item-color;
+  }
+
+  .side-nav-btn {
+    font-weight: $font-weight-normal;
+    color: $seam-side-nav-item-color;
+    text-decoration: $link-decoration;
+
+    @include hover {
+      color: $seam-side-nav-item-bg-color-hover;
+      text-decoration: $link-hover-decoration;
+    }
+
+    &:focus,
+    &.focus {
+      text-decoration: $link-hover-decoration;
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: $seam-side-nav-item-disabled-color;
+      pointer-events: none;
+    }
+  }
+
+  // Add the button focus like a link when navigating with keyboard.
+  .cdk-keyboard-focused {
+    // outline: -webkit-focus-ring-color auto 1px;
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  .side-nav-item--toggle-btn-container {
+    transition: 250ms ease-in-out background-color;
+    padding: 0.5rem 1rem;
+  }
+  button.side-nav-item--toggle-btn-container {
+    &:hover {
+      background-color: $seam-side-nav-item-bg-color-hover;
+    }
+  }
+
+  .side-nav-item--toggle-btn {
+    color: $seam-side-nav-item-color-active;
+
+    .svg-inline--fa {
+      transition: 100ms ease-in-out transform;
+    }
+
+    &.side-nav-item--toggle-btn-expanded {
+      .svg-inline--fa {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  .side-nav--group {
+    will-change: height;
+    overflow: hidden;
+  }
+
+  @for $i from 1 through 9 {
+    .side-nav--group--level-#{$i} {
+      background-color: darken($seam-side-nav-bg-color, ($i * $seam-side-nav-group-bg-variation-amount));
+    }
+  }
+
+  .side-nav-item--divider {
+    display: block;
+    border-top: $seam-side-nav-divider-size solid $seam-side-nav-divider-color;
+    width: 100%;
+  }
+
+  .side-nav-item--title {
+    color: $seam-side-nav-title-color;
+    font-size: $seam-side-nav-title-font-size;
+    padding-left: $seam-side-nav-title-padding-left;
+  }
+}
+

package/framework/side-nav/side-nav-toggle/side-nav-toggle.component.d.ts

@@ -0,0 +1,11 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { EventEmitter, OnInit } from '@angular/core';
+export declare class SideNavToggleComponent implements OnInit {
+    static ngAcceptInputType_expanded: BooleanInput;
+    faBars: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    expanded: boolean;
+    toggleExpand: EventEmitter<void>;
+    constructor();
+    ngOnInit(): void;
+    toggle(): void;
+}

package/framework/side-nav/side-nav-toggle/side-nav-toggle.component.scss

@@ -0,0 +1,32 @@
+@import '../styles/utilities';
+
+seam-side-nav-toggle {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+
+  // &.side-nav-toggle--compact {
+  //   width: 50px;
+  // }
+  position: relative;
+  height: 45px;
+  width: 100%;
+
+  //
+  .side-nav-toggle--content {
+    flex: 1 1 0;
+  }
+
+  .side-nav-toggle--btn {
+    // flex: 0 0 auto;
+    // align-self: flex-end;
+    position: absolute;
+    top: 0;
+    right: 5px;
+    color: $seam-side-nav-toggle-btn-color;
+
+    seam-icon {
+      padding: 5px;
+    }
+  }
+}

package/framework/side-nav/side-nav-utils.d.ts

@@ -0,0 +1,18 @@
+import { ISideNavBasic, ISideNavButton, ISideNavDivider, ISideNavItem, ISideNavItemState, ISideNavLink, ISideNavTitle, SideNavItemCanHaveChildren, SideNavItemCanHaveState } from './side-nav.models';
+export declare function isNavItemType(item: ISideNavItem, type: 'title'): item is ISideNavTitle;
+export declare function isNavItemType(item: ISideNavItem, type: 'divider'): item is ISideNavDivider;
+export declare function isNavItemType(item: ISideNavItem, type: 'basic'): item is ISideNavBasic;
+export declare function isNavItemType(item: ISideNavItem, type: 'link'): item is ISideNavLink;
+export declare function isNavItemType(item: ISideNavItem, type: 'button'): item is ISideNavButton;
+export declare function isNavItemActive(item: ISideNavItem): boolean;
+export declare function isExpanded(item: ISideNavItem): boolean;
+export declare function hasChildren(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink) & Required<SideNavItemCanHaveChildren>;
+export declare function canHaveChildren(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink);
+export declare function hasActiveChild(item: ISideNavItem): boolean;
+export declare function hasExpandedChild(item: ISideNavItem): boolean;
+export declare function canBeActive(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink);
+export declare function canExpand(item: ISideNavItem): item is (ISideNavBasic | ISideNavLink);
+export declare function findLinkItems(items: ISideNavItem[]): ISideNavLink[];
+export declare function setItemStateProp<K extends keyof ISideNavItemState>(item: ISideNavItem, prop: K, value: ISideNavItemState[K]): void;
+export declare function getItemStateProp<K extends keyof ISideNavItemState>(item: ISideNavItem, prop: K): ISideNavItemState[K];
+export declare function setDefaultState(item: ISideNavItem): ISideNavItem & Required<SideNavItemCanHaveState>;

package/framework/side-nav/side-nav.component.d.ts

@@ -0,0 +1,40 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { OnDestroy, OnInit } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { TheSeamLayoutService } from '@theseam/ui-common/layout';
+import { ITheSeamBaseLayoutNav, ITheSeamBaseLayoutRef } from '../base-layout/index';
+import { ISideNavItem } from './side-nav.models';
+import { TheSeamSideNavService } from './side-nav.service';
+export declare function sideNavExpandStateChangeFn(fromState: string, toState: string): boolean;
+export declare class SideNavComponent implements OnInit, OnDestroy, ITheSeamBaseLayoutNav {
+    private readonly _layout;
+    private readonly _sideNav;
+    private readonly _baseLayoutRef;
+    static ngAcceptInputType_hasHeaderToggle: BooleanInput;
+    private readonly _ngUnsubscribe;
+    _sideNavExpand: string;
+    hasHeaderToggle: boolean;
+    get items(): ISideNavItem[];
+    set items(value: ISideNavItem[]);
+    private _items;
+    readonly items$: Observable<ISideNavItem[]>;
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    private _expanded;
+    readonly expanded$: Observable<boolean>;
+    get overlay(): boolean;
+    set overlay(value: boolean);
+    private _overlay;
+    readonly overlay$: Observable<boolean>;
+    readonly isMobile$: Observable<boolean>;
+    readonly sideNavExpandedState$: Observable<string>;
+    _backdropHidden: BehaviorSubject<boolean>;
+    constructor(_layout: TheSeamLayoutService, _sideNav: TheSeamSideNavService, _baseLayoutRef: ITheSeamBaseLayoutRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    expand(): void;
+    collapse(): void;
+    toggle(): void;
+    animateStart(): void;
+    animateEnd(): void;
+}

package/framework/side-nav/side-nav.component.scss

@@ -0,0 +1,47 @@
+@import './styles/utilities';
+
+seam-side-nav,
+.seam-side-nav {
+  display: block;
+  height: 100%;
+
+  // Prevent main page content layer overlapping the side-nav while animating.
+  position: relative;
+  z-index: 2;
+
+  .side-nav-inner-wrapper {
+    background: $seam-side-nav-bg;
+    height: 100%;
+  }
+
+  .side-nav-backdrop {
+    background: $seam-side-nav-background-bg-color;
+    width: 100vw;
+    height: 100vh;
+
+    &.side-nav-backdrop-hidden {
+      display: none;
+      width: 0;
+      height: 0;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  overflow: hidden;
+
+  //
+  .side-nav-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex-wrap: nowrap;
+  }
+
+  .side-nav-items-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1 1 100%;
+  }
+}