Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 157x 157x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 7x 7x 7x 7x 7x 8x 8x 8x 8x 8x 7x 7x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 15x 6x 6x 9x 9x 9x 9x 15x 15x 15x 6x 6x 9x 9x 9x 9x 15x 15x 1x 1x 1x 15x 15x 1x | /*******************************************************************************
* Copyright bei
* Entwicklungs- und Pflegeverbund für das gemeinsame Fachverfahren gefa
*
*******************************************************************************/
import {
Component,
ElementRef,
EventEmitter,
Input,
NgZone,
OnDestroy,
Output,
} from '@angular/core';
import { observeSize } from '../utils/internal-utils';
import { Callback, Item, Key, WidgetKeySet } from '../utils/util.types';
import { createWidgetKeySet } from '../utils/utilities';
import {
DynamicHeadingLevelPassthroughService,
DynamicHeadingLevelService,
} from '../dynamic-heading/dynamic-heading-level.service';
import { CellValue } from '../grid/cell/grid-cell.component';
/**
* A Wizard Layout allows long and complex forms to be divided into individual steps to facilitate processing.
*/
@Component({
selector: 'gc-wizard',
templateUrl: './wizard.component.html',
styleUrls: ['./wizard.component.css'],
providers: [DynamicHeadingLevelService],
viewProviders: [
{
provide: DynamicHeadingLevelService,
useClass: DynamicHeadingLevelPassthroughService,
},
],
})
export class WizardComponent implements OnDestroy {
/**
* Items to render as steps.
*/
@Input()
public stepItems: readonly Item[] = [];
/**
* List of item keys that are marked as validated.
*/
@Input()
public validatedStepKeys: ReadonlySet<string> = new Set();
/**
* List of item keys that are inactive.
*/
@Input()
public inactiveSteps: ReadonlySet<string> = new Set();
/**
* Key of the currently active step
*/
@Input()
public activeStepKey?: string;
/**
* User-initiated active step key switch will be only performed when the callback evaluates with value `true`. Leaving this
* empty (`undefined`) is equivalent to always resolving to `true`.
*/
@Input()
public permitActiveStepKeyChange?: (key: Key) => Promise<boolean> | boolean;
/**
* Fires upon change of the selected step item
*/
@Output()
public readonly activeStepKeyChange: EventEmitter<string> =
new EventEmitter<string>();
/** @ignore */
protected get _mainContentId(): string {
return this._widgetKeys.baseKey + '-main-content';
}
/** @ignore */
protected _sideCellSize?: CellValue;
/** @ignore */
protected _sideCellClosedSize?: CellValue = '2';
/** @ignore */
protected _mainCellSize?: CellValue;
/** @ignore */
protected _mainCellClosedSize: CellValue = '10';
/** @ignore */
protected _showSideContent = true;
/** @ignore */
protected _fullScreenFormMode = false;
/** @ignore */
private readonly _widgetKeys: WidgetKeySet = createWidgetKeySet('gc-wizard');
/** @ignore */
private resizeDestroy: Callback;
constructor(hostElement: ElementRef<HTMLElement>, zone: NgZone) {
const hostElementWidth =
hostElement.nativeElement.getBoundingClientRect().width;
this.calculateSideCellSize(hostElementWidth);
this.computeResponsiveness(hostElementWidth);
this.resizeDestroy = observeSize(hostElement, zone, size => {
const width =
size.borderBoxSize.length > 0
? size.borderBoxSize[0].inlineSize
: size.contentRect.width;
this.calculateSideCellSize(width);
this.computeResponsiveness(width);
});
}
/**
* @ignore
*/
ngOnDestroy(): void {
this.resizeDestroy();
}
/**
* @ignore
*/
_onActiveStepChange(key: string): void {
this.activeStepKey = key;
this.activeStepKeyChange.emit(key);
}
/**
* @ignore
*/
private calculateSideCellSize(width: number) {
if (width >= 1800) {
this._sideCellSize = '3';
this._mainCellSize = '9';
} else if (width >= 960) {
this._sideCellSize = '4';
this._mainCellSize = '8';
} else {
this._sideCellSize = undefined;
this._mainCellSize = '12';
}
if (width >= 1200) {
this._sideCellClosedSize = '1';
this._mainCellClosedSize = '11';
} else if (width >= 960) {
this._sideCellClosedSize = '2';
this._mainCellClosedSize = '10';
} else {
this._sideCellClosedSize = undefined;
this._mainCellClosedSize = '12';
}
}
/** @ignore */
private computeResponsiveness(width: number): void {
this._fullScreenFormMode = width < 480;
}
}
|