Merge pull request #7380 from abpframework/refactor/7374

Moved the EllipsisDirective to the @abp/ng.theme.shared and added documentation for the directive

docs/en/UI/Angular/Ellipsis-Directive.md

@@ -0,0 +1,83 @@
+# Ellipsis
+
+Text inside an HTML element can be truncated easily with an ellipsis by using CSS. To make this even easier, you can use the `EllipsisDirective` which has been exposed from the `@abp/ng.theme.shared` package.
+
+
+## Getting Started
+
+In order to use the `EllipsisDirective` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this:
+
+```js
+// ...
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+
+@NgModule({
+  //...
+  imports: [..., ThemeSharedModule],
+})
+export class MyFeatureModule {}
+```
+
+or **if you would not like to import** the `ThemeSharedModule`, you can import the **`EllipsisModule`** as shown below:
+
+
+```js
+// ...
+import { EllipsisModule } from '@abp/ng.theme.shared';
+
+@NgModule({
+  //...
+  imports: [..., EllipsisModule],
+})
+export class MyFeatureModule {}
+```
+
+## Usage
+
+The `EllipsisDirective` is very easy to use. The directive's selector is **`abpEllipsis`**. By adding the `abpEllipsis` attribute to an HTML element, you can activate the `EllipsisDirective` for the HTML element.
+
+See an example usage:
+
+```html
+<p abpEllipsis>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur,
+    corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum
+    cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
+    impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus
+    architecto.
+  </p>
+```
+
+The `abpEllipsis` attribute has been added to the `<p>` element that containing very long text inside to activate the `EllipsisDirective`.
+
+See the result:
+
+![Ellipsis directive result](./images/ellipsis-directive-result1.jpg)
+
+The long text has been truncated by using the directive.
+
+The UI before using the directive looks like this:
+
+![Before using the EllipsisDirective](./images/ellipsis-directive-before.jpg)
+
+### Specifying Max Width of an HTML Element
+
+An HTML element max width can be specified as shown below:
+
+```html
+<div [abpEllipsis]="'100px'">
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
+</div>
+
+<div [abpEllipsis]="'15vw'">
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
+</div>
+
+<div [abpEllipsis]="'50%'">
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
+</div>
+```
+
+See the result:
+
+![Ellipsis directive result 2](./images/ellipsis-directive-result2.jpg)

docs/en/docs-nav.json

@@ -830,6 +830,10 @@
                 {
                   "text": "Page Alerts",
                   "path": "UI/Angular/Page-Alerts.md"
+                },
+                {
+                  "text": "Ellipsis",
+                  "path": "UI/Angular/Ellipsis-Directive.md"
                 }
               ]
             },

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -11,7 +11,6 @@ import { ReplaceableRouteContainerComponent } from './components/replaceable-rou
 import { RouterOutletComponent } from './components/router-outlet.component';
 import { AutofocusDirective } from './directives/autofocus.directive';
 import { InputEventDebounceDirective } from './directives/debounce.directive';
-import { EllipsisDirective } from './directives/ellipsis.directive';
 import { ForDirective } from './directives/for.directive';
 import { FormSubmitDirective } from './directives/form-submit.directive';
 import { InitDirective } from './directives/init.directive';
@@ -53,11 +52,9 @@ export function storageFactory(): OAuthStorage {
     ReactiveFormsModule,
     RouterModule,
     LocalizationModule,
-
     AbstractNgModelComponent,
     AutofocusDirective,
     DynamicLayoutComponent,
-    EllipsisDirective,
     ForDirective,
     FormSubmitDirective,
     InitDirective,
@@ -83,7 +80,6 @@ export function storageFactory(): OAuthStorage {
     AbstractNgModelComponent,
     AutofocusDirective,
     DynamicLayoutComponent,
-    EllipsisDirective,
     ForDirective,
     FormSubmitDirective,
     InitDirective,

npm/ng-packs/packages/core/src/lib/directives/index.ts

@@ -1,6 +1,5 @@
 export * from './autofocus.directive';
 export * from './debounce.directive';
-export * from './ellipsis.directive';
 export * from './for.directive';
 export * from './form-submit.directive';
 export * from './init.directive';

npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts

@@ -0,0 +1,52 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  HostBinding,
+  Input,
+  NgModule,
+} from '@angular/core';
+
+@Directive({
+  selector: '[abpEllipsis]',
+})
+export class EllipsisDirective implements AfterViewInit {
+  @Input('abpEllipsis')
+  width: string;
+
+  @HostBinding('title')
+  @Input()
+  title: string;
+
+  @Input('abpEllipsisEnabled')
+  enabled = true;
+
+  @HostBinding('class.abp-ellipsis-inline')
+  get inlineClass() {
+    return this.enabled && this.width;
+  }
+
+  @HostBinding('class.abp-ellipsis')
+  get class() {
+    return this.enabled && !this.width;
+  }
+
+  @HostBinding('style.max-width')
+  get maxWidth() {
+    return this.enabled && this.width ? this.width || '170px' : undefined;
+  }
+
+  constructor(private cdRef: ChangeDetectorRef, private elRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    this.title = this.title || (this.elRef.nativeElement as HTMLElement).innerText;
+    this.cdRef.detectChanges();
+  }
+}
+
+@NgModule({
+  exports: [EllipsisDirective],
+  declarations: [EllipsisDirective],
+})
+export class EllipsisModule {}

npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts

@@ -2,3 +2,4 @@ export * from './loading.directive';
 export * from './ngx-datatable-default.directive';
 export * from './ngx-datatable-list.directive';
 export * from './table-sort.directive';
+export * from './ellipsis.directive';

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -25,6 +25,7 @@ import { TableComponent } from './components/table/table.component';
 import { ToastContainerComponent } from './components/toast-container/toast-container.component';
 import { ToastComponent } from './components/toast/toast.component';
 import { DEFAULT_VALIDATION_BLUEPRINTS } from './constants/validation';
+import { EllipsisModule } from './directives/ellipsis.directive';
 import { LoadingDirective } from './directives/loading.directive';
 import { NgxDatatableDefaultDirective } from './directives/ngx-datatable-default.directive';
 import { NgxDatatableListDirective } from './directives/ngx-datatable-list.directive';
@@ -57,9 +58,15 @@ const declarationsWithExports = [
 ];
 
 @NgModule({
-  imports: [CoreModule, NgxDatatableModule, NgxValidateCoreModule, NgbPaginationModule],
+  imports: [
+    CoreModule,
+    NgxDatatableModule,
+    NgxValidateCoreModule,
+    NgbPaginationModule,
+    EllipsisModule,
+  ],
   declarations: [...declarationsWithExports, HttpErrorWrapperComponent, ModalContainerComponent],
-  exports: [NgxDatatableModule, ...declarationsWithExports],
+  exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
   providers: [DatePipe],
   entryComponents: [
     HttpErrorWrapperComponent,