@ifsworld/granite-components 11.7.1 → 11.8.0

package/fesm2022/ifsworld-granite-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ViewEncapsulation, Pipe, inject, ContentChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ContentChild, Pipe, inject } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -1318,7 +1318,7 @@ class GraniteMenuTriggerForDirective {
         this._isMenuOpen = false;
         // Tracking input type is necessary so it's possible to only auto-focus
         // the first item of the list when the menu is opened via the keyboard
-        this._openedBy = null;
+        this.openedBy = null;
         this._hoverSubscription = Subscription.EMPTY;
         this._menuCloseSubscription = Subscription.EMPTY;
         this._closingActionsSubscription = Subscription.EMPTY;
@@ -1330,7 +1330,7 @@ class GraniteMenuTriggerForDirective {
          * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
          */
         this._handleTouchStart = () => {
-            this._openedBy = 'touch';
+            this.openedBy = 'touch';
         };
         // ----------------------------------------- //
         // --- Here be poor man's touch gestures --- //
@@ -1562,11 +1562,11 @@ class GraniteMenuTriggerForDirective {
         this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
         this.animateOpenMenu();
         this._setIsMenuOpen(true);
-        this.menu.focusFirstItem(this._openedBy || 'program');
+        this.menu.focusFirstItem(this.openedBy || 'program');
     }
     /** Emits an eventtype when the menu is opened */
     openedEvent() {
-        if (this._openedBy === 'touch' || this._openedBy === 'mouse') {
+        if (this.openedBy === 'touch' || this.openedBy === 'mouse') {
             this.menu.opened.emit('click');
         }
         else {
@@ -1616,10 +1616,10 @@ class GraniteMenuTriggerForDirective {
     /** Handles mouse presses on the trigger. */
     _handleMousedown(event) {
         if (!isFakeMousedownFromScreenReader(event)) {
-            if (this._openedBy !== 'touch') {
+            if (this.openedBy !== 'touch') {
                 // Since right or middle button clicks won't trigger the `click` event,
                 // we shouldn't consider the menu as opened by mouse in those cases.
-                this._openedBy = event.button === 0 ? 'mouse' : null;
+                this.openedBy = event.button === 0 ? 'mouse' : null;
             }
             // Since clicking on the trigger won't close the menu if it opens a sub-menu,
             // we should prevent focus from moving onto it via click to avoid the
@@ -1663,7 +1663,7 @@ class GraniteMenuTriggerForDirective {
         // it won't be closed immediately after it is opened.
         filter((active) => active === this._menuItemInstance /*&& !active.disabled*/), delay(0, asapScheduler))
             .subscribe(() => {
-            this._openedBy = 'mouse';
+            this.openedBy = 'mouse';
             // If the same menu is used between multiple triggers, it might still be animating
             // while the new trigger tries to re-open it. Wait for the animation to finish
             // before doing so. Also interrupt if the user moves to another item.
@@ -1688,15 +1688,15 @@ class GraniteMenuTriggerForDirective {
         // We should reset focus if the user is navigating using a keyboard or
         // if we have a top-level trigger which might cause focus to be lost
         // when clicking outside of the menu.
-        if (!this._openedBy) {
+        if (!this.openedBy) {
             // Note that the focus style will show up both for `program` and
             // `keyboard` so we don't have to specify which one it is.
             this.focus();
         }
         else if (!this.triggersSubmenu()) {
-            this.focus(this._openedBy);
+            this.focus(this.openedBy);
         }
-        this._openedBy = null;
+        this.openedBy = null;
     }
     // Set state rather than toggle to support triggers sharing a menu
     _setIsMenuOpen(isOpen) {
@@ -1920,12 +1920,13 @@ class GraniteMenuTriggerForDirective {
             : target * (-Math.pow(2, (-10 * current) / end) + 1) + offset;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteMenuTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: GRANITE_MENU_PANEL, optional: true }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: GraniteMenuItemComponent, optional: true, self: true }, { token: i3.Directionality, optional: true }, { token: i1.FocusMonitor }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteMenuTriggerForDirective, selector: "[graniteMenuTriggerFor]", inputs: { menu: ["graniteMenuTriggerFor", "menu"], openOnClick: "openOnClick" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isMenuOpen || null", "attr.aria-controls": "_isMenuOpen ? menu.panelId : null" }, classAttribute: "granite-menu-trigger" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteMenuTriggerForDirective, selector: "[graniteMenuTriggerFor]", inputs: { menu: ["graniteMenuTriggerFor", "menu"], openOnClick: "openOnClick" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isMenuOpen || null", "attr.aria-controls": "_isMenuOpen ? menu.panelId : null" }, classAttribute: "granite-menu-trigger" }, exportAs: ["graniteMenuTriggerFor"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteMenuTriggerForDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[graniteMenuTriggerFor]`,
+                    exportAs: 'graniteMenuTriggerFor',
                     host: {
                         class: 'granite-menu-trigger', // Required for test harness host selector
                         'aria-haspopup': 'true',
@@ -3614,7 +3615,7 @@ class GraniteChipListComponent extends GraniteChipListBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteChipListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i3.Directionality, optional: true }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"], role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "class.granite-chip-list-disabled": "disabled", "attr.tabindex": "disabled ? null : _tabIndex", "attr.role": "role", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiselect", "attr.aria-orientation": "ariaOrientation", "id": "_uid" }, classAttribute: "granite-chip-list" }, queries: [{ propertyName: "chips", predicate: GraniteChipComponent, descendants: true }], exportAs: ["graniteChipList"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"], role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "class.granite-chip-list-disabled": "disabled", "attr.tabindex": "disabled ? null : _tabIndex", "attr.role": "role", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiselect", "attr.aria-orientation": "ariaOrientation", "id": "_uid" }, classAttribute: "granite-chip-list" }, queries: [{ propertyName: "chips", predicate: GraniteChipComponent, descendants: true }], exportAs: ["graniteChipList"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host.granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}:host ::ng-deep input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}:host ::ng-deep granite-icon{color:var(--granite-color-text);background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteChipListComponent, decorators: [{
             type: Component,
@@ -3632,7 +3633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         '(focus)': 'focus()',
                         '(blur)': '_blur()',
                         '(keydown)': '_keydown($event)',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}:host ::ng-deep input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}:host ::ng-deep granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i2$1.NgForm, decorators: [{
@@ -3925,6 +3926,464 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }] });
 
+let contactsPanelUid = 0;
+class ContactsTriggerDataComponent {
+    constructor() {
+        this.xPosition = 'after';
+        this.yPosition = 'below';
+        /**
+         * Used for locating the panel in tests and setting the aria-control attribute
+         * for the contacts trigger.
+         */
+        this.panelId = `granite-contacts-panel-${contactsPanelUid++}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ContactsTriggerDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ContactsTriggerDataComponent, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ContactsTriggerDataComponent, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+class GraniteCustomStatusDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomStatusDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCustomStatusDirective, selector: "[graniteCustomStatus]", inputs: { graniteCustomStatus: "graniteCustomStatus" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomStatusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteCustomStatus]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { graniteCustomStatus: [{
+                type: Input
+            }] } });
+
+class GraniteCustomProfileDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomProfileDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCustomProfileDirective, selector: "[graniteCustomProfile]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCustomProfileDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteCustomProfile]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class GraniteContactsProfileComponent {
+    ngOnChanges(changes) {
+        const profile = changes.profile?.currentValue;
+        if (profile && profile.name && profile.surname) {
+            this.createProfileInitials(profile.name, profile.surname);
+        }
+    }
+    createProfileInitials(name, surname) {
+        this._initials = name[0].toUpperCase() + surname[0].toUpperCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <img\n    data-fnd=\"profile-avatar\"\n    *ngIf=\"profile?.avatar; else noProfileAvatar\"\n    [src]=\"profile?.avatar\"\n    alt=\"profile avatar\"\n    class=\"profile-avatar\"\n  />\n\n  <ng-template #noProfileAvatar>\n    <div class=\"no-profile-avatar\">\n      <span\n        data-fnd=\"no-profile-avatar-initials\"\n        class=\"no-profile-avatar-initials\"\n        >{{ _initials }}</span\n      >\n    </div>\n  </ng-template>\n\n  <div>\n    <p data-fnd=\"profile-info-names\" class=\"profile-name\">\n      {{ profile?.name }} {{ profile?.surname }}\n    </p>\n    <p data-fnd=\"profile-info-job-title\" class=\"profile-job-title\">\n      {{ profile?.jobTitle }}\n    </p>\n  </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover}.profile-name{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0 0 var(--granite-spacing-8)}.profile-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);margin:0}.profile-surname{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}.no-profile-avatar{display:flex;width:4.5rem;height:4.5rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-contacts-profile', host: {
+                        class: 'granite-contacts-profile',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n  <img\n    data-fnd=\"profile-avatar\"\n    *ngIf=\"profile?.avatar; else noProfileAvatar\"\n    [src]=\"profile?.avatar\"\n    alt=\"profile avatar\"\n    class=\"profile-avatar\"\n  />\n\n  <ng-template #noProfileAvatar>\n    <div class=\"no-profile-avatar\">\n      <span\n        data-fnd=\"no-profile-avatar-initials\"\n        class=\"no-profile-avatar-initials\"\n        >{{ _initials }}</span\n      >\n    </div>\n  </ng-template>\n\n  <div>\n    <p data-fnd=\"profile-info-names\" class=\"profile-name\">\n      {{ profile?.name }} {{ profile?.surname }}\n    </p>\n    <p data-fnd=\"profile-info-job-title\" class=\"profile-job-title\">\n      {{ profile?.jobTitle }}\n    </p>\n  </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover}.profile-name{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0 0 var(--granite-spacing-8)}.profile-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);margin:0}.profile-surname{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}.no-profile-avatar{display:flex;width:4.5rem;height:4.5rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"] }]
+        }], propDecorators: { profile: [{
+                type: Input
+            }], profileClass: [{
+                type: Input
+            }] } });
+
+const CONTACT_DEFAULT_STATUS = {
+    AVAILABLE: 'Available',
+    AWAY: 'Away',
+    BE_RIGHT_BACK: 'BeRightBack',
+    BUSY: 'Busy',
+    DO_NOT_DISTURB: 'DoNotDisturb',
+    OFFLINE: 'Offline',
+};
+
+class ContactItemDefaultStatusComponent {
+    constructor() {
+        this.CONTACT_STATUS = CONTACT_DEFAULT_STATUS;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ContactItemDefaultStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ContactItemDefaultStatusComponent, selector: "granite-contact-item-default-status", inputs: { status: "status" }, host: { classAttribute: "granite-contact-item-default-status" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"status\">\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.AVAILABLE\">\n    <svg\n      data-fnd=\"available\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"10\"\n      viewBox=\"0 0 9 10\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.085 0.915009C1.83008 0.915009 0 2.74509 0 5.00001C0 7.25493 1.83008 9.08501 4.085 9.08501C6.33992 9.08501 8.17 7.25493 8.17 5.00001C8.17 2.74509 6.33992 0.915009 4.085 0.915009Z\"\n        fill=\"#17A511\"\n      />\n      <path\n        d=\"M2.45099 4.82838L3.47224 6.06418L5.51474 4.21048\"\n        stroke=\"white\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.BUSY\">\n    <svg\n      data-fnd=\"busy\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.25504 0.169922C2.00012 0.169922 0.170044 2 0.170044 4.25492C0.170044 6.50984 2.00012 8.33992 4.25504 8.33992C6.50996 8.33992 8.34004 6.50984 8.34004 4.25492C8.34004 2 6.50996 0.169922 4.25504 0.169922Z\"\n        fill=\"#D23335\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.DO_NOT_DISTURB\">\n    <svg\n      data-fnd=\"doNotDisturb\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.085 0C1.83008 0 0 1.83008 0 4.085C0 6.33992 1.83008 8.17 4.085 8.17C6.33992 8.17 8.17 6.33992 8.17 4.085C8.17 1.83008 6.33992 0 4.085 0Z\"\n        fill=\"#D23335\"\n      />\n      <path d=\"M2 4L6 4\" stroke=\"white\" stroke-linecap=\"round\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.AWAY\">\n    <svg\n      data-fnd=\"away\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.085 0C1.83008 0 0 1.83008 0 4.085C0 6.33992 1.83008 8.17 4.085 8.17C6.33992 8.17 8.17 6.33992 8.17 4.085C8.17 1.83008 6.33992 0 4.085 0Z\"\n        fill=\"#EDA000\"\n      />\n      <path d=\"M4 2L4 3.875L5.5 5.5\" stroke=\"white\" stroke-linecap=\"round\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.OFFLINE\">\n    <svg\n      data-fnd=\"offline\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M0.5 4.085C0.5 2.10622 2.10622 0.5 4.085 0.5C6.06378 0.5 7.67 2.10622 7.67 4.085C7.67 6.06378 6.06378 7.67 4.085 7.67C2.10622 7.67 0.5 6.06378 0.5 4.085Z\"\n        stroke=\"#7D7D7D\"\n      />\n      <path d=\"M3 3L5 5\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" />\n      <path d=\"M5 3L3 5\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" />\n    </svg>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ContactItemDefaultStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-contact-item-default-status', host: {
+                        class: 'granite-contact-item-default-status',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"status\">\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.AVAILABLE\">\n    <svg\n      data-fnd=\"available\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"10\"\n      viewBox=\"0 0 9 10\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.085 0.915009C1.83008 0.915009 0 2.74509 0 5.00001C0 7.25493 1.83008 9.08501 4.085 9.08501C6.33992 9.08501 8.17 7.25493 8.17 5.00001C8.17 2.74509 6.33992 0.915009 4.085 0.915009Z\"\n        fill=\"#17A511\"\n      />\n      <path\n        d=\"M2.45099 4.82838L3.47224 6.06418L5.51474 4.21048\"\n        stroke=\"white\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.BUSY\">\n    <svg\n      data-fnd=\"busy\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.25504 0.169922C2.00012 0.169922 0.170044 2 0.170044 4.25492C0.170044 6.50984 2.00012 8.33992 4.25504 8.33992C6.50996 8.33992 8.34004 6.50984 8.34004 4.25492C8.34004 2 6.50996 0.169922 4.25504 0.169922Z\"\n        fill=\"#D23335\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.DO_NOT_DISTURB\">\n    <svg\n      data-fnd=\"doNotDisturb\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.085 0C1.83008 0 0 1.83008 0 4.085C0 6.33992 1.83008 8.17 4.085 8.17C6.33992 8.17 8.17 6.33992 8.17 4.085C8.17 1.83008 6.33992 0 4.085 0Z\"\n        fill=\"#D23335\"\n      />\n      <path d=\"M2 4L6 4\" stroke=\"white\" stroke-linecap=\"round\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.AWAY\">\n    <svg\n      data-fnd=\"away\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4.085 0C1.83008 0 0 1.83008 0 4.085C0 6.33992 1.83008 8.17 4.085 8.17C6.33992 8.17 8.17 6.33992 8.17 4.085C8.17 1.83008 6.33992 0 4.085 0Z\"\n        fill=\"#EDA000\"\n      />\n      <path d=\"M4 2L4 3.875L5.5 5.5\" stroke=\"white\" stroke-linecap=\"round\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"CONTACT_STATUS.OFFLINE\">\n    <svg\n      data-fnd=\"offline\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M0.5 4.085C0.5 2.10622 2.10622 0.5 4.085 0.5C6.06378 0.5 7.67 2.10622 7.67 4.085C7.67 6.06378 6.06378 7.67 4.085 7.67C2.10622 7.67 0.5 6.06378 0.5 4.085Z\"\n        stroke=\"#7D7D7D\"\n      />\n      <path d=\"M3 3L5 5\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" />\n      <path d=\"M5 3L3 5\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" />\n    </svg>\n  </ng-container>\n</ng-container>\n" }]
+        }], propDecorators: { status: [{
+                type: Input
+            }] } });
+
+class GraniteContactItemTitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: { contact: "contact" }, host: { classAttribute: "granite-contact-item-title" }, ngImport: i0, template: "<button\n  tabindex=\"0\"\n  data-fnd=\"contact-item-title\"\n  [class.title-status-active]=\"!contact.disabled && !contact.options\"\n  [class.title-status-disabled]=\"contact.disabled\"\n  [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n  {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular)}.title-status-active{color:var(--granite-color-text-link)}.title-status-active:hover{text-decoration:underline;cursor:pointer}.title-status-disabled{color:var(--granite-color-text-hint)}.title-status-parent{color:var(--granite-color-text)}button{all:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-contact-item-title', host: {
+                        class: 'granite-contact-item-title',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  tabindex=\"0\"\n  data-fnd=\"contact-item-title\"\n  [class.title-status-active]=\"!contact.disabled && !contact.options\"\n  [class.title-status-disabled]=\"contact.disabled\"\n  [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n  {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular)}.title-status-active{color:var(--granite-color-text-link)}.title-status-active:hover{text-decoration:underline;cursor:pointer}.title-status-disabled{color:var(--granite-color-text-hint)}.title-status-parent{color:var(--granite-color-text)}button{all:unset}\n"] }]
+        }], propDecorators: { contact: [{
+                type: Input
+            }] } });
+
+class GraniteContactItemComponent {
+    constructor() {
+        this.selectedContact = new EventEmitter();
+    }
+    emitSelectedContact(contact) {
+        if (contact.disabled || contact.options) {
+            return;
+        }
+        this.selectedContact.emit(contact);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: { contact: "contact" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contact-item" }, ngImport: i0, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n  <div class=\"contact-item-main\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        contactItem;\n        context: { contact: contact, testName: 'contact' }\n      \"\n    ></ng-container>\n  </div>\n\n  <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n    <li\n      tabindex=\"0\"\n      *ngFor=\"let option of contact.options; let i = index\"\n      class=\"option-item\"\n      [attr.data-fnd]=\"'contact-option-' + i\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          contactItem;\n          context: { contact: option, testName: 'contact-option-' + i }\n        \"\n      ></ng-container>\n    </li>\n  </ul>\n</div>\n\n<ng-template let-testName=\"testName\" let-contact=\"contact\" #contactItem>\n  <granite-icon\n    [attr.data-fnd]=\"testName + '-icon'\"\n    fontIcon=\"{{ contact.iconName }}\"\n  ></granite-icon>\n\n  <granite-contact-item-title\n    [attr.data-fnd]=\"testName + '-title'\"\n    tabindex=\"0\"\n    [contact]=\"contact\"\n    (click)=\"emitSelectedContact(contact)\"\n  ></granite-contact-item-title>\n\n  <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n    <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n  </ng-container>\n\n  <ng-template #defaultStatus>\n    <granite-contact-item-default-status\n      [attr.data-fnd]=\"testName + '-status'\"\n      [status]=\"contact.status\"\n    ></granite-contact-item-default-status>\n  </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-4);list-style:none}.contact-item-options .option-item{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"], dependencies: [{ kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContactItemDefaultStatusComponent, selector: "granite-contact-item-default-status", inputs: ["status"] }, { kind: "component", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: ["contact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-contact-item', host: {
+                        class: 'granite-contact-item',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n  <div class=\"contact-item-main\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        contactItem;\n        context: { contact: contact, testName: 'contact' }\n      \"\n    ></ng-container>\n  </div>\n\n  <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n    <li\n      tabindex=\"0\"\n      *ngFor=\"let option of contact.options; let i = index\"\n      class=\"option-item\"\n      [attr.data-fnd]=\"'contact-option-' + i\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          contactItem;\n          context: { contact: option, testName: 'contact-option-' + i }\n        \"\n      ></ng-container>\n    </li>\n  </ul>\n</div>\n\n<ng-template let-testName=\"testName\" let-contact=\"contact\" #contactItem>\n  <granite-icon\n    [attr.data-fnd]=\"testName + '-icon'\"\n    fontIcon=\"{{ contact.iconName }}\"\n  ></granite-icon>\n\n  <granite-contact-item-title\n    [attr.data-fnd]=\"testName + '-title'\"\n    tabindex=\"0\"\n    [contact]=\"contact\"\n    (click)=\"emitSelectedContact(contact)\"\n  ></granite-contact-item-title>\n\n  <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n    <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n  </ng-container>\n\n  <ng-template #defaultStatus>\n    <granite-contact-item-default-status\n      [attr.data-fnd]=\"testName + '-status'\"\n      [status]=\"contact.status\"\n    ></granite-contact-item-default-status>\n  </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-4);list-style:none}.contact-item-options .option-item{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"] }]
+        }], propDecorators: { contact: [{
+                type: Input
+            }], selectedContact: [{
+                type: Output
+            }] } });
+
+class GraniteContactsComponent extends ContactsTriggerDataComponent {
+    constructor() {
+        super(...arguments);
+        this.contacts = [];
+        this.defaultShow = false;
+        this.selectedContact = new EventEmitter();
+        this._contactsExtended = [];
+    }
+    ngOnChanges(changes) {
+        if (changes.contacts && !changes.contacts.currentValue) {
+            this.contacts = [];
+        }
+    }
+    ngAfterContentChecked() {
+        this._contactsExtended = this.setProperCustomStatusTemplates(this._customStatuses.toArray(), this.contacts);
+    }
+    onSelectedContact(contact) {
+        this.selectedContact.emit(contact);
+    }
+    setProperCustomStatusTemplates(customStatusDirectives, contacts) {
+        return this.applyTemplates(contacts, customStatusDirectives);
+    }
+    applyTemplates(contacts, directives) {
+        return contacts.map((item) => {
+            const matchingDirective = directives.find((d) => d.graniteCustomStatus === item.status);
+            const result = { ...item };
+            if (matchingDirective) {
+                result.statusTemplate = matchingDirective.templateRef;
+            }
+            if (item.options) {
+                result.options = this.applyTemplates(item.options, directives);
+            }
+            return result;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsComponent, selector: "granite-contacts", inputs: { contacts: "contacts", profile: "profile", profileClass: "profileClass", defaultShow: "defaultShow" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contacts" }, queries: [{ propertyName: "customProfileDirective", first: true, predicate: GraniteCustomProfileDirective, descendants: true }, { propertyName: "_customStatuses", predicate: GraniteCustomStatusDirective }], exportAs: ["graniteContacts"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #contactsTemplate>\n  <div data-fnd=\"contacts\" class=\"granite-contact\">\n    <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n      <ng-container\n        *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n      ></ng-container>\n    </ng-container>\n\n    <ng-template #defaultProfile>\n      <granite-contacts-profile\n        data-fnd=\"default-profile\"\n        [profileClass]=\"profileClass\"\n        [profile]=\"profile\"\n      ></granite-contacts-profile>\n    </ng-template>\n\n    <ul class=\"contact-list\">\n      <li *ngFor=\"let contact of _contactsExtended\">\n        <granite-contact-item\n          [contact]=\"contact\"\n          (selectedContact)=\"onSelectedContact($event)\"\n        ></granite-contact-item>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"defaultShow\">\n  <ng-container *ngTemplateOutlet=\"contactsTemplate\"></ng-container>\n</ng-container>\n", styles: [".granite-contact{display:inline-block;font-size:var(--granite-font-size-body);font-family:var(--granite-font-family-default);color:var(--granite-color-text-weak);min-width:10rem;max-width:20rem;padding:var(--granite-spacing-16);box-shadow:var(--granite-shadow-popover);background:var(--granite-color-background-variant)}.granite-contact .contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--granite-spacing-8);list-style-type:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: ["profile", "profileClass"] }, { kind: "component", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: ["contact"], outputs: ["selectedContact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-contacts', exportAs: 'graniteContacts', host: {
+                        class: 'granite-contacts',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contactsTemplate>\n  <div data-fnd=\"contacts\" class=\"granite-contact\">\n    <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n      <ng-container\n        *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n      ></ng-container>\n    </ng-container>\n\n    <ng-template #defaultProfile>\n      <granite-contacts-profile\n        data-fnd=\"default-profile\"\n        [profileClass]=\"profileClass\"\n        [profile]=\"profile\"\n      ></granite-contacts-profile>\n    </ng-template>\n\n    <ul class=\"contact-list\">\n      <li *ngFor=\"let contact of _contactsExtended\">\n        <granite-contact-item\n          [contact]=\"contact\"\n          (selectedContact)=\"onSelectedContact($event)\"\n        ></granite-contact-item>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"defaultShow\">\n  <ng-container *ngTemplateOutlet=\"contactsTemplate\"></ng-container>\n</ng-container>\n", styles: [".granite-contact{display:inline-block;font-size:var(--granite-font-size-body);font-family:var(--granite-font-family-default);color:var(--granite-color-text-weak);min-width:10rem;max-width:20rem;padding:var(--granite-spacing-16);box-shadow:var(--granite-shadow-popover);background:var(--granite-color-background-variant)}.granite-contact .contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--granite-spacing-8);list-style-type:none;padding:0;margin:0}\n"] }]
+        }], propDecorators: { contacts: [{
+                type: Input
+            }], profile: [{
+                type: Input
+            }], profileClass: [{
+                type: Input
+            }], defaultShow: [{
+                type: Input
+            }], selectedContact: [{
+                type: Output
+            }], _customStatuses: [{
+                type: ContentChildren,
+                args: [GraniteCustomStatusDirective]
+            }], customProfileDirective: [{
+                type: ContentChild,
+                args: [GraniteCustomProfileDirective]
+            }] } });
+
+class GraniteContactsTriggerForDirective {
+    constructor(_overlay, _element, _viewContainerRef, _outsideClickDispatcher, 
+    /** Client input device information */
+    _clientInput, 
+    /** Client output device information */
+    _clientOutput, _dir, _focusMonitor) {
+        this._overlay = _overlay;
+        this._element = _element;
+        this._viewContainerRef = _viewContainerRef;
+        this._outsideClickDispatcher = _outsideClickDispatcher;
+        this._clientInput = _clientInput;
+        this._clientOutput = _clientOutput;
+        this._dir = _dir;
+        this._focusMonitor = _focusMonitor;
+        /** Whether the associated contacts is open */
+        this._isContactsOpen = false;
+        this._contactsCloseSubscription = Subscription.EMPTY;
+        this._portal = null;
+        this._overlayRef = null;
+    }
+    ngAfterContentInit() {
+        const selectedContact = this.contacts.selectedContact;
+        this._contactsCloseSubscription = selectedContact.subscribe(() => this.closeContacts());
+    }
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        this._contactsCloseSubscription.unsubscribe();
+    }
+    isOpen() {
+        return this._isContactsOpen;
+    }
+    openContacts() {
+        if (this._isContactsOpen) {
+            return;
+        }
+        this.contacts.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+        this.contacts.clientInput = this._clientInput;
+        this.contacts.clientOutput = this._clientOutput;
+        const panelClass = [];
+        if (this._clientOutput?.device === 'touch') {
+            panelClass.push('granite-overlay-pane-center');
+        }
+        const scrollStrategy = this._clientOutput?.device !== 'touch'
+            ? this._overlay.scrollStrategies.reposition()
+            : this._overlay.scrollStrategies.block();
+        const hasBackdrop = this._clientOutput?.device === 'touch';
+        if (!this._overlayRef) {
+            const config = new OverlayConfig({
+                positionStrategy: this._positionStrategy(),
+                backdropClass: 'granite-overlay-dark-glass-backdrop',
+                scrollStrategy,
+                direction: this._dir,
+                panelClass,
+                hasBackdrop,
+            });
+            this._overlayRef = this._overlay.create(config);
+        }
+        if (!this._portal ||
+            this._portal.templateRef !== this.contacts.templateRef) {
+            this._portal = new TemplatePortal(this.contacts.templateRef, this._viewContainerRef);
+        }
+        // Attach portal to overlay ref (which is a portal outlet)
+        this._overlayRef.attach(this._portal);
+        this._outsideClickDispatcher.add(this._overlayRef);
+        this._overlayRef.outsidePointerEvents().subscribe((event) => {
+            event.stopPropagation();
+            this.closeContacts();
+        });
+        this._isContactsOpen = true;
+    }
+    /** Toggles the contacts between the open and closed states. */
+    toggleContacts() {
+        if (this._isContactsOpen) {
+            this.closeContacts();
+        }
+        else {
+            this.openContacts();
+        }
+    }
+    /** Close the associated contacts */
+    closeContacts() {
+        if (!this._overlayRef || !this._isContactsOpen) {
+            return;
+        }
+        this._outsideClickDispatcher.remove(this._overlayRef);
+        this._overlayRef.detach();
+        this._restoreFocus();
+        this._isContactsOpen = false;
+    }
+    /** Handles key presses on the trigger. */
+    _handleKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.toggleContacts();
+        }
+    }
+    /** Handles click events on the trigger. */
+    _handleClick() {
+        this.toggleContacts();
+    }
+    /**
+     * Restores focus to the element that was focused before the contacts was open.
+     */
+    _restoreFocus(origin = 'program', options) {
+        if (this._focusMonitor) {
+            this._focusMonitor.focusVia(this._element, origin, options);
+        }
+        else {
+            this._element.nativeElement.focus(options);
+        }
+    }
+    /**
+     * Returns strategy for positioning the overlay for desktop devices:
+     */
+    _desktopPositionStrategy() {
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._element)
+            .withLockedPosition()
+            .withTransformOriginOn('.granite-contacts')
+            .withPush(false);
+        this._setPosition(positionStrategy);
+        return positionStrategy;
+    }
+    /**
+     * Sets the appropriate positions on a position strategy
+     * so the overlay connects with the trigger correctly.
+     * @param positionStrategy Strategy whose position to update.
+     */
+    _setPosition(positionStrategy) {
+        const [originX, originFallbackX] = this.contacts.xPosition === 'before'
+            ? ['end', 'start']
+            : ['start', 'end'];
+        const [overlayY, overlayFallbackY] = this.contacts.yPosition === 'above'
+            ? ['bottom', 'top']
+            : ['top', 'bottom'];
+        let [originY, originFallbackY] = [overlayY, overlayFallbackY];
+        const [overlayX, overlayFallbackX] = [originX, originFallbackX];
+        const offsetY = 0;
+        originY = overlayY === 'top' ? 'bottom' : 'top';
+        originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
+        positionStrategy.withPositions([
+            { originX, originY, overlayX, overlayY, offsetY },
+            {
+                originX: originFallbackX,
+                originY,
+                overlayX: overlayFallbackX,
+                overlayY,
+                offsetY,
+            },
+            {
+                originX,
+                originY: originFallbackY,
+                overlayX,
+                overlayY: overlayFallbackY,
+                offsetY: -offsetY,
+            },
+            {
+                originX: originFallbackX,
+                originY: originFallbackY,
+                overlayX: overlayFallbackX,
+                overlayY: overlayFallbackY,
+                offsetY: -offsetY,
+            },
+        ]);
+    }
+    /**
+     * Returns strategy for positioning the overlay depending on what type of
+     * device the contacts is being shown on
+     */
+    _positionStrategy() {
+        if (this._clientOutput?.device !== 'touch') {
+            return this._desktopPositionStrategy();
+        }
+        return this._touchPositionStrategy();
+    }
+    /**
+     * Returns strategy for positioning the overlay for touch devices:
+     * Place centered in the screen.
+     */
+    _touchPositionStrategy() {
+        return this._overlay.position().global();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: i3.Directionality, optional: true }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteContactsTriggerForDirective, selector: "[graniteContactsTriggerFor]", inputs: { contacts: ["graniteContactsTriggerFor", "contacts"] }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isContactsOpen || null", "attr.aria-controls": "_isContactsOpen ? contacts.panelId : null" }, classAttribute: "granite-contacts-trigger" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsTriggerForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[graniteContactsTriggerFor]`,
+                    host: {
+                        class: 'granite-contacts-trigger',
+                        'aria-haspopup': 'true',
+                        '[attr.aria-expanded]': '_isContactsOpen || null',
+                        '[attr.aria-controls]': '_isContactsOpen ? contacts.panelId : null',
+                        '(keydown)': '_handleKeydown($event)',
+                        '(click)': '_handleClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayOutsideClickDispatcher }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GRANITE_CLIENT_INPUT]
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GRANITE_CLIENT_OUTPUT]
+                }, {
+                    type: Optional
+                }] }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: i1.FocusMonitor }], propDecorators: { contacts: [{
+                type: Input,
+                args: ['graniteContactsTriggerFor']
+            }] } });
+
+class GraniteContactsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, declarations: [GraniteContactsComponent,
+            GraniteContactsProfileComponent,
+            GraniteContactItemComponent,
+            ContactItemDefaultStatusComponent,
+            GraniteContactItemTitleComponent,
+            GraniteContactsTriggerForDirective,
+            GraniteCustomStatusDirective,
+            GraniteCustomProfileDirective], imports: [GraniteIconModule, CommonModule], exports: [GraniteContactsComponent,
+            GraniteContactsTriggerForDirective,
+            GraniteContactItemComponent,
+            GraniteCustomStatusDirective,
+            GraniteCustomProfileDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, imports: [GraniteIconModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteContactsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [GraniteIconModule, CommonModule],
+                    declarations: [
+                        GraniteContactsComponent,
+                        GraniteContactsProfileComponent,
+                        GraniteContactItemComponent,
+                        ContactItemDefaultStatusComponent,
+                        GraniteContactItemTitleComponent,
+                        GraniteContactsTriggerForDirective,
+                        GraniteCustomStatusDirective,
+                        GraniteCustomProfileDirective,
+                    ],
+                    exports: [
+                        GraniteContactsComponent,
+                        GraniteContactsTriggerForDirective,
+                        GraniteContactItemComponent,
+                        GraniteCustomStatusDirective,
+                        GraniteCustomProfileDirective,
+                    ],
+                }]
+        }] });
+
 class GraniteHideOnOverflowDirective {
     constructor(_elementRef, renderer) {
         this._elementRef = _elementRef;
@@ -4501,5 +4960,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonSelectors, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
+export { ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
 //# sourceMappingURL=ifsworld-granite-components.mjs.map