@agorapulse/ui-components 16.1.0-beta → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/agorapulse-ui-components-16.1.0.tgz +0 -0
  2. package/esm2022/avatar/avatar.component.mjs +3 -3
  3. package/esm2022/select/select.component.mjs +3 -3
  4. package/fesm2022/agorapulse-ui-components-avatar.mjs +2 -2
  5. package/fesm2022/agorapulse-ui-components-avatar.mjs.map +1 -1
  6. package/fesm2022/agorapulse-ui-components-select.mjs +2 -2
  7. package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
  8. package/package.json +25 -25
  9. package/snackbars-thread/component/snackbars-thread.component.d.ts +1 -1
  10. package/agorapulse-ui-components-16.1.0-beta.tgz +0 -0
package/fesm2022/agorapulse-ui-components-avatar.mjs CHANGED
@@ -181,11 +181,11 @@ class AvatarComponent {
181
181
  this.imageError$.next(true);
182
182
  }
183
183
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
184
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { alternativeText: "alternativeText", anonymous: "anonymous", username: "username", network: "network", online: "online", profilePicture: "profilePicture", showInitials: "showInitials", alt: "alt", rounded: ["rounded", "rounded", booleanAttribute], size: ["size", "size", avatarSizeAttribute] }, host: { properties: { "class.rounded-avatar": "this.roundedAvatar" } }, ngImport: i0, template: "<ng-container\n *ngrxLet=\"{\n displayProfilePicture: displayProfilePicture$,\n displaySingleNeutralSvg: displaySingleNeutralSvg$,\n displayInitials: displayInitials$,\n displayAnonymous: displayAnonymous$,\n displayOnline: displayOnline$,\n displayNetwork: displayNetwork$,\n initials: initials$,\n profilePicture: profilePicture$,\n size: size$,\n network: network$\n } as avatarViewModel\">\n <img\n *ngIf=\"avatarViewModel.displayProfilePicture\"\n [src]=\"avatarViewModel.profilePicture\"\n [width]=\"avatarViewModel.size\"\n [height]=\"avatarViewModel.size\"\n [alt]=\"alt\"\n (error)=\"onImageError()\" />\n <div\n *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n class=\"no-profile-picture\">\n <ap-symbol symbolId=\"single-neutral\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayAnonymous\"\n class=\"anonymous\">\n <ap-symbol symbolId=\"show-theater-mask-happy\" />\n </div>\n <div\n *ngIf=\"avatarViewModel.displayOnline\"\n class=\"online\"></div>\n <div\n *ngIf=\"avatarViewModel.displayNetwork\"\n class=\"network\"\n [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n [class.x]=\"avatarViewModel.network === 'X'\"\n [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n <ap-symbol\n *ngIf=\"avatarViewModel.network\"\n [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayInitials\"\n class=\"initials\">\n {{ avatarViewModel.initials }}\n </div>\n</ng-container>\n", styles: ["ap-avatar{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);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous 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)}ap-avatar .anonymous{margin-top:7%}ap-avatar .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)}ap-avatar .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)}ap-avatar .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)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.x,ap-avatar .network.pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
184
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { alternativeText: "alternativeText", anonymous: "anonymous", username: "username", network: "network", online: "online", profilePicture: "profilePicture", showInitials: "showInitials", alt: "alt", rounded: ["rounded", "rounded", booleanAttribute], size: ["size", "size", avatarSizeAttribute] }, host: { properties: { "class.rounded-avatar": "this.roundedAvatar" } }, ngImport: i0, template: "<ng-container\n *ngrxLet=\"{\n displayProfilePicture: displayProfilePicture$,\n displaySingleNeutralSvg: displaySingleNeutralSvg$,\n displayInitials: displayInitials$,\n displayAnonymous: displayAnonymous$,\n displayOnline: displayOnline$,\n displayNetwork: displayNetwork$,\n initials: initials$,\n profilePicture: profilePicture$,\n size: size$,\n network: network$\n } as avatarViewModel\">\n <img\n *ngIf=\"avatarViewModel.displayProfilePicture\"\n [src]=\"avatarViewModel.profilePicture\"\n [width]=\"avatarViewModel.size\"\n [height]=\"avatarViewModel.size\"\n [alt]=\"alt\"\n (error)=\"onImageError()\" />\n <div\n *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n class=\"no-profile-picture\">\n <ap-symbol symbolId=\"single-neutral\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayAnonymous\"\n class=\"anonymous\">\n <ap-symbol symbolId=\"show-theater-mask-happy\" />\n </div>\n <div\n *ngIf=\"avatarViewModel.displayOnline\"\n class=\"online\"></div>\n <div\n *ngIf=\"avatarViewModel.displayNetwork\"\n class=\"network\"\n [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n [class.x]=\"avatarViewModel.network === 'X'\"\n [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n [class.tiktok]=\"avatarViewModel.network === 'tiktok'\"\n [class.pinterest]=\"avatarViewModel.network === 'pinterest'\">\n <ap-symbol\n *ngIf=\"avatarViewModel.network\"\n [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayInitials\"\n class=\"initials\">\n {{ avatarViewModel.initials }}\n </div>\n</ng-container>\n", styles: ["ap-avatar{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);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous 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)}ap-avatar .anonymous{margin-top:7%}ap-avatar .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)}ap-avatar .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)}ap-avatar .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)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.x,ap-avatar .network.pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
185
185
  }
186
186
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: AvatarComponent, decorators: [{
187
187
  type: Component,
188
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetDirective], encapsulation: ViewEncapsulation.None, template: "<ng-container\n *ngrxLet=\"{\n displayProfilePicture: displayProfilePicture$,\n displaySingleNeutralSvg: displaySingleNeutralSvg$,\n displayInitials: displayInitials$,\n displayAnonymous: displayAnonymous$,\n displayOnline: displayOnline$,\n displayNetwork: displayNetwork$,\n initials: initials$,\n profilePicture: profilePicture$,\n size: size$,\n network: network$\n } as avatarViewModel\">\n <img\n *ngIf=\"avatarViewModel.displayProfilePicture\"\n [src]=\"avatarViewModel.profilePicture\"\n [width]=\"avatarViewModel.size\"\n [height]=\"avatarViewModel.size\"\n [alt]=\"alt\"\n (error)=\"onImageError()\" />\n <div\n *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n class=\"no-profile-picture\">\n <ap-symbol symbolId=\"single-neutral\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayAnonymous\"\n class=\"anonymous\">\n <ap-symbol symbolId=\"show-theater-mask-happy\" />\n </div>\n <div\n *ngIf=\"avatarViewModel.displayOnline\"\n class=\"online\"></div>\n <div\n *ngIf=\"avatarViewModel.displayNetwork\"\n class=\"network\"\n [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n [class.x]=\"avatarViewModel.network === 'X'\"\n [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n <ap-symbol\n *ngIf=\"avatarViewModel.network\"\n [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayInitials\"\n class=\"initials\">\n {{ avatarViewModel.initials }}\n </div>\n</ng-container>\n", styles: ["ap-avatar{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);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous 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)}ap-avatar .anonymous{margin-top:7%}ap-avatar .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)}ap-avatar .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)}ap-avatar .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)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.x,ap-avatar .network.pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"] }]
188
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetDirective], encapsulation: ViewEncapsulation.None, template: "<ng-container\n *ngrxLet=\"{\n displayProfilePicture: displayProfilePicture$,\n displaySingleNeutralSvg: displaySingleNeutralSvg$,\n displayInitials: displayInitials$,\n displayAnonymous: displayAnonymous$,\n displayOnline: displayOnline$,\n displayNetwork: displayNetwork$,\n initials: initials$,\n profilePicture: profilePicture$,\n size: size$,\n network: network$\n } as avatarViewModel\">\n <img\n *ngIf=\"avatarViewModel.displayProfilePicture\"\n [src]=\"avatarViewModel.profilePicture\"\n [width]=\"avatarViewModel.size\"\n [height]=\"avatarViewModel.size\"\n [alt]=\"alt\"\n (error)=\"onImageError()\" />\n <div\n *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n class=\"no-profile-picture\">\n <ap-symbol symbolId=\"single-neutral\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayAnonymous\"\n class=\"anonymous\">\n <ap-symbol symbolId=\"show-theater-mask-happy\" />\n </div>\n <div\n *ngIf=\"avatarViewModel.displayOnline\"\n class=\"online\"></div>\n <div\n *ngIf=\"avatarViewModel.displayNetwork\"\n class=\"network\"\n [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n [class.x]=\"avatarViewModel.network === 'X'\"\n [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n [class.tiktok]=\"avatarViewModel.network === 'tiktok'\"\n [class.pinterest]=\"avatarViewModel.network === 'pinterest'\">\n <ap-symbol\n *ngIf=\"avatarViewModel.network\"\n [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayInitials\"\n class=\"initials\">\n {{ avatarViewModel.initials }}\n </div>\n</ng-container>\n", styles: ["ap-avatar{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);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous 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)}ap-avatar .anonymous{margin-top:7%}ap-avatar .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)}ap-avatar .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)}ap-avatar .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)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.x,ap-avatar .network.pinterest{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"] }]
189
189
  }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }]; }, propDecorators: { alternativeText: [{
190
190
  type: Input
191
191
  }], anonymous: [{
package/fesm2022/agorapulse-ui-components-avatar.mjs.map CHANGED
@@ -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 SymbolComponent,\n SymbolRegistry,\n apFacebookOfficial,\n apGoogleMyBusinessOfficial,\n apLinkedinOfficial,\n apPinterestOfficial,\n apShowTheaterMaskHappy,\n apSingleNeutral,\n apTiktokOfficial,\n apXOfficial,\n apYoutubeOfficial,\n} from '@agorapulse/ui-symbol';\nimport { NgForOf, NgIf, NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnInit,\n ViewEncapsulation,\n booleanAttribute,\n} from '@angular/core';\nimport { LetDirective } from '@ngrx/component';\nimport { BehaviorSubject, Observable, combineLatest, map, of } from 'rxjs';\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\nexport type AvatarNetwork =\n | 'facebook'\n | 'instagram'\n | 'twitter'\n | 'linkedin'\n | 'tiktok'\n | 'youtube'\n | 'pinterest'\n | 'googleMyBusiness'\n | 'google'\n | 'X';\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\nfunction avatarSizeAttribute(value: AvatarSize | `${AvatarSize}`): AvatarSize {\n return +value as AvatarSize;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-avatar',\n styleUrls: ['./avatar.component.scss'],\n standalone: true,\n imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetDirective],\n templateUrl: './avatar.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AvatarComponent implements OnInit {\n readonly networkSymbolByNetwork: Record<AvatarNetwork, string> = {\n facebook: 'facebook-official',\n instagram: 'instagram-official',\n X: 'x-official',\n twitter: 'x-official',\n linkedin: 'linkedin-official',\n tiktok: 'tiktok-official',\n youtube: 'youtube-official',\n pinterest: 'pinterest-official',\n googleMyBusiness: 'google-my-business-official',\n google: 'google-my-business-official',\n };\n\n size$: BehaviorSubject<AvatarSize> = new BehaviorSubject<AvatarSize>(40);\n profilePicture$: BehaviorSubject<string | undefined> = new BehaviorSubject<string | undefined>('');\n network$: BehaviorSubject<AvatarNetwork | undefined> = new BehaviorSubject<AvatarNetwork | undefined>(undefined);\n\n private alternativeText$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n private anonymous$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n private username$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n private online$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n private showInitials$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n private rounded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);\n\n @Input() set alternativeText(alternativeText: string) {\n this.alternativeText$.next(alternativeText);\n }\n\n @Input() set anonymous(anonymous: boolean) {\n this.anonymous$.next(anonymous);\n }\n\n @Input() set username(username: string) {\n this.username$.next(username);\n }\n\n @Input() set network(network: AvatarNetwork | undefined) {\n this.network$.next(network);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-network-size', `${networkSizeByAvatarSize[this.size$.value]}px`);\n }\n\n @Input() set online(online: boolean) {\n this.online$.next(online);\n }\n\n @Input() set profilePicture(profilePicture: string | undefined) {\n this.profilePicture$.next(profilePicture);\n this.imageError$.next(false);\n }\n\n @Input() set showInitials(showInitials: boolean) {\n this.showInitials$.next(showInitials);\n }\n @Input() alt = '';\n\n @HostBinding('class.rounded-avatar')\n roundedAvatar = true;\n\n @Input({\n transform: booleanAttribute,\n })\n set rounded(rounded: boolean) {\n this.roundedAvatar = rounded;\n this.rounded$.next(rounded);\n }\n\n @Input({\n transform: avatarSizeAttribute,\n })\n set size(size: AvatarSize) {\n this.size$.next(size);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `${size}px`);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[size]}px`);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-online-icon-size', `${onlineIconSizeByAvatarSize[size]}px`);\n }\n\n displayProfilePicture$: Observable<boolean> = new Observable<boolean>();\n displaySingleNeutralSvg$: Observable<boolean> = new Observable<boolean>();\n displayInitials$: Observable<boolean> = new Observable<boolean>();\n displayAnonymous$: Observable<boolean> = new Observable<boolean>();\n displayNetwork$: Observable<boolean> = new Observable<boolean>();\n displayOnline$: Observable<boolean> = new Observable<boolean>();\n imageError$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n initials$: Observable<string> = new Observable<string>();\n initialsAvailable$: Observable<boolean> = of(false);\n\n constructor(private symbolRegistry: SymbolRegistry, private elementRef: ElementRef) {\n this.symbolRegistry.registerSymbols([\n apSingleNeutral,\n apShowTheaterMaskHappy,\n apFacebookOfficial,\n apLinkedinOfficial,\n apYoutubeOfficial,\n apTiktokOfficial,\n apGoogleMyBusinessOfficial,\n apPinterestOfficial,\n apXOfficial,\n ]);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);\n }\n\n ngOnInit(): void {\n this.initialsAvailable$ = this.username$.pipe(\n map(username => {\n return !!username;\n })\n );\n\n this.displayProfilePicture$ = combineLatest([this.profilePicture$, this.anonymous$, this.imageError$, this.showInitials$]).pipe(\n map(([profilePicture, anonymous, imageError]) => {\n return !!profilePicture && !anonymous && !imageError;\n })\n );\n\n this.displayInitials$ = combineLatest([\n this.showInitials$,\n this.anonymous$,\n this.initialsAvailable$,\n this.displayProfilePicture$,\n ]).pipe(\n map(([showInitials, anonymous, initialsAvailable, displayProfilePicture]) => {\n return showInitials && !anonymous && initialsAvailable && !displayProfilePicture;\n })\n );\n\n this.displaySingleNeutralSvg$ = combineLatest([\n this.profilePicture$,\n this.imageError$,\n this.initialsAvailable$,\n this.showInitials$,\n this.anonymous$,\n this.displayInitials$,\n this.displayProfilePicture$,\n ]).pipe(\n map(([profilePicture, imageError, initialsAvailable, showInitials, anonymous, displayInitials, displayProfilePicture]) => {\n return (\n (!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&\n !anonymous &&\n !displayInitials &&\n !displayProfilePicture\n );\n })\n );\n\n this.displayAnonymous$ = combineLatest([this.anonymous$, this.rounded$]).pipe(\n map(([anonymous, rounded]) => {\n return anonymous && rounded;\n })\n );\n\n this.displayOnline$ = combineLatest([this.online$, this.rounded$]).pipe(\n map(([online, rounded]) => {\n return online && rounded;\n })\n );\n\n this.displayNetwork$ = combineLatest([this.network$, this.rounded$]).pipe(\n map(([network, rounded]) => {\n return !!network && rounded;\n })\n );\n\n this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(\n map(([displayInitials, username]) => {\n if ((displayInitials && !username) || !displayInitials) {\n return '';\n }\n this.elementRef.nativeElement.style.setProperty(\n '--ap-avatar-initials-size',\n `${initialSizeByAvatarSize[this.size$.value]}px`\n );\n const names = username?.split(' ');\n return `${names[0].charAt(0).toUpperCase()}`;\n })\n );\n }\n\n onImageError(): void {\n this.imageError$.next(true);\n }\n}\n","<ng-container\n *ngrxLet=\"{\n displayProfilePicture: displayProfilePicture$,\n displaySingleNeutralSvg: displaySingleNeutralSvg$,\n displayInitials: displayInitials$,\n displayAnonymous: displayAnonymous$,\n displayOnline: displayOnline$,\n displayNetwork: displayNetwork$,\n initials: initials$,\n profilePicture: profilePicture$,\n size: size$,\n network: network$\n } as avatarViewModel\">\n <img\n *ngIf=\"avatarViewModel.displayProfilePicture\"\n [src]=\"avatarViewModel.profilePicture\"\n [width]=\"avatarViewModel.size\"\n [height]=\"avatarViewModel.size\"\n [alt]=\"alt\"\n (error)=\"onImageError()\" />\n <div\n *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n class=\"no-profile-picture\">\n <ap-symbol symbolId=\"single-neutral\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayAnonymous\"\n class=\"anonymous\">\n <ap-symbol symbolId=\"show-theater-mask-happy\" />\n </div>\n <div\n *ngIf=\"avatarViewModel.displayOnline\"\n class=\"online\"></div>\n <div\n *ngIf=\"avatarViewModel.displayNetwork\"\n class=\"network\"\n [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n [class.x]=\"avatarViewModel.network === 'X'\"\n [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n [class.tiktok]=\"avatarViewModel.network === 'tiktok'\">\n <ap-symbol\n *ngIf=\"avatarViewModel.network\"\n [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayInitials\"\n class=\"initials\">\n {{ avatarViewModel.initials }}\n </div>\n</ng-container>\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 SymbolComponent,\n SymbolRegistry,\n apFacebookOfficial,\n apGoogleMyBusinessOfficial,\n apLinkedinOfficial,\n apPinterestOfficial,\n apShowTheaterMaskHappy,\n apSingleNeutral,\n apTiktokOfficial,\n apXOfficial,\n apYoutubeOfficial,\n} from '@agorapulse/ui-symbol';\nimport { NgForOf, NgIf, NgOptimizedImage } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnInit,\n ViewEncapsulation,\n booleanAttribute,\n} from '@angular/core';\nimport { LetDirective } from '@ngrx/component';\nimport { BehaviorSubject, Observable, combineLatest, map, of } from 'rxjs';\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\nexport type AvatarNetwork =\n | 'facebook'\n | 'instagram'\n | 'twitter'\n | 'linkedin'\n | 'tiktok'\n | 'youtube'\n | 'pinterest'\n | 'googleMyBusiness'\n | 'google'\n | 'X';\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\nfunction avatarSizeAttribute(value: AvatarSize | `${AvatarSize}`): AvatarSize {\n return +value as AvatarSize;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-avatar',\n styleUrls: ['./avatar.component.scss'],\n standalone: true,\n imports: [NgIf, NgForOf, NgOptimizedImage, SymbolComponent, LetDirective],\n templateUrl: './avatar.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AvatarComponent implements OnInit {\n readonly networkSymbolByNetwork: Record<AvatarNetwork, string> = {\n facebook: 'facebook-official',\n instagram: 'instagram-official',\n X: 'x-official',\n twitter: 'x-official',\n linkedin: 'linkedin-official',\n tiktok: 'tiktok-official',\n youtube: 'youtube-official',\n pinterest: 'pinterest-official',\n googleMyBusiness: 'google-my-business-official',\n google: 'google-my-business-official',\n };\n\n size$: BehaviorSubject<AvatarSize> = new BehaviorSubject<AvatarSize>(40);\n profilePicture$: BehaviorSubject<string | undefined> = new BehaviorSubject<string | undefined>('');\n network$: BehaviorSubject<AvatarNetwork | undefined> = new BehaviorSubject<AvatarNetwork | undefined>(undefined);\n\n private alternativeText$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n private anonymous$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n private username$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n private online$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n private showInitials$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n private rounded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);\n\n @Input() set alternativeText(alternativeText: string) {\n this.alternativeText$.next(alternativeText);\n }\n\n @Input() set anonymous(anonymous: boolean) {\n this.anonymous$.next(anonymous);\n }\n\n @Input() set username(username: string) {\n this.username$.next(username);\n }\n\n @Input() set network(network: AvatarNetwork | undefined) {\n this.network$.next(network);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-network-size', `${networkSizeByAvatarSize[this.size$.value]}px`);\n }\n\n @Input() set online(online: boolean) {\n this.online$.next(online);\n }\n\n @Input() set profilePicture(profilePicture: string | undefined) {\n this.profilePicture$.next(profilePicture);\n this.imageError$.next(false);\n }\n\n @Input() set showInitials(showInitials: boolean) {\n this.showInitials$.next(showInitials);\n }\n @Input() alt = '';\n\n @HostBinding('class.rounded-avatar')\n roundedAvatar = true;\n\n @Input({\n transform: booleanAttribute,\n })\n set rounded(rounded: boolean) {\n this.roundedAvatar = rounded;\n this.rounded$.next(rounded);\n }\n\n @Input({\n transform: avatarSizeAttribute,\n })\n set size(size: AvatarSize) {\n this.size$.next(size);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `${size}px`);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[size]}px`);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-online-icon-size', `${onlineIconSizeByAvatarSize[size]}px`);\n }\n\n displayProfilePicture$: Observable<boolean> = new Observable<boolean>();\n displaySingleNeutralSvg$: Observable<boolean> = new Observable<boolean>();\n displayInitials$: Observable<boolean> = new Observable<boolean>();\n displayAnonymous$: Observable<boolean> = new Observable<boolean>();\n displayNetwork$: Observable<boolean> = new Observable<boolean>();\n displayOnline$: Observable<boolean> = new Observable<boolean>();\n imageError$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n initials$: Observable<string> = new Observable<string>();\n initialsAvailable$: Observable<boolean> = of(false);\n\n constructor(private symbolRegistry: SymbolRegistry, private elementRef: ElementRef) {\n this.symbolRegistry.registerSymbols([\n apSingleNeutral,\n apShowTheaterMaskHappy,\n apFacebookOfficial,\n apLinkedinOfficial,\n apYoutubeOfficial,\n apTiktokOfficial,\n apGoogleMyBusinessOfficial,\n apPinterestOfficial,\n apXOfficial,\n ]);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);\n this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);\n }\n\n ngOnInit(): void {\n this.initialsAvailable$ = this.username$.pipe(\n map(username => {\n return !!username;\n })\n );\n\n this.displayProfilePicture$ = combineLatest([this.profilePicture$, this.anonymous$, this.imageError$, this.showInitials$]).pipe(\n map(([profilePicture, anonymous, imageError]) => {\n return !!profilePicture && !anonymous && !imageError;\n })\n );\n\n this.displayInitials$ = combineLatest([\n this.showInitials$,\n this.anonymous$,\n this.initialsAvailable$,\n this.displayProfilePicture$,\n ]).pipe(\n map(([showInitials, anonymous, initialsAvailable, displayProfilePicture]) => {\n return showInitials && !anonymous && initialsAvailable && !displayProfilePicture;\n })\n );\n\n this.displaySingleNeutralSvg$ = combineLatest([\n this.profilePicture$,\n this.imageError$,\n this.initialsAvailable$,\n this.showInitials$,\n this.anonymous$,\n this.displayInitials$,\n this.displayProfilePicture$,\n ]).pipe(\n map(([profilePicture, imageError, initialsAvailable, showInitials, anonymous, displayInitials, displayProfilePicture]) => {\n return (\n (!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&\n !anonymous &&\n !displayInitials &&\n !displayProfilePicture\n );\n })\n );\n\n this.displayAnonymous$ = combineLatest([this.anonymous$, this.rounded$]).pipe(\n map(([anonymous, rounded]) => {\n return anonymous && rounded;\n })\n );\n\n this.displayOnline$ = combineLatest([this.online$, this.rounded$]).pipe(\n map(([online, rounded]) => {\n return online && rounded;\n })\n );\n\n this.displayNetwork$ = combineLatest([this.network$, this.rounded$]).pipe(\n map(([network, rounded]) => {\n return !!network && rounded;\n })\n );\n\n this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(\n map(([displayInitials, username]) => {\n if ((displayInitials && !username) || !displayInitials) {\n return '';\n }\n this.elementRef.nativeElement.style.setProperty(\n '--ap-avatar-initials-size',\n `${initialSizeByAvatarSize[this.size$.value]}px`\n );\n const names = username?.split(' ');\n return `${names[0].charAt(0).toUpperCase()}`;\n })\n );\n }\n\n onImageError(): void {\n this.imageError$.next(true);\n }\n}\n","<ng-container\n *ngrxLet=\"{\n displayProfilePicture: displayProfilePicture$,\n displaySingleNeutralSvg: displaySingleNeutralSvg$,\n displayInitials: displayInitials$,\n displayAnonymous: displayAnonymous$,\n displayOnline: displayOnline$,\n displayNetwork: displayNetwork$,\n initials: initials$,\n profilePicture: profilePicture$,\n size: size$,\n network: network$\n } as avatarViewModel\">\n <img\n *ngIf=\"avatarViewModel.displayProfilePicture\"\n [src]=\"avatarViewModel.profilePicture\"\n [width]=\"avatarViewModel.size\"\n [height]=\"avatarViewModel.size\"\n [alt]=\"alt\"\n (error)=\"onImageError()\" />\n <div\n *ngIf=\"avatarViewModel.displaySingleNeutralSvg\"\n class=\"no-profile-picture\">\n <ap-symbol symbolId=\"single-neutral\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayAnonymous\"\n class=\"anonymous\">\n <ap-symbol symbolId=\"show-theater-mask-happy\" />\n </div>\n <div\n *ngIf=\"avatarViewModel.displayOnline\"\n class=\"online\"></div>\n <div\n *ngIf=\"avatarViewModel.displayNetwork\"\n class=\"network\"\n [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n [class.x]=\"avatarViewModel.network === 'X'\"\n [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n [class.tiktok]=\"avatarViewModel.network === 'tiktok'\"\n [class.pinterest]=\"avatarViewModel.network === 'pinterest'\">\n <ap-symbol\n *ngIf=\"avatarViewModel.network\"\n [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n </div>\n\n <div\n *ngIf=\"avatarViewModel.displayInitials\"\n class=\"initials\">\n {{ avatarViewModel.initials }}\n </div>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
package/fesm2022/agorapulse-ui-components-select.mjs CHANGED
@@ -231,7 +231,7 @@ class SelectComponent {
231
231
  this.selectedValuesSignal.update((selectedValues) => selectedValues.filter((selectedValue) => selectedValue !== selectedItemId));
232
232
  }
233
233
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
234
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: SelectComponent, isStandalone: true, selector: "ap-select", inputs: { options: "options", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", appendTo: "appendTo", clearable: "clearable", description: "description", disabled: "disabled", selectId: "selectId", inlineLabel: "inlineLabel", create: "create", createText: "createText", group: "group", selectableGroup: "selectableGroup", label: "label", multiple: "multiple", only: "only", onlyText: "onlyText", placeholder: "placeholder", selectAll: "selectAll", selectAllText: "selectAllText", unselectAllText: "unselectAllText", searchable: "searchable", searchPlaceholder: "searchPlaceholder", searchFn: "searchFn", notFoundText: "notFoundText", loadingText: "loadingText", displayType: "displayType", optionLabel: "optionLabel", optionCaption: "optionCaption", optionDivider: "optionDivider", optionProfileImageUrl: "optionProfileImageUrl", optionBadgeLabel: "optionBadgeLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupTag: "optionGroupTag" }, outputs: { createNew: "createNew" }, host: { properties: { "class.hovered": "this.hovered", "class.inline": "this.inlineLabel" } }, providers: [SELECT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inlineLabelElement", first: true, predicate: ["inlineLabel"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<label\n *ngIf=\"label && !inlineLabel\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n <span\n *ngIf=\"description\"\n class=\"description\">\n {{ description }}\n </span>\n</label>\n\n<div\n tabIndex=\"0\"\n *ngIf=\"inlineLabel\"\n #inlineLabel\n class=\"inline-label\"\n (click)=\"onOpenSelect()\"\n (mouseenter)=\"onInlineInputEnter()\"\n (mouseleave)=\"onInlineInputLeave()\">\n <label\n *ngIf=\"label && inlineLabel\"\n class=\"label\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n </label>\n <div class=\"divider\"></div>\n</div>\n\n<ng-select\n #select\n class=\"ap-select\"\n [tabIndex]=\"0\"\n [clearable]=\"clearable\"\n [placeholder]=\"placeholder\"\n [labelForId]=\"selectId\"\n [searchable]=\"false\"\n [closeOnSelect]=\"multiple ? false : true\"\n [bindValue]=\"optionValue ? optionValue : 'label'\"\n [groupBy]=\"group ? optionGroupLabel : ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [markFirst]=\"false\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"false\"\n [appendTo]=\"appendTo\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n [items]=\"optionsSignal()\"\n [loading]=\"loadingSignal()\"\n [ngModel]=\"selectedValuesSignal()\"\n (ngModelChange)=\"onSelectedValuesChange($event)\"\n (open)=\"onSelectOpened()\">\n <ng-container *ngIf=\"searchable || selectAll\">\n <ng-template\n let-item=\"item\"\n ng-header-tmp>\n <ng-container *ngIf=\"searchable\">\n <ap-input\n #searchInput\n tabindex=\"0\"\n name=\"search-input\"\n class=\"full-width\"\n symbolPosition=\"right\"\n [placeholder]=\"searchPlaceholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"onSearchTermChange($event)\">\n <ap-symbol symbolId=\"search-alternate\" />\n </ap-input>\n </ng-container>\n <ng-container *ngIf=\"selectAll\">\n <ap-checkbox\n class=\"select-all-checkbox\"\n name=\"option-group-select-all\"\n [indeterminate]=\"partialySelectedSignal()\"\n [checked]=\"allSelectedSignal()\"\n (click)=\"onToggleAll()\">\n <span>\n {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n </span>\n </ap-checkbox>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-optgroup-tmp>\n <div\n class=\"group\"\n [class.with-search]=\"searchable\"\n [class.with-select-all]=\"selectAll\">\n <ng-container *ngIf=\"!multiple\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ng-container>\n <ng-container *ngIf=\"multiple\">\n <ap-checkbox\n *ngIf=\"selectableGroup\"\n [name]=\"'option-group-selection-' + item.group\"\n [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n [checked]=\"isGroupChecked(item$.children)\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ap-checkbox>\n <span\n *ngIf=\"!selectableGroup\"\n class=\"group-label\">\n {{ item.group }}\n </span>\n </ng-container>\n </div>\n </ng-template>\n <ng-template\n let-items=\"items\"\n let-item$=\"item$\"\n ng-multi-label-tmp>\n <ng-container>\n <div class=\"multiple-item\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n \u2202\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ loadingText }}\n </span>\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp></ng-template>\n <ng-container *ngIf=\"create\">\n <ng-template ng-footer-tmp>\n <button\n class=\"create-new\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"add-2022\"\n size=\"micro\" />\n <span>\n {{ createText }}\n </span>\n <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n </button>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ng-container *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n <div class=\"option\">{{ item }}</div>\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && item[optionCaption]\"\n [class.multiple]=\"multiple\"\n (mouseenter)=\"onHoverItem(item$.htmlId)\"\n (mouseleave)=\"onLeaveItem()\">\n <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n </div>\n </ng-container>\n <ng-container *ngIf=\"optionDivider && item[optionDivider]\">\n <div class=\"divider\"></div>\n </ng-container>\n </ng-template>\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n <ng-container *ngIf=\"!optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n {{ notFoundText }}\n </div>\n </ng-template>\n</ng-select>\n\n<ng-template\n #contentItem\n let-item=\"item\"\n let-item$=\"item$\">\n <ng-container *ngIf=\"multiple\">\n <div class=\"disabled-opaque\"></div>\n <ap-checkbox\n *ngIf=\"multiple\"\n [checked]=\"item$.selected\"\n [disabled]=\"item$.disabled\"\n [name]=\"'option-selection-' + item$.htmlId\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ap-checkbox>\n </ng-container>\n <ng-container *ngIf=\"!multiple\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!optionLabel\">\n <span class=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div class=\"texts\">\n <div class=\"first-line\">\n <span class=\"label\">{{ item[optionLabel] }}</span>\n <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n </ng-container>\n </div>\n <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n <span class=\"caption\">\n {{ item[optionCaption] }}\n </span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple\">\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"onSelectOnly(item)\">\n {{ onlyText }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"item$.selected && !multiple\">\n <ap-symbol\n symbolId=\"check-2\"\n size=\"micro\" />\n </ng-container>\n </div>\n</ng-template>\n", styles: ["@import\"~@ng-select/ng-select/themes/default.theme.css\";ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:-moz-fit-content;width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}.ng-select.ap-select .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important}.ng-select.ap-select.ng-select-multiple .ng-value-container{padding-left:12px}.ng-select.ap-select.ng-select-multiple .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-dropdown-panel.ap-select{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option{background-color:var(--ref-color-electric-blue-10);font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label{color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%}.ng-dropdown-panel.ap-select .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label{flex:1}.ng-dropdown-panel.ap-select .option.not-found{padding:11px var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1}.ng-dropdown-panel.ap-select .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts{flex:1;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active{color:var(--ref-color-electric-blue-150)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: InputComponent, selector: "ap-input", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "disabled", "clearable", "inputType", "inputId", "name", "label", "description", "prefix", "suffix", "required", "placeholder", "errorMessage", "successMessage", "symbolPosition"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color"], outputs: ["clear"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
234
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: SelectComponent, isStandalone: true, selector: "ap-select", inputs: { options: "options", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", appendTo: "appendTo", clearable: "clearable", description: "description", disabled: "disabled", selectId: "selectId", inlineLabel: "inlineLabel", create: "create", createText: "createText", group: "group", selectableGroup: "selectableGroup", label: "label", multiple: "multiple", only: "only", onlyText: "onlyText", placeholder: "placeholder", selectAll: "selectAll", selectAllText: "selectAllText", unselectAllText: "unselectAllText", searchable: "searchable", searchPlaceholder: "searchPlaceholder", searchFn: "searchFn", notFoundText: "notFoundText", loadingText: "loadingText", displayType: "displayType", optionLabel: "optionLabel", optionCaption: "optionCaption", optionDivider: "optionDivider", optionProfileImageUrl: "optionProfileImageUrl", optionBadgeLabel: "optionBadgeLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupTag: "optionGroupTag" }, outputs: { createNew: "createNew" }, host: { properties: { "class.hovered": "this.hovered", "class.inline": "this.inlineLabel" } }, providers: [SELECT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inlineLabelElement", first: true, predicate: ["inlineLabel"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<label\n *ngIf=\"label && !inlineLabel\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n <span\n *ngIf=\"description\"\n class=\"description\">\n {{ description }}\n </span>\n</label>\n\n<div\n tabIndex=\"0\"\n *ngIf=\"inlineLabel\"\n #inlineLabel\n class=\"inline-label\"\n (click)=\"onOpenSelect()\"\n (mouseenter)=\"onInlineInputEnter()\"\n (mouseleave)=\"onInlineInputLeave()\">\n <label\n *ngIf=\"label && inlineLabel\"\n class=\"label\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n </label>\n <div class=\"divider\"></div>\n</div>\n\n<ng-select\n #select\n class=\"ap-select\"\n [tabIndex]=\"0\"\n [clearable]=\"clearable\"\n [placeholder]=\"placeholder\"\n [labelForId]=\"selectId\"\n [searchable]=\"false\"\n [closeOnSelect]=\"multiple ? false : true\"\n [bindValue]=\"optionValue ? optionValue : 'label'\"\n [groupBy]=\"group ? optionGroupLabel : ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [markFirst]=\"false\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"false\"\n [appendTo]=\"appendTo\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n [items]=\"optionsSignal()\"\n [loading]=\"loadingSignal()\"\n [ngModel]=\"selectedValuesSignal()\"\n (ngModelChange)=\"onSelectedValuesChange($event)\"\n (open)=\"onSelectOpened()\">\n <ng-container *ngIf=\"searchable || selectAll\">\n <ng-template\n let-item=\"item\"\n ng-header-tmp>\n <ng-container *ngIf=\"searchable\">\n <ap-input\n #searchInput\n tabindex=\"0\"\n name=\"search-input\"\n class=\"full-width\"\n symbolPosition=\"right\"\n [placeholder]=\"searchPlaceholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"onSearchTermChange($event)\">\n <ap-symbol symbolId=\"search-alternate\" />\n </ap-input>\n </ng-container>\n <ng-container *ngIf=\"selectAll\">\n <ap-checkbox\n class=\"select-all-checkbox\"\n name=\"option-group-select-all\"\n [indeterminate]=\"partialySelectedSignal()\"\n [checked]=\"allSelectedSignal()\"\n (click)=\"onToggleAll()\">\n <span>\n {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n </span>\n </ap-checkbox>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-optgroup-tmp>\n <div\n class=\"group\"\n [class.with-search]=\"searchable\"\n [class.with-select-all]=\"selectAll\">\n <ng-container *ngIf=\"!multiple\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ng-container>\n <ng-container *ngIf=\"multiple\">\n <ap-checkbox\n *ngIf=\"selectableGroup\"\n [name]=\"'option-group-selection-' + item.group\"\n [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n [checked]=\"isGroupChecked(item$.children)\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ap-checkbox>\n <span\n *ngIf=\"!selectableGroup\"\n class=\"group-label\">\n {{ item.group }}\n </span>\n </ng-container>\n </div>\n </ng-template>\n <ng-template\n let-items=\"items\"\n let-item$=\"item$\"\n ng-multi-label-tmp>\n <ng-container>\n <div class=\"multiple-item\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n \u2202\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ loadingText }}\n </span>\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp></ng-template>\n <ng-container *ngIf=\"create\">\n <ng-template ng-footer-tmp>\n <button\n class=\"create-new\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"add-2022\"\n size=\"micro\" />\n <span>\n {{ createText }}\n </span>\n <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n </button>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ng-container *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n <div class=\"option\">{{ item }}</div>\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && item[optionCaption]\"\n [class.multiple]=\"multiple\"\n (mouseenter)=\"onHoverItem(item$.htmlId)\"\n (mouseleave)=\"onLeaveItem()\">\n <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n </div>\n </ng-container>\n <ng-container *ngIf=\"optionDivider && item[optionDivider]\">\n <div class=\"divider\"></div>\n </ng-container>\n </ng-template>\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n <ng-container *ngIf=\"!optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n {{ notFoundText }}\n </div>\n </ng-template>\n</ng-select>\n\n<ng-template\n #contentItem\n let-item=\"item\"\n let-item$=\"item$\">\n <ng-container *ngIf=\"multiple\">\n <div class=\"disabled-opaque\"></div>\n <ap-checkbox\n *ngIf=\"multiple\"\n [checked]=\"item$.selected\"\n [disabled]=\"item$.disabled\"\n [name]=\"'option-selection-' + item$.htmlId\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ap-checkbox>\n </ng-container>\n <ng-container *ngIf=\"!multiple\">\n <div class=\"disabled-opaque\"></div>\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!optionLabel\">\n <span class=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div class=\"texts\">\n <div class=\"first-line\">\n <span class=\"label\">{{ item[optionLabel] }}</span>\n <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n </ng-container>\n </div>\n <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n <span class=\"caption\">\n {{ item[optionCaption] }}\n </span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple\">\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"onSelectOnly(item)\">\n {{ onlyText }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"item$.selected && !multiple\">\n <ap-symbol\n symbolId=\"check-2\"\n size=\"micro\" />\n </ng-container>\n </div>\n</ng-template>\n", styles: ["@import\"~@ng-select/ng-select/themes/default.theme.css\";ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:-moz-fit-content;width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}.ng-select.ap-select .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select .ng-select-container .ng-value-container{overflow-x:auto}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important}.ng-select.ap-select.ng-select-multiple .ng-value-container{padding-left:12px}.ng-select.ap-select.ng-select-multiple .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-dropdown-panel.ap-select{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option{background-color:var(--ref-color-electric-blue-10);font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label{color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label{flex:1}.ng-dropdown-panel.ap-select .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1}.ng-dropdown-panel.ap-select .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts{flex:1;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active{color:var(--ref-color-electric-blue-150)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: InputComponent, selector: "ap-input", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "disabled", "clearable", "inputType", "inputId", "name", "label", "description", "prefix", "suffix", "required", "placeholder", "errorMessage", "successMessage", "symbolPosition"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color"], outputs: ["clear"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
235
235
  }
236
236
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectComponent, decorators: [{
237
237
  type: Component,
@@ -251,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
251
251
  TagComponent,
252
252
  BadgeComponent,
253
253
  LoaderComponent,
254
- ], providers: [SELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<label\n *ngIf=\"label && !inlineLabel\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n <span\n *ngIf=\"description\"\n class=\"description\">\n {{ description }}\n </span>\n</label>\n\n<div\n tabIndex=\"0\"\n *ngIf=\"inlineLabel\"\n #inlineLabel\n class=\"inline-label\"\n (click)=\"onOpenSelect()\"\n (mouseenter)=\"onInlineInputEnter()\"\n (mouseleave)=\"onInlineInputLeave()\">\n <label\n *ngIf=\"label && inlineLabel\"\n class=\"label\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n </label>\n <div class=\"divider\"></div>\n</div>\n\n<ng-select\n #select\n class=\"ap-select\"\n [tabIndex]=\"0\"\n [clearable]=\"clearable\"\n [placeholder]=\"placeholder\"\n [labelForId]=\"selectId\"\n [searchable]=\"false\"\n [closeOnSelect]=\"multiple ? false : true\"\n [bindValue]=\"optionValue ? optionValue : 'label'\"\n [groupBy]=\"group ? optionGroupLabel : ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [markFirst]=\"false\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"false\"\n [appendTo]=\"appendTo\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n [items]=\"optionsSignal()\"\n [loading]=\"loadingSignal()\"\n [ngModel]=\"selectedValuesSignal()\"\n (ngModelChange)=\"onSelectedValuesChange($event)\"\n (open)=\"onSelectOpened()\">\n <ng-container *ngIf=\"searchable || selectAll\">\n <ng-template\n let-item=\"item\"\n ng-header-tmp>\n <ng-container *ngIf=\"searchable\">\n <ap-input\n #searchInput\n tabindex=\"0\"\n name=\"search-input\"\n class=\"full-width\"\n symbolPosition=\"right\"\n [placeholder]=\"searchPlaceholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"onSearchTermChange($event)\">\n <ap-symbol symbolId=\"search-alternate\" />\n </ap-input>\n </ng-container>\n <ng-container *ngIf=\"selectAll\">\n <ap-checkbox\n class=\"select-all-checkbox\"\n name=\"option-group-select-all\"\n [indeterminate]=\"partialySelectedSignal()\"\n [checked]=\"allSelectedSignal()\"\n (click)=\"onToggleAll()\">\n <span>\n {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n </span>\n </ap-checkbox>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-optgroup-tmp>\n <div\n class=\"group\"\n [class.with-search]=\"searchable\"\n [class.with-select-all]=\"selectAll\">\n <ng-container *ngIf=\"!multiple\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ng-container>\n <ng-container *ngIf=\"multiple\">\n <ap-checkbox\n *ngIf=\"selectableGroup\"\n [name]=\"'option-group-selection-' + item.group\"\n [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n [checked]=\"isGroupChecked(item$.children)\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ap-checkbox>\n <span\n *ngIf=\"!selectableGroup\"\n class=\"group-label\">\n {{ item.group }}\n </span>\n </ng-container>\n </div>\n </ng-template>\n <ng-template\n let-items=\"items\"\n let-item$=\"item$\"\n ng-multi-label-tmp>\n <ng-container>\n <div class=\"multiple-item\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n \u2202\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ loadingText }}\n </span>\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp></ng-template>\n <ng-container *ngIf=\"create\">\n <ng-template ng-footer-tmp>\n <button\n class=\"create-new\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"add-2022\"\n size=\"micro\" />\n <span>\n {{ createText }}\n </span>\n <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n </button>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ng-container *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n <div class=\"option\">{{ item }}</div>\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && item[optionCaption]\"\n [class.multiple]=\"multiple\"\n (mouseenter)=\"onHoverItem(item$.htmlId)\"\n (mouseleave)=\"onLeaveItem()\">\n <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n </div>\n </ng-container>\n <ng-container *ngIf=\"optionDivider && item[optionDivider]\">\n <div class=\"divider\"></div>\n </ng-container>\n </ng-template>\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n <ng-container *ngIf=\"!optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n {{ notFoundText }}\n </div>\n </ng-template>\n</ng-select>\n\n<ng-template\n #contentItem\n let-item=\"item\"\n let-item$=\"item$\">\n <ng-container *ngIf=\"multiple\">\n <div class=\"disabled-opaque\"></div>\n <ap-checkbox\n *ngIf=\"multiple\"\n [checked]=\"item$.selected\"\n [disabled]=\"item$.disabled\"\n [name]=\"'option-selection-' + item$.htmlId\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ap-checkbox>\n </ng-container>\n <ng-container *ngIf=\"!multiple\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!optionLabel\">\n <span class=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div class=\"texts\">\n <div class=\"first-line\">\n <span class=\"label\">{{ item[optionLabel] }}</span>\n <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n </ng-container>\n </div>\n <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n <span class=\"caption\">\n {{ item[optionCaption] }}\n </span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple\">\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"onSelectOnly(item)\">\n {{ onlyText }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"item$.selected && !multiple\">\n <ap-symbol\n symbolId=\"check-2\"\n size=\"micro\" />\n </ng-container>\n </div>\n</ng-template>\n", styles: ["@import\"~@ng-select/ng-select/themes/default.theme.css\";ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:-moz-fit-content;width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}.ng-select.ap-select .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important}.ng-select.ap-select.ng-select-multiple .ng-value-container{padding-left:12px}.ng-select.ap-select.ng-select-multiple .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-dropdown-panel.ap-select{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option{background-color:var(--ref-color-electric-blue-10);font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label{color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%}.ng-dropdown-panel.ap-select .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label{flex:1}.ng-dropdown-panel.ap-select .option.not-found{padding:11px var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1}.ng-dropdown-panel.ap-select .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts{flex:1;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active{color:var(--ref-color-electric-blue-150)}\n"] }]
254
+ ], providers: [SELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<label\n *ngIf=\"label && !inlineLabel\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n <span\n *ngIf=\"description\"\n class=\"description\">\n {{ description }}\n </span>\n</label>\n\n<div\n tabIndex=\"0\"\n *ngIf=\"inlineLabel\"\n #inlineLabel\n class=\"inline-label\"\n (click)=\"onOpenSelect()\"\n (mouseenter)=\"onInlineInputEnter()\"\n (mouseleave)=\"onInlineInputLeave()\">\n <label\n *ngIf=\"label && inlineLabel\"\n class=\"label\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n </label>\n <div class=\"divider\"></div>\n</div>\n\n<ng-select\n #select\n class=\"ap-select\"\n [tabIndex]=\"0\"\n [clearable]=\"clearable\"\n [placeholder]=\"placeholder\"\n [labelForId]=\"selectId\"\n [searchable]=\"false\"\n [closeOnSelect]=\"multiple ? false : true\"\n [bindValue]=\"optionValue ? optionValue : 'label'\"\n [groupBy]=\"group ? optionGroupLabel : ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [markFirst]=\"false\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"false\"\n [appendTo]=\"appendTo\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n [items]=\"optionsSignal()\"\n [loading]=\"loadingSignal()\"\n [ngModel]=\"selectedValuesSignal()\"\n (ngModelChange)=\"onSelectedValuesChange($event)\"\n (open)=\"onSelectOpened()\">\n <ng-container *ngIf=\"searchable || selectAll\">\n <ng-template\n let-item=\"item\"\n ng-header-tmp>\n <ng-container *ngIf=\"searchable\">\n <ap-input\n #searchInput\n tabindex=\"0\"\n name=\"search-input\"\n class=\"full-width\"\n symbolPosition=\"right\"\n [placeholder]=\"searchPlaceholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"onSearchTermChange($event)\">\n <ap-symbol symbolId=\"search-alternate\" />\n </ap-input>\n </ng-container>\n <ng-container *ngIf=\"selectAll\">\n <ap-checkbox\n class=\"select-all-checkbox\"\n name=\"option-group-select-all\"\n [indeterminate]=\"partialySelectedSignal()\"\n [checked]=\"allSelectedSignal()\"\n (click)=\"onToggleAll()\">\n <span>\n {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n </span>\n </ap-checkbox>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-optgroup-tmp>\n <div\n class=\"group\"\n [class.with-search]=\"searchable\"\n [class.with-select-all]=\"selectAll\">\n <ng-container *ngIf=\"!multiple\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ng-container>\n <ng-container *ngIf=\"multiple\">\n <ap-checkbox\n *ngIf=\"selectableGroup\"\n [name]=\"'option-group-selection-' + item.group\"\n [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n [checked]=\"isGroupChecked(item$.children)\">\n <span class=\"group-label\">\n {{ item.group }}\n </span>\n <ap-badge\n *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n color=\"blue\">\n {{ optionGroupTag[item.group] }}\n </ap-badge>\n </ap-checkbox>\n <span\n *ngIf=\"!selectableGroup\"\n class=\"group-label\">\n {{ item.group }}\n </span>\n </ng-container>\n </div>\n </ng-template>\n <ng-template\n let-items=\"items\"\n let-item$=\"item$\"\n ng-multi-label-tmp>\n <ng-container>\n <div class=\"multiple-item\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n \u2202\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ loadingText }}\n </span>\n </div>\n </ng-template>\n <ng-template ng-loadingspinner-tmp></ng-template>\n <ng-container *ngIf=\"create\">\n <ng-template ng-footer-tmp>\n <button\n class=\"create-new\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"add-2022\"\n size=\"micro\" />\n <span>\n {{ createText }}\n </span>\n <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n </button>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ng-container *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n <div class=\"option\">{{ item }}</div>\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && item[optionCaption]\"\n [class.multiple]=\"multiple\"\n (mouseenter)=\"onHoverItem(item$.htmlId)\"\n (mouseleave)=\"onLeaveItem()\">\n <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n </div>\n </ng-container>\n <ng-container *ngIf=\"optionDivider && item[optionDivider]\">\n <div class=\"divider\"></div>\n </ng-container>\n </ng-template>\n <ng-template\n let-item=\"item\"\n ng-label-tmp>\n <ng-container *ngIf=\"!optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <span class=\"text-item\">\n {{ item }}\n </span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"optionLabel\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n removable=\"true\"\n [content]=\"item[optionLabel]\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n clearable=\"true\"\n (clear)=\"removeSelectedItem($event, item)\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n {{ item[optionLabel] }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'withAvatar'\">\n <div class=\"with-avatar\">\n <ap-avatar\n *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n <span class=\"text-item\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n {{ notFoundText }}\n </div>\n </ng-template>\n</ng-select>\n\n<ng-template\n #contentItem\n let-item=\"item\"\n let-item$=\"item$\">\n <ng-container *ngIf=\"multiple\">\n <div class=\"disabled-opaque\"></div>\n <ap-checkbox\n *ngIf=\"multiple\"\n [checked]=\"item$.selected\"\n [disabled]=\"item$.disabled\"\n [name]=\"'option-selection-' + item$.htmlId\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ap-checkbox>\n </ng-container>\n <ng-container *ngIf=\"!multiple\">\n <div class=\"disabled-opaque\"></div>\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!optionLabel\">\n <span class=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"item[optionProfileImageUrl]\" />\n </ng-container>\n <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n <div class=\"texts\">\n <div class=\"first-line\">\n <span class=\"label\">{{ item[optionLabel] }}</span>\n <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n </ng-container>\n </div>\n <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n <span class=\"caption\">\n {{ item[optionCaption] }}\n </span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple\">\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"onSelectOnly(item)\">\n {{ onlyText }}\n </button>\n </ng-container>\n <ng-container *ngIf=\"item$.selected && !multiple\">\n <ap-symbol\n symbolId=\"check-2\"\n size=\"micro\" />\n </ng-container>\n </div>\n</ng-template>\n", styles: ["@import\"~@ng-select/ng-select/themes/default.theme.css\";ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:-moz-fit-content;width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}.ng-select.ap-select .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select .ng-select-container .ng-value-container{overflow-x:auto}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important}.ng-select.ap-select.ng-select-multiple .ng-value-container{padding-left:12px}.ng-select.ap-select.ng-select-multiple .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-dropdown-panel.ap-select{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option{background-color:var(--ref-color-electric-blue-10);font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label{color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label{flex:1}.ng-dropdown-panel.ap-select .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1}.ng-dropdown-panel.ap-select .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts{flex:1;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active{color:var(--ref-color-electric-blue-150)}\n"] }]
255
255
  }], ctorParameters: function () { return []; }, propDecorators: { searchInput: [{
256
256
  type: ViewChild,
257
257
  args: ['searchInput']