[MNT-21386] move settings to a separate project (#1676)

* move settings to a separate project

* rework theming

projects/aca-settings/README.md

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

projects/aca-settings/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/aca-settings'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/aca-settings/ng-package.json

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

projects/aca-settings/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@alfresco/aca-settings",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^10.0.14",
+    "@angular/core": "^10.0.14"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

projects/aca-settings/src/lib/settings.component.html

@@ -0,0 +1,90 @@
+<adf-toolbar class="app-menu" [style.background-color]="headerColor$ | async">
+  <adf-toolbar-title>
+    <a class="app-menu__title" title="{{ appName$ | async }}" [routerLink]="['/']">
+      <img [src]="logo" alt="{{ appName$ | async }}" />
+    </a>
+  </adf-toolbar-title>
+</adf-toolbar>
+
+<mat-accordion multi="true" displayMode="flat">
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>{{ 'APP.SETTINGS.REPOSITORY-SETTINGS' | translate }}</mat-panel-title>
+    </mat-expansion-panel-header>
+    <form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
+      <div>
+        <mat-form-field class="settings-input" appearance="outline">
+          <mat-label>ACS Repository URL</mat-label>
+          <input matInput formControlName="ecmHost" type="text" />
+          <mat-error *ngIf="form.get('ecmHost').hasError('pattern')">
+            {{ 'APP.SETTINGS.INVALID-VALUE-FORMAT' | translate }}
+          </mat-error>
+          <mat-error *ngIf="form.get('ecmHost').hasError('required')">
+            {{ 'APP.SETTINGS.REQUIRED-FIELD' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <div>
+        <mat-form-field class="settings-input" appearance="outline">
+          <mat-label>Authentication Type</mat-label>
+          <mat-select formControlName="authType">
+            <mat-option value="BASIC">Basic</mat-option>
+            <mat-option value="OAUTH">OAuth (Identity Service)</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <div>
+        <mat-form-field class="settings-input" appearance="outline">
+          <mat-label>Alfresco Identity Service URL</mat-label>
+          <input matInput formControlName="aisHost" type="text" />
+        </mat-form-field>
+      </div>
+
+      <div class="settings-buttons">
+        <button mat-button (click)="reset()">
+          {{ 'APP.SETTINGS.RESET' | translate }}
+        </button>
+        <button mat-button color="primary" type="submit" [disabled]="!form.valid">
+          {{ 'APP.SETTINGS.APPLY' | translate }}
+        </button>
+      </div>
+    </form>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel *ngFor="let group of settingGroups">
+    <mat-expansion-panel-header>
+      <mat-panel-title>{{ group.name | translate }}</mat-panel-title>
+    </mat-expansion-panel-header>
+
+    <div class="aca-settings-parameter-list">
+      <ng-container *ngFor="let param of group.parameters">
+        <ng-container [ngSwitch]="param.type">
+          <ng-container *ngSwitchCase="'boolean'">
+            <mat-checkbox [checked]="getBooleanParamValue(param)" (change)="setParamValue(param, $event.checked)">{{
+              param.name | translate
+            }}</mat-checkbox>
+          </ng-container>
+
+          <ng-container *ngSwitchCase="'string'">
+            <mat-form-field class="settings-input" appearance="outline">
+              <mat-label>{{ param.name | translate }}</mat-label>
+              <input
+                matInput
+                type="text"
+                [value]="getStringParamValue(param)"
+                (blur)="setParamValue(param, $event.target.value)"
+                (keyup.enter)="setParamValue(param, $event.target.value)"
+              />
+            </mat-form-field>
+          </ng-container>
+
+          <ng-container *ngSwitchDefault>
+            <span>Unknown parameter type: {{ param.name | translate }}</span>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+    </div>
+  </mat-expansion-panel>
+</mat-accordion>

projects/aca-settings/src/lib/settings.component.scss

@@ -0,0 +1,77 @@
+$app-menu-height: 64px;
+
+.aca-settings-parameter-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.aca-settings {
+  &-extensions-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .settings-input {
+    width: 50%;
+  }
+
+  .settings-buttons {
+    text-align: right;
+
+    .mat-button {
+      text-transform: uppercase;
+    }
+  }
+
+  .app-menu {
+    height: $app-menu-height;
+
+    &.adf-toolbar {
+      .mat-toolbar {
+        background-color: inherit;
+        font-family: inherit;
+        min-height: $app-menu-height;
+        height: $app-menu-height;
+
+        .mat-toolbar-layout {
+          height: $app-menu-height;
+
+          .mat-toolbar-row {
+            height: $app-menu-height;
+          }
+        }
+      }
+
+      .adf-toolbar-divider {
+        margin-left: 5px;
+        margin-right: 5px;
+
+        & > div {
+          background-color: var(--theme-card-background-color);
+        }
+      }
+
+      .adf-toolbar-title {
+        color: var(--theme-card-background-color);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .app-menu__title {
+      width: 100px;
+      height: 50px;
+      margin-left: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+
+      & > img {
+        width: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+}

projects/aca-settings/src/lib/settings.component.spec.ts

@@ -0,0 +1,136 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { SettingsComponent } from './settings.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule, setupTestBed, StorageService } from '@alfresco/adf-core';
+import { AcaSettingsModule } from './settings.module';
+import { By } from '@angular/platform-browser';
+import { AppExtensionService, SettingsParameterRef, LibTestingModule } from '@alfresco/aca-shared';
+
+describe('SettingsComponent', () => {
+  let fixture: ComponentFixture<SettingsComponent>;
+  let component: SettingsComponent;
+  let storage: StorageService;
+  let appExtensions: AppExtensionService;
+
+  let stringParam: SettingsParameterRef;
+  let boolParam: SettingsParameterRef;
+
+  setupTestBed({
+    imports: [CoreModule.forRoot(), AcaSettingsModule, LibTestingModule]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+
+    storage = TestBed.inject(StorageService);
+    appExtensions = TestBed.inject(AppExtensionService);
+
+    stringParam = {
+      key: 'key',
+      name: 'param1',
+      type: 'string',
+      value: 'paramValue'
+    };
+
+    boolParam = {
+      key: 'key',
+      name: 'param2',
+      type: 'boolean',
+      value: true
+    };
+  });
+
+  it('should retrieve string param value from storage', () => {
+    spyOn(storage, 'getItem').and.returnValue('storageValue');
+
+    const value = component.getStringParamValue(stringParam);
+    expect(value).toBe('storageValue');
+  });
+
+  it('should use param value as fallback when storage is empty', () => {
+    spyOn(storage, 'getItem').and.returnValue(null);
+
+    const value = component.getStringParamValue(stringParam);
+    expect(value).toBe('paramValue');
+  });
+
+  it('should save param value', () => {
+    spyOn(storage, 'setItem').and.stub();
+
+    component.setParamValue(stringParam, 'test');
+
+    expect(stringParam.value).toBe('test');
+    expect(storage.setItem).toHaveBeenCalledWith(stringParam.key, stringParam.value);
+  });
+
+  it('should save param value only if changed', () => {
+    spyOn(storage, 'setItem').and.stub();
+
+    component.setParamValue(stringParam, 'test');
+    component.setParamValue(stringParam, 'test');
+    component.setParamValue(stringParam, 'test');
+
+    expect(storage.setItem).toHaveBeenCalledTimes(1);
+  });
+
+  it('should retrieve boolean param value', () => {
+    const getItemSpy = spyOn(storage, 'getItem').and.returnValue('true');
+    expect(component.getBooleanParamValue(boolParam)).toBe(true);
+
+    getItemSpy.and.returnValue('false');
+    expect(component.getBooleanParamValue(boolParam)).toBe(false);
+  });
+
+  it('should fallback to boolean param value when storage is empty', () => {
+    spyOn(storage, 'getItem').and.returnValue(null);
+    expect(component.getBooleanParamValue(boolParam)).toBe(true);
+  });
+
+  it('should render categories as expansion panels', async () => {
+    spyOn(component, 'reset').and.stub();
+
+    appExtensions.settingGroups = [
+      {
+        id: 'group1',
+        name: 'Group 1',
+        parameters: []
+      },
+      {
+        id: 'group2',
+        name: 'Group 2',
+        parameters: []
+      }
+    ];
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
+    expect(panels.length).toBe(3);
+  });
+});

projects/aca-settings/src/lib/settings.component.ts

@@ -0,0 +1,136 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { AppConfigService, StorageService, OauthConfigModel } from '@alfresco/adf-core';
+import { Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { AppStore, getHeaderColor, getAppName, getUserProfile, SetSettingsParameterAction } from '@alfresco/aca-shared/store';
+import { ProfileState } from '@alfresco/adf-extensions';
+import { AppExtensionService, SettingsGroupRef, SettingsParameterRef } from '@alfresco/aca-shared';
+
+interface RepositoryConfig {
+  ecmHost: string;
+  authType: string;
+  aisHost: string;
+}
+
+@Component({
+  selector: 'aca-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'aca-settings' }
+})
+export class SettingsComponent implements OnInit {
+  private defaultPath = '/assets/images/alfresco-logo-white.svg';
+
+  form: FormGroup;
+
+  profile$: Observable<ProfileState>;
+  appName$: Observable<string>;
+  headerColor$: Observable<string>;
+
+  get settingGroups(): SettingsGroupRef[] {
+    return this.appExtensions.getSettingsGroups();
+  }
+
+  constructor(
+    private appExtensions: AppExtensionService,
+    private store: Store<AppStore>,
+    private appConfig: AppConfigService,
+    private storage: StorageService,
+    private fb: FormBuilder
+  ) {
+    this.profile$ = store.select(getUserProfile);
+    this.appName$ = store.select(getAppName);
+    this.headerColor$ = store.select(getHeaderColor);
+  }
+
+  get logo(): string {
+    return this.appConfig.get('application.logo', this.defaultPath);
+  }
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      ecmHost: ['', [Validators.required, Validators.pattern('^(http|https)://.*[^/]$')]],
+      aisHost: ['', [Validators.required, Validators.pattern('^(http|https)://.*[^/]$')]],
+      authType: ['']
+    });
+
+    this.reset();
+  }
+
+  apply(model: RepositoryConfig, isValid: boolean) {
+    if (isValid) {
+      this.storage.setItem('ecmHost', model.ecmHost);
+      this.storage.setItem('authType', model.authType);
+
+      const config: OauthConfigModel = this.appConfig.get<OauthConfigModel>('oauth2', null);
+      config.host = model.aisHost;
+      this.storage.setItem('oauth2', JSON.stringify(config));
+
+      // window.location.reload(true);
+    }
+  }
+
+  reset() {
+    const config: OauthConfigModel = this.appConfig.get<OauthConfigModel>('oauth2', null);
+
+    this.form.reset({
+      ecmHost: this.storage.getItem('ecmHost') || this.appConfig.get<string>('ecmHost'),
+      aisHost: config.host,
+      authType: this.appConfig.get<string>('authType')
+    });
+  }
+
+  getStringParamValue(param: SettingsParameterRef): string {
+    return this.storage.getItem(param.key) || param.value;
+  }
+
+  setParamValue(param: SettingsParameterRef, value: any) {
+    const currentValue = this.getStringParamValue(param);
+
+    if (currentValue !== value.toString()) {
+      param.value = value;
+      this.saveToStorage(param);
+    }
+  }
+
+  getBooleanParamValue(param: SettingsParameterRef): boolean {
+    const result = this.storage.getItem(param.key);
+    if (result) {
+      return result === 'true';
+    } else {
+      return param.value ? true : false;
+    }
+  }
+
+  private saveToStorage(param: SettingsParameterRef) {
+    this.storage.setItem(param.key, param.value ? param.value.toString() : param.value);
+    this.store.dispatch(new SetSettingsParameterAction({ name: param.key, value: param.value }));
+  }
+}

projects/aca-settings/src/lib/settings.module.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { ExtensionService } from '@alfresco/adf-extensions';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+import { SettingsComponent } from './settings.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, RouterModule, CoreModule.forChild()],
+  declarations: [SettingsComponent]
+})
+export class AcaSettingsModule {
+  constructor(extensions: ExtensionService) {
+    extensions.setComponents({
+      'app.settings.component': SettingsComponent
+    });
+  }
+}

projects/aca-settings/src/public-api.ts

@@ -0,0 +1,27 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export * from './lib/settings.component';
+export * from './lib/settings.module';

projects/aca-settings/src/test.ts

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

projects/aca-settings/tsconfig.lib.json

@@ -0,0 +1,24 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/aca-settings/tsconfig.lib.prod.json

@@ -0,0 +1,7 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

projects/aca-settings/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/aca-settings/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      ["lib", "aca", "app", "adf"],
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      ["lib", "aca", "app", "adf"],
+      "kebab-case"
+    ]
+  }
+}