@getflip/swirl-components-angular 0.1.0

package/dist/component-library/lib/stencil-generated/index.d.ts

@@ -0,0 +1,2 @@
+import * as d from './components';
+export declare const DIRECTIVES: (typeof d.FlipActionList | typeof d.FlipActionListItem | typeof d.FlipActionListSection | typeof d.FlipAvatar | typeof d.FlipAvatarGroup | typeof d.FlipBadge | typeof d.FlipBanner | typeof d.FlipButton | typeof d.FlipButtonGroup | typeof d.FlipCheckbox | typeof d.FlipChip | typeof d.FlipDescriptionList | typeof d.FlipDescriptionListItem | typeof d.FlipDialog | typeof d.FlipIconAdd | typeof d.FlipIconAddPhoto | typeof d.FlipIconAdminPanelSettings | typeof d.FlipIconArrowBack | typeof d.FlipIconArrowForward | typeof d.FlipIconArrowRightSmall | typeof d.FlipIconAttachment | typeof d.FlipIconCancel | typeof d.FlipIconChatBubble | typeof d.FlipIconCheck | typeof d.FlipIconCheckCircle | typeof d.FlipIconCheckSmall | typeof d.FlipIconCheckStrong | typeof d.FlipIconChevronLeft | typeof d.FlipIconChevronRight | typeof d.FlipIconClose | typeof d.FlipIconCloseSmall | typeof d.FlipIconComment | typeof d.FlipIconCopy | typeof d.FlipIconDateRange | typeof d.FlipIconDelete | typeof d.FlipIconDescription | typeof d.FlipIconDownload | typeof d.FlipIconEdit | typeof d.FlipIconEmojiMood | typeof d.FlipIconEmojiSatisfied | typeof d.FlipIconError | typeof d.FlipIconExpandLess | typeof d.FlipIconExpandMore | typeof d.FlipIconFile | typeof d.FlipIconFolderShared | typeof d.FlipIconGroupAssign | typeof d.FlipIconGroups | typeof d.FlipIconGroupsCustom | typeof d.FlipIconImage | typeof d.FlipIconInfo | typeof d.FlipIconInventory | typeof d.FlipIconLike | typeof d.FlipIconLink | typeof d.FlipIconLock | typeof d.FlipIconLogout | typeof d.FlipIconMail | typeof d.FlipIconManageAccounts | typeof d.FlipIconMention | typeof d.FlipIconMessage | typeof d.FlipIconMoreHorizontal | typeof d.FlipIconMoreVertikal | typeof d.FlipIconNotifications | typeof d.FlipIconNotificationsActive | typeof d.FlipIconNotificationsOff | typeof d.FlipIconPeopleAlt | typeof d.FlipIconPerson | typeof d.FlipIconPersonOff | typeof d.FlipIconPhone | typeof d.FlipIconPoll | typeof d.FlipIconRecieved | typeof d.FlipIconSearch | typeof d.FlipIconSearchStrong | typeof d.FlipIconSend | typeof d.FlipIconSettings | typeof d.FlipIconTimeFilled | typeof d.FlipIconTimeOutlined | typeof d.FlipIconToday | typeof d.FlipIconUserAssign | typeof d.FlipIconVideoCamera | typeof d.FlipIconVisibility | typeof d.FlipIconVisibilityOff | typeof d.FlipIconWarning | typeof d.FlipInlineError | typeof d.FlipLink | typeof d.FlipPopover | typeof d.FlipRadio | typeof d.FlipRadioGroup | typeof d.FlipSearch | typeof d.FlipSpinner | typeof d.FlipStack | typeof d.FlipSwitch | typeof d.FlipTag | typeof d.FlipThemeProvider | typeof d.FlipThumbnail | typeof d.FlipToast | typeof d.FlipToastProvider | typeof d.FlipTooltip | typeof d.FlipVisuallyHidden)[];

package/dist/component-library/lib/stencil-generated/text-value-accessor.d.ts

@@ -0,0 +1,8 @@
+import { ElementRef } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+import * as i0 from "@angular/core";
+export declare class TextValueAccessor extends ValueAccessor {
+    constructor(el: ElementRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextValueAccessor, "flip-radio-group, flip-search", never, {}, {}, never, never, false>;
+}

package/dist/component-library/lib/stencil-generated/value-accessor.d.ts

@@ -0,0 +1,18 @@
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class ValueAccessor implements ControlValueAccessor {
+    protected el: ElementRef;
+    private onChange;
+    private onTouched;
+    protected lastValue: any;
+    constructor(el: ElementRef);
+    writeValue(value: any): void;
+    handleChangeEvent(value: any): void;
+    _handleBlurEvent(): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValueAccessor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ValueAccessor, never, never, {}, {}, never, never, false>;
+}

package/dist/component-library/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@getflip/swirl-components-angular",
+  "version": "0.0.0",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2015/getflip-swirl-components-angular.mjs",
+  "es2020": "fesm2020/getflip-swirl-components-angular.mjs",
+  "esm2020": "esm2020/getflip-swirl-components-angular.mjs",
+  "fesm2020": "fesm2020/getflip-swirl-components-angular.mjs",
+  "fesm2015": "fesm2015/getflip-swirl-components-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/getflip-swirl-components-angular.mjs",
+      "es2020": "./fesm2020/getflip-swirl-components-angular.mjs",
+      "es2015": "./fesm2015/getflip-swirl-components-angular.mjs",
+      "node": "./fesm2015/getflip-swirl-components-angular.mjs",
+      "default": "./fesm2020/getflip-swirl-components-angular.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/dist/component-library/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from "./lib/stencil-generated/components";
+export * from "./lib/stencil-generated/boolean-value-accessor";
+export * from "./lib/stencil-generated/text-value-accessor";
+export * from "./lib/component-library.module";

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@getflip/swirl-components-angular",
+  "version": "0.1.0",
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build"
+  },
+  "dependencies": {
+    "@angular/animations": "^14.1.0",
+    "@angular/common": "^14.1.0",
+    "@angular/compiler": "^14.1.0",
+    "@angular/core": "^14.1.0",
+    "@angular/forms": "^14.1.0",
+    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/router": "^14.1.0",
+    "@getflip/swirl-components": "^0.1.0",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.1.2",
+    "@angular/cli": "~14.1.2",
+    "@angular/compiler-cli": "^14.1.0",
+    "ng-packagr": "^14.1.0",
+    "typescript": "~4.7.2"
+  }
+}

package/projects/component-library/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/component-library",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/component-library/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@getflip/swirl-components-angular",
+  "version": "0.0.0",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/projects/component-library/src/lib/component-library.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { DIRECTIVES } from "./stencil-generated";
+import { BooleanValueAccessor } from "./stencil-generated/boolean-value-accessor";
+import { TextValueAccessor } from "./stencil-generated/text-value-accessor";
+
+@NgModule({
+  declarations: [...DIRECTIVES, BooleanValueAccessor, TextValueAccessor],
+  imports: [],
+  exports: [...DIRECTIVES, BooleanValueAccessor, TextValueAccessor],
+})
+export class SwirlComponentsModule {}

package/projects/component-library/src/lib/stencil-generated/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/projects/component-library/src/lib/stencil-generated/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: 'flip-checkbox, flip-switch',
+  host: {
+    '(valueChange)': 'handleChangeEvent($event.target.checked)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}