@ngx-y/ycore NPM

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:

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

Form elements:

input-file : file upload input

<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

 <input-select formControlName="pageSize"
               [placeholder]="pagination.pageSize"
               [values]="pageSizes"
               [optionNames]="pageSizes">
 </input-select>

input-switch : toogle switch checkbox input

<input-switch [(ngModel)]="consent"></input-switch>

LocaleService Interceptor needs to be installed in AppModule

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

Use of SiteGuard

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