@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
32 lines • 5.22 kB
JavaScript
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../popover/popover.directive";
import * as i3 from "./truncate.pipe";
import * as i4 from "@spartacus/core";
export class TruncateTextPopoverComponent {
constructor() {
/**
* The maximum length of the characters after which the text will be truncated
*/
this.charactersLimit = 100;
}
get isTruncated() {
return this.content.length > +this.charactersLimit;
}
}
TruncateTextPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TruncateTextPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TruncateTextPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TruncateTextPopoverComponent, selector: "cx-truncate-text-popover", inputs: { content: "content", charactersLimit: "charactersLimit" }, ngImport: i0, template: "<ng-container>\n <ng-container>\n <span class=\"truncated-text\">\n {{ content | cxTruncate: [charactersLimit] }}\n </span>\n </ng-container>\n\n <ng-template #fullText>\n {{ content }}\n </ng-template>\n\n <button\n *ngIf=\"isTruncated\"\n [cxPopover]=\"fullText\"\n [cxPopoverOptions]=\"{\n placement: 'auto',\n appendToBody: true,\n displayCloseButton: true\n }\"\n class=\"ml-1 link cx-action-link\"\n >\n {{ 'common.more' | cxTranslate }}\n </button>\n</ng-container>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.PopoverDirective, selector: "[cxPopover]", inputs: ["cxPopover", "cxPopoverOptions"], outputs: ["openPopover", "closePopover"] }], pipes: { "cxTruncate": i3.TruncatePipe, "cxTranslate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: TruncateTextPopoverComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-truncate-text-popover',
templateUrl: './truncate-text-popover.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { content: [{
type: Input
}], charactersLimit: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJ1bmNhdGUtdGV4dC1wb3BvdmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvc2hhcmVkL2NvbXBvbmVudHMvdHJ1bmNhdGUtdGV4dC1wb3BvdmVyL3RydW5jYXRlLXRleHQtcG9wb3Zlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL3NoYXJlZC9jb21wb25lbnRzL3RydW5jYXRlLXRleHQtcG9wb3Zlci90cnVuY2F0ZS10ZXh0LXBvcG92ZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSx1QkFBdUIsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7OztBQU8xRSxNQUFNLE9BQU8sNEJBQTRCO0lBTHpDO1FBV0U7O1dBRUc7UUFDTSxvQkFBZSxHQUFXLEdBQUcsQ0FBQztLQUt4QztJQUhDLElBQUksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDO0lBQ3JELENBQUM7O3lIQWJVLDRCQUE0Qjs2R0FBNUIsNEJBQTRCLG9JQ1B6QyxraEJBd0JBOzJGRGpCYSw0QkFBNEI7a0JBTHhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDBCQUEwQjtvQkFDcEMsV0FBVyxFQUFFLHdDQUF3QztvQkFDckQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQ2hEOzhCQUtVLE9BQU87c0JBQWYsS0FBSztnQkFLRyxlQUFlO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3gtdHJ1bmNhdGUtdGV4dC1wb3BvdmVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RydW5jYXRlLXRleHQtcG9wb3Zlci5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUcnVuY2F0ZVRleHRQb3BvdmVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFN0cmluZyB0byBiZSByZW5kZXJlZCBpbnNpZGUgcG9wb3ZlciB3cmFwcGVyIGNvbXBvbmVudC5cbiAgICovXG4gIEBJbnB1dCgpIGNvbnRlbnQ6IHN0cmluZztcblxuICAvKipcbiAgICogVGhlIG1heGltdW0gbGVuZ3RoIG9mIHRoZSBjaGFyYWN0ZXJzIGFmdGVyIHdoaWNoIHRoZSB0ZXh0IHdpbGwgYmUgdHJ1bmNhdGVkXG4gICAqL1xuICBASW5wdXQoKSBjaGFyYWN0ZXJzTGltaXQ6IG51bWJlciA9IDEwMDtcblxuICBnZXQgaXNUcnVuY2F0ZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuY29udGVudC5sZW5ndGggPiArdGhpcy5jaGFyYWN0ZXJzTGltaXQ7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXI+XG4gICAgPHNwYW4gY2xhc3M9XCJ0cnVuY2F0ZWQtdGV4dFwiPlxuICAgICAge3sgY29udGVudCB8IGN4VHJ1bmNhdGU6IFtjaGFyYWN0ZXJzTGltaXRdIH19XG4gICAgPC9zcGFuPlxuICA8L25nLWNvbnRhaW5lcj5cblxuICA8bmctdGVtcGxhdGUgI2Z1bGxUZXh0PlxuICAgIHt7IGNvbnRlbnQgfX1cbiAgPC9uZy10ZW1wbGF0ZT5cblxuICA8YnV0dG9uXG4gICAgKm5nSWY9XCJpc1RydW5jYXRlZFwiXG4gICAgW2N4UG9wb3Zlcl09XCJmdWxsVGV4dFwiXG4gICAgW2N4UG9wb3Zlck9wdGlvbnNdPVwie1xuICAgICAgcGxhY2VtZW50OiAnYXV0bycsXG4gICAgICBhcHBlbmRUb0JvZHk6IHRydWUsXG4gICAgICBkaXNwbGF5Q2xvc2VCdXR0b246IHRydWVcbiAgICB9XCJcbiAgICBjbGFzcz1cIm1sLTEgbGluayBjeC1hY3Rpb24tbGlua1wiXG4gID5cbiAgICB7eyAnY29tbW9uLm1vcmUnIHwgY3hUcmFuc2xhdGUgfX1cbiAgPC9idXR0b24+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==