@beeq/angular 1.8.0-beta.9 → 1.8.0

package/src/directives/index.ts

@@ -0,0 +1,47 @@
+
+import * as d from './components';
+
+export const DIRECTIVES = [
+  d.BqAccordion,
+  d.BqAccordionGroup,
+  d.BqAlert,
+  d.BqAvatar,
+  d.BqBadge,
+  d.BqBreadcrumb,
+  d.BqBreadcrumbItem,
+  d.BqButton,
+  d.BqCard,
+  d.BqCheckbox,
+  d.BqDatePicker,
+  d.BqDialog,
+  d.BqDivider,
+  d.BqDrawer,
+  d.BqDropdown,
+  d.BqEmptyState,
+  d.BqIcon,
+  d.BqInput,
+  d.BqNotification,
+  d.BqOption,
+  d.BqOptionGroup,
+  d.BqOptionList,
+  d.BqPageTitle,
+  d.BqPanel,
+  d.BqProgress,
+  d.BqRadio,
+  d.BqRadioGroup,
+  d.BqSelect,
+  d.BqSideMenu,
+  d.BqSideMenuItem,
+  d.BqSlider,
+  d.BqSpinner,
+  d.BqStatus,
+  d.BqStepItem,
+  d.BqSteps,
+  d.BqSwitch,
+  d.BqTab,
+  d.BqTabGroup,
+  d.BqTag,
+  d.BqTextarea,
+  d.BqToast,
+  d.BqTooltip
+];

package/src/directives/number-value-accessor.ts

@@ -0,0 +1,29 @@
+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: 'bq-input[type="number"], bq-slider:not[type="range"]',
+  host: {
+    '(bqChange)': 'handleChangeEvent($event.target.value)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NumericValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class NumericValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  override registerOnChange(fn: (_: number | null) => void) {
+    super.registerOnChange(value => {
+      fn(value === '' ? null : parseFloat(value));
+    });
+  }
+}

package/src/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: 'bq-radio-group',
+  host: {
+    '(bqChange)': 'handleChangeEvent($event.target.value)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

package/src/directives/select-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: 'bq-select',
+  host: {
+    '(bqChange)': 'handleChangeEvent($event.target.value)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class SelectValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

package/src/directives/text-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: 'bq-date-picker, bq-input:not[type="number"], bq-slider[type="range", bq-textarea',
+  host: {
+    '(bqChange)': 'handleChangeEvent($event.target.value)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class TextValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

package/src/directives/value-accessor.ts

@@ -0,0 +1,39 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+@Directive({})
+export class ValueAccessor implements ControlValueAccessor {
+
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+  protected lastValue: any;
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+/* -------------------------------------------------------------------------- */
+/*                                 DIRECTIVES                                 */
+/* -------------------------------------------------------------------------- */
+export { BooleanValueAccessor } from './directives/boolean-value-accessor';
+export { NumericValueAccessor } from './directives/number-value-accessor';
+export { RadioValueAccessor } from './directives/radio-value-accessor';
+export { SelectValueAccessor } from './directives/select-value-accessor';
+export { TextValueAccessor } from './directives/text-value-accessor';
+
+export * from './directives/components';
+
+/* -------------------------------------------------------------------------- */
+/*                               PACKAGE MODULE                               */
+/* -------------------------------------------------------------------------- */
+export { BeeQModule } from './beeq.module';

package/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/standalone/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/standalone/src/directives/angular-component-lib/utils.ts

@@ -0,0 +1,65 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
+  const Prototype = Cmp.prototype;
+  inputs.forEach((item) => {
+    Object.defineProperty(Prototype, item, {
+      get() {
+        return this.el[item];
+      },
+      set(val: any) {
+        this.z.runOutsideAngular(() => (this.el[item] = val));
+      },
+      /**
+       * In the event that proxyInputs is called
+       * multiple times re-defining these inputs
+       * will cause an error to be thrown. As a result
+       * we set configurable: true to indicate these
+       * properties can be changed.
+       */
+      configurable: true,
+    });
+  });
+};
+
+export const proxyMethods = (Cmp: any, methods: string[]) => {
+  const Prototype = Cmp.prototype;
+  methods.forEach((methodName) => {
+    Prototype[methodName] = function () {
+      const args = arguments;
+      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+    };
+  });
+};
+
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
+  events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+};
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
+    }
+    if (methods) {
+      proxyMethods(cls, methods);
+    }
+    return cls;
+  };
+  return decorator;
+}

package/standalone/src/directives/boolean-value-accessor.ts

@@ -0,0 +1,27 @@
+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: 'bq-checkbox, bq-switch',
+  host: {
+    '(bqChange)': 'handleChangeEvent($event.target.checked)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessor,
+      multi: true
+    }
+  ],standalone: true
+})
+export class BooleanValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  override writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}