oasys-lib 1.1.4 → 1.2.0

package/src/lib/components/layout/container/container.component.scss

@@ -0,0 +1,66 @@
+@use './../layout';
+@import './../../../../assets/global/responsive.scss';
+
+$mobile-container-width: $mobile-max;
+$tablet-container-width: $tablet-min;
+$laptop-container-width: $laptop-min;
+$desktop-container-width: $desktop-min;
+
+
+ui-container {
+
+  /* ---------------------
+    Responsive Gutter Size
+  --------------------- */
+
+  --container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);
+
+  @include mobile(){
+    --container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);
+  }
+
+  @include tablet(){
+    --container-component-gutter-size: var(--semantic-spacing-container-gutter-size-small);
+  }
+
+  @include laptop(){
+    --container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large);
+  }
+
+  @include desktop(){
+    --container-component-gutter-size: var(--semantic-spacing-container-gutter-size-large);
+  }
+
+  display: block;
+
+  width: 100%;
+  max-width: $global-breakpoint-desktop;
+  margin: 0 auto;
+
+
+  /* ---------------------
+    Responsive Container Widths
+  --------------------- */
+
+  @include mobile(){
+    max-width: 100%;
+  }
+  @include tablet(){
+    max-width: calc(#{$tablet-container-width} - var(--container-component-gutter-size));
+  }
+  @include laptop(){
+    max-width: calc(#{$laptop-container-width} - var(--container-component-gutter-size));
+  }
+  @include desktop(){
+    max-width: calc(#{$desktop-container-width} - var(--container-component-gutter-size));
+  }
+
+
+  /* ---------------------
+    Fluid Container Widths
+  --------------------- */
+
+  &.ui-layout-container-fluid {
+    max-width: 100%;
+  }
+}

package/src/lib/components/layout/container/container.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component} from '@angular/core';
+import { TokenService } from '../../../services/token.service';
+import { LayoutContainerSizes } from '../Layout';
+@Component({
+  selector:'ui-container',
+  template: `
+    <ui-box
+      [boxSpaceRight]="containerHorizontalSizes"
+      [boxSpaceLeft]="containerHorizontalSizes"
+      boxSpaceTop="none"
+      boxSpaceBottom="none">
+
+      <ng-content></ng-content>
+
+    </ui-box>
+  `,
+  host: {
+    '[class]' : 'containerLayoutClasses'
+  },
+  styleUrls: ['./container.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LayoutContainerComponent implements OnInit, OnChanges {
+  @Input() containerFluid: boolean = false;
+  @Input() containerGutter: boolean = true;
+  prefix = 'ui-layout-container';
+  containerLayoutClasses?: string[];
+
+  containerGutterNameLarge: string;
+  containerGutterNameSmall: string;
+  containerHorizontalSizes: LayoutContainerSizes;
+
+  constructor(private changes: ChangeDetectorRef, private tokenService: TokenService) { }
+
+  ngOnChanges(): void {
+    this.ngOnInit();
+    this.changes.markForCheck();
+  }
+
+  ngOnInit(): void {
+
+    if(this.containerGutter){
+
+
+      this.containerGutterNameSmall = this.tokenService.getTokenValue('--semantic-spacing-container-gutter-box-name-small');
+      this.containerGutterNameLarge = this.tokenService.getTokenValue('--semantic-spacing-container-gutter-box-name-large');
+
+      this.containerHorizontalSizes = {
+        desktop: this.containerGutterNameLarge,
+        tablet: this.containerGutterNameLarge,
+        mobile: this.containerGutterNameSmall
+      }
+
+    } else {
+      this.containerHorizontalSizes = {
+        desktop: 'none',
+        tablet: 'none',
+        mobile: 'none'
+      }
+    }
+
+    this.containerLayoutClasses = [
+      this.prefix,
+      `${this.prefix}-${this.containerFluid ? 'fluid' : ''}`
+    ]
+  }
+
+}

package/src/lib/components/layout/grid/grid.component.scss

@@ -0,0 +1,162 @@
+@use './../layout';
+@import './../../../../assets/global/responsive.scss';
+
+$twelveColumnGridSizes: 1, 2,3,4,5,6,7,8,9,10,11,12;
+$layoutDevices: 'mobile', 'tablet', 'laptop', 'desktop';
+
+/* ---------------------
+  Grid Gap Sizes
+--------------------- */
+ui-grid {
+
+
+  /* ---------------------
+  Grid Gap Sizes
+  --------------------- */
+
+  width: 100%;
+  &.ui-layout-grid {
+    &-default {
+      gap: var(--semantic-spacing-grid-default);
+    }
+
+    &-none {
+      gap: var(--semantic-spacing-grid-none);
+    }
+
+  }
+
+
+
+/* ---------------------
+  Even-Width Grid
+  Uses Flexbox and does not wrap
+--------------------- */
+
+  &.ui-layout-grid-width-auto {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  /* ---------------------
+  Even-width columns
+  --------------------- */
+  &.ui-layout-grid-width-auto {
+    ui-column {
+      flex: 1 1 0;
+    }
+
+  }
+
+
+
+/* ---------------------
+  12-Column grid
+  Uses grid to define 12 columns
+--------------------- */
+  &:not(.ui-layout-grid-width-auto){
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  /* ---------------------
+  12-column Columns
+  Responsive
+  --------------------- */
+  &:not(.ui-layout-grid-width-auto){
+
+    ui-column {
+      grid-column: span 12;
+
+      @each $columnSize in $twelveColumnGridSizes {
+        &.ui-layout-column-col-#{$columnSize} {
+          grid-column: span #{$columnSize};
+        }
+      }
+
+      // Responsive Columns
+      @each $device in $layoutDevices {
+        &.ui-layout-column-#{$device} {
+          @if $device== 'mobile' {
+            @include mobile() {
+
+              @each $columnSize in $twelveColumnGridSizes {
+                &-#{$columnSize} {
+                  grid-column: span #{$columnSize};
+                }
+              }
+
+            }
+          }
+          @if $device== 'tablet' {
+            @include tablet() {
+
+              @each $columnSize in $twelveColumnGridSizes {
+                &-#{$columnSize} {
+                  grid-column: span #{$columnSize};
+                }
+              }
+
+            }
+          }
+          @if $device== 'laptop' {
+            @include laptop() {
+
+              @each $columnSize in $twelveColumnGridSizes {
+                &-#{$columnSize} {
+                  grid-column: span #{$columnSize};
+                }
+              }
+
+            }
+          }
+          @if $device== 'desktop' {
+            @include desktop() {
+
+              @each $columnSize in $twelveColumnGridSizes {
+                &-#{$columnSize} {
+                  grid-column: span #{$columnSize};
+                }
+              }
+
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+
+
+/* ---------------------
+  Collapse-Below
+  Collapses grids into 1 column
+  Typically used for Mobile grids
+--------------------- */
+
+  &.ui-layout-grid-collapse-below-tablet {
+    @include mobile(){
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &.ui-layout-grid-collapse-below-laptop {
+    @include tablet(false){
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &.ui-layout-grid-collapse-below-desktop {
+
+    @include laptop(false){
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+
+
+}

package/src/lib/components/layout/grid/grid.component.ts

@@ -0,0 +1,103 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component} from '@angular/core';
+import { LayoutGapSizes, ResponsiveGridColumns } from '../Layout';
+
+@Component({
+  selector:'ui-grid',
+  template: '<ng-content></ng-content>',
+  host: {
+    '[class]' : 'gridLayoutClasses'
+  },
+  styleUrls: ['./grid.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LayoutGridComponent implements OnInit, OnChanges {
+  didFirstInit: boolean = false;
+  prefix = 'ui-layout-grid';
+  gridLayoutClasses?: string[];
+
+  @Input() gridAuto: boolean = false;
+  @Input() gridCollapseBelow: 'tablet' | 'laptop' | 'desktop' | 'none' = 'tablet';
+  @Input() gridGap: 'default' | 'none' = 'default';
+
+  constructor(private changes: ChangeDetectorRef) { }
+
+  ngOnChanges(): void {
+    if(!this.didFirstInit){
+      return;
+    }
+    this.ngOnInit();
+    this.changes.markForCheck();
+  }
+
+  ngOnInit(): void {
+    this.gridLayoutClasses = [
+      this.prefix,
+      `${this.prefix}-${this.gridGap}`,
+      `${this.prefix}-${this.gridAuto ? 'width-auto' : ''}`,
+      `${this.prefix}-collapse-below-${this.gridCollapseBelow}`,
+    ]
+    this.didFirstInit = true;
+  }
+
+}
+
+@Component({
+  selector:'ui-column',
+  template: '<ng-content></ng-content>',
+  host: {
+    '[class]' : 'columnLayoutClasses'
+  },
+  styleUrls: ['./grid.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LayoutGridColumnComponent implements OnInit, OnChanges {
+  didFirstInit: boolean = false;
+  prefix = 'ui-layout-column';
+  columnLayoutClasses?: string[];
+
+  @Input() columns: ResponsiveGridColumns = 12;
+
+  constructor(private changes: ChangeDetectorRef) { }
+
+  getSizeClasses(columns?: ResponsiveGridColumns): string[] {
+
+    if(!columns) {
+      return [''];
+    }
+
+    if(typeof columns === 'object'){
+
+      return Object.keys(columns).map((key) => {
+        return `${this.prefix}-${key}-${columns[key]}`
+      });
+
+    }
+
+    return [
+      this.prefix,
+      `${this.prefix}-col-${columns}`
+    ];
+
+  }
+
+  ngOnChanges(): void {
+    if(!this.didFirstInit){
+      return;
+    }
+    this.ngOnInit();
+    this.changes.markForCheck();
+  }
+
+  ngOnInit(): void {
+    this.columnLayoutClasses = [
+      this.prefix,
+      this.getSizeClasses(this.columns)
+    ].flat(10).filter(Boolean);
+    this.didFirstInit = true;
+  }
+
+}
+

package/src/lib/components/layout/stack/stack.component.scss

@@ -0,0 +1,60 @@
+@use './../layout';
+
+.ui-layout-stack {
+    display: flex;
+    position: relative;
+    align-items: inherit;
+    justify-content: inherit;
+    width: 100%;
+
+    @include layout.layoutGapSizes();
+    @include layout.layoutAlignmentClasses('x');
+    @include layout.layoutAlignmentClasses('y');
+
+
+    /* ---------------------
+      Stack Directions
+    --------------------- */
+
+    &-direction-x {
+      flex-direction: row;
+    }
+
+    &-direction-y {
+      flex-direction: column;
+    }
+
+
+    /* ---------------------
+      Stack Distribution Modes
+    --------------------- */
+
+    &-distribute-fill {
+      > * {
+        flex: 1 1 auto;
+      }
+    }
+
+    &-distribute-fit {
+      > ui-stack {
+        flex-basis: 0%;
+      }
+    }
+
+
+    /* ---------------------
+      Stack Wrap Options
+    --------------------- */
+
+    &-wrap {
+      flex-wrap: wrap;
+    }
+
+    &-no-wrap {
+      flex-wrap: nowrap;
+    }
+
+    &.ui-layout-stack-direction-y.ui-layout-stack-wrap {
+      height: 100%;
+  }
+}

package/src/lib/components/layout/stack/stack.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import { LayoutDirections, LayoutAlignment, LayoutGapSizes, LayoutDistribute } from '../Layout';
+
+@Component({
+  selector:'ui-stack',
+  template: '<ng-content></ng-content>',
+  host: {
+    '[class]' : 'stackLayoutClasses'
+  },
+  styleUrls: ['./stack.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LayoutStackComponent implements OnInit, OnChanges {
+  didFirstInit: boolean = false;
+  prefix = 'ui-layout-stack';
+  stackLayoutClasses?: string[];
+
+  @Input() stackGap: LayoutGapSizes = 'default';
+  @Input() stackAlign: LayoutAlignment = 'start';
+  @Input() stackDirection: LayoutDirections = 'y';
+  @Input() stackDistribute?: LayoutDistribute = 'start';
+  @Input() stackWrap?: Boolean = false;
+
+  constructor(private changes: ChangeDetectorRef) {
+
+  }
+
+  defaultDistribution(): LayoutDistribute {
+    if(this.stackDistribute) {
+      return this.stackDistribute;
+    }
+
+    return this.stackDirection === 'x' ? 'fit' : 'fill';
+  }
+
+  ngOnChanges(): void {
+    if(!this.didFirstInit){
+      return;
+    }
+    this.ngOnInit();
+    this.changes.markForCheck();
+  }
+
+  ngOnInit(): void {
+    this.stackDistribute = this.defaultDistribution();
+    this.stackLayoutClasses = [
+      this.prefix,
+      `${this.prefix}-${this.stackGap}`,
+      `${this.prefix}-align-${this.stackAlign}`,
+      `${this.prefix}-distribute-${this.stackDistribute}`,
+      `${this.prefix}-direction-${this.stackDirection}`,
+      `${this.prefix}-${this.stackWrap ? 'wrap' : 'no-wrap'}`,
+    ]
+    this.didFirstInit = true;
+  }
+
+}

package/src/lib/components/text/text.component.html

@@ -0,0 +1 @@
+<span class="ui-text" [ngClass]="uiTextClasses"><ng-content></ng-content></span>

package/src/lib/components/text/text.component.scss

@@ -0,0 +1,33 @@
+
+.ui-text {
+    font-size: var(--size-font-base);
+    font-family: var(--font-family-body);
+
+    font-weight: var(--font-weight-normal);
+
+    &.ui-text--weight-medium {
+        font-weight: var(--font-weight-medium);
+    }
+
+    &.ui-text--weight-bold {
+        font-weight: var(--font-weight-bold);
+    }
+
+    &.ui-text--transform-uppercase {
+        text-transform: uppercase;
+    }
+}
+
+
+// Modifiers
+.ui-text {
+    &.ui-text--align-left {
+        text-align: left;
+    }
+    &.ui-text--align-center {
+        text-align: center;
+    }
+    &.ui-text--align-right {
+        text-align: right;
+    }
+}

package/src/lib/components/text/text.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextComponent } from './text.component';
+
+describe('TextComponent', () => {
+  let component: TextComponent;
+  let fixture: ComponentFixture<TextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TextComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/text/text.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { TextTransform } from './text';
+
+@Component({
+  selector:'ui-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TextComponent implements OnInit {
+
+  @Input() textAlign: 'left' | 'center' | 'right' = 'left';
+  @Input() textWeight: 'normal' | 'medium' | 'bold' = 'normal';
+  @Input() textTransform: TextTransform = 'none';
+
+  uiTextClasses!: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.uiTextClasses = [
+      `ui-text--align-${this.textAlign}`,
+      `ui-text--weight-${this.textWeight}`,
+      `ui-text--transform-${this.textTransform}`,
+    ].join(' ');
+  }
+
+}

package/src/lib/components/text/text.ts

@@ -0,0 +1 @@
+export type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';

package/src/lib/oasys-lib.module.ts

@@ -0,0 +1,42 @@
+import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { OasysButtonComponent } from './components/button/button.component';
+import { IconComponent } from './components/icon/icon.component';
+import { LayoutBoxComponent } from './components/layout/box/box.component';
+import { WindowService } from './services/window.service';
+import { TokenService } from './services/token.service';
+import { LayoutStackComponent } from './components/layout/stack/stack.component';
+import { LayoutGridComponent, LayoutGridColumnComponent } from './components/layout/grid/grid.component';
+import { LayoutContainerComponent } from './components/layout/container/container.component';
+
+
+
+@NgModule({
+  declarations: [
+    OasysButtonComponent,
+    IconComponent,
+    LayoutBoxComponent,
+    LayoutStackComponent,
+    LayoutGridComponent,
+    LayoutGridColumnComponent,
+    LayoutContainerComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([])
+  ],
+  exports: [
+    OasysButtonComponent,
+    LayoutBoxComponent,
+    LayoutStackComponent,
+    LayoutGridComponent,
+    LayoutGridColumnComponent,
+    LayoutContainerComponent
+  ],
+  providers: [
+    WindowService,
+    TokenService
+  ]
+})
+export class OasysLibModule { }

package/src/lib/oasys-lib.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { OasysLibService } from './oasys-lib.service';
+
+describe('OasysLibService', () => {
+  let service: OasysLibService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(OasysLibService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/oasys-lib.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OasysLibService {
+
+  constructor() { }
+}