@ifsworld/granite-components 11.4.0 → 11.6.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 } 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 * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -4250,11 +4250,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class GraniteCardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardComponent, selector: "granite-card", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;border-radius:var(--granite-radius-m);background:var(--granite-color-background);padding:var(--granite-spacing-8)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardComponent, selector: "granite-card", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;border-radius:var(--granite-radius-m);border:var(--granite-border-width-regular) solid var(--granite-color-border-soft);background:var(--granite-color-background);padding:var(--granite-spacing-8)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;border-radius:var(--granite-radius-m);background:var(--granite-color-background);padding:var(--granite-spacing-8)}\n"] }]
+            args: [{ selector: 'granite-card', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;border-radius:var(--granite-radius-m);border:var(--granite-border-width-regular) solid var(--granite-color-border-soft);background:var(--granite-color-background);padding:var(--granite-spacing-8)}\n"] }]
         }] });
 
 class GraniteCardListComponent {
@@ -4265,11 +4265,11 @@ class GraniteCardListComponent {
         this.gap = 'small';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardListComponent, selector: "granite-card-list", inputs: { orientation: "orientation", wrap: "wrap", gap: "gap" }, ngImport: i0, template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:5px;height:5px}.card-list-wrapper::-webkit-scrollbar-track{box-shadow:inset 0 0 6px var(--granite-color-background-selected);border-radius:10px}.card-list-wrapper::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--granite-color-background-selected-hover);box-shadow:inset 0 0 6px var(--granite-color-background-selected)}.card-list-wrapper::-webkit-scrollbar-thumb:window-inactive{background-color:var(--granite-color-background-selected)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardListComponent, selector: "granite-card-list", inputs: { orientation: "orientation", wrap: "wrap", gap: "gap" }, ngImport: i0, template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:10px;height:10px}.card-list-wrapper::-webkit-scrollbar-track{box-shadow:inset 0 0 6px var(--granite-color-background-selected);border-radius:10px}.card-list-wrapper::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--granite-color-background-selected-hover);box-shadow:inset 0 0 6px var(--granite-color-background-selected)}.card-list-wrapper::-webkit-scrollbar-thumb:window-inactive{background-color:var(--granite-color-background-selected)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card-list', template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:5px;height:5px}.card-list-wrapper::-webkit-scrollbar-track{box-shadow:inset 0 0 6px var(--granite-color-background-selected);border-radius:10px}.card-list-wrapper::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--granite-color-background-selected-hover);box-shadow:inset 0 0 6px var(--granite-color-background-selected)}.card-list-wrapper::-webkit-scrollbar-thumb:window-inactive{background-color:var(--granite-color-background-selected)}\n"] }]
+            args: [{ selector: 'granite-card-list', template: "<div\n  class=\"card-list-wrapper\"\n  [class.vertical]=\"orientation === 'vertical'\"\n  [class.horizontal]=\"orientation === 'horizontal'\"\n  [class.wrap]=\"wrap === 'wrap'\"\n  [class.nowrap]=\"wrap === 'nowrap'\"\n  [class.small]=\"gap === 'small'\"\n  [class.medium]=\"gap === 'medium'\"\n  [class.large]=\"gap === 'large'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:10px;height:10px}.card-list-wrapper::-webkit-scrollbar-track{box-shadow:inset 0 0 6px var(--granite-color-background-selected);border-radius:10px}.card-list-wrapper::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--granite-color-background-selected-hover);box-shadow:inset 0 0 6px var(--granite-color-background-selected)}.card-list-wrapper::-webkit-scrollbar-thumb:window-inactive{background-color:var(--granite-color-background-selected)}\n"] }]
         }], propDecorators: { orientation: [{
                 type: Input
             }], wrap: [{
@@ -4289,38 +4289,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class GraniteCardHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardHeaderComponent, selector: "granite-card-header", ngImport: i0, template: "<div class=\"title-container\">\n  <ng-content select=\"granite-card-header-title\"></ng-content>\n  <ng-content select=\"granite-card-header-sub-title\"></ng-content>\n</div>\n<div class=\"content-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{font-family:var(--granite-font-family-default);flex-direction:row;justify-content:space-between;flex:0 auto;display:flex}.title-container{display:flex;flex-direction:column;gap:var(--granite-spacing-4)}.content-container{display:flex;flex-direction:row;gap:var(--granite-spacing-8);align-self:center}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardHeaderComponent, selector: "granite-card-header", ngImport: i0, template: "<div class=\"title-container\">\n  <ng-content select=\"granite-card-header-title\"></ng-content>\n  <ng-content select=\"granite-card-header-sub-title\"></ng-content>\n</div>\n<div class=\"content-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;font-family:var(--granite-font-family-default);flex-direction:row;justify-content:space-between;flex:0 auto}.title-container{display:flex;flex-direction:column;gap:var(--granite-spacing-4)}.content-container{display:flex;flex-direction:row;gap:var(--granite-spacing-8);align-self:center}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card-header', template: "<div class=\"title-container\">\n  <ng-content select=\"granite-card-header-title\"></ng-content>\n  <ng-content select=\"granite-card-header-sub-title\"></ng-content>\n</div>\n<div class=\"content-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{font-family:var(--granite-font-family-default);flex-direction:row;justify-content:space-between;flex:0 auto;display:flex}.title-container{display:flex;flex-direction:column;gap:var(--granite-spacing-4)}.content-container{display:flex;flex-direction:row;gap:var(--granite-spacing-8);align-self:center}\n"] }]
+            args: [{ selector: 'granite-card-header', template: "<div class=\"title-container\">\n  <ng-content select=\"granite-card-header-title\"></ng-content>\n  <ng-content select=\"granite-card-header-sub-title\"></ng-content>\n</div>\n<div class=\"content-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;font-family:var(--granite-font-family-default);flex-direction:row;justify-content:space-between;flex:0 auto}.title-container{display:flex;flex-direction:column;gap:var(--granite-spacing-4)}.content-container{display:flex;flex-direction:row;gap:var(--granite-spacing-8);align-self:center}\n"] }]
         }] });
 
 class GraniteCardActionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardActionsComponent, selector: "granite-card-actions", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:var(--granite-font-family-default);font-weight:var(--granite-font-weight-regular);font-size:var(--granite-font-size-body-small);flex-direction:row;gap:var(--granite-spacing-4);display:flex}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardActionsComponent, selector: "granite-card-actions", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-weight:var(--granite-font-weight-regular);font-size:var(--granite-font-size-body-small);flex-direction:row;gap:var(--granite-spacing-4)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card-actions', template: '<ng-content></ng-content>', styles: [":host{font-family:var(--granite-font-family-default);font-weight:var(--granite-font-weight-regular);font-size:var(--granite-font-size-body-small);flex-direction:row;gap:var(--granite-spacing-4);display:flex}\n"] }]
+            args: [{ selector: 'granite-card-actions', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-weight:var(--granite-font-weight-regular);font-size:var(--granite-font-size-body-small);flex-direction:row;gap:var(--granite-spacing-4)}\n"] }]
         }] });
 
 class GraniteCardBodyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardBodyComponent, selector: "granite-card-body", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;color:var(--granite-colors-background-inverse);display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:space-between}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardBodyComponent, selector: "granite-card-body", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;color:var(--granite-colors-background-inverse);flex-direction:column;gap:var(--granite-spacing-4);justify-content:space-between}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card-body', template: '<ng-content></ng-content>', styles: [":host{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;color:var(--granite-colors-background-inverse);display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:space-between}\n"] }]
+            args: [{ selector: 'granite-card-body', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;color:var(--granite-colors-background-inverse);flex-direction:column;gap:var(--granite-spacing-4);justify-content:space-between}\n"] }]
         }] });
 
 class GraniteCardFooterComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardFooterComponent, selector: "granite-card-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;display:flex;flex-direction:row;color:var(--granite-colors-background-inverse);gap:var(--granite-spacing-4)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardFooterComponent, selector: "granite-card-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;flex-direction:row;color:var(--granite-colors-background-inverse);gap:var(--granite-spacing-4)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card-footer', template: '<ng-content></ng-content>', styles: [":host{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;display:flex;flex-direction:row;color:var(--granite-colors-background-inverse);gap:var(--granite-spacing-4)}\n"] }]
+            args: [{ selector: 'granite-card-footer', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;flex-direction:row;color:var(--granite-colors-background-inverse);gap:var(--granite-spacing-4)}\n"] }]
         }] });
 
 class GraniteCardAvatarComponent {
@@ -4343,11 +4343,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class GraniteCardHeaderSubTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardHeaderSubTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardHeaderSubTitleComponent, selector: "granite-card-header-sub-title", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:var(--granite-font-family-default);color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);display:flex;flex-direction:column}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCardHeaderSubTitleComponent, selector: "granite-card-header-sub-title", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;font-family:var(--granite-font-family-default);color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);flex-direction:column}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCardHeaderSubTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'granite-card-header-sub-title', template: '<ng-content></ng-content>', styles: [":host{font-family:var(--granite-font-family-default);color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'granite-card-header-sub-title', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);flex-direction:column}\n"] }]
         }] });
 
 class GraniteCardListModule {
@@ -4404,6 +4404,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class GraniteCollapsibleConditionalBodyDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleConditionalBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCollapsibleConditionalBodyDirective, selector: "[graniteCollapsibleGroupBody]", exportAs: ["graniteCollapsibleGroupBody"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleConditionalBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteCollapsibleGroupBody]',
+                    exportAs: 'graniteCollapsibleGroupBody',
+                }]
+        }] });
+
+class GraniteCollapsibleConditionalHeaderDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleConditionalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCollapsibleConditionalHeaderDirective, selector: "[graniteCollapsibleGroupHeader]", exportAs: ["graniteCollapsibleGroupHeader"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleConditionalHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteCollapsibleGroupHeader]',
+                    exportAs: 'graniteCollapsibleGroupHeader',
+                }]
+        }] });
+
+class GraniteCollapsibleGroupComponent {
+    constructor() {
+        this.collapsed = true;
+        this.id = '';
+        this.arialabel = null;
+        this.collapsedChanged = new EventEmitter();
+    }
+    toggleCollapsibleGroup() {
+        this.collapsed = !this.collapsed;
+        this.collapsedChanged.emit(this.collapsed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteCollapsibleGroupComponent, selector: "granite-collapsible-group", inputs: { collapsed: "collapsed", id: "id", arialabel: "arialabel" }, outputs: { collapsedChanged: "collapsedChanged" }, queries: [{ propertyName: "conditionalBodyContentRef", first: true, predicate: GraniteCollapsibleConditionalBodyDirective, descendants: true }, { propertyName: "conditionalHeaderContentRef", first: true, predicate: GraniteCollapsibleConditionalHeaderDirective, descendants: true }], ngImport: i0, template: "<div class=\"collapsible-wrapper\">\n  <div\n    class=\"collapsible-group-header\"\n    role=\"button\"\n    (click)=\"toggleCollapsibleGroup()\"\n    [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n    [attr.aria-label]=\"arialabel\"\n    [attr.aria-expanded]=\"!collapsed\"\n    [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"\n        conditionalHeaderContentRef\n          ? conditionalHeaderContentRef.template\n          : null\n      \"\n    ></ng-container>\n\n    <div class=\"collapse-icon\">\n      <granite-icon *ngIf=\"collapsed; else caretUp\">caret-down</granite-icon>\n      <ng-template #caretUp>\n        <granite-icon>caret-up</granite-icon>\n      </ng-template>\n    </div>\n  </div>\n  <div\n    class=\"collapsible-group-body\"\n    [class]=\"collapsed ? 'collapse' : 'expand'\"\n    role=\"region\"\n    [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n    [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"\n        !collapsed && conditionalBodyContentRef\n          ? conditionalBodyContentRef.template\n          : null\n      \"\n    >\n    </ng-container>\n  </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background-variant);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-semibold);padding:0 var(--granite-spacing-8);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background-variant);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{opacity:.7}.collapsible-wrapper .collapsible-group-header .collapse-icon{align-self:center;font-size:var(--granite-font-size-display-small)}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-2) var(--granite-spacing-16) var(--granite-spacing-2) var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"], dependencies: [{ 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: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-collapsible-group', template: "<div class=\"collapsible-wrapper\">\n  <div\n    class=\"collapsible-group-header\"\n    role=\"button\"\n    (click)=\"toggleCollapsibleGroup()\"\n    [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n    [attr.aria-label]=\"arialabel\"\n    [attr.aria-expanded]=\"!collapsed\"\n    [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"\n        conditionalHeaderContentRef\n          ? conditionalHeaderContentRef.template\n          : null\n      \"\n    ></ng-container>\n\n    <div class=\"collapse-icon\">\n      <granite-icon *ngIf=\"collapsed; else caretUp\">caret-down</granite-icon>\n      <ng-template #caretUp>\n        <granite-icon>caret-up</granite-icon>\n      </ng-template>\n    </div>\n  </div>\n  <div\n    class=\"collapsible-group-body\"\n    [class]=\"collapsed ? 'collapse' : 'expand'\"\n    role=\"region\"\n    [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n    [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"\n        !collapsed && conditionalBodyContentRef\n          ? conditionalBodyContentRef.template\n          : null\n      \"\n    >\n    </ng-container>\n  </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background-variant);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-semibold);padding:0 var(--granite-spacing-8);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background-variant);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{opacity:.7}.collapsible-wrapper .collapsible-group-header .collapse-icon{align-self:center;font-size:var(--granite-font-size-display-small)}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-2) var(--granite-spacing-16) var(--granite-spacing-2) var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"] }]
+        }], propDecorators: { collapsed: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], arialabel: [{
+                type: Input
+            }], collapsedChanged: [{
+                type: Output
+            }], conditionalBodyContentRef: [{
+                type: ContentChild,
+                args: [GraniteCollapsibleConditionalBodyDirective]
+            }], conditionalHeaderContentRef: [{
+                type: ContentChild,
+                args: [GraniteCollapsibleConditionalHeaderDirective]
+            }] } });
+
+class GraniteCollapsibleGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleGroupModule, declarations: [GraniteCollapsibleGroupComponent,
+            GraniteCollapsibleConditionalHeaderDirective,
+            GraniteCollapsibleConditionalBodyDirective], imports: [CommonModule, GraniteIconModule], exports: [GraniteCollapsibleGroupComponent,
+            GraniteCollapsibleConditionalHeaderDirective,
+            GraniteCollapsibleConditionalBodyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleGroupModule, imports: [CommonModule, GraniteIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteCollapsibleGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, GraniteIconModule],
+                    declarations: [
+                        GraniteCollapsibleGroupComponent,
+                        GraniteCollapsibleConditionalHeaderDirective,
+                        GraniteCollapsibleConditionalBodyDirective,
+                    ],
+                    exports: [
+                        GraniteCollapsibleGroupComponent,
+                        GraniteCollapsibleConditionalHeaderDirective,
+                        GraniteCollapsibleConditionalBodyDirective,
+                    ],
+                }]
+        }] });
+
 /*
  * Public API Surface of ui
  */
@@ -4412,5 +4501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * 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, 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, 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 };
 //# sourceMappingURL=ifsworld-granite-components.mjs.map