cedar-embeddable-editor 0.9.0

package/src/app/modules/shared/components/static-footer/static-footer.component.scss

@@ -0,0 +1,110 @@
+.main__footer {
+  margin: 30px auto 0px auto;
+  max-width: 80%;
+  padding-top:20px;
+
+  @media only screen and (max-width: 300px) {
+    max-width: 100%;
+    padding: 0 10px;
+  }
+
+  @media only screen and (min-width: 301px) and (max-width: 600px) {
+    max-width: calc(100% - 4em);
+  }
+
+  @media only screen and (min-width: 601px) and (max-width: 700px) {
+    max-width: 580px;
+  }
+
+  @media only screen and (min-width: 701px) and (max-width: 1000px) {
+    max-width: calc(80% - 4em);
+  }
+
+  @media only screen and (min-width: 1001px) {
+    max-width: calc(1000px - 4em);
+  }
+
+  .flex {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+}
+
+.footer-title {
+  font-weight: lighter;
+  font-family: CrimsonText, serif;
+  font-size: 34px;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-bottom: 0;
+}
+
+.paragraph__section {
+  padding: 0;
+  font-size: 1.2em;
+  line-height: 1.2em;
+  font-weight: lighter;
+}
+
+.form__section {
+  position: relative;
+  padding: 3em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  .disclaimer {
+    color: rgba(0, 0, 0, 0.54);
+    padding: 10px;
+    font-size: .8em;
+  }
+
+  .subscribe {
+    display: flex;
+    justify-content: center;
+    width: 25em;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.1);
+    box-sizing: content-box;
+    border-radius: 4px;
+    vertical-align: middle;
+
+    input, input:active {
+      width: 14em;
+      border-width: 0px;
+      padding: 20px;
+      margin: 4px;
+    }
+
+    button {
+      margin: 5px;
+    }
+  }
+}
+
+.copyright__text {
+  letter-spacing: 0.1rem;
+  color: white;
+}
+
+.wide-container {
+  background: #e8e8e8;
+}
+
+img.bmir-logo {
+  float: right;
+  margin-bottom: 20px;
+  width: 120px;
+}
+
+a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}

package/src/app/modules/shared/components/static-footer/static-footer.component.spec.ts

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

package/src/app/modules/shared/components/static-footer/static-footer.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'app-static-footer',
+  templateUrl: './static-footer.component.html',
+  styleUrls: ['./static-footer.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class StaticFooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/modules/shared/components/static-header/static-header.component.html

@@ -0,0 +1,10 @@
+<mat-toolbar color="primary" style="height:75px;">
+  <span class="cedar-logo"></span>
+  <span style="margin-left:5px;">{{'App.Title' | translate}}</span>
+  <span class="toolbar-spacer"></span>
+  <span class="sample-templates-flex" *ngIf="showSampleTemplateLinks">
+    <app-sample-template-select
+      [callbackOwnerObject]="callbackOwnerObject"
+    ></app-sample-template-select>
+  </span>
+</mat-toolbar>

package/src/app/modules/shared/components/static-header/static-header.component.scss

@@ -0,0 +1,13 @@
+.sample-templates-flex {
+  flex: auto;
+
+  .mat-form-field {
+    font-size: 85%;
+  }
+
+  .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
+    display: none;
+  }
+}
+
+

package/src/app/modules/shared/components/static-header/static-header.component.spec.ts

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

package/src/app/modules/shared/components/static-header/static-header.component.ts

@@ -0,0 +1,21 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'app-static-header',
+  templateUrl: './static-header.component.html',
+  styleUrls: ['./static-header.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class StaticHeaderComponent implements OnInit {
+
+  @Input() callbackOwnerObject: any = null;
+  @Input() showSampleTemplateLinks: boolean = null;
+
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/modules/shared/components/timezone-picker/timezone-picker.component.html

@@ -0,0 +1,16 @@
+<div class="wrapper" [formGroup]="form">
+  <ng-select [formControlName]="'timezone'"
+             [items]="timeZones"
+             [clearable]="clearable"
+             [virtualScroll]="virtualScroll"
+             bindLabel="label"
+             [placeholder]="customPlaceholderText"
+             [notFoundText]="customNotFoundText"
+             [appearance]="config.appearance"
+             [appendTo]="config.appendTo"
+             [clearOnBackspace]="config.clearOnBackspace"
+             [closeOnSelect]="config.closeOnSelect"
+             [dropdownPosition]="config.dropdownPosition"
+             [hideSelected]="config.hideSelected">
+  </ng-select>
+</div>

package/src/app/modules/shared/components/timezone-picker/timezone-picker.component.spec.ts

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

package/src/app/modules/shared/components/timezone-picker/timezone-picker.component.ts

@@ -0,0 +1,251 @@
+import {
+  AfterViewInit,
+  Component,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  ViewEncapsulation
+} from '@angular/core';
+import * as momentZone from 'moment-timezone';
+import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+
+export class TZone {
+  id: string;
+  label: string;
+}
+
+
+export interface SelectConfig {
+  appearance: 'underline' | 'outline';
+  appendTo: string;
+  clearOnBackspace: boolean;
+  closeOnSelect: boolean;
+  dropdownPosition: 'auto' | 'bottom' | 'top';
+  hideSelected: boolean;
+}
+
+
+@Component({
+  selector: 'app-timezone-picker',
+  templateUrl: './timezone-picker.component.html',
+  styleUrls: ['./timezone-picker.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TimezonePickerComponent),
+      multi: true
+    }
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class TimezonePickerComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {
+
+  static readonly AVAILABLE_TIMEZONES = [
+    {id: '-12:00', label: '(GMT -12:00) Eniwetok, Kwajalein'},
+    {id: '-11:00', label: '(GMT -11:00) Midway Island, Samoa'},
+    {id: '-10:00', label: '(GMT -10:00) Hawaii'},
+    {id: '-09:30', label: '(GMT -9:30) Taiohae'},
+    {id: '-09:00', label: '(GMT -9:00) Alaska'},
+    {id: '-08:00', label: '(GMT -8:00) Pacific Time (US & Canada)'},
+    {id: '-07:00', label: '(GMT -7:00) Mountain Time (US & Canada)'},
+    {id: '-06:00', label: '(GMT -6:00) Central Time (US & Canada), Mexico City'},
+    {id: '-05:00', label: '(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima'},
+    {id: '-04:30', label: '(GMT -4:30) Caracas'},
+    {id: '-04:00', label: '(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz'},
+    {id: '-03:30', label: '(GMT -3:30) Newfoundland'},
+    {id: '-03:00', label: '(GMT -3:00) Brazil, Buenos Aires, Georgetown'},
+    {id: '-02:00', label: '(GMT -2:00) Mid-Atlantic'},
+    {id: '-01:00', label: '(GMT -1:00) Azores, Cape Verde Islands'},
+    {id: 'Z', label: '(GMT) Western Europe Time, London, Lisbon, Casablanca'},
+    {id: '+01:00', label: '(GMT +1:00) Brussels, Copenhagen, Madrid, Paris'},
+    {id: '+02:00', label: '(GMT +2:00) Kaliningrad, South Africa'},
+    {id: '+03:00', label: '(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg'},
+    {id: '+03:30', label: '(GMT +3:30) Tehran'},
+    {id: '+04:00', label: '(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi'},
+    {id: '+04:30', label: '(GMT +4:30) Kabul'},
+    {id: '+05:00', label: '(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent'},
+    {id: '+05:30', label: '(GMT +5:30) Bombay, Calcutta, Madras, New Delhi'},
+    {id: '+05:45', label: '(GMT +5:45) Kathmandu, Pokhara'},
+    {id: '+06:00', label: '(GMT +6:00) Almaty, Dhaka, Colombo'},
+    {id: '+06:30', label: '(GMT +6:30) Yangon, Mandalay'},
+    {id: '+07:00', label: '(GMT +7:00) Bangkok, Hanoi, Jakarta'},
+    {id: '+08:00', label: '(GMT +8:00) Beijing, Perth, Singapore, Hong Kong'},
+    {id: '+08:45', label: '(GMT +8:45) Eucla'},
+    {id: '+09:00', label: '(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk'},
+    {id: '+09:30', label: '(GMT +9:30) Adelaide, Darwin'},
+    {id: '+10:00', label: '(GMT +10:00) Eastern Australia, Guam, Vladivostok'},
+    {id: '+10:30', label: '(GMT +10:30) Lord Howe Island'},
+    {id: '+11:00', label: '(GMT +11:00) Magadan, Solomon Islands, New Caledonia'},
+    {id: '+11:30', label: '(GMT +11:30) Norfolk Island'},
+    {id: '+12:00', label: '(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka'},
+    {id: '+12:45', label: '(GMT +12:45) Chatham Islands'},
+    {id: '+13:00', label: '(GMT +13:00) Apia, Nukualofa'},
+    {id: '+14:00', label: '(GMT +14:00) Line Islands, Tokelau'}
+  ];
+
+
+  /**
+   * Setup section.
+   */
+  @Input() getUserZone = false;
+  @Input() customPlaceholderText = 'Choose...';
+  @Input() customNotFoundText = 'No zone found';
+  @Input() clearable = false;
+  @Input() virtualScroll = true;
+  @Input() disabled = false;
+
+  @Input() set config(conf: SelectConfig) {
+    this._config = conf;
+  }
+
+  private _config: SelectConfig = {
+    hideSelected: false,
+    dropdownPosition: 'auto',
+    appearance: 'underline',
+    clearOnBackspace: true,
+    closeOnSelect: true,
+    appendTo: null
+  };
+
+  get config(): SelectConfig {
+    return this._config;
+  }
+
+  /**
+   * Internals section.
+   */
+  timeZones: Array<any>;
+  form: FormGroup;
+  private propagateChange: (_: any) => {};
+  private destroy$ = new Subject<void>();
+
+  constructor(private fb: FormBuilder) {
+  }
+
+  static guessedUserZone(): TZone {
+    const guessedZone = momentZone.tz.guess(true);
+    return TimezonePickerComponent.findZone(guessedZone);
+  }
+
+  static findZone(zone: string): TZone {
+    const allZones = JSON.parse(JSON.stringify(TimezonePickerComponent.AVAILABLE_TIMEZONES));
+    const utc: string = momentZone.tz(zone).format('Z');
+    return allZones.find(z => z.id === utc);
+  }
+
+  ngOnInit(): void {
+    // make a copy of the list to avoid modifying the original timezones array
+    this.timeZones = JSON.parse(JSON.stringify(TimezonePickerComponent.AVAILABLE_TIMEZONES));
+    this.form = this.fb.group({
+      timezone: []
+    });
+
+    /**
+     * Value change subscription.
+     */
+    this.form.get('timezone').valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => this.fireChanges());
+  }
+
+  ngAfterViewInit(): void {
+    this.guessUserTimezone();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private guessUserTimezone(): void {
+    setTimeout(() => {
+      if (this.getUserZone) {
+        const guessedZone = TimezonePickerComponent.guessedUserZone();
+        this.form.get('timezone').setValue(guessedZone);
+      }
+    });
+  }
+
+
+
+
+
+  // /**
+  //  * Make TZone object from simple string.
+  //  * @link ngOnInit
+  //  */
+  // formatZone(zone: string): TZone {
+  //   const utc: string = momentZone.tz(zone).format('Z');
+  //   return this.timeZones.find(z => z.id === utc);
+  // }
+
+
+
+
+
+
+  /**
+   * Propagate result to parent component.
+   */
+  private fireChanges(): void {
+    if (this.propagateChange) {
+      this.propagateChange(this.form.get('timezone').value);
+    }
+  }
+
+  /**
+   * Clear selection.
+   */
+  private clearZone(): void {
+    this.form.get('timezone').setValue(null);
+  }
+
+  /**
+   * Handle parent imports changes.
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.getUserZone && changes.getUserZone.currentValue) {
+      this.guessUserTimezone();
+    }
+    if (changes.disabled) {
+      setTimeout(() => {
+        changes.disabled.currentValue ? this.form.get('timezone').disable() : this.form.get('timezone').enable();
+      });
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  /**
+   * Handle parent model value changes.
+   */
+  writeValue(zone: string | TZone): void {
+    if (zone) {
+      let _zone: TZone = null;
+
+      if (typeof zone === 'string' && zone.length > 0) {
+        _zone = this.timeZones.find(z => z.id === zone);
+      } else if (typeof zone === 'object') {
+        _zone = this.timeZones.find(z => z.id === zone.id);
+      }
+
+      if (_zone) {
+        this.form.get('timezone').setValue(_zone);
+      }
+    } else {
+      this.clearZone();
+    }
+  }
+
+}