## AngularAccelerator

A sap-commerce storefront using angular

This is a collection of core directives, filters and services

### How to

* Services:
  * **AuthGuard**: CanActivate if oauth status is authorized
  * **BrowserRef**: Window object wrapper with SSR functionality
  * **SiteGuard**: CanActivate if BaseSite is found and processed
  * **LocaleService**: Root service. Will handle all site and locales
  * **LocaleServiceInterceptor**: Will add lang and curr query params to api request. See below
  * **NavigatorService**: Router navigate wrapper. Will handle navigation respecting base site url
    patterns
  * **SmartEditService**: Applies smartedit feedback to render changes

* Directives:
  * **scrollTop** on click scroll to top
  * **srcLazy** will lazy load images/videos/iframes eg. `<img [srcLazy]="image.png">`
  * **ifTheme** similar to ngIf, will test for provided theme and render
    eg. `<div *ifTheme="'alpha'">Hello World</div>`
  * **ifSite** similar to ngIf, will test for provided site and render if true
    eg. `<div *ifSite="'electronics'">Hello World</div>`
  * **intoView**: will emit boolean event if element is into view. Uses IntersectionObserver

* Filters:
  * **site**, **theme** : will add current siteId / theme to the class name
    like `hompage | className`
    will result in `homepage site-electronics` if on electronics site
  * **fileSize** : friendly file size
  * **sanitizeHtml** , **sanitizeStyle** and **sanitizeUrl** utils
  * **stripHtml**, **stripTimeString**, **truncateNumber** and **truncateText** as text utils
  * **thumbnail**, **image**: get thumbnail / primary image from media object
  * **host** : append host config parameter if resource is on different domain
  * **routerPath**, **routerQuery** and **routerFragment**: utils in dealing with site routing. Use
    these instead of `[router]='/somewhere'`
  * **map**: Map pipe. eg. `[values]="sorts | map:'code'"`
  
* Validators:
  * **ccNumber, ccCSC, ccMonth, ccYear, phone, password**. Include `YValidators` to use them. `YValidators` extends `Validators`

* To use Animations, in your component add them like this:

```typescript
animations: [Animations.expand({value: 1})]
```

* Form elements:
  * **input-file** : file upload input
    ```angular2html
    <input-file class="row g-0" (filesChange)="saveFile($event)">
      <ng-template #label>
        <div class="btn btn-secondary choose-file-button">
          Select file
        </div>
      </ng-template>
      <ng-template #suffix>
        <span class="p-1">{{file?.name}}</span>
      </ng-template>
    </input-file>
    ```
  * **input-select** : select input
    ```angular2html
     <input-select formControlName="pageSize"
                   [placeholder]="pagination.pageSize"
                   [values]="pageSizes"
                   [optionNames]="pageSizes">
     </input-select>
    ```
  * **input-switch** : toogle switch checkbox input
    ```angular2html
    <input-switch [(ngModel)]="consent"></input-switch>
    ```

* LocaleService Interceptor needs to be installed in AppModule

```typescript
providers: [
  {
    provide: HTTP_INTERCEPTORS,
    multi: true,
    useClass: LocaleInterceptor
  }
]
```

* Use of SiteGuard

```typescript
const routes: Routes = [
  {
    path: '',
    canActivate: [SiteGuard],
    children: [
      {
        path: '',
        loadChildren: () => import('./modules/layout/layout.module').then(m => m.LayoutModule)
      },
      {
        path: '**',
        redirectTo: 'error'
      }
    ]
  }
];
```

## Installing

```
npm install @ngx-y/ycore
```

## Build

```
ng build ycore --prod
```

## App Requirements

* `@ngx-y/yapi` is required for api services support

#### Licensing

[GPLv2](LICENSE)

[© DialogData 2021](https://www.dialogdata.de/)