diff --git a/docs/en/UI/Angular/Ellipsis-Directive.md b/docs/en/UI/Angular/Ellipsis-Directive.md
new file mode 100644
index 0000000000..29335969c1
--- /dev/null
+++ b/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
+
+ 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.
+
+```
+
+The `abpEllipsis` attribute has been added to the `` element that containing very long text inside to activate the `EllipsisDirective`.
+
+See the result:
+
+
+
+The long text has been truncated by using the directive.
+
+The UI before using the directive looks like this:
+
+
+
+### Specifying Max Width of an HTML Element
+
+An HTML element max width can be specified as shown below:
+
+```html
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
+
+```
+
+See the result:
+
+
\ No newline at end of file
diff --git a/docs/en/UI/Angular/images/ellipsis-directive-before.jpg b/docs/en/UI/Angular/images/ellipsis-directive-before.jpg
new file mode 100644
index 0000000000..dc534d9a97
Binary files /dev/null and b/docs/en/UI/Angular/images/ellipsis-directive-before.jpg differ
diff --git a/docs/en/UI/Angular/images/ellipsis-directive-result1.jpg b/docs/en/UI/Angular/images/ellipsis-directive-result1.jpg
new file mode 100644
index 0000000000..fe693f4c8c
Binary files /dev/null and b/docs/en/UI/Angular/images/ellipsis-directive-result1.jpg differ
diff --git a/docs/en/UI/Angular/images/ellipsis-directive-result2.jpg b/docs/en/UI/Angular/images/ellipsis-directive-result2.jpg
new file mode 100644
index 0000000000..3a416bbc05
Binary files /dev/null and b/docs/en/UI/Angular/images/ellipsis-directive-result2.jpg differ
diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
index 3fff6d67c1..3337521b89 100644
--- a/docs/en/docs-nav.json
+++ b/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"
}
]
},
diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts
index 260cffd4d3..36d59c929b 100644
--- a/npm/ng-packs/packages/core/src/lib/core.module.ts
+++ b/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,
diff --git a/npm/ng-packs/packages/core/src/lib/directives/index.ts b/npm/ng-packs/packages/core/src/lib/directives/index.ts
index a297faa14b..3322b14257 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/index.ts
+++ b/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';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts
new file mode 100644
index 0000000000..6a2ea1ea09
--- /dev/null
+++ b/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 {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
index a6b666be3b..64b849d4fe 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/index.ts
+++ b/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';
diff --git a/npm/ng-packs/packages/core/src/lib/tests/ellipsis.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/ellipsis.directive.spec.ts
similarity index 100%
rename from npm/ng-packs/packages/core/src/lib/tests/ellipsis.directive.spec.ts
rename to npm/ng-packs/packages/theme-shared/src/lib/tests/ellipsis.directive.spec.ts
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index 8d64febdbf..8d8f08ea6b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/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,