@alauda/ui 7.3.3-beta.33 → 7.3.3-beta.35

package/fesm2022/alauda-ui.mjs

@@ -332,9 +332,7 @@ class StylesRenderer {
         this.styleElement.innerHTML = styles;
     }
     cleanup() {
-        if (this.styleElement) {
-            this.styleElement.remove();
-        }
+        this.styleElement?.remove();
     }
 }
 class CSSStyleSheetRenderer {
@@ -354,8 +352,11 @@ class CSSStyleSheetRenderer {
         this.styleSheet.replaceSync(styles);
     }
     cleanup() {
-        if (this.styleSheet) {
-            const i = document.adoptedStyleSheets.indexOf(this.styleSheet);
+        if (!this.styleSheet) {
+            return;
+        }
+        const i = document.adoptedStyleSheets.indexOf(this.styleSheet);
+        if (i >= 0) {
             document.adoptedStyleSheets.splice(i, 1);
         }
     }
@@ -9885,6 +9886,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 type: Input
             }] } });
 
+let tableColumnResizableID = 0;
+const resizableBem = buildBem('aui-table-column-resizable');
+const markLineWidth = 1;
+class TableColumnResizableDirective {
+    minWidth = '40px';
+    maxWidth = '80%';
+    renderer2 = inject(Renderer2);
+    tableColumnDefDirective = inject(TableColumnDefDirective);
+    tableComponent = inject(TableComponent);
+    columnElement = inject(ElementRef).nativeElement;
+    containerElement = this.tableComponent.elementRef.nativeElement;
+    hostAttr = `table-column-resizable-${tableColumnResizableID++}`;
+    stylesRenderer = getCompatibleStylesRenderer();
+    resizeSubscription;
+    ngOnInit() {
+        this.containerElement.setAttribute(this.hostAttr, '');
+    }
+    ngAfterViewInit() {
+        const resizeHandle = this.createResizeHandle();
+        this.bindResizable(resizeHandle);
+    }
+    ngOnDestroy() {
+        this.resizeSubscription?.unsubscribe();
+        this.containerElement.removeAttribute(this.hostAttr);
+        this.stylesRenderer.cleanup();
+    }
+    bindResizable(resizeHandle) {
+        const mouseUp$ = fromEvent(document, 'mouseup').pipe(take(1));
+        const mouseMove$ = fromEvent(document, 'mousemove').pipe(takeUntil(mouseUp$));
+        this.resizeSubscription = fromEvent(resizeHandle, 'mousedown')
+            .pipe(switchMap(mouseDownEvent => {
+            mouseDownEvent.preventDefault();
+            mouseDownEvent.stopPropagation();
+            this.renderer2.setStyle(resizeHandle, 'visibility', 'hidden');
+            const resizeRange = this.getResizeRange();
+            const initialMouseX = mouseDownEvent.clientX;
+            const columnWidth = this.getColumnWidth();
+            const columnOffset = this.getColumnOffset();
+            const resizeMarkLine = this.createResizeMarkLine(columnOffset + columnWidth);
+            const resizeOverlay = this.createResizeOverlay();
+            return merge$1(mouseMove$.pipe(map(mouseMoveEvent => () => resizeMarkLine.updateOffset(columnOffset +
+                this.getWidthInRange(resizeRange, columnWidth + mouseMoveEvent.clientX - initialMouseX)))), mouseUp$.pipe(map(mouseUpEvent => () => {
+                this.renderer2.removeStyle(resizeHandle, 'visibility');
+                resizeMarkLine.destroy();
+                resizeOverlay.destroy();
+                this.renderWidthStyles(this.getWidthInRange(resizeRange, columnWidth + mouseUpEvent.clientX - initialMouseX));
+            })));
+        }))
+            .subscribe(exec => {
+            exec();
+        });
+    }
+    createResizeHandle() {
+        const resizeHandle = this.renderer2.createElement('div');
+        this.renderer2.addClass(resizeHandle, resizableBem.element('handle'));
+        this.renderer2.appendChild(this.columnElement, resizeHandle);
+        return resizeHandle;
+    }
+    createResizeMarkLine(initialOffset) {
+        const markLine = this.renderer2.createElement('div');
+        this.renderer2.addClass(markLine, resizableBem.element('mark-line'));
+        this.renderer2.setStyle(markLine, 'left', initialOffset - markLineWidth + 'px');
+        if (this.isStickyLeftBorderColumn()) {
+            this.renderer2.addClass(markLine, 'inStickyBorderElemLeft');
+        }
+        this.renderer2.appendChild(this.containerElement, markLine);
+        return {
+            element: markLine,
+            updateOffset: (offset) => {
+                this.renderer2.setStyle(markLine, 'left', offset - markLineWidth + 'px');
+            },
+            destroy: () => {
+                this.renderer2.removeChild(this.containerElement, markLine);
+            },
+        };
+    }
+    createResizeOverlay() {
+        const resizeOverlay = this.renderer2.createElement('div');
+        this.renderer2.addClass(resizeOverlay, resizableBem.element('overlay'));
+        this.renderer2.appendChild(this.containerElement, resizeOverlay);
+        return {
+            element: resizeOverlay,
+            destroy: () => {
+                this.renderer2.removeChild(this.containerElement, resizeOverlay);
+            },
+        };
+    }
+    getColumnWidth() {
+        return this.columnElement.clientWidth;
+    }
+    getColumnOffset() {
+        return (this.columnElement.getBoundingClientRect().left -
+            this.containerElement.getBoundingClientRect().left);
+    }
+    getWidthInRange([minWidth, maxWidth], width) {
+        return Math.min(Math.max(width, minWidth), maxWidth);
+    }
+    getResizeRange() {
+        const minWidth = this.getActualWidth(this.minWidth);
+        const maxWidth = this.getActualWidth(this.maxWidth);
+        return [minWidth, maxWidth];
+    }
+    getActualWidth(width) {
+        if (typeof width === 'number') {
+            return width;
+        }
+        if (width.endsWith('%')) {
+            return ((this.containerElement.clientWidth * parseInt(width.slice(0, -1))) / 100);
+        }
+        if (width.endsWith('px')) {
+            return parseInt(width.slice(0, -2));
+        }
+        return parseInt(width);
+    }
+    isStickyLeftBorderColumn() {
+        return this.columnElement.classList.contains('aui-table-sticky-border-elem-left');
+    }
+    renderWidthStyles(width) {
+        const className = tableBem.element(`column-${this.tableColumnDefDirective.cssClassFriendlyName}`);
+        const styleString = `[${this.hostAttr}] .${className} {
+      flex: none !important;
+      width: ${width}px !important;
+      min-width: ${width}px !important;
+      max-width: ${width}px !important;
+    }`;
+        this.stylesRenderer.render(styleString);
+        this.tableComponent.updateStickyColumnStyles();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableColumnResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: TableColumnResizableDirective, isStandalone: true, selector: "[auiTableColumnResizable]", inputs: { minWidth: "minWidth", maxWidth: "maxWidth" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableColumnResizableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[auiTableColumnResizable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }] } });
+
 class TableHeaderCellDefDirective extends CdkHeaderCellDef {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableHeaderCellDefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: TableHeaderCellDefDirective, isStandalone: true, selector: "[auiTableHeaderCellDef]", providers: [
@@ -10176,12 +10320,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 args: ['class']
             }] } });
 
+const TABLE_MODULE = [
+    TableComponent,
+    TableRowComponent,
+    TableHeaderRowComponent,
+    TableExpandButtonCellComponent,
+    TableExpandPanelCellComponent,
+    TableCellDirective,
+    TableCellDefDirective,
+    TableHeaderCellDirective,
+    TableRowDefDirective,
+    TableHeaderRowDefDirective,
+    TableHeaderCellDefDirective,
+    TableColumnDefDirective,
+    TableColumnResizableDirective,
+    TablePlaceholderOutletDirective,
+    TablePlaceholderDefDirective,
+    TableScrollWrapperDirective,
+    TableScrollableDirective,
+];
 class TableModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: TableModule, imports: [CommonModule,
-            IconModule,
-            CdkTableModule,
-            TableComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: TableModule, imports: [TableComponent,
             TableRowComponent,
             TableHeaderRowComponent,
             TableExpandButtonCellComponent,
@@ -10193,10 +10353,11 @@ class TableModule {
             TableHeaderRowDefDirective,
             TableHeaderCellDefDirective,
             TableColumnDefDirective,
-            TableScrollableDirective,
+            TableColumnResizableDirective,
             TablePlaceholderOutletDirective,
             TablePlaceholderDefDirective,
-            TableScrollWrapperDirective], exports: [TableComponent,
+            TableScrollWrapperDirective,
+            TableScrollableDirective], exports: [TableComponent,
             TableRowComponent,
             TableHeaderRowComponent,
             TableExpandButtonCellComponent,
@@ -10208,222 +10369,22 @@ class TableModule {
             TableHeaderRowDefDirective,
             TableHeaderCellDefDirective,
             TableColumnDefDirective,
-            TableScrollableDirective,
+            TableColumnResizableDirective,
             TablePlaceholderOutletDirective,
             TablePlaceholderDefDirective,
-            TableScrollWrapperDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableModule, imports: [CommonModule,
-            IconModule,
-            CdkTableModule,
-            TableComponent,
+            TableScrollWrapperDirective,
+            TableScrollableDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableModule, imports: [TableComponent,
             TableRowComponent,
             TableHeaderRowComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        IconModule,
-                        CdkTableModule,
-                        TableComponent,
-                        TableRowComponent,
-                        TableHeaderRowComponent,
-                        TableExpandButtonCellComponent,
-                        TableExpandPanelCellComponent,
-                        TableCellDirective,
-                        TableCellDefDirective,
-                        TableHeaderCellDirective,
-                        TableRowDefDirective,
-                        TableHeaderRowDefDirective,
-                        TableHeaderCellDefDirective,
-                        TableColumnDefDirective,
-                        TableScrollableDirective,
-                        TablePlaceholderOutletDirective,
-                        TablePlaceholderDefDirective,
-                        TableScrollWrapperDirective,
-                    ],
-                    exports: [
-                        TableComponent,
-                        TableRowComponent,
-                        TableHeaderRowComponent,
-                        TableExpandButtonCellComponent,
-                        TableExpandPanelCellComponent,
-                        TableCellDirective,
-                        TableCellDefDirective,
-                        TableHeaderCellDirective,
-                        TableRowDefDirective,
-                        TableHeaderRowDefDirective,
-                        TableHeaderCellDefDirective,
-                        TableColumnDefDirective,
-                        TableScrollableDirective,
-                        TablePlaceholderOutletDirective,
-                        TablePlaceholderDefDirective,
-                        TableScrollWrapperDirective,
-                    ],
+                    imports: [...TABLE_MODULE],
+                    exports: [...TABLE_MODULE],
                 }]
         }] });
-const TABLE_MODULE = [
-    TableComponent,
-    TableRowComponent,
-    TableHeaderRowComponent,
-    TableExpandButtonCellComponent,
-    TableExpandPanelCellComponent,
-    TableCellDirective,
-    TableCellDefDirective,
-    TableHeaderCellDirective,
-    TableRowDefDirective,
-    TableHeaderRowDefDirective,
-    TableHeaderCellDefDirective,
-    TableColumnDefDirective,
-    TableScrollableDirective,
-    TablePlaceholderOutletDirective,
-    TablePlaceholderDefDirective,
-    TableScrollWrapperDirective,
-];
-
-let tableColumnResizableID = 0;
-const resizableBem = buildBem('aui-table-column-resizable');
-const markLineWidth = 1;
-class TableColumnResizableDirective {
-    minWidth = '40px';
-    maxWidth = '80%';
-    renderer2 = inject(Renderer2);
-    tableColumnDefDirective = inject(TableColumnDefDirective);
-    tableComponent = inject(TableComponent);
-    columnElement = inject(ElementRef).nativeElement;
-    containerElement = this.tableComponent.elementRef.nativeElement;
-    hostAttr = `table-column-resizable-${tableColumnResizableID++}`;
-    stylesRenderer = getCompatibleStylesRenderer();
-    resizeSubscription;
-    ngOnInit() {
-        this.containerElement.setAttribute(this.hostAttr, '');
-    }
-    ngAfterViewInit() {
-        const resizeHandle = this.createResizeHandle();
-        this.bindResizable(resizeHandle);
-    }
-    ngOnDestroy() {
-        this.resizeSubscription?.unsubscribe();
-        this.containerElement.removeAttribute(this.hostAttr);
-        this.stylesRenderer.cleanup();
-    }
-    bindResizable(resizeHandle) {
-        this.resizeSubscription = fromEvent(resizeHandle, 'mousedown')
-            .pipe(switchMap(mouseDownEvent => {
-            mouseDownEvent.preventDefault();
-            mouseDownEvent.stopPropagation();
-            this.renderer2.setStyle(resizeHandle, 'visibility', 'hidden');
-            const resizeRange = this.getResizeRange();
-            const initialMouseX = mouseDownEvent.clientX;
-            const columnWidth = this.getColumnWidth();
-            const columnOffset = this.getColumnOffset();
-            const resizeMarkLine = this.createResizeMarkLine(columnOffset + columnWidth);
-            const resizeOverlay = this.createResizeOverlay();
-            const mouseUp$ = fromEvent(document, 'mouseup').pipe(take(1));
-            const mouseMove$ = fromEvent(document, 'mousemove').pipe(takeUntil(mouseUp$));
-            return merge$1(mouseMove$.pipe(map(mouseMoveEvent => () => resizeMarkLine.updateOffset(columnOffset +
-                this.getWidthInRange(resizeRange, columnWidth + mouseMoveEvent.clientX - initialMouseX)))), mouseUp$.pipe(map(mouseUpEvent => () => {
-                this.renderer2.removeStyle(resizeHandle, 'visibility');
-                resizeMarkLine.destroy();
-                resizeOverlay.destroy();
-                this.renderWidthStyles(this.getWidthInRange(resizeRange, columnWidth + mouseUpEvent.clientX - initialMouseX));
-            })));
-        }))
-            .subscribe(exec => {
-            exec();
-        });
-    }
-    createResizeHandle() {
-        const resizeHandle = this.renderer2.createElement('div');
-        this.renderer2.addClass(resizeHandle, resizableBem.element('handle'));
-        this.renderer2.appendChild(this.columnElement, resizeHandle);
-        return resizeHandle;
-    }
-    createResizeMarkLine(initialOffset) {
-        const markLine = this.renderer2.createElement('div');
-        this.renderer2.addClass(markLine, resizableBem.element('mark-line'));
-        this.renderer2.setStyle(markLine, 'left', initialOffset - markLineWidth + 'px');
-        if (this.isStickyLeftBorderColumn()) {
-            this.renderer2.addClass(markLine, 'inStickyBorderElemLeft');
-        }
-        this.renderer2.appendChild(this.containerElement, markLine);
-        return {
-            element: markLine,
-            updateOffset: (offset) => {
-                this.renderer2.setStyle(markLine, 'left', offset - markLineWidth + 'px');
-            },
-            destroy: () => {
-                this.renderer2.removeChild(this.containerElement, markLine);
-            },
-        };
-    }
-    createResizeOverlay() {
-        const resizeOverlay = this.renderer2.createElement('div');
-        this.renderer2.addClass(resizeOverlay, resizableBem.element('overlay'));
-        this.renderer2.appendChild(this.containerElement, resizeOverlay);
-        return {
-            element: resizeOverlay,
-            destroy: () => {
-                this.renderer2.removeChild(this.containerElement, resizeOverlay);
-            },
-        };
-    }
-    getColumnWidth() {
-        return this.columnElement.clientWidth;
-    }
-    getColumnOffset() {
-        return (this.columnElement.getBoundingClientRect().left -
-            this.containerElement.getBoundingClientRect().left);
-    }
-    getWidthInRange([minWidth, maxWidth], width) {
-        return Math.min(Math.max(width, minWidth), maxWidth);
-    }
-    getResizeRange() {
-        const minWidth = this.getActualWidth(this.minWidth);
-        const maxWidth = this.getActualWidth(this.maxWidth);
-        return [minWidth, maxWidth];
-    }
-    getActualWidth(width) {
-        if (typeof width === 'number') {
-            return width;
-        }
-        if (width.endsWith('%')) {
-            return ((this.containerElement.clientWidth * parseInt(width.slice(0, -1))) / 100);
-        }
-        if (width.endsWith('px')) {
-            return parseInt(width.slice(0, -2));
-        }
-        return parseInt(width);
-    }
-    isStickyLeftBorderColumn() {
-        return this.columnElement.classList.contains('aui-table-sticky-border-elem-left');
-    }
-    renderWidthStyles(width) {
-        const className = tableBem.element(`column-${this.tableColumnDefDirective.cssClassFriendlyName}`);
-        const styleString = `[${this.hostAttr}] .${className} {
-      flex: none !important;
-      width: ${width}px !important;
-      min-width: ${width}px !important;
-      max-width: ${width}px !important;
-    }`;
-        this.stylesRenderer.render(styleString);
-        this.tableComponent.updateStickyColumnStyles();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableColumnResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: TableColumnResizableDirective, isStandalone: true, selector: "[auiTableColumnResizable]", inputs: { minWidth: "minWidth", maxWidth: "maxWidth" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TableColumnResizableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[auiTableColumnResizable]',
-                    standalone: true,
-                }]
-        }], propDecorators: { minWidth: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }] } });
 
 class FixedSizeTableVirtualScrollStrategy {
     _rowHeight = 42;