@mobilelivenpm/fds-angular-qa
Version:
This library was generated with [Nx](https://nx.dev).
89 lines • 13.3 kB
JavaScript
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ElementRef, ChangeDetectorRef, HostBinding } from '@angular/core';
import { FdsStepLabel } from './step-label';
import { CdkStepHeader } from '@angular/cdk/stepper';
import { FocusMonitor } from '@angular/cdk/a11y';
export class FdsStepHeader extends CdkStepHeader {
constructor(_focusMonitor, _elementRef, changeDetectorRef) {
super(_elementRef);
this._focusMonitor = _focusMonitor;
this.editable = false;
}
get stepAriaLabel() {
return `Step ${this.index + 1} ${this._stringLabel()} ${this._getDefaultTextForState(this.state) === 'create' ? 'Done' : ''}`;
}
get isSelected() {
return this.selected ? 0 : '';
}
ngAfterViewInit() {
this._focusMonitor.monitor(this._elementRef, true);
}
ngOnDestroy() {
this._focusMonitor.stopMonitoring(this._elementRef);
}
/** Focuses the step header. */
focus(origin, options) {
if (origin) {
this._focusMonitor.focusVia(this._elementRef, origin, options);
}
else {
this._elementRef.nativeElement.focus(options);
}
}
/** Returns the host HTML element. */
_getHostElement() {
return this._elementRef.nativeElement;
}
/** Returns string label of given step if it is a text label. */
_stringLabel() {
return this.label instanceof FdsStepLabel ? null : this.label;
}
/** Returns MatStepLabel if the label of given step is a template label. */
_templateLabel() {
return this.label instanceof FdsStepLabel ? this.label : null;
}
_getDefaultTextForState(state) {
if (state == 'number') {
return `${this.index + 1}`;
}
if (state == 'edit') {
return 'create';
}
// if (state == 'done') {
// return 'done';
// }
if (state == 'error') {
return 'warning';
}
return state;
}
}
FdsStepHeader.decorators = [
{ type: Component, args: [{
selector: 'fds-step-header',
template: "<!-- <button class=\"bg--no--color border--0 p--0\" attr.aria-label=\"step {{_getDefaultTextForState(state)}} {{ _templateLabel() }}\"> -->\n<span\n aria-hidden=\"true\"\n class=\"fds-box-counter position--relative d--inline-block mb--2\"\n>\n <span\n aria-hidden=\"true\"\n class=\"fds--stepper--counter btn btn--icon rounded--circle mx--5\"\n [class.fds-done-step]=\"_getDefaultTextForState(state) === 'create'\"\n [ngClass]=\"selected ? 'btn--primary' : 'btn--primary--outline'\"\n [ngSwitch]=\"!!(iconOverrides && iconOverrides[state])\"\n >\n <ng-container\n *ngSwitchCase=\"true\"\n [ngTemplateOutlet]=\"iconOverrides[state]\"\n ></ng-container>\n <!-- [ngTemplateOutletContext]=\"_getIconContext()\"-->\n <ng-container *ngSwitchDefault [ngSwitch]=\"state\">\n <span *ngSwitchCase=\"'number'\">{{_getDefaultTextForState(state)}}</span>\n <ng-container *ngIf=\"editable\">\n <span\n aria-hidden=\"true\"\n [class]=\"_getDefaultTextForState(state) === 'create' ? 'icon-check font--size--lg': 'icon-create'\"\n *ngSwitchDefault\n >\n <!-- {{_getDefaultTextForState(state)}} -->\n </span>\n </ng-container>\n <ng-container *ngIf=\"!editable\">\n <!-- [class]=\"_getDefaultTextForState(state) === 'done' ? 'icon-check font--size--lg': 'icon-create'\" -->\n <span aria-hidden=\"true\" *ngSwitchDefault> {{ index + 1 }} </span>\n </ng-container>\n </ng-container>\n </span>\n</span>\n<span\n aria-hidden=\"true\"\n class=\"fds--stepper--title d--block\"\n [class.fds-step-label-active]=\"active\"\n [class.fds-step-label-selected]=\"selected\"\n [class.text--primary]=\"selected\"\n>\n <div class=\"fds-step-text-label\" *ngIf=\"_templateLabel()\">\n <ng-container\n [ngTemplateOutlet]=\"_templateLabel()!.template\"\n ></ng-container>\n </div>\n <!-- If there is no label template, fall back to the text label. -->\n <div class=\"fds-step-text-label\" *ngIf=\"_stringLabel()\">{{label}}</div>\n<!-- <div class=\"fds-step-sub-label-error\" *ngIf=\"state == 'error'\">-->\n<!-- {{errorMessage}}-->\n<!-- </div>-->\n</span>\n<!-- </button> -->",
host: {
class: 'fds-step-header fds-focus-indicator',
role: 'tab'
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".fds-box-counter{background-color:var(--bg-color-counter)}.fds-box-counter span{min-width:auto;cursor:default!important}.fds-stepper-label-position-bottom .fds-horizontal-stepper-header-container{align-items:flex-start;position:relative;white-space:nowrap;display:flex}.fds-stepper-label-position-bottom .fds-horizontal-stepper-header,.fds-vertical-stepper-header{padding:24px}.fds-stepper-label-position-bottom .fds-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.fds-stepper-label-position-bottom .fds-horizontal-stepper-header .fds-step-icon{margin-right:0;margin-left:0}.fds-horizontal-stepper-header .fds-step-icon{margin-right:8px}.fds-step-header .fds-step-icon-selected,.fds-step-header .fds-step-icon-state-done,.fds-step-header .fds-step-icon-state-edit{background-color:#3f51b5;color:#fff}.fds-stepper-label-position-bottom .fds-horizontal-stepper-header .fds-step-label{padding:16px 0 0;text-align:center;width:100%}"]
},] }
];
FdsStepHeader.ctorParameters = () => [
{ type: FocusMonitor },
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
FdsStepHeader.propDecorators = {
label: [{ type: Input }],
editable: [{ type: Input }],
state: [{ type: Input }],
index: [{ type: Input }],
selected: [{ type: Input }],
stepAriaLabel: [{ type: HostBinding, args: ['attr.aria-label',] }],
isSelected: [{ type: HostBinding, args: ['attr.tabindex',] }],
active: [{ type: Input }],
iconOverrides: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC1oZWFkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvc3JjL2xpYi9zdGVwcGVyL3N0ZXAtaGVhZGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLHVCQUF1QixFQUN2QixLQUFLLEVBRUwsVUFBVSxFQUNWLGlCQUFpQixFQUNqQixXQUFXLEVBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUM1QyxPQUFPLEVBQWEsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDaEUsT0FBTyxFQUFFLFlBQVksRUFBZSxNQUFNLG1CQUFtQixDQUFDO0FBYTlELE1BQU0sT0FBTyxhQUFjLFNBQVEsYUFBYTtJQWlDOUMsWUFDVSxhQUEyQixFQUNuQyxXQUFvQyxFQUNwQyxpQkFBb0M7UUFFcEMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBSlgsa0JBQWEsR0FBYixhQUFhLENBQWM7UUE5QjVCLGFBQVEsR0FBRyxLQUFLLENBQUM7SUFtQzFCLENBQUM7SUF4QkQsSUFDVyxhQUFhO1FBQ3RCLE9BQU8sUUFBUSxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLElBQ2xELElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQ25FLEVBQUUsQ0FBQztJQUNMLENBQUM7SUFFRCxJQUNXLFVBQVU7UUFDbkIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBZ0JELGVBQWU7UUFDYixJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCwrQkFBK0I7SUFDL0IsS0FBSyxDQUFDLE1BQW9CLEVBQUUsT0FBc0I7UUFDaEQsSUFBSSxNQUFNLEVBQUU7WUFDVixJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLE1BQU0sRUFBRSxPQUFPLENBQUMsQ0FBQztTQUNoRTthQUFNO1lBQ0wsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQy9DO0lBQ0gsQ0FBQztJQUVELHFDQUFxQztJQUNyQyxlQUFlO1FBQ2IsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQztJQUN4QyxDQUFDO0lBRUQsZ0VBQWdFO0lBQ2hFLFlBQVk7UUFDVixPQUFPLElBQUksQ0FBQyxLQUFLLFlBQVksWUFBWSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUM7SUFDaEUsQ0FBQztJQUVELDJFQUEyRTtJQUMzRSxjQUFjO1FBQ1osT0FBTyxJQUFJLENBQUMsS0FBSyxZQUFZLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQ2hFLENBQUM7SUFFRCx1QkFBdUIsQ0FBQyxLQUFnQjtRQUN0QyxJQUFJLEtBQUssSUFBSSxRQUFRLEVBQUU7WUFDckIsT0FBTyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxFQUFFLENBQUM7U0FDNUI7UUFDRCxJQUFJLEtBQUssSUFBSSxNQUFNLEVBQUU7WUFDbkIsT0FBTyxRQUFRLENBQUM7U0FDakI7UUFDRCx5QkFBeUI7UUFDekIsbUJBQW1CO1FBQ25CLElBQUk7UUFDSixJQUFJLEtBQUssSUFBSSxPQUFPLEVBQUU7WUFDcEIsT0FBTyxTQUFTLENBQUM7U0FDbEI7UUFDRCxPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7OztZQWxHRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsNnFFQUErQjtnQkFFL0IsSUFBSSxFQUFFO29CQUNKLEtBQUssRUFBRSxxQ0FBcUM7b0JBQzVDLElBQUksRUFBRSxLQUFLO2lCQUNaO2dCQUNELGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2dCQUNyQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDaEQ7OztZQVpRLFlBQVk7WUFObkIsVUFBVTtZQUNWLGlCQUFpQjs7O29CQW9CaEIsS0FBSzt1QkFFTCxLQUFLO29CQUdMLEtBQUs7b0JBR0wsS0FBSzt1QkFHTCxLQUFLOzRCQUVMLFdBQVcsU0FBQyxpQkFBaUI7eUJBTzdCLFdBQVcsU0FBQyxlQUFlO3FCQU0zQixLQUFLOzRCQUdMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgSW5wdXQsXG4gIFRlbXBsYXRlUmVmLFxuICBFbGVtZW50UmVmLFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgSG9zdEJpbmRpbmdcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGZHNTdGVwTGFiZWwgfSBmcm9tICcuL3N0ZXAtbGFiZWwnO1xuaW1wb3J0IHsgU3RlcFN0YXRlLCBDZGtTdGVwSGVhZGVyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3N0ZXBwZXInO1xuaW1wb3J0IHsgRm9jdXNNb25pdG9yLCBGb2N1c09yaWdpbiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9hMTF5JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZmRzLXN0ZXAtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICdzdGVwLWhlYWRlci5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3RlcC1oZWFkZXIuc2NzcyddLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdmZHMtc3RlcC1oZWFkZXIgZmRzLWZvY3VzLWluZGljYXRvcicsXG4gICAgcm9sZTogJ3RhYidcbiAgfSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgRmRzU3RlcEhlYWRlciBleHRlbmRzIENka1N0ZXBIZWFkZXIge1xuICAvKiogTGFiZWwgb2YgdGhlIGdpdmVuIHN0ZXAuICovXG4gIEBJbnB1dCgpIGxhYmVsOiBGZHNTdGVwTGFiZWwgfCBzdHJpbmc7XG5cbiAgQElucHV0KCkgZWRpdGFibGUgPSBmYWxzZTtcblxuICAvKiogU3RhdGUgb2YgdGhlIGdpdmVuIHN0ZXAuICovXG4gIEBJbnB1dCgpIHN0YXRlOiBTdGVwU3RhdGU7XG5cbiAgLyoqIEluZGV4IG9mIHRoZSBnaXZlbiBzdGVwLiAqL1xuICBASW5wdXQoKSBpbmRleDogbnVtYmVyO1xuXG4gIC8qKiBXaGV0aGVyIHRoZSBnaXZlbiBzdGVwIGlzIHNlbGVjdGVkLiAqL1xuICBASW5wdXQoKSBzZWxlY3RlZDogYm9vbGVhbjtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuYXJpYS1sYWJlbCcpXG4gIHB1YmxpYyBnZXQgc3RlcEFyaWFMYWJlbCgpOiBzdHJpbmcge1xuICAgIHJldHVybiBgU3RlcCAke3RoaXMuaW5kZXggKyAxfSAke3RoaXMuX3N0cmluZ0xhYmVsKCl9ICR7XG4gICAgICB0aGlzLl9nZXREZWZhdWx0VGV4dEZvclN0YXRlKHRoaXMuc3RhdGUpID09PSAnY3JlYXRlJyA/ICdEb25lJyA6ICcnXG4gICAgfWA7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2F0dHIudGFiaW5kZXgnKVxuICBwdWJsaWMgZ2V0IGlzU2VsZWN0ZWQoKTogc3RyaW5nIHwgbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5zZWxlY3RlZCA/IDAgOiAnJztcbiAgfVxuXG4gIC8qKiBXaGV0aGVyIHRoZSBnaXZlbiBzdGVwIGxhYmVsIGlzIGFjdGl2ZS4gKi9cbiAgQElucHV0KCkgYWN0aXZlOiBib29sZWFuO1xuXG4gIC8qKiBPdmVycmlkZXMgZm9yIHRoZSBoZWFkZXIgaWNvbnMsIHBhc3NlZCBpbiB2aWEgdGhlIHN0ZXBwZXIuICovXG4gIEBJbnB1dCgpIGljb25PdmVycmlkZXM6IHsgW2tleTogc3RyaW5nXTogVGVtcGxhdGVSZWY8YW55PiB9O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgX2ZvY3VzTW9uaXRvcjogRm9jdXNNb25pdG9yLFxuICAgIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7XG4gICAgc3VwZXIoX2VsZW1lbnRSZWYpO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuX2ZvY3VzTW9uaXRvci5tb25pdG9yKHRoaXMuX2VsZW1lbnRSZWYsIHRydWUpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5fZm9jdXNNb25pdG9yLnN0b3BNb25pdG9yaW5nKHRoaXMuX2VsZW1lbnRSZWYpO1xuICB9XG5cbiAgLyoqIEZvY3VzZXMgdGhlIHN0ZXAgaGVhZGVyLiAqL1xuICBmb2N1cyhvcmlnaW4/OiBGb2N1c09yaWdpbiwgb3B0aW9ucz86IEZvY3VzT3B0aW9ucykge1xuICAgIGlmIChvcmlnaW4pIHtcbiAgICAgIHRoaXMuX2ZvY3VzTW9uaXRvci5mb2N1c1ZpYSh0aGlzLl9lbGVtZW50UmVmLCBvcmlnaW4sIG9wdGlvbnMpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuZm9jdXMob3B0aW9ucyk7XG4gICAgfVxuICB9XG5cbiAgLyoqIFJldHVybnMgdGhlIGhvc3QgSFRNTCBlbGVtZW50LiAqL1xuICBfZ2V0SG9zdEVsZW1lbnQoKSB7XG4gICAgcmV0dXJuIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgfVxuXG4gIC8qKiBSZXR1cm5zIHN0cmluZyBsYWJlbCBvZiBnaXZlbiBzdGVwIGlmIGl0IGlzIGEgdGV4dCBsYWJlbC4gKi9cbiAgX3N0cmluZ0xhYmVsKCk6IHN0cmluZyB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLmxhYmVsIGluc3RhbmNlb2YgRmRzU3RlcExhYmVsID8gbnVsbCA6IHRoaXMubGFiZWw7XG4gIH1cblxuICAvKiogUmV0dXJucyBNYXRTdGVwTGFiZWwgaWYgdGhlIGxhYmVsIG9mIGdpdmVuIHN0ZXAgaXMgYSB0ZW1wbGF0ZSBsYWJlbC4gKi9cbiAgX3RlbXBsYXRlTGFiZWwoKTogRmRzU3RlcExhYmVsIHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMubGFiZWwgaW5zdGFuY2VvZiBGZHNTdGVwTGFiZWwgPyB0aGlzLmxhYmVsIDogbnVsbDtcbiAgfVxuXG4gIF9nZXREZWZhdWx0VGV4dEZvclN0YXRlKHN0YXRlOiBTdGVwU3RhdGUpOiBzdHJpbmcge1xuICAgIGlmIChzdGF0ZSA9PSAnbnVtYmVyJykge1xuICAgICAgcmV0dXJuIGAke3RoaXMuaW5kZXggKyAxfWA7XG4gICAgfVxuICAgIGlmIChzdGF0ZSA9PSAnZWRpdCcpIHtcbiAgICAgIHJldHVybiAnY3JlYXRlJztcbiAgICB9XG4gICAgLy8gaWYgKHN0YXRlID09ICdkb25lJykge1xuICAgIC8vICAgcmV0dXJuICdkb25lJztcbiAgICAvLyB9XG4gICAgaWYgKHN0YXRlID09ICdlcnJvcicpIHtcbiAgICAgIHJldHVybiAnd2FybmluZyc7XG4gICAgfVxuICAgIHJldHVybiBzdGF0ZTtcbiAgfVxufSJdfQ==