@ifsworld/granite-components 16.1.0-beta.1 → 16.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ifsworld-granite-components-tooltip.mjs +35 -4
- package/fesm2022/ifsworld-granite-components-tooltip.mjs.map +1 -1
- package/fesm2022/ifsworld-granite-components.mjs +70 -19
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/lib/input-field/input-field.component.d.ts +8 -3
- package/lib/menu/menu-base.d.ts +9 -1
- package/lib/menu/menu-errors.d.ts +2 -2
- package/lib/menu/menu-positions.d.ts +2 -2
- package/package.json +1 -1
- package/tooltip/lib/tooltip-constants.library.d.ts +1 -0
- package/tooltip/lib/tooltip-trigger-for.directive.d.ts +2 -0
|
@@ -21,6 +21,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
21
21
|
}] } });
|
|
22
22
|
|
|
23
23
|
class GraniteTooltipConstants {
|
|
24
|
+
static { this.OFFSET_X = 8; }
|
|
24
25
|
static { this.OFFSET_Y = 8; }
|
|
25
26
|
}
|
|
26
27
|
|
|
@@ -115,10 +116,7 @@ class GraniteTooltipTriggerForDirective {
|
|
|
115
116
|
const positionStrategy = this._overlay
|
|
116
117
|
.position()
|
|
117
118
|
.flexibleConnectedTo(this._getTriggerElement())
|
|
118
|
-
.withPositions(
|
|
119
|
-
new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, undefined, GraniteTooltipConstants.OFFSET_Y, 'granite-tooltip-position-below'),
|
|
120
|
-
new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, undefined, -GraniteTooltipConstants.OFFSET_Y, 'granite-tooltip-position-above'),
|
|
121
|
-
])
|
|
119
|
+
.withPositions(this._getTooltipPositions())
|
|
122
120
|
.withPush(true);
|
|
123
121
|
this._overlayRef = this._overlay.create({
|
|
124
122
|
positionStrategy,
|
|
@@ -158,6 +156,39 @@ class GraniteTooltipTriggerForDirective {
|
|
|
158
156
|
_getTriggerElement() {
|
|
159
157
|
return this._elementRef.nativeElement;
|
|
160
158
|
}
|
|
159
|
+
_createPositionPair(originX, originY, overlayX, overlayY, offsetX, offsetY, positionName) {
|
|
160
|
+
return new ConnectionPositionPair({ originX, originY }, { overlayX, overlayY }, offsetX, offsetY, `granite-tooltip-position-${positionName}`);
|
|
161
|
+
}
|
|
162
|
+
_getTooltipPositions() {
|
|
163
|
+
const offsetX = GraniteTooltipConstants.OFFSET_X;
|
|
164
|
+
const offsetY = GraniteTooltipConstants.OFFSET_Y;
|
|
165
|
+
return [
|
|
166
|
+
// below
|
|
167
|
+
this._createPositionPair('center', 'bottom', 'center', 'top', undefined, offsetY, 'below'),
|
|
168
|
+
// above
|
|
169
|
+
this._createPositionPair('center', 'top', 'center', 'bottom', undefined, -offsetY, 'above'),
|
|
170
|
+
// right
|
|
171
|
+
this._createPositionPair('end', 'center', 'start', 'center', offsetX, undefined, 'right'),
|
|
172
|
+
// left
|
|
173
|
+
this._createPositionPair('start', 'center', 'end', 'center', -offsetX, undefined, 'left'),
|
|
174
|
+
// below-start
|
|
175
|
+
this._createPositionPair('start', 'bottom', 'start', 'top', undefined, offsetY, 'below-start'),
|
|
176
|
+
// below-end
|
|
177
|
+
this._createPositionPair('end', 'bottom', 'end', 'top', undefined, offsetY, 'below-end'),
|
|
178
|
+
// above-start
|
|
179
|
+
this._createPositionPair('start', 'top', 'start', 'bottom', undefined, -offsetY, 'above-start'),
|
|
180
|
+
// above-end
|
|
181
|
+
this._createPositionPair('end', 'top', 'end', 'bottom', undefined, -offsetY, 'above-end'),
|
|
182
|
+
// right-start
|
|
183
|
+
this._createPositionPair('end', 'top', 'start', 'top', offsetX, undefined, 'right-start'),
|
|
184
|
+
// right-end
|
|
185
|
+
this._createPositionPair('end', 'bottom', 'start', 'bottom', offsetX, undefined, 'right-end'),
|
|
186
|
+
// left-start
|
|
187
|
+
this._createPositionPair('start', 'top', 'end', 'top', -offsetX, undefined, 'left-start'),
|
|
188
|
+
// left-end
|
|
189
|
+
this._createPositionPair('start', 'bottom', 'end', 'bottom', -offsetX, undefined, 'left-end'),
|
|
190
|
+
];
|
|
191
|
+
}
|
|
161
192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GraniteTooltipTriggerForDirective, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.FocusMonitor }, { token: GraniteTooltipService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
162
193
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: GraniteTooltipTriggerForDirective, isStandalone: false, selector: "[graniteTooltipTriggerFor]", inputs: { tooltip: ["graniteTooltipTriggerFor", "tooltip"], hideDelay: "hideDelay", showDelay: "showDelay", showOnKeyboardFocus: "showOnKeyboardFocus", showOnClick: "showOnClick" }, host: { listeners: { "mouseenter": "_handleMouseenter($event)", "mouseleave": "_handleMouseleave($event)", "blur": "_handleBlur($event)" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
163
194
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifsworld-granite-components-tooltip.mjs","sources":["../../../../libs/granite-components/tooltip/src/lib/tooltip.component.ts","../../../../libs/granite-components/tooltip/src/lib/tooltip.component.html","../../../../libs/granite-components/tooltip/src/lib/tooltip-constants.library.ts","../../../../libs/granite-components/tooltip/src/lib/Services/granite-tooltip.service.ts","../../../../libs/granite-components/tooltip/src/lib/tooltip-trigger-for.directive.ts","../../../../libs/granite-components/tooltip/src/lib/tooltip.module.ts","../../../../libs/granite-components/tooltip/src/ifsworld-granite-components-tooltip.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\n\n@Component({\n selector: 'granite-tooltip',\n templateUrl: './tooltip.component.html',\n styleUrls: ['./tooltip.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class GraniteTooltipComponent {\n @ViewChild(TemplateRef) _templateRef: TemplateRef<any>;\n}\n","<ng-template>\n <div class=\"granite-tooltip\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n","export class GraniteTooltipConstants {\n static readonly OFFSET_Y: number = 8;\n}\n","import { Injectable } from '@angular/core';\nimport { GraniteTooltipComponent } from '../tooltip.component';\nimport { GraniteTooltipTriggerForDirective } from '../tooltip-trigger-for.directive';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class GraniteTooltipService {\n private _activeTooltip: GraniteTooltipComponent | null = null;\n\n setActiveTooltip(tooltip: GraniteTooltipComponent): void {\n if (this._activeTooltip && this._activeTooltip !== tooltip) {\n this.clearActiveTooltip();\n }\n this._activeTooltip = tooltip;\n }\n\n clearActiveTooltip(): void {\n this._activeTooltip = null;\n }\n\n get activeTooltip(): GraniteTooltipComponent | null {\n return this._activeTooltip;\n }\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n ConnectionPositionPair,\n Overlay,\n OverlayRef,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n Directive,\n ElementRef,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChanges,\n ViewContainerRef,\n} from '@angular/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { GraniteTooltipConstants } from './tooltip-constants.library';\nimport { GraniteTooltipComponent } from './tooltip.component';\nimport { GraniteTooltipService } from './Services/granite-tooltip.service';\n\n@Directive({\n selector: '[graniteTooltipTriggerFor]',\n host: {\n '(mouseenter)': '_handleMouseenter($event)',\n '(mouseleave)': '_handleMouseleave($event)',\n '(blur)': '_handleBlur($event)',\n },\n standalone: false,\n})\nexport class GraniteTooltipTriggerForDirective\n implements OnDestroy, OnInit, OnChanges\n{\n @Input('graniteTooltipTriggerFor')\n tooltip: GraniteTooltipComponent;\n\n @Input()\n hideDelay: number = 0;\n\n @Input()\n showDelay: number = 500;\n\n @Input()\n showOnKeyboardFocus: boolean = false;\n\n @Input()\n showOnClick: boolean = false;\n\n private _overlayRef: OverlayRef;\n private _destroy: Subject<void> = new Subject();\n\n private _detachOverlayTimeoutId: number | null;\n private _attachOverlayTimeoutId: number | null;\n\n constructor(\n private _elementRef: ElementRef,\n private _overlay: Overlay,\n private _viewContainerRef: ViewContainerRef,\n private _focusMonitor: FocusMonitor,\n private _tooltipService: GraniteTooltipService\n ) {}\n\n ngOnInit(): void {\n this._createOverlay();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.showOnKeyboardFocus) {\n this._handleKeyboardFocus();\n }\n if (changes.showOnClick) {\n this._handleClick();\n }\n }\n\n ngOnDestroy(): void {\n this._detachOverlay(this.hideDelay);\n this._destroy.next();\n this._destroy.complete();\n }\n\n _handleMouseenter(): void {\n if (!this.showOnClick) {\n this._attachOverlay(this.showDelay);\n }\n }\n\n _handleMouseleave(): void {\n this._detachOverlay(this.hideDelay);\n }\n\n _handleBlur(): void {\n this._detachOverlay(this.hideDelay);\n }\n\n private _handleClick(): void {\n fromEvent(this._getTriggerElement(), 'click')\n .pipe(takeUntil(this._destroy))\n .subscribe(() => {\n this._attachOverlay(this.showDelay);\n });\n }\n\n private _handleKeyboardFocus(): void {\n this._focusMonitor\n .monitor(this._getTriggerElement())\n .pipe(takeUntil(this._destroy))\n .subscribe((origin) => {\n if (!origin) {\n this._detachOverlay(this.hideDelay);\n } else if (origin === 'keyboard') {\n this._attachOverlay(this.hideDelay);\n }\n });\n }\n\n private _createOverlay(): void {\n const scrollStrategy = this._overlay.scrollStrategies.reposition();\n const positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._getTriggerElement())\n .withPositions([\n new ConnectionPositionPair(\n { originX: 'center', originY: 'bottom' },\n { overlayX: 'center', overlayY: 'top' },\n undefined,\n GraniteTooltipConstants.OFFSET_Y,\n 'granite-tooltip-position-below'\n ),\n new ConnectionPositionPair(\n { originX: 'center', originY: 'top' },\n { overlayX: 'center', overlayY: 'bottom' },\n undefined,\n -GraniteTooltipConstants.OFFSET_Y,\n 'granite-tooltip-position-above'\n ),\n ])\n .withPush(true);\n\n this._overlayRef = this._overlay.create({\n positionStrategy,\n scrollStrategy,\n });\n\n this._overlayRef\n .backdropClick()\n .pipe(takeUntil(this._destroy))\n .subscribe(() => {\n this._detachOverlay(this.hideDelay);\n });\n }\n\n private _attachOverlay(delay: number): void {\n clearTimeout(this._detachOverlayTimeoutId);\n\n if (\n this._tooltipService.activeTooltip === this.tooltip &&\n this._overlayRef.hasAttached()\n ) {\n return;\n }\n this._tooltipService.setActiveTooltip(this.tooltip);\n\n this._attachOverlayTimeoutId = window.setTimeout(() => {\n if (!this._overlayRef.hasAttached()) {\n const portal = new TemplatePortal(\n this.tooltip._templateRef,\n this._viewContainerRef\n );\n this._overlayRef.attach(portal);\n }\n }, delay);\n }\n\n private _detachOverlay(delay: number): void {\n clearTimeout(this._attachOverlayTimeoutId);\n\n this._detachOverlayTimeoutId = window.setTimeout(() => {\n if (this._overlayRef.hasAttached()) {\n this._overlayRef.detach();\n this._detachOverlayTimeoutId = null;\n this._tooltipService.clearActiveTooltip();\n }\n }, delay);\n }\n\n private _getTriggerElement(): HTMLInputElement {\n return this._elementRef.nativeElement;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GraniteTooltipComponent } from './tooltip.component';\nimport { GraniteTooltipTriggerForDirective } from './tooltip-trigger-for.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [GraniteTooltipComponent, GraniteTooltipTriggerForDirective],\n exports: [GraniteTooltipComponent, GraniteTooltipTriggerForDirective],\n})\nexport class GraniteTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i3.GraniteTooltipService"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifsworld-granite-components-tooltip.mjs","sources":["../../../../libs/granite-components/tooltip/src/lib/tooltip.component.ts","../../../../libs/granite-components/tooltip/src/lib/tooltip.component.html","../../../../libs/granite-components/tooltip/src/lib/tooltip-constants.library.ts","../../../../libs/granite-components/tooltip/src/lib/Services/granite-tooltip.service.ts","../../../../libs/granite-components/tooltip/src/lib/tooltip-trigger-for.directive.ts","../../../../libs/granite-components/tooltip/src/lib/tooltip.module.ts","../../../../libs/granite-components/tooltip/src/ifsworld-granite-components-tooltip.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\n\n@Component({\n selector: 'granite-tooltip',\n templateUrl: './tooltip.component.html',\n styleUrls: ['./tooltip.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class GraniteTooltipComponent {\n @ViewChild(TemplateRef) _templateRef: TemplateRef<any>;\n}\n","<ng-template>\n <div class=\"granite-tooltip\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n","export class GraniteTooltipConstants {\n static readonly OFFSET_X: number = 8;\n static readonly OFFSET_Y: number = 8;\n}\n","import { Injectable } from '@angular/core';\nimport { GraniteTooltipComponent } from '../tooltip.component';\nimport { GraniteTooltipTriggerForDirective } from '../tooltip-trigger-for.directive';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class GraniteTooltipService {\n private _activeTooltip: GraniteTooltipComponent | null = null;\n\n setActiveTooltip(tooltip: GraniteTooltipComponent): void {\n if (this._activeTooltip && this._activeTooltip !== tooltip) {\n this.clearActiveTooltip();\n }\n this._activeTooltip = tooltip;\n }\n\n clearActiveTooltip(): void {\n this._activeTooltip = null;\n }\n\n get activeTooltip(): GraniteTooltipComponent | null {\n return this._activeTooltip;\n }\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n ConnectionPositionPair,\n HorizontalConnectionPos,\n Overlay,\n OverlayRef,\n VerticalConnectionPos,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n Directive,\n ElementRef,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChanges,\n ViewContainerRef,\n} from '@angular/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { GraniteTooltipConstants } from './tooltip-constants.library';\nimport { GraniteTooltipComponent } from './tooltip.component';\nimport { GraniteTooltipService } from './Services/granite-tooltip.service';\n\n@Directive({\n selector: '[graniteTooltipTriggerFor]',\n host: {\n '(mouseenter)': '_handleMouseenter($event)',\n '(mouseleave)': '_handleMouseleave($event)',\n '(blur)': '_handleBlur($event)',\n },\n standalone: false,\n})\nexport class GraniteTooltipTriggerForDirective\n implements OnDestroy, OnInit, OnChanges\n{\n @Input('graniteTooltipTriggerFor')\n tooltip: GraniteTooltipComponent;\n\n @Input()\n hideDelay: number = 0;\n\n @Input()\n showDelay: number = 500;\n\n @Input()\n showOnKeyboardFocus: boolean = false;\n\n @Input()\n showOnClick: boolean = false;\n\n private _overlayRef: OverlayRef;\n private _destroy: Subject<void> = new Subject();\n\n private _detachOverlayTimeoutId: number | null;\n private _attachOverlayTimeoutId: number | null;\n\n constructor(\n private _elementRef: ElementRef,\n private _overlay: Overlay,\n private _viewContainerRef: ViewContainerRef,\n private _focusMonitor: FocusMonitor,\n private _tooltipService: GraniteTooltipService\n ) {}\n\n ngOnInit(): void {\n this._createOverlay();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.showOnKeyboardFocus) {\n this._handleKeyboardFocus();\n }\n if (changes.showOnClick) {\n this._handleClick();\n }\n }\n\n ngOnDestroy(): void {\n this._detachOverlay(this.hideDelay);\n this._destroy.next();\n this._destroy.complete();\n }\n\n _handleMouseenter(): void {\n if (!this.showOnClick) {\n this._attachOverlay(this.showDelay);\n }\n }\n\n _handleMouseleave(): void {\n this._detachOverlay(this.hideDelay);\n }\n\n _handleBlur(): void {\n this._detachOverlay(this.hideDelay);\n }\n\n private _handleClick(): void {\n fromEvent(this._getTriggerElement(), 'click')\n .pipe(takeUntil(this._destroy))\n .subscribe(() => {\n this._attachOverlay(this.showDelay);\n });\n }\n\n private _handleKeyboardFocus(): void {\n this._focusMonitor\n .monitor(this._getTriggerElement())\n .pipe(takeUntil(this._destroy))\n .subscribe((origin) => {\n if (!origin) {\n this._detachOverlay(this.hideDelay);\n } else if (origin === 'keyboard') {\n this._attachOverlay(this.hideDelay);\n }\n });\n }\n\n private _createOverlay(): void {\n const scrollStrategy = this._overlay.scrollStrategies.reposition();\n const positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._getTriggerElement())\n .withPositions(this._getTooltipPositions())\n .withPush(true);\n\n this._overlayRef = this._overlay.create({\n positionStrategy,\n scrollStrategy,\n });\n\n this._overlayRef\n .backdropClick()\n .pipe(takeUntil(this._destroy))\n .subscribe(() => {\n this._detachOverlay(this.hideDelay);\n });\n }\n\n private _attachOverlay(delay: number): void {\n clearTimeout(this._detachOverlayTimeoutId);\n\n if (\n this._tooltipService.activeTooltip === this.tooltip &&\n this._overlayRef.hasAttached()\n ) {\n return;\n }\n this._tooltipService.setActiveTooltip(this.tooltip);\n\n this._attachOverlayTimeoutId = window.setTimeout(() => {\n if (!this._overlayRef.hasAttached()) {\n const portal = new TemplatePortal(\n this.tooltip._templateRef,\n this._viewContainerRef\n );\n this._overlayRef.attach(portal);\n }\n }, delay);\n }\n\n private _detachOverlay(delay: number): void {\n clearTimeout(this._attachOverlayTimeoutId);\n\n this._detachOverlayTimeoutId = window.setTimeout(() => {\n if (this._overlayRef.hasAttached()) {\n this._overlayRef.detach();\n this._detachOverlayTimeoutId = null;\n this._tooltipService.clearActiveTooltip();\n }\n }, delay);\n }\n\n private _getTriggerElement(): HTMLInputElement {\n return this._elementRef.nativeElement;\n }\n\n private _createPositionPair(\n originX: HorizontalConnectionPos,\n originY: VerticalConnectionPos,\n overlayX: HorizontalConnectionPos,\n overlayY: VerticalConnectionPos,\n offsetX: number | undefined,\n offsetY: number | undefined,\n positionName: string\n ): ConnectionPositionPair {\n return new ConnectionPositionPair(\n { originX, originY },\n { overlayX, overlayY },\n offsetX,\n offsetY,\n `granite-tooltip-position-${positionName}`\n );\n }\n\n private _getTooltipPositions(): ConnectionPositionPair[] {\n const offsetX = GraniteTooltipConstants.OFFSET_X;\n const offsetY = GraniteTooltipConstants.OFFSET_Y;\n\n return [\n // below\n this._createPositionPair(\n 'center',\n 'bottom',\n 'center',\n 'top',\n undefined,\n offsetY,\n 'below'\n ),\n // above\n this._createPositionPair(\n 'center',\n 'top',\n 'center',\n 'bottom',\n undefined,\n -offsetY,\n 'above'\n ),\n // right\n this._createPositionPair(\n 'end',\n 'center',\n 'start',\n 'center',\n offsetX,\n undefined,\n 'right'\n ),\n // left\n this._createPositionPair(\n 'start',\n 'center',\n 'end',\n 'center',\n -offsetX,\n undefined,\n 'left'\n ),\n // below-start\n this._createPositionPair(\n 'start',\n 'bottom',\n 'start',\n 'top',\n undefined,\n offsetY,\n 'below-start'\n ),\n // below-end\n this._createPositionPair(\n 'end',\n 'bottom',\n 'end',\n 'top',\n undefined,\n offsetY,\n 'below-end'\n ),\n // above-start\n this._createPositionPair(\n 'start',\n 'top',\n 'start',\n 'bottom',\n undefined,\n -offsetY,\n 'above-start'\n ),\n // above-end\n this._createPositionPair(\n 'end',\n 'top',\n 'end',\n 'bottom',\n undefined,\n -offsetY,\n 'above-end'\n ),\n // right-start\n this._createPositionPair(\n 'end',\n 'top',\n 'start',\n 'top',\n offsetX,\n undefined,\n 'right-start'\n ),\n // right-end\n this._createPositionPair(\n 'end',\n 'bottom',\n 'start',\n 'bottom',\n offsetX,\n undefined,\n 'right-end'\n ),\n // left-start\n this._createPositionPair(\n 'start',\n 'top',\n 'end',\n 'top',\n -offsetX,\n undefined,\n 'left-start'\n ),\n // left-end\n this._createPositionPair(\n 'start',\n 'bottom',\n 'end',\n 'bottom',\n -offsetX,\n undefined,\n 'left-end'\n ),\n ];\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GraniteTooltipComponent } from './tooltip.component';\nimport { GraniteTooltipTriggerForDirective } from './tooltip-trigger-for.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [GraniteTooltipComponent, GraniteTooltipTriggerForDirective],\n exports: [GraniteTooltipComponent, GraniteTooltipTriggerForDirective],\n})\nexport class GraniteTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i3.GraniteTooltipService"],"mappings":";;;;;;;;;;MAca,uBAAuB,CAAA;8GAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EACvB,WAAW,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfxB,6GAKA,EAAA,MAAA,EAAA,CAAA,6YAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDSa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,cACnC,KAAK,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,6YAAA,CAAA,EAAA;8BAGO,YAAY,EAAA,CAAA;sBAAnC,SAAS;uBAAC,WAAW;;;MEfX,uBAAuB,CAAA;aAClB,IAAA,CAAA,QAAQ,GAAW,CAAC,CAAC;aACrB,IAAA,CAAA,QAAQ,GAAW,CAAC,CAAC;;;MCK1B,qBAAqB,CAAA;AAHlC,IAAA,WAAA,GAAA;QAIU,IAAA,CAAA,cAAc,GAAmC,IAAI;AAgB9D,IAAA;AAdC,IAAA,gBAAgB,CAAC,OAAgC,EAAA;QAC/C,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,OAAO,EAAE;YAC1D,IAAI,CAAC,kBAAkB,EAAE;QAC3B;AACA,QAAA,IAAI,CAAC,cAAc,GAAG,OAAO;IAC/B;IAEA,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;IAC5B;AAEA,IAAA,IAAI,aAAa,GAAA;QACf,OAAO,IAAI,CAAC,cAAc;IAC5B;8GAhBW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,cAFpB,MAAM,EAAA,CAAA,CAAA;;2FAEP,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MC6BY,iCAAiC,CAAA;IAwB5C,WAAA,CACU,WAAuB,EACvB,QAAiB,EACjB,iBAAmC,EACnC,aAA2B,EAC3B,eAAsC,EAAA;QAJtC,IAAA,CAAA,WAAW,GAAX,WAAW;QACX,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,iBAAiB,GAAjB,iBAAiB;QACjB,IAAA,CAAA,aAAa,GAAb,aAAa;QACb,IAAA,CAAA,eAAe,GAAf,eAAe;QAtBzB,IAAA,CAAA,SAAS,GAAW,CAAC;QAGrB,IAAA,CAAA,SAAS,GAAW,GAAG;QAGvB,IAAA,CAAA,mBAAmB,GAAY,KAAK;QAGpC,IAAA,CAAA,WAAW,GAAY,KAAK;AAGpB,QAAA,IAAA,CAAA,QAAQ,GAAkB,IAAI,OAAO,EAAE;IAW5C;IAEH,QAAQ,GAAA;QACN,IAAI,CAAC,cAAc,EAAE;IACvB;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,mBAAmB,EAAE;YAC/B,IAAI,CAAC,oBAAoB,EAAE;QAC7B;AACA,QAAA,IAAI,OAAO,CAAC,WAAW,EAAE;YACvB,IAAI,CAAC,YAAY,EAAE;QACrB;IACF;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;AACnC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;IAC1B;IAEA,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;QACrC;IACF;IAEA,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;IACrC;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;IACrC;IAEQ,YAAY,GAAA;AAClB,QAAA,SAAS,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,OAAO;AACzC,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,SAAS,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,QAAA,CAAC,CAAC;IACN;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC;AACF,aAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE;AACjC,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC7B,aAAA,SAAS,CAAC,CAAC,MAAM,KAAI;YACpB,IAAI,CAAC,MAAM,EAAE;AACX,gBAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;YACrC;AAAO,iBAAA,IAAI,MAAM,KAAK,UAAU,EAAE;AAChC,gBAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;YACrC;AACF,QAAA,CAAC,CAAC;IACN;IAEQ,cAAc,GAAA;QACpB,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE;AAClE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC3B,aAAA,QAAQ;AACR,aAAA,mBAAmB,CAAC,IAAI,CAAC,kBAAkB,EAAE;AAC7C,aAAA,aAAa,CAAC,IAAI,CAAC,oBAAoB,EAAE;aACzC,QAAQ,CAAC,IAAI,CAAC;QAEjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;YACtC,gBAAgB;YAChB,cAAc;AACf,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC;AACF,aAAA,aAAa;AACb,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC7B,SAAS,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,QAAA,CAAC,CAAC;IACN;AAEQ,IAAA,cAAc,CAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,IAAI,CAAC,uBAAuB,CAAC;QAE1C,IACE,IAAI,CAAC,eAAe,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO;AACnD,YAAA,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAC9B;YACA;QACF;QACA,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC;QAEnD,IAAI,CAAC,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;YACpD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE;AACnC,gBAAA,MAAM,MAAM,GAAG,IAAI,cAAc,CAC/B,IAAI,CAAC,OAAO,CAAC,YAAY,EACzB,IAAI,CAAC,iBAAiB,CACvB;AACD,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC;YACjC;QACF,CAAC,EAAE,KAAK,CAAC;IACX;AAEQ,IAAA,cAAc,CAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,IAAI,CAAC,uBAAuB,CAAC;QAE1C,IAAI,CAAC,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACpD,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE;AAClC,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;AACzB,gBAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;AACnC,gBAAA,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE;YAC3C;QACF,CAAC,EAAE,KAAK,CAAC;IACX;IAEQ,kBAAkB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa;IACvC;AAEQ,IAAA,mBAAmB,CACzB,OAAgC,EAChC,OAA8B,EAC9B,QAAiC,EACjC,QAA+B,EAC/B,OAA2B,EAC3B,OAA2B,EAC3B,YAAoB,EAAA;QAEpB,OAAO,IAAI,sBAAsB,CAC/B,EAAE,OAAO,EAAE,OAAO,EAAE,EACpB,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACtB,OAAO,EACP,OAAO,EACP,CAAA,yBAAA,EAA4B,YAAY,CAAA,CAAE,CAC3C;IACH;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,MAAM,OAAO,GAAG,uBAAuB,CAAC,QAAQ;AAChD,QAAA,MAAM,OAAO,GAAG,uBAAuB,CAAC,QAAQ;QAEhD,OAAO;;AAEL,YAAA,IAAI,CAAC,mBAAmB,CACtB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,CACR;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,CAAC,OAAO,EACR,OAAO,CACR;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,CACR;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,CAAC,OAAO,EACR,SAAS,EACT,MAAM,CACP;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAS,EACT,OAAO,EACP,aAAa,CACd;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,OAAO,EACP,WAAW,CACZ;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,CAAC,OAAO,EACR,aAAa,CACd;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,CAAC,OAAO,EACR,WAAW,CACZ;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,aAAa,CACd;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,CACZ;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,CAAC,OAAO,EACR,SAAS,EACT,YAAY,CACb;;AAED,YAAA,IAAI,CAAC,mBAAmB,CACtB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,CAAC,OAAO,EACR,SAAS,EACT,UAAU,CACX;SACF;IACH;8GAjSW,iCAAiC,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,OAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,qBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjC,iCAAiC,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,CAAA,0BAAA,EAAA,SAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,2BAAA,EAAA,YAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjC,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAT7C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,4BAA4B;AACtC,oBAAA,IAAI,EAAE;AACJ,wBAAA,cAAc,EAAE,2BAA2B;AAC3C,wBAAA,cAAc,EAAE,2BAA2B;AAC3C,wBAAA,QAAQ,EAAE,qBAAqB;AAChC,qBAAA;AACD,oBAAA,UAAU,EAAE,KAAK;AAClB,iBAAA;gMAKC,OAAO,EAAA,CAAA;sBADN,KAAK;uBAAC,0BAA0B;gBAIjC,SAAS,EAAA,CAAA;sBADR;gBAID,SAAS,EAAA,CAAA;sBADR;gBAID,mBAAmB,EAAA,CAAA;sBADlB;gBAID,WAAW,EAAA,CAAA;sBADV;;;MCxCU,oBAAoB,CAAA;8GAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAApB,oBAAoB,EAAA,YAAA,EAAA,CAHhB,uBAAuB,EAAE,iCAAiC,aAD/D,YAAY,CAAA,EAAA,OAAA,EAAA,CAEZ,uBAAuB,EAAE,iCAAiC,CAAA,EAAA,CAAA,CAAA;AAEzD,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAJrB,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAIX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,YAAY,EAAE,CAAC,uBAAuB,EAAE,iCAAiC,CAAC;AAC1E,oBAAA,OAAO,EAAE,CAAC,uBAAuB,EAAE,iCAAiC,CAAC;AACtE,iBAAA;;;ACTD;;AAEG;;;;"}
|
|
@@ -689,20 +689,20 @@ function throwGraniteMenuMissingError() {
|
|
|
689
689
|
}
|
|
690
690
|
/**
|
|
691
691
|
* Throws an exception for the case when menu's x-position value isn't valid.
|
|
692
|
-
* In other words, it doesn't match 'before' or '
|
|
692
|
+
* In other words, it doesn't match 'before', 'after', or 'center'.
|
|
693
693
|
* @docs-private
|
|
694
694
|
*/
|
|
695
695
|
function throwGraniteMenuInvalidPositionX() {
|
|
696
|
-
throw Error(`xPosition value must be either 'before' or
|
|
696
|
+
throw Error(`xPosition value must be either 'before', 'after', or 'center'.
|
|
697
697
|
Example: <granite-menu xPosition="before" #menu="graniteMenu"></granite-menu>`);
|
|
698
698
|
}
|
|
699
699
|
/**
|
|
700
700
|
* Throws an exception for the case when menu's y-position value isn't valid.
|
|
701
|
-
* In other words, it doesn't match 'above' or '
|
|
701
|
+
* In other words, it doesn't match 'above', 'below', or 'center'.
|
|
702
702
|
* @docs-private
|
|
703
703
|
*/
|
|
704
704
|
function throwGraniteMenuInvalidPositionY() {
|
|
705
|
-
throw Error(`yPosition value must be either 'above' or
|
|
705
|
+
throw Error(`yPosition value must be either 'above', 'below', or 'center'.
|
|
706
706
|
Example: <granite-menu yPosition="above" #menu="graniteMenu"></granite-menu>`);
|
|
707
707
|
}
|
|
708
708
|
|
|
@@ -885,7 +885,7 @@ class _MenuBaseComponent {
|
|
|
885
885
|
return this._xPosition;
|
|
886
886
|
}
|
|
887
887
|
set xPosition(value) {
|
|
888
|
-
if (value !== 'before' && value !== 'after') {
|
|
888
|
+
if (value !== 'before' && value !== 'after' && value !== 'center') {
|
|
889
889
|
throwGraniteMenuInvalidPositionX();
|
|
890
890
|
}
|
|
891
891
|
this._xPosition = value;
|
|
@@ -895,7 +895,7 @@ class _MenuBaseComponent {
|
|
|
895
895
|
return this._yPosition;
|
|
896
896
|
}
|
|
897
897
|
set yPosition(value) {
|
|
898
|
-
if (value !== 'above' && value !== 'below') {
|
|
898
|
+
if (value !== 'above' && value !== 'below' && value !== 'center') {
|
|
899
899
|
throwGraniteMenuInvalidPositionY();
|
|
900
900
|
}
|
|
901
901
|
this._yPosition = value;
|
|
@@ -909,6 +909,13 @@ class _MenuBaseComponent {
|
|
|
909
909
|
}
|
|
910
910
|
constructor(_changeDetectorRef) {
|
|
911
911
|
this._changeDetectorRef = _changeDetectorRef;
|
|
912
|
+
/**
|
|
913
|
+
* Custom position configuration for the overlay.
|
|
914
|
+
* When provided, this overrides the default positioning logic based on
|
|
915
|
+
* xPosition and yPosition. Uses Angular CDK ConnectedPosition format.
|
|
916
|
+
* If empty or not provided, falls back to default positioning behavior.
|
|
917
|
+
*/
|
|
918
|
+
this.cdkConnectedOverlayPosition = [];
|
|
912
919
|
this.openOnHover = true;
|
|
913
920
|
this.scrollStrategy = 'reposition';
|
|
914
921
|
/**
|
|
@@ -1206,7 +1213,7 @@ class _MenuBaseComponent {
|
|
|
1206
1213
|
});
|
|
1207
1214
|
}
|
|
1208
1215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: _MenuBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1209
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: _MenuBaseComponent, isStandalone: true, inputs: { xPosition: "xPosition", yPosition: "yPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover", scrollStrategy: "scrollStrategy", styles: "styles", touchStyles: "touchStyles", preventParentClose: "preventParentClose" }, outputs: { closed: "closed", opened: "opened" }, queries: [{ propertyName: "customTemplate", first: true, predicate: GraniteMenuCustomTemplateDirective, descendants: true }, { propertyName: "_allItems", predicate: GraniteMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
|
|
1216
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: _MenuBaseComponent, isStandalone: true, inputs: { xPosition: "xPosition", yPosition: "yPosition", cdkConnectedOverlayPosition: "cdkConnectedOverlayPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover", scrollStrategy: "scrollStrategy", styles: "styles", touchStyles: "touchStyles", preventParentClose: "preventParentClose" }, outputs: { closed: "closed", opened: "opened" }, queries: [{ propertyName: "customTemplate", first: true, predicate: GraniteMenuCustomTemplateDirective, descendants: true }, { propertyName: "_allItems", predicate: GraniteMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
|
|
1210
1217
|
}
|
|
1211
1218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: _MenuBaseComponent, decorators: [{
|
|
1212
1219
|
type: Directive
|
|
@@ -1214,6 +1221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
1214
1221
|
type: Input
|
|
1215
1222
|
}], yPosition: [{
|
|
1216
1223
|
type: Input
|
|
1224
|
+
}], cdkConnectedOverlayPosition: [{
|
|
1225
|
+
type: Input
|
|
1217
1226
|
}], title: [{
|
|
1218
1227
|
type: Input
|
|
1219
1228
|
}], closeLabel: [{
|
|
@@ -1816,26 +1825,51 @@ class GraniteMenuTriggerForDirective {
|
|
|
1816
1825
|
* @param positionStrategy Strategy whose position to update.
|
|
1817
1826
|
*/
|
|
1818
1827
|
_setPosition(positionStrategy) {
|
|
1828
|
+
if (this.menu.cdkConnectedOverlayPosition &&
|
|
1829
|
+
this.menu.cdkConnectedOverlayPosition.length > 0) {
|
|
1830
|
+
positionStrategy.withPositions(this.menu.cdkConnectedOverlayPosition);
|
|
1831
|
+
return;
|
|
1832
|
+
}
|
|
1819
1833
|
const MENU_PANEL_TOP_PADDING = 0;
|
|
1820
|
-
let [originX, originFallbackX] = this.menu.xPosition === 'before'
|
|
1821
|
-
|
|
1834
|
+
let [originX, originFallbackX] = this.menu.xPosition === 'before'
|
|
1835
|
+
? ['end', 'start']
|
|
1836
|
+
: this.menu.xPosition === 'center'
|
|
1837
|
+
? ['center', 'center']
|
|
1838
|
+
: ['start', 'end'];
|
|
1839
|
+
const [overlayY, overlayFallbackY] = this.menu.yPosition === 'above'
|
|
1840
|
+
? ['bottom', 'top']
|
|
1841
|
+
: this.menu.yPosition === 'center'
|
|
1842
|
+
? ['center', 'center']
|
|
1843
|
+
: ['top', 'bottom'];
|
|
1822
1844
|
let [originY, originFallbackY] = [overlayY, overlayFallbackY];
|
|
1823
1845
|
let [overlayX, overlayFallbackX] = [originX, originFallbackX];
|
|
1824
1846
|
let offsetY = 0;
|
|
1825
1847
|
if (this.triggersSubmenu()) {
|
|
1826
1848
|
// When the menu is a sub-menu, it should always align itself
|
|
1827
1849
|
// to the edges of the trigger, instead of overlapping it.
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1850
|
+
if (this.menu.xPosition === 'center') {
|
|
1851
|
+
overlayFallbackX = originX = 'center';
|
|
1852
|
+
originFallbackX = overlayX = 'center';
|
|
1853
|
+
}
|
|
1854
|
+
else {
|
|
1855
|
+
overlayFallbackX = originX =
|
|
1856
|
+
this.menu.xPosition === 'before' ? 'start' : 'end';
|
|
1857
|
+
originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
|
|
1858
|
+
}
|
|
1831
1859
|
offsetY =
|
|
1832
1860
|
overlayY === 'bottom'
|
|
1833
1861
|
? MENU_PANEL_TOP_PADDING
|
|
1834
1862
|
: -MENU_PANEL_TOP_PADDING;
|
|
1835
1863
|
}
|
|
1836
1864
|
else {
|
|
1837
|
-
|
|
1838
|
-
|
|
1865
|
+
if (this.menu.yPosition === 'center') {
|
|
1866
|
+
originY = 'center';
|
|
1867
|
+
originFallbackY = 'center';
|
|
1868
|
+
}
|
|
1869
|
+
else {
|
|
1870
|
+
originY = overlayY === 'top' ? 'bottom' : 'top';
|
|
1871
|
+
originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
|
|
1872
|
+
}
|
|
1839
1873
|
}
|
|
1840
1874
|
positionStrategy.withPositions([
|
|
1841
1875
|
{ originX, originY, overlayX, overlayY, offsetY },
|
|
@@ -2782,9 +2816,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
2782
2816
|
}] });
|
|
2783
2817
|
|
|
2784
2818
|
const GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textarea'];
|
|
2819
|
+
const GRANITE_INPUT_SUFFIX_BUTTON_SELECTOR = 'button[graniteInputSuffixButton]';
|
|
2785
2820
|
class GraniteInputFieldComponent {
|
|
2786
|
-
constructor(_focusMonitor) {
|
|
2821
|
+
constructor(_focusMonitor, _cdr, _elementRef) {
|
|
2787
2822
|
this._focusMonitor = _focusMonitor;
|
|
2823
|
+
this._cdr = _cdr;
|
|
2824
|
+
this._elementRef = _elementRef;
|
|
2788
2825
|
this.id = null;
|
|
2789
2826
|
this.name = null;
|
|
2790
2827
|
this.type = 'text';
|
|
@@ -2803,6 +2840,7 @@ class GraniteInputFieldComponent {
|
|
|
2803
2840
|
this._empty = false;
|
|
2804
2841
|
this._passwordFieldIcon = 'view';
|
|
2805
2842
|
this._passwordField = false;
|
|
2843
|
+
this._hasSuffixButton = false;
|
|
2806
2844
|
this._currentCharCount = 0;
|
|
2807
2845
|
this._passwordToggled = false;
|
|
2808
2846
|
this._lastEmittedValue = '';
|
|
@@ -2836,8 +2874,12 @@ class GraniteInputFieldComponent {
|
|
|
2836
2874
|
}
|
|
2837
2875
|
if (changes.type) {
|
|
2838
2876
|
this._validateType();
|
|
2877
|
+
this._passwordField = this.type == 'password';
|
|
2839
2878
|
}
|
|
2840
2879
|
}
|
|
2880
|
+
ngAfterViewInit() {
|
|
2881
|
+
this._checkForSuffixButton();
|
|
2882
|
+
}
|
|
2841
2883
|
focus(origin = 'program', options) {
|
|
2842
2884
|
if (this.type === 'text') {
|
|
2843
2885
|
this._focusMonitor.focusVia(this._getInputElement(), origin, options);
|
|
@@ -2870,6 +2912,15 @@ class GraniteInputFieldComponent {
|
|
|
2870
2912
|
throw Error(`Input type "${this.type}" isn't supported by graniteInputField.`);
|
|
2871
2913
|
}
|
|
2872
2914
|
}
|
|
2915
|
+
_checkForSuffixButton() {
|
|
2916
|
+
const hostElement = this._elementRef.nativeElement;
|
|
2917
|
+
const suffixButton = hostElement.querySelector(GRANITE_INPUT_SUFFIX_BUTTON_SELECTOR);
|
|
2918
|
+
const hasButton = suffixButton != null;
|
|
2919
|
+
if (hasButton !== this._hasSuffixButton) {
|
|
2920
|
+
this._hasSuffixButton = hasButton;
|
|
2921
|
+
this._cdr.markForCheck();
|
|
2922
|
+
}
|
|
2923
|
+
}
|
|
2873
2924
|
_applyCharacterCount(inputString) {
|
|
2874
2925
|
if (this.countcharacters && inputString != null) {
|
|
2875
2926
|
this._currentCharCount = inputString.length;
|
|
@@ -2893,15 +2944,15 @@ class GraniteInputFieldComponent {
|
|
|
2893
2944
|
this.valueChange.emit(value);
|
|
2894
2945
|
}
|
|
2895
2946
|
}
|
|
2896
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GraniteInputFieldComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2897
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GraniteInputFieldComponent, isStandalone: false, selector: "granite-input-field", inputs: { id: "id", name: "name", type: "type", value: "value", required: "required", readonly: "readonly", invalid: "invalid", disabled: "disabled", placeholder: "placeholder", prefixicon: "prefixicon", maxlength: "maxlength", countcharacters: "countcharacters", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "granite-input-field" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_textareaElement", first: true, predicate: ["textarea"], descendants: true }], exportAs: ["graniteInputField"], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-invalid]=\"invalid\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-container *ngIf=\"!_passwordField\">\n <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n </ng-container>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:
|
|
2947
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GraniteInputFieldComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2948
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: GraniteInputFieldComponent, isStandalone: false, selector: "granite-input-field", inputs: { id: "id", name: "name", type: "type", value: "value", required: "required", readonly: "readonly", invalid: "invalid", disabled: "disabled", placeholder: "placeholder", prefixicon: "prefixicon", maxlength: "maxlength", countcharacters: "countcharacters", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "granite-input-field" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_textareaElement", first: true, predicate: ["textarea"], descendants: true }], exportAs: ["graniteInputField"], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-invalid]=\"invalid\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-base--with-append]=\"\n _passwordField || _hasSuffixButton\n \"\n [class.granite-input-base--with-prefix]=\"prefixicon\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-container *ngIf=\"!_passwordField\">\n <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n </ng-container>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:auto;position:relative;background:var(--granite-color-background);border-radius:var(--granite-radius-s)}.granite-input-container .granite-input-top-row:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-medium)}.granite-input-container .granite-input-top-row:hover:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-hard)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-invalid:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base{appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);border-radius:var(--granite-radius-s)}.granite-input-container .granite-input-top-row .granite-input-base--with-append{border-start-end-radius:0;border-end-end-radius:0}.granite-input-container .granite-input-top-row .granite-input-base--with-prefix{border-start-start-radius:0;border-end-start-radius:0}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-signal-failure),inset .125rem 0 var(--granite-color-signal-failure),inset -.125rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-prepend{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative;border-end-end-radius:var(--granite-radius-s);border-start-end-radius:var(--granite-radius-s)}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}:host ::ng-deep button[graniteInputSuffixButton]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);margin:0;border-radius:var(--granite-radius-s)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2898
2949
|
}
|
|
2899
2950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GraniteInputFieldComponent, decorators: [{
|
|
2900
2951
|
type: Component,
|
|
2901
2952
|
args: [{ selector: 'granite-input-field', exportAs: 'graniteInputField', standalone: false, host: {
|
|
2902
2953
|
class: 'granite-input-field',
|
|
2903
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-invalid]=\"invalid\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-container *ngIf=\"!_passwordField\">\n <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n </ng-container>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:
|
|
2904
|
-
}], ctorParameters: () => [{ type: i1.FocusMonitor }], propDecorators: { id: [{
|
|
2954
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-invalid]=\"invalid\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-base--with-append]=\"\n _passwordField || _hasSuffixButton\n \"\n [class.granite-input-base--with-prefix]=\"prefixicon\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-container *ngIf=\"!_passwordField\">\n <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n </ng-container>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:auto;position:relative;background:var(--granite-color-background);border-radius:var(--granite-radius-s)}.granite-input-container .granite-input-top-row:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-medium)}.granite-input-container .granite-input-top-row:hover:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-hard)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-invalid:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base{appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);border-radius:var(--granite-radius-s)}.granite-input-container .granite-input-top-row .granite-input-base--with-append{border-start-end-radius:0;border-end-end-radius:0}.granite-input-container .granite-input-top-row .granite-input-base--with-prefix{border-start-start-radius:0;border-end-start-radius:0}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-signal-failure),inset .125rem 0 var(--granite-color-signal-failure),inset -.125rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-prepend{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative;border-end-end-radius:var(--granite-radius-s);border-start-end-radius:var(--granite-radius-s)}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}:host ::ng-deep button[graniteInputSuffixButton]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);margin:0;border-radius:var(--granite-radius-s)}\n"] }]
|
|
2955
|
+
}], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { id: [{
|
|
2905
2956
|
type: Input
|
|
2906
2957
|
}], name: [{
|
|
2907
2958
|
type: Input
|