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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 55x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 265x 265x 265x 265x 265x 265x 265x 1x | /*******************************************************************************
* Copyright bei
* Entwicklungs- und Pflegeverbund für das gemeinsame Fachverfahren gefa
*
*******************************************************************************/
import { Component, HostBinding, Input } from '@angular/core';
/**
* A responsive grid which adapts its layout based on screen-size or optionally container-size.
* It uses the following breakpoints:
* - < 480px: xs
* - < 640px: sm
* - < 832px: md
* - < 1024px: lg
* - < 1400px: xl
* - >= 1400px: xxl
*/
@Component({
selector: 'gc-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css'],
})
export class GridComponent {
/**
* The reference to use for the break points
* - screen: breakpoints are relative to the screen
* - container: breakpoints are relative to the this grid-container
*/
@Input()
public reference: 'screen' | 'container' = 'screen';
/**
* The layout configuration used
* - basic: uses a 48px gutter
* - form: uses a 16px gutter
*/
@Input()
public layout: 'basic' | 'form' = 'basic';
/**
* Allow to use custom y-gutter used between rows
*/
@Input()
@HostBinding('style.--gc-grid-row-gap-override.px')
public yGutter?: number;
/**
* Set the horizontal inset at the start and end of a line, for aligning nested grids.
* A container-relative grid will thus also use the parent grid as
* size reference, instead of itself.
*/
@Input()
public horizontalInset?: number;
/** @ignore */
@HostBinding('class')
protected get cssClass(): string[] {
return [
`gc-reference-${this.reference}`,
`gc-layout-${this.layout}`,
...(this.horizontalInset !== undefined ? ['gc-horizontal-inset'] : []),
];
}
}
|