@testgorilla/tgo-ui 4.1.3-beta → 4.1.3
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/components/accordion/accordion.component.d.ts +2 -2
- package/components/accordion/accordion.component.module.d.ts +2 -2
- package/components/ai-feedback/ai-feedback.module.d.ts +2 -2
- package/components/alert-banner/alert-banner.component.d.ts +2 -2
- package/components/alert-banner/alert-banner.component.module.d.ts +3 -3
- package/components/autocomplete/autocomplete.component.d.ts +2 -2
- package/components/autocomplete/autocomplete.component.module.d.ts +10 -9
- package/components/avatar/avatar.component.d.ts +2 -2
- package/components/avatar/avatar.component.module.d.ts +4 -4
- package/components/avatar/avatar.model.d.ts +2 -2
- package/components/badge/badge.component.d.ts +2 -2
- package/components/badge/badge.component.module.d.ts +1 -1
- package/components/breadcrumb/breadcrumb.component.d.ts +5 -3
- package/components/breadcrumb/breadcrumb.component.module.d.ts +4 -4
- package/components/button/button.component.d.ts +2 -2
- package/components/button/button.component.module.d.ts +5 -4
- package/components/button/button.model.d.ts +1 -1
- package/components/card/card.component.d.ts +2 -2
- package/components/card/card.component.module.d.ts +1 -1
- package/components/card/card.model.d.ts +1 -1
- package/components/checkbox/checkbox.component.d.ts +2 -2
- package/components/checkbox/checkbox.component.module.d.ts +8 -6
- package/components/checklist/checklist.component.d.ts +2 -2
- package/components/confirm-dialog/confirm-dialog.component.d.ts +4 -4
- package/components/confirm-dialog/confirm-dialog.component.module.d.ts +2 -2
- package/components/confirm-dialog/confirm-dialog.model.d.ts +3 -3
- package/components/datepicker/datepicker.component.d.ts +1 -1
- package/components/datepicker/datepicker.component.module.d.ts +3 -3
- package/components/dialog/dialog.component.d.ts +4 -4
- package/components/dialog/dialog.component.module.d.ts +2 -2
- package/components/dialog/dialog.model.d.ts +1 -1
- package/components/dialog/dialog.service.d.ts +1 -1
- package/components/divider/divider.component.d.ts +1 -1
- package/components/donut-chart/donut-chart.component.d.ts +5 -17
- package/components/dropdown/dropdown.component.d.ts +2 -2
- package/components/dropdown/dropdown.component.module.d.ts +6 -5
- package/components/elevation-shadow/elevation-shadow.component.d.ts +1 -1
- package/components/empty-state/empty-state.component.d.ts +3 -3
- package/components/empty-state/empty-state.component.module.d.ts +3 -3
- package/components/field/field.component.d.ts +4 -4
- package/components/field/field.component.module.d.ts +8 -6
- package/components/file-upload/file-upload.component.d.ts +1 -1
- package/components/file-upload/file-upload.component.module.d.ts +3 -3
- package/components/filter-button/filter-button.component.d.ts +3 -3
- package/components/filter-button/filter-button.component.module.d.ts +8 -7
- package/components/filter-button/filter-button.model.d.ts +1 -1
- package/components/gaussian-chart/gaussian-chart.component.d.ts +1 -1
- package/components/gaussian-chart/gaussian-chart.module.d.ts +2 -2
- package/components/icon/icon.component.d.ts +2 -2
- package/components/icon-label/icon-label.component.d.ts +2 -2
- package/components/icon-label/icon-label.component.module.d.ts +1 -1
- package/components/inline-field/inline-field.component.d.ts +3 -3
- package/components/inline-field/inline-field.component.module.d.ts +3 -3
- package/components/inline-field/inline-field.model.d.ts +1 -1
- package/components/logo/logo.component.d.ts +1 -1
- package/components/multi-input/multi-input.component.module.d.ts +8 -7
- package/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.d.ts +2 -2
- package/components/navbar/navbar.component.d.ts +3 -3
- package/components/navbar/navbar.component.module.d.ts +6 -6
- package/components/navbar/navbar.model.d.ts +2 -2
- package/components/overflow-menu/overflow-menu.component.d.ts +3 -3
- package/components/overflow-menu/overflow-menu.component.module.d.ts +5 -4
- package/components/overflow-menu/overflow-menu.model.d.ts +1 -1
- package/components/page-header/page-header.component.d.ts +1 -1
- package/components/page-header/page-header.component.module.d.ts +2 -2
- package/components/paginator/paginator.component.d.ts +1 -1
- package/components/password-criteria/password.component.module.d.ts +4 -4
- package/components/password-strength/password-strength.component.d.ts +2 -2
- package/components/password-strength/password-strength.component.module.d.ts +3 -3
- package/components/phone-input/phone-input.component.d.ts +1 -1
- package/components/phone-input/phone-input.component.module.d.ts +4 -4
- package/components/progress-bar/progress-bar.component.d.ts +1 -1
- package/components/progress-bar/progress-bar.component.module.d.ts +1 -1
- package/components/prompt/prompt.component.d.ts +1 -1
- package/components/prompt/prompt.module.d.ts +7 -7
- package/components/radial-progress/radial-progress.component.d.ts +2 -2
- package/components/radial-progress/radial-progress.component.module.d.ts +1 -1
- package/components/radio-button/radio-button.component.d.ts +2 -2
- package/components/radio-button/radio-button.component.module.d.ts +2 -2
- package/components/rating/rating.component.d.ts +1 -1
- package/components/scale/scale.component.d.ts +1 -1
- package/components/scale-table/scale-table.component.d.ts +1 -1
- package/components/segmented-bar/segmented-bar.component.d.ts +1 -1
- package/components/segmented-bar/segmented-bar.component.module.d.ts +2 -2
- package/components/segmented-bar/segmented-bar.model.d.ts +1 -1
- package/components/segmented-button/segmented-button.component.d.ts +1 -1
- package/components/selectable-card/selectable-card.component.d.ts +6 -2
- package/components/selectable-card/selectable-card.component.module.d.ts +2 -2
- package/components/side-panel/side-panel.component.d.ts +1 -1
- package/components/side-sheet/side-sheet.component.d.ts +1 -1
- package/components/side-sheet/side-sheet.component.module.d.ts +4 -4
- package/components/skeleton/skeleton.component.d.ts +2 -2
- package/components/slider/slider.component.d.ts +1 -1
- package/components/snackbar/snackbar.component.d.ts +2 -2
- package/components/snackbar/snackbar.component.module.d.ts +3 -3
- package/components/snackbar/snackbar.service.d.ts +1 -1
- package/components/spider-chart/spider-chart.component.d.ts +1 -1
- package/components/spider-chart/spider-chart.module.d.ts +2 -2
- package/components/spinner/spinner.component.d.ts +2 -2
- package/components/spinner/spinner.module.d.ts +2 -2
- package/components/step/step.component.d.ts +3 -3
- package/components/step/step.component.module.d.ts +2 -2
- package/components/stepper/stepper.component.d.ts +1 -1
- package/components/stepper/stepper.component.module.d.ts +3 -3
- package/components/stepper/stepper.model.d.ts +1 -1
- package/components/table/table.component.d.ts +1 -1
- package/components/table/table.component.module.d.ts +5 -5
- package/components/tabs/tab.directive.d.ts +1 -1
- package/components/tabs/tabs.component.d.ts +1 -1
- package/components/tabs/tabs.component.module.d.ts +3 -3
- package/components/tabs/tabs.model.d.ts +1 -1
- package/components/tag/tag.component.d.ts +2 -2
- package/components/tag/tag.component.module.d.ts +3 -3
- package/components/toggle/toggle.component.d.ts +1 -1
- package/components/toggle/toggle.component.module.d.ts +5 -4
- package/components/tooltip/tooltip.component.d.ts +1 -1
- package/components/tooltip/tooltip.component.module.d.ts +3 -2
- package/components/universal-skills-report/universal-skills-report.component.d.ts +2 -2
- package/components/universal-skills-report/universal-skills-report.component.module.d.ts +3 -3
- package/components/universal-skills-spider-charts/universal-skills-spider-charts.component.d.ts +2 -2
- package/components/universal-skills-spider-charts/universal-skills-spider-charts.component.module.d.ts +4 -4
- package/components/validation-error/validation-error.component.d.ts +1 -1
- package/components/validation-error/validation-error.module.d.ts +2 -2
- package/fesm2022/testgorilla-tgo-ui.mjs +22749 -3564
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/models/application-theme.model.d.ts +1 -0
- package/package.json +9 -142
- package/{components/core → pipes}/ui-translate.pipe.d.ts +1 -1
- package/projects/tgo-canopy-ui/assets/i18n/da-dk.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/de.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/en.json +829 -0
- package/projects/tgo-canopy-ui/assets/i18n/es.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/fr.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/it-it.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/ja-jp.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/nb-no.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/nl.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/pl-pl.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/pt-br.json +820 -0
- package/projects/tgo-canopy-ui/assets/i18n/sv-se.json +820 -0
- package/public-api.d.ts +87 -0
- package/utils/alert-bars.utils.d.ts +1 -1
- package/components/autocomplete/index.d.ts +0 -5
- package/components/autocomplete/public-api.d.ts +0 -4
- package/components/avatar/index.d.ts +0 -5
- package/components/avatar/public-api.d.ts +0 -4
- package/components/badge/index.d.ts +0 -5
- package/components/badge/public-api.d.ts +0 -4
- package/components/button/color-contrast.d.ts +0 -28
- package/components/button/index.d.ts +0 -5
- package/components/button/public-api.d.ts +0 -5
- package/components/card/index.d.ts +0 -5
- package/components/card/public-api.d.ts +0 -4
- package/components/checkbox/index.d.ts +0 -5
- package/components/checkbox/public-api.d.ts +0 -4
- package/components/core/application-theme.model.d.ts +0 -7
- package/components/core/has-validation-error.pipe.d.ts +0 -15
- package/components/core/index.d.ts +0 -5
- package/components/core/keyboard-events.model.d.ts +0 -11
- package/components/core/public-api.d.ts +0 -12
- package/components/core/select-text.directive.d.ts +0 -19
- package/components/divider/index.d.ts +0 -5
- package/components/divider/public-api.d.ts +0 -4
- package/components/dropdown/index.d.ts +0 -5
- package/components/dropdown/public-api.d.ts +0 -4
- package/components/elevation-shadow/index.d.ts +0 -5
- package/components/elevation-shadow/public-api.d.ts +0 -3
- package/components/empty-state/index.d.ts +0 -5
- package/components/empty-state/public-api.d.ts +0 -4
- package/components/field/index.d.ts +0 -5
- package/components/field/public-api.d.ts +0 -4
- package/components/filter-button/index.d.ts +0 -5
- package/components/filter-button/public-api.d.ts +0 -4
- package/components/icon/index.d.ts +0 -5
- package/components/icon/public-api.d.ts +0 -5
- package/components/inline-field/index.d.ts +0 -5
- package/components/inline-field/public-api.d.ts +0 -4
- package/components/logo/index.d.ts +0 -5
- package/components/logo/public-api.d.ts +0 -4
- package/components/paginator/index.d.ts +0 -5
- package/components/paginator/public-api.d.ts +0 -3
- package/components/progress-bar/index.d.ts +0 -5
- package/components/progress-bar/public-api.d.ts +0 -3
- package/components/radial-progress/index.d.ts +0 -5
- package/components/radial-progress/public-api.d.ts +0 -4
- package/components/radio-button/index.d.ts +0 -5
- package/components/radio-button/public-api.d.ts +0 -4
- package/components/rating/index.d.ts +0 -5
- package/components/rating/public-api.d.ts +0 -3
- package/components/scale/index.d.ts +0 -5
- package/components/scale/public-api.d.ts +0 -3
- package/components/segmented-bar/index.d.ts +0 -5
- package/components/segmented-bar/public-api.d.ts +0 -4
- package/components/segmented-button/index.d.ts +0 -5
- package/components/segmented-button/public-api.d.ts +0 -4
- package/components/skeleton/index.d.ts +0 -5
- package/components/skeleton/public-api.d.ts +0 -3
- package/components/slider/index.d.ts +0 -5
- package/components/slider/public-api.d.ts +0 -4
- package/components/spinner/index.d.ts +0 -5
- package/components/spinner/public-api.d.ts +0 -4
- package/components/tag/index.d.ts +0 -5
- package/components/tag/public-api.d.ts +0 -4
- package/components/toggle/index.d.ts +0 -5
- package/components/toggle/public-api.d.ts +0 -3
- package/components/tooltip/index.d.ts +0 -5
- package/components/tooltip/public-api.d.ts +0 -5
- package/components/validation-error/index.d.ts +0 -5
- package/components/validation-error/public-api.d.ts +0 -3
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs +0 -1045
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs +0 -173
- package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-badge.mjs +0 -180
- package/fesm2022/testgorilla-tgo-ui-components-badge.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-button.mjs +0 -635
- package/fesm2022/testgorilla-tgo-ui-components-button.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-card.mjs +0 -164
- package/fesm2022/testgorilla-tgo-ui-components-card.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs +0 -402
- package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs +0 -10807
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-divider.mjs +0 -88
- package/fesm2022/testgorilla-tgo-ui-components-divider.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs +0 -434
- package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-elevation-shadow.mjs +0 -75
- package/fesm2022/testgorilla-tgo-ui-components-elevation-shadow.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs +0 -326
- package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-field.mjs +0 -638
- package/fesm2022/testgorilla-tgo-ui-components-field.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs +0 -314
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-icon.mjs +0 -1496
- package/fesm2022/testgorilla-tgo-ui-components-icon.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs +0 -367
- package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-logo.mjs +0 -218
- package/fesm2022/testgorilla-tgo-ui-components-logo.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs +0 -110
- package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs +0 -128
- package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs +0 -152
- package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs +0 -373
- package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-rating.mjs +0 -150
- package/fesm2022/testgorilla-tgo-ui-components-rating.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-scale.mjs +0 -158
- package/fesm2022/testgorilla-tgo-ui-components-scale.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs +0 -137
- package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs +0 -128
- package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-skeleton.mjs +0 -81
- package/fesm2022/testgorilla-tgo-ui-components-skeleton.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs +0 -274
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs +0 -108
- package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs +0 -239
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs +0 -216
- package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-tooltip.mjs +0 -272
- package/fesm2022/testgorilla-tgo-ui-components-tooltip.mjs.map +0 -1
- package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs +0 -79
- package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs.map +0 -1
- /package/{components/core → directives}/digits-only.directive.d.ts +0 -0
- /package/{components/core → directives}/ellipse-text.directive.d.ts +0 -0
- /package/{components/autocomplete → directives}/select-text.directive.d.ts +0 -0
- /package/{components/core → models}/checkbox.model.d.ts +0 -0
- /package/{components/avatar → pipes}/name-initials.pipe.d.ts +0 -0
- /package/{components/icon → services}/icons.service.d.ts +0 -0
- /package/{components/core → utils}/autocomplete-utils.d.ts +0 -0
- /package/{components/core → utils}/hex-to-rgb.d.ts +0 -0
- /package/{components/core → utils/localization}/language.model.d.ts +0 -0
- /package/{components/core → utils/localization}/language.service.d.ts +0 -0
|
@@ -1,274 +0,0 @@
|
|
|
1
|
-
import * as i1 from '@angular/common';
|
|
2
|
-
import { DecimalPipe, CommonModule } from '@angular/common';
|
|
3
|
-
import * as i0 from '@angular/core';
|
|
4
|
-
import { input, EventEmitter, inject, ChangeDetectorRef, forwardRef, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
5
|
-
import * as i3 from '@angular/forms';
|
|
6
|
-
import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
7
|
-
import * as i4 from '@angular/material/input';
|
|
8
|
-
import { MatInputModule } from '@angular/material/input';
|
|
9
|
-
import * as i2 from '@angular/material/slider';
|
|
10
|
-
import { MatSliderModule } from '@angular/material/slider';
|
|
11
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
12
|
-
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
13
|
-
import { UiTranslatePipe, DigitsOnlyDirective } from '@testgorilla/tgo-ui/components/core';
|
|
14
|
-
import * as i5 from '@testgorilla/tgo-ui/components/icon';
|
|
15
|
-
import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
|
|
16
|
-
|
|
17
|
-
class SliderComponent {
|
|
18
|
-
constructor(defaultAppTheme) {
|
|
19
|
-
this.defaultAppTheme = defaultAppTheme;
|
|
20
|
-
/**
|
|
21
|
-
* The maximum value of the slider.
|
|
22
|
-
*
|
|
23
|
-
* @type {number}
|
|
24
|
-
* @default 100
|
|
25
|
-
*/
|
|
26
|
-
this.max = 100;
|
|
27
|
-
/**
|
|
28
|
-
* The minimum value of the slider.
|
|
29
|
-
*
|
|
30
|
-
* @type {number}
|
|
31
|
-
* @default 0
|
|
32
|
-
*/
|
|
33
|
-
this.min = 0;
|
|
34
|
-
/**
|
|
35
|
-
* A flag indicating whether the slider displays values as percentages.
|
|
36
|
-
*
|
|
37
|
-
* @type {boolean}
|
|
38
|
-
* @default true
|
|
39
|
-
*/
|
|
40
|
-
this.percentage = false;
|
|
41
|
-
/**
|
|
42
|
-
* A flag indicating whether the slider is disabled.
|
|
43
|
-
*
|
|
44
|
-
* @type {boolean}
|
|
45
|
-
* @default true
|
|
46
|
-
*/
|
|
47
|
-
this.disabled = false;
|
|
48
|
-
/**
|
|
49
|
-
* The starting value of the slider.
|
|
50
|
-
*
|
|
51
|
-
* @type {number}
|
|
52
|
-
* @default 0
|
|
53
|
-
*/
|
|
54
|
-
this.sliderStart = 0;
|
|
55
|
-
/**
|
|
56
|
-
* The ending value of the slider.
|
|
57
|
-
*
|
|
58
|
-
* @type {number}
|
|
59
|
-
* @default 100
|
|
60
|
-
*/
|
|
61
|
-
this.sliderEnd = 100;
|
|
62
|
-
/**
|
|
63
|
-
* The label for the slider.
|
|
64
|
-
*
|
|
65
|
-
* @type {string}
|
|
66
|
-
* @default ''
|
|
67
|
-
*/
|
|
68
|
-
this.label = '';
|
|
69
|
-
/**
|
|
70
|
-
* Show slider inputs.
|
|
71
|
-
*
|
|
72
|
-
* @type {boolean}
|
|
73
|
-
* @default true
|
|
74
|
-
*/
|
|
75
|
-
this.showInputs = true;
|
|
76
|
-
/**
|
|
77
|
-
* Step number.
|
|
78
|
-
*
|
|
79
|
-
* @type {number}
|
|
80
|
-
* @default 1
|
|
81
|
-
*/
|
|
82
|
-
this.step = 1;
|
|
83
|
-
/**
|
|
84
|
-
*
|
|
85
|
-
* Defines the application theme
|
|
86
|
-
*
|
|
87
|
-
* @type {ApplicationTheme}
|
|
88
|
-
* @memberof SliderComponent
|
|
89
|
-
*/
|
|
90
|
-
this.applicationTheme = 'light';
|
|
91
|
-
/**
|
|
92
|
-
*
|
|
93
|
-
* Defines the variant slider
|
|
94
|
-
*
|
|
95
|
-
* @type {SliderVariant}
|
|
96
|
-
* @memberof SliderComponent
|
|
97
|
-
*/
|
|
98
|
-
this.variant = 'range';
|
|
99
|
-
this.useDecimal = input(false);
|
|
100
|
-
this.minLabel = input();
|
|
101
|
-
this.maxLabel = input();
|
|
102
|
-
this.inputWidth = input(80);
|
|
103
|
-
this.sliderValueChange = new EventEmitter();
|
|
104
|
-
this.cdr = inject(ChangeDetectorRef);
|
|
105
|
-
this.decimalPipe = inject(DecimalPipe);
|
|
106
|
-
this.value = { start: 0, end: 100 };
|
|
107
|
-
this.translationContext = 'SLIDER.';
|
|
108
|
-
this.touchedControlName = '';
|
|
109
|
-
this.onChange = () => { };
|
|
110
|
-
this.onTouch = () => { };
|
|
111
|
-
if (defaultAppTheme) {
|
|
112
|
-
this.applicationTheme = defaultAppTheme;
|
|
113
|
-
this.cdr.markForCheck();
|
|
114
|
-
}
|
|
115
|
-
this.formatLabel = this.formatLabel.bind(this);
|
|
116
|
-
}
|
|
117
|
-
registerOnChange(fn) {
|
|
118
|
-
this.onChange = fn;
|
|
119
|
-
}
|
|
120
|
-
registerOnTouched(fn) {
|
|
121
|
-
this.onTouch = fn;
|
|
122
|
-
}
|
|
123
|
-
setDisabledState(isDisabled) {
|
|
124
|
-
this.disabled = isDisabled;
|
|
125
|
-
this.cdr.markForCheck();
|
|
126
|
-
}
|
|
127
|
-
writeValue(value) {
|
|
128
|
-
this.value = value;
|
|
129
|
-
this.sliderEnd = value.end;
|
|
130
|
-
this.cdr.markForCheck();
|
|
131
|
-
// Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider
|
|
132
|
-
setTimeout(() => {
|
|
133
|
-
this.sliderStart = value.start;
|
|
134
|
-
this.cdr.markForCheck();
|
|
135
|
-
if (this.control) {
|
|
136
|
-
this.control.updateValueAndValidity();
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
onValueChange(ev) {
|
|
141
|
-
const value = { start: +this.sliderStart, end: +this.sliderEnd };
|
|
142
|
-
if (ev) {
|
|
143
|
-
value.start = ev;
|
|
144
|
-
value.end = 0;
|
|
145
|
-
}
|
|
146
|
-
this.value = value;
|
|
147
|
-
this.onChange(value);
|
|
148
|
-
this.sliderValueChange.emit(value);
|
|
149
|
-
this.cdr.markForCheck();
|
|
150
|
-
this.onTouch();
|
|
151
|
-
}
|
|
152
|
-
onInputBlur(inputName) {
|
|
153
|
-
this.touchedControlName = inputName;
|
|
154
|
-
const value = { start: +this.sliderStart, end: +this.sliderEnd };
|
|
155
|
-
if (this.isValueChanged(value)) {
|
|
156
|
-
this.onValueChange();
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
onInputFocus() {
|
|
160
|
-
this.touchedControlName = '';
|
|
161
|
-
this.cdr.markForCheck();
|
|
162
|
-
}
|
|
163
|
-
isValueChanged(value) {
|
|
164
|
-
return this.value.start !== value.start || this.value.end !== value.end;
|
|
165
|
-
}
|
|
166
|
-
get hasError() {
|
|
167
|
-
return (this.max < +this.sliderEnd ||
|
|
168
|
-
this.min > +this.sliderStart ||
|
|
169
|
-
this.min > +this.sliderEnd ||
|
|
170
|
-
this.max < +this.sliderStart ||
|
|
171
|
-
+this.sliderEnd < +this.sliderStart);
|
|
172
|
-
}
|
|
173
|
-
get isBasicSlider() {
|
|
174
|
-
return this.variant === 'basic';
|
|
175
|
-
}
|
|
176
|
-
formatLabel(value) {
|
|
177
|
-
return this.useDecimal() ? this.decimalPipe.transform(value, '1.0-0') || value.toString() : value.toString();
|
|
178
|
-
}
|
|
179
|
-
validate(control) {
|
|
180
|
-
this.control = control;
|
|
181
|
-
return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;
|
|
182
|
-
}
|
|
183
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
184
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, sliderStart: { classPropertyName: "sliderStart", publicName: "sliderStart", isSignal: false, isRequired: false, transformFunction: null }, sliderEnd: { classPropertyName: "sliderEnd", publicName: "sliderEnd", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, showInputs: { classPropertyName: "showInputs", publicName: "showInputs", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, useDecimal: { classPropertyName: "useDecimal", publicName: "useDecimal", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliderValueChange: "sliderValueChange" }, providers: [
|
|
185
|
-
{
|
|
186
|
-
provide: NG_VALUE_ACCESSOR,
|
|
187
|
-
useExisting: forwardRef(() => SliderComponent),
|
|
188
|
-
multi: true,
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
provide: NG_VALIDATORS,
|
|
192
|
-
useExisting: forwardRef(() => SliderComponent),
|
|
193
|
-
multi: true,
|
|
194
|
-
},
|
|
195
|
-
provideNgxMask(),
|
|
196
|
-
DecimalPipe,
|
|
197
|
-
], ngImport: i0, 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 (useDecimal()) {\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 #sliderElement\n discrete\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"sliderElement.discrete = true\"\n (mouseleave)=\"sliderElement.discrete = false\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n } @else {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useDecimal()) {\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 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=\",\"\n />\n } @else {\n <input\n matInput\n [type]=\"'number'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\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 data-testid=\"slider.input-end\"\n mask=\"separator.2\"\n thousandSeparator=\",\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'number'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\n data-testid=\"slider.input-end\"\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", 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;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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
198
|
-
}
|
|
199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponent, decorators: [{
|
|
200
|
-
type: Component,
|
|
201
|
-
args: [{ selector: 'ui-slider', providers: [
|
|
202
|
-
{
|
|
203
|
-
provide: NG_VALUE_ACCESSOR,
|
|
204
|
-
useExisting: forwardRef(() => SliderComponent),
|
|
205
|
-
multi: true,
|
|
206
|
-
},
|
|
207
|
-
{
|
|
208
|
-
provide: NG_VALIDATORS,
|
|
209
|
-
useExisting: forwardRef(() => SliderComponent),
|
|
210
|
-
multi: true,
|
|
211
|
-
},
|
|
212
|
-
provideNgxMask(),
|
|
213
|
-
DecimalPipe,
|
|
214
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
215
|
-
CommonModule,
|
|
216
|
-
MatSliderModule,
|
|
217
|
-
FormsModule,
|
|
218
|
-
MatInputModule,
|
|
219
|
-
MatTooltipModule,
|
|
220
|
-
IconComponentModule,
|
|
221
|
-
UiTranslatePipe,
|
|
222
|
-
DigitsOnlyDirective,
|
|
223
|
-
NgxMaskDirective,
|
|
224
|
-
], 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 (useDecimal()) {\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 #sliderElement\n discrete\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"sliderElement.discrete = true\"\n (mouseleave)=\"sliderElement.discrete = false\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n } @else {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useDecimal()) {\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 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=\",\"\n />\n } @else {\n <input\n matInput\n [type]=\"'number'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\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 data-testid=\"slider.input-end\"\n mask=\"separator.2\"\n thousandSeparator=\",\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'number'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\n data-testid=\"slider.input-end\"\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", 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;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"] }]
|
|
225
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
226
|
-
type: Optional
|
|
227
|
-
}, {
|
|
228
|
-
type: Inject,
|
|
229
|
-
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
230
|
-
}] }], propDecorators: { max: [{
|
|
231
|
-
type: Input
|
|
232
|
-
}], min: [{
|
|
233
|
-
type: Input
|
|
234
|
-
}], percentage: [{
|
|
235
|
-
type: Input
|
|
236
|
-
}], disabled: [{
|
|
237
|
-
type: Input
|
|
238
|
-
}], sliderStart: [{
|
|
239
|
-
type: Input
|
|
240
|
-
}], sliderEnd: [{
|
|
241
|
-
type: Input
|
|
242
|
-
}], label: [{
|
|
243
|
-
type: Input
|
|
244
|
-
}], showInputs: [{
|
|
245
|
-
type: Input
|
|
246
|
-
}], step: [{
|
|
247
|
-
type: Input
|
|
248
|
-
}], applicationTheme: [{
|
|
249
|
-
type: Input
|
|
250
|
-
}], variant: [{
|
|
251
|
-
type: Input
|
|
252
|
-
}], sliderValueChange: [{
|
|
253
|
-
type: Output
|
|
254
|
-
}] } });
|
|
255
|
-
|
|
256
|
-
class SliderComponentModule {
|
|
257
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
258
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, imports: [SliderComponent], exports: [SliderComponent] }); }
|
|
259
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, imports: [SliderComponent] }); }
|
|
260
|
-
}
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, decorators: [{
|
|
262
|
-
type: NgModule,
|
|
263
|
-
args: [{
|
|
264
|
-
imports: [SliderComponent],
|
|
265
|
-
exports: [SliderComponent],
|
|
266
|
-
}]
|
|
267
|
-
}] });
|
|
268
|
-
|
|
269
|
-
/**
|
|
270
|
-
* Generated bundle index. Do not edit.
|
|
271
|
-
*/
|
|
272
|
-
|
|
273
|
-
export { SliderComponent, SliderComponentModule };
|
|
274
|
-
//# sourceMappingURL=testgorilla-tgo-ui-components-slider.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts","../../../components/slider/testgorilla-tgo-ui-components-slider.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n forwardRef,\n inject,\n Inject,\n input,\n Input,\n Optional,\n Output,\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 { MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\nimport { DigitsOnlyDirective } from '@testgorilla/tgo-ui/components/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\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 DigitsOnlyDirective,\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 useDecimal = input<boolean>(false);\n\n minLabel = input<string>();\n\n maxLabel = input<string>();\n\n inputWidth = input(80);\n\n @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n cdr = inject(ChangeDetectorRef);\n decimalPipe = inject(DecimalPipe);\n private control?: AbstractControl;\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 }\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();\n }\n });\n }\n\n protected onValueChange(ev?: number): void {\n const value: SliderValue = { start: +this.sliderStart, end: +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 onInputBlur(inputName: string): void {\n this.touchedControlName = inputName;\n const value: SliderValue = { start: +this.sliderStart, end: +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 < +this.sliderEnd ||\n this.min > +this.sliderStart ||\n this.min > +this.sliderEnd ||\n this.max < +this.sliderStart ||\n +this.sliderEnd < +this.sliderStart\n );\n }\n\n get isBasicSlider(): boolean {\n return this.variant === 'basic';\n }\n\n formatLabel(value: number): string {\n return this.useDecimal() ? this.decimalPipe.transform(value, '1.0-0') || value.toString() : 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 (useDecimal()) {\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 #sliderElement\n discrete\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"sliderElement.discrete = true\"\n (mouseleave)=\"sliderElement.discrete = false\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n } @else {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useDecimal()) {\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 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=\",\"\n />\n } @else {\n <input\n matInput\n [type]=\"'number'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\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 data-testid=\"slider.input-end\"\n mask=\"separator.2\"\n thousandSeparator=\",\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'number'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\n data-testid=\"slider.input-end\"\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';\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n imports: [SliderComponent],\n exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;MA+Da,eAAe,CAAA;AAyG1B,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAe,CAAA,eAAA,GAAf,eAAe;AAzG5F;;;;;AAKG;QACM,IAAG,CAAA,GAAA,GAAG,GAAG;AAElB;;;;;AAKG;QACM,IAAG,CAAA,GAAA,GAAG,CAAC;AAEhB;;;;;AAKG;QACM,IAAU,CAAA,UAAA,GAAG,KAAK;AAE3B;;;;;AAKG;QACM,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzB;;;;;AAKG;QACM,IAAW,CAAA,WAAA,GAAG,CAAC;AAExB;;;;;AAKG;QACM,IAAS,CAAA,SAAA,GAAG,GAAG;AAExB;;;;;AAKG;QACM,IAAK,CAAA,KAAA,GAAG,EAAE;AAEnB;;;;;AAKG;QACM,IAAU,CAAA,UAAA,GAAG,IAAI;AAE1B;;;;;AAKG;QACM,IAAI,CAAA,IAAA,GAAG,CAAC;AAEjB;;;;;;AAMG;QACM,IAAgB,CAAA,gBAAA,GAAqB,OAAO;AAErD;;;;;;AAMG;QACM,IAAO,CAAA,OAAA,GAAkB,OAAO;AAEzC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,CAAC;QAElC,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU;QAE1B,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU;AAE1B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC;AAEZ,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,YAAY,EAAe;AAE7D,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;QAazB,IAAK,CAAA,KAAA,GAAgB,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;QACzC,IAAkB,CAAA,kBAAA,GAAG,SAAS;QAC9B,IAAkB,CAAA,kBAAA,GAAG,EAAE;AAEjC,QAAA,IAAA,CAAA,QAAQ,GAAiC,MAAK,GAAG;AACjD,QAAA,IAAA,CAAA,OAAO,GAAe,MAAK,GAAG;QAZ5B,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;AACvC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;;QAEzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;AAUhD,IAAA,gBAAgB,CAAC,EAAgC,EAAA;AAC/C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAGpB,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;;AAGnB,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;AAC1B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;;AAGzB,IAAA,UAAU,CAAC,KAAkB,EAAA;AAC3B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAAG;AAC1B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;;QAEvB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,KAAK;AAC9B,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACvB,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,IAAI,CAAC,OAAO,CAAC,sBAAsB,EAAE;;AAEzC,SAAC,CAAC;;AAGM,IAAA,aAAa,CAAC,EAAW,EAAA;AACjC,QAAA,MAAM,KAAK,GAAgB,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;QAE7E,IAAI,EAAE,EAAE;AACN,YAAA,KAAK,CAAC,KAAK,GAAG,EAAE;AAChB,YAAA,KAAK,CAAC,GAAG,GAAG,CAAC;;AAGf,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QACvB,IAAI,CAAC,OAAO,EAAE;;AAGN,IAAA,WAAW,CAAC,SAAiB,EAAA;AACrC,QAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS;AACnC,QAAA,MAAM,KAAK,GAAgB,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;AAE7E,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;YAC9B,IAAI,CAAC,aAAa,EAAE;;;IAId,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,kBAAkB,GAAG,EAAE;AAC5B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;;AAGjB,IAAA,cAAc,CAAC,KAAkB,EAAA;AACvC,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,GAAG;;AAGzE,IAAA,IAAI,QAAQ,GAAA;QACV,QACE,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS;AAC1B,YAAA,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,WAAW;AAC5B,YAAA,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS;AAC1B,YAAA,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,WAAW;YAC5B,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,WAAW;;AAIvC,IAAA,IAAI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,OAAO,KAAK,OAAO;;AAGjC,IAAA,WAAW,CAAC,KAAa,EAAA;AACvB,QAAA,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE;;AAG9G,IAAA,QAAQ,CAAC,OAAwB,EAAA;AAC/B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,IAAI;;AA1MvE,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,kBA0GJ,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AA1G/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EA3Bb,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;AACD,YAAA;AACI,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;AACD,YAAA,cAAc,EAAE;YAChB,WAAW;AACd,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjDL,s9LAyLA,EDrIQ,MAAA,EAAA,CAAA,yqQAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8TACZ,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,eAAA,EAAA,KAAA,EAAA,OAAA,EAAA,eAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,WAAA,EAAA,SAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,sDAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,WAAW,EACX,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,cAAc,EACd,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,gBAAgB,8BAChB,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACnB,eAAe,EACf,IAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,mBAAmB,uHACnB,gBAAgB,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,uBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,KAAA,EAAA,kBAAA,EAAA,mBAAA,EAAA,wBAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,CAAA,MAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAGX,eAAe,EAAA,UAAA,EAAA,CAAA;kBA/B3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAGV,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACD,wBAAA;AACI,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACD,wBAAA,cAAc,EAAE;wBAChB,WAAW;qBACd,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACL,YAAY;wBACZ,eAAe;wBACf,WAAW;wBACX,cAAc;wBACd,gBAAgB;wBAChB,mBAAmB;wBACnB,eAAe;wBACf,mBAAmB;wBACnB,gBAAgB;AACnB,qBAAA,EAAA,QAAA,EAAA,s9LAAA,EAAA,MAAA,EAAA,CAAA,yqQAAA,CAAA,EAAA;;0BA4GA;;0BAAY,MAAM;2BAAC,oCAAoC;yCAnGjD,GAAG,EAAA,CAAA;sBAAX;gBAQQ,GAAG,EAAA,CAAA;sBAAX;gBAQQ,UAAU,EAAA,CAAA;sBAAlB;gBAQQ,QAAQ,EAAA,CAAA;sBAAhB;gBAQQ,WAAW,EAAA,CAAA;sBAAnB;gBAQQ,SAAS,EAAA,CAAA;sBAAjB;gBAQQ,KAAK,EAAA,CAAA;sBAAb;gBAQQ,UAAU,EAAA,CAAA;sBAAlB;gBAQQ,IAAI,EAAA,CAAA;sBAAZ;gBASQ,gBAAgB,EAAA,CAAA;sBAAxB;gBASQ,OAAO,EAAA,CAAA;sBAAf;gBAUS,iBAAiB,EAAA,CAAA;sBAA1B;;;ME3JU,qBAAqB,CAAA;+GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAArB,qBAAqB,EAAA,OAAA,EAAA,CAHtB,eAAe,CAAA,EAAA,OAAA,EAAA,CACf,eAAe,CAAA,EAAA,CAAA,CAAA;AAEd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAHtB,eAAe,CAAA,EAAA,CAAA,CAAA;;4FAGd,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,eAAe,CAAC;oBAC1B,OAAO,EAAE,CAAC,eAAe,CAAC;AAC3B,iBAAA;;;ACND;;AAEG;;;;"}
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Optional, Inject, Component, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/common';
|
|
4
|
-
import { NgClass, NgIf, AsyncPipe } from '@angular/common';
|
|
5
|
-
import * as i2 from '@testgorilla/tgo-ui/components/icon';
|
|
6
|
-
import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
|
|
7
|
-
import * as i3 from '@testgorilla/tgo-ui/components/core';
|
|
8
|
-
import { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
|
|
9
|
-
|
|
10
|
-
class SpinnerComponent {
|
|
11
|
-
constructor(defaultAppTheme) {
|
|
12
|
-
this.defaultAppTheme = defaultAppTheme;
|
|
13
|
-
/**
|
|
14
|
-
* The size variant of the spinner. Can be 'small' or 'large'.
|
|
15
|
-
* Defaults to 'large'.
|
|
16
|
-
* @default 'large'
|
|
17
|
-
* @type {SpinnerSize}
|
|
18
|
-
* @memberof SpinnerComponent
|
|
19
|
-
*/
|
|
20
|
-
this.size = 'large';
|
|
21
|
-
/**
|
|
22
|
-
* Set position fixed on page
|
|
23
|
-
* Defaults to 'true'.
|
|
24
|
-
* @default 'true'
|
|
25
|
-
* @type {SpinnerSize}
|
|
26
|
-
* @memberof SpinnerComponent
|
|
27
|
-
*/
|
|
28
|
-
this.isLoader = true;
|
|
29
|
-
/**
|
|
30
|
-
* The text to display below the spinner.
|
|
31
|
-
* @type {string}
|
|
32
|
-
* @memberof SpinnerComponent
|
|
33
|
-
*/
|
|
34
|
-
this.text = null;
|
|
35
|
-
/**
|
|
36
|
-
*
|
|
37
|
-
* Defines the application theme
|
|
38
|
-
*
|
|
39
|
-
* @type {ApplicationTheme}
|
|
40
|
-
* @memberof SpinnerComponent
|
|
41
|
-
*/
|
|
42
|
-
this.applicationTheme = 'light';
|
|
43
|
-
/**
|
|
44
|
-
* Custom Icon size
|
|
45
|
-
*
|
|
46
|
-
* @type {IconSize}
|
|
47
|
-
* @memberof SpinnerComponent
|
|
48
|
-
*/
|
|
49
|
-
this.iconSize = '24';
|
|
50
|
-
if (defaultAppTheme) {
|
|
51
|
-
this.applicationTheme = defaultAppTheme;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
ngOnChanges() {
|
|
55
|
-
this.setSpinnerClasses();
|
|
56
|
-
}
|
|
57
|
-
ngOnInit() {
|
|
58
|
-
this.setSpinnerClasses();
|
|
59
|
-
}
|
|
60
|
-
setSpinnerClasses() {
|
|
61
|
-
this.classes = `${this.size === 'large' ? 'large' : 'small'} ${this.isLoader ? 'loader' : ''} ${this.text ? 'with-text' : ''} ${this.applicationTheme}`;
|
|
62
|
-
this.classes = this.classes.replace(/\s+/g, ' ');
|
|
63
|
-
}
|
|
64
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
65
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SpinnerComponent, isStandalone: false, selector: "ui-spinner", inputs: { size: "size", isLoader: "isLoader", text: "text", applicationTheme: "applicationTheme", iconName: "iconName", iconSize: "iconSize" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n role=\"alert\"\n>\n @if (!iconName) {\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\n } @else {\n <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n }\n\n @if (text) {\n <h3 class=\"spinner-text\">{{ text }}</h3>\n }\n</div>\n", 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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: i3.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
66
|
-
}
|
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
68
|
-
type: Component,
|
|
69
|
-
args: [{ selector: 'ui-spinner', standalone: false, template: "<div\n class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n role=\"alert\"\n>\n @if (!iconName) {\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\n } @else {\n <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n }\n\n @if (text) {\n <h3 class=\"spinner-text\">{{ text }}</h3>\n }\n</div>\n", 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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
|
|
70
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
71
|
-
type: Optional
|
|
72
|
-
}, {
|
|
73
|
-
type: Inject,
|
|
74
|
-
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
75
|
-
}] }], propDecorators: { size: [{
|
|
76
|
-
type: Input
|
|
77
|
-
}], isLoader: [{
|
|
78
|
-
type: Input
|
|
79
|
-
}], text: [{
|
|
80
|
-
type: Input
|
|
81
|
-
}], applicationTheme: [{
|
|
82
|
-
type: Input
|
|
83
|
-
}], iconName: [{
|
|
84
|
-
type: Input
|
|
85
|
-
}], iconSize: [{
|
|
86
|
-
type: Input
|
|
87
|
-
}] } });
|
|
88
|
-
|
|
89
|
-
class SpinnerComponentModule {
|
|
90
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
91
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, declarations: [SpinnerComponent], imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule], exports: [SpinnerComponent] }); }
|
|
92
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, imports: [IconComponentModule] }); }
|
|
93
|
-
}
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, decorators: [{
|
|
95
|
-
type: NgModule,
|
|
96
|
-
args: [{
|
|
97
|
-
declarations: [SpinnerComponent],
|
|
98
|
-
exports: [SpinnerComponent],
|
|
99
|
-
imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule],
|
|
100
|
-
}]
|
|
101
|
-
}] });
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* Generated bundle index. Do not edit.
|
|
105
|
-
*/
|
|
106
|
-
|
|
107
|
-
export { SpinnerComponent, SpinnerComponentModule };
|
|
108
|
-
//# sourceMappingURL=testgorilla-tgo-ui-components-spinner.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-spinner.mjs","sources":["../../../components/spinner/spinner.component.ts","../../../components/spinner/spinner.component.html","../../../components/spinner/spinner.module.ts","../../../components/spinner/testgorilla-tgo-ui-components-spinner.ts"],"sourcesContent":["import { Component, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconSize } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerSize } from './spinner.model';\n\n@Component({\n selector: 'ui-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss'],\n standalone: false\n})\nexport class SpinnerComponent implements OnInit, OnChanges {\n /**\n * The size variant of the spinner. Can be 'small' or 'large'.\n * Defaults to 'large'.\n * @default 'large'\n * @type {SpinnerSize}\n * @memberof SpinnerComponent\n */\n @Input() size: SpinnerSize = 'large';\n\n /**\n * Set position fixed on page\n * Defaults to 'true'.\n * @default 'true'\n * @type {SpinnerSize}\n * @memberof SpinnerComponent\n */\n @Input() isLoader = true;\n\n /**\n * The text to display below the spinner.\n * @type {string}\n * @memberof SpinnerComponent\n */\n @Input() text: string | null = null;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof SpinnerComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * Custom Icon name\n *\n * @type {IconName}\n * @memberof SpinnerComponent\n */\n @Input() iconName: IconName;\n\n /**\n * Custom Icon size\n *\n * @type {IconSize}\n * @memberof SpinnerComponent\n */\n @Input() iconSize: IconSize = '24';\n\n classes: string;\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngOnChanges(): void {\n this.setSpinnerClasses();\n }\n\n ngOnInit(): void {\n this.setSpinnerClasses();\n }\n\n setSpinnerClasses(): void {\n this.classes = `${this.size === 'large' ? 'large' : 'small'} ${this.isLoader ? 'loader' : ''} ${\n this.text ? 'with-text' : ''\n } ${this.applicationTheme}`;\n\n this.classes = this.classes.replace(/\\s+/g, ' ');\n }\n}\n","<div\n class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n role=\"alert\"\n>\n @if (!iconName) {\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\n } @else {\n <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n }\n\n @if (text) {\n <h3 class=\"spinner-text\">{{ text }}</h3>\n }\n</div>\n","import { AsyncPipe, NgClass, NgIf } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerComponent } from './spinner.component';\n\n@NgModule({\n declarations: [SpinnerComponent],\n exports: [SpinnerComponent],\n imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule],\n})\nexport class SpinnerComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|