create-sitecore-jss 22.2.0-canary.81 → 22.2.0-canary.83

package/dist/templates/angular-xmcloud/server.exports.ts

@@ -1,24 +0,0 @@
-import clientFactory from './src/app/lib/graphql-client-factory';
-import { getGraphQLClientFactoryConfig } from './src/app/lib/graphql-client-factory/config';
-import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
-import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
-import { environment } from './src/environments/environment';
-import { components } from './src/app/components/app-components.module';
-import metadata from './src/environments/metadata.json';
-
-/**
- * Define the required configuration values to be exported from the server.bundle.ts.
- */
-
-const defaultLanguage = environment.defaultLanguage;
-const getClientFactoryConfig = getGraphQLClientFactoryConfig;
-
-export {
-  clientFactory,
-  getClientFactoryConfig,
-  dictionaryServiceFactory,
-  layoutServiceFactory,
-  defaultLanguage,
-  components,
-  metadata,
-};

package/dist/templates/angular-xmcloud/src/app/components/app-components.shared.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule } from '@angular/router';
-import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
-import { NavigationItemComponent } from './navigation/navigation-item.component';
-
-/*
-  This module is imported by the generated app-components.module.ts.
-  You can use this module to provide shared Angular components that are not
-  JSS components, etc to the generated module.
-
-  Don't want code generation? See ./.gitignore for instructions to turn it off.
-*/
-@NgModule({
-  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
-  exports: [CommonModule, TranslateModule, RouterModule, FormsModule, NavigationItemComponent],
-  declarations: [NavigationItemComponent],
-})
-export class AppComponentsSharedModule {}

package/dist/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html

@@ -1,5 +0,0 @@
-<div *ngFor="let ph of enabledPlaceholders" [ngClass]="getColumnClass(+ph - 1)">
-  <div class="row">
-    <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
-  </div>
-</div>

package/dist/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts

@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { SxaComponent } from '../sxa.component';
-
-@Component({
-  selector: 'app-column-splitter',
-  templateUrl: './column-splitter.component.html',
-  host: {
-    'class': 'row component column-splitter',
-    '[class]': 'columnSplitterStyles',
-    '[id]' : 'id'
-  }
-})
-export class ColumnSplitterComponent extends SxaComponent {
-  get columnSplitterStyles(): string {
-    return `${this.rendering.params.GridParameters ?? ''} ${this.rendering.params.Styles ??
-      ''}`.trimEnd();
-  }
-
-  get columnWidths(): string[] {
-    return Array.from({ length: 8 }, (_, i) => this.rendering.params[`ColumnWidth${i + 1}`]);
-  }
-
-  get columnStyles(): string[] {
-    return Array.from({ length: 8 }, (_, i) => this.rendering.params[`Styles${i + 1}`]);
-  }
-
-  get enabledPlaceholders(): string[] {
-    return this.rendering.params.EnabledPlaceholders.split(',');
-  }
-
-  getColumnClass(index: number): string {
-    const widthClass = this.columnWidths[index] || '';
-    const styleClass = this.columnStyles[index] || '';
-    return `${widthClass} ${styleClass}`.trim();
-  }
-
-  getPlaceholderName(ph: string): string {
-    return `column-${ph}-{*}`;
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/container/container.component.html

@@ -1,14 +0,0 @@
-<div class="container-wrapper" *ngIf="wrapped; else default">
-  <ng-container *ngTemplateOutlet="default"></ng-container>
-</div>
-<ng-template #default>
-  <div class="component container-default {{ styles }}" [attr.id]="id">
-    <div class="component-content" [ngStyle]="backgroundStyle">
-        <sc-placeholder
-          [name]="placeholderName"
-          [rendering]="rendering"
-          class="row">
-        </sc-placeholder>
-    </div>
-  </div>
-</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/container/container.component.ts

@@ -1,30 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { SxaComponent } from '../sxa.component';
-
-@Component({
-  selector: 'app-container',
-  templateUrl: './container.component.html',
-})
-export class ContainerComponent extends SxaComponent implements OnInit {
-  placeholderName: string;
-  wrapped: boolean;
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    this.placeholderName = `container-${this.rendering.params?.DynamicPlaceholderId}`;
-    this.wrapped = this.rendering.params?.Styles?.split(' ').includes('container');
-  }
-
-  get backgroundStyle() {
-    const backgroundImage = this.rendering.params?.BackgroundImage;
-    const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
-    if (!backgroundImage || !backgroundImage.match(mediaUrlPattern)) {
-      return {};
-    }
-    const mediaUrl = backgroundImage.match(mediaUrlPattern)[1];
-    return {
-      backgroundImage: `url('${mediaUrl}')`,
-    };
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/image/image.component.html

@@ -1,36 +0,0 @@
-<ng-container [ngTemplateOutlet]="variant"></ng-container>
-
-<ng-template #default>
-  <div class="component image {{ styles }}" [attr.id]="id" *ngIf="rendering.fields; else empty">
-    <div class="component-content">
-      <ng-container *ngIf="isEditing || !rendering.fields.TargetUrl?.value?.href; else withLink">
-        <img *scImage="rendering.fields.Image" />
-      </ng-container>
-      <span class="image-caption field-imagecaption" *scText="rendering.fields.ImageCaption"></span>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #banner>
-  <div class="component hero-banner {{ styles }} {{ classHeroBannerEmpty }}" [attr.id]="id">
-    <div class="component-content sc-sxa-image-hero-banner" [ngStyle]="backgroundStyle">
-      <ng-container *ngIf="isEditing">
-        <img *scImage="modifyImageProps" />
-      </ng-container>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #withLink>
-  <a *scGenericLink="rendering.fields.TargetUrl">
-    <img *scImage="rendering.fields.Image" />
-  </a>
-</ng-template>
-
-<ng-template #empty>
-  <div class="component image {{ styles }}">
-    <div class="component-content">
-      <span class="is-empty-hint">Image</span>
-    </div>
-  </div>
-</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/image/image.component.ts

@@ -1,67 +0,0 @@
-import { Component, OnInit, OnDestroy, ViewChild, TemplateRef } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { EditMode, ImageField } from '@sitecore-jss/sitecore-jss-angular';
-import { SxaComponent } from '../sxa.component';
-import { JssContextService } from '../../jss-context.service';
-
-@Component({
-  selector: 'app-image',
-  templateUrl: './image.component.html',
-})
-export class ImageComponent extends SxaComponent implements OnInit, OnDestroy {
-  @ViewChild('default', { static: true }) defaultVariant: TemplateRef<any>;
-  @ViewChild('banner', { static: true }) bannerVariant: TemplateRef<any>;
-  classHeroBannerEmpty = '';
-  backgroundStyle = {};
-  modifyImageProps = {};
-  isEditing = false;
-  private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) {
-    super();
-  }
-
-  ngOnInit() {
-    super.ngOnInit();
-
-    const imageField = this.rendering.fields?.Image as ImageField;
-    this.backgroundStyle = imageField?.value?.src && {
-      'background-image': `url('${imageField.value.src}')`,
-    };
-
-    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
-      this.isEditing = newState.sitecore && newState.sitecore.context.pageEditing;
-
-      this.classHeroBannerEmpty =
-        this.isEditing && imageField?.value?.class === 'scEmptyImage' ? 'hero-banner-empty' : '';
-
-      const isMetadataMode = newState.sitecore?.context?.editMode === EditMode.Metadata;
-      this.modifyImageProps = !isMetadataMode
-        ? {
-            ...imageField,
-            editable: imageField?.editable
-              ?.replace(`width="${imageField?.value?.width}"`, 'width="100%"')
-              .replace(`height="${imageField?.value?.height}"`, 'height="100%"'),
-          }
-        : {
-            ...imageField,
-            value: {
-              ...imageField?.value,
-              style: { width: '100%', height: '100%' },
-            },
-          };
-    });
-  }
-
-  ngOnDestroy() {
-    if (this.contextSubscription) {
-      this.contextSubscription.unsubscribe();
-    }
-  }
-
-  public get variant(): TemplateRef<any> {
-    return this.rendering.params?.FieldNames === 'Banner'
-      ? this.bannerVariant
-      : this.defaultVariant;
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html

@@ -1,15 +0,0 @@
-<div class="component-content">
-  <ng-container *ngIf="title; else defaultTitle">
-    <h3 *scText="title"></h3>
-  </ng-container>
-  <ul>
-    <li *ngFor="let fieldLink of fieldLinks; index as i" [ngClass]="getFieldLinkClass(i)">
-      <div class="field-link">
-        <a *scGenericLink="fieldLink"></a>
-      </div>
-    </li>
-  </ul>
-</div>
-<ng-template #defaultTitle>
-  <span class="is-empty-hint">Link list</span>
-</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts

@@ -1,41 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { SxaComponent } from '../sxa.component';
-import { Field, LinkField, SxaLinkListFields } from '@sitecore-jss/sitecore-jss-angular';
-
-@Component({
-  selector: 'app-link-list',
-  templateUrl: './link-list.component.html',
-  host: {
-    'class': 'component link-list',
-    '[class]': 'styles',
-    '[attr.id]': 'id',
-  }
-})
-export class LinkListComponent extends SxaComponent<SxaLinkListFields> implements OnInit {
-  title?: Field<string>;
-  fieldLinks: LinkField[] = [];
-
-  getFieldLinkClass(index: number): string {
-    let className = `item${index}`;
-    className += (index + 1) % 2 == 0 ? ' even' : ' odd';
-    if (index === 0) {
-      className += ' first';
-    }
-    if (index + 1 === this.fieldLinks.length) {
-      className += ' last';
-    }
-    return className;
-  }
-
-  ngOnInit() {
-    super.ngOnInit();
-    const datasource = this.rendering.fields?.data?.datasource;
-    if (datasource) {
-      this.title = datasource.field?.title as Field<string>;
-      datasource.children.results.forEach(item => {
-        if (item.field?.link)
-          this.fieldLinks.push(item.field.link as LinkField);
-      });
-    }
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.html

@@ -1,23 +0,0 @@
-<li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
-  <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
-    <a *scRouterLink="linkField" (click)="onClick($event)">
-      <ng-container *ngIf="navItemFields.NavigationTitle"
-        ><span *scText="navItemFields.NavigationTitle"></span
-      ></ng-container>
-      <ng-container *ngIf="!navItemFields.NavigationTitle && navItemFields.Title">
-        <span *scText="navItemFields.Title"></span
-      ></ng-container>
-      <ng-container *ngIf="!navItemFields.NavigationTitle && !navItemFields.Title">{{
-        navItemFields.DisplayName
-      }}</ng-container>
-    </a>
-  </div>
-  <ul *ngIf="hasChildren" class="clearfix">
-    <app-navigation-item
-      *ngFor="let childNavItemFields of navItemFields.Children"
-      [navItemFields]="childNavItemFields"
-      [relativeLevel]="childrenRelativeLevel"
-      (childLinkClickEvent)="onClick($event)"
-    ></app-navigation-item>
-  </ul>
-</li>

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.ts

@@ -1,65 +0,0 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
-import { LinkField } from '@sitecore-jss/sitecore-jss-angular';
-import { Field } from '@sitecore-jss/sitecore-jss-angular';
-
-export interface NavItemFields {
-  Id: string;
-  DisplayName: string;
-  Title: Field<string>;
-  NavigationTitle: Field<string>;
-  Href: string;
-  Querystring: string;
-  Children: Array<NavItemFields>;
-  Styles: string[];
-}
-
-@Component({
-  selector: 'app-navigation-item',
-  templateUrl: './navigation-item.component.html',
-})
-export class NavigationItemComponent implements OnInit {
-  @Input() navItemFields: NavItemFields;
-  @Input() relativeLevel: number;
-  @Output() childLinkClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
-  cssClasses = '';
-  isActive = false;
-  linkField = {};
-  childrenRelativeLevel = 0;
-  hasChildren = false;
-
-  constructor() {}
-
-  ngOnInit() {
-    this.cssClasses = `${this.navItemFields.Styles.concat('rel-level' + this.relativeLevel).join(
-      ' '
-    )}`;
-    this.linkField = this.getLinkField(this.navItemFields);
-    this.hasChildren = this.navItemFields.Children && this.navItemFields.Children.length != 0;
-    this.childrenRelativeLevel = this.relativeLevel + 1;
-  }
-
-  onClick(event: Event) {
-    this.childLinkClickEvent.emit(event);
-  }
-
-  private getLinkField = (navItemFields: NavItemFields): LinkField => ({
-    value: {
-      href: navItemFields.Href,
-      title: this.getLinkTitle(navItemFields),
-      querystring: navItemFields.Querystring,
-    },
-  });
-
-  private getLinkTitle = (navItemFields: NavItemFields): string | undefined => {
-    let title;
-    if (navItemFields.NavigationTitle?.value) {
-      title = navItemFields.NavigationTitle.value.toString();
-    } else if (navItemFields.Title?.value) {
-      title = navItemFields.Title.value.toString();
-    } else {
-      title = navItemFields.DisplayName;
-    }
-
-    return title;
-  };
-}

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html

@@ -1,21 +0,0 @@
-<label class="menu-mobile-navigate-wrapper">
-  <input
-    type="checkbox"
-    class="menu-mobile-navigate"
-    [checked]="isOpenMenu"
-    (change)="toggleMenu($event)"
-  />
-  <div class="menu-humburger"></div>
-  <div class="component-content">
-    <nav>
-      <ul class="clearfix">
-        <app-navigation-item
-          *ngFor="let navItemFields of rendering.fields"
-          [navItemFields]="navItemFields"
-          [relativeLevel]="baseLevel"
-          (childLinkClickEvent)="toggleMenu($event, false)"
-        ></app-navigation-item>
-      </ul>
-    </nav>
-  </div>
-</label>

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts

@@ -1,49 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { SxaComponent } from '../sxa.component';
-import { JssContextService } from '../../jss-context.service';
-
-@Component({
-  selector: 'app-navigation',
-  templateUrl: './navigation.component.html',
-  host: {
-    'class': 'component navigation',
-    '[id]': 'id',
-    '[class]': 'styles + " " + rendering.params?.GridParameters',
-  },
-})
-export class NavigationComponent extends SxaComponent implements OnInit, OnDestroy {
-  isEditing = false;
-  private contextSubscription: Subscription;
-  isOpenMenu = false;
-  baseLevel = 1;
-
-  constructor(private jssContext: JssContextService) {
-    super();
-  }
-
-  ngOnInit() {
-    super.ngOnInit();
-    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
-      this.isEditing = newState.sitecore && newState.sitecore.context.pageEditing;
-    });
-  }
-
-  ngOnDestroy() {
-    if (this.contextSubscription) {
-      this.contextSubscription.unsubscribe();
-    }
-  }
-
-  toggleMenu(event: Event, flag?: boolean) {
-    if (event && this.isEditing) {
-      event.preventDefault();
-    }
-
-    if (flag !== undefined) {
-      this.isOpenMenu = flag;
-    }
-
-    this.isOpenMenu = !this.isOpenMenu;
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html

@@ -1,5 +0,0 @@
-<div class="component-content">
-  <div class="field-content">
-    <div *scRichText="content || contextContent"></div>
-  </div>
-</div>

package/dist/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts

@@ -1,39 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { RichTextField } from '@sitecore-jss/sitecore-jss-angular';
-import { JssContextService } from '../../jss-context.service';
-import { SxaComponent } from './../sxa.component';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'app-page-content',
-  templateUrl: './page-content.component.html',
-  host: {
-    'class': 'component content',
-    '[class]': 'styles',
-    '[id]': 'id',
-  }
-})
-export class PageContentComponent extends SxaComponent implements OnInit, OnDestroy {
-  content?: RichTextField;
-  contextContent?: RichTextField;
-  private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) {
-    super();
-  }
-  ngOnInit() {
-    super.ngOnInit();
-
-    this.content = this.rendering.fields?.Content as RichTextField;
-    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
-      this.contextContent =
-        newState.sitecore && (newState.sitecore.route.fields.Content as RichTextField);
-    });
-  }
-
-  ngOnDestroy() {
-    if (this.contextSubscription) {
-      this.contextSubscription.unsubscribe();
-    }
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.html

@@ -1 +0,0 @@
-<sc-placeholder [name]="sig" [rendering]="rendering">

package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { SxaComponent } from '../sxa.component';
-
-@Component({
-  selector: 'app-partial-design-dynamic-placeholder',
-  templateUrl: './partial-design-dynamic-placeholder.component.html',
-})
-export class PartialDesignDynamicPlaceholderComponent extends SxaComponent implements OnInit {
-  sig: string;
-  ngOnInit() {
-    super.ngOnInit();
-
-    this.sig = this.rendering.params?.sig || '';
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.html

@@ -1,21 +0,0 @@
-<div class="component-content">
-  <ng-container *ngIf="rendering.fields; else empty">
-    <div class="field-promoicon">
-      <img *scImage="rendering.fields.PromoIcon" />
-    </div>
-    <div class="promo-text">
-      <div>
-        <div class="field-promotext">
-          <div *scRichText="rendering.fields.PromoText"></div>
-        </div>
-      </div>
-      <div class="field-promolink">
-        <a *scGenericLink="rendering.fields.PromoLink"></a>
-      </div>
-    </div>
-  </ng-container>
-</div>
-
-<ng-template #empty>
-  <span className="is-empty-hint">Promo</span>
-</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { SxaComponent } from '../sxa.component';
-
-@Component({
-  selector: 'app-promo',
-  templateUrl: './promo.component.html',
-  host: {
-    'class': 'component promo',
-    '[class]': "styles",
-    '[id]': "id",
-  },
-})
-export class PromoComponent extends SxaComponent {}

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html

@@ -1,8 +0,0 @@
-<div class="component-content">
-  <ng-container *ngIf="text; else emptyHint">
-    <div *scRichText="text"></div>
-  </ng-container>
-  <ng-template #emptyHint>
-    <span class="is-empty-hint">Rich text</span>
-  </ng-template>
-</div>

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts

@@ -1,21 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Field } from '@sitecore-jss/sitecore-jss-angular';
-import { SxaComponent } from '../sxa.component';
-
-@Component({
-  selector: 'app-richtext',
-  templateUrl: './richtext.component.html',
-  host: {
-    'class': 'component rich-text',
-    '[class]': "styles",
-    "[attr.id]": "id"
-  },
-})
-export class RichTextComponent extends SxaComponent implements OnInit {
-  text?: Field<string>;
-
-  ngOnInit() {
-    super.ngOnInit();
-    this.text = this.rendering.fields?.Text as Field<string>;
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html

@@ -1,11 +0,0 @@
-<div
-  *ngFor="let ph of enabledPlaceholders"
-  class="container-fluid"
-  [ngClass]="getRowClass(+ph - 1)"
->
-  <div>
-    <div class="row">
-      <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
-    </div>
-  </div>
-</div>

package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts

@@ -1,35 +0,0 @@
-import { Component } from '@angular/core';
-import { SxaComponent } from '../sxa.component';
-
-@Component({
-  selector: 'app-row-splitter',
-  templateUrl: './row-splitter.component.html',
-  host: {
-    "class": "component row-splitter",
-    "[class]": "rowSplitterStyles",
-    "[id]": "id"
-  }
-})
-export class RowSplitterComponent extends SxaComponent {
-  get rowSplitterStyles(): string {
-    return `${this.rendering.params.GridParameters ?? ''} ${this.rendering.params.Styles ??
-      ''}`.trimEnd();
-  }
-
-  get rowStyles(): string[] {
-    return Array.from({ length: 8 }, (_, i) => this.rendering.params[`Styles${i + 1}`]);
-  }
-
-  get enabledPlaceholders(): string[] {
-    return this.rendering.params.EnabledPlaceholders.split(',');
-  }
-
-  getRowClass(index: number): string {
-    const styleClass = this.rowStyles[index] || '';
-    return `${styleClass}`.trim();
-  }
-
-  getPlaceholderName(ph: string): string {
-    return `row-${ph}-{*}`;
-  }
-}

package/dist/templates/angular-xmcloud/src/app/components/sxa.component.ts

@@ -1,15 +0,0 @@
-import { OnInit, Input, Directive } from '@angular/core';
-import { ComponentFields, ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
-
-@Directive()
-export abstract class SxaComponent<FieldType = ComponentFields> implements OnInit {
-  @Input() rendering: ComponentRendering<FieldType>;
-
-  id?: string;
-  styles?: string;
-
-  ngOnInit() {
-    this.id = this.rendering.params?.RenderingIdentifier;
-    this.styles = this.rendering.params?.styles;
-  }
-}