@flywheel-io/vision 19.3.3 → 19.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -920,25 +920,24 @@ class FwTooltipPanelComponent {
920
920
  return unparsed;
921
921
  },
922
922
  });
923
- this.title = '';
923
+ this.title = input('');
924
924
  this.isOpen = input(false);
925
925
  this.position = input('below');
926
926
  this.connectedPosition = computed(() => [positionMap$1[this.position()]]);
927
- this.color = 'dark';
928
- this.maxWidth = 200;
929
- this.displayCaret = true;
930
- this.mouseLeave = new EventEmitter();
927
+ this.positionClass = computed(() => `fw-tooltip-${this.position()}`);
928
+ this.color = input('dark');
929
+ this.maxWidth = input(200);
930
+ this.displayCaret = input(true);
931
931
  this.delay = input('short');
932
932
  this.delayMs = computed(() => delayMap$1[this.delay()]);
933
- }
934
- get classes() {
935
- return ['fw-tooltip-panel', 'fw-tooltip-' + this.position].join(' ');
933
+ this.contentClass = input('');
934
+ this.mouseLeave = new EventEmitter();
936
935
  }
937
936
  hidePopover(e) {
938
937
  this.mouseLeave.emit(e);
939
938
  }
940
939
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
941
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTooltipPanelComponent, isStandalone: true, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "displayCaret", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "@fadeInFadeOut": "this.animation", "attr.class": "this.classes" } }, ngImport: i0, template: "<div\n class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n [ngClass]=\"'fw-tooltip-' + position()\"\n [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n <ng-content></ng-content>\n <h5 class=\"vision-h5\">{{ title }}</h5>\n @if (displayCaret) {\n <div class=\"fw-tooltip-caret\"></div>\n }\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
940
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTooltipPanelComponent, isStandalone: true, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "displayCaret", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "class.fw-tooltip-panel": "true", "class": "positionClass()", "@fadeInFadeOut": "this.animation" } }, ngImport: i0, template: "<div\n class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n [ngClass]=\"'fw-tooltip-' + position()\"\n [ngStyle]=\"{'maxWidth': maxWidth()+'px'}\">\n <ng-content></ng-content>\n <h5 [ngClass]=\"contentClass()\" class=\"vision-h5\">{{ title() }}</h5>\n @if (displayCaret()) {\n <div class=\"fw-tooltip-caret\"></div>\n }\n</div>\n", styles: [".fw-tooltip-content-wrapper{display:inline-block;position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
942
941
  trigger('fadeInFadeOut', [
943
942
  transition(':enter', [
944
943
  style({ opacity: 0 }),
@@ -948,11 +947,11 @@ class FwTooltipPanelComponent {
948
947
  animate('200ms', style({ opacity: 0 })),
949
948
  ]),
950
949
  ]),
951
- ], encapsulation: i0.ViewEncapsulation.None }); }
950
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
952
951
  }
953
952
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipPanelComponent, decorators: [{
954
953
  type: Component,
955
- args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.None, animations: [
954
+ args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.Emulated, animations: [
956
955
  trigger('fadeInFadeOut', [
957
956
  transition(':enter', [
958
957
  style({ opacity: 0 }),
@@ -962,23 +961,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
962
961
  animate('200ms', style({ opacity: 0 })),
963
962
  ]),
964
963
  ]),
965
- ], imports: [NgClass, NgStyle], template: "<div\n class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n [ngClass]=\"'fw-tooltip-' + position()\"\n [ngStyle]=\"{'maxWidth': maxWidth+'px'}\">\n <ng-content></ng-content>\n <h5 class=\"vision-h5\">{{ title }}</h5>\n @if (displayCaret) {\n <div class=\"fw-tooltip-caret\"></div>\n }\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"] }]
964
+ ], host: {
965
+ '[class.fw-tooltip-panel]': 'true',
966
+ '[class]': 'positionClass()',
967
+ }, imports: [NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n [ngClass]=\"'fw-tooltip-' + position()\"\n [ngStyle]=\"{'maxWidth': maxWidth()+'px'}\">\n <ng-content></ng-content>\n <h5 [ngClass]=\"contentClass()\" class=\"vision-h5\">{{ title() }}</h5>\n @if (displayCaret()) {\n <div class=\"fw-tooltip-caret\"></div>\n }\n</div>\n", styles: [".fw-tooltip-content-wrapper{display:inline-block;position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"] }]
966
968
  }], propDecorators: { animation: [{
967
969
  type: HostBinding,
968
970
  args: ['@fadeInFadeOut']
969
- }], title: [{
970
- type: Input
971
- }], color: [{
972
- type: Input
973
- }], maxWidth: [{
974
- type: Input
975
- }], displayCaret: [{
976
- type: Input
977
971
  }], mouseLeave: [{
978
972
  type: Output
979
- }], classes: [{
980
- type: HostBinding,
981
- args: ['attr.class']
982
973
  }], hidePopover: [{
983
974
  type: HostListener,
984
975
  args: ['mouseleave', ['$event']]
@@ -1004,7 +995,7 @@ const positionMap = {
1004
995
  /* eslint-enable @rx-angular/prefer-no-layout-sensitive-apis */
1005
996
  /**
1006
997
  * Directive for displaying extra context on hover
1007
- * @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
998
+ * @see [Vision Storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
1008
999
  */
1009
1000
  class FwTooltipDirective {
1010
1001
  constructor() {
@@ -1015,6 +1006,7 @@ class FwTooltipDirective {
1015
1006
  /***** Internal Refs *****/
1016
1007
  this.overlayRef = signal(undefined);
1017
1008
  this.tooltipRef = signal(undefined);
1009
+ this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
1018
1010
  /***** Inputs *****/
1019
1011
  // a lot of these ideally wouldn't be models,
1020
1012
  // but it makes it easier to interact with this from derivative directives
@@ -1039,6 +1031,12 @@ class FwTooltipDirective {
1039
1031
  this.maxWidth = model(200, {
1040
1032
  alias: 'fwTooltipMaxWidthPx',
1041
1033
  });
1034
+ /**
1035
+ * Custom class to apply to the content of the tooltip
1036
+ */
1037
+ this.contentClass = model('', {
1038
+ alias: 'fwTooltipClass',
1039
+ });
1042
1040
  /**
1043
1041
  * amount of delay before the tooltip displays
1044
1042
  *
@@ -1095,6 +1093,7 @@ class FwTooltipDirective {
1095
1093
  this.hideTooltip();
1096
1094
  });
1097
1095
  });
1096
+ this.openDelayTimer = 0;
1098
1097
  // updates the tooltip panel's caret position if a fallback position is used
1099
1098
  this.handlePositionChange = effect(() => {
1100
1099
  this.positionChangeSub?.unsubscribe();
@@ -1110,13 +1109,11 @@ class FwTooltipDirective {
1110
1109
  });
1111
1110
  if (newPositionName) {
1112
1111
  this.tooltipRef()?.setInput('position', newPositionName);
1113
- this.tooltipRef()?.changeDetectorRef.detectChanges();
1114
1112
  }
1115
1113
  });
1116
1114
  });
1117
1115
  }
1118
1116
  ngOnInit() {
1119
- this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
1120
1117
  this.overlayRef.set(this.overlayService.create());
1121
1118
  }
1122
1119
  showTooltip() {
@@ -1124,6 +1121,9 @@ class FwTooltipDirective {
1124
1121
  return;
1125
1122
  }
1126
1123
  const overlayRef = this.overlayRef();
1124
+ if (!overlayRef) {
1125
+ return;
1126
+ }
1127
1127
  overlayRef.updatePositionStrategy(this.positionStrategy());
1128
1128
  if (this.openDelayTimer) {
1129
1129
  return;
@@ -1135,12 +1135,12 @@ class FwTooltipDirective {
1135
1135
  tooltipRef.setInput('position', this.position());
1136
1136
  tooltipRef.setInput('maxWidth', this.maxWidth());
1137
1137
  tooltipRef.setInput('displayCaret', this.displayCaret());
1138
- tooltipRef.changeDetectorRef.detectChanges();
1138
+ tooltipRef.setInput('contentClass', this.contentClass());
1139
1139
  }, this.delayMs());
1140
1140
  }
1141
1141
  hideTooltip() {
1142
1142
  window.clearTimeout(this.openDelayTimer);
1143
- this.openDelayTimer = undefined;
1143
+ this.openDelayTimer = 0;
1144
1144
  this.overlayRef()?.detach();
1145
1145
  this.tooltipRef.set(undefined);
1146
1146
  }
@@ -1149,7 +1149,7 @@ class FwTooltipDirective {
1149
1149
  this.hideTooltip();
1150
1150
  }
1151
1151
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1152
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipDirective, isStandalone: true, selector: "[fwTooltip]", inputs: { title: { classPropertyName: "title", publicName: "fwTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fwTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "fwTooltipMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, delayMs: { classPropertyName: "delayMs", publicName: "fwTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "fwTooltipCaret", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "fwTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "fwTooltipChange", position: "fwTooltipPositionChange", maxWidth: "fwTooltipMaxWidthPxChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
1152
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipDirective, isStandalone: true, selector: "[fwTooltip]", inputs: { title: { classPropertyName: "title", publicName: "fwTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fwTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "fwTooltipMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "fwTooltipClass", isSignal: true, isRequired: false, transformFunction: null }, delayMs: { classPropertyName: "delayMs", publicName: "fwTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "fwTooltipCaret", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "fwTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "fwTooltipChange", position: "fwTooltipPositionChange", maxWidth: "fwTooltipMaxWidthPxChange", contentClass: "fwTooltipClassChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
1153
1153
  }
1154
1154
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipDirective, decorators: [{
1155
1155
  type: Directive,
@@ -1186,7 +1186,7 @@ class FwTooltipComponent {
1186
1186
  }
1187
1187
  ;
1188
1188
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1189
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipComponent, isStandalone: true, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes", "attr.title": "this.attrTitle" } }, ngImport: i0, template: "<div\n [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n [fwTooltip]=\"title\"\n [fwTooltipDelay]=\"delay()\"\n [fwTooltipPosition]=\"position\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
1189
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipComponent, isStandalone: true, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes", "attr.title": "this.attrTitle" } }, ngImport: i0, template: "<div\n [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n [fwTooltip]=\"title\"\n [fwTooltipDelay]=\"delay()\"\n [fwTooltipPosition]=\"position\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
1190
1190
  }
1191
1191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipComponent, decorators: [{
1192
1192
  type: Component,
@@ -1920,7 +1920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
1920
1920
 
1921
1921
  class FwButtonToggleItemComponent {
1922
1922
  get classes() {
1923
- return ['fw-button-toggle-item', this.title && this.title.length > 0 ? 'has-title' : 'no-title'].filter(Boolean).join(' ');
1923
+ return ['fw-button-toggle-item', this.title && this.title.length > 0 ? 'has-title' : 'no-title', this.fullWidth() ? 'full-width' : null].filter(Boolean).join(' ');
1924
1924
  }
1925
1925
  ;
1926
1926
  constructor() {
@@ -1930,6 +1930,7 @@ class FwButtonToggleItemComponent {
1930
1930
  this.color = 'slate';
1931
1931
  this.selectedColor = 'primary';
1932
1932
  this.selectedStyle = 'background';
1933
+ this.fullWidth = model(false);
1933
1934
  // eslint-disable-next-line @angular-eslint/no-output-native
1934
1935
  this.click = new EventEmitter();
1935
1936
  }
@@ -1939,11 +1940,11 @@ class FwButtonToggleItemComponent {
1939
1940
  }
1940
1941
  }
1941
1942
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1942
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonToggleItemComponent, isStandalone: true, selector: "fw-button-toggle-item", inputs: { title: "title", icon: "icon", selectedIcon: "selectedIcon", value: "value", selected: "selected", disabled: "disabled", size: "size", color: "color", selectedColor: "selectedColor", selectedStyle: "selectedStyle" }, outputs: { click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n", dependencies: [{ kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
1943
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwButtonToggleItemComponent, isStandalone: true, selector: "fw-button-toggle-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, selectedIcon: { classPropertyName: "selectedIcon", publicName: "selectedIcon", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: false, isRequired: false, transformFunction: null }, selectedStyle: { classPropertyName: "selectedStyle", publicName: "selectedStyle", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullWidth: "fullWidthChange", click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n [fullWidth]=\"fullWidth()\"\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n", styles: [":host.full-width{width:100%}\n"], dependencies: [{ kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
1943
1944
  }
1944
1945
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleItemComponent, decorators: [{
1945
1946
  type: Component,
1946
- args: [{ selector: 'fw-button-toggle-item', imports: [FwButtonComponent], template: "<fw-button\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n" }]
1947
+ args: [{ selector: 'fw-button-toggle-item', imports: [FwButtonComponent], template: "<fw-button\n [fullWidth]=\"fullWidth()\"\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n", styles: [":host.full-width{width:100%}\n"] }]
1947
1948
  }], ctorParameters: () => [], propDecorators: { title: [{
1948
1949
  type: Input
1949
1950
  }], icon: [{
@@ -1972,27 +1973,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
1972
1973
  }] } });
1973
1974
 
1974
1975
  class FwButtonGroupComponent {
1975
- get classes() {
1976
- return ['fw-button-group', this.size, this.layout].filter(Boolean).join(' ');
1977
- }
1978
- ;
1979
- get value() {
1980
- return this._value;
1981
- }
1982
- set value(newValue) {
1983
- this.updateValue(newValue);
1984
- }
1985
- constructor(cdref) {
1986
- this.cdref = cdref;
1976
+ constructor() {
1987
1977
  this.layout = 'basic';
1988
1978
  this.size = 'medium';
1989
1979
  this.disabled = false;
1980
+ this.fullWidth = false;
1990
1981
  this.subscriptions = [];
1991
1982
  // eslint-disable-next-line @angular-eslint/no-output-native
1992
1983
  this.change = new EventEmitter();
1993
1984
  this.onTouched = () => {
1994
1985
  };
1995
1986
  }
1987
+ get classes() {
1988
+ return ['fw-button-group', this.size, this.layout, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
1989
+ }
1990
+ ;
1991
+ get value() {
1992
+ return this._value;
1993
+ }
1994
+ set value(newValue) {
1995
+ this.updateValue(newValue);
1996
+ }
1996
1997
  registerOnChange(fn) {
1997
1998
  this.onChange = fn;
1998
1999
  }
@@ -2029,6 +2030,9 @@ class FwButtonGroupComponent {
2029
2030
  formatToggles() {
2030
2031
  if (this.toggleButtons) {
2031
2032
  this.toggleButtons.forEach(toggle => {
2033
+ if (this.fullWidth) {
2034
+ toggle.fullWidth.set(true);
2035
+ }
2032
2036
  if (this.value.indexOf(toggle.value) >= 0) {
2033
2037
  toggle.selected = true;
2034
2038
  }
@@ -2058,14 +2062,14 @@ class FwButtonGroupComponent {
2058
2062
  });
2059
2063
  }
2060
2064
  }
2061
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
2062
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonGroupComponent, isStandalone: true, selector: "fw-button-group", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
2065
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2066
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonGroupComponent, isStandalone: true, selector: "fw-button-group", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", fullWidth: "fullWidth", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
2063
2067
  {
2064
2068
  provide: NG_VALUE_ACCESSOR,
2065
2069
  useExisting: forwardRef(() => FwButtonGroupComponent),
2066
2070
  multi: true,
2067
2071
  },
2068
- ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
2072
+ ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group.full-width{width:100%}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
2069
2073
  }
2070
2074
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonGroupComponent, decorators: [{
2071
2075
  type: Component,
@@ -2075,11 +2079,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2075
2079
  useExisting: forwardRef(() => FwButtonGroupComponent),
2076
2080
  multi: true,
2077
2081
  },
2078
- ], styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
2079
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { classes: [{
2080
- type: HostBinding,
2081
- args: ['attr.class']
2082
- }], layout: [{
2082
+ ], styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group.full-width{width:100%}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
2083
+ }], propDecorators: { layout: [{
2083
2084
  type: Input
2084
2085
  }], size: [{
2085
2086
  type: Input
@@ -2089,6 +2090,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2089
2090
  type: Input
2090
2091
  }], selectedColor: [{
2091
2092
  type: Input
2093
+ }], fullWidth: [{
2094
+ type: Input
2095
+ }], classes: [{
2096
+ type: HostBinding,
2097
+ args: ['attr.class']
2092
2098
  }], toggleButtons: [{
2093
2099
  type: ContentChildren,
2094
2100
  args: [FwButtonToggleItemComponent, { descendants: true }]
@@ -2100,7 +2106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2100
2106
 
2101
2107
  class FwButtonToggleComponent {
2102
2108
  get classes() {
2103
- return ['fw-button-toggle', this.size, this.layout].filter(Boolean).join(' ');
2109
+ return ['fw-button-toggle', this.size, this.layout, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
2104
2110
  }
2105
2111
  ;
2106
2112
  get value() {
@@ -2114,6 +2120,7 @@ class FwButtonToggleComponent {
2114
2120
  this.layout = 'basic';
2115
2121
  this.size = 'medium';
2116
2122
  this.disabled = false;
2123
+ this.fullWidth = false;
2117
2124
  this.subscriptions = [];
2118
2125
  // eslint-disable-next-line @angular-eslint/no-output-native
2119
2126
  this.change = new EventEmitter();
@@ -2161,6 +2168,9 @@ class FwButtonToggleComponent {
2161
2168
  formatToggles() {
2162
2169
  if (this.toggleButtons) {
2163
2170
  this.toggleButtons.forEach(toggle => {
2171
+ if (this.fullWidth) {
2172
+ toggle.fullWidth.set(true);
2173
+ }
2164
2174
  if (toggle.value === this.value) {
2165
2175
  toggle.selected = true;
2166
2176
  }
@@ -2192,13 +2202,13 @@ class FwButtonToggleComponent {
2192
2202
  }
2193
2203
  }
2194
2204
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
2195
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonToggleComponent, isStandalone: true, selector: "fw-button-toggle", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
2205
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonToggleComponent, isStandalone: true, selector: "fw-button-toggle", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", fullWidth: "fullWidth", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
2196
2206
  {
2197
2207
  provide: NG_VALUE_ACCESSOR,
2198
2208
  useExisting: forwardRef(() => FwButtonToggleComponent),
2199
2209
  multi: true,
2200
2210
  },
2201
- ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
2211
+ ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle.full-width{width:100%}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
2202
2212
  }
2203
2213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleComponent, decorators: [{
2204
2214
  type: Component,
@@ -2208,11 +2218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2208
2218
  useExisting: forwardRef(() => FwButtonToggleComponent),
2209
2219
  multi: true,
2210
2220
  },
2211
- ], styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
2212
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { classes: [{
2213
- type: HostBinding,
2214
- args: ['attr.class']
2215
- }], layout: [{
2221
+ ], styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle.full-width{width:100%}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
2222
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { layout: [{
2216
2223
  type: Input
2217
2224
  }], size: [{
2218
2225
  type: Input
@@ -2222,6 +2229,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
2222
2229
  type: Input
2223
2230
  }], selectedColor: [{
2224
2231
  type: Input
2232
+ }], fullWidth: [{
2233
+ type: Input
2234
+ }], classes: [{
2235
+ type: HostBinding,
2236
+ args: ['attr.class']
2225
2237
  }], toggleButtons: [{
2226
2238
  type: ContentChildren,
2227
2239
  args: [FwButtonToggleItemComponent, { descendants: true }]
@@ -4841,7 +4853,7 @@ class FwTextInputComponent {
4841
4853
  provide: NG_VALUE_ACCESSOR,
4842
4854
  useExisting: FwTextInputComponent,
4843
4855
  multi: true,
4844
- }], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon\n *ngIf=\"!!leftIcon\"\n (click)=\"useActionableIcons?onLeftIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n </fw-icon>\n <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n <input\n #input\n *ngIf=\"!textInput\"\n [type]=\"type\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [attr.maxlength]=\"maxLength\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [autocomplete]=\"autocomplete\"\n >\n <ng-content select=\"input\"></ng-content>\n <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip ? errorText : ''\">warning-circle</fw-icon>\n <fw-icon\n *ngIf=\"!!rightIcon\"\n (click)=\"useActionableIcons?onRightIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n </fw-icon>\n <ng-content></ng-content>\n </div>\n <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"vision-p4 error-text\" *ngIf=\"!!errorText && !errorInIconTooltip\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
4856
+ }], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon\n *ngIf=\"!!leftIcon\"\n (click)=\"useActionableIcons?onLeftIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n </fw-icon>\n <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n <input\n #input\n *ngIf=\"!textInput\"\n [type]=\"type\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [attr.maxlength]=\"maxLength\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [autocomplete]=\"autocomplete\"\n >\n <ng-content select=\"input\"></ng-content>\n <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip ? errorText : ''\">warning-circle</fw-icon>\n <fw-icon\n *ngIf=\"!!rightIcon\"\n (click)=\"useActionableIcons?onRightIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n </fw-icon>\n <ng-content></ng-content>\n </div>\n <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"vision-p4 error-text\" *ngIf=\"!!errorText && !errorInIconTooltip\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
4845
4857
  }
4846
4858
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTextInputComponent, decorators: [{
4847
4859
  type: Component,