@fundamental-ngx/core 0.36.0-rc.19 → 0.36.0-rc.21

package/fesm2015/fundamental-ngx-core-utils.mjs

@@ -1436,30 +1436,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 }]
         }] });
 
-var DefaultTruncateCharCount;
-(function (DefaultTruncateCharCount) {
-    DefaultTruncateCharCount[DefaultTruncateCharCount["MAX"] = 500] = "MAX";
-    DefaultTruncateCharCount[DefaultTruncateCharCount["MIN"] = 300] = "MIN";
-})(DefaultTruncateCharCount || (DefaultTruncateCharCount = {}));
 class TruncateDirective {
     /** @hidden */
-    constructor(_elementRef, _renderer) {
+    constructor(_elementRef) {
         this._elementRef = _elementRef;
-        this._renderer = _renderer;
         /**
          * Truncating state
          */
         this.fdTruncateState = false;
-        /**
-         * Event return count of characters from the target
-         */
-        this.charCountUpdate = new EventEmitter();
+        /** @hidden */
+        this._customWidthCount = 200;
+        this.takeDefaultStyleOnce = true;
     }
     /**
-     * Count chars for truncating
+     * Width in pixel for truncation of an element , by default
      */
-    set fdTruncateChars(value) {
-        this._customCharCount = coerceNumberProperty(value);
+    set fdTruncateWidth(value) {
+        this._customWidthCount = coerceNumberProperty(value);
     }
     /**
      * Root native element
@@ -1467,107 +1460,47 @@ class TruncateDirective {
     get rootElement() {
         return this._elementRef.nativeElement;
     }
-    /** @hidden */
-    ngAfterViewInit() {
-        if (this.rootElement) {
-            this._initTruncate();
-            this.windowResize$ = fromEvent(window, 'resize')
-                .pipe(distinctUntilChanged(), debounceTime(200))
-                .subscribe({
-                next: () => this._checkWidth()
-            });
-            this.refreshTruncate();
+    /**
+     * Method saves default style of target element before first truncate.
+     */
+    setDefaultStyle() {
+        if (this.takeDefaultStyleOnce) {
+            this._defaultStyle = this._truncateTarget.style.cssText;
+            this.takeDefaultStyleOnce = false;
         }
     }
     /** @hidden */
-    ngOnDestroy() {
-        if (this.windowResize$) {
-            this.windowResize$.unsubscribe();
+    ngAfterViewInit() {
+        if (this.rootElement) {
+            this._truncate();
         }
     }
     /** @hidden */
     ngOnChanges() {
-        this.refreshTarget(this);
-        this.reset();
-        this.refreshTruncate();
-    }
-    reset() {
-        if (this._truncateTarget && this._originalText) {
-            this._truncateTarget.textContent = this._originalText + ' ';
-        }
-    }
-    refreshTarget(event) {
-        this._truncateTarget = event.rootElement;
-        this._originalText = event.fdTruncateTargetText;
-        this.reset();
-        this.refreshTruncate();
+        this._truncate();
     }
-    refreshTruncate() {
-        if (this.fdTruncateState && this._hasMore) {
-            this._toggleTruncate();
-        }
-    }
-    /** @hidden
-     *  Initialising truncate properties
-     */
-    _initTruncate() {
-        const style = window.getComputedStyle(this.rootElement, null);
-        this._widthCount = parseInt(style.getPropertyValue('font-size'), 10) * 25;
-        this._checkWidth();
-        if (this._originalText && this._originalText.length > this._maxChars) {
-            this._hasMore = true;
-            this.charCountUpdate.emit(this._hasMore);
-            this._truncate();
-        }
-    }
-    /** @hidden
-     *  Toggle present text
-     */
-    _toggleTruncate() {
-        this._truncateTarget.textContent = this.fdTruncateState ? this._truncatedText : this._originalText;
-    }
-    /** @hidden
-     * Truncate text in the target box, if the target exceeds the number of characters
-     */
     _truncate() {
+        this._truncateTarget = this.rootElement;
         if (!this._truncateTarget) {
             return;
         }
-        const ellipsisTextArray = this._originalText.split('');
-        while (ellipsisTextArray.length >= this._maxChars) {
-            ellipsisTextArray.pop();
-        }
-        this._truncatedText = this._truncateTarget.textContent = ellipsisTextArray.join('') + ' … ';
-    }
-    /** @hidden */
-    _checkWidth() {
-        const width = this.rootElement.offsetWidth;
-        this._maxChars = this._customCharCount
-            ? this._customCharCount
-            : width >= this._widthCount
-                ? DefaultTruncateCharCount.MAX
-                : DefaultTruncateCharCount.MIN;
-        if (this.fdTruncateState && this._hasMore) {
-            this._truncate();
-        }
+        this.setDefaultStyle();
+        this._truncationStyle = `${this._defaultStyle} max-width: ${this._customWidthCount}px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`;
+        this._truncateTarget.style.cssText = this.fdTruncateState ? this._truncationStyle : this._defaultStyle;
     }
 }
-TruncateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TruncateDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TruncateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: TruncateDirective, selector: "[fd-truncate]", inputs: { fdTruncateTargetText: "fdTruncateTargetText", fdTruncateChars: "fdTruncateChars", fdTruncateState: "fdTruncateState" }, outputs: { charCountUpdate: "charCountUpdate" }, usesOnChanges: true, ngImport: i0 });
+TruncateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TruncateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TruncateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: TruncateDirective, selector: "[fd-truncate]", inputs: { fdTruncateWidth: "fdTruncateWidth", fdTruncateState: "fdTruncateState" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[fd-truncate]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { fdTruncateTargetText: [{
-                type: Input
-            }], fdTruncateChars: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fdTruncateWidth: [{
                 type: Input
             }], fdTruncateState: [{
                 type: Input
-            }], charCountUpdate: [{
-                type: Output
             }] } });
 
 class TruncateModule {
@@ -1864,16 +1797,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             args: [{ name: 'isCompactDensity' }]
         }] });
 
+class TruncatePipe {
+    transform(value, limit = 500) {
+        return value && value.length > limit ? value.substring(0, limit) + '...' : value;
+    }
+}
+TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: TruncatePipe, name: "truncate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate'
+                }]
+        }] });
+
 class PipeModule {
 }
 PipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PipeModule, declarations: [DisplayFnPipe, SearchHighlightPipe, TwoDigitsPipe, SafePipe, ValueByPathPipe, IsCompactDensityPipe], exports: [DisplayFnPipe, SearchHighlightPipe, TwoDigitsPipe, SafePipe, ValueByPathPipe, IsCompactDensityPipe] });
+PipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PipeModule, declarations: [DisplayFnPipe,
+        SearchHighlightPipe,
+        TwoDigitsPipe,
+        SafePipe,
+        ValueByPathPipe,
+        IsCompactDensityPipe,
+        TruncatePipe], exports: [DisplayFnPipe,
+        SearchHighlightPipe,
+        TwoDigitsPipe,
+        SafePipe,
+        ValueByPathPipe,
+        IsCompactDensityPipe,
+        TruncatePipe] });
 PipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PipeModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PipeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DisplayFnPipe, SearchHighlightPipe, TwoDigitsPipe, SafePipe, ValueByPathPipe, IsCompactDensityPipe],
-                    exports: [DisplayFnPipe, SearchHighlightPipe, TwoDigitsPipe, SafePipe, ValueByPathPipe, IsCompactDensityPipe]
+                    declarations: [
+                        DisplayFnPipe,
+                        SearchHighlightPipe,
+                        TwoDigitsPipe,
+                        SafePipe,
+                        ValueByPathPipe,
+                        IsCompactDensityPipe,
+                        TruncatePipe
+                    ],
+                    exports: [
+                        DisplayFnPipe,
+                        SearchHighlightPipe,
+                        TwoDigitsPipe,
+                        SafePipe,
+                        ValueByPathPipe,
+                        IsCompactDensityPipe,
+                        TruncatePipe
+                    ]
                 }]
         }] });
 
@@ -3363,5 +3338,5 @@ function applyMixins(derivedCtor, baseCtors) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AutoCompleteDirective, AutoCompleteModule, ContentDensityEnum, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DefaultTruncateCharCount, DestroyedService, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, ELEMENT_REF_EXCEPTION, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, INVALID_DATE_ERROR, IgnoreClickOnSelectionDirective, IgnoreClickOnSelectionModule, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, LocalStorageService, MOBILE_CONFIG_ERROR, ModuleDeprecations, OVERFLOW_PRIORITY_SCORE, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, RTL_LANGUAGE, RangeSelector, ResizeDirective, ResizeHandleDirective, ResizeModule, ResizeObserverFactory, ResizeObserverService, RtlService, SafePipe, SearchHighlightPipe, THEME_SWITCHER_ROUTER_MISSING_ERROR, TemplateDirective, TemplateModule, ThemesService, TruncateDirective, TruncateModule, TwoDigitsPipe, UtilsModule, ValueByPathPipe, applyCssClass, applyCssStyle, applyMixins, consumerProviderFactory, getDocumentFontSize, getElementCapacity, getElementWidth, getRandomColorAccent, intersectionObservable, isCompactDensity, isValidContentDensity, moduleDeprecationsFactory, moduleDeprecationsProvider, parserFileSize, pxToNum, resizeObservable, scrollTop, toNativeElement, uuidv4 };
+export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AutoCompleteDirective, AutoCompleteModule, ContentDensityEnum, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DestroyedService, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, ELEMENT_REF_EXCEPTION, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, INVALID_DATE_ERROR, IgnoreClickOnSelectionDirective, IgnoreClickOnSelectionModule, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, LocalStorageService, MOBILE_CONFIG_ERROR, ModuleDeprecations, OVERFLOW_PRIORITY_SCORE, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, RTL_LANGUAGE, RangeSelector, ResizeDirective, ResizeHandleDirective, ResizeModule, ResizeObserverFactory, ResizeObserverService, RtlService, SafePipe, SearchHighlightPipe, THEME_SWITCHER_ROUTER_MISSING_ERROR, TemplateDirective, TemplateModule, ThemesService, TruncateDirective, TruncateModule, TruncatePipe, TwoDigitsPipe, UtilsModule, ValueByPathPipe, applyCssClass, applyCssStyle, applyMixins, consumerProviderFactory, getDocumentFontSize, getElementCapacity, getElementWidth, getRandomColorAccent, intersectionObservable, isCompactDensity, isValidContentDensity, moduleDeprecationsFactory, moduleDeprecationsProvider, parserFileSize, pxToNum, resizeObservable, scrollTop, toNativeElement, uuidv4 };
 //# sourceMappingURL=fundamental-ngx-core-utils.mjs.map