@haiilo/catalyst-angular 0.0.7

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.7 (2022-04-22)
+
+
+### Bug Fixes
+
+* lerna integration ([ebab9a3](https://github.com/haiilo/catalyst/commit/ebab9a37748e11a33fd552502ed95bfec949c409))
+* umd warning ([e678c5f](https://github.com/haiilo/catalyst/commit/e678c5fa6e8d89105323de0fcb90b9cfdba6222c))
+
+
+### Features
+
+* **core:** add alert ([8cad923](https://github.com/haiilo/catalyst/commit/8cad92339ac74b142ca6a4a0ec143982c659b970))
+* **core:** add badge ([d250eb8](https://github.com/haiilo/catalyst/commit/d250eb808f77c34a430b5406edba7c11e12cf4bd))
+* **core:** add skeleton component ([561f7a6](https://github.com/haiilo/catalyst/commit/561f7a627770aaef6daadca0acc5c0c858261320))
+* **core:** added scrollable component ([347886b](https://github.com/haiilo/catalyst/commit/347886b2782801e445da7afc2f768aa531862084))
+* **core:** changes for coyo app integration ([7304886](https://github.com/haiilo/catalyst/commit/7304886e5a2a781adcb0db2b1a63ddc58eaa6ef8))
+* **core:** changes for coyo app integration ([2b6cc05](https://github.com/haiilo/catalyst/commit/2b6cc057bbd813f328ff36374a514bc56d6a15bd))
+* **core:** changes for coyo app integration ([101297d](https://github.com/haiilo/catalyst/commit/101297dde26a5e8ecd007cd535667d2d3e71441a))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# Catalyst
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project catalyst` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project catalyst`.
+> Note: Don't forget to add `--project catalyst` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build catalyst` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build catalyst`, go to the dist folder `cd dist/catalyst` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test catalyst` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/catalyst'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/catalyst",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@haiilo/catalyst"
+  ]
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@haiilo/catalyst-angular",
+  "version": "0.0.7",
+  "description": "Angular wrapper for Catalyst Design System",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@haiilo/catalyst": "^0.2.3",
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=12.0.0",
+    "rxjs": ">=6.6.0"
+  },
+  "gitHead": "3bd083786a1df0a2de5b5d4a5eb557b44fb97800"
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/catalyst.module.ts

@@ -0,0 +1,29 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { defineCustomElements } from '@haiilo/catalyst/loader';
+import * as Components from './directives/proxies';
+
+const CatComponents = [
+  Components.CatButton,
+  Components.CatIcon,
+  Components.CatSpinner,
+  Components.CatScrollable,
+  Components.CatAlert,
+  Components.CatBadge,
+  Components.CatSkeleton
+];
+
+@NgModule({
+  imports: [],
+  declarations: [...CatComponents],
+  exports: [...CatComponents],
+  providers: []
+})
+export class CatalystModule {
+
+  static forRoot(): ModuleWithProviders<CatalystModule> {
+    defineCustomElements();
+    return {
+      ngModule: CatalystModule
+    };
+  }
+}

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

@@ -0,0 +1,63 @@
+/* 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));
+      }
+    });
+  });
+};
+
+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/src/lib/directives/proxies.ts

@@ -0,0 +1,222 @@
+/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
+
+import { Components } from '@haiilo/catalyst';
+
+
+
+
+export declare interface CatAlert extends Components.CatAlert {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['color']
+})
+@Component({
+  selector: 'cat-alert',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['color']
+})
+export class CatAlert {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface CatBadge extends Components.CatBadge {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['color', 'pulse', 'round', 'size', 'variant']
+})
+@Component({
+  selector: 'cat-badge',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['color', 'pulse', 'round', 'size', 'variant']
+})
+export class CatBadge {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface CatButton extends Components.CatButton {
+  /**
+   * Emitted when the button is clicked. 
+   */
+  catClick: EventEmitter<CustomEvent<MouseEvent>>;
+  /**
+   * Emitted when the button received focus. 
+   */
+  catFocus: EventEmitter<CustomEvent<FocusEvent>>;
+  /**
+   * Emitted when the button loses focus. 
+   */
+  catBlur: EventEmitter<CustomEvent<FocusEvent>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['a11yLabel', 'buttonId', 'color', 'disabled', 'ellipsed', 'icon', 'iconOnly', 'iconSuffix', 'loading', 'name', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant'],
+  methods: ['setFocus']
+})
+@Component({
+  selector: 'cat-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['a11yLabel', 'buttonId', 'color', 'disabled', 'ellipsed', 'icon', 'iconOnly', 'iconSuffix', 'loading', 'name', 'round', 'size', 'submit', 'url', 'urlTarget', 'value', 'variant']
+})
+export class CatButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['catClick', 'catFocus', 'catBlur']);
+  }
+}
+
+
+export declare interface CatIcon extends Components.CatIcon {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['a11yLabel', 'icon', 'size']
+})
+@Component({
+  selector: 'cat-icon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['a11yLabel', 'icon', 'size']
+})
+export class CatIcon {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface CatMenu extends Components.CatMenu {
+  /**
+   * Emitted when the menu is opened. 
+   */
+  catOpen: EventEmitter<CustomEvent<FocusEvent>>;
+  /**
+   * Emitted when the menu is closed. 
+   */
+  catClose: EventEmitter<CustomEvent<FocusEvent>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['placement']
+})
+@Component({
+  selector: 'cat-menu',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['placement']
+})
+export class CatMenu {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['catOpen', 'catClose']);
+  }
+}
+
+
+export declare interface CatScrollable extends Components.CatScrollable {
+  /**
+   * Emitted when the content is fully scrolled to the top. 
+   */
+  scrolledTop: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the content is fully scrolled to the left. 
+   */
+  scrolledLeft: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the content is fully scrolled to the right. 
+   */
+  scrolledRight: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the content is fully scrolled to the bottom. 
+   */
+  scrolledBottom: EventEmitter<CustomEvent<void>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['overflowX', 'overflowY', 'overscroll', 'scrolledBuffer', 'scrolledInit', 'shadowX', 'shadowY']
+})
+@Component({
+  selector: 'cat-scrollable',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['overflowX', 'overflowY', 'overscroll', 'scrolledBuffer', 'scrolledInit', 'shadowX', 'shadowY']
+})
+export class CatScrollable {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['scrolledTop', 'scrolledLeft', 'scrolledRight', 'scrolledBottom']);
+  }
+}
+
+
+export declare interface CatSkeleton extends Components.CatSkeleton {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['effect', 'lines', 'size', 'variant']
+})
+@Component({
+  selector: 'cat-skeleton',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['effect', 'lines', 'size', 'variant']
+})
+export class CatSkeleton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface CatSpinner extends Components.CatSpinner {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['a11yLabel', 'size']
+})
+@Component({
+  selector: 'cat-spinner',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['a11yLabel', 'size']
+})
+export class CatSpinner {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,2 @@
+export * from './lib/directives/proxies';
+export * from './lib/catalyst.module';

package/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+  { teardown: { destroyAfterEach: true }},
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/tsconfig.lib.json

@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}