ang-readmore/esm2015/lib/ang-readmore.component.js

This is a simple angular component to add "read more"/"read less" links to your long sentenses/paragraphs.

/**
 * @fileoverview added by tsickle
 * Generated from: lib/ang-readmore.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, Input } from "@angular/core";
export class AngReadmoreComponent {
    constructor() {
        this.show = true;
        this.showReadMore = true;
        this.text = "NO-TEXT";
        this.length = 20;
        this.linkColor = "#26A69A";
        this.isCollapsed = true;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.stringToShow = this.text;
        if (this.text.length > this.length) {
            this.stringToShow = this.text.slice(0, this.length - 1) + "...";
        }
        else {
            this.showReadMore = false;
        }
        if (this.text.length === 0) {
            this.show = false;
        }
    }
    /**
     * @return {?}
     */
    toggle() {
        this.isCollapsed = !this.isCollapsed;
        if (this.isCollapsed) {
            this.stringToShow = this.text.slice(0, this.length - 1) + "...";
        }
        else {
            this.stringToShow = this.text;
        }
    }
}
AngReadmoreComponent.decorators = [
    { type: Component, args: [{
                selector: "ang-readmore",
                template: `
    <p *ngIf="show">
      {{ stringToShow }}
      <span *ngIf="showReadMore" (click)="toggle()" [style.color]="linkColor">{{
        isCollapsed ? "read more" : "read less"
      }}</span>
    </p>
  `,
                styles: ["span{cursor: pointer;} p{white-space: pre-line;}"]
            }] }
];
AngReadmoreComponent.propDecorators = {
    text: [{ type: Input }],
    length: [{ type: Input }],
    linkColor: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    AngReadmoreComponent.prototype.show;
    /** @type {?} */
    AngReadmoreComponent.prototype.showReadMore;
    /** @type {?} */
    AngReadmoreComponent.prototype.stringToShow;
    /** @type {?} */
    AngReadmoreComponent.prototype.text;
    /** @type {?} */
    AngReadmoreComponent.prototype.length;
    /** @type {?} */
    AngReadmoreComponent.prototype.linkColor;
    /** @type {?} */
    AngReadmoreComponent.prototype.isCollapsed;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5nLXJlYWRtb3JlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZy1yZWFkbW9yZS8iLCJzb3VyY2VzIjpbImxpYi9hbmctcmVhZG1vcmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFjekQsTUFBTSxPQUFPLG9CQUFvQjtJQVpqQztRQWFFLFNBQUksR0FBRyxJQUFJLENBQUM7UUFDWixpQkFBWSxHQUFHLElBQUksQ0FBQztRQUVYLFNBQUksR0FBRyxTQUFTLENBQUM7UUFDakIsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLGNBQVMsR0FBRyxTQUFTLENBQUM7UUFDL0IsZ0JBQVcsR0FBRyxJQUFJLENBQUM7SUF3QnJCLENBQUM7Ozs7SUF0QkMsUUFBUTtRQUNOLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztRQUM5QixJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDbEMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsR0FBRyxLQUFLLENBQUM7U0FDakU7YUFBTTtZQUNMLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1NBQzNCO1FBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUU7WUFDMUIsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7U0FDbkI7SUFDSCxDQUFDOzs7O0lBRUQsTUFBTTtRQUNKLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDO1FBRXJDLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQztTQUNqRTthQUFNO1lBQ0wsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1NBQy9CO0lBQ0gsQ0FBQzs7O1lBMUNGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsY0FBYztnQkFDeEIsUUFBUSxFQUFFOzs7Ozs7O0dBT1Q7eUJBQ1Esa0RBQWtEO2FBQzVEOzs7bUJBS0UsS0FBSztxQkFDTCxLQUFLO3dCQUNMLEtBQUs7Ozs7SUFMTixvQ0FBWTs7SUFDWiw0Q0FBb0I7O0lBQ3BCLDRDQUFhOztJQUNiLG9DQUEwQjs7SUFDMUIsc0NBQXFCOztJQUNyQix5Q0FBK0I7O0lBQy9CLDJDQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJhbmctcmVhZG1vcmVcIixcbiAgdGVtcGxhdGU6IGBcbiAgICA8cCAqbmdJZj1cInNob3dcIj5cbiAgICAgIHt7IHN0cmluZ1RvU2hvdyB9fVxuICAgICAgPHNwYW4gKm5nSWY9XCJzaG93UmVhZE1vcmVcIiAoY2xpY2spPVwidG9nZ2xlKClcIiBbc3R5bGUuY29sb3JdPVwibGlua0NvbG9yXCI+e3tcbiAgICAgICAgaXNDb2xsYXBzZWQgPyBcInJlYWQgbW9yZVwiIDogXCJyZWFkIGxlc3NcIlxuICAgICAgfX08L3NwYW4+XG4gICAgPC9wPlxuICBgLFxuICBzdHlsZXM6IFtcInNwYW57Y3Vyc29yOiBwb2ludGVyO30gcHt3aGl0ZS1zcGFjZTogcHJlLWxpbmU7fVwiXSxcbn0pXG5leHBvcnQgY2xhc3MgQW5nUmVhZG1vcmVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBzaG93ID0gdHJ1ZTtcbiAgc2hvd1JlYWRNb3JlID0gdHJ1ZTtcbiAgc3RyaW5nVG9TaG93O1xuICBASW5wdXQoKSB0ZXh0ID0gXCJOTy1URVhUXCI7XG4gIEBJbnB1dCgpIGxlbmd0aCA9IDIwO1xuICBASW5wdXQoKSBsaW5rQ29sb3IgPSBcIiMyNkE2OUFcIjtcbiAgaXNDb2xsYXBzZWQgPSB0cnVlO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc3RyaW5nVG9TaG93ID0gdGhpcy50ZXh0O1xuICAgIGlmICh0aGlzLnRleHQubGVuZ3RoID4gdGhpcy5sZW5ndGgpIHtcbiAgICAgIHRoaXMuc3RyaW5nVG9TaG93ID0gdGhpcy50ZXh0LnNsaWNlKDAsIHRoaXMubGVuZ3RoIC0gMSkgKyBcIi4uLlwiO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNob3dSZWFkTW9yZSA9IGZhbHNlO1xuICAgIH1cblxuICAgIGlmICh0aGlzLnRleHQubGVuZ3RoID09PSAwKSB7XG4gICAgICB0aGlzLnNob3cgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICB0b2dnbGUoKSB7XG4gICAgdGhpcy5pc0NvbGxhcHNlZCA9ICF0aGlzLmlzQ29sbGFwc2VkO1xuXG4gICAgaWYgKHRoaXMuaXNDb2xsYXBzZWQpIHtcbiAgICAgIHRoaXMuc3RyaW5nVG9TaG93ID0gdGhpcy50ZXh0LnNsaWNlKDAsIHRoaXMubGVuZ3RoIC0gMSkgKyBcIi4uLlwiO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnN0cmluZ1RvU2hvdyA9IHRoaXMudGV4dDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==