npm - @agorapulse/ui-components - Versions diffs - 18.1.13 → 18.2.0 - Mend

@agorapulse/ui-components 18.1.13 → 18.2.0

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.

Files changed (533) hide show

package/fesm2022/agorapulse-ui-components-stepper.mjs CHANGED Viewed

@@ -20,12 +20,12 @@ class StepperComponent {
     clickCurrentStep(step) {
         this.stepClicked.emit(step);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: StepperComponent, isStandalone: true, selector: "ap-stepper", inputs: { currentStepId: "currentStepId", steps: "steps" }, outputs: { stepClicked: "stepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n        <span class=\"item\">\n            <span\n                [ngClass]=\"{\n                    number: true,\n                    active: index === currentIndex,\n                    'no-more-active': currentIndex > index || (index !== currentIndex && step.visited),\n                    'not-yet-active': currentIndex < index && !step.visited\n                }\">\n                {{ index + 1 }}\n            </span>\n            <span\n                class=\"text\"\n                [ngClass]=\"{ clickable: step.clickable }\"\n                (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n                {{ step.name }}\n            </span>\n            @if (!last) {\n                <ap-symbol\n                    symbolId=\"chevron-right\"\n                    size=\"sm\" />\n            }\n        </span>\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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}.active{font-weight:700}.main{display:flex}.main .item{height:fit-content}.main .item .number{border-radius:24px;width:24px;height:24px;display:inline-block;text-align:center;vertical-align:middle;line-height:24px;box-sizing:border-box}.main .item .number.active{box-shadow:0 0 0 1.5px #e8f4ff;border:1.5px solid #e8f4ff;line-height:21px;background-color:#178dfe;color:#fff}.main .item .number.no-more-active{background-color:#e8f4ff;color:#178dfe}.main .item .number.not-yet-active{border:1px solid #e8f4ff;line-height:22px;background-color:transparent;color:#178dfe}.main .item .text{padding-left:8px;height:fit-content;margin:auto;line-height:24px;vertical-align:middle}.main .item .text.clickable:hover{color:#178dfe;cursor:pointer}.main .item ap-symbol{color:#858fa1;margin:auto 10px;vertical-align:middle;display:inline-block}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: StepperComponent, isStandalone: true, selector: "ap-stepper", inputs: { currentStepId: "currentStepId", steps: "steps" }, outputs: { stepClicked: "stepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n        <span class=\"item\">\n            <span\n                [ngClass]=\"{\n                    number: true,\n                    active: index === currentIndex,\n                    'no-more-active': currentIndex > index || (index !== currentIndex && step.visited),\n                    'not-yet-active': currentIndex < index && !step.visited\n                }\">\n                {{ index + 1 }}\n            </span>\n            <span\n                class=\"text\"\n                [ngClass]=\"{ clickable: step.clickable }\"\n                (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n                {{ step.name }}\n            </span>\n            @if (!last) {\n                <ap-symbol\n                    symbolId=\"chevron-right\"\n                    size=\"sm\" />\n            }\n        </span>\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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}.active{font-weight:700}.main{display:flex}.main .item{height:fit-content}.main .item .number{border-radius:24px;width:24px;height:24px;display:inline-block;text-align:center;vertical-align:middle;line-height:24px;box-sizing:border-box}.main .item .number.active{box-shadow:0 0 0 1.5px #e8f4ff;border:1.5px solid #e8f4ff;line-height:21px;background-color:#178dfe;color:#fff}.main .item .number.no-more-active{background-color:#e8f4ff;color:#178dfe}.main .item .number.not-yet-active{border:1px solid #e8f4ff;line-height:22px;background-color:transparent;color:#178dfe}.main .item .text{padding-left:8px;height:fit-content;margin:auto;line-height:24px;vertical-align:middle}.main .item .text.clickable:hover{color:#178dfe;cursor:pointer}.main .item ap-symbol{color:#858fa1;margin:auto 10px;vertical-align:middle;display:inline-block}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-stepper', standalone: true, imports: [SymbolComponent, NgClass], template: "<div class=\"main\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n        <span class=\"item\">\n            <span\n                [ngClass]=\"{\n                    number: true,\n                    active: index === currentIndex,\n                    'no-more-active': currentIndex > index || (index !== currentIndex && step.visited),\n                    'not-yet-active': currentIndex < index && !step.visited\n                }\">\n                {{ index + 1 }}\n            </span>\n            <span\n                class=\"text\"\n                [ngClass]=\"{ clickable: step.clickable }\"\n                (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n                {{ step.name }}\n            </span>\n            @if (!last) {\n                <ap-symbol\n                    symbolId=\"chevron-right\"\n                    size=\"sm\" />\n            }\n        </span>\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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}.active{font-weight:700}.main{display:flex}.main .item{height:fit-content}.main .item .number{border-radius:24px;width:24px;height:24px;display:inline-block;text-align:center;vertical-align:middle;line-height:24px;box-sizing:border-box}.main .item .number.active{box-shadow:0 0 0 1.5px #e8f4ff;border:1.5px solid #e8f4ff;line-height:21px;background-color:#178dfe;color:#fff}.main .item .number.no-more-active{background-color:#e8f4ff;color:#178dfe}.main .item .number.not-yet-active{border:1px solid #e8f4ff;line-height:22px;background-color:transparent;color:#178dfe}.main .item .text{padding-left:8px;height:fit-content;margin:auto;line-height:24px;vertical-align:middle}.main .item .text.clickable:hover{color:#178dfe;cursor:pointer}.main .item ap-symbol{color:#858fa1;margin:auto 10px;vertical-align:middle;display:inline-block}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-stepper', imports: [SymbolComponent, NgClass], template: "<div class=\"main\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n        <span class=\"item\">\n            <span\n                [ngClass]=\"{\n                    number: true,\n                    active: index === currentIndex,\n                    'no-more-active': currentIndex > index || (index !== currentIndex && step.visited),\n                    'not-yet-active': currentIndex < index && !step.visited\n                }\">\n                {{ index + 1 }}\n            </span>\n            <span\n                class=\"text\"\n                [ngClass]=\"{ clickable: step.clickable }\"\n                (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n                {{ step.name }}\n            </span>\n            @if (!last) {\n                <ap-symbol\n                    symbolId=\"chevron-right\"\n                    size=\"sm\" />\n            }\n        </span>\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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}.active{font-weight:700}.main{display:flex}.main .item{height:fit-content}.main .item .number{border-radius:24px;width:24px;height:24px;display:inline-block;text-align:center;vertical-align:middle;line-height:24px;box-sizing:border-box}.main .item .number.active{box-shadow:0 0 0 1.5px #e8f4ff;border:1.5px solid #e8f4ff;line-height:21px;background-color:#178dfe;color:#fff}.main .item .number.no-more-active{background-color:#e8f4ff;color:#178dfe}.main .item .number.not-yet-active{border:1px solid #e8f4ff;line-height:22px;background-color:transparent;color:#178dfe}.main .item .text{padding-left:8px;height:fit-content;margin:auto;line-height:24px;vertical-align:middle}.main .item .text.clickable:hover{color:#178dfe;cursor:pointer}.main .item ap-symbol{color:#858fa1;margin:auto 10px;vertical-align:middle;display:inline-block}\n"] }]
         }], propDecorators: { currentStepId: [{
                 type: Input
             }], steps: [{

package/fesm2022/agorapulse-ui-components-stepper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-stepper.mjs","sources":["../../../libs/ui-components/stepper/src/stepper.component.ts","../../../libs/ui-components/stepper/src/stepper.component.html","../../../libs/ui-components/stepper/src/agorapulse-ui-components-stepper.ts"],"sourcesContent":["import { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';\nimport { Step } from './step.model';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-stepper',\n templateUrl: './stepper.component.html',\n styleUrls: ['./stepper.component.scss'],\n ~~standalone: true,\n~~ imports: [SymbolComponent, NgClass],\n})\nexport class StepperComponent implements OnChanges {\n @Input() currentStepId: string \| undefined = undefined;\n @Input({\n required: true,\n })\n steps: Step[] = []; // Immutable after init.\n @Output() stepClicked: EventEmitter<Step> = new EventEmitter<Step>();\n\n stepTexts: { [index: number]: string } = {};\n currentIndex = 0;\n\n ngOnChanges(): void {\n if (this.steps?.length > 0 && this.currentStepId) {\n this.currentIndex = this.steps.findIndex(step => step.id === this.currentStepId);\n } else {\n this.currentIndex = 0;\n }\n }\n\n clickCurrentStep(step: Step): void {\n this.stepClicked.emit(step);\n }\n}\n","<div class=\"main\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <span class=\"item\">\n <span\n [ngClass]=\"{\n number: true,\n active: index === currentIndex,\n 'no-more-active': currentIndex > index \|\| (index !== currentIndex && step.visited),\n 'not-yet-active': currentIndex < index && !step.visited\n }\">\n {{ index + 1 }}\n </span>\n <span\n class=\"text\"\n [ngClass]=\"{ clickable: step.clickable }\"\n (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n {{ step.name }}\n </span>\n @if (!last) {\n <ap-symbol\n symbolId=\"chevron-right\"\n size=\"sm\" />\n }\n </span>\n }\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;~~MAaa~~,gBAAgB,CAAA;IAChB,aAAa,GAAuB,SAAS;AAItD,IAAA,KAAK,GAAW,EAAE,CAAC;AACT,IAAA,WAAW,GAAuB,IAAI,YAAY,EAAQ;IAEpE,SAAS,GAAgC,EAAE;IAC3C,YAAY,GAAG,CAAC;IAEhB,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,CAAC;;aAC7E;AACH,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC;;;AAI7B,IAAA,gBAAgB,CAAC,IAAU,EAAA;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;uGApBtB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,~~ECb7B~~,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EAAA~~,+7BA0BA,~~EDfc~~,MAAA,EAAA,CAAA,k3MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EAAA~~,eAAe,sHAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEzB,gBAAgB,EAAA,UAAA,EAAA,CAAA;~~kBAR5B~~,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,YAAY,~~EAAA~~,~~UAAA,EAGV,IAAI,EAAA,OAAA,EACP,~~CAAC,eAAe,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,+7BAAA,EAAA,MAAA,EAAA,CAAA,k3MAAA,CAAA,EAAA;8BAG1B,aAAa,EAAA,CAAA;sBAArB;gBAID,KAAK,EAAA,CAAA;sBAHJ,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA;gBAES,WAAW,EAAA,CAAA;sBAApB;;;~~AEnBL~~;;AAEG;;;;"}
1	+ {"version":3,"file":"agorapulse-ui-components-stepper.mjs","sources":["../../../libs/ui-components/stepper/src/stepper.component.ts","../../../libs/ui-components/stepper/src/stepper.component.html","../../../libs/ui-components/stepper/src/agorapulse-ui-components-stepper.ts"],"sourcesContent":["import { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';\nimport { Step } from './step.model';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-stepper',\n templateUrl: './stepper.component.html',\n styleUrls: ['./stepper.component.scss'],\n imports: [SymbolComponent, NgClass],\n})\nexport class StepperComponent implements OnChanges {\n @Input() currentStepId: string \| undefined = undefined;\n @Input({\n required: true,\n })\n steps: Step[] = []; // Immutable after init.\n @Output() stepClicked: EventEmitter<Step> = new EventEmitter<Step>();\n\n stepTexts: { [index: number]: string } = {};\n currentIndex = 0;\n\n ngOnChanges(): void {\n if (this.steps?.length > 0 && this.currentStepId) {\n this.currentIndex = this.steps.findIndex(step => step.id === this.currentStepId);\n } else {\n this.currentIndex = 0;\n }\n }\n\n clickCurrentStep(step: Step): void {\n this.stepClicked.emit(step);\n }\n}\n","<div class=\"main\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <span class=\"item\">\n <span\n [ngClass]=\"{\n number: true,\n active: index === currentIndex,\n 'no-more-active': currentIndex > index \|\| (index !== currentIndex && step.visited),\n 'not-yet-active': currentIndex < index && !step.visited\n }\">\n {{ index + 1 }}\n </span>\n <span\n class=\"text\"\n [ngClass]=\"{ clickable: step.clickable }\"\n (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n {{ step.name }}\n </span>\n @if (!last) {\n <ap-symbol\n symbolId=\"chevron-right\"\n size=\"sm\" />\n }\n </span>\n }\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;MAYa,gBAAgB,CAAA;IAChB,aAAa,GAAuB,SAAS;AAItD,IAAA,KAAK,GAAW,EAAE,CAAC;AACT,IAAA,WAAW,GAAuB,IAAI,YAAY,EAAQ;IAEpE,SAAS,GAAgC,EAAE;IAC3C,YAAY,GAAG,CAAC;IAEhB,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,CAAC;;aAC7E;AACH,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC;;;AAI7B,IAAA,gBAAgB,CAAC,IAAU,EAAA;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;uGApBtB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ7B,+7BA0BA,EAAA,MAAA,EAAA,CAAA,k3MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDhBc,eAAe,sHAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEzB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,YAAY,WAGb,CAAC,eAAe,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,+7BAAA,EAAA,MAAA,EAAA,CAAA,k3MAAA,CAAA,EAAA;8BAG1B,aAAa,EAAA,CAAA;sBAArB;gBAID,KAAK,EAAA,CAAA;sBAHJ,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA;gBAES,WAAW,EAAA,CAAA;sBAApB;;;AElBL;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-tag.mjs CHANGED Viewed

@@ -9,14 +9,14 @@ class TagComponent {
     constructor() {
         this.symbolRegistry.registerSymbols([apDeleteNoCircle, apPlus]);
     }
-    clearable = input(false, { transform: booleanAttribute });
-    add = input(false, { transform: booleanAttribute });
-    color = input('blue');
-    mini = input(false);
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    add = input(false, ...(ngDevMode ? [{ debugName: "add", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    color = input('blue', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    mini = input(false, ...(ngDevMode ? [{ debugName: "mini" }] : []));
     clear = output();
     added = output();
     content = viewChild.required('contentWrapper');
-    contentText = computed(() => this.content().nativeElement.innerText);
+    contentText = computed(() => this.content().nativeElement.innerText, ...(ngDevMode ? [{ debugName: "contentText" }] : []));
     onClear($event) {
         $event.stopImmediatePropagation();
         this.elementRef.nativeElement.remove();
@@ -26,12 +26,12 @@ class TagComponent {
         $event.stopImmediatePropagation();
         this.added.emit({ $event: $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: TagComponent, isStandalone: true, selector: "ap-tag", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, add: { classPropertyName: "add", publicName: "add", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear", added: "added" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    [class.blue]=\"color() === 'blue'\"\n    [class.menthol]=\"color() === 'menthol'\"\n    [class.grey]=\"color() === 'grey'\"\n    [class.tagOrange]=\"color() === 'tagOrange'\"\n    [class.green]=\"color() === 'green'\"\n    [class.red]=\"color() === 'red'\"\n    [class.clearable]=\"clearable()\"\n    [class.add]=\"add()\"\n    [class.mini]=\"mini()\">\n    <ng-content select=\"ap-symbol\" />\n    <ng-content select=\"ap-avatar\" />\n\n    <span #contentWrapper>\n        <ng-content />\n    </span>\n\n    @if (clearable()) {\n        <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n        <ap-close-button\n            [ariaLabel]=\"'clear ' + contentText()\"\n            (closed)=\"onClear($event)\" />\n    } @else if (add()) {\n        <button \n            class=\"add-button\"\n            type=\"button\"\n            aria-label=\"Add item\"\n            (click)=\"onAdd($event)\">\n            <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n        </button>\n    }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable,ap-tag>div.add{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}ap-tag>div .add-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none;cursor:pointer}@media (hover: hover){ap-tag>div .add-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-tag>div .add-button:hover{background:var(--comp-close-button-hover-background)}ap-tag>div .add-button:active{background:var(--comp-close-button-active-background);outline:none}ap-tag>div .add-button:focus:active{outline:none}\n"], dependencies: [{ kind: "component", type: CloseButtonComponent, selector: "ap-close-button", inputs: ["disabled", "ariaLabel", "dataTest"], outputs: ["closed"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TagComponent, isStandalone: true, selector: "ap-tag", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, add: { classPropertyName: "add", publicName: "add", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear", added: "added" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    [class.blue]=\"color() === 'blue'\"\n    [class.menthol]=\"color() === 'menthol'\"\n    [class.grey]=\"color() === 'grey'\"\n    [class.tagOrange]=\"color() === 'tagOrange'\"\n    [class.green]=\"color() === 'green'\"\n    [class.red]=\"color() === 'red'\"\n    [class.clearable]=\"clearable()\"\n    [class.add]=\"add()\"\n    [class.mini]=\"mini()\">\n    <ng-content select=\"ap-symbol\" />\n    <ng-content select=\"ap-avatar\" />\n\n    <span #contentWrapper>\n        <ng-content />\n    </span>\n\n    @if (clearable()) {\n        <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n        <ap-close-button\n            [ariaLabel]=\"'clear ' + contentText()\"\n            (closed)=\"onClear($event)\" />\n    } @else if (add()) {\n        <button \n            class=\"add-button\"\n            type=\"button\"\n            aria-label=\"Add item\"\n            (click)=\"onAdd($event)\">\n            <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n        </button>\n    }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable,ap-tag>div.add{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}ap-tag>div .add-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none;cursor:pointer}@media (hover: hover){ap-tag>div .add-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-tag>div .add-button:hover{background:var(--comp-close-button-hover-background)}ap-tag>div .add-button:active{background:var(--comp-close-button-active-background);outline:none}ap-tag>div .add-button:focus:active{outline:none}\n"], dependencies: [{ kind: "component", type: CloseButtonComponent, selector: "ap-close-button", inputs: ["disabled", "ariaLabel", "dataTest"], outputs: ["closed"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tag', standalone: true, imports: [CloseButtonComponent, SymbolComponent], encapsulation: ViewEncapsulation.None, template: "<div\n    [class.blue]=\"color() === 'blue'\"\n    [class.menthol]=\"color() === 'menthol'\"\n    [class.grey]=\"color() === 'grey'\"\n    [class.tagOrange]=\"color() === 'tagOrange'\"\n    [class.green]=\"color() === 'green'\"\n    [class.red]=\"color() === 'red'\"\n    [class.clearable]=\"clearable()\"\n    [class.add]=\"add()\"\n    [class.mini]=\"mini()\">\n    <ng-content select=\"ap-symbol\" />\n    <ng-content select=\"ap-avatar\" />\n\n    <span #contentWrapper>\n        <ng-content />\n    </span>\n\n    @if (clearable()) {\n        <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n        <ap-close-button\n            [ariaLabel]=\"'clear ' + contentText()\"\n            (closed)=\"onClear($event)\" />\n    } @else if (add()) {\n        <button \n            class=\"add-button\"\n            type=\"button\"\n            aria-label=\"Add item\"\n            (click)=\"onAdd($event)\">\n            <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n        </button>\n    }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable,ap-tag>div.add{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}ap-tag>div .add-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none;cursor:pointer}@media (hover: hover){ap-tag>div .add-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-tag>div .add-button:hover{background:var(--comp-close-button-hover-background)}ap-tag>div .add-button:active{background:var(--comp-close-button-active-background);outline:none}ap-tag>div .add-button:focus:active{outline:none}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tag', imports: [CloseButtonComponent, SymbolComponent], encapsulation: ViewEncapsulation.None, template: "<div\n    [class.blue]=\"color() === 'blue'\"\n    [class.menthol]=\"color() === 'menthol'\"\n    [class.grey]=\"color() === 'grey'\"\n    [class.tagOrange]=\"color() === 'tagOrange'\"\n    [class.green]=\"color() === 'green'\"\n    [class.red]=\"color() === 'red'\"\n    [class.clearable]=\"clearable()\"\n    [class.add]=\"add()\"\n    [class.mini]=\"mini()\">\n    <ng-content select=\"ap-symbol\" />\n    <ng-content select=\"ap-avatar\" />\n\n    <span #contentWrapper>\n        <ng-content />\n    </span>\n\n    @if (clearable()) {\n        <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n        <ap-close-button\n            [ariaLabel]=\"'clear ' + contentText()\"\n            (closed)=\"onClear($event)\" />\n    } @else if (add()) {\n        <button \n            class=\"add-button\"\n            type=\"button\"\n            aria-label=\"Add item\"\n            (click)=\"onAdd($event)\">\n            <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n        </button>\n    }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable,ap-tag>div.add{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}ap-tag>div .add-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none;cursor:pointer}@media (hover: hover){ap-tag>div .add-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-tag>div .add-button:hover{background:var(--comp-close-button-hover-background)}ap-tag>div .add-button:active{background:var(--comp-close-button-active-background);outline:none}ap-tag>div .add-button:focus:active{outline:none}\n"] }]
         }], ctorParameters: () => [] });
 /**

package/fesm2022/agorapulse-ui-components-tag.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-tag.mjs","sources":["../../../libs/ui-components/tag/src/tag.component.ts","../../../libs/ui-components/tag/src/tag.component.html","../../../libs/ui-components/tag/src/agorapulse-ui-components-tag.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { apDeleteNoCircle, apPlus, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nexport type TagColor = 'blue' \| 'grey' \| 'menthol' \| 'tagOrange' \| 'red' \| 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tag',\n ~~standalone: true,\n~~ templateUrl: './tag.component.html',\n imports: [CloseButtonComponent, SymbolComponent],\n styleUrls: ['./tag.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class TagComponent {\n private readonly elementRef: ElementRef = inject(ElementRef);\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apDeleteNoCircle, apPlus]);\n }\n\n clearable = input(false, { transform: booleanAttribute });\n add = input(false, { transform: booleanAttribute });\n color = input<TagColor>('blue');\n mini = input(false);\n\n clear = output<{ $event: MouseEvent \| PointerEvent }>();\n added = output<{ $event: MouseEvent \| PointerEvent \| KeyboardEvent }>();\n\n content = viewChild.required<ElementRef>('contentWrapper');\n contentText = computed(() => this.content().nativeElement.innerText);\n\n onClear($event: MouseEvent \| PointerEvent): void {\n $event.stopImmediatePropagation();\n this.elementRef.nativeElement.remove();\n this.clear.emit({ $event });\n }\n\n onAdd($event: Event): void {\n $event.stopImmediatePropagation();\n this.added.emit({ $event: $event as MouseEvent \| PointerEvent \| KeyboardEvent });\n }\n}\n","<div\n [class.blue]=\"color() === 'blue'\"\n [class.menthol]=\"color() === 'menthol'\"\n [class.grey]=\"color() === 'grey'\"\n [class.tagOrange]=\"color() === 'tagOrange'\"\n [class.green]=\"color() === 'green'\"\n [class.red]=\"color() === 'red'\"\n [class.clearable]=\"clearable()\"\n [class.add]=\"add()\"\n [class.mini]=\"mini()\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content />\n </span>\n\n @if (clearable()) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n } @else if (add()) {\n <button \n class=\"add-button\"\n type=\"button\"\n aria-label=\"Add item\"\n (click)=\"onAdd($event)\">\n <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n </button>\n }\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;~~MA2Ba~~,YAAY,CAAA;AACJ,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC;AAC3C,IAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC;AAExE,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;;~~IAGnE~~,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,~~CAAC~~;~~IACzD~~,GAAG,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,~~CAAC~~;AACnD,IAAA,KAAK,GAAG,KAAK,CAAW,MAAM,~~CAAC~~;AAC/B,IAAA,IAAI,GAAG,KAAK,CAAC,KAAK,~~CAAC~~;IAEnB,KAAK,GAAG,MAAM,EAAyC;IACvD,KAAK,GAAG,MAAM,EAAyD;AAEvE,IAAA,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAa,gBAAgB,CAAC;AAC1D,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,SAAS,~~CAAC~~;AAEpE,IAAA,OAAO,CAAC,MAAiC,EAAA;QACrC,MAAM,CAAC,wBAAwB,EAAE;AACjC,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE;QACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;;AAG/B,IAAA,KAAK,CAAC,MAAa,EAAA;QACf,MAAM,CAAC,wBAAwB,EAAE;QACjC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAmD,EAAE,CAAC;;uGA3B3E,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,~~EC3BzB~~,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EAAA~~,0kCAgCA,~~EDTc~~,MAAA,EAAA,CAAA,q6FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EAAA~~,oBAAoB,gIAAE,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAItC,YAAY,EAAA,UAAA,EAAA,CAAA;~~kBATxB~~,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,~~EACrC~~,QAAA,~~EAAA~~,QAAQ,~~cACN,IAAI,~~EAAA,OAAA,~~EAEP~~,CAAC,oBAAoB,EAAE,eAAe,CAAC,~~EAEjC~~,aAAA,~~EAAA~~,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,0kCAAA,EAAA,MAAA,EAAA,CAAA,q6FAAA,CAAA,EAAA;;;~~AEzBzC~~;;AAEG;;;;"}
1	+ {"version":3,"file":"agorapulse-ui-components-tag.mjs","sources":["../../../libs/ui-components/tag/src/tag.component.ts","../../../libs/ui-components/tag/src/tag.component.html","../../../libs/ui-components/tag/src/agorapulse-ui-components-tag.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { apDeleteNoCircle, apPlus, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nexport type TagColor = 'blue' \| 'grey' \| 'menthol' \| 'tagOrange' \| 'red' \| 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tag',\n templateUrl: './tag.component.html',\n imports: [CloseButtonComponent, SymbolComponent],\n styleUrls: ['./tag.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class TagComponent {\n private readonly elementRef: ElementRef = inject(ElementRef);\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apDeleteNoCircle, apPlus]);\n }\n\n clearable = input(false, { transform: booleanAttribute });\n add = input(false, { transform: booleanAttribute });\n color = input<TagColor>('blue');\n mini = input(false);\n\n clear = output<{ $event: MouseEvent \| PointerEvent }>();\n added = output<{ $event: MouseEvent \| PointerEvent \| KeyboardEvent }>();\n\n content = viewChild.required<ElementRef>('contentWrapper');\n contentText = computed(() => this.content().nativeElement.innerText);\n\n onClear($event: MouseEvent \| PointerEvent): void {\n $event.stopImmediatePropagation();\n this.elementRef.nativeElement.remove();\n this.clear.emit({ $event });\n }\n\n onAdd($event: Event): void {\n $event.stopImmediatePropagation();\n this.added.emit({ $event: $event as MouseEvent \| PointerEvent \| KeyboardEvent });\n }\n}\n","<div\n [class.blue]=\"color() === 'blue'\"\n [class.menthol]=\"color() === 'menthol'\"\n [class.grey]=\"color() === 'grey'\"\n [class.tagOrange]=\"color() === 'tagOrange'\"\n [class.green]=\"color() === 'green'\"\n [class.red]=\"color() === 'red'\"\n [class.clearable]=\"clearable()\"\n [class.add]=\"add()\"\n [class.mini]=\"mini()\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content />\n </span>\n\n @if (clearable()) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n } @else if (add()) {\n <button \n class=\"add-button\"\n type=\"button\"\n aria-label=\"Add item\"\n (click)=\"onAdd($event)\">\n <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n </button>\n }\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-text-measurement.mjs CHANGED Viewed

@@ -18,10 +18,10 @@ class TextMeasurementService {
         this.textDiv.style.fontFamily = fontFamily;
         return this.textDiv.getBoundingClientRect().width;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TextMeasurementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TextMeasurementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextMeasurementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextMeasurementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TextMeasurementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextMeasurementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/fesm2022/agorapulse-ui-components-textarea.mjs CHANGED Viewed

@@ -13,10 +13,10 @@ class TextareaDirective {
             textarea.rows = 3;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.9", type: TextareaDirective, isStandalone: true, selector: "[apTextarea]", inputs: { resizable: ["resizable", "resizable", booleanAttribute] }, host: { properties: { "class.resizable": "this.resizable" }, classAttribute: "ap-textarea" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.1.3", type: TextareaDirective, isStandalone: true, selector: "[apTextarea]", inputs: { resizable: ["resizable", "resizable", booleanAttribute] }, host: { properties: { "class.resizable": "this.resizable" }, classAttribute: "ap-textarea" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TextareaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextareaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[apTextarea]',

package/fesm2022/agorapulse-ui-components-toggle.mjs CHANGED Viewed

@@ -137,8 +137,8 @@ class ToggleComponent {
             event.stopPropagation();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: ToggleComponent, isStandalone: true, selector: "ap-toggle", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], labelPosition: "labelPosition", disabled: ["disabled", "disabled", booleanAttribute], checked: "checked", required: ["required", "required", booleanAttribute], confirm: "confirm", confirmMessage: "confirmMessage", confirmOk: "confirmOk", confirmCancel: "confirmCancel", confirmTitle: "confirmTitle", name: "name" }, outputs: { change: "change" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.3", type: ToggleComponent, isStandalone: true, selector: "ap-toggle", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], labelPosition: "labelPosition", disabled: ["disabled", "disabled", booleanAttribute], checked: "checked", required: ["required", "required", booleanAttribute], confirm: "confirm", confirmMessage: "confirmMessage", confirmOk: "confirmOk", confirmCancel: "confirmCancel", confirmTitle: "confirmTitle", name: "name" }, outputs: { change: "change" }, providers: [
             AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
             {
                 provide: NG_VALIDATORS,
@@ -148,9 +148,9 @@ class ToggleComponent {
             MatDialog,
         ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"toggle\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <input\n        #input\n        class=\"hidden\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [id]=\"name\"\n        [name]=\"name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [attr.data-test]=\"name\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-checked]=\"checked\"\n        [class.checked]=\"checked\"\n        (click)=\"onValueChange()\" />\n    <div\n        class=\"switch-container\"\n        [class.label-left]=\"labelPosition === 'left'\">\n        <div\n            class=\"switch\"\n            [class.checked]=\"checked\"\n            [class.disabled]=\"disabled\"\n            (click)=\"onValueChange()\">\n            <div class=\"knob\">\n                <ap-symbol\n                    [class.checked]=\"checked\"\n                    [symbolId]=\"checked ? 'check' : 'close'\" />\n            </div>\n        </div>\n        <label\n            #label\n            [class.disabled]=\"disabled\"\n            [for]=\"name\">\n            <ng-content />\n        </label>\n    </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:var(--ref-spacing-xxs);align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media (hover: hover){ap-toggle .toggle input[type=checkbox]:focus:not(.disabled)~.switch-container .switch{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-toggle .toggle input[type=checkbox]:disabled~.switch-container .switch{pointer-events:none;cursor:default}ap-toggle .toggle .switch-container{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-toggle .toggle .switch-container.label-left{flex-direction:row-reverse}ap-toggle .toggle .switch-container .switch{box-sizing:content-box;position:relative;display:flex;align-items:center;padding:2px;width:28px;height:12px;border-radius:16px;background:var(--ref-color-grey-60);transition:background-color .25s;cursor:pointer}ap-toggle .toggle .switch-container .switch:hover,ap-toggle .toggle .switch-container .switch:focus,ap-toggle .toggle .switch-container .switch:active{background:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob{color:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch .knob.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked:hover,ap-toggle .toggle .switch-container .switch.checked:focus{background:var(--ref-color-electric-blue-80)}ap-toggle .toggle .switch-container .switch.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked .knob{left:18px}ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol,ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol svg{color:var(--ref-color-electric-blue-150)}ap-toggle .toggle .switch-container .switch.disabled{background:var(--ref-color-grey-20)}ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol,ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol svg{color:var(--ref-color-grey-40)}ap-toggle .toggle .switch-container .switch .knob{width:12px;height:12px;background:#fff;border-radius:100%;position:absolute;transition:left .25s ease-in-out;left:2px}ap-toggle .toggle .switch-container .switch .knob ap-symbol,ap-toggle .toggle .switch-container .switch .knob ap-symbol svg{width:10px;height:10px;min-width:10px;max-width:10px;max-height:10px}ap-toggle .toggle .switch-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height)}ap-toggle .toggle .switch-container label:empty{display:none}ap-toggle .toggle .switch-container label.disabled{color:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container label:hover:not(.disabled){cursor:pointer}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-toggle', standalone: true, imports: [SymbolComponent], providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-toggle', imports: [SymbolComponent], providers: [
                         AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
                         {
                             provide: NG_VALIDATORS,

package/fesm2022/agorapulse-ui-components-toggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-toggle.mjs","sources":["../../../libs/ui-components/toggle/src/toggle.component.ts","../../../libs/ui-components/toggle/src/toggle.component.html","../../../libs/ui-components/toggle/src/agorapulse-ui-components-toggle.ts"],"sourcesContent":["import {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';\nimport { apCheck, apClose, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatDialog } from '@angular/material/dialog';\nimport { first } from 'rxjs/operators';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ToggleComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-toggle',\n styleUrls: ['./toggle.component.scss'],\n standalone: true,\n imports: [SymbolComponent],\n providers: [\n AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n {\n provide: NG_VALIDATORS,\n useExisting: ToggleComponent,\n multi: true,\n },\n MatDialog,\n ],\n templateUrl: './toggle.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class ToggleComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly dialog = inject(MatDialog);\n private readonly cdr = inject(ChangeDetectorRef);\n\n @ViewChild('input') inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label') labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel: string = '';\n @Input('aria-labelledby') ariaLabelledby: string \| null = null;\n @Input('aria-describedby') ariaDescribedby: string \| null = null;\n @Input() labelPosition: 'left' \| 'right' = 'right';\n @Input({\n transform: booleanAttribute,\n })\n disabled = false;\n @Input() checked = false;\n @Input({\n transform: booleanAttribute,\n })\n required = false;\n @Input() confirm = false;\n @Input() confirmMessage = 'If you toggle this, it will affect other things. Are you sure';\n @Input() confirmOk = 'Confirm';\n @Input() confirmCancel = 'Cancel';\n @Input() confirmTitle = 'Are you sure?';\n @Input({\n required: true,\n })\n set name(name: string) {\n if (!name.endsWith('Checkbox')) {\n this._name = name + 'Checkbox';\n } else {\n this._name = name;\n }\n }\n get name(): string {\n return this._name;\n }\n // eslint-disable-next-line\n @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n hasLabel: boolean = false;\n private _name = '';\n private _controlValueAccessorChangeFn!: (value: boolean) => void;\n onTouched!: () => void;\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.symbolRegistry.registerSymbols([apCheck, apClose]);\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n onValueChange() {\n if (!this.disabled) {\n if (!this.confirm) {\n if (this.onTouched) {\n this.onTouched();\n }\n this.changeValue();\n } else {\n const toggleConfirmModal = {\n contentText: this.confirmMessage,\n headerTitle: this.confirmTitle,\n footerCancelButtonLabel: this.confirmCancel,\n footerConfirmButtonLabel: this.confirmOk,\n footerConfirmButtonId: 'confirm',\n footerCancelButtonId: 'cancel',\n };\n const modalConfig = {\n matDialogConfig: {\n panelClass: 'design-system',\n width: '550px',\n },\n };\n\n const dialogRef = ConfirmModalComponent.open(this.dialog, toggleConfirmModal, modalConfig);\n dialogRef\n .afterClosed()\n .pipe(first())\n .subscribe(result => {\n if (result) {\n if (this.onTouched) {\n this.onTouched();\n }\n this.changeValue();\n }\n });\n }\n }\n }\n\n changeValue(): void {\n this.checked = !this.checked;\n this.focus();\n this.change.emit(this.checked);\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.checked);\n }\n\n // Assigning the value again here is redundant, but we have to do it in case it was\n // changed inside the `change` listener which will cause the input to be out of sync.\n if (this.inputElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n this.cdr.markForCheck();\n }\n\n focus() {\n this.inputElement.nativeElement.focus();\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n registerOnChange(fn: (value: boolean) => void): void {\n this._controlValueAccessorChangeFn = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n validate({ value }: FormControl) {\n return (\n this.required &&\n !value && {\n invalid: true,\n }\n );\n }\n\n _preventBubblingFromLabel(event: MouseEvent) {\n if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n event.stopPropagation();\n }\n }\n}\n","<div\n class=\"toggle\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <input\n #input\n class=\"hidden\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"name\"\n [name]=\"name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [attr.data-test]=\"name\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"checked\"\n [class.checked]=\"checked\"\n (click)=\"onValueChange()\" />\n <div\n class=\"switch-container\"\n [class.label-left]=\"labelPosition === 'left'\">\n <div\n class=\"switch\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n (click)=\"onValueChange()\">\n <div class=\"knob\">\n <ap-symbol\n [class.checked]=\"checked\"\n [symbolId]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"agorapulse-ui-components-toggle.mjs","sources":["../../../libs/ui-components/toggle/src/toggle.component.ts","../../../libs/ui-components/toggle/src/toggle.component.html","../../../libs/ui-components/toggle/src/agorapulse-ui-components-toggle.ts"],"sourcesContent":["import {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';\nimport { apCheck, apClose, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatDialog } from '@angular/material/dialog';\nimport { first } from 'rxjs/operators';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ToggleComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-toggle',\n styleUrls: ['./toggle.component.scss'],\n imports: [SymbolComponent],\n providers: [\n AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n {\n provide: NG_VALIDATORS,\n useExisting: ToggleComponent,\n multi: true,\n },\n MatDialog,\n ],\n templateUrl: './toggle.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class ToggleComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly dialog = inject(MatDialog);\n private readonly cdr = inject(ChangeDetectorRef);\n\n @ViewChild('input') inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label') labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel: string = '';\n @Input('aria-labelledby') ariaLabelledby: string \| null = null;\n @Input('aria-describedby') ariaDescribedby: string \| null = null;\n @Input() labelPosition: 'left' \| 'right' = 'right';\n @Input({\n transform: booleanAttribute,\n })\n disabled = false;\n @Input() checked = false;\n @Input({\n transform: booleanAttribute,\n })\n required = false;\n @Input() confirm = false;\n @Input() confirmMessage = 'If you toggle this, it will affect other things. Are you sure';\n @Input() confirmOk = 'Confirm';\n @Input() confirmCancel = 'Cancel';\n @Input() confirmTitle = 'Are you sure?';\n @Input({\n required: true,\n })\n set name(name: string) {\n if (!name.endsWith('Checkbox')) {\n this._name = name + 'Checkbox';\n } else {\n this._name = name;\n }\n }\n get name(): string {\n return this._name;\n }\n // eslint-disable-next-line\n @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n hasLabel: boolean = false;\n private _name = '';\n private _controlValueAccessorChangeFn!: (value: boolean) => void;\n onTouched!: () => void;\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.symbolRegistry.registerSymbols([apCheck, apClose]);\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n onValueChange() {\n if (!this.disabled) {\n if (!this.confirm) {\n if (this.onTouched) {\n this.onTouched();\n }\n this.changeValue();\n } else {\n const toggleConfirmModal = {\n contentText: this.confirmMessage,\n headerTitle: this.confirmTitle,\n footerCancelButtonLabel: this.confirmCancel,\n footerConfirmButtonLabel: this.confirmOk,\n footerConfirmButtonId: 'confirm',\n footerCancelButtonId: 'cancel',\n };\n const modalConfig = {\n matDialogConfig: {\n panelClass: 'design-system',\n width: '550px',\n },\n };\n\n const dialogRef = ConfirmModalComponent.open(this.dialog, toggleConfirmModal, modalConfig);\n dialogRef\n .afterClosed()\n .pipe(first())\n .subscribe(result => {\n if (result) {\n if (this.onTouched) {\n this.onTouched();\n }\n this.changeValue();\n }\n });\n }\n }\n }\n\n changeValue(): void {\n this.checked = !this.checked;\n this.focus();\n this.change.emit(this.checked);\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.checked);\n }\n\n // Assigning the value again here is redundant, but we have to do it in case it was\n // changed inside the `change` listener which will cause the input to be out of sync.\n if (this.inputElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n this.cdr.markForCheck();\n }\n\n focus() {\n this.inputElement.nativeElement.focus();\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n registerOnChange(fn: (value: boolean) => void): void {\n this._controlValueAccessorChangeFn = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n validate({ value }: FormControl) {\n return (\n this.required &&\n !value && {\n invalid: true,\n }\n );\n }\n\n _preventBubblingFromLabel(event: MouseEvent) {\n if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n event.stopPropagation();\n }\n }\n}\n","<div\n class=\"toggle\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <input\n #input\n class=\"hidden\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"name\"\n [name]=\"name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [attr.data-test]=\"name\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"checked\"\n [class.checked]=\"checked\"\n (click)=\"onValueChange()\" />\n <div\n class=\"switch-container\"\n [class.label-left]=\"labelPosition === 'left'\">\n <div\n class=\"switch\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n (click)=\"onValueChange()\">\n <div class=\"knob\">\n <ap-symbol\n [class.checked]=\"checked\"\n [symbolId]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-tooltip.mjs CHANGED Viewed

@@ -23,10 +23,10 @@ class TooltipService {
         const doc = document.documentElement;
         return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TooltipService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TooltipService, decorators: [{
             type: Injectable
         }] });
@@ -35,15 +35,15 @@ class TooltipDirective {
     zone = inject(NgZone);
     viewContainerRef = inject(ViewContainerRef);
     destroyRef = inject(DestroyRef);
-    apTooltip = input.required();
-    apTooltipPosition = input('top');
-    apTooltipShowDelay = input(80);
-    apTooltipHideDelay = input(0);
-    apTooltipDuration = input(0);
-    apTooltipDisabled = input(false);
-    apTooltipTruncatedTextOnly = input(false);
-    apTooltipTemplateContext = input();
-    apTooltipVirtualScrollElement = input();
+    apTooltip = input.required(...(ngDevMode ? [{ debugName: "apTooltip" }] : []));
+    apTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "apTooltipPosition" }] : []));
+    apTooltipShowDelay = input(80, ...(ngDevMode ? [{ debugName: "apTooltipShowDelay" }] : []));
+    apTooltipHideDelay = input(0, ...(ngDevMode ? [{ debugName: "apTooltipHideDelay" }] : []));
+    apTooltipDuration = input(0, ...(ngDevMode ? [{ debugName: "apTooltipDuration" }] : []));
+    apTooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "apTooltipDisabled" }] : []));
+    apTooltipTruncatedTextOnly = input(false, ...(ngDevMode ? [{ debugName: "apTooltipTruncatedTextOnly" }] : []));
+    apTooltipTemplateContext = input(...(ngDevMode ? [undefined, { debugName: "apTooltipTemplateContext" }] : []));
+    apTooltipVirtualScrollElement = input(...(ngDevMode ? [undefined, { debugName: "apTooltipVirtualScrollElement" }] : []));
     clickListener = undefined;
     container = undefined;
     hideTimeout;
@@ -418,10 +418,10 @@ class TooltipDirective {
             this.container.style.setProperty('--ap-tooltip-height', this.container.offsetHeight + 'px');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.9", type: TooltipDirective, isStandalone: true, selector: "[apTooltip]", inputs: { apTooltip: { classPropertyName: "apTooltip", publicName: "apTooltip", isSignal: true, isRequired: true, transformFunction: null }, apTooltipPosition: { classPropertyName: "apTooltipPosition", publicName: "apTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, apTooltipShowDelay: { classPropertyName: "apTooltipShowDelay", publicName: "apTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipHideDelay: { classPropertyName: "apTooltipHideDelay", publicName: "apTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDuration: { classPropertyName: "apTooltipDuration", publicName: "apTooltipDuration", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDisabled: { classPropertyName: "apTooltipDisabled", publicName: "apTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTruncatedTextOnly: { classPropertyName: "apTooltipTruncatedTextOnly", publicName: "apTooltipTruncatedTextOnly", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTemplateContext: { classPropertyName: "apTooltipTemplateContext", publicName: "apTooltipTemplateContext", isSignal: true, isRequired: false, transformFunction: null }, apTooltipVirtualScrollElement: { classPropertyName: "apTooltipVirtualScrollElement", publicName: "apTooltipVirtualScrollElement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: TooltipDirective, isStandalone: true, selector: "[apTooltip]", inputs: { apTooltip: { classPropertyName: "apTooltip", publicName: "apTooltip", isSignal: true, isRequired: true, transformFunction: null }, apTooltipPosition: { classPropertyName: "apTooltipPosition", publicName: "apTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, apTooltipShowDelay: { classPropertyName: "apTooltipShowDelay", publicName: "apTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipHideDelay: { classPropertyName: "apTooltipHideDelay", publicName: "apTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDuration: { classPropertyName: "apTooltipDuration", publicName: "apTooltipDuration", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDisabled: { classPropertyName: "apTooltipDisabled", publicName: "apTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTruncatedTextOnly: { classPropertyName: "apTooltipTruncatedTextOnly", publicName: "apTooltipTruncatedTextOnly", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTemplateContext: { classPropertyName: "apTooltipTemplateContext", publicName: "apTooltipTemplateContext", isSignal: true, isRequired: false, transformFunction: null }, apTooltipVirtualScrollElement: { classPropertyName: "apTooltipVirtualScrollElement", publicName: "apTooltipVirtualScrollElement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[apTooltip]', standalone: true }]
         }] });