@dcsl/flex-ui 0.0.4

package/README.md

@@ -0,0 +1,63 @@
+# FlexNgControls
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build flex-ui-controls
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/flex-ui-controls
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/dcsl-flex-ui.mjs

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, HostListener, ViewChild, Component } from '@angular/core';
+
+class FlexPanelComponent {
+    resizeObserver;
+    mutationObserver;
+    comp;
+    renderer = inject(Renderer2);
+    constructor() { }
+    ngAfterViewInit() {
+        this.adjustHeight();
+        // ✅ Recalculate on window resize
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(() => this.adjustHeight());
+            this.resizeObserver.observe(document.body);
+        }
+        // ✅ Also observe DOM changes that may shift this element
+        this.mutationObserver = new MutationObserver(() => this.adjustHeight());
+        this.mutationObserver.observe(document.body, {
+            attributes: true,
+            childList: true,
+            subtree: true
+        });
+    }
+    onWindowResize() {
+        this.adjustHeight();
+    }
+    adjustHeight() {
+        // const host: HTMLElement = this.el.nativeElement;
+        const top = this.comp.nativeElement.getBoundingClientRect().top;
+        const viewportHeight = window.innerHeight;
+        const newHeight = viewportHeight - top;
+        this.renderer.setStyle(this.comp?.nativeElement, 'height', `${newHeight}px`);
+        this.renderer.setStyle(this.comp?.nativeElement, 'width', '100%');
+        // console.log(host);
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FlexPanelComponent, isStandalone: true, selector: "lib-flex-panel", host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "comp", first: true, predicate: ["abc"], descendants: true }], ngImport: i0, template: "<div class=\"stretch-container\" #abc>\r\n    <ng-content></ng-content>\r\n</div>", styles: [".stretch-container{width:100%;height:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-flex-panel', imports: [], template: "<div class=\"stretch-container\" #abc>\r\n    <ng-content></ng-content>\r\n</div>", styles: [".stretch-container{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { comp: [{
+                type: ViewChild,
+                args: ["abc"]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/*
+ * Public API Surface of flex-ui-controls
+ */
+// export * from './lib/flex-ui-controls.service';
+// export * from './lib/flex-ui-controls.component';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FlexPanelComponent };
+//# sourceMappingURL=dcsl-flex-ui.mjs.map

package/fesm2022/dcsl-flex-ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dcsl-flex-ui.mjs","sources":["../../../projects/flex-ui-controls/src/lib/flex-panel/flex-panel.component.ts","../../../projects/flex-ui-controls/src/lib/flex-panel/flex-panel.component.html","../../../projects/flex-ui-controls/src/public-api.ts","../../../projects/flex-ui-controls/src/dcsl-flex-ui.ts"],"sourcesContent":["import { Component, ElementRef, HostListener, inject, Renderer2, ViewChild } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'lib-flex-panel',\r\n  imports: [],\r\n  templateUrl: './flex-panel.component.html',\r\n  styleUrl: './flex-panel.component.css'\r\n})\r\n\r\nexport class FlexPanelComponent {\r\n  private resizeObserver?: ResizeObserver;\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @ViewChild(\"abc\") comp?: ElementRef<HTMLDivElement>;\r\n\r\n  private renderer = inject(Renderer2);\r\n\r\n  constructor() { }\r\n\r\n  ngAfterViewInit() {\r\n    this.adjustHeight();\r\n\r\n    // ✅ Recalculate on window resize\r\n    if ('ResizeObserver' in window) {\r\n      this.resizeObserver = new ResizeObserver(() => this.adjustHeight());\r\n      this.resizeObserver.observe(document.body);\r\n    }\r\n\r\n    // ✅ Also observe DOM changes that may shift this element\r\n    this.mutationObserver = new MutationObserver(() => this.adjustHeight());\r\n    this.mutationObserver.observe(document.body, {\r\n      attributes: true,\r\n      childList: true,\r\n      subtree: true\r\n    });\r\n\r\n\r\n  }\r\n\r\n  @HostListener('window:resize')\r\n  onWindowResize() {\r\n    this.adjustHeight();\r\n  }\r\n\r\n  private adjustHeight() {\r\n    // const host: HTMLElement = this.el.nativeElement;\r\n    const top = this.comp!.nativeElement.getBoundingClientRect().top;\r\n    const viewportHeight = window.innerHeight;\r\n    const newHeight = viewportHeight - top;\r\n\r\n    this.renderer.setStyle(this.comp?.nativeElement, 'height', `${newHeight}px`);\r\n    this.renderer.setStyle(this.comp?.nativeElement, 'width', '100%');\r\n\r\n    // console.log(host);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    if (this.resizeObserver) {\r\n      this.resizeObserver.disconnect();\r\n    }\r\n    if (this.mutationObserver) {\r\n      this.mutationObserver.disconnect();\r\n    }\r\n  }\r\n}\r\n","<div class=\"stretch-container\" #abc>\r\n    <ng-content></ng-content>\r\n</div>","/*\r\n * Public API Surface of flex-ui-controls\r\n */\r\n\r\n// export * from './lib/flex-ui-controls.service';\r\n// export * from './lib/flex-ui-controls.component';\r\nexport * from './lib/flex-panel/flex-panel.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,kBAAkB,CAAA;AACrB,IAAA,cAAc;AACd,IAAA,gBAAgB;AAEN,IAAA,IAAI;AAEd,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAEpC,IAAA,WAAA,GAAA,EAAgB;IAEhB,eAAe,GAAA;QACb,IAAI,CAAC,YAAY,EAAE;;AAGnB,QAAA,IAAI,gBAAgB,IAAI,MAAM,EAAE;AAC9B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YACnE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC5C;;AAGA,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QACvE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC3C,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE;AACV,SAAA,CAAC;IAGJ;IAGA,cAAc,GAAA;QACZ,IAAI,CAAC,YAAY,EAAE;IACrB;IAEQ,YAAY,GAAA;;AAElB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG;AAChE,QAAA,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW;AACzC,QAAA,MAAM,SAAS,GAAG,cAAc,GAAG,GAAG;AAEtC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA,EAAA,CAAI,CAAC;AAC5E,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,CAAC;;IAGnE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;QAClC;AACA,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;QACpC;IACF;uGAtDW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,qOCT/B,mFAEM,EAAA,MAAA,EAAA,CAAA,8CAAA,CAAA,EAAA,CAAA;;2FDOO,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WACjB,EAAE,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,8CAAA,CAAA,EAAA;wDASO,IAAI,EAAA,CAAA;sBAArB,SAAS;uBAAC,KAAK;gBA2BhB,cAAc,EAAA,CAAA;sBADb,YAAY;uBAAC,eAAe;;;AEvC/B;;AAEG;AAEH;AACA;;ACLA;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class FlexPanelComponent {
+    private resizeObserver?;
+    private mutationObserver?;
+    comp?: ElementRef<HTMLDivElement>;
+    private renderer;
+    constructor();
+    ngAfterViewInit(): void;
+    onWindowResize(): void;
+    private adjustHeight;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlexPanelComponent, "lib-flex-panel", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { FlexPanelComponent };

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@dcsl/flex-ui",
+  "version": "0.0.4",
+  "peerDependencies": {
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/dcsl-flex-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/dcsl-flex-ui.mjs"
+    }
+  }
+}