@igo2/common 16.3.0 → 17.0.0-next.10

package/fesm2022/igo2-common-flexible.mjs

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Input, NgModule } from '@angular/core';
+import * as i1 from '@igo2/core/media';
+
+class FlexibleComponent {
+    el;
+    mediaService;
+    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) {
+        this.el = el;
+        this.mediaService = mediaService;
+    }
+    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((media) => (this.state = this.state));
+    }
+    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: "17.3.9", ngImport: i0, type: FlexibleComponent, deps: [{ token: i0.ElementRef }, { token: i1.MediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", 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: "17.3.9", 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 }], 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: "17.3.9", ngImport: i0, type: IgoFlexibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: IgoFlexibleModule, imports: [FlexibleComponent], exports: [FlexibleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: IgoFlexibleModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", 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

package/fesm2022/igo2-common-flexible.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"igo2-common-flexible.mjs","sources":["../../../packages/common/flexible/src/flexible.component.ts","../../../packages/common/flexible/src/flexible.component.html","../../../packages/common/flexible/src/flexible.module.ts","../../../packages/common/flexible/src/igo2-common-flexible.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  Input,\n  OnDestroy,\n  OnInit,\n  ViewChild\n} from '@angular/core';\n\nimport { Media, MediaService } from '@igo2/core/media';\n\nimport { Subscription } from 'rxjs';\n\nimport { FlexibleDirection, FlexibleState } from './flexible.type';\n\n@Component({\n  selector: 'igo-flexible',\n  templateUrl: './flexible.component.html',\n  styleUrls: ['./flexible.component.scss'],\n  standalone: true\n})\nexport class FlexibleComponent implements OnInit, OnDestroy {\n  static transitionTime = 250;\n\n  @ViewChild('flexibleMain', { static: true }) main;\n\n  @Input()\n  get initial(): string {\n    return this._initial;\n  }\n  set initial(value: string) {\n    this._initial = value;\n  }\n  private _initial = '0';\n\n  @Input()\n  get collapsed(): string {\n    return this._collapsed;\n  }\n  set collapsed(value: string) {\n    this._collapsed = value;\n  }\n  private _collapsed = '0';\n\n  @Input()\n  get expanded(): string {\n    return this._expanded;\n  }\n  set expanded(value: string) {\n    this._expanded = value;\n  }\n  private _expanded = '100%';\n\n  @Input()\n  get initialMobile(): string {\n    return this._initialMobile;\n  }\n  set initialMobile(value: string) {\n    this._initialMobile = value;\n  }\n  private _initialMobile: string = this.expanded;\n\n  @Input()\n  get collapsedMobile(): string {\n    return this._collapsedMobile;\n  }\n  set collapsedMobile(value: string) {\n    this._collapsedMobile = value;\n  }\n  private _collapsedMobile: string = this.collapsed;\n\n  @Input()\n  get expandedMobile(): string {\n    return this._expandedMobile;\n  }\n  set expandedMobile(value: string) {\n    this._expandedMobile = value;\n  }\n  private _expandedMobile: string = this.expanded;\n\n  @Input()\n  get direction(): FlexibleDirection {\n    return this._direction;\n  }\n  set direction(value: FlexibleDirection) {\n    this._direction = value;\n  }\n  private _direction: FlexibleDirection = 'column';\n\n  @Input()\n  get state(): FlexibleState {\n    return this._state;\n  }\n  set state(value: FlexibleState) {\n    const sizes = {\n      initial: this.initial,\n      collapsed: this.collapsed,\n      expanded: this.expanded\n    };\n\n    if (this.mediaService.isMobile()) {\n      Object.assign(sizes, {\n        initial: this.initialMobile,\n        collapsed: this.collapsedMobile,\n        expanded: this.expandedMobile\n      });\n    }\n\n    const size = sizes[value];\n    if (size !== undefined) {\n      this.setSize(size);\n      setTimeout(() => {\n        this._state = value;\n      }, FlexibleComponent.transitionTime);\n    }\n  }\n  private _state: FlexibleState = 'initial';\n\n  private mediaService$$: Subscription;\n\n  constructor(\n    private el: ElementRef,\n    private mediaService: MediaService\n  ) {}\n\n  ngOnInit() {\n    this.el.nativeElement.className += this.direction;\n\n    // Since this component supports different sizes\n    // on mobile, force a redraw when the media changes\n    this.mediaService$$ = this.mediaService.media$.subscribe(\n      (media: Media) => (this.state = this.state)\n    );\n  }\n\n  ngOnDestroy() {\n    if (this.mediaService$$) {\n      this.mediaService$$.unsubscribe();\n    }\n  }\n\n  private setSize(size: string) {\n    this._state = 'transition';\n\n    if (this.direction === 'column') {\n      this.main.nativeElement.style.height = size;\n    } else if (this.direction === 'row') {\n      this.main.nativeElement.style.width = size;\n    }\n  }\n}\n","<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","import { ModuleWithProviders, NgModule } from '@angular/core';\n\nimport { FlexibleComponent } from './flexible.component';\n\n/**\n * @deprecated import the FlexibleComponent directly\n */\n@NgModule({\n  imports: [FlexibleComponent],\n  exports: [FlexibleComponent]\n})\nexport class IgoFlexibleModule {\n  static forRoot(): ModuleWithProviders<IgoFlexibleModule> {\n    return {\n      ngModule: IgoFlexibleModule,\n      providers: []\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}