@orchestrator/layout
Version:
> A set of simple layout components for Orchestrator library.
252 lines (238 loc) • 17.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostBinding, NgModule, Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { __decorate, __metadata } from 'tslib';
import * as i1 from '@orchestrator/core';
import { OptionAllowedValues, DynamicComponent, OrchestratorCoreModule } from '@orchestrator/core';
class FlexAlignContentDirective {
}
/** @nocollapse */ /** @nocollapse */ FlexAlignContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexAlignContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ /** @nocollapse */ FlexAlignContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: FlexAlignContentDirective, selector: "[orcFxAlignContent]", inputs: { orcFxAlignContent: "orcFxAlignContent" }, host: { properties: { "style.align-content": "this.orcFxAlignContent" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexAlignContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[orcFxAlignContent]',
}]
}], propDecorators: { orcFxAlignContent: [{
type: Input
}, {
type: HostBinding,
args: ['style.align-content']
}] } });
class FlexAlignItemsDirective {
}
/** @nocollapse */ /** @nocollapse */ FlexAlignItemsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexAlignItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ /** @nocollapse */ FlexAlignItemsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: FlexAlignItemsDirective, selector: "[orcFxAlignItems]", inputs: { orcFxAlignItems: "orcFxAlignItems" }, host: { properties: { "style.align-items": "this.orcFxAlignItems" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexAlignItemsDirective, decorators: [{
type: Directive,
args: [{
selector: '[orcFxAlignItems]',
}]
}], propDecorators: { orcFxAlignItems: [{
type: Input
}, {
type: HostBinding,
args: ['style.align-items']
}] } });
class FlexDirectionDirective {
constructor() {
this.orcFxDirection = 'row';
}
}
/** @nocollapse */ /** @nocollapse */ FlexDirectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ /** @nocollapse */ FlexDirectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: FlexDirectionDirective, selector: "[orcFxDirection]", inputs: { orcFxDirection: "orcFxDirection" }, host: { properties: { "style.flex-direction": "this.orcFxDirection" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexDirectionDirective, decorators: [{
type: Directive,
args: [{
selector: '[orcFxDirection]',
}]
}], propDecorators: { orcFxDirection: [{
type: Input
}, {
type: HostBinding,
args: ['style.flex-direction']
}] } });
class FlexJustifyContentDirective {
}
/** @nocollapse */ /** @nocollapse */ FlexJustifyContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexJustifyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ /** @nocollapse */ FlexJustifyContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: FlexJustifyContentDirective, selector: "[orcFxJustifyContent]", inputs: { orcFxJustifyContent: "orcFxJustifyContent" }, host: { properties: { "style.justify-content": "this.orcFxJustifyContent" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexJustifyContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[orcFxJustifyContent]',
}]
}], propDecorators: { orcFxJustifyContent: [{
type: Input
}, {
type: HostBinding,
args: ['style.justify-content']
}] } });
class FlexWrapDirective {
}
/** @nocollapse */ /** @nocollapse */ FlexWrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ /** @nocollapse */ FlexWrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: FlexWrapDirective, selector: "[orcFxWrap]", inputs: { orcFxWrap: "orcFxWrap" }, host: { properties: { "style.flex-wrap": "this.orcFxWrap" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: FlexWrapDirective, decorators: [{
type: Directive,
args: [{
selector: '[orcFxWrap]',
}]
}], propDecorators: { orcFxWrap: [{
type: Input
}, {
type: HostBinding,
args: ['style.flex-wrap']
}] } });
class LayoutFlexModule {
}
/** @nocollapse */ /** @nocollapse */ LayoutFlexModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlexModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
/** @nocollapse */ /** @nocollapse */ LayoutFlexModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlexModule, declarations: [FlexWrapDirective,
FlexJustifyContentDirective,
FlexDirectionDirective,
FlexAlignItemsDirective,
FlexAlignContentDirective], imports: [CommonModule], exports: [FlexWrapDirective,
FlexJustifyContentDirective,
FlexDirectionDirective,
FlexAlignItemsDirective,
FlexAlignContentDirective] });
/** @nocollapse */ /** @nocollapse */ LayoutFlexModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlexModule, imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlexModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
exports: [
FlexWrapDirective,
FlexJustifyContentDirective,
FlexDirectionDirective,
FlexAlignItemsDirective,
FlexAlignContentDirective,
],
declarations: [
FlexWrapDirective,
FlexJustifyContentDirective,
FlexDirectionDirective,
FlexAlignItemsDirective,
FlexAlignContentDirective,
],
}]
}] });
const baseOptions = ['initial', 'inherit'];
const spacingOptions = ['center', 'flex-end', 'flex-start'];
/**
* Default configuration for {@link LayoutFlatHostComponent}
*/
class LayoutFlatConfig {
}
/** @nocollapse */ /** @nocollapse */ LayoutFlatConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
/** @nocollapse */ /** @nocollapse */ LayoutFlatConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatConfig });
__decorate([
OptionAllowedValues(...baseOptions, 'wrap', 'nowrap', 'wrap-reverse'),
__metadata("design:type", String)
], LayoutFlatConfig.prototype, "wrap", void 0);
__decorate([
OptionAllowedValues(...baseOptions, 'row', 'column'),
__metadata("design:type", String)
], LayoutFlatConfig.prototype, "direction", void 0);
__decorate([
OptionAllowedValues(...baseOptions, ...spacingOptions, 'space-between', 'space-around', 'space-evenly'),
__metadata("design:type", String)
], LayoutFlatConfig.prototype, "justify", void 0);
__decorate([
OptionAllowedValues(...baseOptions, ...spacingOptions, 'baseline', 'stretch'),
__metadata("design:type", String)
], LayoutFlatConfig.prototype, "alignItems", void 0);
__decorate([
OptionAllowedValues(...baseOptions, ...spacingOptions, 'space-between', 'space-around', 'stretch'),
__metadata("design:type", String)
], LayoutFlatConfig.prototype, "alignContent", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatConfig, decorators: [{
type: Injectable
}], propDecorators: { wrap: [], direction: [], justify: [], alignItems: [], alignContent: [] } });
class LayoutFlatComponent {
constructor() {
/**
* Emitted after all, and if, all the `items` have been rendered
*/
this.afterItemsRendered = new EventEmitter();
this.classLayoutFlat = true;
this._itemsRendered = [];
}
onComponentCreated(component) {
this._itemsRendered.push(component);
if (this._itemsRendered.length === this.items.length) {
this.afterItemsRendered.emit(this._itemsRendered);
}
}
}
/** @nocollapse */ /** @nocollapse */ LayoutFlatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ LayoutFlatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: LayoutFlatComponent, selector: "orc-layout-flat", inputs: { items: "items" }, outputs: { afterItemsRendered: "afterItemsRendered" }, host: { properties: { "class.layout-flat-orc": "this.classLayoutFlat" } }, ngImport: i0, template: "<orc-render-item\n *ngFor=\"let item of items\"\n class=\"layout-flat-orc-item\"\n [item]=\"item\"\n (componentCreated)=\"onComponentCreated($event)\"\n></orc-render-item>\n", styles: [".layout-flat-orc{display:flex}\n"], components: [{ type: i1.RenderItemComponent, selector: "orc-render-item", inputs: ["item", "context"], outputs: ["componentCreated", "childComponentsCreated"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatComponent, decorators: [{
type: Component,
args: [{ selector: 'orc-layout-flat', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<orc-render-item\n *ngFor=\"let item of items\"\n class=\"layout-flat-orc-item\"\n [item]=\"item\"\n (componentCreated)=\"onComponentCreated($event)\"\n></orc-render-item>\n", styles: [".layout-flat-orc{display:flex}\n"] }]
}], propDecorators: { items: [{
type: Input
}], afterItemsRendered: [{
type: Output
}], classLayoutFlat: [{
type: HostBinding,
args: ['class.layout-flat-orc']
}] } });
let LayoutFlatHostComponent = class LayoutFlatHostComponent {
};
/** @nocollapse */ /** @nocollapse */ LayoutFlatHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ LayoutFlatHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: LayoutFlatHostComponent, selector: "orc-layout-flat-host", inputs: { items: "items", config: "config" }, ngImport: i0, template: "<orc-layout-flat\n [items]=\"items\"\n [orcFxWrap]=\"config?.wrap\"\n [orcFxDirection]=\"config?.direction\"\n [orcFxJustifyContent]=\"config?.justify\"\n [orcFxAlignItems]=\"config?.alignItems\"\n [orcFxAlignContent]=\"config?.alignContent\"\n></orc-layout-flat>\n", styles: [""], components: [{ type: LayoutFlatComponent, selector: "orc-layout-flat", inputs: ["items"], outputs: ["afterItemsRendered"] }], directives: [{ type: FlexWrapDirective, selector: "[orcFxWrap]", inputs: ["orcFxWrap"] }, { type: FlexDirectionDirective, selector: "[orcFxDirection]", inputs: ["orcFxDirection"] }, { type: FlexJustifyContentDirective, selector: "[orcFxJustifyContent]", inputs: ["orcFxJustifyContent"] }, { type: FlexAlignItemsDirective, selector: "[orcFxAlignItems]", inputs: ["orcFxAlignItems"] }, { type: FlexAlignContentDirective, selector: "[orcFxAlignContent]", inputs: ["orcFxAlignContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
LayoutFlatHostComponent = __decorate([
DynamicComponent({ config: LayoutFlatConfig })
], LayoutFlatHostComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatHostComponent, decorators: [{
type: Component,
args: [{ selector: 'orc-layout-flat-host', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<orc-layout-flat\n [items]=\"items\"\n [orcFxWrap]=\"config?.wrap\"\n [orcFxDirection]=\"config?.direction\"\n [orcFxJustifyContent]=\"config?.justify\"\n [orcFxAlignItems]=\"config?.alignItems\"\n [orcFxAlignContent]=\"config?.alignContent\"\n></orc-layout-flat>\n", styles: [""] }]
}], propDecorators: { items: [{
type: Input
}], config: [{
type: Input
}] } });
class LayoutFlatHostModule {
static forRoot() {
return {
ngModule: LayoutFlatHostModule,
providers: [
...OrchestratorCoreModule.registerComponents([LayoutFlatHostComponent]),
LayoutFlatConfig,
],
};
}
}
/** @nocollapse */ /** @nocollapse */ LayoutFlatHostModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatHostModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
/** @nocollapse */ /** @nocollapse */ LayoutFlatHostModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatHostModule, declarations: [LayoutFlatHostComponent, LayoutFlatComponent], imports: [CommonModule, OrchestratorCoreModule, LayoutFlexModule], exports: [LayoutFlatHostComponent, LayoutFlatComponent] });
/** @nocollapse */ /** @nocollapse */ LayoutFlatHostModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatHostModule, imports: [[CommonModule, OrchestratorCoreModule, LayoutFlexModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutFlatHostModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, OrchestratorCoreModule, LayoutFlexModule],
exports: [LayoutFlatHostComponent, LayoutFlatComponent],
declarations: [LayoutFlatHostComponent, LayoutFlatComponent],
}]
}] });
class LayoutModule {
static forRoot() {
return {
ngModule: LayoutModule,
providers: [...LayoutFlatHostModule.forRoot().providers],
};
}
}
/** @nocollapse */ /** @nocollapse */ LayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
/** @nocollapse */ /** @nocollapse */ LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutModule, exports: [LayoutFlexModule, LayoutFlatHostModule] });
/** @nocollapse */ /** @nocollapse */ LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutModule, imports: [LayoutFlexModule, LayoutFlatHostModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: LayoutModule, decorators: [{
type: NgModule,
args: [{
exports: [LayoutFlexModule, LayoutFlatHostModule],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FlexAlignContentDirective, FlexAlignItemsDirective, FlexDirectionDirective, FlexJustifyContentDirective, FlexWrapDirective, LayoutFlatComponent, LayoutFlatConfig, LayoutFlatHostComponent, LayoutFlatHostModule, LayoutFlexModule, LayoutModule };
//# sourceMappingURL=orchestrator-layout.mjs.map