tickera-angular-components 0.0.1-dev.83 → 0.0.1-dev.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4374,16 +4374,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4374
4374
|
type: Input
|
|
4375
4375
|
}] } });
|
|
4376
4376
|
|
|
4377
|
+
const CHARS_PER_LINE = 80;
|
|
4377
4378
|
class TextExpandableComponent {
|
|
4378
4379
|
text;
|
|
4379
4380
|
maxLength = 200;
|
|
4380
4381
|
fontSize = 'base';
|
|
4382
|
+
allowHtml = false;
|
|
4383
|
+
maxLines;
|
|
4381
4384
|
expanded = false;
|
|
4382
4385
|
ngOnChanges() {
|
|
4383
4386
|
this.expanded = false;
|
|
4384
4387
|
}
|
|
4388
|
+
get plainText() {
|
|
4389
|
+
return this.text
|
|
4390
|
+
.replace(/<[^>]*>/g, ' ')
|
|
4391
|
+
.replace(/\s+/g, ' ')
|
|
4392
|
+
.trim();
|
|
4393
|
+
}
|
|
4385
4394
|
get truncated() {
|
|
4386
|
-
return this.
|
|
4395
|
+
return this.plainText.length > this.maxLength;
|
|
4387
4396
|
}
|
|
4388
4397
|
get visibleText() {
|
|
4389
4398
|
if (!this.truncated || this.expanded) {
|
|
@@ -4391,15 +4400,18 @@ class TextExpandableComponent {
|
|
|
4391
4400
|
}
|
|
4392
4401
|
return this.text.slice(0, this.maxLength).trimEnd() + '…';
|
|
4393
4402
|
}
|
|
4403
|
+
get lines() {
|
|
4404
|
+
return this.maxLines ?? Math.max(1, Math.ceil(this.maxLength / CHARS_PER_LINE));
|
|
4405
|
+
}
|
|
4394
4406
|
toggleExpanded() {
|
|
4395
4407
|
this.expanded = !this.expanded;
|
|
4396
4408
|
}
|
|
4397
4409
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextExpandableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TextExpandableComponent, isStandalone: true, selector: "text-expandable", inputs: { text: "text", maxLength: "maxLength", fontSize: "fontSize" }, usesOnChanges: true, ngImport: i0, template: "<p\n
|
|
4410
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TextExpandableComponent, isStandalone: true, selector: "text-expandable", inputs: { text: "text", maxLength: "maxLength", fontSize: "fontSize", allowHtml: "allowHtml", maxLines: "maxLines" }, usesOnChanges: true, ngImport: i0, template: "@if (allowHtml) {\n <div class=\"text-expandable__html\" [ngClass]=\"`text-expandable__html--font-size-${fontSize}`\">\n <div\n class=\"text-expandable__html__content\"\n [class.text-expandable__html__content--clamped]=\"truncated && !expanded\"\n [style.--text-expandable-lines]=\"lines\"\n [innerHTML]=\"text\"\n ></div>\n\n @if (truncated) {\n <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n </button>\n }\n </div>\n} @else {\n <p\n class=\"text-expandable__paragraph\"\n [ngClass]=\"`text-expandable__paragraph--font-size-${fontSize}`\"\n >\n {{ visibleText }}\n\n @if (truncated) {\n <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n </button>\n }\n </p>\n}\n", styles: [".text-expandable__paragraph{line-height:1.625}.text-expandable__paragraph--font-size-xs{font-size:.75rem}.text-expandable__paragraph--font-size-sm{font-size:.875rem}.text-expandable__paragraph--font-size-base{font-size:1rem}.text-expandable__paragraph--font-size-lg{font-size:1.125rem}.text-expandable__paragraph--font-size-xl{font-size:1.25rem}.text-expandable__paragraph--font-size-2xl{font-size:1.5rem}.text-expandable__paragraph--font-size-3xl{font-size:1.875rem}.text-expandable__paragraph--font-size-4xl{font-size:2.25rem}.text-expandable__paragraph--font-size-5xl{font-size:3rem}.text-expandable__paragraph--font-size-6xl{font-size:3.75rem}.text-expandable__html{line-height:1.625}.text-expandable__html--font-size-xs{font-size:.75rem}.text-expandable__html--font-size-sm{font-size:.875rem}.text-expandable__html--font-size-base{font-size:1rem}.text-expandable__html--font-size-lg{font-size:1.125rem}.text-expandable__html--font-size-xl{font-size:1.25rem}.text-expandable__html--font-size-2xl{font-size:1.5rem}.text-expandable__html--font-size-3xl{font-size:1.875rem}.text-expandable__html--font-size-4xl{font-size:2.25rem}.text-expandable__html--font-size-5xl{font-size:3rem}.text-expandable__html--font-size-6xl{font-size:3.75rem}.text-expandable__html__content--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-expandable-lines);overflow:hidden}.text-expandable__toggle{display:inline;margin-left:.25rem;padding:0;border:0;background:transparent;font-size:.875rem;font-weight:600;color:#2563eb;cursor:pointer;vertical-align:baseline}.text-expandable__toggle:hover{color:#1e40af;text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
|
|
4399
4411
|
}
|
|
4400
4412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextExpandableComponent, decorators: [{
|
|
4401
4413
|
type: Component,
|
|
4402
|
-
args: [{ selector: 'text-expandable', standalone: true, imports: [CommonModule, TranslocoModule], template: "<p\n
|
|
4414
|
+
args: [{ selector: 'text-expandable', standalone: true, imports: [CommonModule, TranslocoModule], template: "@if (allowHtml) {\n <div class=\"text-expandable__html\" [ngClass]=\"`text-expandable__html--font-size-${fontSize}`\">\n <div\n class=\"text-expandable__html__content\"\n [class.text-expandable__html__content--clamped]=\"truncated && !expanded\"\n [style.--text-expandable-lines]=\"lines\"\n [innerHTML]=\"text\"\n ></div>\n\n @if (truncated) {\n <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n </button>\n }\n </div>\n} @else {\n <p\n class=\"text-expandable__paragraph\"\n [ngClass]=\"`text-expandable__paragraph--font-size-${fontSize}`\"\n >\n {{ visibleText }}\n\n @if (truncated) {\n <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n </button>\n }\n </p>\n}\n", styles: [".text-expandable__paragraph{line-height:1.625}.text-expandable__paragraph--font-size-xs{font-size:.75rem}.text-expandable__paragraph--font-size-sm{font-size:.875rem}.text-expandable__paragraph--font-size-base{font-size:1rem}.text-expandable__paragraph--font-size-lg{font-size:1.125rem}.text-expandable__paragraph--font-size-xl{font-size:1.25rem}.text-expandable__paragraph--font-size-2xl{font-size:1.5rem}.text-expandable__paragraph--font-size-3xl{font-size:1.875rem}.text-expandable__paragraph--font-size-4xl{font-size:2.25rem}.text-expandable__paragraph--font-size-5xl{font-size:3rem}.text-expandable__paragraph--font-size-6xl{font-size:3.75rem}.text-expandable__html{line-height:1.625}.text-expandable__html--font-size-xs{font-size:.75rem}.text-expandable__html--font-size-sm{font-size:.875rem}.text-expandable__html--font-size-base{font-size:1rem}.text-expandable__html--font-size-lg{font-size:1.125rem}.text-expandable__html--font-size-xl{font-size:1.25rem}.text-expandable__html--font-size-2xl{font-size:1.5rem}.text-expandable__html--font-size-3xl{font-size:1.875rem}.text-expandable__html--font-size-4xl{font-size:2.25rem}.text-expandable__html--font-size-5xl{font-size:3rem}.text-expandable__html--font-size-6xl{font-size:3.75rem}.text-expandable__html__content--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-expandable-lines);overflow:hidden}.text-expandable__toggle{display:inline;margin-left:.25rem;padding:0;border:0;background:transparent;font-size:.875rem;font-weight:600;color:#2563eb;cursor:pointer;vertical-align:baseline}.text-expandable__toggle:hover{color:#1e40af;text-decoration:underline}\n"] }]
|
|
4403
4415
|
}], propDecorators: { text: [{
|
|
4404
4416
|
type: Input,
|
|
4405
4417
|
args: [{ required: true }]
|
|
@@ -4407,6 +4419,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4407
4419
|
type: Input
|
|
4408
4420
|
}], fontSize: [{
|
|
4409
4421
|
type: Input
|
|
4422
|
+
}], allowHtml: [{
|
|
4423
|
+
type: Input
|
|
4424
|
+
}], maxLines: [{
|
|
4425
|
+
type: Input
|
|
4410
4426
|
}] } });
|
|
4411
4427
|
|
|
4412
4428
|
class ShowCardComponent {
|