@igo2/common
Version:
166 lines (161 loc) • 7.77 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, ViewChild, Component, NgModule } from '@angular/core';
import * as i1 from '@igo2/core/media';
class FlexibleComponent {
el;
mediaService;
cdr;
static transitionTime = 250;
main;
get initial() {
return this._initial;
}
set initial(value) {
this._initial = value;
}
_initial = '0';
get collapsed() {
return this._collapsed;
}
set collapsed(value) {
this._collapsed = value;
}
_collapsed = '0';
get expanded() {
return this._expanded;
}
set expanded(value) {
this._expanded = value;
}
_expanded = '100%';
get initialMobile() {
return this._initialMobile;
}
set initialMobile(value) {
this._initialMobile = value;
}
_initialMobile = this.expanded;
get collapsedMobile() {
return this._collapsedMobile;
}
set collapsedMobile(value) {
this._collapsedMobile = value;
}
_collapsedMobile = this.collapsed;
get expandedMobile() {
return this._expandedMobile;
}
set expandedMobile(value) {
this._expandedMobile = value;
}
_expandedMobile = this.expanded;
get direction() {
return this._direction;
}
set direction(value) {
this._direction = value;
}
_direction = 'column';
get state() {
return this._state;
}
set state(value) {
const sizes = {
initial: this.initial,
collapsed: this.collapsed,
expanded: this.expanded
};
if (this.mediaService.isMobile()) {
Object.assign(sizes, {
initial: this.initialMobile,
collapsed: this.collapsedMobile,
expanded: this.expandedMobile
});
}
const size = sizes[value];
if (size !== undefined) {
this.setSize(size);
setTimeout(() => {
this._state = value;
}, FlexibleComponent.transitionTime);
}
}
_state = 'initial';
mediaService$$;
constructor(el, mediaService, cdr) {
this.el = el;
this.mediaService = mediaService;
this.cdr = cdr;
}
ngOnInit() {
this.el.nativeElement.className += this.direction;
// Since this component supports different sizes
// on mobile, force a redraw when the media changes
this.mediaService$$ = this.mediaService.media$.subscribe(() => this.cdr.markForCheck());
}
ngOnDestroy() {
if (this.mediaService$$) {
this.mediaService$$.unsubscribe();
}
}
setSize(size) {
this._state = 'transition';
if (this.direction === 'column') {
this.main.nativeElement.style.height = size;
}
else if (this.direction === 'row') {
this.main.nativeElement.style.width = size;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FlexibleComponent, deps: [{ token: i0.ElementRef }, { token: i1.MediaService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FlexibleComponent, isStandalone: true, selector: "igo-flexible", inputs: { initial: "initial", collapsed: "collapsed", expanded: "expanded", initialMobile: "initialMobile", collapsedMobile: "collapsedMobile", expandedMobile: "expandedMobile", direction: "direction", state: "state" }, viewQueries: [{ propertyName: "main", first: true, predicate: ["flexibleMain"], descendants: true, static: true }], ngImport: i0, template: "<div #flexibleMain class=\"igo-flexible-main {{ state }} {{ direction }}\">\n <div class=\"igo-container\">\n <ng-content></ng-content>\n </div>\n</div>\n<div class=\"igo-flexible-fill\">\n <div>\n <div class=\"igo-container\">\n <ng-content select=\"[igoFlexibleFill]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%}:host.column{flex-direction:column}:host.row{flex-direction:row}:host .igo-flexible-main{flex:0 0 auto;overflow:hidden}:host .igo-flexible-main.column{transition:height .25s ease-in}:host .igo-flexible-main.row{transition:width .25s ease-in}:host .igo-flexible-fill>div{position:absolute;inset:0}:host .igo-container{height:100%;overflow:hidden;position:relative}:host ::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}:host ::ng-deep .igo-content{height:100%;width:100%;overflow:auto}:host ::ng-deep igo-panel{height:100%}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FlexibleComponent, decorators: [{
type: Component,
args: [{ selector: 'igo-flexible', standalone: true, template: "<div #flexibleMain class=\"igo-flexible-main {{ state }} {{ direction }}\">\n <div class=\"igo-container\">\n <ng-content></ng-content>\n </div>\n</div>\n<div class=\"igo-flexible-fill\">\n <div>\n <div class=\"igo-container\">\n <ng-content select=\"[igoFlexibleFill]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%}:host.column{flex-direction:column}:host.row{flex-direction:row}:host .igo-flexible-main{flex:0 0 auto;overflow:hidden}:host .igo-flexible-main.column{transition:height .25s ease-in}:host .igo-flexible-main.row{transition:width .25s ease-in}:host .igo-flexible-fill>div{position:absolute;inset:0}:host .igo-container{height:100%;overflow:hidden;position:relative}:host ::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}:host ::ng-deep .igo-content{height:100%;width:100%;overflow:auto}:host ::ng-deep igo-panel{height:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MediaService }, { type: i0.ChangeDetectorRef }], propDecorators: { main: [{
type: ViewChild,
args: ['flexibleMain', { static: true }]
}], initial: [{
type: Input
}], collapsed: [{
type: Input
}], expanded: [{
type: Input
}], initialMobile: [{
type: Input
}], collapsedMobile: [{
type: Input
}], expandedMobile: [{
type: Input
}], direction: [{
type: Input
}], state: [{
type: Input
}] } });
/**
* @deprecated import the FlexibleComponent directly
*/
class IgoFlexibleModule {
static forRoot() {
return {
ngModule: IgoFlexibleModule,
providers: []
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoFlexibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: IgoFlexibleModule, imports: [FlexibleComponent], exports: [FlexibleComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoFlexibleModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoFlexibleModule, decorators: [{
type: NgModule,
args: [{
imports: [FlexibleComponent],
exports: [FlexibleComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FlexibleComponent, IgoFlexibleModule };
//# sourceMappingURL=igo2-common-flexible.mjs.map