@agorapulse/ui-components 17.5.0-beta.1 → 17.5.1-beta.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.
- package/agorapulse-ui-components-1.0.0-SNAPSHOT.tgz +0 -0
- package/avatar/avatar.component.d.ts +3 -94
- package/esm2022/autocomplete/autocomplete.component.mjs +2 -2
- package/esm2022/avatar/avatar.component.mjs +13 -68
- package/esm2022/button/button.component.mjs +2 -2
- package/esm2022/checkbox/checkbox.component.mjs +1 -1
- package/esm2022/datepicker/datepicker.component.mjs +2 -2
- package/esm2022/form-message/form-message.component.mjs +1 -1
- package/esm2022/icon-button/icon-button.component.mjs +2 -2
- package/esm2022/infobox/infobox.component.mjs +2 -2
- package/esm2022/input-search/input-search.component.mjs +1 -1
- package/esm2022/labels/label.component.mjs +1 -1
- package/esm2022/legacy/input/input.component.mjs +1 -1
- package/esm2022/legacy/select/select.component.mjs +2 -2
- package/esm2022/legacy/textarea/textarea.component.mjs +1 -1
- package/esm2022/media-display-overlay/media-display-overlay-dialog.component.mjs +2 -2
- package/esm2022/modal/modal.component.mjs +2 -2
- package/esm2022/neo-datepicker/neo-datepicker.component.mjs +2 -2
- package/esm2022/paginator/paginator.component.mjs +2 -2
- package/esm2022/password-input/password-input.component.mjs +2 -2
- package/esm2022/select/dropdown-item-multiple-one-line/dropdown-item-multiple-one-line.component.mjs +2 -2
- package/esm2022/select/dropdown-item-multiple-two-lines/dropdown-item-multiple-two-lines.component.mjs +2 -2
- package/esm2022/select/dropdown-item-single-one-line/dropdown-item-single-one-line.component.mjs +2 -2
- package/esm2022/select/dropdown-item-single-two-lines/dropdown-item-single-two-lines.component.mjs +2 -2
- package/esm2022/select/dropdown-search-form/dropdown-search-form.component.mjs +2 -2
- package/esm2022/select/select-base.directive.mjs +3 -3
- package/esm2022/select/select-label-multiple/select-label-multiple.component.mjs +1 -1
- package/esm2022/snackbars-thread/component/snackbars-thread.component.mjs +2 -2
- package/esm2022/social-button/social-button.component.mjs +2 -2
- package/esm2022/split-button/split-button.component.mjs +5 -8
- package/esm2022/stepper/stepper.component.mjs +2 -2
- package/esm2022/tag/tag.component.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-avatar.mjs +13 -68
- package/fesm2022/agorapulse-ui-components-avatar.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-button.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-checkbox.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-form-message.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-form-message.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-infobox.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input-search.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-input-search.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-input.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-input.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-select.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-modal.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-modal.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-paginator.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-paginator.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-password-input.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-password-input.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +7 -7
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-snackbars-thread.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-snackbars-thread.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-social-button.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +4 -7
- package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-stepper.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-stepper.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tag.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-tag.mjs.map +1 -1
- package/package.json +59 -59
- package/select/select-label-multiple/select-label-multiple.component.d.ts +1 -1
- package/split-button/split-button.component.d.ts +3 -3
- package/agorapulse-ui-components-17.5.0-beta.1.tgz +0 -0
|
@@ -20,7 +20,7 @@ export class StepperComponent {
|
|
|
20
20
|
this.stepClicked.emit(step);
|
|
21
21
|
}
|
|
22
22
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: StepperComponent, isStandalone: true, selector: "ap-stepper", inputs: { currentStep: "currentStep", 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=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: ["
|
|
23
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: StepperComponent, isStandalone: true, selector: "ap-stepper", inputs: { currentStep: "currentStep", 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=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 });
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StepperComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
@@ -35,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
|
|
|
35
35
|
}], stepClicked: [{
|
|
36
36
|
type: Output
|
|
37
37
|
}] } });
|
|
38
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvc3RlcHBlci9zcmMvc3RlcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvc3RlcHBlci9zcmMvc3RlcHBlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzFDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBVzNHLE1BQU0sT0FBTyxnQkFBZ0I7SUFDaEIsV0FBVyxHQUFxQixTQUFTLENBQUM7SUFJbkQsS0FBSyxHQUFXLEVBQUUsQ0FBQyxDQUFDLHdCQUF3QjtJQUNsQyxXQUFXLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7SUFFckUsU0FBUyxHQUFnQyxFQUFFLENBQUM7SUFDNUMsWUFBWSxHQUFHLENBQUMsQ0FBQztJQUVqQixXQUFXO1FBQ1AsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQzdDLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLElBQUksQ0FBQyxXQUFXLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDdkYsQ0FBQzthQUFNLENBQUM7WUFDSixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQztRQUMxQixDQUFDO0lBQ0wsQ0FBQztJQUVELGdCQUFnQixDQUFDLElBQVU7UUFDdkIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQzt1R0FyQlEsZ0JBQWdCOzJGQUFoQixnQkFBZ0IsNExDYjdCLCs3QkEwQkEsb3lNRGZjLGVBQWUsc0hBQUUsT0FBTzs7MkZBRXpCLGdCQUFnQjtrQkFSNUIsU0FBUztzQ0FDVyx1QkFBdUIsQ0FBQyxNQUFNLFlBQ3JDLFlBQVksY0FHVixJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsT0FBTyxDQUFDOzhCQUcxQixXQUFXO3NCQUFuQixLQUFLO2dCQUlOLEtBQUs7c0JBSEosS0FBSzt1QkFBQzt3QkFDSCxRQUFRLEVBQUUsSUFBSTtxQkFDakI7Z0JBRVMsV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFN5bWJvbENvbXBvbmVudCB9IGZyb20gJ0BhZ29yYXB1bHNlL3VpLXN5bWJvbCc7XG5pbXBvcnQgeyBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdGVwIH0gZnJvbSAnLi9zdGVwLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgc2VsZWN0b3I6ICdhcC1zdGVwcGVyJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc3RlcHBlci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3RlcHBlci5jb21wb25lbnQuc2NzcyddLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaW1wb3J0czogW1N5bWJvbENvbXBvbmVudCwgTmdDbGFzc10sXG59KVxuZXhwb3J0IGNsYXNzIFN0ZXBwZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAgIEBJbnB1dCgpIGN1cnJlbnRTdGVwOiBTdGVwIHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkO1xuICAgIEBJbnB1dCh7XG4gICAgICAgIHJlcXVpcmVkOiB0cnVlLFxuICAgIH0pXG4gICAgc3RlcHM6IFN0ZXBbXSA9IFtdOyAvLyBJbW11dGFibGUgYWZ0ZXIgaW5pdC5cbiAgICBAT3V0cHV0KCkgc3RlcENsaWNrZWQ6IEV2ZW50RW1pdHRlcjxTdGVwPiA9IG5ldyBFdmVudEVtaXR0ZXI8U3RlcD4oKTtcblxuICAgIHN0ZXBUZXh0czogeyBbaW5kZXg6IG51bWJlcl06IHN0cmluZyB9ID0ge307XG4gICAgY3VycmVudEluZGV4ID0gMDtcblxuICAgIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5zdGVwcz8ubGVuZ3RoID4gMCAmJiB0aGlzLmN1cnJlbnRTdGVwKSB7XG4gICAgICAgICAgICB0aGlzLmN1cnJlbnRJbmRleCA9IHRoaXMuc3RlcHMuZmluZEluZGV4KHN0ZXAgPT4gc3RlcC5pZCA9PT0gdGhpcy5jdXJyZW50U3RlcD8uaWQpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5jdXJyZW50SW5kZXggPSAwO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgY2xpY2tDdXJyZW50U3RlcChzdGVwOiBTdGVwKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc3RlcENsaWNrZWQuZW1pdChzdGVwKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibWFpblwiPlxuICAgIEBmb3IgKHN0ZXAgb2Ygc3RlcHM7IHRyYWNrIHN0ZXA7IGxldCBpbmRleCA9ICRpbmRleDsgbGV0IGxhc3QgPSAkbGFzdCkge1xuICAgICAgICA8c3BhbiBjbGFzcz1cIml0ZW1cIj5cbiAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAgICAgICAgICAgICBudW1iZXI6IHRydWUsXG4gICAgICAgICAgICAgICAgICAgIGFjdGl2ZTogaW5kZXggPT09IGN1cnJlbnRJbmRleCxcbiAgICAgICAgICAgICAgICAgICAgJ25vLW1vcmUtYWN0aXZlJzogY3VycmVudEluZGV4ID4gaW5kZXggfHwgKGluZGV4ICE9PSBjdXJyZW50SW5kZXggJiYgc3RlcC52aXNpdGVkKSxcbiAgICAgICAgICAgICAgICAgICAgJ25vdC15ZXQtYWN0aXZlJzogY3VycmVudEluZGV4IDwgaW5kZXggJiYgIXN0ZXAudmlzaXRlZFxuICAgICAgICAgICAgICAgIH1cIj5cbiAgICAgICAgICAgICAgICB7eyBpbmRleCArIDEgfX1cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0XCJcbiAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJ7IGNsaWNrYWJsZTogc3RlcC5jbGlja2FibGUgfVwiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cInN0ZXAuY2xpY2thYmxlID8gY2xpY2tDdXJyZW50U3RlcChzdGVwKSA6IGZhbHNlXCI+XG4gICAgICAgICAgICAgICAge3sgc3RlcC5uYW1lIH19XG4gICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICBAaWYgKCFsYXN0KSB7XG4gICAgICAgICAgICAgICAgPGFwLXN5bWJvbFxuICAgICAgICAgICAgICAgICAgICBzeW1ib2xJZD1cImNoZXZyb24tcmlnaHRcIlxuICAgICAgICAgICAgICAgICAgICBzaXplPVwic21cIiAvPlxuICAgICAgICAgICAgfVxuICAgICAgICA8L3NwYW4+XG4gICAgfVxuPC9kaXY+XG4iXX0=
|
|
@@ -17,7 +17,7 @@ export class TagComponent {
|
|
|
17
17
|
this.clear.emit({ $event });
|
|
18
18
|
}
|
|
19
19
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TagComponent, isStandalone: true, selector: "ap-tag", inputs: { clearable: ["clearable", "clearable", booleanAttribute], color: "color", mini: "mini" }, outputs: { clear: "clear" }, 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.mini]=\"mini\">\n <ng-content select=\"ap-symbol\"></ng-content>\n <ng-content select=\"ap-avatar\"></ng-content>\n\n <span>\n <ng-content></ng-content>\n </span>\n @if (clearable) {\n @if (clearable) {\n <button\n type=\"button\"\n class=\"delete-button\"\n (click)=\"onClear($event)\">\n <ap-symbol\n symbolId=\"delete-no-circle\"\n size=\"xs\" />\n </button>\n }\n }\n</div>", 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{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 button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;align-self:center;cursor:pointer;max-width:var(--button-size);width:var(--button-size);height:var(--button-size);border-radius:var(--ref-spacing-xxxs)}ap-tag>div button ap-symbol{color:var(--ref-color-grey-80)}ap-tag>div button:hover{background-color:#3445631a}ap-tag>div button:hover ap-symbol{color:var(--ref-color-grey-100)}ap-tag>div button:focus{-webkit-box-shadow:0px 0px 0px 1px var(--ref-color-white),0px 0px 0px 3px var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}ap-tag>div button:active{background-color:#34456333}ap-tag>div button:active ap-symbol{color:var(--ref-color-grey-100)}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)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TagComponent, isStandalone: true, selector: "ap-tag", inputs: { clearable: ["clearable", "clearable", booleanAttribute], color: "color", mini: "mini" }, outputs: { clear: "clear" }, 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.mini]=\"mini\">\n <ng-content select=\"ap-symbol\"></ng-content>\n <ng-content select=\"ap-avatar\"></ng-content>\n\n <span>\n <ng-content></ng-content>\n </span>\n @if (clearable) {\n @if (clearable) {\n <button\n type=\"button\"\n class=\"delete-button\"\n (click)=\"onClear($event)\">\n <ap-symbol\n symbolId=\"delete-no-circle\"\n size=\"xs\" />\n </button>\n }\n }\n</div>", 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{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 button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;align-self:center;cursor:pointer;max-width:var(--button-size);width:var(--button-size);height:var(--button-size);border-radius:var(--ref-spacing-xxxs)}ap-tag>div button ap-symbol{color:var(--ref-color-grey-80)}ap-tag>div button:hover{background-color:#3445631a}ap-tag>div button:hover ap-symbol{color:var(--ref-color-grey-100)}ap-tag>div button:focus{-webkit-box-shadow:0px 0px 0px 1px var(--ref-color-white),0px 0px 0px 3px var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}ap-tag>div button:active{background-color:#34456333}ap-tag>div button:active ap-symbol{color:var(--ref-color-grey-100)}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)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
21
21
|
}
|
|
22
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TagComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
@@ -76,7 +76,7 @@ class AutocompleteComponent {
|
|
|
76
76
|
this.resultsLoadingSignal.set(false);
|
|
77
77
|
}
|
|
78
78
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
79
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
80
80
|
}
|
|
81
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
82
82
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n inject,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-autocomplete',\n styleUrls: ['./autocomplete.component.scss'],\n standalone: true,\n imports: [\n SymbolComponent,\n FormFieldComponent,\n InputGroupComponent,\n FormsModule,\n LoaderComponent,\n InputDirective,\n AvatarComponent,\n OverlayModule,\n ],\n templateUrl: './autocomplete.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> | string> implements AfterViewInit {\n @Input() placeholder = 'Search...';\n @Input() label = '';\n @Input() inputId = '';\n @Input() loadingText = 'Loading Items';\n @Input() notFoundText = 'No result found';\n @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n @Input() trackByFn: (index: number, item: T) => T | T[keyof T] = (_: number, item: T) => item;\n @Input() set disabled(value: boolean) {\n this.disabledSignal.set(value);\n }\n @Input() optionLabel?: string;\n @Input() optionCaption?: string;\n @Input() optionImageUrl?: string;\n @Input() optionValue?: string;\n @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n @Output()\n selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n readonly disabledSignal = signal(false);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly searchTerm$ = new BehaviorSubject<string>('');\n readonly searchTermSignal = toSignal(this.searchTerm$);\n readonly showResultsSignal = signal(false);\n readonly resultsLoadingSignal = signal(false);\n readonly searchResultsSignal = toSignal<any[]>(\n this.searchTerm$.pipe(\n skip(1),\n debounceTime(250),\n distinctUntilChanged(),\n tap(() => this.showResultsSignal.set(false)),\n filter(term => term.length > 0),\n tap(() => this.showResultsSignal.set(true)),\n tap(() => this.resultsLoadingSignal.set(true)),\n switchMap(term => {\n return this.searchFn(term);\n }),\n tap(() => this.resultsLoadingSignal.set(false))\n )\n );\n private readonly ngZone = inject(NgZone);\n private readonly el = inject(ElementRef);\n readonly inputWidthSignal = signal(0);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch]);\n this.ngZone.runOutsideAngular(() => {\n fromEvent(document, 'click')\n .pipe(takeUntilDestroyed())\n .subscribe(e => {\n const clickedInside = this.el.nativeElement.contains(e.target);\n if (!clickedInside) {\n this.ngZone.run(() => {\n this.resetAutocomplete();\n });\n }\n });\n });\n }\n\n ngAfterViewInit(): void {\n this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n }\n\n onSelectOption(option: T) {\n if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n this.selectOption.emit(option[this.optionValue]);\n } else {\n this.selectOption.emit(option);\n }\n this.resetAutocomplete();\n }\n\n private resetAutocomplete() {\n this.searchTerm$.next('');\n this.showResultsSignal.set(false);\n this.resultsLoadingSignal.set(false);\n }\n}\n","<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;MA6Ca,qBAAqB,CAAA;IACrB,WAAW,GAAG,WAAW,CAAC;IAC1B,KAAK,GAAG,EAAE,CAAC;IACX,OAAO,GAAG,EAAE,CAAC;IACb,WAAW,GAAG,eAAe,CAAC;IAC9B,YAAY,GAAG,iBAAiB,CAAC;AACf,IAAA,QAAQ,CAAqC;IAC/D,SAAS,GAA+C,CAAC,CAAS,EAAE,IAAO,KAAK,IAAI,CAAC;IAC9F,IAAa,QAAQ,CAAC,KAAc,EAAA;AAChC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KAClC;AACQ,IAAA,WAAW,CAAU;AACrB,IAAA,aAAa,CAAU;AACvB,IAAA,cAAc,CAAU;AACxB,IAAA,WAAW,CAAU;AACrB,IAAA,kBAAkB,CAA8B;AAEX,IAAA,SAAS,CAAkC;AAGzF,IAAA,YAAY,GAA0B,IAAI,YAAY,EAAW,CAAC;AAEzD,IAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC/B,IAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC,CAAC;AACxD,IAAA,WAAW,GAAG,IAAI,eAAe,CAAS,EAAE,CAAC,CAAC;AAC9C,IAAA,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;AAC9C,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAClC,IAAA,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACrC,IAAA,mBAAmB,GAAG,QAAQ,CACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CACjB,IAAI,CAAC,CAAC,CAAC,EACP,YAAY,CAAC,GAAG,CAAC,EACjB,oBAAoB,EAAE,EACtB,GAAG,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAC5C,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,EAC/B,GAAG,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAC3C,GAAG,CAAC,MAAM,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAC9C,SAAS,CAAC,IAAI,IAAG;AACb,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC/B,KAAC,CAAC,EACF,GAAG,CAAC,MAAM,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAClD,CACJ,CAAC;AACe,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AACxB,IAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAChC,IAAA,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAEtC,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAChD,QAAA,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAK;AAC/B,YAAA,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;iBACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;iBAC1B,SAAS,CAAC,CAAC,IAAG;AACX,gBAAA,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBAC/D,IAAI,CAAC,aAAa,EAAE;AAChB,oBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAK;wBACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;AAC7B,qBAAC,CAAC,CAAC;iBACN;AACL,aAAC,CAAC,CAAC;AACX,SAAC,CAAC,CAAC;KACN;IAED,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAE,IAAI,CAAC,SAAS,CAAC,aAA6B,CAAC,WAAW,CAAC,CAAC;KACxF;AAED,IAAA,cAAc,CAAC,MAAS,EAAA;AACpB,QAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;AAC5E,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;SACpD;aAAM;AACH,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAClC;QACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAEO,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1B,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAClC,QAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KACxC;uGAhFQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,ujBAiBE,UAAU,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9D9C,w4KAoGA,EDnEQ,MAAA,EAAA,CAAA,w+FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,6FACf,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,mBAAmB,EACnB,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,+mBACX,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EACd,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,4MACf,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,qEAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,EAAA,8BAAA,EAAA,qCAAA,EAAA,4BAAA,EAAA,4BAAA,EAAA,0BAAA,EAAA,2BAAA,EAAA,6BAAA,EAAA,8BAAA,EAAA,kCAAA,EAAA,+BAAA,EAAA,mCAAA,EAAA,mCAAA,EAAA,yBAAA,EAAA,iCAAA,EAAA,sCAAA,EAAA,gCAAA,EAAA,iCAAA,EAAA,uCAAA,EAAA,kCAAA,EAAA,yBAAA,EAAA,wCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,4DAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAKR,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAlBjC,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,iBAAiB,EAAA,UAAA,EAEf,IAAI,EACP,OAAA,EAAA;wBACL,eAAe;wBACf,kBAAkB;wBAClB,mBAAmB;wBACnB,WAAW;wBACX,eAAe;wBACf,cAAc;wBACd,eAAe;wBACf,aAAa;qBAChB,EAEc,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,w4KAAA,EAAA,MAAA,EAAA,CAAA,w+FAAA,CAAA,EAAA,CAAA;wDAG5B,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACqB,QAAQ,EAAA,CAAA;sBAAlC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAChB,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACO,QAAQ,EAAA,CAAA;sBAApB,KAAK;gBAGG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBAEwC,SAAS,EAAA,CAAA;sBAAtD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAG5C,YAAY,EAAA,CAAA;sBADX,MAAM;;;AEhEX;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n inject,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-autocomplete',\n styleUrls: ['./autocomplete.component.scss'],\n standalone: true,\n imports: [\n SymbolComponent,\n FormFieldComponent,\n InputGroupComponent,\n FormsModule,\n LoaderComponent,\n InputDirective,\n AvatarComponent,\n OverlayModule,\n ],\n templateUrl: './autocomplete.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> | string> implements AfterViewInit {\n @Input() placeholder = 'Search...';\n @Input() label = '';\n @Input() inputId = '';\n @Input() loadingText = 'Loading Items';\n @Input() notFoundText = 'No result found';\n @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n @Input() trackByFn: (index: number, item: T) => T | T[keyof T] = (_: number, item: T) => item;\n @Input() set disabled(value: boolean) {\n this.disabledSignal.set(value);\n }\n @Input() optionLabel?: string;\n @Input() optionCaption?: string;\n @Input() optionImageUrl?: string;\n @Input() optionValue?: string;\n @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n @Output()\n selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n readonly disabledSignal = signal(false);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly searchTerm$ = new BehaviorSubject<string>('');\n readonly searchTermSignal = toSignal(this.searchTerm$);\n readonly showResultsSignal = signal(false);\n readonly resultsLoadingSignal = signal(false);\n readonly searchResultsSignal = toSignal<any[]>(\n this.searchTerm$.pipe(\n skip(1),\n debounceTime(250),\n distinctUntilChanged(),\n tap(() => this.showResultsSignal.set(false)),\n filter(term => term.length > 0),\n tap(() => this.showResultsSignal.set(true)),\n tap(() => this.resultsLoadingSignal.set(true)),\n switchMap(term => {\n return this.searchFn(term);\n }),\n tap(() => this.resultsLoadingSignal.set(false))\n )\n );\n private readonly ngZone = inject(NgZone);\n private readonly el = inject(ElementRef);\n readonly inputWidthSignal = signal(0);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch]);\n this.ngZone.runOutsideAngular(() => {\n fromEvent(document, 'click')\n .pipe(takeUntilDestroyed())\n .subscribe(e => {\n const clickedInside = this.el.nativeElement.contains(e.target);\n if (!clickedInside) {\n this.ngZone.run(() => {\n this.resetAutocomplete();\n });\n }\n });\n });\n }\n\n ngAfterViewInit(): void {\n this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n }\n\n onSelectOption(option: T) {\n if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n this.selectOption.emit(option[this.optionValue]);\n } else {\n this.selectOption.emit(option);\n }\n this.resetAutocomplete();\n }\n\n private resetAutocomplete() {\n this.searchTerm$.next('');\n this.showResultsSignal.set(false);\n this.resultsLoadingSignal.set(false);\n }\n}\n","<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\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,67 +1,10 @@
|
|
|
1
1
|
import * as i1 from '@agorapulse/ui-symbol';
|
|
2
|
-
import {
|
|
2
|
+
import { networkDescription, apSingleNeutral, apShowTheaterMaskHappy, toNetworkSymbol, SymbolComponent, NetworkSymbolPipe } from '@agorapulse/ui-symbol';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { NgOptimizedImage, NgClass, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
6
|
import { input, booleanAttribute, signal, computed, effect, untracked, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
7
7
|
|
|
8
|
-
const networkSymbolByNetwork = {
|
|
9
|
-
bluesky: {
|
|
10
|
-
round: true,
|
|
11
|
-
symbol: apBlueskyOfficial,
|
|
12
|
-
},
|
|
13
|
-
facebook: {
|
|
14
|
-
round: true,
|
|
15
|
-
symbol: apFacebookOfficial,
|
|
16
|
-
},
|
|
17
|
-
google: {
|
|
18
|
-
round: false,
|
|
19
|
-
symbol: apGoogleMyBusinessOfficial,
|
|
20
|
-
},
|
|
21
|
-
instagram: {
|
|
22
|
-
round: false,
|
|
23
|
-
symbol: 'instagram-official', // embedded
|
|
24
|
-
},
|
|
25
|
-
linkedin: {
|
|
26
|
-
round: false,
|
|
27
|
-
symbol: apLinkedinOfficial,
|
|
28
|
-
},
|
|
29
|
-
pinterest: {
|
|
30
|
-
round: true,
|
|
31
|
-
symbol: apPinterestOfficial,
|
|
32
|
-
},
|
|
33
|
-
threads: {
|
|
34
|
-
round: true,
|
|
35
|
-
symbol: apNsThreadsLogo,
|
|
36
|
-
},
|
|
37
|
-
tiktok: {
|
|
38
|
-
round: true,
|
|
39
|
-
symbol: apTiktokOfficial,
|
|
40
|
-
},
|
|
41
|
-
twitter: {
|
|
42
|
-
round: true,
|
|
43
|
-
symbol: apXOfficial,
|
|
44
|
-
},
|
|
45
|
-
webBlog: {
|
|
46
|
-
round: true,
|
|
47
|
-
symbol: apWebBlogs,
|
|
48
|
-
},
|
|
49
|
-
webNews: {
|
|
50
|
-
round: true,
|
|
51
|
-
symbol: apWebNews,
|
|
52
|
-
},
|
|
53
|
-
X: {
|
|
54
|
-
round: true,
|
|
55
|
-
symbol: apXOfficial,
|
|
56
|
-
},
|
|
57
|
-
youtube: {
|
|
58
|
-
round: true,
|
|
59
|
-
symbol: apYoutubeOfficial,
|
|
60
|
-
},
|
|
61
|
-
};
|
|
62
|
-
function toSymbol(symbol) {
|
|
63
|
-
return typeof symbol == 'string' ? symbol : symbol.name;
|
|
64
|
-
}
|
|
65
8
|
const onlineIconSizeByAvatarSize = {
|
|
66
9
|
56: 16,
|
|
67
10
|
48: 12,
|
|
@@ -125,7 +68,9 @@ class AvatarComponent {
|
|
|
125
68
|
});
|
|
126
69
|
constructor(symbolRegistry, ngStyle) {
|
|
127
70
|
this.ngStyle = ngStyle;
|
|
128
|
-
|
|
71
|
+
const networkSymbols = Object.values(networkDescription) //
|
|
72
|
+
.flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []));
|
|
73
|
+
symbolRegistry.registerSymbols([...networkSymbols, apSingleNeutral, apShowTheaterMaskHappy]);
|
|
129
74
|
effect(() => {
|
|
130
75
|
this.ngStyle.ngStyle = this.buildHostStyle();
|
|
131
76
|
this.ngStyle.ngDoCheck();
|
|
@@ -141,10 +86,10 @@ class AvatarComponent {
|
|
|
141
86
|
buildBackgroundView() {
|
|
142
87
|
let bgView = {};
|
|
143
88
|
if (this.useBigNetwork()) {
|
|
144
|
-
bgView = { mode: 'symbol', symbolId:
|
|
89
|
+
bgView = { mode: 'symbol', symbolId: toNetworkSymbol(this.network()), big: true };
|
|
145
90
|
}
|
|
146
91
|
else if (this.anonymous()) {
|
|
147
|
-
bgView = { mode: 'symbol', symbolId:
|
|
92
|
+
bgView = { mode: 'symbol', symbolId: apShowTheaterMaskHappy.name };
|
|
148
93
|
}
|
|
149
94
|
else {
|
|
150
95
|
const profilePicture = this.profilePicture();
|
|
@@ -167,7 +112,7 @@ class AvatarComponent {
|
|
|
167
112
|
}
|
|
168
113
|
else {
|
|
169
114
|
if (!this.useBigNetwork()) {
|
|
170
|
-
bgView = { mode: 'symbol', symbolId:
|
|
115
|
+
bgView = { mode: 'symbol', symbolId: apSingleNeutral.name };
|
|
171
116
|
}
|
|
172
117
|
}
|
|
173
118
|
}
|
|
@@ -179,8 +124,8 @@ class AvatarComponent {
|
|
|
179
124
|
const network = this.network();
|
|
180
125
|
if (!this.automaticBigSymbolNetwork()) {
|
|
181
126
|
if (network && !this.bigNetwork() && !this.hideNetwork()) {
|
|
182
|
-
const { symbol, round } =
|
|
183
|
-
ovlView = { mode: 'network', network,
|
|
127
|
+
const { symbol, round } = networkDescription[network];
|
|
128
|
+
ovlView = { mode: 'network', network, round };
|
|
184
129
|
}
|
|
185
130
|
else if (this.online()) {
|
|
186
131
|
ovlView = { mode: 'online' };
|
|
@@ -202,18 +147,18 @@ class AvatarComponent {
|
|
|
202
147
|
};
|
|
203
148
|
}
|
|
204
149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i2.NgStyle }], target: i0.ɵɵFactoryTarget.Component });
|
|
205
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { profilePicture: { classPropertyName: "profilePicture", publicName: "profilePicture", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, showInitials: { classPropertyName: "showInitials", publicName: "showInitials", isSignal: true, isRequired: false, transformFunction: null }, bigNetwork: { classPropertyName: "bigNetwork", publicName: "bigNetwork", isSignal: true, isRequired: false, transformFunction: null }, anonymous: { classPropertyName: "anonymous", publicName: "anonymous", isSignal: true, isRequired: false, transformFunction: null }, online: { classPropertyName: "online", publicName: "online", isSignal: true, isRequired: false, transformFunction: null }, hideNetwork: { classPropertyName: "hideNetwork", publicName: "youtubeAvatarMode", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.background-default": "!useBigNetwork()" } }, hostDirectives: [{ directive: i2.NgStyle }], ngImport: i0, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n @switch (bgView.mode) {\n @case ('image') {\n <img\n class=\"bg-image\"\n [ngSrc]=\"bgView.image.src\"\n [width]=\"bgView.image.size\"\n [height]=\"bgView.image.size\"\n [alt]=\"bgView.image.alt\"\n (error)=\"onImageError()\" />\n }\n @case ('initials') {\n <div class=\"bg-initials\">\n {{ bgView.text }}\n </div>\n }\n @case ('symbol') {\n <div\n class=\"bg-symbol\"\n [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n <ap-symbol [symbolId]=\"bgView.symbolId\" />\n </div>\n }\n }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n @switch (ovlView.mode) {\n @case ('network') {\n <div\n class=\"ovl-network\"\n [class.round]=\"ovlView.round\"\n [ngClass]=\"ovlView.network\">\n <ap-symbol [symbolId]=\"ovlView.
|
|
150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { profilePicture: { classPropertyName: "profilePicture", publicName: "profilePicture", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, showInitials: { classPropertyName: "showInitials", publicName: "showInitials", isSignal: true, isRequired: false, transformFunction: null }, bigNetwork: { classPropertyName: "bigNetwork", publicName: "bigNetwork", isSignal: true, isRequired: false, transformFunction: null }, anonymous: { classPropertyName: "anonymous", publicName: "anonymous", isSignal: true, isRequired: false, transformFunction: null }, online: { classPropertyName: "online", publicName: "online", isSignal: true, isRequired: false, transformFunction: null }, hideNetwork: { classPropertyName: "hideNetwork", publicName: "youtubeAvatarMode", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.background-default": "!useBigNetwork()" } }, hostDirectives: [{ directive: i2.NgStyle }], ngImport: i0, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n @switch (bgView.mode) {\n @case ('image') {\n <img\n class=\"bg-image\"\n [ngSrc]=\"bgView.image.src\"\n [width]=\"bgView.image.size\"\n [height]=\"bgView.image.size\"\n [alt]=\"bgView.image.alt\"\n (error)=\"onImageError()\" />\n }\n @case ('initials') {\n <div class=\"bg-initials\">\n {{ bgView.text }}\n </div>\n }\n @case ('symbol') {\n <div\n class=\"bg-symbol\"\n [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n <ap-symbol [symbolId]=\"bgView.symbolId\" />\n </div>\n }\n }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n @switch (ovlView.mode) {\n @case ('network') {\n <div\n class=\"ovl-network\"\n [class.round]=\"ovlView.round\"\n [ngClass]=\"ovlView.network\">\n <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n </div>\n }\n @case ('online') {\n <div class=\"ovl-online\"></div>\n }\n }\n}\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);box-sizing:border-box;position:relative;border-radius:var(--ap-avatar-border-radius)}:host.background-default{background:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-grey-10)}.bg-image{overflow:hidden;box-sizing:border-box;border-radius:var(--ap-avatar-border-radius)}.bg-symbol{display:flex;justify-content:center;align-items:center}.bg-symbol:not(.big) ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}.bg-symbol.big ap-symbol ::ng-deep .svg{top:unset!important;left:unset!important;width:104.35%!important;height:unset!important}.bg-initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}.ovl-network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-10)}.ovl-network.round{border-radius:100%}.ovl-network.instagram{border-radius:28%}.ovl-network.linkedin{border-radius:6%}.ovl-network.googleMyBusiness,.ovl-network.google{box-shadow:none;border-radius:unset}.ovl-network ap-symbol ::ng-deep img{border-radius:0;border:none}.ovl-online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: NetworkSymbolPipe, name: "networkSymbol" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
206
151
|
}
|
|
207
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
208
153
|
type: Component,
|
|
209
|
-
args: [{ selector: 'ap-avatar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgOptimizedImage, SymbolComponent, NgClass], hostDirectives: [NgStyle], host: {
|
|
154
|
+
args: [{ selector: 'ap-avatar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgOptimizedImage, SymbolComponent, NgClass, NetworkSymbolPipe], hostDirectives: [NgStyle], host: {
|
|
210
155
|
'[class.background-default]': '!useBigNetwork()',
|
|
211
|
-
}, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n @switch (bgView.mode) {\n @case ('image') {\n <img\n class=\"bg-image\"\n [ngSrc]=\"bgView.image.src\"\n [width]=\"bgView.image.size\"\n [height]=\"bgView.image.size\"\n [alt]=\"bgView.image.alt\"\n (error)=\"onImageError()\" />\n }\n @case ('initials') {\n <div class=\"bg-initials\">\n {{ bgView.text }}\n </div>\n }\n @case ('symbol') {\n <div\n class=\"bg-symbol\"\n [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n <ap-symbol [symbolId]=\"bgView.symbolId\" />\n </div>\n }\n }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n @switch (ovlView.mode) {\n @case ('network') {\n <div\n class=\"ovl-network\"\n [class.round]=\"ovlView.round\"\n [ngClass]=\"ovlView.network\">\n <ap-symbol [symbolId]=\"ovlView.
|
|
156
|
+
}, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n @switch (bgView.mode) {\n @case ('image') {\n <img\n class=\"bg-image\"\n [ngSrc]=\"bgView.image.src\"\n [width]=\"bgView.image.size\"\n [height]=\"bgView.image.size\"\n [alt]=\"bgView.image.alt\"\n (error)=\"onImageError()\" />\n }\n @case ('initials') {\n <div class=\"bg-initials\">\n {{ bgView.text }}\n </div>\n }\n @case ('symbol') {\n <div\n class=\"bg-symbol\"\n [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n <ap-symbol [symbolId]=\"bgView.symbolId\" />\n </div>\n }\n }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n @switch (ovlView.mode) {\n @case ('network') {\n <div\n class=\"ovl-network\"\n [class.round]=\"ovlView.round\"\n [ngClass]=\"ovlView.network\">\n <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n </div>\n }\n @case ('online') {\n <div class=\"ovl-online\"></div>\n }\n }\n}\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);box-sizing:border-box;position:relative;border-radius:var(--ap-avatar-border-radius)}:host.background-default{background:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-grey-10)}.bg-image{overflow:hidden;box-sizing:border-box;border-radius:var(--ap-avatar-border-radius)}.bg-symbol{display:flex;justify-content:center;align-items:center}.bg-symbol:not(.big) ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}.bg-symbol.big ap-symbol ::ng-deep .svg{top:unset!important;left:unset!important;width:104.35%!important;height:unset!important}.bg-initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}.ovl-network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-10)}.ovl-network.round{border-radius:100%}.ovl-network.instagram{border-radius:28%}.ovl-network.linkedin{border-radius:6%}.ovl-network.googleMyBusiness,.ovl-network.google{box-shadow:none;border-radius:unset}.ovl-network ap-symbol ::ng-deep img{border-radius:0;border:none}.ovl-online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}\n"] }]
|
|
212
157
|
}], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i2.NgStyle }] });
|
|
213
158
|
|
|
214
159
|
/**
|
|
215
160
|
* Generated bundle index. Do not edit.
|
|
216
161
|
*/
|
|
217
162
|
|
|
218
|
-
export { AvatarComponent
|
|
163
|
+
export { AvatarComponent };
|
|
219
164
|
//# sourceMappingURL=agorapulse-ui-components-avatar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-avatar.mjs","sources":["../../../libs/ui-components/avatar/src/avatar.component.ts","../../../libs/ui-components/avatar/src/avatar.component.html","../../../libs/ui-components/avatar/src/agorapulse-ui-components-avatar.ts"],"sourcesContent":["import {\n AgorapulseSymbol,\n agorapulseSymbol,\n apBlueskyOfficial,\n apFacebookOfficial,\n apGoogleMyBusinessOfficial,\n apLinkedinOfficial,\n apNsThreadsLogo,\n apPinterestOfficial,\n apTiktokOfficial,\n apWebBlogs,\n apWebNews,\n apXOfficial,\n apYoutubeOfficial,\n SymbolComponent,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgOptimizedImage, NgStyle } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, signal, untracked } from '@angular/core';\n\nexport const networkSymbolByNetwork = {\n bluesky: {\n round: true,\n symbol: apBlueskyOfficial,\n },\n facebook: {\n round: true,\n symbol: apFacebookOfficial,\n },\n google: {\n round: false,\n symbol: apGoogleMyBusinessOfficial,\n },\n instagram: {\n round: false,\n symbol: 'instagram-official', // embedded\n },\n linkedin: {\n round: false,\n symbol: apLinkedinOfficial,\n },\n pinterest: {\n round: true,\n symbol: apPinterestOfficial,\n },\n threads: {\n round: true,\n symbol: apNsThreadsLogo,\n },\n tiktok: {\n round: true,\n symbol: apTiktokOfficial,\n },\n twitter: {\n round: true,\n symbol: apXOfficial,\n },\n webBlog: {\n round: true,\n symbol: apWebBlogs,\n },\n webNews: {\n round: true,\n symbol: apWebNews,\n },\n X: {\n round: true,\n symbol: apXOfficial,\n },\n youtube: {\n round: true,\n symbol: apYoutubeOfficial,\n },\n} satisfies Record<\n string,\n {\n round: boolean;\n symbol: AgorapulseSymbol | string;\n }\n>;\n\nexport type AvatarNetwork = keyof typeof networkSymbolByNetwork;\n\nfunction toSymbol(symbol: AgorapulseSymbol | string): string {\n return typeof symbol == 'string' ? symbol : symbol.name;\n}\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 16,\n 48: 12,\n 40: 12,\n 36: 8,\n 32: 8,\n 24: 6,\n 16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 28,\n 48: 24,\n 40: 20,\n 36: 18,\n 32: 16,\n 24: 12,\n 16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 16,\n 48: 16,\n 40: 16,\n 36: 16,\n 32: 12,\n 24: 12,\n 16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 28,\n 48: 24,\n 40: 22,\n 36: 18,\n 32: 18,\n 24: 14,\n 16: 10,\n};\n\nconst automaticBigSymbolNetwork: AvatarNetwork[] = ['youtube'];\n\ntype BackgroundView =\n | { mode: 'image'; image: { src: string; size: number; alt?: string } }\n | { mode: 'initials'; text: string }\n | { mode: 'symbol'; symbolId: agorapulseSymbol; big?: boolean }\n | { mode?: never };\n\ntype OverlayView =\n | { mode: 'online' }\n | { mode: 'network'; network: AvatarNetwork; symbolId: agorapulseSymbol; round: boolean }\n | { mode?: never };\n\n@Component({\n selector: 'ap-avatar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n standalone: true,\n imports: [NgOptimizedImage, SymbolComponent, NgClass],\n hostDirectives: [NgStyle],\n host: {\n '[class.background-default]': '!useBigNetwork()',\n },\n})\nexport class AvatarComponent {\n profilePicture = input<string>();\n alt = input('');\n network = input(undefined, {\n transform: (v?: AvatarNetwork | string) => (v !== undefined ? (v as AvatarNetwork) : v),\n });\n size = input<AvatarSize | `${AvatarSize}`>(40);\n username = input('');\n showInitials = input<boolean | string>();\n bigNetwork = input(false);\n anonymous = input(false);\n online = input(false);\n hideNetwork = input(false, { alias: 'youtubeAvatarMode' });\n rounded = input(true, { transform: booleanAttribute });\n\n private imageError = signal(false);\n\n backgroundView = computed<BackgroundView>(() => this.buildBackgroundView());\n overlayView = computed<OverlayView>(() => this.buildOverlayView());\n protected useBigNetwork = computed(() => {\n return (this.automaticBigSymbolNetwork() || this.bigNetwork()) && !this.hideNetwork();\n });\n private automaticBigSymbolNetwork = computed(() => {\n return automaticBigSymbolNetwork.includes(this.network() as AvatarNetwork);\n });\n\n constructor(\n symbolRegistry: SymbolRegistry,\n private ngStyle: NgStyle\n ) {\n symbolRegistry.registerSymbols(\n Object.values(networkSymbolByNetwork).flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []))\n );\n\n effect(() => {\n this.ngStyle.ngStyle = this.buildHostStyle();\n this.ngStyle.ngDoCheck();\n });\n effect(() => {\n this.profilePicture(); // on change\n untracked(() => this.imageError.set(false));\n });\n }\n\n onImageError(): void {\n this.imageError.set(true);\n }\n\n private buildBackgroundView(): BackgroundView {\n let bgView: BackgroundView = {};\n\n if (this.useBigNetwork()) {\n bgView = { mode: 'symbol', symbolId: toSymbol(networkSymbolByNetwork[this.network()!].symbol), big: true };\n } else if (this.anonymous()) {\n bgView = { mode: 'symbol', symbolId: 'show-theater-mask-happy' };\n } else {\n const profilePicture = this.profilePicture();\n\n if (profilePicture && !this.useBigNetwork() && !this.imageError()) {\n bgView = {\n mode: 'image',\n image: {\n src: profilePicture,\n size: +this.size(),\n alt: this.alt(),\n },\n };\n } else {\n const initials = this.showInitials();\n\n if (initials !== false && initials !== undefined) {\n const useDefault = initials === true || initials === '';\n const candidateName = (useDefault ? this.username().charAt(0) : initials.slice(0, 2)).toUpperCase();\n bgView = { mode: 'initials', text: candidateName };\n } else {\n if (!this.useBigNetwork()) {\n bgView = { mode: 'symbol', symbolId: 'single-neutral' };\n }\n }\n }\n }\n\n return bgView;\n }\n\n private buildOverlayView(): OverlayView {\n let ovlView: OverlayView = {};\n const network = this.network();\n\n if (!this.automaticBigSymbolNetwork()) {\n if (network && !this.bigNetwork() && !this.hideNetwork()) {\n const { symbol, round } = networkSymbolByNetwork[network];\n ovlView = { mode: 'network', network, symbolId: toSymbol(symbol), round };\n } else if (this.online()) {\n ovlView = { mode: 'online' };\n }\n }\n\n return ovlView;\n }\n\n private buildHostStyle() {\n const bgView = this.backgroundView();\n const ovlMode = this.overlayView().mode;\n const size = this.size();\n\n return {\n '--ap-avatar-size': `${size}px`,\n '--ap-avatar-border-radius': this.rounded() ? '100%' : 'var(--sys-border-radius-sm)',\n '--ap-avatar-initials-size': bgView.mode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',\n '--ap-avatar-symbol-size': bgView.mode == 'symbol' ? `${bgView.big ? size : symbolSizeByAvatarSize[size]}px` : '',\n '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',\n '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',\n };\n }\n}\n","<!-- background -->\n@if (backgroundView(); as bgView) {\n @switch (bgView.mode) {\n @case ('image') {\n <img\n class=\"bg-image\"\n [ngSrc]=\"bgView.image.src\"\n [width]=\"bgView.image.size\"\n [height]=\"bgView.image.size\"\n [alt]=\"bgView.image.alt\"\n (error)=\"onImageError()\" />\n }\n @case ('initials') {\n <div class=\"bg-initials\">\n {{ bgView.text }}\n </div>\n }\n @case ('symbol') {\n <div\n class=\"bg-symbol\"\n [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n <ap-symbol [symbolId]=\"bgView.symbolId\" />\n </div>\n }\n }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n @switch (ovlView.mode) {\n @case ('network') {\n <div\n class=\"ovl-network\"\n [class.round]=\"ovlView.round\"\n [ngClass]=\"ovlView.network\">\n <ap-symbol [symbolId]=\"ovlView.symbolId\" />\n </div>\n }\n @case ('online') {\n <div class=\"ovl-online\"></div>\n }\n }\n}\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-avatar.mjs","sources":["../../../libs/ui-components/avatar/src/avatar.component.ts","../../../libs/ui-components/avatar/src/avatar.component.html","../../../libs/ui-components/avatar/src/agorapulse-ui-components-avatar.ts"],"sourcesContent":["import {\n agorapulseSymbol,\n apShowTheaterMaskHappy,\n apSingleNeutral,\n networkDescription,\n NetworkName,\n NetworkSymbolPipe,\n SymbolComponent,\n SymbolRegistry,\n toNetworkSymbol,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgOptimizedImage, NgStyle } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, signal, untracked } from '@angular/core';\n\nexport type AvatarNetwork = NetworkName;\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 16,\n 48: 12,\n 40: 12,\n 36: 8,\n 32: 8,\n 24: 6,\n 16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 28,\n 48: 24,\n 40: 20,\n 36: 18,\n 32: 16,\n 24: 12,\n 16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 16,\n 48: 16,\n 40: 16,\n 36: 16,\n 32: 12,\n 24: 12,\n 16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n 56: 28,\n 48: 24,\n 40: 22,\n 36: 18,\n 32: 18,\n 24: 14,\n 16: 10,\n};\n\nconst automaticBigSymbolNetwork: AvatarNetwork[] = ['youtube'];\n\ntype BackgroundView =\n | { mode: 'image'; image: { src: string; size: number; alt?: string } }\n | { mode: 'initials'; text: string }\n | { mode: 'symbol'; symbolId: agorapulseSymbol; big?: boolean }\n | { mode?: never };\n\ntype OverlayView = { mode: 'online' } | { mode: 'network'; network: NetworkName; round: boolean } | { mode?: never };\n\n@Component({\n selector: 'ap-avatar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n standalone: true,\n imports: [NgOptimizedImage, SymbolComponent, NgClass, NetworkSymbolPipe],\n hostDirectives: [NgStyle],\n host: {\n '[class.background-default]': '!useBigNetwork()',\n },\n})\nexport class AvatarComponent {\n profilePicture = input<string>();\n alt = input('');\n network = input(undefined, {\n transform: (v?: AvatarNetwork | string) => (v !== undefined ? (v as AvatarNetwork) : v),\n });\n size = input<AvatarSize | `${AvatarSize}`>(40);\n username = input('');\n showInitials = input<boolean | string>();\n bigNetwork = input(false);\n anonymous = input(false);\n online = input(false);\n hideNetwork = input(false, { alias: 'youtubeAvatarMode' });\n rounded = input(true, { transform: booleanAttribute });\n\n private imageError = signal(false);\n\n backgroundView = computed<BackgroundView>(() => this.buildBackgroundView());\n overlayView = computed<OverlayView>(() => this.buildOverlayView());\n protected useBigNetwork = computed(() => {\n return (this.automaticBigSymbolNetwork() || this.bigNetwork()) && !this.hideNetwork();\n });\n private automaticBigSymbolNetwork = computed(() => {\n return automaticBigSymbolNetwork.includes(this.network() as AvatarNetwork);\n });\n\n constructor(\n symbolRegistry: SymbolRegistry,\n private ngStyle: NgStyle\n ) {\n const networkSymbols = Object.values(networkDescription) //\n .flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []));\n\n symbolRegistry.registerSymbols([...networkSymbols, apSingleNeutral, apShowTheaterMaskHappy]);\n\n effect(() => {\n this.ngStyle.ngStyle = this.buildHostStyle();\n this.ngStyle.ngDoCheck();\n });\n effect(() => {\n this.profilePicture(); // on change\n untracked(() => this.imageError.set(false));\n });\n }\n\n onImageError(): void {\n this.imageError.set(true);\n }\n\n private buildBackgroundView(): BackgroundView {\n let bgView: BackgroundView = {};\n\n if (this.useBigNetwork()) {\n bgView = { mode: 'symbol', symbolId: toNetworkSymbol(this.network()!), big: true };\n } else if (this.anonymous()) {\n bgView = { mode: 'symbol', symbolId: apShowTheaterMaskHappy.name };\n } else {\n const profilePicture = this.profilePicture();\n\n if (profilePicture && !this.useBigNetwork() && !this.imageError()) {\n bgView = {\n mode: 'image',\n image: {\n src: profilePicture,\n size: +this.size(),\n alt: this.alt(),\n },\n };\n } else {\n const initials = this.showInitials();\n\n if (initials !== false && initials !== undefined) {\n const useDefault = initials === true || initials === '';\n const candidateName = (useDefault ? this.username().charAt(0) : initials.slice(0, 2)).toUpperCase();\n bgView = { mode: 'initials', text: candidateName };\n } else {\n if (!this.useBigNetwork()) {\n bgView = { mode: 'symbol', symbolId: apSingleNeutral.name };\n }\n }\n }\n }\n\n return bgView;\n }\n\n private buildOverlayView(): OverlayView {\n let ovlView: OverlayView = {};\n const network = this.network();\n\n if (!this.automaticBigSymbolNetwork()) {\n if (network && !this.bigNetwork() && !this.hideNetwork()) {\n const { symbol, round } = networkDescription[network];\n ovlView = { mode: 'network', network, round };\n } else if (this.online()) {\n ovlView = { mode: 'online' };\n }\n }\n\n return ovlView;\n }\n\n private buildHostStyle() {\n const bgView = this.backgroundView();\n const ovlMode = this.overlayView().mode;\n const size = this.size();\n\n return {\n '--ap-avatar-size': `${size}px`,\n '--ap-avatar-border-radius': this.rounded() ? '100%' : 'var(--sys-border-radius-sm)',\n '--ap-avatar-initials-size': bgView.mode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',\n '--ap-avatar-symbol-size': bgView.mode == 'symbol' ? `${bgView.big ? size : symbolSizeByAvatarSize[size]}px` : '',\n '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',\n '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',\n };\n }\n}\n","<!-- background -->\n@if (backgroundView(); as bgView) {\n @switch (bgView.mode) {\n @case ('image') {\n <img\n class=\"bg-image\"\n [ngSrc]=\"bgView.image.src\"\n [width]=\"bgView.image.size\"\n [height]=\"bgView.image.size\"\n [alt]=\"bgView.image.alt\"\n (error)=\"onImageError()\" />\n }\n @case ('initials') {\n <div class=\"bg-initials\">\n {{ bgView.text }}\n </div>\n }\n @case ('symbol') {\n <div\n class=\"bg-symbol\"\n [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n <ap-symbol [symbolId]=\"bgView.symbolId\" />\n </div>\n }\n }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n @switch (ovlView.mode) {\n @case ('network') {\n <div\n class=\"ovl-network\"\n [class.round]=\"ovlView.round\"\n [ngClass]=\"ovlView.network\">\n <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n </div>\n }\n @case ('online') {\n <div class=\"ovl-online\"></div>\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -59,7 +59,7 @@ class ButtonComponent {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], name: "name", form: "form", config: "config", loading: "loading", locked: "locked", menuTrigger: "menuTrigger", symbolPosition: "symbolPosition", ionicModalEnabled: "ionicModalEnabled" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "disabled || null" } }, providers: [], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n #button\n #trigger=\"matMenuTrigger\"\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger\"\n [class.primary]=\"config.style === 'primary' && !locked\"\n [class.secondary]=\"config.style === 'secondary' && !locked\"\n [class.ghost]=\"config.style === 'ghost' && !locked\"\n [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n [class.orange]=\"config.color === 'orange' && !locked\"\n [class.blue]=\"config.color === 'blue' && !locked\"\n [class.red]=\"config.color === 'red' && !locked\"\n [class.grey]=\"config.color === 'grey' && !locked\"\n [class.loading]=\"loading && !locked\"\n [class.locked]=\"locked\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled && !locked\"\n [name]=\"name\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content></ng-content>\n <ng-content select=\"ap-symbol\"></ng-content>\n @if (loading && !locked) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"sm\" />\n </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
62
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], name: "name", form: "form", config: "config", loading: "loading", locked: "locked", menuTrigger: "menuTrigger", symbolPosition: "symbolPosition", ionicModalEnabled: "ionicModalEnabled" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "disabled || null" } }, providers: [], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n #button\n #trigger=\"matMenuTrigger\"\n role=\"button\"\n [matMenuTriggerFor]=\"menuTrigger\"\n [class.primary]=\"config.style === 'primary' && !locked\"\n [class.secondary]=\"config.style === 'secondary' && !locked\"\n [class.ghost]=\"config.style === 'ghost' && !locked\"\n [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n [class.orange]=\"config.color === 'orange' && !locked\"\n [class.blue]=\"config.color === 'blue' && !locked\"\n [class.red]=\"config.color === 'red' && !locked\"\n [class.grey]=\"config.color === 'grey' && !locked\"\n [class.loading]=\"loading && !locked\"\n [class.locked]=\"locked\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled && !locked\"\n [name]=\"name\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.type]=\"baseButtonDirective.hostType\"\n [attr.form]=\"form\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content></ng-content>\n <ng-content select=\"ap-symbol\"></ng-content>\n @if (loading && !locked) {\n <div class=\"loading-bar\"></div>\n }\n</button>\n@if (locked) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"sm\" />\n </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
63
63
|
}
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
65
65
|
type: Component,
|