diff --git a/projects/ng-aquila/src/config/nx-expert.module.ts b/projects/ng-aquila/src/config/nx-expert.module.ts index 93e1d733a..832fef12d 100644 --- a/projects/ng-aquila/src/config/nx-expert.module.ts +++ b/projects/ng-aquila/src/config/nx-expert.module.ts @@ -5,6 +5,7 @@ import { DatepickerDefaultOptions, DATEPICKER_DEFAULT_OPTIONS } from '@aposin/ng import { TabGroupDefaultOptions, TabNavBarDefaultOptions, TAB_GROUP_DEFAULT_OPTIONS, TAB_NAV_BAR_DEFAULT_OPTIONS } from '@aposin/ng-aquila/tabs'; import { ComparisonTableDefaultOptions, COMPARISON_TABLE_DEFAULT_OPTIONS } from '@aposin/ng-aquila/comparison-table'; import { SelectableCardDefaultOptions, SELECTABLE_CARD_DEFAULT_OPTIONS } from '@aposin/ng-aquila/card'; +import { SmallStageDefaultOptions, SMALL_STAGE_DEFAULT_OPTIONS } from '@aposin/ng-aquila/small-stage'; // expert presets const comparisonTableExpertOptions: ComparisonTableDefaultOptions = { useFullRowForExpandableArea: true }; @@ -18,6 +19,7 @@ const datepickerExpertOptions: DatepickerDefaultOptions = { toggleIconTabindex: const tabGroupOptions: TabGroupDefaultOptions = { appearance: 'expert'}; const tabNavBarOptions: TabNavBarDefaultOptions = { appearance: 'expert' }; const selectableCardOptions: SelectableCardDefaultOptions = { appearance: 'expert' }; +const smallStageOptions: SmallStageDefaultOptions = { appearance: 'expert' }; @NgModule({ providers: [ @@ -28,7 +30,8 @@ const selectableCardOptions: SelectableCardDefaultOptions = { appearance: 'exper { provide: ERROR_DEFAULT_OPTIONS, useValue: errorExpertOptions }, { provide: TAB_GROUP_DEFAULT_OPTIONS, useValue: tabGroupOptions }, { provide: TAB_NAV_BAR_DEFAULT_OPTIONS, useValue: tabNavBarOptions }, - { provide: SELECTABLE_CARD_DEFAULT_OPTIONS, useValue: selectableCardOptions } + { provide: SELECTABLE_CARD_DEFAULT_OPTIONS, useValue: selectableCardOptions }, + { provide: SMALL_STAGE_DEFAULT_OPTIONS, useValue: smallStageOptions } ] }) diff --git a/projects/ng-aquila/src/config/nx-expert.spec.ts b/projects/ng-aquila/src/config/nx-expert.spec.ts index 11e3b5ca7..9f12efb65 100644 --- a/projects/ng-aquila/src/config/nx-expert.spec.ts +++ b/projects/ng-aquila/src/config/nx-expert.spec.ts @@ -16,6 +16,7 @@ import { NxDatepickerToggleComponent } from '@aposin/ng-aquila/datefield'; import { NxTabGroupComponent, NxTabNavBarComponent, NxTabsModule } from '@aposin/ng-aquila/tabs'; import { NxComparisonTableModule, NxComparisonTableRowGroupDirective } from '@aposin/ng-aquila/comparison-table'; import { NxCardModule, NxSelectableCardComponent } from '@aposin/ng-aquila/card'; +import { NxSmallStageComponent, NxSmallStageModule } from '@aposin/ng-aquila/small-stage'; @Directive() abstract class PresetTest { @@ -26,6 +27,7 @@ abstract class PresetTest { @ViewChild(NxTabGroupComponent) tabGroupInstance: NxTabGroupComponent; @ViewChild(NxTabNavBarComponent) tabNavBarInstance: NxTabNavBarComponent; @ViewChild(NxSelectableCardComponent) selectableCardInstance: NxSelectableCardComponent; + @ViewChild(NxSmallStageComponent) smallStageInstance: NxSmallStageComponent; } describe('NxExpertPreset', () => { @@ -39,6 +41,7 @@ describe('NxExpertPreset', () => { let tabGroupInstance: NxTabGroupComponent; let tabNavBarInstance: NxTabNavBarComponent; let selectableCardInstance: NxSelectableCardComponent; + let smallStageInstance: NxSmallStageComponent; function createTestComponent(component: Type) { fixture = TestBed.createComponent(component); @@ -52,6 +55,7 @@ describe('NxExpertPreset', () => { tabGroupInstance = testInstance.tabGroupInstance; tabNavBarInstance = testInstance.tabNavBarInstance; selectableCardInstance = testInstance.selectableCardInstance; + smallStageInstance = testInstance.smallStageInstance; } beforeEach( @@ -66,7 +70,8 @@ describe('NxExpertPreset', () => { NxLabelModule, NxMomentDateModule, NxTabsModule, - NxCardModule + NxCardModule, + NxSmallStageModule ], declarations: [ DatepickerPresetComponent, @@ -76,7 +81,8 @@ describe('NxExpertPreset', () => { TabGroupPresetComponent, TabNavBarPresetComponent, ComparisonTablePresetComponent, - SelectableCardPresetComponent + SelectableCardPresetComponent, + SmallStagePresetComponent ] }).compileComponents(); }) @@ -140,6 +146,13 @@ describe('NxExpertPreset', () => { expect(selectableCardInstance.appearance).toBe('expert'); }); }); + + describe('small stage presets', () => { + it('should set appearance to expert', () => { + createTestComponent(SmallStagePresetComponent); + expect(smallStageInstance.appearance).toBe('expert'); + }); + }); }); @Component({ @@ -248,3 +261,10 @@ class ComparisonTablePresetComponent extends PresetTest { ` }) class SelectableCardPresetComponent extends PresetTest {} + +@Component({ + template: ` + + ` +}) +class SmallStagePresetComponent extends PresetTest {} diff --git a/projects/ng-aquila/src/small-stage/small-stage.component.ts b/projects/ng-aquila/src/small-stage/small-stage.component.ts index 738ef57de..40f10cb7d 100644 --- a/projects/ng-aquila/src/small-stage/small-stage.component.ts +++ b/projects/ng-aquila/src/small-stage/small-stage.component.ts @@ -1,11 +1,25 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; -import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, HostBinding, InjectionToken, Optional, Inject } from '@angular/core'; /** * Appearance options for the small stage component. */ export type NxSmallStageAppearance = 'default' | 'expert'; +/** + * Represents the default options for the small stage. + * It can be configured using the `NX_SMALL_STAGE_DEFAULT_OPTIONS` injection token. + */ +export interface SmallStageDefaultOptions { + /** + * Sets the default appearance. (optional) + */ + appearance?: NxSmallStageAppearance; +} + +export const SMALL_STAGE_DEFAULT_OPTIONS = + new InjectionToken('SMALL_STAGE_DEFAULT_OPTIONS'); + @Component({ selector: 'nx-small-stage', templateUrl: './small-stage.component.html', @@ -41,4 +55,10 @@ export class NxSmallStageComponent { get _isExpert() { return this.appearance === 'expert'; } + + constructor(@Optional() @Inject(SMALL_STAGE_DEFAULT_OPTIONS) defaultOptions: SmallStageDefaultOptions) { + if (defaultOptions && defaultOptions.appearance) { + this.appearance = defaultOptions.appearance; + } + } }