@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
89 lines • 10.9 kB
JavaScript
import { ChangeDetectorRef, Component, ContentChild, ElementRef, Input, ViewChild, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class LineClampComponent {
constructor(cd) {
this.cd = cd;
this.row = 1;
this.toggleCss = "hx-button is-link is-small";
this.enabled = false;
this.opened = false;
}
ngAfterContentInit() {
setTimeout(() => {
// calc the content height and the box height
const contentElm = this.content.nativeElement;
const contentHeight = parseInt(window
.getComputedStyle(contentElm, undefined)
.getPropertyValue('height'), 10);
this.boxHeight = getLineHeight(contentElm) * this.row;
if (contentHeight > this.boxHeight) {
this.enable();
this.cd.detectChanges();
}
this.box.nativeElement.style.visibility = 'visible';
}, 0);
}
toggle() {
this.opened ? this.close() : this.open();
}
/**
* show more/less 機能を有効にする
*/
enable() {
this.enabled = true;
this.close();
}
open() {
this.opened = true;
// enable clamp
this.box.nativeElement.style['-webkit-line-clamp'] = 'initial';
this.box.nativeElement.style.height = 'auto';
}
close() {
this.opened = false;
// disable clamp
this.box.nativeElement.style['-webkit-line-clamp'] = this.row;
this.box.nativeElement.style.height = this.boxHeight + 'px';
}
}
LineClampComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LineClampComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
LineClampComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LineClampComponent, selector: "hxa-line-clamp", inputs: { row: "row", toggleCss: "toggleCss" }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], viewQueries: [{ propertyName: "box", first: true, predicate: ["box"], descendants: true }], ngImport: i0, template: `
<div #box class="hxa-line-clamp-box">
<ng-content></ng-content>
</div>
<a class="toggle {{toggleCss}}" *ngIf="enabled" (click)=" toggle() ">
{{opened ? 'Show Less' : 'Show More'}}
</a>`, isInline: true, styles: [":host{display:flex;flex-direction:column}:host .toggle{align-self:flex-end}.hxa-line-clamp-box{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;visibility:hidden}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LineClampComponent, decorators: [{
type: Component,
args: [{ selector: 'hxa-line-clamp', template: `
<div #box class="hxa-line-clamp-box">
<ng-content></ng-content>
</div>
<a class="toggle {{toggleCss}}" *ngIf="enabled" (click)=" toggle() ">
{{opened ? 'Show Less' : 'Show More'}}
</a>`, styles: [":host{display:flex;flex-direction:column}:host .toggle{align-self:flex-end}.hxa-line-clamp-box{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;visibility:hidden}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
type: ContentChild,
args: ['content']
}], box: [{
type: ViewChild,
args: ['box']
}], row: [{
type: Input
}], toggleCss: [{
type: Input
}] } });
function getLineHeight(element) {
let lineHeight = parseInt(window.getComputedStyle(element, undefined).getPropertyValue('lineHeight'), 10);
if (isNaN(lineHeight)) {
const clone = element.cloneNode();
clone.innerHTML = '<br>';
element.appendChild(clone);
lineHeight = clone.clientHeight;
element.removeChild(clone);
}
return lineHeight;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluZS1jbGFtcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oeC11aS9zcmMvbGliL2xpbmUtY2xhbXAvbGluZS1jbGFtcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsWUFBWSxFQUNaLFVBQVUsRUFDVixLQUFLLEVBQ0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDOzs7QUFhdkIsTUFBTSxPQUFPLGtCQUFrQjtJQVk3QixZQUFvQixFQUFxQjtRQUFyQixPQUFFLEdBQUYsRUFBRSxDQUFtQjtRQVBoQyxRQUFHLEdBQUcsQ0FBQyxDQUFDO1FBQ1IsY0FBUyxHQUFXLDRCQUE0QixDQUFDO1FBRTFELFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsV0FBTSxHQUFHLEtBQUssQ0FBQztJQUc2QixDQUFDO0lBRTdDLGtCQUFrQjtRQUNoQixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsNkNBQTZDO1lBQzdDLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDO1lBQzlDLE1BQU0sYUFBYSxHQUFHLFFBQVEsQ0FDNUIsTUFBTTtpQkFDSCxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUUsU0FBUyxDQUFDO2lCQUN2QyxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsRUFDN0IsRUFBRSxDQUNILENBQUM7WUFDRixJQUFJLENBQUMsU0FBUyxHQUFHLGFBQWEsQ0FBQyxVQUFVLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO1lBQ3RELElBQUksYUFBYSxHQUFHLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQ2xDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztnQkFDZCxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxDQUFDO2FBQ3pCO1lBQ0QsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxTQUFTLENBQUM7UUFDdEQsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ1IsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRUQ7O09BRUc7SUFDSyxNQUFNO1FBQ1osSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDcEIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2YsQ0FBQztJQUVPLElBQUk7UUFDVixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUVuQixlQUFlO1FBQ2YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLG9CQUFvQixDQUFDLEdBQUcsU0FBUyxDQUFDO1FBQy9ELElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO0lBQy9DLENBQUM7SUFFTyxLQUFLO1FBQ1gsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFFcEIsZ0JBQWdCO1FBQ2hCLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxvQkFBb0IsQ0FBQyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUM7UUFDOUQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztJQUM5RCxDQUFDOztnSEEzRFUsa0JBQWtCO29HQUFsQixrQkFBa0Isa1NBVG5COzs7Ozs7T0FNTDs0RkFHTSxrQkFBa0I7a0JBWDlCLFNBQVM7K0JBQ0UsZ0JBQWdCLFlBQ2hCOzs7Ozs7T0FNTDt3R0FJb0IsT0FBTztzQkFBL0IsWUFBWTt1QkFBQyxTQUFTO2dCQUVMLEdBQUc7c0JBQXBCLFNBQVM7dUJBQUMsS0FBSztnQkFFUCxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSzs7QUF3RFIsU0FBUyxhQUFhLENBQUMsT0FBb0I7SUFDekMsSUFBSSxVQUFVLEdBQUcsUUFBUSxDQUN2QixNQUFNLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLFNBQVMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLFlBQVksQ0FBQyxFQUMxRSxFQUFFLENBQ0gsQ0FBQztJQUNGLElBQUksS0FBSyxDQUFDLFVBQVUsQ0FBQyxFQUFFO1FBQ3JCLE1BQU0sS0FBSyxHQUFHLE9BQU8sQ0FBQyxTQUFTLEVBQWlCLENBQUM7UUFDakQsS0FBSyxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUM7UUFDekIsT0FBTyxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMzQixVQUFVLEdBQUcsS0FBSyxDQUFDLFlBQVksQ0FBQztRQUNoQyxPQUFPLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO0tBQzVCO0lBQ0QsT0FBTyxVQUFVLENBQUM7QUFDcEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQWZ0ZXJDb250ZW50SW5pdCxcclxuICBDaGFuZ2VEZXRlY3RvclJlZixcclxuICBDb21wb25lbnQsXHJcbiAgQ29udGVudENoaWxkLFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgSW5wdXQsXHJcbiAgVmlld0NoaWxkLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdoeGEtbGluZS1jbGFtcCcsXHJcbiAgdGVtcGxhdGU6IGBcclxuICA8ZGl2ICNib3ggY2xhc3M9XCJoeGEtbGluZS1jbGFtcC1ib3hcIj5cclxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICA8L2Rpdj5cclxuICA8YSBjbGFzcz1cInRvZ2dsZSB7e3RvZ2dsZUNzc319XCIgKm5nSWY9XCJlbmFibGVkXCIgKGNsaWNrKT1cIiB0b2dnbGUoKSBcIj5cclxuICB7e29wZW5lZCA/ICdTaG93IExlc3MnIDogJ1Nob3cgTW9yZSd9fVxyXG4gIDwvYT5gLFxyXG4gIHN0eWxlVXJsczogWycuL2xpbmUtY2xhbXAuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIExpbmVDbGFtcENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xyXG4gIEBDb250ZW50Q2hpbGQoJ2NvbnRlbnQnKSBjb250ZW50OiBFbGVtZW50UmVmO1xyXG5cclxuICBAVmlld0NoaWxkKCdib3gnKSBib3g6IEVsZW1lbnRSZWY7XHJcblxyXG4gIEBJbnB1dCgpIHJvdyA9IDE7XHJcbiAgQElucHV0KCkgdG9nZ2xlQ3NzOiBzdHJpbmcgPSBcImh4LWJ1dHRvbiBpcy1saW5rIGlzLXNtYWxsXCI7XHJcblxyXG4gIGVuYWJsZWQgPSBmYWxzZTtcclxuICBvcGVuZWQgPSBmYWxzZTtcclxuICBwcml2YXRlIGJveEhlaWdodDogbnVtYmVyO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkOiBDaGFuZ2VEZXRlY3RvclJlZikge31cclxuXHJcbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xyXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XHJcbiAgICAgIC8vIGNhbGMgdGhlIGNvbnRlbnQgaGVpZ2h0IGFuZCB0aGUgYm94IGhlaWdodFxyXG4gICAgICBjb25zdCBjb250ZW50RWxtID0gdGhpcy5jb250ZW50Lm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICAgIGNvbnN0IGNvbnRlbnRIZWlnaHQgPSBwYXJzZUludChcclxuICAgICAgICB3aW5kb3dcclxuICAgICAgICAgIC5nZXRDb21wdXRlZFN0eWxlKGNvbnRlbnRFbG0sIHVuZGVmaW5lZClcclxuICAgICAgICAgIC5nZXRQcm9wZXJ0eVZhbHVlKCdoZWlnaHQnKSxcclxuICAgICAgICAxMFxyXG4gICAgICApO1xyXG4gICAgICB0aGlzLmJveEhlaWdodCA9IGdldExpbmVIZWlnaHQoY29udGVudEVsbSkgKiB0aGlzLnJvdztcclxuICAgICAgaWYgKGNvbnRlbnRIZWlnaHQgPiB0aGlzLmJveEhlaWdodCkge1xyXG4gICAgICAgIHRoaXMuZW5hYmxlKCk7XHJcbiAgICAgICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKCk7XHJcbiAgICAgIH1cclxuICAgICAgdGhpcy5ib3gubmF0aXZlRWxlbWVudC5zdHlsZS52aXNpYmlsaXR5ID0gJ3Zpc2libGUnO1xyXG4gICAgfSwgMCk7XHJcbiAgfVxyXG5cclxuICB0b2dnbGUoKSB7XHJcbiAgICB0aGlzLm9wZW5lZCA/IHRoaXMuY2xvc2UoKSA6IHRoaXMub3BlbigpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogc2hvdyBtb3JlL2xlc3Mg5qmf6IO944KS5pyJ5Yq544Gr44GZ44KLXHJcbiAgICovXHJcbiAgcHJpdmF0ZSBlbmFibGUoKSB7XHJcbiAgICB0aGlzLmVuYWJsZWQgPSB0cnVlO1xyXG4gICAgdGhpcy5jbG9zZSgpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBvcGVuKCkge1xyXG4gICAgdGhpcy5vcGVuZWQgPSB0cnVlO1xyXG5cclxuICAgIC8vIGVuYWJsZSBjbGFtcFxyXG4gICAgdGhpcy5ib3gubmF0aXZlRWxlbWVudC5zdHlsZVsnLXdlYmtpdC1saW5lLWNsYW1wJ10gPSAnaW5pdGlhbCc7XHJcbiAgICB0aGlzLmJveC5uYXRpdmVFbGVtZW50LnN0eWxlLmhlaWdodCA9ICdhdXRvJztcclxuICB9XHJcblxyXG4gIHByaXZhdGUgY2xvc2UoKSB7XHJcbiAgICB0aGlzLm9wZW5lZCA9IGZhbHNlO1xyXG5cclxuICAgIC8vIGRpc2FibGUgY2xhbXBcclxuICAgIHRoaXMuYm94Lm5hdGl2ZUVsZW1lbnQuc3R5bGVbJy13ZWJraXQtbGluZS1jbGFtcCddID0gdGhpcy5yb3c7XHJcbiAgICB0aGlzLmJveC5uYXRpdmVFbGVtZW50LnN0eWxlLmhlaWdodCA9IHRoaXMuYm94SGVpZ2h0ICsgJ3B4JztcclxuICB9XHJcbn1cclxuXHJcbmZ1bmN0aW9uIGdldExpbmVIZWlnaHQoZWxlbWVudDogSFRNTEVsZW1lbnQpOiBudW1iZXIge1xyXG4gIGxldCBsaW5lSGVpZ2h0ID0gcGFyc2VJbnQoXHJcbiAgICB3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShlbGVtZW50LCB1bmRlZmluZWQpLmdldFByb3BlcnR5VmFsdWUoJ2xpbmVIZWlnaHQnKSxcclxuICAgIDEwXHJcbiAgKTtcclxuICBpZiAoaXNOYU4obGluZUhlaWdodCkpIHtcclxuICAgIGNvbnN0IGNsb25lID0gZWxlbWVudC5jbG9uZU5vZGUoKSBhcyBIVE1MRWxlbWVudDtcclxuICAgIGNsb25lLmlubmVySFRNTCA9ICc8YnI+JztcclxuICAgIGVsZW1lbnQuYXBwZW5kQ2hpbGQoY2xvbmUpO1xyXG4gICAgbGluZUhlaWdodCA9IGNsb25lLmNsaWVudEhlaWdodDtcclxuICAgIGVsZW1lbnQucmVtb3ZlQ2hpbGQoY2xvbmUpO1xyXG4gIH1cclxuICByZXR1cm4gbGluZUhlaWdodDtcclxufVxyXG4iXX0=