@agorapulse/ui-components 15.1.18 → 15.1.20
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.
- package/agorapulse-ui-components-15.1.20.tgz +0 -0
- package/directives/truncate-tooltip.directive.d.ts +6 -6
- package/esm2020/directives/truncate-tooltip.directive.mjs +17 -18
- package/esm2020/index.mjs +2 -2
- package/esm2020/infobox/infobox.component.mjs +51 -18
- package/esm2020/labels/label.component.mjs +5 -7
- package/esm2020/src/lib/agorapulse-ui-components.module.mjs +6 -9
- package/esm2020/tooltip/agorapulse-ui-components-tooltip.mjs +5 -0
- package/esm2020/tooltip/public_api.mjs +2 -0
- package/esm2020/tooltip/tooltip.directive.mjs +355 -0
- package/esm2020/tooltip/tooltip.service.mjs +29 -0
- package/fesm2015/agorapulse-ui-components-directives.mjs +16 -14
- package/fesm2015/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-infobox.mjs +47 -17
- package/fesm2015/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-labels.mjs +4 -6
- package/fesm2015/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-tooltip.mjs +388 -0
- package/fesm2015/agorapulse-ui-components-tooltip.mjs.map +1 -0
- package/fesm2015/agorapulse-ui-components.mjs +6 -9
- package/fesm2015/agorapulse-ui-components.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-directives.mjs +16 -17
- package/fesm2020/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-infobox.mjs +47 -17
- package/fesm2020/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-labels.mjs +4 -6
- package/fesm2020/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-tooltip.mjs +388 -0
- package/fesm2020/agorapulse-ui-components-tooltip.mjs.map +1 -0
- package/fesm2020/agorapulse-ui-components.mjs +6 -9
- package/fesm2020/agorapulse-ui-components.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/infobox/infobox.component.d.ts +20 -6
- package/package.json +8 -8
- package/src/lib/agorapulse-ui-components.module.d.ts +2 -2
- package/{tooltip-neo → tooltip}/index.d.ts +1 -1
- package/tooltip/public_api.d.ts +1 -0
- package/tooltip/tooltip.directive.d.ts +54 -0
- package/tooltip/tooltip.service.d.ts +11 -0
- package/agorapulse-ui-components-15.1.18.tgz +0 -0
- package/directives/truncate-tooltip.model.d.ts +0 -5
- package/esm2020/directives/truncate-tooltip.model.mjs +0 -2
- package/esm2020/tooltip-neo/agorapulse-ui-components-tooltip-neo.mjs +0 -5
- package/esm2020/tooltip-neo/public_api.mjs +0 -4
- package/esm2020/tooltip-neo/tooltip-neo.component.mjs +0 -47
- package/esm2020/tooltip-neo/tooltip-neo.const.mjs +0 -67
- package/esm2020/tooltip-neo/tooltip-neo.directive.mjs +0 -157
- package/esm2020/tooltip-neo/tooltip-neo.model.mjs +0 -2
- package/esm2020/tooltip-neo/tooltip-neo.service.mjs +0 -17
- package/fesm2015/agorapulse-ui-components-tooltip-neo.mjs +0 -287
- package/fesm2015/agorapulse-ui-components-tooltip-neo.mjs.map +0 -1
- package/fesm2020/agorapulse-ui-components-tooltip-neo.mjs +0 -286
- package/fesm2020/agorapulse-ui-components-tooltip-neo.mjs.map +0 -1
- package/tooltip-neo/public_api.d.ts +0 -3
- package/tooltip-neo/tooltip-neo.component.d.ts +0 -17
- package/tooltip-neo/tooltip-neo.const.d.ts +0 -4
- package/tooltip-neo/tooltip-neo.directive.d.ts +0 -37
- package/tooltip-neo/tooltip-neo.model.d.ts +0 -13
- package/tooltip-neo/tooltip-neo.service.d.ts +0 -7
|
@@ -4,7 +4,7 @@ import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from
|
|
|
4
4
|
import { BehaviorSubject } from 'rxjs';
|
|
5
5
|
import * as i1 from '@agorapulse/ui-symbol';
|
|
6
6
|
import { apRemoveBold, AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
|
|
7
|
-
import {
|
|
7
|
+
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
8
8
|
import * as i1$1 from '@agorapulse/ui-components/text-measurement';
|
|
9
9
|
|
|
10
10
|
class LabelComponent {
|
|
@@ -18,9 +18,7 @@ class LabelComponent {
|
|
|
18
18
|
this.removable = false;
|
|
19
19
|
this.remove = new EventEmitter();
|
|
20
20
|
this.tooltipEnabled = false;
|
|
21
|
-
this.symbolRegistry.registerSymbols([
|
|
22
|
-
apRemoveBold
|
|
23
|
-
]);
|
|
21
|
+
this.symbolRegistry.registerSymbols([apRemoveBold]);
|
|
24
22
|
}
|
|
25
23
|
ngAfterViewInit() {
|
|
26
24
|
this.observer = new ResizeObserver(entries => {
|
|
@@ -43,10 +41,10 @@ class LabelComponent {
|
|
|
43
41
|
}
|
|
44
42
|
}
|
|
45
43
|
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
-
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: LabelComponent, isStandalone: true, selector: "ap-label", inputs: { color: "color", content: "content", onlyText: "onlyText", selectorWidth: "selectorWidth", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div
|
|
44
|
+
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: LabelComponent, isStandalone: true, selector: "ap-label", inputs: { color: "color", content: "content", onlyText: "onlyText", selectorWidth: "selectorWidth", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div\n class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltip]=\"tooltipEnabled ? content : ''\">\n <div class=\"label-content\">{{ content }}</div>\n <div *ngIf=\"removable\" class=\"delete-cross\" (mousedown)=\"$event.stopPropagation()\" (click)=\"onRemoveLabel()\">\n <ap-symbol symbolId=\"remove-bold\" size=\"pico\"> </ap-symbol>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.label{padding:4px 8px;color:#344563;align-self:center;background:#e8f4ff;border-radius:25px;text-wrap:none;display:flex;align-items:center;border:none}.label.default{padding:0 8px;border:1px solid #74bbfe;height:24px;box-sizing:border-box;max-width:100%;text-overflow:ellipsis}.label.blue{background-color:#e8f4ff;color:#178dfe}.label.red{background-color:#fde7e7;color:#e81313}.label.purple{background-color:#efedf8;color:#6554c0}.label.orange{background-color:#ffefe9;color:#ff6726}.label.yellow{background-color:#fffde9;color:#ffe91f}.label.green{background-color:#ecf7ed;color:#45b854}.label.big-padding{padding:8px 16px}.label.removable{padding:0 0 0 8px}.label .label-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-cross{align-self:center;cursor:pointer;min-width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;margin:1px 1px 1px 4px}.delete-cross:hover{background-color:#d1e8ff}.delete-cross:hover ::ng-deep ap-symbol *{color:#178dfe}.delete-cross ::ng-deep ap-symbol *{color:#858fa1}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
47
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: LabelComponent, decorators: [{
|
|
48
46
|
type: Component,
|
|
49
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', standalone: true, imports: [AgorapulseUiSymbolModule, NgClass, NgIf,
|
|
47
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', standalone: true, imports: [AgorapulseUiSymbolModule, NgClass, NgIf, TooltipDirective], template: "<div\n class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltip]=\"tooltipEnabled ? content : ''\">\n <div class=\"label-content\">{{ content }}</div>\n <div *ngIf=\"removable\" class=\"delete-cross\" (mousedown)=\"$event.stopPropagation()\" (click)=\"onRemoveLabel()\">\n <ap-symbol symbolId=\"remove-bold\" size=\"pico\"> </ap-symbol>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.label{padding:4px 8px;color:#344563;align-self:center;background:#e8f4ff;border-radius:25px;text-wrap:none;display:flex;align-items:center;border:none}.label.default{padding:0 8px;border:1px solid #74bbfe;height:24px;box-sizing:border-box;max-width:100%;text-overflow:ellipsis}.label.blue{background-color:#e8f4ff;color:#178dfe}.label.red{background-color:#fde7e7;color:#e81313}.label.purple{background-color:#efedf8;color:#6554c0}.label.orange{background-color:#ffefe9;color:#ff6726}.label.yellow{background-color:#fffde9;color:#ffe91f}.label.green{background-color:#ecf7ed;color:#45b854}.label.big-padding{padding:8px 16px}.label.removable{padding:0 0 0 8px}.label .label-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-cross{align-self:center;cursor:pointer;min-width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;margin:1px 1px 1px 4px}.delete-cross:hover{background-color:#d1e8ff}.delete-cross:hover ::ng-deep ap-symbol *{color:#178dfe}.delete-cross ::ng-deep ap-symbol *{color:#858fa1}\n"] }]
|
|
50
48
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.SymbolRegistry }]; }, propDecorators: { color: [{
|
|
51
49
|
type: Input
|
|
52
50
|
}], content: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-labels.mjs","sources":["../../../libs/ui-components/labels/src/label.component.ts","../../../libs/ui-components/labels/src/label.component.html","../../../libs/ui-components/labels/src/label-list.component.ts","../../../libs/ui-components/labels/src/label-list.component.html","../../../libs/ui-components/labels/src/agorapulse-ui-components-labels.ts"],"sourcesContent":["import {AgorapulseUiSymbolModule, apRemoveBold, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {NgClass, NgIf} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnDestroy,\n Output,\n} from '@angular/core';\nimport {TooltipNeoDirective} from '@agorapulse/ui-components/tooltip-neo';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label',\n standalone: true,\n templateUrl: './label.component.html',\n imports: [AgorapulseUiSymbolModule, NgClass, NgIf, TooltipNeoDirective],\n styleUrls: ['./label.component.scss'],\n})\nexport class LabelComponent implements OnDestroy {\n @Input() color: string | 'blue' | 'red' | 'purple' | 'orange' | 'yellow' | 'green' = 'default';\n @Input() content: string;\n @Input() onlyText: boolean = false;\n @Input() selectorWidth: number = 0; //Width of the selector input, if applicable\n @Input() removable: boolean = false;\n\n @Output() remove = new EventEmitter<string>();\n\n private observer: ResizeObserver;\n tooltipEnabled: boolean = false;\n\n constructor(private elementRef: ElementRef,\n private zone: NgZone,\n public symbolRegistry: SymbolRegistry\n ) {\n this.symbolRegistry.registerSymbols([\n apRemoveBold\n ]);\n }\n\n ngAfterViewInit(): void {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n const containerWidth =\n this.elementRef.nativeElement.clientWidth > 0\n ? this.elementRef.nativeElement.clientWidth\n : this.selectorWidth;\n if (containerWidth > 0) {\n this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;\n }\n });\n });\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);\n }\n\n ngOnDestroy() {\n this.observer.unobserve(this.elementRef.nativeElement.children[0]);\n }\n\n onRemoveLabel() {\n this.remove.emit(this.content);\n }\n}\n","<div class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltipNeo]=\"tooltipEnabled ? content : ''\" >\n <div class=\"label-content\">{{content}}</div>\n <div *ngIf=\"removable\"\n class=\"delete-cross\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"onRemoveLabel()\">\n <ap-symbol symbolId=\"remove-bold\"\n size=\"pico\">\n </ap-symbol>\n </div>\n</div>\n","import {TextMeasurementService} from '@agorapulse/ui-components/text-measurement';\nimport {NgForOf, NgIf} from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport {BehaviorSubject} from 'rxjs';\nimport {LabelComponent} from './label.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label-list',\n templateUrl: './label-list.component.html',\n styleUrls: ['./label-list.component.scss'],\n standalone: true,\n imports: [LabelComponent, NgForOf, NgIf],\n})\nexport class LabelListComponent implements AfterContentInit, OnChanges, OnDestroy {\n @Input() labels: string[] = [];\n @Input() removeLabelsEnabled: boolean = false;\n @Input() responsive: boolean = false;\n @Input() seeLessTranslation: string = 'See less';\n\n @Output() removeLabel = new EventEmitter<string>();\n\n badgeWidth: number = 0;\n expanded: boolean = false;\n howManyItemsLeft = 0;\n responsiveLabels: string[] = [];\n\n private observer: ResizeObserver;\n private width$ = new BehaviorSubject<number>(0);\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private elementRef: ElementRef,\n private textMeasurementService: TextMeasurementService,\n private zone: NgZone\n ) {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n this.width$.next(entries[0].contentRect.width);\n });\n });\n }\n\n ngAfterContentInit(): void {\n if (this.responsive) {\n this.generateResponsiveLabels(\n this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth\n );\n\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n this.width$.subscribe(width => {\n this.generateResponsiveLabels(width);\n });\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.labels.currentValue && this.responsive) {\n this.generateResponsiveLabels(\n this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth\n );\n }\n }\n\n ngOnDestroy() {\n this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n }\n\n onExpand() {\n this.expanded = !this.expanded;\n }\n\n onRemoveLabel(label: string): void {\n this.removeLabel.emit(label);\n }\n\n onResize() {\n this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);\n }\n\n public trackByLabelContent(index, entry: string) {\n return entry;\n }\n\n private generateResponsiveLabels(width: number) {\n let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth(\n '+'.concat(this.labels.length.toString()),\n 14,\n 'Averta'\n );\n seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right\n let elementWidth = width - 16 - 16; // width - padding-left - padding-right\n elementWidth -= seeMoreElementWidth;\n let currentIndex = 0;\n for (let index = 0; index < this.labels.length; index++) {\n let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');\n textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing\n elementWidth -= textWidth;\n if (elementWidth <= 0) {\n break;\n }\n currentIndex = index;\n }\n if (currentIndex + 1 === this.labels.length) {\n this.expanded = false;\n }\n this.howManyItemsLeft = this.labels.length - (currentIndex + 1);\n this.badgeWidth =\n this.howManyItemsLeft > 0 && currentIndex === 0\n ? this.textMeasurementService.calculateTextWidth('+' + this.howManyItemsLeft, 14, 'Averta') + 22\n : 0;\n this.responsiveLabels = this.labels.slice(0, currentIndex + 1);\n this.changeDetectorRef.markForCheck();\n }\n}\n","<div class=\"labels-list\" (window:resize)=\"onResize()\">\n <ng-container *ngIf=\"responsive; else defaultLabels\">\n <ng-container *ngFor=\"let label of expanded ? labels : responsiveLabels\">\n <ap-label [content]=\"label\"\n [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n\n <button *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n class=\"label-expand\"\n (click)=\"onExpand()\">\n +{{howManyItemsLeft}}\n </button>\n <button *ngIf=\"expanded\"\n class=\"label-retract\"\n (click)=\"onExpand()\">\n {{seeLessTranslation}}\n </button>\n </ng-container>\n\n <ng-template #defaultLabels>\n <ng-container *ngFor=\"let label of labels; trackBy: trackByLabelContent;\">\n <ap-label [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n </ng-template>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":";;;;;;;;;MAsBa,cAAc,CAAA;AAYvB,IAAA,WAAA,CAAoB,UAAsB,EACtB,IAAY,EACb,cAA8B,EAAA;QAF7B,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QACtB,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAQ;QACb,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAbxC,IAAK,CAAA,KAAA,GAAuE,SAAS,CAAC;QAEtF,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAC1B,QAAA,IAAA,CAAA,aAAa,GAAW,CAAC,CAAC;QAC1B,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;AAE1B,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAU,CAAC;QAG9C,IAAc,CAAA,cAAA,GAAY,KAAK,CAAC;AAM5B,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;YAChC,YAAY;AACf,SAAA,CAAC,CAAC;KACN;IAED,eAAe,GAAA;QACX,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,IAAG;AACzC,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAK;gBACf,MAAM,cAAc,GAChB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC;AACzC,sBAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW;AAC3C,sBAAE,IAAI,CAAC,aAAa,CAAC;gBAC7B,IAAI,cAAc,GAAG,CAAC,EAAE;AACpB,oBAAA,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,cAAc,CAAC;AACxE,iBAAA;AACL,aAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACnG;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;KACtE;IAED,aAAa,GAAA;QACT,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;;2GA1CQ,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;+FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,aAAA,EAAA,eAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtB3B,+fAeA,EDIc,MAAA,EAAA,CAAA,k+MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,wBAAwB,iKAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAG7D,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EAEP,CAAC,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,+fAAA,EAAA,MAAA,EAAA,CAAA,k+MAAA,CAAA,EAAA,CAAA;mJAI9D,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAEI,MAAM,EAAA,CAAA;sBAAf,MAAM;;;MEFE,kBAAkB,CAAA;AAgB3B,IAAA,WAAA,CACY,iBAAoC,EACpC,UAAsB,EACtB,sBAA8C,EAC9C,IAAY,EAAA;QAHZ,IAAiB,CAAA,iBAAA,GAAjB,iBAAiB,CAAmB;QACpC,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QACtB,IAAsB,CAAA,sBAAA,GAAtB,sBAAsB,CAAwB;QAC9C,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAQ;QAnBf,IAAM,CAAA,MAAA,GAAa,EAAE,CAAC;QACtB,IAAmB,CAAA,mBAAA,GAAY,KAAK,CAAC;QACrC,IAAU,CAAA,UAAA,GAAY,KAAK,CAAC;QAC5B,IAAkB,CAAA,kBAAA,GAAW,UAAU,CAAC;AAEvC,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;QAEnD,IAAU,CAAA,UAAA,GAAW,CAAC,CAAC;QACvB,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;QAC1B,IAAgB,CAAA,gBAAA,GAAG,CAAC,CAAC;QACrB,IAAgB,CAAA,gBAAA,GAAa,EAAE,CAAC;AAGxB,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,eAAe,CAAS,CAAC,CAAC,CAAC;QAQ5C,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,IAAG;AACzC,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAK;AACf,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnD,aAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACN;IAED,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,wBAAwB,CACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CACrF,CAAC;AAEF,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9F,YAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,IAAG;AAC1B,gBAAA,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AACzC,aAAC,CAAC,CAAC;AACN,SAAA;KACJ;AAED,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,OAAO,CAAC,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,EAAE;AAChD,YAAA,IAAI,CAAC,wBAAwB,CACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CACrF,CAAC;AACL,SAAA;KACJ;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACnG;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAClC;AAED,IAAA,aAAa,CAAC,KAAa,EAAA;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChC;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;KACxF;IAEM,mBAAmB,CAAC,KAAK,EAAE,KAAa,EAAA;AAC3C,QAAA,OAAO,KAAK,CAAC;KAChB;AAEO,IAAA,wBAAwB,CAAC,KAAa,EAAA;QAC1C,IAAI,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CACpE,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EACzC,EAAE,EACF,QAAQ,CACX,CAAC;QACF,mBAAmB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,YAAY,GAAG,KAAK,GAAG,EAAE,GAAG,EAAE,CAAC;QACnC,YAAY,IAAI,mBAAmB,CAAC;QACpC,IAAI,YAAY,GAAG,CAAC,CAAC;AACrB,QAAA,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;AACrD,YAAA,IAAI,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;YACjG,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,mBAAmB,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACjE,YAAY,IAAI,SAAS,CAAC;YAC1B,IAAI,YAAY,IAAI,CAAC,EAAE;gBACnB,MAAM;AACT,aAAA;YACD,YAAY,GAAG,KAAK,CAAC;AACxB,SAAA;QACD,IAAI,YAAY,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;AACzC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACzB,SAAA;AACD,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,YAAY,GAAG,CAAC,CAAC,CAAC;AAChE,QAAA,IAAI,CAAC,UAAU;AACX,YAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,YAAY,KAAK,CAAC;AAC3C,kBAAE,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,GAAG,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,QAAQ,CAAC,GAAG,EAAE;kBAC9F,CAAC,CAAC;AACZ,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;AAC/D,QAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC;KACzC;;+GAnGQ,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,sBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,qRC3B/B,2wCA6BA,EAAA,MAAA,EAAA,CAAA,4hMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDJc,cAAc,EAAE,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,mHAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAE9B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,eAAe,EAGb,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,CAAC,EAAA,QAAA,EAAA,2wCAAA,EAAA,MAAA,EAAA,CAAA,4hMAAA,CAAA,EAAA,CAAA;6LAG/B,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,mBAAmB,EAAA,CAAA;sBAA3B,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBAEI,WAAW,EAAA,CAAA;sBAApB,MAAM;;;AEjCX;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-labels.mjs","sources":["../../../libs/ui-components/labels/src/label.component.ts","../../../libs/ui-components/labels/src/label.component.html","../../../libs/ui-components/labels/src/label-list.component.ts","../../../libs/ui-components/labels/src/label-list.component.html","../../../libs/ui-components/labels/src/agorapulse-ui-components-labels.ts"],"sourcesContent":["import {AgorapulseUiSymbolModule, apRemoveBold, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {NgClass, NgIf} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnDestroy,\n Output,\n} from '@angular/core';\nimport {TooltipDirective} from '@agorapulse/ui-components/tooltip';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label',\n standalone: true,\n templateUrl: './label.component.html',\n imports: [AgorapulseUiSymbolModule, NgClass, NgIf, TooltipDirective],\n styleUrls: ['./label.component.scss'],\n})\nexport class LabelComponent implements OnDestroy {\n @Input() color: string | 'blue' | 'red' | 'purple' | 'orange' | 'yellow' | 'green' = 'default';\n @Input() content: string;\n @Input() onlyText: boolean = false;\n @Input() selectorWidth: number = 0; //Width of the selector input, if applicable\n @Input() removable: boolean = false;\n\n @Output() remove = new EventEmitter<string>();\n\n private observer: ResizeObserver;\n tooltipEnabled: boolean = false;\n\n constructor(private elementRef: ElementRef, private zone: NgZone, public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([apRemoveBold]);\n }\n\n ngAfterViewInit(): void {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n const containerWidth =\n this.elementRef.nativeElement.clientWidth > 0\n ? this.elementRef.nativeElement.clientWidth\n : this.selectorWidth;\n if (containerWidth > 0) {\n this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;\n }\n });\n });\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);\n }\n\n ngOnDestroy() {\n this.observer.unobserve(this.elementRef.nativeElement.children[0]);\n }\n\n onRemoveLabel() {\n this.remove.emit(this.content);\n }\n}\n","<div\n class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltip]=\"tooltipEnabled ? content : ''\">\n <div class=\"label-content\">{{ content }}</div>\n <div *ngIf=\"removable\" class=\"delete-cross\" (mousedown)=\"$event.stopPropagation()\" (click)=\"onRemoveLabel()\">\n <ap-symbol symbolId=\"remove-bold\" size=\"pico\"> </ap-symbol>\n </div>\n</div>\n","import {TextMeasurementService} from '@agorapulse/ui-components/text-measurement';\nimport {NgForOf, NgIf} from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport {BehaviorSubject} from 'rxjs';\nimport {LabelComponent} from './label.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label-list',\n templateUrl: './label-list.component.html',\n styleUrls: ['./label-list.component.scss'],\n standalone: true,\n imports: [LabelComponent, NgForOf, NgIf],\n})\nexport class LabelListComponent implements AfterContentInit, OnChanges, OnDestroy {\n @Input() labels: string[] = [];\n @Input() removeLabelsEnabled: boolean = false;\n @Input() responsive: boolean = false;\n @Input() seeLessTranslation: string = 'See less';\n\n @Output() removeLabel = new EventEmitter<string>();\n\n badgeWidth: number = 0;\n expanded: boolean = false;\n howManyItemsLeft = 0;\n responsiveLabels: string[] = [];\n\n private observer: ResizeObserver;\n private width$ = new BehaviorSubject<number>(0);\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private elementRef: ElementRef,\n private textMeasurementService: TextMeasurementService,\n private zone: NgZone\n ) {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n this.width$.next(entries[0].contentRect.width);\n });\n });\n }\n\n ngAfterContentInit(): void {\n if (this.responsive) {\n this.generateResponsiveLabels(\n this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth\n );\n\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n this.width$.subscribe(width => {\n this.generateResponsiveLabels(width);\n });\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.labels.currentValue && this.responsive) {\n this.generateResponsiveLabels(\n this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth\n );\n }\n }\n\n ngOnDestroy() {\n this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n }\n\n onExpand() {\n this.expanded = !this.expanded;\n }\n\n onRemoveLabel(label: string): void {\n this.removeLabel.emit(label);\n }\n\n onResize() {\n this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);\n }\n\n public trackByLabelContent(index, entry: string) {\n return entry;\n }\n\n private generateResponsiveLabels(width: number) {\n let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth(\n '+'.concat(this.labels.length.toString()),\n 14,\n 'Averta'\n );\n seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right\n let elementWidth = width - 16 - 16; // width - padding-left - padding-right\n elementWidth -= seeMoreElementWidth;\n let currentIndex = 0;\n for (let index = 0; index < this.labels.length; index++) {\n let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');\n textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing\n elementWidth -= textWidth;\n if (elementWidth <= 0) {\n break;\n }\n currentIndex = index;\n }\n if (currentIndex + 1 === this.labels.length) {\n this.expanded = false;\n }\n this.howManyItemsLeft = this.labels.length - (currentIndex + 1);\n this.badgeWidth =\n this.howManyItemsLeft > 0 && currentIndex === 0\n ? this.textMeasurementService.calculateTextWidth('+' + this.howManyItemsLeft, 14, 'Averta') + 22\n : 0;\n this.responsiveLabels = this.labels.slice(0, currentIndex + 1);\n this.changeDetectorRef.markForCheck();\n }\n}\n","<div class=\"labels-list\" (window:resize)=\"onResize()\">\n <ng-container *ngIf=\"responsive; else defaultLabels\">\n <ng-container *ngFor=\"let label of expanded ? labels : responsiveLabels\">\n <ap-label [content]=\"label\"\n [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n\n <button *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n class=\"label-expand\"\n (click)=\"onExpand()\">\n +{{howManyItemsLeft}}\n </button>\n <button *ngIf=\"expanded\"\n class=\"label-retract\"\n (click)=\"onExpand()\">\n {{seeLessTranslation}}\n </button>\n </ng-container>\n\n <ng-template #defaultLabels>\n <ng-container *ngFor=\"let label of labels; trackBy: trackByLabelContent;\">\n <ap-label [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n </ng-template>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":";;;;;;;;;MAsBa,cAAc,CAAA;AAYvB,IAAA,WAAA,CAAoB,UAAsB,EAAU,IAAY,EAAS,cAA8B,EAAA;QAAnF,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QAAU,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAQ;QAAS,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAX9F,IAAK,CAAA,KAAA,GAAuE,SAAS,CAAC;QAEtF,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAC1B,QAAA,IAAA,CAAA,aAAa,GAAW,CAAC,CAAC;QAC1B,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;AAE1B,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAU,CAAC;QAG9C,IAAc,CAAA,cAAA,GAAY,KAAK,CAAC;QAG5B,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;KACvD;IAED,eAAe,GAAA;QACX,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,IAAG;AACzC,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAK;gBACf,MAAM,cAAc,GAChB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC;AACzC,sBAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW;AAC3C,sBAAE,IAAI,CAAC,aAAa,CAAC;gBAC7B,IAAI,cAAc,GAAG,CAAC,EAAE;AACpB,oBAAA,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,cAAc,CAAC;AACxE,iBAAA;AACL,aAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACnG;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;KACtE;IAED,aAAa,GAAA;QACT,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;;2GArCQ,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;+FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,aAAA,EAAA,eAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtB3B,mcAWA,EDQc,MAAA,EAAA,CAAA,k+MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,wBAAwB,iKAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAG1D,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EAEP,CAAC,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,mcAAA,EAAA,MAAA,EAAA,CAAA,k+MAAA,CAAA,EAAA,CAAA;mJAI3D,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAEI,MAAM,EAAA,CAAA;sBAAf,MAAM;;;MEFE,kBAAkB,CAAA;AAgB3B,IAAA,WAAA,CACY,iBAAoC,EACpC,UAAsB,EACtB,sBAA8C,EAC9C,IAAY,EAAA;QAHZ,IAAiB,CAAA,iBAAA,GAAjB,iBAAiB,CAAmB;QACpC,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QACtB,IAAsB,CAAA,sBAAA,GAAtB,sBAAsB,CAAwB;QAC9C,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAQ;QAnBf,IAAM,CAAA,MAAA,GAAa,EAAE,CAAC;QACtB,IAAmB,CAAA,mBAAA,GAAY,KAAK,CAAC;QACrC,IAAU,CAAA,UAAA,GAAY,KAAK,CAAC;QAC5B,IAAkB,CAAA,kBAAA,GAAW,UAAU,CAAC;AAEvC,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;QAEnD,IAAU,CAAA,UAAA,GAAW,CAAC,CAAC;QACvB,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;QAC1B,IAAgB,CAAA,gBAAA,GAAG,CAAC,CAAC;QACrB,IAAgB,CAAA,gBAAA,GAAa,EAAE,CAAC;AAGxB,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,eAAe,CAAS,CAAC,CAAC,CAAC;QAQ5C,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,IAAG;AACzC,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAK;AACf,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnD,aAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACN;IAED,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,wBAAwB,CACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CACrF,CAAC;AAEF,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9F,YAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,IAAG;AAC1B,gBAAA,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AACzC,aAAC,CAAC,CAAC;AACN,SAAA;KACJ;AAED,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,OAAO,CAAC,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,EAAE;AAChD,YAAA,IAAI,CAAC,wBAAwB,CACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CACrF,CAAC;AACL,SAAA;KACJ;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACnG;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAClC;AAED,IAAA,aAAa,CAAC,KAAa,EAAA;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChC;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;KACxF;IAEM,mBAAmB,CAAC,KAAK,EAAE,KAAa,EAAA;AAC3C,QAAA,OAAO,KAAK,CAAC;KAChB;AAEO,IAAA,wBAAwB,CAAC,KAAa,EAAA;QAC1C,IAAI,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CACpE,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EACzC,EAAE,EACF,QAAQ,CACX,CAAC;QACF,mBAAmB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,YAAY,GAAG,KAAK,GAAG,EAAE,GAAG,EAAE,CAAC;QACnC,YAAY,IAAI,mBAAmB,CAAC;QACpC,IAAI,YAAY,GAAG,CAAC,CAAC;AACrB,QAAA,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;AACrD,YAAA,IAAI,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;YACjG,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,mBAAmB,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACjE,YAAY,IAAI,SAAS,CAAC;YAC1B,IAAI,YAAY,IAAI,CAAC,EAAE;gBACnB,MAAM;AACT,aAAA;YACD,YAAY,GAAG,KAAK,CAAC;AACxB,SAAA;QACD,IAAI,YAAY,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;AACzC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACzB,SAAA;AACD,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,YAAY,GAAG,CAAC,CAAC,CAAC;AAChE,QAAA,IAAI,CAAC,UAAU;AACX,YAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,YAAY,KAAK,CAAC;AAC3C,kBAAE,IAAI,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,GAAG,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,QAAQ,CAAC,GAAG,EAAE;kBAC9F,CAAC,CAAC;AACZ,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;AAC/D,QAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC;KACzC;;+GAnGQ,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,sBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,qRC3B/B,2wCA6BA,EAAA,MAAA,EAAA,CAAA,4hMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDJc,cAAc,EAAE,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,mHAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAE9B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,eAAe,EAGb,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,CAAC,EAAA,QAAA,EAAA,2wCAAA,EAAA,MAAA,EAAA,CAAA,4hMAAA,CAAA,EAAA,CAAA;6LAG/B,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,mBAAmB,EAAA,CAAA;sBAA3B,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBAEI,WAAW,EAAA,CAAA;sBAApB,MAAM;;;AEjCX;;AAEG;;;;"}
|
|
@@ -0,0 +1,388 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Injectable, inject, ElementRef, NgZone, ViewContainerRef, TemplateRef, Directive, Input } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class TooltipService {
|
|
5
|
+
static getOuterWidth(el) {
|
|
6
|
+
return el.offsetWidth;
|
|
7
|
+
}
|
|
8
|
+
static getOuterHeight(el) {
|
|
9
|
+
return el.offsetHeight;
|
|
10
|
+
}
|
|
11
|
+
static getViewport() {
|
|
12
|
+
const win = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], w = win.innerWidth || e.clientWidth || g.clientWidth, h = win.innerHeight || e.clientHeight || g.clientHeight;
|
|
13
|
+
return { width: w, height: h };
|
|
14
|
+
}
|
|
15
|
+
static getWindowScrollLeft() {
|
|
16
|
+
const doc = document.documentElement;
|
|
17
|
+
return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
|
|
18
|
+
}
|
|
19
|
+
static getWindowScrollTop() {
|
|
20
|
+
const doc = document.documentElement;
|
|
21
|
+
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
TooltipService.defaultOffset = 12;
|
|
25
|
+
TooltipService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
26
|
+
TooltipService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: TooltipService });
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: TooltipService, decorators: [{
|
|
28
|
+
type: Injectable
|
|
29
|
+
}] });
|
|
30
|
+
|
|
31
|
+
class TooltipDirective {
|
|
32
|
+
constructor() {
|
|
33
|
+
this.elementRef = inject(ElementRef);
|
|
34
|
+
this.zone = inject(NgZone);
|
|
35
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
36
|
+
this.apTooltipPosition = 'top';
|
|
37
|
+
this.apTooltipShowDelay = 80;
|
|
38
|
+
this.nativeElement = this.elementRef.nativeElement;
|
|
39
|
+
}
|
|
40
|
+
ngAfterViewInit() {
|
|
41
|
+
this.zone.runOutsideAngular(() => {
|
|
42
|
+
this.mouseEnterListener = this.onMouseEnter.bind(this);
|
|
43
|
+
this.mouseLeaveListener = this.onMouseLeave.bind(this);
|
|
44
|
+
this.clickListener = this.onInputClick.bind(this);
|
|
45
|
+
this.nativeElement.addEventListener('mouseenter', this.mouseEnterListener);
|
|
46
|
+
this.nativeElement.addEventListener('click', this.clickListener);
|
|
47
|
+
this.nativeElement.addEventListener('mouseleave', this.mouseLeaveListener);
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
ngOnDestroy() {
|
|
51
|
+
this.nativeElement.removeEventListener('mouseenter', this.mouseEnterListener);
|
|
52
|
+
this.nativeElement.removeEventListener('click', this.clickListener);
|
|
53
|
+
this.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListener);
|
|
54
|
+
this.mouseEnterListener = undefined;
|
|
55
|
+
this.mouseLeaveListener = undefined;
|
|
56
|
+
this.clickListener = undefined;
|
|
57
|
+
}
|
|
58
|
+
onMouseEnter() {
|
|
59
|
+
if (!this.container) {
|
|
60
|
+
this.activate();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
onMouseLeave() {
|
|
64
|
+
this.deactivate();
|
|
65
|
+
}
|
|
66
|
+
onInputClick() {
|
|
67
|
+
this.deactivate();
|
|
68
|
+
}
|
|
69
|
+
activate() {
|
|
70
|
+
this.clearHideTimeout();
|
|
71
|
+
if (this.apTooltipShowDelay) {
|
|
72
|
+
this.showTimeout = window.setTimeout(() => {
|
|
73
|
+
this.show();
|
|
74
|
+
}, this.apTooltipShowDelay);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
this.show();
|
|
78
|
+
}
|
|
79
|
+
if (this.apTooltipDuration) {
|
|
80
|
+
const duration = this.apTooltipShowDelay ? this.apTooltipDuration + this.apTooltipShowDelay : this.apTooltipDuration;
|
|
81
|
+
this.hideTimeout = window.setTimeout(() => {
|
|
82
|
+
this.remove();
|
|
83
|
+
}, duration);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
deactivate() {
|
|
87
|
+
this.clearShowTimeout();
|
|
88
|
+
if (this.apTooltipHideDelay) {
|
|
89
|
+
this.clearHideTimeout();
|
|
90
|
+
this.hideTimeout = window.setTimeout(() => {
|
|
91
|
+
this.remove();
|
|
92
|
+
}, this.apTooltipHideDelay);
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
this.remove();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
show() {
|
|
99
|
+
if (!this.content || this.apTooltipDisabled) {
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
this.create();
|
|
103
|
+
this.align();
|
|
104
|
+
}
|
|
105
|
+
create() {
|
|
106
|
+
if (this.container) {
|
|
107
|
+
this.clearHideTimeout();
|
|
108
|
+
this.remove();
|
|
109
|
+
}
|
|
110
|
+
this.container = document.createElement('div');
|
|
111
|
+
this.container.setAttribute('role', 'tooltip');
|
|
112
|
+
const contentContainer = document.createElement('div');
|
|
113
|
+
contentContainer.classList.add('ap-content-container');
|
|
114
|
+
const svgNamespace = 'http://www.w3.org/2000/svg';
|
|
115
|
+
const arrowSvg = document.createElementNS(svgNamespace, 'svg');
|
|
116
|
+
arrowSvg.classList.add('ap-tooltip-arrow');
|
|
117
|
+
arrowSvg.setAttribute('xmlns', svgNamespace);
|
|
118
|
+
arrowSvg.setAttribute('viewBox', '0 0 16 8');
|
|
119
|
+
arrowSvg.setAttribute('fill', 'none');
|
|
120
|
+
const path = document.createElementNS(svgNamespace, 'path');
|
|
121
|
+
path.setAttribute('d', 'M6.68299 1.15238C7.43705 0.492586 8.56296 0.492588 9.31701 1.15238L16 7L0 7L6.68299 1.15238Z');
|
|
122
|
+
arrowSvg.appendChild(path);
|
|
123
|
+
this.tooltipText = document.createElement('div');
|
|
124
|
+
this.tooltipText.className = 'ap-tooltip-text';
|
|
125
|
+
this.updateText();
|
|
126
|
+
contentContainer.appendChild(this.tooltipText);
|
|
127
|
+
contentContainer.appendChild(arrowSvg);
|
|
128
|
+
this.container.appendChild(contentContainer);
|
|
129
|
+
document.body.appendChild(this.container);
|
|
130
|
+
this.container.classList.add('ap-tooltip');
|
|
131
|
+
if (this.content instanceof TemplateRef) {
|
|
132
|
+
this.container.classList.add('ap-tooltip-custom-template');
|
|
133
|
+
}
|
|
134
|
+
this.setCssVariables();
|
|
135
|
+
}
|
|
136
|
+
align() {
|
|
137
|
+
switch (this.apTooltipPosition) {
|
|
138
|
+
case 'top-left':
|
|
139
|
+
this.alignTopLeft();
|
|
140
|
+
if (this.isOutOfBounds()) {
|
|
141
|
+
this.alignBottom();
|
|
142
|
+
if (this.isOutOfBounds()) {
|
|
143
|
+
this.alignRight();
|
|
144
|
+
if (this.isOutOfBounds()) {
|
|
145
|
+
this.alignLeft();
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
break;
|
|
150
|
+
case 'top-right':
|
|
151
|
+
this.alignTopRight();
|
|
152
|
+
if (this.isOutOfBounds()) {
|
|
153
|
+
this.alignBottom();
|
|
154
|
+
if (this.isOutOfBounds()) {
|
|
155
|
+
this.alignRight();
|
|
156
|
+
if (this.isOutOfBounds()) {
|
|
157
|
+
this.alignLeft();
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
break;
|
|
162
|
+
case 'top':
|
|
163
|
+
this.alignTop();
|
|
164
|
+
if (this.isOutOfBounds()) {
|
|
165
|
+
this.alignBottom();
|
|
166
|
+
if (this.isOutOfBounds()) {
|
|
167
|
+
this.alignRight();
|
|
168
|
+
if (this.isOutOfBounds()) {
|
|
169
|
+
this.alignLeft();
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
break;
|
|
174
|
+
case 'bottom':
|
|
175
|
+
this.alignBottom();
|
|
176
|
+
if (this.isOutOfBounds()) {
|
|
177
|
+
this.alignTop();
|
|
178
|
+
if (this.isOutOfBounds()) {
|
|
179
|
+
this.alignRight();
|
|
180
|
+
if (this.isOutOfBounds()) {
|
|
181
|
+
this.alignLeft();
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
break;
|
|
186
|
+
case 'bottom-left':
|
|
187
|
+
this.alignBottomLeft();
|
|
188
|
+
if (this.isOutOfBounds()) {
|
|
189
|
+
this.alignTop();
|
|
190
|
+
if (this.isOutOfBounds()) {
|
|
191
|
+
this.alignRight();
|
|
192
|
+
if (this.isOutOfBounds()) {
|
|
193
|
+
this.alignLeft();
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
break;
|
|
198
|
+
case 'bottom-right':
|
|
199
|
+
this.alignBottomRight();
|
|
200
|
+
if (this.isOutOfBounds()) {
|
|
201
|
+
this.alignTop();
|
|
202
|
+
if (this.isOutOfBounds()) {
|
|
203
|
+
this.alignRight();
|
|
204
|
+
if (this.isOutOfBounds()) {
|
|
205
|
+
this.alignLeft();
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
break;
|
|
210
|
+
case 'left':
|
|
211
|
+
this.alignLeft();
|
|
212
|
+
if (this.isOutOfBounds()) {
|
|
213
|
+
this.alignRight();
|
|
214
|
+
if (this.isOutOfBounds()) {
|
|
215
|
+
this.alignTop();
|
|
216
|
+
if (this.isOutOfBounds()) {
|
|
217
|
+
this.alignBottom();
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
break;
|
|
222
|
+
case 'right':
|
|
223
|
+
this.alignRight();
|
|
224
|
+
if (this.isOutOfBounds()) {
|
|
225
|
+
this.alignLeft();
|
|
226
|
+
if (this.isOutOfBounds()) {
|
|
227
|
+
this.alignTop();
|
|
228
|
+
if (this.isOutOfBounds()) {
|
|
229
|
+
this.alignBottom();
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
break;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
alignRight() {
|
|
237
|
+
this.preAlign('right');
|
|
238
|
+
const hostOffset = this.getHostOffset();
|
|
239
|
+
const left = hostOffset.left + TooltipService.getOuterWidth(this.nativeElement) + TooltipService.defaultOffset;
|
|
240
|
+
const top = hostOffset.top + (TooltipService.getOuterHeight(this.nativeElement) - TooltipService.getOuterHeight(this.container)) / 2;
|
|
241
|
+
this.container.style.left = left + 'px';
|
|
242
|
+
this.container.style.top = top + 'px';
|
|
243
|
+
}
|
|
244
|
+
alignLeft() {
|
|
245
|
+
this.preAlign('left');
|
|
246
|
+
const hostOffset = this.getHostOffset();
|
|
247
|
+
const left = hostOffset.left - TooltipService.getOuterWidth(this.container) - TooltipService.defaultOffset;
|
|
248
|
+
const top = hostOffset.top + (TooltipService.getOuterHeight(this.nativeElement) - TooltipService.getOuterHeight(this.container)) / 2;
|
|
249
|
+
this.container.style.left = left + 'px';
|
|
250
|
+
this.container.style.top = top + 'px';
|
|
251
|
+
}
|
|
252
|
+
alignTop() {
|
|
253
|
+
this.preAlign('top');
|
|
254
|
+
const hostOffset = this.getHostOffset();
|
|
255
|
+
const left = hostOffset.left + (TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container)) / 2;
|
|
256
|
+
const top = hostOffset.top - TooltipService.getOuterHeight(this.container) - TooltipService.defaultOffset;
|
|
257
|
+
this.container.style.left = left + 'px';
|
|
258
|
+
this.container.style.top = top + 'px';
|
|
259
|
+
}
|
|
260
|
+
alignTopLeft() {
|
|
261
|
+
this.preAlign('top-left');
|
|
262
|
+
const hostOffset = this.getHostOffset();
|
|
263
|
+
const left = hostOffset.left;
|
|
264
|
+
const top = hostOffset.top - TooltipService.getOuterHeight(this.container) - TooltipService.defaultOffset;
|
|
265
|
+
this.container.style.left = left + 'px';
|
|
266
|
+
this.container.style.top = top + 'px';
|
|
267
|
+
}
|
|
268
|
+
alignTopRight() {
|
|
269
|
+
this.preAlign('top-right');
|
|
270
|
+
const hostOffset = this.getHostOffset();
|
|
271
|
+
const left = hostOffset.left + TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container);
|
|
272
|
+
const top = hostOffset.top - TooltipService.getOuterHeight(this.container) - TooltipService.defaultOffset;
|
|
273
|
+
this.container.style.left = left + 'px';
|
|
274
|
+
this.container.style.top = top + 'px';
|
|
275
|
+
}
|
|
276
|
+
alignBottom() {
|
|
277
|
+
this.preAlign('bottom');
|
|
278
|
+
const hostOffset = this.getHostOffset();
|
|
279
|
+
const left = hostOffset.left + (TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container)) / 2;
|
|
280
|
+
const top = hostOffset.top + TooltipService.getOuterHeight(this.nativeElement) + TooltipService.defaultOffset;
|
|
281
|
+
this.container.style.left = left + 'px';
|
|
282
|
+
this.container.style.top = top + 'px';
|
|
283
|
+
}
|
|
284
|
+
alignBottomLeft() {
|
|
285
|
+
this.preAlign('bottom-left');
|
|
286
|
+
const hostOffset = this.getHostOffset();
|
|
287
|
+
const left = hostOffset.left;
|
|
288
|
+
const top = hostOffset.top + TooltipService.getOuterHeight(this.nativeElement) + TooltipService.defaultOffset;
|
|
289
|
+
this.container.style.left = left + 'px';
|
|
290
|
+
this.container.style.top = top + 'px';
|
|
291
|
+
}
|
|
292
|
+
alignBottomRight() {
|
|
293
|
+
this.preAlign('bottom-right');
|
|
294
|
+
const hostOffset = this.getHostOffset();
|
|
295
|
+
const left = hostOffset.left + (TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container));
|
|
296
|
+
const top = hostOffset.top + TooltipService.getOuterHeight(this.nativeElement) + TooltipService.defaultOffset;
|
|
297
|
+
this.container.style.left = left + 'px';
|
|
298
|
+
this.container.style.top = top + 'px';
|
|
299
|
+
}
|
|
300
|
+
preAlign(position) {
|
|
301
|
+
this.container.style.left = -999 + 'px';
|
|
302
|
+
this.container.style.top = -999 + 'px';
|
|
303
|
+
const defaultClassName = 'ap-tooltip-' + position;
|
|
304
|
+
this.container.classList.add(defaultClassName);
|
|
305
|
+
}
|
|
306
|
+
getHostOffset() {
|
|
307
|
+
const offset = this.nativeElement.getBoundingClientRect();
|
|
308
|
+
const targetLeft = offset.left + TooltipService.getWindowScrollLeft();
|
|
309
|
+
const targetTop = offset.top + TooltipService.getWindowScrollTop();
|
|
310
|
+
return { left: targetLeft, top: targetTop };
|
|
311
|
+
}
|
|
312
|
+
isOutOfBounds() {
|
|
313
|
+
const offset = this.container.getBoundingClientRect();
|
|
314
|
+
const targetTop = offset.top;
|
|
315
|
+
const targetLeft = offset.left;
|
|
316
|
+
const width = TooltipService.getOuterWidth(this.container);
|
|
317
|
+
const height = TooltipService.getOuterHeight(this.container);
|
|
318
|
+
const viewport = TooltipService.getViewport();
|
|
319
|
+
return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height;
|
|
320
|
+
}
|
|
321
|
+
remove() {
|
|
322
|
+
if (this.container && this.container.parentElement) {
|
|
323
|
+
document.body.removeChild(this.container);
|
|
324
|
+
}
|
|
325
|
+
this.clearTimeouts();
|
|
326
|
+
this.container = null;
|
|
327
|
+
}
|
|
328
|
+
clearShowTimeout() {
|
|
329
|
+
if (this.showTimeout) {
|
|
330
|
+
clearTimeout(this.showTimeout);
|
|
331
|
+
this.showTimeout = null;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
clearHideTimeout() {
|
|
335
|
+
if (this.hideTimeout) {
|
|
336
|
+
clearTimeout(this.hideTimeout);
|
|
337
|
+
this.hideTimeout = null;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
clearTimeouts() {
|
|
341
|
+
this.clearShowTimeout();
|
|
342
|
+
this.clearHideTimeout();
|
|
343
|
+
}
|
|
344
|
+
updateText() {
|
|
345
|
+
if (this.content instanceof TemplateRef) {
|
|
346
|
+
const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.content);
|
|
347
|
+
embeddedViewRef.context = this.apTooltipTemplateContext;
|
|
348
|
+
embeddedViewRef.detectChanges();
|
|
349
|
+
embeddedViewRef.rootNodes.forEach(node => this.tooltipText.appendChild(node));
|
|
350
|
+
}
|
|
351
|
+
else {
|
|
352
|
+
this.tooltipText.innerHTML = this.content;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
setCssVariables() {
|
|
356
|
+
if (this.container) {
|
|
357
|
+
this.container.style.setProperty('--ap-tooltip-height', this.container.offsetHeight + 'px');
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
362
|
+
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.2", type: TooltipDirective, isStandalone: true, selector: "[apTooltip]", inputs: { apTooltipPosition: "apTooltipPosition", content: ["apTooltip", "content"], apTooltipShowDelay: "apTooltipShowDelay", apTooltipHideDelay: "apTooltipHideDelay", apTooltipDuration: "apTooltipDuration", apTooltipDisabled: "apTooltipDisabled", apTooltipTemplateContext: "apTooltipTemplateContext" }, ngImport: i0 });
|
|
363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
364
|
+
type: Directive,
|
|
365
|
+
args: [{ selector: '[apTooltip]', standalone: true }]
|
|
366
|
+
}], propDecorators: { apTooltipPosition: [{
|
|
367
|
+
type: Input
|
|
368
|
+
}], content: [{
|
|
369
|
+
type: Input,
|
|
370
|
+
args: ['apTooltip']
|
|
371
|
+
}], apTooltipShowDelay: [{
|
|
372
|
+
type: Input
|
|
373
|
+
}], apTooltipHideDelay: [{
|
|
374
|
+
type: Input
|
|
375
|
+
}], apTooltipDuration: [{
|
|
376
|
+
type: Input
|
|
377
|
+
}], apTooltipDisabled: [{
|
|
378
|
+
type: Input
|
|
379
|
+
}], apTooltipTemplateContext: [{
|
|
380
|
+
type: Input
|
|
381
|
+
}] } });
|
|
382
|
+
|
|
383
|
+
/**
|
|
384
|
+
* Generated bundle index. Do not edit.
|
|
385
|
+
*/
|
|
386
|
+
|
|
387
|
+
export { TooltipDirective };
|
|
388
|
+
//# sourceMappingURL=agorapulse-ui-components-tooltip.mjs.map
|