@koobiq/components 16.0.0-beta.1

package/fesm2022/koobiq-components-dl.mjs

@@ -0,0 +1,126 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import { PlatformModule } from '@angular/cdk/platform';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Input, NgModule } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+class KbqDlComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.minWidth = 400;
+        this.wide = false;
+        this.small = false;
+        this.vertical = null;
+        this.resizeStream = new Subject();
+        this.resizeDebounceInterval = 100;
+        this.resizeSubscription = Subscription.EMPTY;
+        this.updateState = () => {
+            const { width } = this.elementRef.nativeElement.getClientRects()[0];
+            this.vertical = width <= this.minWidth;
+        };
+    }
+    ngAfterContentInit() {
+        if (this.vertical !== null) {
+            return;
+        }
+        this.resizeSubscription = this.resizeStream
+            .pipe(debounceTime(this.resizeDebounceInterval))
+            .subscribe(this.updateState);
+    }
+    ngOnDestroy() {
+        this.resizeSubscription.unsubscribe();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqDlComponent, selector: "kbq-dl", inputs: { minWidth: "minWidth", wide: "wide", small: "small", vertical: "vertical" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-dl_vertical": "vertical", "class.kbq-dl_wide": "wide", "class.kbq-dl_small": "small" }, classAttribute: "kbq-dl" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-default-horizontal-column-gap, 16px);row-gap:var(--kbq-description-list-size-default-horizontal-row-gap, 12px);grid-template-columns:repeat(4,1fr)}.kbq-dl .kbq-dt{grid-column:var(--kbq-description-list-size-dt-grid-column, 1)}.kbq-dl .kbq-dd{grid-column:var(--kbq-description-list-size-dd-grid-column, 2/span 3)}.kbq-dl.kbq-dl_small{column-gap:var(--kbq-description-list-size-small-horizontal-column-gap, 8px);row-gap:var(--kbq-description-list-size-small-horizontal-row-gap, 8px)}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);column-gap:var(--kbq-description-list-size-default-vertical-column-gap, 0);row-gap:var(--kbq-description-list-size-default-vertical-row-gap, 2px)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd{margin-bottom:var(--kbq-description-list-size-default-vertical-dd-margin-bottom, 16px)}.kbq-dl.kbq-dl_vertical.kbq-dl_small{column-gap:var(--kbq-description-list-size-small-vertical-column-gap, 0);row-gap:var(--kbq-description-list-size-small-vertical-row-gap, 0)}.kbq-dl.kbq-dl_vertical.kbq-dl_small .kbq-dd{margin-bottom:var(--kbq-description-list-size-small-vertical-dd-margin-bottom, 12px)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-dl', template: '<ng-content></ng-content>', host: {
+                        class: 'kbq-dl',
+                        '[class.kbq-dl_vertical]': 'vertical',
+                        '[class.kbq-dl_wide]': 'wide',
+                        '[class.kbq-dl_small]': 'small',
+                        '(window:resize)': 'resizeStream.next($event)'
+                    }, encapsulation: ViewEncapsulation.None, styles: [".kbq-dl{display:grid;column-gap:var(--kbq-description-list-size-default-horizontal-column-gap, 16px);row-gap:var(--kbq-description-list-size-default-horizontal-row-gap, 12px);grid-template-columns:repeat(4,1fr)}.kbq-dl .kbq-dt{grid-column:var(--kbq-description-list-size-dt-grid-column, 1)}.kbq-dl .kbq-dd{grid-column:var(--kbq-description-list-size-dd-grid-column, 2/span 3)}.kbq-dl.kbq-dl_small{column-gap:var(--kbq-description-list-size-small-horizontal-column-gap, 8px);row-gap:var(--kbq-description-list-size-small-horizontal-row-gap, 8px)}.kbq-dl.kbq-dl_wide{grid-template-columns:repeat(2,1fr)}.kbq-dl.kbq-dl_wide .kbq-dt{grid-column:1}.kbq-dl.kbq-dl_wide .kbq-dd{grid-column:2}.kbq-dl.kbq-dl_vertical{grid-template-columns:repeat(1,1fr);column-gap:var(--kbq-description-list-size-default-vertical-column-gap, 0);row-gap:var(--kbq-description-list-size-default-vertical-row-gap, 2px)}.kbq-dl.kbq-dl_vertical .kbq-dt,.kbq-dl.kbq-dl_vertical .kbq-dd{grid-column:1}.kbq-dl.kbq-dl_vertical .kbq-dd{margin-bottom:var(--kbq-description-list-size-default-vertical-dd-margin-bottom, 16px)}.kbq-dl.kbq-dl_vertical.kbq-dl_small{column-gap:var(--kbq-description-list-size-small-vertical-column-gap, 0);row-gap:var(--kbq-description-list-size-small-vertical-row-gap, 0)}.kbq-dl.kbq-dl_vertical.kbq-dl_small .kbq-dd{margin-bottom:var(--kbq-description-list-size-small-vertical-dd-margin-bottom, 12px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { minWidth: [{
+                type: Input
+            }], wide: [{
+                type: Input
+            }], small: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }] } });
+class KbqDtComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDtComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqDtComponent, selector: "kbq-dt", host: { classAttribute: "kbq-dt" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDtComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-dt',
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        class: 'kbq-dt'
+                    },
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }] });
+class KbqDdComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqDdComponent, selector: "kbq-dd", host: { classAttribute: "kbq-dd" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDdComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-dd',
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        class: 'kbq-dd'
+                    },
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }] });
+
+class KbqDlModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqDlModule, declarations: [KbqDlComponent,
+            KbqDtComponent,
+            KbqDdComponent], imports: [CommonModule,
+            A11yModule,
+            PlatformModule], exports: [KbqDlComponent,
+            KbqDtComponent,
+            KbqDdComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDlModule, imports: [CommonModule,
+            A11yModule,
+            PlatformModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        PlatformModule
+                    ],
+                    exports: [
+                        KbqDlComponent,
+                        KbqDtComponent,
+                        KbqDdComponent
+                    ],
+                    declarations: [
+                        KbqDlComponent,
+                        KbqDtComponent,
+                        KbqDdComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqDdComponent, KbqDlComponent, KbqDlModule, KbqDtComponent };
+//# sourceMappingURL=koobiq-components-dl.mjs.map

package/fesm2022/koobiq-components-dl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koobiq-components-dl.mjs","sources":["../../../packages/components/dl/dl.component.ts","../../../packages/components/dl/dl.module.ts","../../../packages/components/dl/koobiq-components-dl.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    Component,\n    ElementRef,\n    Input,\n    OnDestroy,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n\n@Component({\n    selector: 'kbq-dl',\n    template: '<ng-content></ng-content>',\n    styleUrls: ['dl.scss'],\n    host: {\n        class: 'kbq-dl',\n        '[class.kbq-dl_vertical]': 'vertical',\n        '[class.kbq-dl_wide]': 'wide',\n        '[class.kbq-dl_small]': 'small',\n        '(window:resize)': 'resizeStream.next($event)'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDlComponent implements AfterContentInit, OnDestroy {\n    @Input() minWidth: number = 400;\n    @Input() wide = false;\n    @Input() small = false;\n    @Input() vertical: boolean | null = null;\n\n    readonly resizeStream = new Subject<Event>();\n    private readonly resizeDebounceInterval: number = 100;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    constructor(protected elementRef: ElementRef) {}\n\n    ngAfterContentInit(): void {\n        if (this.vertical !== null) { return; }\n\n        this.resizeSubscription = this.resizeStream\n            .pipe(debounceTime(this.resizeDebounceInterval))\n            .subscribe(this.updateState);\n    }\n\n    ngOnDestroy() {\n        this.resizeSubscription.unsubscribe();\n    }\n\n    updateState = () => {\n        const { width } = this.elementRef.nativeElement.getClientRects()[0];\n\n        this.vertical = width <= this.minWidth;\n    }\n}\n\n@Component({\n    selector: 'kbq-dt',\n    template: '<ng-content></ng-content>',\n    host: {\n        class: 'kbq-dt'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDtComponent {}\n\n@Component({\n    selector: 'kbq-dd',\n    template: '<ng-content></ng-content>',\n    host: {\n        class: 'kbq-dd'\n    },\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqDdComponent {}\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport {\n    KbqDlComponent,\n    KbqDtComponent,\n    KbqDdComponent\n} from './dl.component';\n\n\n@NgModule({\n    imports: [\n        CommonModule,\n        A11yModule,\n        PlatformModule\n    ],\n    exports: [\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ],\n    declarations: [\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ]\n})\nexport class KbqDlModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}