Merge pull request #29 from gjovanovicst/main

Implemented radio-button and radio-group components, cosmetics and ui…

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/angular",
-  "version": "0.2.0+7",
+  "version": "0.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -42,5 +42,5 @@
     "tslint": "~6.1.0",
     "typescript": "~4.4.4"
   },
-  "buildnum": "7"
+  "buildnum": "8"
 }

packages/angular/projects/anywhere-ui/src/lib/anywhere-ui.module.ts

@@ -1,9 +1,18 @@
-import { NgModule } from '@angular/core';
-import { defineCustomElements } from '@anywhere-ui/core/loader';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import {
+  ModuleWithProviders,
+  APP_INITIALIZER,
+  NgModule,
+  NgZone,
+  InjectionToken,
+} from '@angular/core';
+import { AnywhereUIConfig } from '@anywhere-ui/core';
+import { appInitialize } from './app-initialize';
+import { ConfigToken } from './providers/config';
 
 import { BooleanValueAccessor } from './directives/boolean-value-accessor';
 // import { NumericValueAccessor } from './directives/number-value-accessor';
-// import { RadioValueAccessor } from './directives/radio-value-accessor';
+import { RadioValueAccessor } from './directives/radio-value-accessor';
 import { SelectValueAccessor } from './directives/select-value-accessor';
 import { TextValueAccessor } from './directives/text-value-accessor';
 
@@ -20,9 +29,11 @@ import {
   AnyBadgeOverlay,
   AnyRippleEffect,
   AnyInputSwitch,
+  AnyRadioButton,
+  AnyRadioGroup,
 } from './directives/proxies';
 
-defineCustomElements(window);
+// defineCustomElements(window);
 
 const DECLARATIONS = [
   // proxies
@@ -38,18 +49,44 @@ const DECLARATIONS = [
   AnyBadgeOverlay,
   AnyRippleEffect,
   AnyInputSwitch,
+  AnyRadioButton,
+  AnyRadioGroup,
 
   // Value Accessors
   BooleanValueAccessor,
   // NumericValueAccessor,
-  // RadioValueAccessor,
+  RadioValueAccessor,
   SelectValueAccessor,
   TextValueAccessor,
 ];
 
 @NgModule({
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
-  imports: [],
+  imports: [CommonModule],
 })
-export class AnywhereUiModule {}
+export class AnywhereUiModule {
+  static forRoot(
+    config?: AnywhereUIConfig
+  ): ModuleWithProviders<AnywhereUiModule> {
+    return {
+      ngModule: AnywhereUiModule,
+      providers: [
+        {
+          provide: ConfigToken,
+          useValue: config,
+        },
+        // {
+        //   provide: ConfigToken,
+        //   useValue: config,
+        // },
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appInitialize,
+          multi: true,
+          deps: [ConfigToken, DOCUMENT, NgZone],
+        },
+      ],
+    };
+  }
+}

packages/angular/projects/anywhere-ui/src/lib/app-initialize.ts

@@ -0,0 +1,40 @@
+import { NgZone } from '@angular/core';
+import { setupConfig } from '@anywhere-ui/core';
+import { applyPolyfills, defineCustomElements } from '@anywhere-ui/core/loader';
+
+import { Config } from './providers/config';
+// import { IonicWindow } from './types/interfaces';
+import { raf } from './util/util';
+
+export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
+  return (): any => {
+    // const win: IonicWindow | undefined = doc.defaultView as any;
+    const win = window;
+    if (win && typeof (window as any) !== 'undefined') {
+      setupConfig({
+        ...config,
+        _zoneGate: (h: any) => zone.run(h),
+      });
+
+      const aelFn =
+        '__zone_symbol__addEventListener' in (doc.body as any)
+          ? '__zone_symbol__addEventListener'
+          : 'addEventListener';
+
+      return applyPolyfills().then(() => {
+        return defineCustomElements(win, {
+          //   exclude: ['ion-tabs', 'ion-tab'],
+          syncQueue: true,
+          raf,
+          jmp: (h: any) => zone.runOutsideAngular(h),
+          ael(elm, eventName, cb, opts) {
+            (elm as any)[aelFn](eventName, cb, opts);
+          },
+          rel(elm, eventName, cb, opts) {
+            elm.removeEventListener(eventName, cb, opts);
+          },
+        });
+      });
+    }
+  };
+};

packages/angular/projects/anywhere-ui/src/lib/directives/angular-component-lib/utils.ts

@@ -43,11 +43,13 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
 }
 
 // tslint:disable-next-line: only-arrow-functions
-export function ProxyCmp(opts: { tagName: string, customElement?: any, inputs?: any; methods?: any }) {
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
   const decorator = function (cls: any) {
-    const { tagName, customElement, inputs, methods } = opts;
+    const { defineCustomElementFn, inputs, methods } = opts;
 
-    defineCustomElement(tagName, customElement);
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
 
     if (inputs) {
       proxyInputs(cls, inputs);

packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts

@@ -11,8 +11,7 @@ import { Components } from '@anywhere-ui/core';
 export declare interface AnyBadge extends Components.AnyBadge {}
 
 @ProxyCmp({
-  tagName: 'any-badge',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'severity', 'size', 'styleClass', 'value']
 })
 @Component({
@@ -33,8 +32,7 @@ export class AnyBadge {
 export declare interface AnyBadgeOverlay extends Components.AnyBadgeOverlay {}
 
 @ProxyCmp({
-  tagName: 'any-badge-overlay',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['styleClass']
 })
 @Component({
@@ -69,8 +67,7 @@ export declare interface AnyButton extends Components.AnyButton {
 }
 
 @ProxyCmp({
-  tagName: 'any-button',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'badge', 'badgeClass', 'disabled', 'icon', 'iconHeight', 'iconPos', 'iconWidth', 'label', 'loading', 'loadingIcon', 'loadingIconStyleClass', 'styleClass', 'type']
 })
 @Component({
@@ -106,16 +103,15 @@ export declare interface AnyCheckbox extends Components.AnyCheckbox {
 }
 
 @ProxyCmp({
-  tagName: 'any-checkbox',
-  customElement: undefined,
-  inputs: ['anyStyle', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value'],
+  defineCustomElementFn: undefined,
+  inputs: ['anyStyle', 'anyTabIndex', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value'],
   methods: ['inputFocus']
 })
 @Component({
   selector: 'any-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['anyStyle', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value']
+  inputs: ['anyStyle', 'anyTabIndex', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value']
 })
 export class AnyCheckbox {
   protected el: HTMLElement;
@@ -164,8 +160,7 @@ export declare interface AnyDropdown extends Components.AnyDropdown {
 }
 
 @ProxyCmp({
-  tagName: 'any-dropdown',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'anyTabIndex', 'autoZIndex', 'baseZIndex', 'clearIcon', 'disabled', 'dropdownIcon', 'hideAnimation', 'inputId', 'name', 'optionLabel', 'optionValue', 'options', 'panelScrollHeight', 'placeholder', 'readonly', 'showAnimation', 'showClear', 'value', 'virtualScroll']
 })
 @Component({
@@ -201,8 +196,7 @@ export declare interface AnyInputSwitch extends Components.AnyInputSwitch {
 }
 
 @ProxyCmp({
-  tagName: 'any-input-switch',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'anyTabIndex', 'ariaLabeledBy', 'checked', 'disabled', 'falseValue', 'inputId', 'name', 'readonly', 'styleClass', 'trueValue']
 })
 @Component({
@@ -230,8 +224,7 @@ export declare interface AnyInputText extends Components.AnyInputText {
 }
 
 @ProxyCmp({
-  tagName: 'any-input-text',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'floatLabel', 'inputId', 'inputWrapperClass', 'label', 'leftIconClass', 'name', 'placeholder', 'readonly', 'rightIconClass', 'value'],
   methods: ['getInputRef']
 })
@@ -260,8 +253,7 @@ export declare interface AnyListbox extends Components.AnyListbox {
 }
 
 @ProxyCmp({
-  tagName: 'any-listbox',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'disabled', 'inputId', 'listStyle', 'name', 'optionLabel', 'optionValue', 'options', 'readonly', 'scrollerHeight', 'value', 'virtualScroll']
 })
 @Component({
@@ -280,11 +272,75 @@ export class AnyListbox {
 }
 
 
+export declare interface AnyRadioButton extends Components.AnyRadioButton {
+  /**
+   * Callback to invoke on radio button select. 
+   */
+  aOnSelect: EventEmitter<CustomEvent<any>>;
+  /**
+   * Callback to invoke when the radio button receives focus. 
+   */
+  aOnFocus: EventEmitter<CustomEvent<any>>;
+  /**
+   * Callback to invoke when the radio button loses focus. 
+   */
+  aOnBlur: EventEmitter<CustomEvent<any>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['anyStyle', 'anyTabIndex', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'styleClass', 'value'],
+  methods: ['setFocus']
+})
+@Component({
+  selector: 'any-radio-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['anyStyle', 'anyTabIndex', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'styleClass', 'value']
+})
+export class AnyRadioButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['aOnSelect', 'aOnFocus', 'aOnBlur']);
+  }
+}
+
+import type { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@anywhere-ui/core';
+export declare interface AnyRadioGroup extends Components.AnyRadioGroup {
+  /**
+   * Emitted when the value has changed. 
+   */
+  valueChange: EventEmitter<CustomEvent<IRadioGroupRadioGroupChangeEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['allowEmptySelection', 'name', 'value']
+})
+@Component({
+  selector: 'any-radio-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['allowEmptySelection', 'name', 'value']
+})
+export class AnyRadioGroup {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['valueChange']);
+  }
+}
+
+
 export declare interface AnyRippleEffect extends Components.AnyRippleEffect {}
 
 @ProxyCmp({
-  tagName: 'any-ripple-effect',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['type']
 })
 @Component({
@@ -305,8 +361,7 @@ export class AnyRippleEffect {
 export declare interface AnyTabPanel extends Components.AnyTabPanel {}
 
 @ProxyCmp({
-  tagName: 'any-tab-panel',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'header', 'selected']
 })
 @Component({
@@ -327,8 +382,7 @@ export class AnyTabPanel {
 export declare interface AnyTabView extends Components.AnyTabView {}
 
 @ProxyCmp({
-  tagName: 'any-tab-view',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['activeIndex', 'anyStyle', 'styleClass']
 })
 @Component({
@@ -371,8 +425,7 @@ export declare interface AnyVirtualScroller extends Components.AnyVirtualScrolle
 }
 
 @ProxyCmp({
-  tagName: 'any-virtual-scroller',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'contentElemClass', 'contentElemTag', 'delay', 'itemElemClass', 'itemSize', 'itemTag', 'items', 'lazy', 'noDataText', 'rowsPerPage', 'scrollElemClass', 'scrollerHeight', 'styleClass']
 })
 @Component({

packages/angular/projects/anywhere-ui/src/lib/directives/radio-value-accessor.ts

@@ -0,0 +1,24 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'any-radio-button',
+  host: {
+    '(aOnSelect)': 'handleChangeEvent($event.target.checked)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

packages/angular/projects/anywhere-ui/src/lib/directives/select-value-accessor.ts

@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'any-dropdown, any-listbox, any-virtual-scroller',
+  selector: 'any-dropdown, any-listbox, any-virtual-scroller, any-radio-group',
   host: {
     '(valueChange)': 'handleChangeEvent($event.target.value)'
   },