@acorex/components 5.8.0 → 6.0.1

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/README.md

@@ -1,24 +1,24 @@
-# Components
-
-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 components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project components`.
-> Note: Don't forget to add `--project components` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build components` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build components`, go to the dist folder `cd dist/components` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test components` 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.
+# Components
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project components`.
+> Note: Don't forget to add `--project components` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build components` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build components`, go to the dist folder `cd dist/components` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test components` 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/action-sheet/index.ts

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

package/action-sheet/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/action-sheet/public-api.ts

@@ -0,0 +1,3 @@
+export * from './src/action-sheet.component';
+export * from './src/action-sheet-item.component';
+export * from './src/action-sheet.module';

package/action-sheet/src/action-sheet-item.component.ts

@@ -0,0 +1,46 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import {
+  AXButtonClickEvent,
+  AXStyleColorType,
+} from '@acorex/components/common';
+import { AXBaseComponent } from '@acorex/components/mixin';
+
+@Component({
+  selector: 'ax-action-sheet-item',
+  template: `
+    <ax-button
+      [color]="color"
+      look="blank"
+      [text]="text"
+      (onClick)="_handleOnClick($event)"
+    ></ax-button>
+  `,
+})
+export class AXActionSheetItemComponent extends AXBaseComponent {
+  @Input()
+  text: string;
+
+  @Input()
+  color: AXStyleColorType = 'light';
+
+  @Output()
+  onClick: EventEmitter<AXButtonClickEvent> = new EventEmitter<AXButtonClickEvent>();
+
+  /**
+   *  @ignore
+   */
+  constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef) {
+    super(_elementRef, _cdr);
+  }
+
+  _handleOnClick(e: any) {
+    this.onClick.emit(e);
+  }
+}

package/action-sheet/src/action-sheet.component.html

@@ -0,0 +1,12 @@
+<div class="ax-action-sheet-backdrop" [@backdrop]="isOpen ? 'show' : 'hide'" (click)="_handleBackdropClick()"></div>
+<div class="ax-action-sheet-container" [@openClose]="isOpen ? 'open' : 'closed'">
+    <div class="ax-bg-white ax-h-full dark:ax-bg-dark-700">
+        <div class="ax-action-sheet-caption" *ngIf="caption">
+            {{caption}}
+        </div>
+        <ng-content select="ax-content"></ng-content>
+        <div class="ax-action-sheet-items">
+            <ng-content select="ax-action-sheet-item"></ng-content>
+        </div>
+    </div>
+</div>

package/action-sheet/src/action-sheet.component.ts

@@ -0,0 +1,82 @@
+import { AXBaseComponent } from '@acorex/components/mixin';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+} from '@angular/animations';
+import { ChangeDetectorRef, Component, ElementRef, Input } from '@angular/core';
+
+@Component({
+  selector: 'ax-action-sheet',
+  templateUrl: './action-sheet.component.html',
+  animations: [
+    trigger('backdrop', [
+      state(
+        'show',
+        style({
+          opacity: 1,
+          visibility: 'visible',
+        })
+      ),
+      state(
+        'hide',
+        style({
+          visibility: 'hidden',
+          opacity: 0,
+        })
+      ),
+      transition('show <=> hide', [animate('0.2s')]),
+    ]),
+
+    trigger('openClose', [
+      state(
+        'open',
+        style({
+          bottom: '0',
+          opacity: 1,
+        })
+      ),
+      state(
+        'closed',
+        style({
+          bottom: '-100%',
+          opacity: 0.5,
+        })
+      ),
+      transition('open <=> closed', [animate('0.2s')]),
+    ]),
+  ],
+  host: { class: 'ax-action-sheet' },
+})
+export class AXActionSheetComponent extends AXBaseComponent {
+  @Input() caption = '';
+  @Input() closeOnBackdrop = true;
+  isOpen = false;
+
+  _backdrop: HTMLElement;
+  /**
+   *  @ignore
+   */
+  constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef) {
+    super(_elementRef, _cdr);
+  }
+
+  _handleBackdropClick() {
+    if (!this.closeOnBackdrop) return;
+    this.close();
+  }
+
+  open() {
+    this.isOpen = true;
+  }
+
+  close() {
+    this.isOpen = false;
+  }
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+}

package/action-sheet/src/action-sheet.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXActionSheetComponent } from './action-sheet.component';
+import { AXActionSheetItemComponent } from './action-sheet-item.component';
+
+@NgModule({
+  declarations: [AXActionSheetComponent, AXActionSheetItemComponent],
+  imports: [CommonModule, AXButtonModule],
+  exports: [AXActionSheetComponent, AXActionSheetItemComponent],
+  providers: [],
+})
+export class AXActionSheetModule {}

package/alert/index.ts

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

package/alert/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/alert/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/alert.component';
+export * from './src/alert.module';

package/alert/src/alert.component.html

@@ -0,0 +1,21 @@
+<ng-content select="ax-header">
+</ng-content>
+<div class="ax-alert-body">
+    <div class="ax-flex ax-items-center ax-justify-between">
+        <div class="ax-flex">
+            <ng-content select="ax-icon">
+            </ng-content>
+            <div class="ax-flex ax-flex-col ax-justify-center">
+                <ng-content select="ax-content">
+                </ng-content>
+                <ng-content select="ax-footer">
+                </ng-content>
+            </div>
+        </div>
+        <ng-content select="ax-suffix">
+        </ng-content>
+    </div>
+</div>
+
+<div class="ax-alert-progress" [style.animation-duration.ms]="timeOut" *ngIf="timeOut">
+</div>

package/alert/src/alert.component.ts

@@ -0,0 +1,179 @@
+import { AXButtonComponent } from '@acorex/components/button';
+import { AXDecoratorIconComponent } from '@acorex/components/decorators';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+  HostBinding,
+  ContentChild,
+  EventEmitter,
+  Output,
+  QueryList,
+  ContentChildren,
+} from '@angular/core';
+import { startWith } from 'rxjs/operators';
+import { AXEvent } from '@acorex/components/common';
+import {
+  AXBaseComponent,
+  AXComponentOptionChanged,
+  _ColorLookComponentMixin,
+} from '@acorex/components/mixin';
+
+export const AXBaseAlertMixin = _ColorLookComponentMixin(AXBaseComponent);
+
+/**
+ * Regular description
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-alert',
+  templateUrl: './alert.component.html',
+  inputs: ['color', 'look'],
+  host: { class: 'ax-alert' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXAlertComponent extends AXBaseAlertMixin {
+  @ContentChild(AXDecoratorIconComponent, { static: true })
+  private _icon!: AXDecoratorIconComponent;
+
+  @ContentChildren(AXButtonComponent, { descendants: true })
+  private _buttons!: QueryList<AXButtonComponent>;
+
+  @Output()
+  onDismissed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
+
+  override _onOptionChanged(option: AXComponentOptionChanged) {
+    if (option.name == 'color') {
+      this._setIcon();
+    }
+  }
+
+  ngDoCheck() {
+    this._setIcon();
+  }
+
+  private _setIcon() {
+    if (!this._icon || this._icon.icon) return;
+    switch (this.color) {
+      case 'success':
+        this._icon.icon = 'ax-ic ax-ic-check-filled';
+        break;
+      case 'warning':
+        this._icon.icon = 'ax-ic-warning-filled';
+        break;
+      case 'danger':
+        this._icon.icon = 'ax-ic-error-filled';
+        break;
+      default:
+        this._icon.icon = 'ax-ic ax-ic-info-filled';
+        break;
+    }
+  }
+
+  /**
+   *  @ignore
+   */
+  @HostBinding('class')
+  get __hostClass(): string {
+    const _class = this.look
+      ? `ax-${this.color}-${this.look}`
+      : `ax-${this.color}-default`;
+    return `ax-alert ax-none ${_class}`;
+  }
+
+  @Input()
+  timeOut!: number;
+
+  #visible: boolean;
+
+  /**
+   *  set the visibility of the Alert
+   */
+  @Input()
+  public get visible(): boolean {
+    return this.#visible;
+  }
+  public set visible(v: boolean) {
+    if (this.#visible != v) {
+      this.#visible = v;
+      const host = this._getHostElement();
+      if (v) {
+        host.classList.remove('ax-state-hidden');
+        host.classList.add('ax-state-visible');
+      } else {
+        host.classList.add('ax-state-hidden');
+        host.classList.toggle('ax-state-visible');
+      }
+    }
+  }
+
+  /**
+   *  @ignore
+   */
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  onInit() {
+    if (this.timeOut) {
+      setTimeout(() => {
+        this.dismiss();
+      }, this.timeOut);
+    }
+  }
+
+  onViewInit() {
+    if (this.visible == undefined) {
+      this.visible = true;
+    }
+  }
+
+  ngAfterContentInit() {
+    this._buttons.changes
+      .pipe(startWith(0))
+      .subscribe((change) => this._applyButtonStyle());
+    this._applyButtonStyle();
+  }
+
+  private _applyButtonStyle() {
+    this._buttons?.forEach((c: any) => {
+      c.color = this.color;
+      c.look = this.look === 'outline' ? 'blank' : this.look;
+    });
+  }
+
+  /**
+   *  Remove the alert from the container
+   */
+  dismiss(): void {
+    const host = this._getHostElement();
+    this.visible = false;
+    const func = () => {
+      host.parentElement?.removeChild(host);
+      this.onDismissed.emit({
+        component: this,
+      });
+      host.removeEventListener('transitionend', func);
+    };
+    host.addEventListener('transitionend', func);
+  }
+
+  /**
+   *  Hide the alert
+   */
+  hide(): void {
+    this.visible = false;
+  }
+
+  /**
+   *  Show the alert
+   */
+  show() {
+    this.visible = true;
+  }
+}

package/alert/src/alert.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXAlertComponent } from './alert.component';
+
+const COMPONENT = [AXAlertComponent];
+const MODULES = [CommonModule, AXDecoratorModule];
+
+@NgModule({
+  declarations: [...COMPONENT],
+  imports: [...MODULES],
+  exports: [...COMPONENT],
+  providers: [],
+})
+export class AXAlertModule {}

package/avatar/index.ts

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

package/avatar/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/avatar/public-api.ts

@@ -0,0 +1,3 @@
+export * from "./src/avatar-group.component";
+export * from "./src/avatar.component";
+export * from "./src/avatar.module";

package/avatar/src/avatar-group.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ax-avatar-group',
+  template: `<ng-content select="ax-avatar"></ng-content>`,
+  host: { class: 'ax-avatar-group' },
+})
+export class AXAvatarGroup implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/avatar/src/avatar.component.html

@@ -0,0 +1,30 @@
+<div class="ax-avatar-container" [ngSwitch]="type">
+    <ng-content select="ax-badge"></ng-content>
+    <div class="ax-text-avatar {{class}}" *ngSwitchCase="'text'">
+        {{text}}
+    </div>
+    <div class="ax-icon-avatar {{class}}" *ngSwitchCase="'icon'">
+        <ng-content select="ax-icon"></ng-content>
+    </div>
+    <div class="ax-image-avatar {{class}}" *ngSwitchCase="'image'">
+        <ng-content select="img"></ng-content>
+    </div>
+    <div class="ax-default-avatar {{class}}" *ngSwitchCase="'default'">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+            <g style="isolation:isolate">
+                <g id="Layer_2" data-name="Layer 2">
+                    <g id="Layer_1-2" data-name="Layer 1">
+                        <rect width="512" height="512" />
+                        <path
+                            d="M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94"
+                            style="fill:#fff;opacity:0.7" />
+                        <path
+                            d="M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z"
+                            style="opacity:0.05" />
+                        <circle cx="257.71" cy="255.94" r="99.24" style="fill:#fff" />
+                    </g>
+                </g>
+            </g>
+        </svg>
+    </div>
+</div>

package/avatar/src/avatar.component.ts

@@ -0,0 +1,41 @@
+import { COLOR_LOOK_INPUTS, AXAvatarMixin } from '@acorex/components/mixin';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Input, HostBinding } from '@angular/core';
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+    selector: 'ax-avatar',
+    templateUrl: './avatar.component.html',
+    inputs: ['color', 'look',],
+    host: { class: 'ax-avatar' },
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXAvatarComponent extends AXAvatarMixin {
+
+    @Input() text = '';
+    @Input() icon = '';
+    @Input() src = '';
+
+    @Input() class = '';
+
+    @Input() type : "default" | 'text' | 'icon' | 'image' = 'default';
+    /**
+    *  @ignore
+    */
+    constructor(
+        elementRef: ElementRef,
+        cdr: ChangeDetectorRef
+    ) {
+        super(elementRef, cdr);
+    }
+
+    @HostBinding('class')
+    get __hostClass(): string {
+        return `ax-${this.color}-default`;
+    }
+
+}

package/avatar/src/avatar.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXAvatarComponent } from './avatar.component';
+import { AXAvatarGroup } from './avatar-group.component';
+
+const COMPONENT = [AXAvatarComponent, AXAvatarGroup];
+const MODULES = [CommonModule];
+
+@NgModule({
+  declarations: [...COMPONENT],
+  imports: [...MODULES],
+  exports: [...COMPONENT],
+  providers: [],
+})
+export class AXAvatarModule {}

package/badge/index.ts

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

package/badge/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/badge/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/badge.component';
+export * from './src/badge.module';

package/badge/src/badge.component.html

@@ -0,0 +1,3 @@
+<ng-content select="ax-prefix"></ng-content>
+<span class="ax-font-medium ax-truncate">{{text}}</span>
+<ng-content select="ax-suffix"></ng-content>

package/badge/src/badge.component.ts

@@ -0,0 +1,37 @@
+import { _ColorLookComponentMixin, AXBaseComponent, COLOR_LOOK_INPUTS } from '@acorex/components/mixin';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+  HostBinding,
+} from '@angular/core';
+
+
+export const AXBaseBadgeMixin = _ColorLookComponentMixin(AXBaseComponent);
+@Component({
+  selector: 'ax-badge',
+  templateUrl: './badge.component.html',
+  inputs: ['color', 'look',],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AXBadgeComponent extends AXBaseBadgeMixin {
+  @Input() text: string = '';
+
+  constructor(private elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+    //TODO: ax-badge
+  }
+
+  @HostBinding('class')
+  private get __hostClass(): string {
+    const _class = this.look
+      ? `ax-${this.color}-${this.look}`
+      : `ax-${this.color}-default`;
+
+    return ['ax-badge', _class, !this.text ? 'ax-badge-icon' : ''].join(' ');
+  }
+}

package/badge/src/badge.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXBadgeComponent } from './badge.component';
+
+const COMPONENT = [AXBadgeComponent];
+const MODULES = [CommonModule];
+
+@NgModule({
+  declarations: [...COMPONENT],
+  imports: [...MODULES],
+  exports: [...COMPONENT],
+  providers: [],
+})
+export class AXBadgeModule {}

package/breadcrumbs/index.ts

@@ -0,0 +1,4 @@
+export * from './src/breadcrumbs-item.class';
+export * from './src/breadcrumbs.component';
+export * from './src/breadcrumbs-item.component';
+export * from './src/breadcrumbs.module';