@testgorilla/tgo-ui 12.0.0 → 12.0.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.
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs.map +1 -1
- package/mcp/catalog.json +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-filter-button.mjs","names":[],"sources":["../../../components/filter-button/filter-button.component.ts","../../../components/filter-button/filter-button.component.html","../../../components/filter-button/filter-button.component.module.ts"],"sourcesContent":["import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { AsyncPipe } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n EventEmitter,\n HostBinding,\n Inject,\n input,\n Input,\n OnChanges,\n Optional,\n Output,\n signal,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { EMPTY, fromEvent, Subject } from 'rxjs';\nimport { debounceTime, switchMap } from 'rxjs/operators';\n\nimport { ButtonIconPosition, ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponent } from '@testgorilla/tgo-ui/components/checkbox';\nimport {\n ApplicationTheme,\n IKeyboardEvent,\n EllipseTextDirective,\n UiTranslatePipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponent } from '@testgorilla/tgo-ui/components/field';\nimport { IconName, IconComponent } from '@testgorilla/tgo-ui/components/icon';\nimport { RadioButtonComponent } from '@testgorilla/tgo-ui/components/radio-button';\n\nimport { FilterButtonOption, FilterValue, OptionChangeEvent } from './filter-button.model';\n\ntype FilterButtonRow = { kind: 'header'; title: string } | { kind: 'option'; option: FilterButtonOption };\n\n@Component({\n selector: 'ui-filter-button',\n templateUrl: './filter-button.component.html',\n styleUrls: ['./filter-button.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ButtonComponent,\n CdkOverlayOrigin,\n MatTooltip,\n CdkConnectedOverlay,\n CdkVirtualScrollViewport,\n CdkFixedSizeVirtualScroll,\n CdkVirtualForOf,\n FieldComponent,\n FormsModule,\n RadioButtonComponent,\n CheckboxComponent,\n IconComponent,\n EllipseTextDirective,\n AsyncPipe,\n UiTranslatePipe,\n ],\n})\nexport class FilterButtonComponent implements OnChanges {\n @HostBinding() class = 'ui-filter-button';\n\n /**\n * The button label when no value is selected.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() label = '';\n\n /**\n * Optional message to display on the overflow bottom.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() message? = '';\n\n /**\n * List of selected values.\n *\n * @type {string[]}\n * @memberof FilterButtonComponent\n */\n @Input() value: FilterValue[] = [];\n\n /**\n * Whether the component is disabled.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() disabled = false;\n\n /**\n * List of options.\n *\n * @type {OptionType}\n * @memberof FilterButtonComponent\n */\n options = input<FilterButtonOption[]>([]);\n\n /**\n * Whether the user should be allowed to clear the values.\n * Default: true.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() allowClear = true;\n\n /**\n * Whether the user should be allowed to select single or multiple values.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() singleSelection? = false;\n\n /**\n * The icon name to display.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n *\n **/\n\n @Input() iconName?: IconName;\n\n /**\n * The position of the icon.\n * Default: 'right'.\n *\n * @type {ButtonIconPosition}\n * @memberof FilterButtonComponent\n */\n @Input() iconPosition?: ButtonIconPosition = 'right';\n\n /**\n * Optional message to display if there are no options to select available\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() noOptionsMessage? = '';\n\n /**\n * Whether the button should stretch to fill its container, and the dropdown panel\n * follow that width instead of the default 240px.\n * The panel never shrinks below 240px, so a container narrower than that is safe.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input({ transform: booleanAttribute }) fullWidth = false;\n\n @Input() testId: string | null = null;\n\n @Input() ariaLabel = '';\n\n get panelTestId(): string | null {\n return this.testId ? `${this.testId}-panel` : null;\n }\n\n get resetButtonTestId(): string | null {\n return this.testId ? `${this.testId}-reset` : null;\n }\n\n /**\n * Emits the list of selected values when the selection changes.\n *\n * @type {EventEmitter<string[]>}\n * @memberof FilterButtonComponent\n */\n @Output() changed = new EventEmitter<FilterValue[]>();\n\n /**\n * Emits the option change event\n *\n * @type {EventEmitter<OptionChangeEvent>}\n * @memberof FilterButtonComponent\n */\n @Output() optionChange = new EventEmitter<OptionChangeEvent>();\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof FilterButtonComponent\n */\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n @HostBinding('class.ui-filter-button-full-width')\n get fullWidthClass(): boolean {\n return this.fullWidth;\n }\n\n @ViewChild('overlayContainer') overlayContainer: ElementRef<HTMLElement>;\n @ViewChild(CdkVirtualScrollViewport) viewport?: CdkVirtualScrollViewport;\n\n @ViewChild(CdkOverlayOrigin) private readonly triggerOrigin?: CdkOverlayOrigin;\n @ViewChild(CdkConnectedOverlay) private readonly connectedOverlay?: CdkConnectedOverlay;\n\n /** Must match the `.item` height in the SCSS — the fixed-size viewport relies on it. */\n readonly ITEM_SIZE = 48;\n readonly MAX_LIST_HEIGHT = 290;\n\n readonly PANEL_MIN_WIDTH = 240;\n\n readonly MATCH_TRIGGER_PANEL_CLASS = 'ui-filter-button-panel-match-trigger';\n\n isOpen = signal<boolean>(false);\n displayedLabel = signal<string>('');\n tooltip = signal<string>('');\n search = signal<string>('');\n activeIndex = signal<number>(0);\n showTooltip: { [key: string]: boolean } = {};\n displayedOptions = computed(() => {\n let lastSectionTitle: string;\n return this.options()\n .map(option => {\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty section title reuses the previous section\n lastSectionTitle = option.sectionTitle || lastSectionTitle;\n return { ...option, sectionTitle: lastSectionTitle };\n })\n .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));\n });\n\n // Section titles become their own rows so the fixed-size viewport can position every row with one `itemSize`.\n flatOptions = computed<FilterButtonRow[]>(() => {\n const rows: FilterButtonRow[] = [];\n let lastTitle: string | undefined;\n for (const option of this.displayedOptions()) {\n if (option.sectionTitle && option.sectionTitle !== lastTitle) {\n lastTitle = option.sectionTitle;\n rows.push({ kind: 'header', title: option.sectionTitle });\n }\n rows.push({ kind: 'option', option });\n }\n return rows;\n });\n\n optionCount = computed(() => this.displayedOptions().length);\n\n activeOption = computed<FilterButtonOption | undefined>(() => {\n const row = this.flatOptions()[this.activeIndex()];\n return row?.kind === 'option' ? row.option : undefined;\n });\n\n // 1-based position of the active option (headers excluded) for the aria-live announcement.\n activePosition = computed(() => {\n const rows = this.flatOptions();\n const activeIndex = this.activeIndex();\n let position = 0;\n for (let i = 0; i <= activeIndex && i < rows.length; i++) {\n if (rows[i].kind === 'option') {\n position++;\n }\n }\n return position;\n });\n\n listHeight = computed(() =>\n Math.min(Math.max(this.flatOptions().length * this.ITEM_SIZE, this.ITEM_SIZE), this.MAX_LIST_HEIGHT)\n );\n\n protected trackByRow = (_index: number, row: FilterButtonRow): string =>\n row.kind === 'header' ? `header:${row.title}` : `option:${row.option.value}`;\n\n readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;\n protected translationContext = 'FILTER_BUTTON.';\n private readonly searchInput$ = new Subject<string>();\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n private readonly cdr: ChangeDetectorRef,\n destroyRef: DestroyRef\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n\n this.searchInput$.pipe(debounceTime(150), takeUntilDestroyed(destroyRef)).subscribe(value => {\n this.search.set(value);\n this.activeIndex.set(this.firstOptionIndex());\n this.cdr.markForCheck();\n });\n\n toObservable(this.isOpen)\n .pipe(\n switchMap(open => (open && this.fullWidth ? fromEvent(window, 'resize').pipe(debounceTime(100)) : EMPTY)),\n takeUntilDestroyed(destroyRef)\n )\n .subscribe(() => this.syncPanelWidth());\n }\n\n private syncPanelWidth(): void {\n const overlayRef = this.connectedOverlay?.overlayRef;\n const trigger = this.triggerOrigin?.elementRef.nativeElement as HTMLElement | undefined;\n if (!overlayRef || !trigger) {\n return;\n }\n overlayRef.updateSize({ width: trigger.getBoundingClientRect().width });\n overlayRef.updatePosition();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['value']) {\n this.updateLabel();\n }\n }\n\n clearValue(): void {\n this.value = [];\n this.updateLabel();\n this.changed.emit(this.value);\n }\n\n outsideClick() {\n window.setTimeout(() => {\n this.isOpen.set(false);\n });\n }\n\n toggle(): void {\n this.isOpen.set(!this.isOpen());\n if (this.isOpen()) {\n this.activeIndex.set(this.firstOptionIndex());\n }\n this.cdr.markForCheck();\n }\n\n isSelected(value?: FilterValue) {\n return this.value?.includes(value ?? '');\n }\n\n optionChanged(selected: boolean, option: FilterButtonOption) {\n this.value = this.value || [];\n if (this.singleSelection) {\n this.value = selected ? [option.value] : [];\n } else {\n if (selected) {\n this.value.push(option.value);\n } else {\n this.value.splice(this.value.indexOf(option.value), 1);\n }\n }\n this.changed.emit(this.value);\n this.optionChange.emit({ selected, option });\n this.updateLabel();\n }\n\n onSearchChange(value: string): void {\n this.searchInput$.next(value);\n }\n\n keyDownHandler(ev: KeyboardEvent) {\n if (ev.key === (IKeyboardEvent.ARROW_DOWN as string)) {\n ev.preventDefault();\n this.moveActive(1);\n } else if (ev.key === (IKeyboardEvent.ARROW_UP as string)) {\n ev.preventDefault();\n this.moveActive(-1);\n } else if (ev.key === (IKeyboardEvent.ENTER as string) || ev.key === (IKeyboardEvent.SPACE as string)) {\n ev.preventDefault();\n this.toggleActiveOption();\n } else if (ev.key === (IKeyboardEvent.ESCAPE as string)) {\n this.isOpen.set(false);\n }\n }\n\n onLabelEllipsisChange(isEllipsis: boolean, value: FilterValue): void {\n this.showTooltip[value] = isEllipsis;\n }\n\n private firstOptionIndex(): number {\n const index = this.flatOptions().findIndex(row => row.kind === 'option');\n return index === -1 ? 0 : index;\n }\n\n private moveActive(delta: number): void {\n const rows = this.flatOptions();\n const optionIndexes: number[] = [];\n rows.forEach((row, index) => {\n if (row.kind === 'option') {\n optionIndexes.push(index);\n }\n });\n if (!optionIndexes.length) {\n return;\n }\n const currentPos = optionIndexes.indexOf(this.activeIndex());\n const basePos = currentPos === -1 ? 0 : currentPos;\n const nextPos = (basePos + delta + optionIndexes.length) % optionIndexes.length;\n const nextIndex = optionIndexes[nextPos];\n this.activeIndex.set(nextIndex);\n this.viewport?.scrollToIndex(nextIndex, 'smooth');\n }\n\n private toggleActiveOption(): void {\n const option = this.activeOption();\n if (option) {\n this.optionChanged(!this.isSelected(option.value), option);\n }\n }\n\n private updateLabel() {\n this.value = this.value || [];\n let displayedLabel = '';\n let tooltip = '';\n const sortedLabels = this.options()\n .filter(option => this.value.includes(option.value))\n .map(item => item?.label ?? '');\n\n if (sortedLabels.length > 0) {\n displayedLabel = this.options().find(option => option.value === this.value[0])?.label ?? '';\n tooltip = `${this.label}${sortedLabels.map(value => `\\n • ${value}`).join('')}`;\n }\n\n if (this.value.length > 1) {\n displayedLabel += ` (+${this.value.length - 1})`;\n }\n this.displayedLabel.set(displayedLabel);\n this.tooltip.set(tooltip);\n this.cdr.markForCheck();\n }\n}\n","<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [testId]=\"testId\"\n [ariaLabel]=\"ariaLabel\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"fullWidth\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayMatchWidth]=\"fullWidth\"\n [cdkConnectedOverlayMinWidth]=\"fullWidth ? PANEL_MIN_WIDTH : ''\"\n [cdkConnectedOverlayPanelClass]=\"fullWidth ? MATCH_TRIGGER_PANEL_CLASS : ''\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (activeOption(); as active) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ active.label }}\n {{\n translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ active.label }}\n {{\n (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer [attr.data-testid]=\"panelTestId\">\n @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n <div class=\"ui-filter-button-header\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"onSearchChange($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n }\n <div\n class=\"ui-filter-button-list\"\n #list\n tabindex=\"0\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n (keydown)=\"keyDownHandler($event)\"\n >\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n class=\"ui-filter-button-viewport\"\n [itemSize]=\"ITEM_SIZE\"\n [style.height.px]=\"listHeight()\"\n >\n <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n @if (row.kind === 'header') {\n <div class=\"section-title\">\n {{ row.title }}\n </div>\n } @else {\n <div\n class=\"item\"\n role=\"option\"\n tabindex=\"-1\"\n [id]=\"'ui-fb-option-' + i\"\n [class.item-selected]=\"isSelected(row.option.value)\"\n [class.item-active]=\"activeIndex() === i\"\n [attr.aria-selected]=\"isSelected(row.option.value)\"\n (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n >\n @if (singleSelection) {\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n [tabIndex]=\"-1\"\n [selected]=\"isSelected(row.option.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n [applicationTheme]=\"applicationTheme\"\n >\n </ui-radio-button>\n }\n @if (!singleSelection) {\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n [tabIndex]=\"-1\"\n [checked]=\"isSelected(row.option.value)\"\n (changed)=\"optionChanged($event, row.option)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-checkbox>\n }\n @if (row.option.icon) {\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n }\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n [refresh]=\"row.option.value\"\n (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ row.option.label }}\n </span>\n @if (row.option.labelNumber !== undefined) {\n <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n }\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n @if (allowClear || message) {\n <div class=\"ui-filter-button-footer\">\n @if (allowClear) {\n <ui-button\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n [testId]=\"resetButtonTestId\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n }\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n }\n </div>\n </ng-template>\n</ng-container>\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';\nimport { EllipseTextDirective, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\n\nimport { FilterButtonComponent } from './filter-button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n MatTooltipModule,\n OverlayModule,\n UiTranslatePipe,\n ButtonComponentModule,\n IconComponentModule,\n CheckboxComponentModule,\n FieldComponentModule,\n EllipseTextDirective,\n RadioButtonComponentModule,\n FilterButtonComponent,\n ],\n exports: [FilterButtonComponent],\n})\nexport class FilterButtonComponentModule {}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-filter-button.mjs","names":[],"sources":["../../../components/filter-button/filter-button.component.ts","../../../components/filter-button/filter-button.component.html","../../../components/filter-button/filter-button.component.module.ts"],"sourcesContent":["import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { AsyncPipe } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n EventEmitter,\n HostBinding,\n Inject,\n input,\n Input,\n OnChanges,\n Optional,\n Output,\n signal,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { EMPTY, fromEvent, Subject } from 'rxjs';\nimport { debounceTime, switchMap } from 'rxjs/operators';\n\nimport { ButtonIconPosition, ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponent } from '@testgorilla/tgo-ui/components/checkbox';\nimport {\n ApplicationTheme,\n IKeyboardEvent,\n EllipseTextDirective,\n UiTranslatePipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponent } from '@testgorilla/tgo-ui/components/field';\nimport { IconName, IconComponent } from '@testgorilla/tgo-ui/components/icon';\nimport { RadioButtonComponent } from '@testgorilla/tgo-ui/components/radio-button';\n\nimport { FilterButtonOption, FilterValue, OptionChangeEvent } from './filter-button.model';\n\ntype FilterButtonRow = { kind: 'header'; title: string } | { kind: 'option'; option: FilterButtonOption };\n\n@Component({\n selector: 'ui-filter-button',\n templateUrl: './filter-button.component.html',\n styleUrls: ['./filter-button.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ButtonComponent,\n CdkOverlayOrigin,\n MatTooltip,\n CdkConnectedOverlay,\n CdkVirtualScrollViewport,\n CdkFixedSizeVirtualScroll,\n CdkVirtualForOf,\n FieldComponent,\n FormsModule,\n RadioButtonComponent,\n CheckboxComponent,\n IconComponent,\n EllipseTextDirective,\n AsyncPipe,\n UiTranslatePipe,\n ],\n})\nexport class FilterButtonComponent implements OnChanges {\n @HostBinding() class = 'ui-filter-button';\n\n /**\n * The button label when no value is selected.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() label = '';\n\n /**\n * Optional message to display on the overflow bottom.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() message? = '';\n\n /**\n * List of selected values.\n *\n * @type {string[]}\n * @memberof FilterButtonComponent\n */\n @Input() value: FilterValue[] = [];\n\n /**\n * Whether the component is disabled.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() disabled = false;\n\n /**\n * List of options.\n *\n * @type {OptionType}\n * @memberof FilterButtonComponent\n */\n options = input<FilterButtonOption[]>([]);\n\n /**\n * Whether the user should be allowed to clear the values.\n * Default: true.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() allowClear = true;\n\n /**\n * Whether the user should be allowed to select single or multiple values.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() singleSelection? = false;\n\n /**\n * The icon name to display.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n *\n **/\n\n @Input() iconName?: IconName;\n\n /**\n * The position of the icon.\n * Default: 'right'.\n *\n * @type {ButtonIconPosition}\n * @memberof FilterButtonComponent\n */\n @Input() iconPosition?: ButtonIconPosition = 'right';\n\n /**\n * Optional message to display if there are no options to select available\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() noOptionsMessage? = '';\n\n /**\n * Whether the button should stretch to fill its container, and the dropdown panel\n * follow that width instead of the default 240px.\n * The panel never shrinks below 240px, so a container narrower than that is safe.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input({ transform: booleanAttribute }) fullWidth = false;\n\n @Input() testId: string | null = null;\n\n @Input() ariaLabel = '';\n\n get panelTestId(): string | null {\n return this.testId ? `${this.testId}-panel` : null;\n }\n\n get resetButtonTestId(): string | null {\n return this.testId ? `${this.testId}-reset` : null;\n }\n\n /**\n * Emits the list of selected values when the selection changes.\n *\n * @type {EventEmitter<string[]>}\n * @memberof FilterButtonComponent\n */\n @Output() changed = new EventEmitter<FilterValue[]>();\n\n /**\n * Emits the option change event\n *\n * @type {EventEmitter<OptionChangeEvent>}\n * @memberof FilterButtonComponent\n */\n @Output() optionChange = new EventEmitter<OptionChangeEvent>();\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof FilterButtonComponent\n */\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n @HostBinding('class.ui-filter-button-full-width')\n get fullWidthClass(): boolean {\n return this.fullWidth;\n }\n\n @ViewChild('overlayContainer') overlayContainer: ElementRef<HTMLElement>;\n @ViewChild(CdkVirtualScrollViewport) viewport?: CdkVirtualScrollViewport;\n\n @ViewChild(CdkOverlayOrigin) private readonly triggerOrigin?: CdkOverlayOrigin;\n @ViewChild(CdkConnectedOverlay) private readonly connectedOverlay?: CdkConnectedOverlay;\n\n /** Must match the `.item` height in the SCSS — the fixed-size viewport relies on it. */\n readonly ITEM_SIZE = 48;\n readonly MAX_LIST_HEIGHT = 290;\n\n readonly PANEL_MIN_WIDTH = 240;\n\n readonly MATCH_TRIGGER_PANEL_CLASS = 'ui-filter-button-panel-match-trigger';\n\n isOpen = signal<boolean>(false);\n displayedLabel = signal<string>('');\n tooltip = signal<string>('');\n search = signal<string>('');\n activeIndex = signal<number>(0);\n showTooltip: { [key: string]: boolean } = {};\n displayedOptions = computed(() => {\n let lastSectionTitle: string;\n return this.options()\n .map(option => {\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty section title reuses the previous section\n lastSectionTitle = option.sectionTitle || lastSectionTitle;\n return { ...option, sectionTitle: lastSectionTitle };\n })\n .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));\n });\n\n // Section titles become their own rows so the fixed-size viewport can position every row with one `itemSize`.\n flatOptions = computed<FilterButtonRow[]>(() => {\n const rows: FilterButtonRow[] = [];\n let lastTitle: string | undefined;\n for (const option of this.displayedOptions()) {\n if (option.sectionTitle && option.sectionTitle !== lastTitle) {\n lastTitle = option.sectionTitle;\n rows.push({ kind: 'header', title: option.sectionTitle });\n }\n rows.push({ kind: 'option', option });\n }\n return rows;\n });\n\n optionCount = computed(() => this.displayedOptions().length);\n\n activeOption = computed<FilterButtonOption | undefined>(() => {\n const row = this.flatOptions()[this.activeIndex()];\n return row?.kind === 'option' ? row.option : undefined;\n });\n\n // 1-based position of the active option (headers excluded) for the aria-live announcement.\n activePosition = computed(() => {\n const rows = this.flatOptions();\n const activeIndex = this.activeIndex();\n let position = 0;\n for (let i = 0; i <= activeIndex && i < rows.length; i++) {\n if (rows[i].kind === 'option') {\n position++;\n }\n }\n return position;\n });\n\n listHeight = computed(() =>\n Math.min(Math.max(this.flatOptions().length * this.ITEM_SIZE, this.ITEM_SIZE), this.MAX_LIST_HEIGHT)\n );\n\n protected trackByRow = (_index: number, row: FilterButtonRow): string =>\n row.kind === 'header' ? `header:${row.title}` : `option:${row.option.value}`;\n\n readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;\n protected translationContext = 'FILTER_BUTTON.';\n private readonly searchInput$ = new Subject<string>();\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n private readonly cdr: ChangeDetectorRef,\n destroyRef: DestroyRef\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n\n this.searchInput$.pipe(debounceTime(150), takeUntilDestroyed(destroyRef)).subscribe(value => {\n this.search.set(value);\n this.activeIndex.set(this.firstOptionIndex());\n this.cdr.markForCheck();\n });\n\n toObservable(this.isOpen)\n .pipe(\n switchMap(open => (open && this.fullWidth ? fromEvent(window, 'resize').pipe(debounceTime(100)) : EMPTY)),\n takeUntilDestroyed(destroyRef)\n )\n .subscribe(() => this.syncPanelWidth());\n }\n\n private syncPanelWidth(): void {\n const overlayRef = this.connectedOverlay?.overlayRef;\n const trigger = this.triggerOrigin?.elementRef.nativeElement as HTMLElement | undefined;\n if (!overlayRef || !trigger) {\n return;\n }\n overlayRef.updateSize({ width: trigger.getBoundingClientRect().width });\n overlayRef.updatePosition();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['value']) {\n this.updateLabel();\n }\n }\n\n clearValue(): void {\n this.value = [];\n this.updateLabel();\n this.changed.emit(this.value);\n }\n\n outsideClick() {\n window.setTimeout(() => {\n this.isOpen.set(false);\n });\n }\n\n toggle(): void {\n this.isOpen.set(!this.isOpen());\n if (this.isOpen()) {\n this.activeIndex.set(this.firstOptionIndex());\n }\n this.cdr.markForCheck();\n }\n\n isSelected(value?: FilterValue) {\n return this.value?.includes(value ?? '');\n }\n\n optionChanged(selected: boolean, option: FilterButtonOption) {\n this.value = this.value || [];\n if (this.singleSelection) {\n this.value = selected ? [option.value] : [];\n } else {\n if (selected) {\n this.value.push(option.value);\n } else {\n this.value.splice(this.value.indexOf(option.value), 1);\n }\n }\n this.changed.emit(this.value);\n this.optionChange.emit({ selected, option });\n this.updateLabel();\n }\n\n onSearchChange(value: string): void {\n this.searchInput$.next(value);\n }\n\n keyDownHandler(ev: KeyboardEvent) {\n if (ev.key === (IKeyboardEvent.ARROW_DOWN as string)) {\n ev.preventDefault();\n this.moveActive(1);\n } else if (ev.key === (IKeyboardEvent.ARROW_UP as string)) {\n ev.preventDefault();\n this.moveActive(-1);\n } else if (ev.key === (IKeyboardEvent.ENTER as string) || ev.key === (IKeyboardEvent.SPACE as string)) {\n ev.preventDefault();\n this.toggleActiveOption();\n } else if (ev.key === (IKeyboardEvent.ESCAPE as string)) {\n this.isOpen.set(false);\n }\n }\n\n onLabelEllipsisChange(isEllipsis: boolean, value: FilterValue): void {\n this.showTooltip[value] = isEllipsis;\n }\n\n private firstOptionIndex(): number {\n const index = this.flatOptions().findIndex(row => row.kind === 'option');\n return index === -1 ? 0 : index;\n }\n\n private moveActive(delta: number): void {\n const rows = this.flatOptions();\n const optionIndexes: number[] = [];\n rows.forEach((row, index) => {\n if (row.kind === 'option') {\n optionIndexes.push(index);\n }\n });\n if (!optionIndexes.length) {\n return;\n }\n const currentPos = optionIndexes.indexOf(this.activeIndex());\n const basePos = currentPos === -1 ? 0 : currentPos;\n const nextPos = (basePos + delta + optionIndexes.length) % optionIndexes.length;\n const nextIndex = optionIndexes[nextPos];\n this.activeIndex.set(nextIndex);\n this.viewport?.scrollToIndex(nextIndex, 'smooth');\n }\n\n private toggleActiveOption(): void {\n const option = this.activeOption();\n if (option) {\n this.optionChanged(!this.isSelected(option.value), option);\n }\n }\n\n private updateLabel() {\n this.value = this.value || [];\n let displayedLabel = '';\n let tooltip = '';\n const sortedLabels = this.options()\n .filter(option => this.value.includes(option.value))\n .map(item => item?.label ?? '');\n\n if (sortedLabels.length > 0) {\n displayedLabel = this.options().find(option => option.value === this.value[0])?.label ?? '';\n tooltip = `${this.label}${sortedLabels.map(value => `\\n • ${value}`).join('')}`;\n }\n\n if (this.value.length > 1) {\n displayedLabel += ` (+${this.value.length - 1})`;\n }\n this.displayedLabel.set(displayedLabel);\n this.tooltip.set(tooltip);\n this.cdr.markForCheck();\n }\n}\n","<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [testId]=\"testId\"\n [ariaLabel]=\"ariaLabel\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"fullWidth\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayMatchWidth]=\"fullWidth\"\n [cdkConnectedOverlayMinWidth]=\"fullWidth ? PANEL_MIN_WIDTH : ''\"\n [cdkConnectedOverlayPanelClass]=\"fullWidth ? MATCH_TRIGGER_PANEL_CLASS : ''\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (activeOption(); as active) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ active.label }}\n {{\n translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ active.label }}\n {{\n (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer [attr.data-testid]=\"panelTestId\">\n @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n <div class=\"ui-filter-button-header\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onSearchChange($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n }\n <div\n class=\"ui-filter-button-list\"\n #list\n tabindex=\"0\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n (keydown)=\"keyDownHandler($event)\"\n >\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n class=\"ui-filter-button-viewport\"\n [itemSize]=\"ITEM_SIZE\"\n [style.height.px]=\"listHeight()\"\n >\n <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n @if (row.kind === 'header') {\n <div class=\"section-title\">\n {{ row.title }}\n </div>\n } @else {\n <div\n class=\"item\"\n role=\"option\"\n tabindex=\"-1\"\n [id]=\"'ui-fb-option-' + i\"\n [class.item-selected]=\"isSelected(row.option.value)\"\n [class.item-active]=\"activeIndex() === i\"\n [attr.aria-selected]=\"isSelected(row.option.value)\"\n (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n >\n @if (singleSelection) {\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n [tabIndex]=\"-1\"\n [selected]=\"isSelected(row.option.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n [applicationTheme]=\"applicationTheme\"\n >\n </ui-radio-button>\n }\n @if (!singleSelection) {\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n [tabIndex]=\"-1\"\n [checked]=\"isSelected(row.option.value)\"\n (changed)=\"optionChanged($event, row.option)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-checkbox>\n }\n @if (row.option.icon) {\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n }\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n [refresh]=\"row.option.value\"\n (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ row.option.label }}\n </span>\n @if (row.option.labelNumber !== undefined) {\n <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n }\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n @if (allowClear || message) {\n <div class=\"ui-filter-button-footer\">\n @if (allowClear) {\n <ui-button\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n [testId]=\"resetButtonTestId\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n }\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n }\n </div>\n </ng-template>\n</ng-container>\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';\nimport { EllipseTextDirective, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\n\nimport { FilterButtonComponent } from './filter-button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n MatTooltipModule,\n OverlayModule,\n UiTranslatePipe,\n ButtonComponentModule,\n IconComponentModule,\n CheckboxComponentModule,\n FieldComponentModule,\n EllipseTextDirective,\n RadioButtonComponentModule,\n FilterButtonComponent,\n ],\n exports: [FilterButtonComponent],\n})\nexport class FilterButtonComponentModule {}\n"],"mappings":"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"}
|
|
@@ -352,7 +352,7 @@ var SliderComponent = class SliderComponent {
|
|
|
352
352
|
isSignal: true
|
|
353
353
|
}],
|
|
354
354
|
ngImport: i0,
|
|
355
|
-
template: "<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [discrete]=\"isDiscrete()\"\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"onSliderHover(true)\"\n (mouseleave)=\"onSliderHover(false)\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input\n [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [(ngModel)]=\"sliderStart\"\n (ngModelChange)=\"onDragMove($event)\"\n matSliderThumb\n />\n } @else {\n <input\n [attr.data-testid]=\"startThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n matSliderStartThumb\n />\n <input\n [attr.data-testid]=\"endThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n matSliderEndThumb\n />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [attr.data-testid]=\"endInputTestId\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n [attr.data-testid]=\"endInputTestId\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n",
|
|
355
|
+
template: "<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [discrete]=\"isDiscrete()\"\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"onSliderHover(true)\"\n (mouseleave)=\"onSliderHover(false)\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input\n [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onDragMove($event)\"\n matSliderThumb\n />\n } @else {\n <input\n [attr.data-testid]=\"startThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n matSliderStartThumb\n />\n <input\n [attr.data-testid]=\"endThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n matSliderEndThumb\n />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [attr.data-testid]=\"endInputTestId\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n [attr.data-testid]=\"endInputTestId\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n",
|
|
356
356
|
styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"],
|
|
357
357
|
dependencies: [
|
|
358
358
|
{
|
|
@@ -595,7 +595,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
595
595
|
UiTranslatePipe,
|
|
596
596
|
NgxMaskDirective
|
|
597
597
|
],
|
|
598
|
-
template: "<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [discrete]=\"isDiscrete()\"\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"onSliderHover(true)\"\n (mouseleave)=\"onSliderHover(false)\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input\n [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [(ngModel)]=\"sliderStart\"\n (ngModelChange)=\"onDragMove($event)\"\n matSliderThumb\n />\n } @else {\n <input\n [attr.data-testid]=\"startThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n matSliderStartThumb\n />\n <input\n [attr.data-testid]=\"endThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n matSliderEndThumb\n />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [attr.data-testid]=\"endInputTestId\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n [attr.data-testid]=\"endInputTestId\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n",
|
|
598
|
+
template: "<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [discrete]=\"isDiscrete()\"\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"onSliderHover(true)\"\n (mouseleave)=\"onSliderHover(false)\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input\n [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onDragMove($event)\"\n matSliderThumb\n />\n } @else {\n <input\n [attr.data-testid]=\"startThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n matSliderStartThumb\n />\n <input\n [attr.data-testid]=\"endThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n matSliderEndThumb\n />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [attr.data-testid]=\"endInputTestId\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n [attr.data-testid]=\"endInputTestId\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n",
|
|
599
599
|
styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"]
|
|
600
600
|
}]
|
|
601
601
|
}],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","names":[],"sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n afterNextRender,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Inject,\n input,\n Input,\n Optional,\n NgZone,\n output,\n Output,\n signal,\n viewChild,\n} from '@angular/core';\nimport {\n AbstractControl,\n FormsModule,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSlider, MatSliderDragEvent, MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n@Component({\n selector: 'ui-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SliderComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => SliderComponent),\n multi: true,\n },\n provideNgxMask(),\n DecimalPipe,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n CommonModule,\n MatSliderModule,\n FormsModule,\n MatInputModule,\n MatTooltipModule,\n IconComponentModule,\n UiTranslatePipe,\n NgxMaskDirective,\n ],\n})\nexport class SliderComponent implements Validator {\n /**\n * The maximum value of the slider.\n *\n * @type {number}\n * @default 100\n */\n @Input() max = 100;\n\n /**\n * The minimum value of the slider.\n *\n * @type {number}\n * @default 0\n */\n @Input() min = 0;\n\n /**\n * A flag indicating whether the slider displays values as percentages.\n *\n * @type {boolean}\n * @default true\n */\n @Input() percentage = false;\n\n /**\n * A flag indicating whether the slider is disabled.\n *\n * @type {boolean}\n * @default true\n */\n @Input() disabled = false;\n\n /**\n * The starting value of the slider.\n *\n * @type {number}\n * @default 0\n */\n @Input() sliderStart = 0;\n\n /**\n * The ending value of the slider.\n *\n * @type {number}\n * @default 100\n */\n @Input() sliderEnd = 100;\n\n /**\n * The label for the slider.\n *\n * @type {string}\n * @default ''\n */\n @Input() label = '';\n\n /**\n * Show slider inputs.\n *\n * @type {boolean}\n * @default true\n */\n @Input() showInputs = true;\n\n /**\n * Step number.\n *\n * @type {number}\n * @default 1\n */\n @Input() step = 1;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof SliderComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n *\n * Defines the variant slider\n *\n * @type {SliderVariant}\n * @memberof SliderComponent\n */\n @Input() variant: SliderVariant = 'range';\n\n @Input() testId: string | null = null;\n\n get startThumbTestId(): string {\n return this.testId ? `${this.testId}-start` : 'slider-start-thumb';\n }\n\n get endThumbTestId(): string {\n return this.testId ? `${this.testId}-end` : 'slider-end-thumb';\n }\n\n get startInputTestId(): string {\n return this.testId ? `${this.testId}-input-start` : 'slider.input-start';\n }\n\n get endInputTestId(): string {\n return this.testId ? `${this.testId}-input-end` : 'slider.input-end';\n }\n\n /**\n * Controls whether decimal values are allowed in the input fields.\n * When true, inputs accept decimal numbers (up to 2 decimal places).\n * When false, inputs only accept whole numbers.\n */\n useDecimal = input<boolean>(false);\n\n /**\n * Controls whether numbers are displayed with thousands separators.\n * When true, displays numbers like \"100,000\" instead of \"100000\".\n * This is independent of useDecimal - you can have thousands separators\n * without decimals, or decimals without thousands separators.\n */\n useThousandsSeparator = input<boolean>(false);\n\n minLabel = input<string>();\n\n maxLabel = input<string>();\n\n inputWidth = input(80);\n\n /**\n * Controls whether the value bubble pops above the thumb on hover and while dragging.\n * Set it to false for scrubber-style sliders whose designs do not show one.\n * Applies to both the basic and the range variant.\n */\n showValueBubble = input(true, { transform: booleanAttribute });\n\n @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n /**\n * Emitted with the current value when the user starts dragging the thumb.\n * Basic variant only, and never emitted for programmatic value writes, so a consumer\n * that also drives the slider on a timer can tell a user drag apart from its own write.\n */\n dragStart = output<number>();\n\n /**\n * Emitted with the released value when the user stops dragging the thumb.\n * Basic variant only. See {@link dragStart}.\n */\n dragEnd = output<number>();\n\n /**\n * Emitted with the thumb's current value on every move while the user is dragging it.\n * Basic variant only, and pointer drag only: keyboard seeks and programmatic writes never\n * emit it and keep arriving through `sliderValueChange`. See {@link dragStart}.\n */\n dragMove = output<number>();\n\n // Keyboard seeks and writeValue also update ngModel, so only a live pointer drag may emit dragMove.\n private isDragging = false;\n\n /**\n * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.\n * Starts true to keep the at-rest markup identical to what the component shipped before\n * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and\n * unmounting it changes how the disabled slider's opacity layer rasterises its text.\n */\n private readonly isHovered = signal(true);\n\n /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */\n protected readonly isDiscrete = computed(() => this.showValueBubble() && this.isHovered());\n\n cdr = inject(ChangeDetectorRef);\n decimalPipe = inject(DecimalPipe);\n private control?: AbstractControl;\n private readonly destroyRef = inject(DestroyRef);\n private readonly ngZone = inject(NgZone);\n\n private readonly matSlider = viewChild(MatSlider);\n private readonly matSliderElement = viewChild(MatSlider, { read: ElementRef });\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n this.cdr.markForCheck();\n }\n this.formatLabel = this.formatLabel.bind(this);\n // Runs after MatSlider has created its own observer, and only in the browser.\n afterNextRender(() => this.observeRangeResize());\n }\n\n /**\n * Works around MatSlider's resize handling for the range variant. On a resize, `_onResize()`\n * repositions the end thumb before the start thumb, and clamps the end thumb so it cannot sit\n * left of the start thumb's position — which at that point is still the pre-resize one. When the\n * slider shrinks to under about half its width, the end thumb is clamped to that stale position\n * and stays there, because nothing repositions it afterwards. Running the resize step once more,\n * after Material's own observer, places the end thumb against the start thumb's new position.\n * Growing the slider never clamps, so the extra pass is a no-op there.\n */\n private observeRangeResize(): void {\n const host = this.matSliderElement()?.nativeElement as HTMLElement | undefined;\n if (!host || typeof ResizeObserver === 'undefined') {\n return;\n }\n\n // Created after MatSlider's own observer (afterNextRender runs once its view has initialised), and ResizeObserver\n // delivers to observers in creation order, so this always runs after Material's pass.\n const observer = this.ngZone.runOutsideAngular(\n () =>\n new ResizeObserver(() => {\n // A single thumb has no sibling to clamp against. Checked here, as `variant` can change later.\n if (this.isBasicSlider) {\n return;\n }\n const slider = this.matSlider() as unknown as\n | { _onResize?: () => void; _isActive?: () => boolean }\n | undefined;\n /* eslint-disable no-underscore-dangle -- MatSlider internals: _onResize repositions the thumbs, _isActive reports a drag */\n // Material skips resizes mid-drag too; repositioning a thumb under the pointer would make it jump.\n if (slider?._isActive?.()) {\n return;\n }\n slider?._onResize?.();\n /* eslint-enable no-underscore-dangle */\n })\n );\n observer.observe(host);\n this.destroyRef.onDestroy(() => observer.disconnect());\n }\n\n private value: SliderValue = { start: 0, end: 100 };\n protected translationContext = 'SLIDER.';\n protected touchedControlName = '';\n\n onChange: (value: SliderValue) => void = () => {};\n onTouch: () => void = () => {};\n\n registerOnChange(fn: (value: SliderValue) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n writeValue(value: SliderValue): void {\n this.value = value;\n this.sliderEnd = value.end;\n this.cdr.markForCheck();\n // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n setTimeout(() => {\n this.sliderStart = value.start;\n this.cdr.markForCheck();\n if (this.control) {\n this.control.updateValueAndValidity({ emitEvent: false });\n }\n });\n }\n\n protected onValueChange(ev?: number): void {\n const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n if (ev) {\n value.start = ev;\n value.end = 0;\n }\n\n this.value = value;\n this.onChange(value);\n this.sliderValueChange.emit(value);\n this.cdr.markForCheck();\n this.onTouch();\n }\n\n protected onSliderHover(isHovered: boolean): void {\n this.isHovered.set(isHovered);\n }\n\n protected onDragStart(event: MatSliderDragEvent): void {\n this.isDragging = true;\n this.dragStart.emit(event.value);\n }\n\n protected onDragMove(value: number): void {\n if (this.isDragging) {\n this.dragMove.emit(value);\n }\n }\n\n protected onDragEnd(event: MatSliderDragEvent): void {\n this.isDragging = false;\n this.dragEnd.emit(event.value);\n }\n\n protected onInputBlur(inputName: string): void {\n this.touchedControlName = inputName;\n const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n if (this.isValueChanged(value)) {\n this.onValueChange();\n }\n }\n\n protected onInputFocus(): void {\n this.touchedControlName = '';\n this.cdr.markForCheck();\n }\n\n private isValueChanged(value: SliderValue): boolean {\n return this.value.start !== value.start || this.value.end !== value.end;\n }\n\n get hasError(): boolean {\n return (\n this.max < Number(this.sliderEnd) ||\n this.min > Number(this.sliderStart) ||\n this.min > Number(this.sliderEnd) ||\n this.max < Number(this.sliderStart) ||\n Number(this.sliderEnd) < Number(this.sliderStart)\n );\n }\n\n get isBasicSlider(): boolean {\n return this.variant === 'basic';\n }\n\n formatLabel(value: number): string {\n return this.useThousandsSeparator()\n ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n : value.toString();\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n this.control = control;\n return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n }\n}\n","<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [discrete]=\"isDiscrete()\"\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"onSliderHover(true)\"\n (mouseleave)=\"onSliderHover(false)\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input\n [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [(ngModel)]=\"sliderStart\"\n (ngModelChange)=\"onDragMove($event)\"\n matSliderThumb\n />\n } @else {\n <input\n [attr.data-testid]=\"startThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n matSliderStartThumb\n />\n <input\n [attr.data-testid]=\"endThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n matSliderEndThumb\n />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [attr.data-testid]=\"endInputTestId\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n [attr.data-testid]=\"endInputTestId\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n imports: [SliderComponent],\n exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n"],"mappings":";;;;;;;;;;;;;;;AAuEA,IAAa,kBAAb,MAAa,gBAAe;CA6F1B,IAAI,mBAAgB;EAClB,OAAO,KAAK,SAAS,GAAG,KAAK,OAAM,UAAW;CAChD;CAEA,IAAI,iBAAc;EAChB,OAAO,KAAK,SAAS,GAAG,KAAK,OAAM,QAAS;CAC9C;CAEA,IAAI,mBAAgB;EAClB,OAAO,KAAK,SAAS,GAAG,KAAK,OAAM,gBAAiB;CACtD;CAEA,IAAI,iBAAc;EAChB,OAAO,KAAK,SAAS,GAAG,KAAK,OAAM,cAAe;CACpD;CA2EA,YAC6E,iBAAiC;EAAjC,KAAA,kBAAA;EAhLpE,KAAA,MAAM;EAQN,KAAA,MAAM;EAQN,KAAA,aAAa;EAQb,KAAA,WAAW;EAQX,KAAA,cAAc;EAQd,KAAA,YAAY;EAQZ,KAAA,QAAQ;EAQR,KAAA,aAAa;EAQb,KAAA,OAAO;EASP,KAAA,mBAAqC;EASrC,KAAA,UAAyB;EAEzB,KAAA,SAAwB;EAuBjC,KAAA,aAAa,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EAQlC,KAAA,wBAAwB,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,wBAAA,CAAA,+BAAA,CAAA,CAAA;EAE7C,KAAA,WAAW,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;EAE1B,KAAA,WAAW,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;EAE1B,KAAA,aAAa,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EAOtB,KAAA,kBAAkB,MAAM,MAAI;GAAA,GAAA,YAAA,EAAA,WAAA,kBAAA,+BAAA,CAAA;GAAI,WAAW;EAAgB,CAAA;EAEjD,KAAA,oBAAoB,IAAI,aAAY;EAO9C,KAAA,YAAY,OAAM;EAMlB,KAAA,UAAU,OAAM;EAOhB,KAAA,WAAW,OAAM;EAGT,KAAA,aAAa;EAQJ,KAAA,YAAY,OAAO,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAGtB,KAAA,aAAa,eAAe,KAAK,gBAAe,KAAM,KAAK,UAAS,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EAE1F,KAAA,MAAM,OAAO,iBAAiB;EAC9B,KAAA,cAAc,OAAO,WAAW;EAEf,KAAA,aAAa,OAAO,UAAU;EAC9B,KAAA,SAAS,OAAO,MAAM;EAEtB,KAAA,YAAY,UAAU,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAChC,KAAA,mBAAmB,UAAU,WAAS;GAAA,GAAA,YAAA,EAAA,WAAA,mBAAA,+BAAA,CAAA;GAAI,MAAM;EAAU,CAAA;EAsDnE,KAAA,QAAqB;GAAE,OAAO;GAAG,KAAK;EAAG;EACvC,KAAA,qBAAqB;EACrB,KAAA,qBAAqB;EAE/B,KAAA,iBAA8C,CAAE;EAChD,KAAA,gBAA2B,CAAE;EAtD3B,IAAI,iBAAiB;GACnB,KAAK,mBAAmB;GACxB,KAAK,IAAI,aAAY;EACvB;EACA,KAAK,cAAc,KAAK,YAAY,KAAK,IAAI;EAE7C,sBAAsB,KAAK,mBAAkB,CAAE;CACjD;CAWQ,qBAAkB;EACxB,MAAM,OAAO,KAAK,iBAAgB,CAAE,EAAE;EACtC,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aACrC;EAKF,MAAM,WAAW,KAAK,OAAO,wBAEzB,IAAI,qBAAoB;GAEtB,IAAI,KAAK,eACP;GAEF,MAAM,SAAS,KAAK,UAAS;GAK7B,IAAI,QAAQ,YAAW,GACrB;GAEF,QAAQ,YAAW;EAErB,CAAC,CAAC;EAEN,SAAS,QAAQ,IAAI;EACrB,KAAK,WAAW,gBAAgB,SAAS,WAAU,CAAE;CACvD;CASA,iBAAiB,IAAgC;EAC/C,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,UAAU;CACjB;CAEA,iBAAiB,YAAmB;EAClC,KAAK,WAAW;EAChB,KAAK,IAAI,aAAY;CACvB;CAEA,WAAW,OAAkB;EAC3B,KAAK,QAAQ;EACb,KAAK,YAAY,MAAM;EACvB,KAAK,IAAI,aAAY;EAErB,iBAAgB;GACd,KAAK,cAAc,MAAM;GACzB,KAAK,IAAI,aAAY;GACrB,IAAI,KAAK,SACP,KAAK,QAAQ,uBAAuB,EAAE,WAAW,MAAK,CAAE;EAE5D,CAAC;CACH;CAEU,cAAc,IAAW;EACjC,MAAM,QAAqB;GAAE,OAAO,OAAO,KAAK,WAAW;GAAG,KAAK,OAAO,KAAK,SAAS;EAAC;EAEzF,IAAI,IAAI;GACN,MAAM,QAAQ;GACd,MAAM,MAAM;EACd;EAEA,KAAK,QAAQ;EACb,KAAK,SAAS,KAAK;EACnB,KAAK,kBAAkB,KAAK,KAAK;EACjC,KAAK,IAAI,aAAY;EACrB,KAAK,QAAO;CACd;CAEU,cAAc,WAAkB;EACxC,KAAK,UAAU,IAAI,SAAS;CAC9B;CAEU,YAAY,OAAyB;EAC7C,KAAK,aAAa;EAClB,KAAK,UAAU,KAAK,MAAM,KAAK;CACjC;CAEU,WAAW,OAAa;EAChC,IAAI,KAAK,YACP,KAAK,SAAS,KAAK,KAAK;CAE5B;CAEU,UAAU,OAAyB;EAC3C,KAAK,aAAa;EAClB,KAAK,QAAQ,KAAK,MAAM,KAAK;CAC/B;CAEU,YAAY,WAAiB;EACrC,KAAK,qBAAqB;EAC1B,MAAM,QAAqB;GAAE,OAAO,OAAO,KAAK,WAAW;GAAG,KAAK,OAAO,KAAK,SAAS;EAAC;EAEzF,IAAI,KAAK,eAAe,KAAK,GAC3B,KAAK,cAAa;CAEtB;CAEU,eAAY;EACpB,KAAK,qBAAqB;EAC1B,KAAK,IAAI,aAAY;CACvB;CAEQ,eAAe,OAAkB;EACvC,OAAO,KAAK,MAAM,UAAU,MAAM,SAAS,KAAK,MAAM,QAAQ,MAAM;CACtE;CAEA,IAAI,WAAQ;EACV,OACE,KAAK,MAAM,OAAO,KAAK,SAAS,KAChC,KAAK,MAAM,OAAO,KAAK,WAAW,KAClC,KAAK,MAAM,OAAO,KAAK,SAAS,KAChC,KAAK,MAAM,OAAO,KAAK,WAAW,KAClC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,WAAW;CAEpD;CAEA,IAAI,gBAAa;EACf,OAAO,KAAK,YAAY;CAC1B;CAEA,YAAY,OAAa;EACvB,OAAO,KAAK,sBAAqB,IAC5B,KAAK,YAAY,UAAU,OAAO,OAAO,KAAK,MAAM,SAAQ,IAC7D,MAAM,SAAQ;CACpB;CAEA,SAAS,SAAwB;EAC/B,KAAK,UAAU;EACf,OAAO,KAAK,YAAY,KAAK,qBAAqB,EAAE,eAAe,KAAI,IAAK;CAC9E;CAxVW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,MAAA,CAAA;IAAA,OAuLJ;IAAoC,UAAA;GAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAvL/C;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAe,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,KAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,KAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,YAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,UAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,aAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,YAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,MAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,kBAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,SAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,QAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,YAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,uBAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,UAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,UAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,YAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,iBAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,WAAA;IAAA,SAAA;IAAA,UAAA;GAAA;GAAA,WA1Bf;IACT;KACE,SAAS;KACT,aAAa,iBAAiB,eAAe;KAC7C,OAAO;IACR;IACD;KACE,SAAS;KACT,aAAa,iBAAiB,eAAe;KAC7C,OAAO;IACR;IACD,eAAc;IACd;GACD;GAAA,aAAA,CAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WAgMsC;IAAS,aAAA;IAAA,UAAA;GAAA,GAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WACF;IAAS,aAAA;IAAA,MAAU;IAAU,UAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UC3P7E;GA+MA,QAAA,CAAA,2qRAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDlJI;IAAY;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA,CAAA,SAAA,SAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA,CAAA,SAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACZ;IAAe;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,UAAA,CAAA,WAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA,CAAA,OAAA;KAAA,SAAA;MAAA;MAAA;MAAA;KAAA;KAAA,UAAA,CAAA,gBAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,UAAA,CAAA,qBAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACf;IAAW;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,SAAA,CAAA,eAAA;KAAA,UAAA,CAAA,SAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACX;IAAc;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,UAAA,CAAA,UAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,UAAA,CAAA,cAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA,CAAA,IAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;IAAgB;IAAA;KAAA,MAAA;KAAA,MAChB;IAAmB;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAEnB;KAAgB,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,SAAA,CAAA,YAAA;KAAA,UAAA,CAAA,QAAA,SAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,MAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,MAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MADhB;KAAe,MAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAIN,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EA9B3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,WAGV;IACT;KACE,SAAS;KACT,aAAa,iBAAgB,eAAgB;KAC7C,OAAO;IACR;IACD;KACE,SAAS;KACT,aAAa,iBAAgB,eAAgB;KAC7C,OAAO;IACR;IACD,eAAc;IACd;GACD;GAAA,iBACgB,wBAAwB;GAAM,SACtC;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACD;GAAA,UAAA;GAAA,QAAA,CAAA,2qRAAA;EAAA,CAAA;;;;E,eAyLE,MAAA,S;GAAY,MAAA;GAAO,MAAA,CAAA,oCAAoC;;;;E,QAhLzD,MAAA,M;E,QAQA,MAAA,M;E,eAQA,MAAA,M;E,aAQA,MAAA,M;E,gBAQA,MAAA,M;E,cAQA,MAAA,M;E,UAQA,MAAA,M;E,eAQA,MAAA,M;E,SAQA,MAAA,M;E,qBASA,MAAA,M;E,YASA,MAAA,M;E,WAEA,MAAA,M;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;E,sBA8CA,MAAA,OA0CsC,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,SAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,UAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAAA,SAAS,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,kBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBACF,SAAS,GAAA;IAAI,MAAM;IAAY,UAAA;GAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA;AEnP/E,IAAa,wBAAb,MAAa,sBAAqB;CAArB;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAqB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAArB;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAqB,SAAA,CAHtB,eAAe;GAAA,SAAA,CACf,eAAe;EAAA,CAAA;CAAA;CAEd;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAqB,SAAA,CAHtB,eAAe;EAAA,CAAA;CAAA;;AAGd,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAJjC,MAAA;EAAS,MAAA,CAAA;GACR,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;EAC1B,CAAA"}
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","names":[],"sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n afterNextRender,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Inject,\n input,\n Input,\n Optional,\n NgZone,\n output,\n Output,\n signal,\n viewChild,\n} from '@angular/core';\nimport {\n AbstractControl,\n FormsModule,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSlider, MatSliderDragEvent, MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n@Component({\n selector: 'ui-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SliderComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => SliderComponent),\n multi: true,\n },\n provideNgxMask(),\n DecimalPipe,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n CommonModule,\n MatSliderModule,\n FormsModule,\n MatInputModule,\n MatTooltipModule,\n IconComponentModule,\n UiTranslatePipe,\n NgxMaskDirective,\n ],\n})\nexport class SliderComponent implements Validator {\n /**\n * The maximum value of the slider.\n *\n * @type {number}\n * @default 100\n */\n @Input() max = 100;\n\n /**\n * The minimum value of the slider.\n *\n * @type {number}\n * @default 0\n */\n @Input() min = 0;\n\n /**\n * A flag indicating whether the slider displays values as percentages.\n *\n * @type {boolean}\n * @default true\n */\n @Input() percentage = false;\n\n /**\n * A flag indicating whether the slider is disabled.\n *\n * @type {boolean}\n * @default true\n */\n @Input() disabled = false;\n\n /**\n * The starting value of the slider.\n *\n * @type {number}\n * @default 0\n */\n @Input() sliderStart = 0;\n\n /**\n * The ending value of the slider.\n *\n * @type {number}\n * @default 100\n */\n @Input() sliderEnd = 100;\n\n /**\n * The label for the slider.\n *\n * @type {string}\n * @default ''\n */\n @Input() label = '';\n\n /**\n * Show slider inputs.\n *\n * @type {boolean}\n * @default true\n */\n @Input() showInputs = true;\n\n /**\n * Step number.\n *\n * @type {number}\n * @default 1\n */\n @Input() step = 1;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof SliderComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n *\n * Defines the variant slider\n *\n * @type {SliderVariant}\n * @memberof SliderComponent\n */\n @Input() variant: SliderVariant = 'range';\n\n @Input() testId: string | null = null;\n\n get startThumbTestId(): string {\n return this.testId ? `${this.testId}-start` : 'slider-start-thumb';\n }\n\n get endThumbTestId(): string {\n return this.testId ? `${this.testId}-end` : 'slider-end-thumb';\n }\n\n get startInputTestId(): string {\n return this.testId ? `${this.testId}-input-start` : 'slider.input-start';\n }\n\n get endInputTestId(): string {\n return this.testId ? `${this.testId}-input-end` : 'slider.input-end';\n }\n\n /**\n * Controls whether decimal values are allowed in the input fields.\n * When true, inputs accept decimal numbers (up to 2 decimal places).\n * When false, inputs only accept whole numbers.\n */\n useDecimal = input<boolean>(false);\n\n /**\n * Controls whether numbers are displayed with thousands separators.\n * When true, displays numbers like \"100,000\" instead of \"100000\".\n * This is independent of useDecimal - you can have thousands separators\n * without decimals, or decimals without thousands separators.\n */\n useThousandsSeparator = input<boolean>(false);\n\n minLabel = input<string>();\n\n maxLabel = input<string>();\n\n inputWidth = input(80);\n\n /**\n * Controls whether the value bubble pops above the thumb on hover and while dragging.\n * Set it to false for scrubber-style sliders whose designs do not show one.\n * Applies to both the basic and the range variant.\n */\n showValueBubble = input(true, { transform: booleanAttribute });\n\n @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n /**\n * Emitted with the current value when the user starts dragging the thumb.\n * Basic variant only, and never emitted for programmatic value writes, so a consumer\n * that also drives the slider on a timer can tell a user drag apart from its own write.\n */\n dragStart = output<number>();\n\n /**\n * Emitted with the released value when the user stops dragging the thumb.\n * Basic variant only. See {@link dragStart}.\n */\n dragEnd = output<number>();\n\n /**\n * Emitted with the thumb's current value on every move while the user is dragging it.\n * Basic variant only, and pointer drag only: keyboard seeks and programmatic writes never\n * emit it and keep arriving through `sliderValueChange`. See {@link dragStart}.\n */\n dragMove = output<number>();\n\n // Keyboard seeks and writeValue also update ngModel, so only a live pointer drag may emit dragMove.\n private isDragging = false;\n\n /**\n * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.\n * Starts true to keep the at-rest markup identical to what the component shipped before\n * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and\n * unmounting it changes how the disabled slider's opacity layer rasterises its text.\n */\n private readonly isHovered = signal(true);\n\n /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */\n protected readonly isDiscrete = computed(() => this.showValueBubble() && this.isHovered());\n\n cdr = inject(ChangeDetectorRef);\n decimalPipe = inject(DecimalPipe);\n private control?: AbstractControl;\n private readonly destroyRef = inject(DestroyRef);\n private readonly ngZone = inject(NgZone);\n\n private readonly matSlider = viewChild(MatSlider);\n private readonly matSliderElement = viewChild(MatSlider, { read: ElementRef });\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n this.cdr.markForCheck();\n }\n this.formatLabel = this.formatLabel.bind(this);\n // Runs after MatSlider has created its own observer, and only in the browser.\n afterNextRender(() => this.observeRangeResize());\n }\n\n /**\n * Works around MatSlider's resize handling for the range variant. On a resize, `_onResize()`\n * repositions the end thumb before the start thumb, and clamps the end thumb so it cannot sit\n * left of the start thumb's position — which at that point is still the pre-resize one. When the\n * slider shrinks to under about half its width, the end thumb is clamped to that stale position\n * and stays there, because nothing repositions it afterwards. Running the resize step once more,\n * after Material's own observer, places the end thumb against the start thumb's new position.\n * Growing the slider never clamps, so the extra pass is a no-op there.\n */\n private observeRangeResize(): void {\n const host = this.matSliderElement()?.nativeElement as HTMLElement | undefined;\n if (!host || typeof ResizeObserver === 'undefined') {\n return;\n }\n\n // Created after MatSlider's own observer (afterNextRender runs once its view has initialised), and ResizeObserver\n // delivers to observers in creation order, so this always runs after Material's pass.\n const observer = this.ngZone.runOutsideAngular(\n () =>\n new ResizeObserver(() => {\n // A single thumb has no sibling to clamp against. Checked here, as `variant` can change later.\n if (this.isBasicSlider) {\n return;\n }\n const slider = this.matSlider() as unknown as\n | { _onResize?: () => void; _isActive?: () => boolean }\n | undefined;\n /* eslint-disable no-underscore-dangle -- MatSlider internals: _onResize repositions the thumbs, _isActive reports a drag */\n // Material skips resizes mid-drag too; repositioning a thumb under the pointer would make it jump.\n if (slider?._isActive?.()) {\n return;\n }\n slider?._onResize?.();\n /* eslint-enable no-underscore-dangle */\n })\n );\n observer.observe(host);\n this.destroyRef.onDestroy(() => observer.disconnect());\n }\n\n private value: SliderValue = { start: 0, end: 100 };\n protected translationContext = 'SLIDER.';\n protected touchedControlName = '';\n\n onChange: (value: SliderValue) => void = () => {};\n onTouch: () => void = () => {};\n\n registerOnChange(fn: (value: SliderValue) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n writeValue(value: SliderValue): void {\n this.value = value;\n this.sliderEnd = value.end;\n this.cdr.markForCheck();\n // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n setTimeout(() => {\n this.sliderStart = value.start;\n this.cdr.markForCheck();\n if (this.control) {\n this.control.updateValueAndValidity({ emitEvent: false });\n }\n });\n }\n\n protected onValueChange(ev?: number): void {\n const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n if (ev) {\n value.start = ev;\n value.end = 0;\n }\n\n this.value = value;\n this.onChange(value);\n this.sliderValueChange.emit(value);\n this.cdr.markForCheck();\n this.onTouch();\n }\n\n protected onSliderHover(isHovered: boolean): void {\n this.isHovered.set(isHovered);\n }\n\n protected onDragStart(event: MatSliderDragEvent): void {\n this.isDragging = true;\n this.dragStart.emit(event.value);\n }\n\n protected onDragMove(value: number): void {\n if (this.isDragging) {\n this.dragMove.emit(value);\n }\n }\n\n protected onDragEnd(event: MatSliderDragEvent): void {\n this.isDragging = false;\n this.dragEnd.emit(event.value);\n }\n\n protected onInputBlur(inputName: string): void {\n this.touchedControlName = inputName;\n const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n if (this.isValueChanged(value)) {\n this.onValueChange();\n }\n }\n\n protected onInputFocus(): void {\n this.touchedControlName = '';\n this.cdr.markForCheck();\n }\n\n private isValueChanged(value: SliderValue): boolean {\n return this.value.start !== value.start || this.value.end !== value.end;\n }\n\n get hasError(): boolean {\n return (\n this.max < Number(this.sliderEnd) ||\n this.min > Number(this.sliderStart) ||\n this.min > Number(this.sliderEnd) ||\n this.max < Number(this.sliderStart) ||\n Number(this.sliderEnd) < Number(this.sliderStart)\n );\n }\n\n get isBasicSlider(): boolean {\n return this.variant === 'basic';\n }\n\n formatLabel(value: number): string {\n return this.useThousandsSeparator()\n ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n : value.toString();\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n this.control = control;\n return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n }\n}\n","<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [discrete]=\"isDiscrete()\"\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"onSliderHover(true)\"\n (mouseleave)=\"onSliderHover(false)\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input\n [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n (dragStart)=\"onDragStart($event)\"\n (dragEnd)=\"onDragEnd($event)\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onDragMove($event)\"\n matSliderThumb\n />\n } @else {\n <input\n [attr.data-testid]=\"startThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n matSliderStartThumb\n />\n <input\n [attr.data-testid]=\"endThumbTestId\"\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n matSliderEndThumb\n />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n [attr.data-testid]=\"startInputTestId\"\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [ngModelOptions]=\"{ standalone: true }\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [attr.data-testid]=\"endInputTestId\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n [ngModelOptions]=\"{ standalone: true }\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n [attr.data-testid]=\"endInputTestId\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n imports: [SliderComponent],\n exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n"],"mappings":"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"}
|
|
@@ -513,7 +513,7 @@ var WriteWithAiComponent = class WriteWithAiComponent {
|
|
|
513
513
|
isSignal: true
|
|
514
514
|
}],
|
|
515
515
|
ngImport: i0,
|
|
516
|
-
template: "<div\n class=\"write-with-ai\"\n [class.write-with-ai--standalone]=\"standalone()\"\n [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n @if (!standalone()) {\n <div class=\"write-with-ai__host\">\n <ui-field\n [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n type=\"textarea\"\n [showBottomContent]=\"false\"\n [fullHeight]=\"fullHeight()\"\n [borderless]=\"borderless()\"\n [disabled]=\"cvaDisabled()\"\n [ngModel]=\"effectiveValue()\"\n (ngModelChange)=\"handleValueInput($event)\"\n ></ui-field>\n <ui-button\n class=\"write-with-ai__cta\"\n variant=\"ghost-ai\"\n size=\"small\"\n [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n iconName=\"Sparkle-in-line\"\n iconPosition=\"left\"\n [disabled]=\"isPanelVisible() || cvaDisabled()\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n </div>\n }\n\n @if (isPanelVisible()) {\n <section\n class=\"write-with-ai__panel\"\n [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n role=\"region\"\n [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n >\n <header class=\"write-with-ai__panel-header\">\n <div class=\"write-with-ai__panel-heading\">\n <div class=\"write-with-ai__title-row\">\n @if (effectiveStatus() !== 'loading') {\n <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n }\n <h4 class=\"write-with-ai__title\">\n {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n </h4>\n </div>\n @if (subheader()) {\n <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n }\n </div>\n @if (!standalone()) {\n <ui-button\n variant=\"icon-button\"\n iconName=\"Close\"\n size=\"small\"\n [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n }\n </header>\n\n @if (effectiveStatus() === 'idle') {\n @if (tagsOnly()) {\n @if (tags().length) {\n <div class=\"write-with-ai__tags-prompt\">\n <div\n class=\"write-with-ai__tags-container\"\n role=\"group\"\n [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n #tagsScrollContainer\n (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n >\n @for (tag of tags(); track tag.id) {\n <ui-tag\n [label]=\"tag.label\"\n [ariaLabel]=\"tag.label\"\n [isDisabled]=\"cvaDisabled()\"\n (press)=\"handleTagClick(tag)\"\n ></ui-tag>\n }\n </div>\n <div class=\"write-with-ai__tags-arrows\">\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-left-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n ></ui-button>\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-right-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n ></ui-button>\n </div>\n </div>\n }\n } @else {\n <div class=\"write-with-ai__prompt\">\n <ui-prompt\n [ngModel]=\"promptModelData()\"\n (ngModelChange)=\"handlePromptModelChange($event)\"\n [tags]=\"promptTags()\"\n [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n [showSendButton]=\"true\"\n (promptData)=\"handlePromptSubmit($event)\"\n ></ui-prompt>\n </div>\n }\n }\n\n @if (statusConfig(); as cfg) {\n <ui-alert-banner\n [alertType]=\"cfg.alertType\"\n alertVariant=\"callout\"\n [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n [includeDismissButton]=\"false\"\n [isLoading]=\"cfg.variant === 'loading'\"\n [hasIcon]=\"cfg.variant !== 'loading'\"\n [actions]=\"cfg.actions\"\n [isFullWidth]=\"true\"\n ></ui-alert-banner>\n }\n\n <div class=\"write-with-ai__caveat\">\n <ui-ai-caveat></ui-ai-caveat>\n </div>\n </section>\n }\n</div>\n",
|
|
516
|
+
template: "<div\n class=\"write-with-ai\"\n [class.write-with-ai--standalone]=\"standalone()\"\n [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n @if (!standalone()) {\n <div class=\"write-with-ai__host\">\n <ui-field\n [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n type=\"textarea\"\n [showBottomContent]=\"false\"\n [fullHeight]=\"fullHeight()\"\n [borderless]=\"borderless()\"\n [disabled]=\"cvaDisabled()\"\n [ngModel]=\"effectiveValue()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"handleValueInput($event)\"\n ></ui-field>\n <ui-button\n class=\"write-with-ai__cta\"\n variant=\"ghost-ai\"\n size=\"small\"\n [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n iconName=\"Sparkle-in-line\"\n iconPosition=\"left\"\n [disabled]=\"isPanelVisible() || cvaDisabled()\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n </div>\n }\n\n @if (isPanelVisible()) {\n <section\n class=\"write-with-ai__panel\"\n [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n role=\"region\"\n [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n >\n <header class=\"write-with-ai__panel-header\">\n <div class=\"write-with-ai__panel-heading\">\n <div class=\"write-with-ai__title-row\">\n @if (effectiveStatus() !== 'loading') {\n <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n }\n <h4 class=\"write-with-ai__title\">\n {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n </h4>\n </div>\n @if (subheader()) {\n <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n }\n </div>\n @if (!standalone()) {\n <ui-button\n variant=\"icon-button\"\n iconName=\"Close\"\n size=\"small\"\n [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n }\n </header>\n\n @if (effectiveStatus() === 'idle') {\n @if (tagsOnly()) {\n @if (tags().length) {\n <div class=\"write-with-ai__tags-prompt\">\n <div\n class=\"write-with-ai__tags-container\"\n role=\"group\"\n [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n #tagsScrollContainer\n (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n >\n @for (tag of tags(); track tag.id) {\n <ui-tag\n [label]=\"tag.label\"\n [ariaLabel]=\"tag.label\"\n [isDisabled]=\"cvaDisabled()\"\n (press)=\"handleTagClick(tag)\"\n ></ui-tag>\n }\n </div>\n <div class=\"write-with-ai__tags-arrows\">\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-left-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n ></ui-button>\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-right-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n ></ui-button>\n </div>\n </div>\n }\n } @else {\n <div class=\"write-with-ai__prompt\">\n <ui-prompt\n [ngModel]=\"promptModelData()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"handlePromptModelChange($event)\"\n [tags]=\"promptTags()\"\n [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n [showSendButton]=\"true\"\n (promptData)=\"handlePromptSubmit($event)\"\n ></ui-prompt>\n </div>\n }\n }\n\n @if (statusConfig(); as cfg) {\n <ui-alert-banner\n [alertType]=\"cfg.alertType\"\n alertVariant=\"callout\"\n [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n [includeDismissButton]=\"false\"\n [isLoading]=\"cfg.variant === 'loading'\"\n [hasIcon]=\"cfg.variant !== 'loading'\"\n [actions]=\"cfg.actions\"\n [isFullWidth]=\"true\"\n ></ui-alert-banner>\n }\n\n <div class=\"write-with-ai__caveat\">\n <ui-ai-caveat></ui-ai-caveat>\n </div>\n </section>\n }\n</div>\n",
|
|
517
517
|
styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.write-with-ai{display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:100%;overflow:hidden}.write-with-ai--full-height{height:100%}.write-with-ai--full-height .write-with-ai__host{flex:1}.write-with-ai__host{position:relative;display:flex;flex-direction:column}.write-with-ai__cta{position:absolute;right:8px;bottom:8px;z-index:1;background-color:#fff;border-radius:100px}.write-with-ai__panel{border:none;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:#f4f4f4}.write-with-ai__panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.write-with-ai__panel-heading{display:flex;flex-direction:column;gap:8px}.write-with-ai__title-row{display:flex;align-items:center;gap:8px}.write-with-ai__title{margin:0}.write-with-ai__subheader{margin:0;font-size:14px;line-height:22px;font-weight:400;color:#242424}.write-with-ai__quick-actions{display:flex;gap:8px;flex-wrap:wrap}.write-with-ai__prompt{display:flex;flex-direction:column;gap:4px}.write-with-ai__tags-prompt{display:flex;align-items:center;gap:4px;padding:8px;border:1px solid #919191;border-radius:10px;background-color:#fff}.write-with-ai__tags-container{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.write-with-ai__tags-container::-webkit-scrollbar{display:none}.write-with-ai__tags-arrows{display:flex;align-items:center;gap:4px;flex-shrink:0}.write-with-ai__status-actions{display:flex;gap:8px;justify-content:flex-end}.write-with-ai__caveat{font-size:12px}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.5}}:host ::ng-deep .write-with-ai__host textarea{padding-bottom:48px!important}\n"],
|
|
518
518
|
dependencies: [
|
|
519
519
|
{
|
|
@@ -810,7 +810,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
810
810
|
TagComponentModule,
|
|
811
811
|
UiTranslatePipe
|
|
812
812
|
],
|
|
813
|
-
template: "<div\n class=\"write-with-ai\"\n [class.write-with-ai--standalone]=\"standalone()\"\n [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n @if (!standalone()) {\n <div class=\"write-with-ai__host\">\n <ui-field\n [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n type=\"textarea\"\n [showBottomContent]=\"false\"\n [fullHeight]=\"fullHeight()\"\n [borderless]=\"borderless()\"\n [disabled]=\"cvaDisabled()\"\n [ngModel]=\"effectiveValue()\"\n (ngModelChange)=\"handleValueInput($event)\"\n ></ui-field>\n <ui-button\n class=\"write-with-ai__cta\"\n variant=\"ghost-ai\"\n size=\"small\"\n [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n iconName=\"Sparkle-in-line\"\n iconPosition=\"left\"\n [disabled]=\"isPanelVisible() || cvaDisabled()\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n </div>\n }\n\n @if (isPanelVisible()) {\n <section\n class=\"write-with-ai__panel\"\n [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n role=\"region\"\n [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n >\n <header class=\"write-with-ai__panel-header\">\n <div class=\"write-with-ai__panel-heading\">\n <div class=\"write-with-ai__title-row\">\n @if (effectiveStatus() !== 'loading') {\n <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n }\n <h4 class=\"write-with-ai__title\">\n {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n </h4>\n </div>\n @if (subheader()) {\n <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n }\n </div>\n @if (!standalone()) {\n <ui-button\n variant=\"icon-button\"\n iconName=\"Close\"\n size=\"small\"\n [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n }\n </header>\n\n @if (effectiveStatus() === 'idle') {\n @if (tagsOnly()) {\n @if (tags().length) {\n <div class=\"write-with-ai__tags-prompt\">\n <div\n class=\"write-with-ai__tags-container\"\n role=\"group\"\n [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n #tagsScrollContainer\n (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n >\n @for (tag of tags(); track tag.id) {\n <ui-tag\n [label]=\"tag.label\"\n [ariaLabel]=\"tag.label\"\n [isDisabled]=\"cvaDisabled()\"\n (press)=\"handleTagClick(tag)\"\n ></ui-tag>\n }\n </div>\n <div class=\"write-with-ai__tags-arrows\">\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-left-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n ></ui-button>\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-right-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n ></ui-button>\n </div>\n </div>\n }\n } @else {\n <div class=\"write-with-ai__prompt\">\n <ui-prompt\n [ngModel]=\"promptModelData()\"\n (ngModelChange)=\"handlePromptModelChange($event)\"\n [tags]=\"promptTags()\"\n [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n [showSendButton]=\"true\"\n (promptData)=\"handlePromptSubmit($event)\"\n ></ui-prompt>\n </div>\n }\n }\n\n @if (statusConfig(); as cfg) {\n <ui-alert-banner\n [alertType]=\"cfg.alertType\"\n alertVariant=\"callout\"\n [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n [includeDismissButton]=\"false\"\n [isLoading]=\"cfg.variant === 'loading'\"\n [hasIcon]=\"cfg.variant !== 'loading'\"\n [actions]=\"cfg.actions\"\n [isFullWidth]=\"true\"\n ></ui-alert-banner>\n }\n\n <div class=\"write-with-ai__caveat\">\n <ui-ai-caveat></ui-ai-caveat>\n </div>\n </section>\n }\n</div>\n",
|
|
813
|
+
template: "<div\n class=\"write-with-ai\"\n [class.write-with-ai--standalone]=\"standalone()\"\n [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n @if (!standalone()) {\n <div class=\"write-with-ai__host\">\n <ui-field\n [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n type=\"textarea\"\n [showBottomContent]=\"false\"\n [fullHeight]=\"fullHeight()\"\n [borderless]=\"borderless()\"\n [disabled]=\"cvaDisabled()\"\n [ngModel]=\"effectiveValue()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"handleValueInput($event)\"\n ></ui-field>\n <ui-button\n class=\"write-with-ai__cta\"\n variant=\"ghost-ai\"\n size=\"small\"\n [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n iconName=\"Sparkle-in-line\"\n iconPosition=\"left\"\n [disabled]=\"isPanelVisible() || cvaDisabled()\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n </div>\n }\n\n @if (isPanelVisible()) {\n <section\n class=\"write-with-ai__panel\"\n [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n role=\"region\"\n [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n >\n <header class=\"write-with-ai__panel-header\">\n <div class=\"write-with-ai__panel-heading\">\n <div class=\"write-with-ai__title-row\">\n @if (effectiveStatus() !== 'loading') {\n <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n }\n <h4 class=\"write-with-ai__title\">\n {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n </h4>\n </div>\n @if (subheader()) {\n <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n }\n </div>\n @if (!standalone()) {\n <ui-button\n variant=\"icon-button\"\n iconName=\"Close\"\n size=\"small\"\n [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n }\n </header>\n\n @if (effectiveStatus() === 'idle') {\n @if (tagsOnly()) {\n @if (tags().length) {\n <div class=\"write-with-ai__tags-prompt\">\n <div\n class=\"write-with-ai__tags-container\"\n role=\"group\"\n [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n #tagsScrollContainer\n (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n >\n @for (tag of tags(); track tag.id) {\n <ui-tag\n [label]=\"tag.label\"\n [ariaLabel]=\"tag.label\"\n [isDisabled]=\"cvaDisabled()\"\n (press)=\"handleTagClick(tag)\"\n ></ui-tag>\n }\n </div>\n <div class=\"write-with-ai__tags-arrows\">\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-left-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n ></ui-button>\n <ui-button\n variant=\"icon-button\"\n size=\"small\"\n iconName=\"Arrow-chevron-right-in-line\"\n [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n ></ui-button>\n </div>\n </div>\n }\n } @else {\n <div class=\"write-with-ai__prompt\">\n <ui-prompt\n [ngModel]=\"promptModelData()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"handlePromptModelChange($event)\"\n [tags]=\"promptTags()\"\n [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n [showSendButton]=\"true\"\n (promptData)=\"handlePromptSubmit($event)\"\n ></ui-prompt>\n </div>\n }\n }\n\n @if (statusConfig(); as cfg) {\n <ui-alert-banner\n [alertType]=\"cfg.alertType\"\n alertVariant=\"callout\"\n [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n [includeDismissButton]=\"false\"\n [isLoading]=\"cfg.variant === 'loading'\"\n [hasIcon]=\"cfg.variant !== 'loading'\"\n [actions]=\"cfg.actions\"\n [isFullWidth]=\"true\"\n ></ui-alert-banner>\n }\n\n <div class=\"write-with-ai__caveat\">\n <ui-ai-caveat></ui-ai-caveat>\n </div>\n </section>\n }\n</div>\n",
|
|
814
814
|
styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.write-with-ai{display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:100%;overflow:hidden}.write-with-ai--full-height{height:100%}.write-with-ai--full-height .write-with-ai__host{flex:1}.write-with-ai__host{position:relative;display:flex;flex-direction:column}.write-with-ai__cta{position:absolute;right:8px;bottom:8px;z-index:1;background-color:#fff;border-radius:100px}.write-with-ai__panel{border:none;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:#f4f4f4}.write-with-ai__panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.write-with-ai__panel-heading{display:flex;flex-direction:column;gap:8px}.write-with-ai__title-row{display:flex;align-items:center;gap:8px}.write-with-ai__title{margin:0}.write-with-ai__subheader{margin:0;font-size:14px;line-height:22px;font-weight:400;color:#242424}.write-with-ai__quick-actions{display:flex;gap:8px;flex-wrap:wrap}.write-with-ai__prompt{display:flex;flex-direction:column;gap:4px}.write-with-ai__tags-prompt{display:flex;align-items:center;gap:4px;padding:8px;border:1px solid #919191;border-radius:10px;background-color:#fff}.write-with-ai__tags-container{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.write-with-ai__tags-container::-webkit-scrollbar{display:none}.write-with-ai__tags-arrows{display:flex;align-items:center;gap:4px;flex-shrink:0}.write-with-ai__status-actions{display:flex;gap:8px;justify-content:flex-end}.write-with-ai__caveat{font-size:12px}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.5}}:host ::ng-deep .write-with-ai__host textarea{padding-bottom:48px!important}\n"]
|
|
815
815
|
}]
|
|
816
816
|
}],
|