@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,137 +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 { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i2 from '@angular/material/tooltip';
|
|
6
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
7
|
-
import * as i3 from '@testgorilla/tgo-ui/components/icon';
|
|
8
|
-
import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
|
|
9
|
-
import * as i4 from '@testgorilla/tgo-ui/components/tooltip';
|
|
10
|
-
import { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';
|
|
11
|
-
import { MatInputModule } from '@angular/material/input';
|
|
12
|
-
|
|
13
|
-
class SegmentedBarComponent {
|
|
14
|
-
/**
|
|
15
|
-
* The segments to be displayed in the segmented bar.
|
|
16
|
-
* @required true
|
|
17
|
-
* @type {SegmentedBar}
|
|
18
|
-
* @memberof SegmentedBarComponent
|
|
19
|
-
*/
|
|
20
|
-
set segments(segments) {
|
|
21
|
-
this.segmentList = this.calculatePercentages(segments);
|
|
22
|
-
}
|
|
23
|
-
constructor(defaultAppTheme) {
|
|
24
|
-
this.defaultAppTheme = defaultAppTheme;
|
|
25
|
-
/**
|
|
26
|
-
* The width of the segmented bar. Defaults to '100%'.
|
|
27
|
-
* You can use '100%' or '100px' for this field. 100 is just an example
|
|
28
|
-
* @default '100%'
|
|
29
|
-
* @type {string}
|
|
30
|
-
* @memberof SegmentedBarComponent
|
|
31
|
-
*/
|
|
32
|
-
this.width = '100%';
|
|
33
|
-
/**
|
|
34
|
-
* The size variant of the segmented bar. Can be 'small' or 'large'.
|
|
35
|
-
* Defaults to 'large'.
|
|
36
|
-
* @default 'large'
|
|
37
|
-
* @type {SegmentedBarVariant}
|
|
38
|
-
* @memberof SegmentedBarComponent
|
|
39
|
-
*/
|
|
40
|
-
this.size = 'large';
|
|
41
|
-
/**
|
|
42
|
-
*
|
|
43
|
-
* Defines the application theme
|
|
44
|
-
*
|
|
45
|
-
* @type {ApplicationTheme}
|
|
46
|
-
* @memberof SegmentedBarComponent
|
|
47
|
-
*/
|
|
48
|
-
this.applicationTheme = 'light';
|
|
49
|
-
/**
|
|
50
|
-
* A string representing the ARIA requirement for accessibility.
|
|
51
|
-
* This attribute is used to indicate whether an input field is required for form submission.
|
|
52
|
-
* @type {boolean}
|
|
53
|
-
* @memberof SegmentedBarComponent
|
|
54
|
-
*/
|
|
55
|
-
this.ariaRequired = false;
|
|
56
|
-
/**
|
|
57
|
-
* Groups the tooltips into one template
|
|
58
|
-
*
|
|
59
|
-
* @type {boolean}
|
|
60
|
-
* @memberof SegmentedBarComponent
|
|
61
|
-
*/
|
|
62
|
-
this.tooltipStats = false;
|
|
63
|
-
this.segmentList = [];
|
|
64
|
-
if (defaultAppTheme) {
|
|
65
|
-
this.applicationTheme = defaultAppTheme;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
calculatePercentages(segments) {
|
|
69
|
-
const total = segments.reduce((sum, segment) => sum + segment.value, 0);
|
|
70
|
-
return segments.map(segment => {
|
|
71
|
-
let percentage = (segment.value / total) * 100;
|
|
72
|
-
let percentageLabel = '';
|
|
73
|
-
if (percentage === 0) {
|
|
74
|
-
percentageLabel = '0%';
|
|
75
|
-
}
|
|
76
|
-
else if (percentage > 0 && percentage < 1) {
|
|
77
|
-
percentageLabel = '>1%';
|
|
78
|
-
}
|
|
79
|
-
else {
|
|
80
|
-
percentageLabel = `${Math.ceil(percentage)}%`;
|
|
81
|
-
}
|
|
82
|
-
return { ...segment, percentage: percentageLabel };
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
get accessibleValueText() {
|
|
86
|
-
return this.segmentList
|
|
87
|
-
.map((segment, index) => `${segment.tooltip || `Value ${index}`}: ${segment.value}`)
|
|
88
|
-
.join(', ');
|
|
89
|
-
}
|
|
90
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedBarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
91
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SegmentedBarComponent, isStandalone: false, selector: "ui-segmented-bar", inputs: { width: "width", size: "size", segments: "segments", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", tooltipStats: "tooltipStats" }, ngImport: i0, template: "<div\n class=\"segmented-bar-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"'segment-size-' + size\"\n [style.width]=\"width\"\n [uiTooltipTemplate]=\"segmentedStats\"\n [showTooltip]=\"tooltipStats\"\n [attr.aria-label]=\"accessibleValueText\"\n role=\"graphics-object\"\n [tabIndex]=\"0\"\n>\n <ng-container *ngFor=\"let segment of segmentList\">\n <div\n class=\"segmented-bar\"\n *ngIf=\"segment.value\"\n [ngClass]=\"segment.color\"\n [ngStyle]=\"{ flex: segment.value }\"\n [matTooltip]=\"!tooltipStats ? segment.tooltip ?? '' : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon *ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n <span>{{ segment.value }}</span>\n </div>\n </ng-container>\n</div>\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n\n </div>\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.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}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46a997}.segmented-bar-container .segmented-bar ui-icon{margin-right:4px}.segmented-bar-container .segmented-bar.teal{background:#46a997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#cbd6cb}.segmented-bar-container .segmented-bar.grey{background:#ededed}.segmented-bar-container[theme=dark].segment-size-small,.segmented-bar-container[theme=light].segment-size-small{font-size:12px}.segmented-bar-container[theme=dark].segment-size-large,.segmented-bar-container[theme=light].segment-size-large{font-size:14px}.segmented-bar-container[theme=dark] .segmented-bar,.segmented-bar-container[theme=light] .segmented-bar{padding:0 4px;color:#242424;background:#80d63e}.segmented-bar-container[theme=dark] .segmented-bar.teal,.segmented-bar-container[theme=light] .segmented-bar.teal{background:#80d63e}.segmented-bar-container[theme=dark] .segmented-bar.rhubarb,.segmented-bar-container[theme=light] .segmented-bar.rhubarb{background:#ffac9a}.segmented-bar-container[theme=dark] .segmented-bar.light-teal,.segmented-bar-container[theme=light] .segmented-bar.light-teal{background:#ffe1b3}.segmented-bar-container[theme=dark] .segmented-bar.grey,.segmented-bar-container[theme=light] .segmented-bar.grey{background:#e9e9e9}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.stats-container{display:flex;flex-direction:row;max-width:248px}.stats-container .segment{display:flex;flex-direction:row;align-items:center}.stats-container .segment .point{margin-right:4px;width:8px;height:8px;border-radius:50%}.stats-container .segment .point.teal{background:#80d63e}.stats-container .segment .point.rhubarb{background:#ffac9a}.stats-container .segment .point.light-teal{background:#ffe1b3}.stats-container .segment .point.grey{background:#e9e9e9}.stats-container .segment .label{margin-right:8px}.stats-container .segment .label.teal{color:#80d63e}.stats-container .segment .label.rhubarb{color:#ffac9a}.stats-container .segment .label.light-teal{color:#ffe1b3}.stats-container .segment .label.grey{color:#e9e9e9}.stats-container .name-column span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.stats-container .value-column{margin-right:8px;color:#fff;min-width:28px}.stats-container .percentage-column{min-width:28px;color:#919191}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i4.TooltipTemplateDirective, selector: "[uiTooltipTemplate]", inputs: ["tooltipPosition", "showTooltip", "uiTooltipTemplate"] }] }); }
|
|
92
|
-
}
|
|
93
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedBarComponent, decorators: [{
|
|
94
|
-
type: Component,
|
|
95
|
-
args: [{ selector: 'ui-segmented-bar', standalone: false, template: "<div\n class=\"segmented-bar-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"'segment-size-' + size\"\n [style.width]=\"width\"\n [uiTooltipTemplate]=\"segmentedStats\"\n [showTooltip]=\"tooltipStats\"\n [attr.aria-label]=\"accessibleValueText\"\n role=\"graphics-object\"\n [tabIndex]=\"0\"\n>\n <ng-container *ngFor=\"let segment of segmentList\">\n <div\n class=\"segmented-bar\"\n *ngIf=\"segment.value\"\n [ngClass]=\"segment.color\"\n [ngStyle]=\"{ flex: segment.value }\"\n [matTooltip]=\"!tooltipStats ? segment.tooltip ?? '' : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon *ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n <span>{{ segment.value }}</span>\n </div>\n </ng-container>\n</div>\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n\n </div>\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.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}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46a997}.segmented-bar-container .segmented-bar ui-icon{margin-right:4px}.segmented-bar-container .segmented-bar.teal{background:#46a997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#cbd6cb}.segmented-bar-container .segmented-bar.grey{background:#ededed}.segmented-bar-container[theme=dark].segment-size-small,.segmented-bar-container[theme=light].segment-size-small{font-size:12px}.segmented-bar-container[theme=dark].segment-size-large,.segmented-bar-container[theme=light].segment-size-large{font-size:14px}.segmented-bar-container[theme=dark] .segmented-bar,.segmented-bar-container[theme=light] .segmented-bar{padding:0 4px;color:#242424;background:#80d63e}.segmented-bar-container[theme=dark] .segmented-bar.teal,.segmented-bar-container[theme=light] .segmented-bar.teal{background:#80d63e}.segmented-bar-container[theme=dark] .segmented-bar.rhubarb,.segmented-bar-container[theme=light] .segmented-bar.rhubarb{background:#ffac9a}.segmented-bar-container[theme=dark] .segmented-bar.light-teal,.segmented-bar-container[theme=light] .segmented-bar.light-teal{background:#ffe1b3}.segmented-bar-container[theme=dark] .segmented-bar.grey,.segmented-bar-container[theme=light] .segmented-bar.grey{background:#e9e9e9}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.stats-container{display:flex;flex-direction:row;max-width:248px}.stats-container .segment{display:flex;flex-direction:row;align-items:center}.stats-container .segment .point{margin-right:4px;width:8px;height:8px;border-radius:50%}.stats-container .segment .point.teal{background:#80d63e}.stats-container .segment .point.rhubarb{background:#ffac9a}.stats-container .segment .point.light-teal{background:#ffe1b3}.stats-container .segment .point.grey{background:#e9e9e9}.stats-container .segment .label{margin-right:8px}.stats-container .segment .label.teal{color:#80d63e}.stats-container .segment .label.rhubarb{color:#ffac9a}.stats-container .segment .label.light-teal{color:#ffe1b3}.stats-container .segment .label.grey{color:#e9e9e9}.stats-container .name-column span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.stats-container .value-column{margin-right:8px;color:#fff;min-width:28px}.stats-container .percentage-column{min-width:28px;color:#919191}\n"] }]
|
|
96
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
97
|
-
type: Optional
|
|
98
|
-
}, {
|
|
99
|
-
type: Inject,
|
|
100
|
-
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
101
|
-
}] }], propDecorators: { width: [{
|
|
102
|
-
type: Input
|
|
103
|
-
}], size: [{
|
|
104
|
-
type: Input
|
|
105
|
-
}], segments: [{
|
|
106
|
-
type: Input,
|
|
107
|
-
args: [{ required: true }]
|
|
108
|
-
}], applicationTheme: [{
|
|
109
|
-
type: Input
|
|
110
|
-
}], ariaLabel: [{
|
|
111
|
-
type: Input
|
|
112
|
-
}], ariaRequired: [{
|
|
113
|
-
type: Input
|
|
114
|
-
}], tooltipStats: [{
|
|
115
|
-
type: Input
|
|
116
|
-
}] } });
|
|
117
|
-
|
|
118
|
-
class SegmentedBarComponentModule {
|
|
119
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
120
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SegmentedBarComponentModule, declarations: [SegmentedBarComponent], imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule], exports: [SegmentedBarComponent] }); }
|
|
121
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule] }); }
|
|
122
|
-
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedBarComponentModule, decorators: [{
|
|
124
|
-
type: NgModule,
|
|
125
|
-
args: [{
|
|
126
|
-
declarations: [SegmentedBarComponent],
|
|
127
|
-
imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule],
|
|
128
|
-
exports: [SegmentedBarComponent]
|
|
129
|
-
}]
|
|
130
|
-
}] });
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* Generated bundle index. Do not edit.
|
|
134
|
-
*/
|
|
135
|
-
|
|
136
|
-
export { SegmentedBarComponent, SegmentedBarComponentModule };
|
|
137
|
-
//# sourceMappingURL=testgorilla-tgo-ui-components-segmented-bar.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-segmented-bar.mjs","sources":["../../../components/segmented-bar/segmented-bar.component.ts","../../../components/segmented-bar/segmented-bar.component.html","../../../components/segmented-bar/segmented-bar.component.module.ts","../../../components/segmented-bar/testgorilla-tgo-ui-components-segmented-bar.ts"],"sourcesContent":["import { Component, Inject, Input, Optional } from '@angular/core';\nimport { SegmentedBar, SegmentedBarVariant, SegmentedBarWithPercentage } from './segmented-bar.model';\nimport { ApplicationTheme } from \"@testgorilla/tgo-ui/components/core\";\n\n@Component({\n selector: 'ui-segmented-bar',\n templateUrl: './segmented-bar.component.html',\n styleUrls: ['./segmented-bar.component.scss'],\n standalone: false\n})\nexport class SegmentedBarComponent {\n /**\n * The width of the segmented bar. Defaults to '100%'.\n * You can use '100%' or '100px' for this field. 100 is just an example\n * @default '100%'\n * @type {string}\n * @memberof SegmentedBarComponent\n */\n @Input() width = '100%';\n\n /**\n * The size variant of the segmented bar. Can be 'small' or 'large'.\n * Defaults to 'large'.\n * @default 'large'\n * @type {SegmentedBarVariant}\n * @memberof SegmentedBarComponent\n */\n @Input() size: SegmentedBarVariant = 'large';\n\n /**\n * The segments to be displayed in the segmented bar.\n * @required true\n * @type {SegmentedBar}\n * @memberof SegmentedBarComponent\n */\n @Input({ required: true }) set segments(segments: SegmentedBar[]) {\n this.segmentList = this.calculatePercentages(segments);\n }\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof SegmentedBarComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof SegmentedBarComponent\n */\n @Input() ariaLabel: string;\n\n /**\n * A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof SegmentedBarComponent\n */\n @Input() ariaRequired = false;\n\n /**\n * Groups the tooltips into one template\n *\n * @type {boolean}\n * @memberof SegmentedBarComponent\n */\n @Input() tooltipStats = false;\n\n segmentList: SegmentedBarWithPercentage[] = [];\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 calculatePercentages(segments: SegmentedBar[]): SegmentedBarWithPercentage[] {\n const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n return segments.map(segment => {\n let percentage = (segment.value / total) * 100;\n let percentageLabel = '';\n\n if (percentage === 0) {\n percentageLabel = '0%';\n } else if (percentage > 0 && percentage < 1) {\n percentageLabel = '>1%';\n } else {\n percentageLabel = `${Math.ceil(percentage)}%`;\n }\n\n return { ...segment, percentage: percentageLabel };\n });\n }\n\n get accessibleValueText(): string {\n return this.segmentList\n .map((segment, index) => `${segment.tooltip || `Value ${index}`}: ${segment.value}`)\n .join(', ');\n }\n}\n","<div\n class=\"segmented-bar-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"'segment-size-' + size\"\n [style.width]=\"width\"\n [uiTooltipTemplate]=\"segmentedStats\"\n [showTooltip]=\"tooltipStats\"\n [attr.aria-label]=\"accessibleValueText\"\n role=\"graphics-object\"\n [tabIndex]=\"0\"\n>\n <ng-container *ngFor=\"let segment of segmentList\">\n <div\n class=\"segmented-bar\"\n *ngIf=\"segment.value\"\n [ngClass]=\"segment.color\"\n [ngStyle]=\"{ flex: segment.value }\"\n [matTooltip]=\"!tooltipStats ? segment.tooltip ?? '' : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon *ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n <span>{{ segment.value }}</span>\n </div>\n </ng-container>\n</div>\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n\n </div>\n</ng-template>\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SegmentedBarComponent } from './segmented-bar.component';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatInputModule } from '@angular/material/input';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\n@NgModule({\n declarations: [SegmentedBarComponent],\n imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule],\n exports: [SegmentedBarComponent]\n})\nexport class SegmentedBarComponentModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, forwardRef, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
-
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
4
|
-
import * as i1 from '@angular/common';
|
|
5
|
-
import { CommonModule } from '@angular/common';
|
|
6
|
-
import * as i2 from '@angular/material/button-toggle';
|
|
7
|
-
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
8
|
-
import * as i3 from '@angular/material/tooltip';
|
|
9
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
10
|
-
|
|
11
|
-
class SegmentedButtonComponent {
|
|
12
|
-
/**
|
|
13
|
-
* Selected button
|
|
14
|
-
*
|
|
15
|
-
* @memberof SegmentedButtonComponent
|
|
16
|
-
*/
|
|
17
|
-
set value(v) {
|
|
18
|
-
this._value = v;
|
|
19
|
-
this.onChange(v);
|
|
20
|
-
}
|
|
21
|
-
get value() {
|
|
22
|
-
return this._value;
|
|
23
|
-
}
|
|
24
|
-
constructor(defaultAppTheme) {
|
|
25
|
-
this.defaultAppTheme = defaultAppTheme;
|
|
26
|
-
/**
|
|
27
|
-
* Whether the component is disabled.
|
|
28
|
-
* Default: false.
|
|
29
|
-
*
|
|
30
|
-
* @type {boolean}
|
|
31
|
-
* @memberof SegmentedButtonComponent
|
|
32
|
-
*/
|
|
33
|
-
this.disabled = false;
|
|
34
|
-
/**
|
|
35
|
-
* Indicator of the Segmented Button width
|
|
36
|
-
*
|
|
37
|
-
* @memberof SegmentedButtonComponent
|
|
38
|
-
*/
|
|
39
|
-
this.fullWidth = false;
|
|
40
|
-
/**
|
|
41
|
-
*
|
|
42
|
-
* Defines the application theme
|
|
43
|
-
*
|
|
44
|
-
* @type {ApplicationTheme}
|
|
45
|
-
* @memberof SegmentedButtonComponent
|
|
46
|
-
*/
|
|
47
|
-
this.applicationTheme = 'light';
|
|
48
|
-
this.buttonSelected = new EventEmitter();
|
|
49
|
-
this.onChange = (v) => { };
|
|
50
|
-
this.onTouch = () => { };
|
|
51
|
-
if (defaultAppTheme) {
|
|
52
|
-
this.applicationTheme = defaultAppTheme;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
writeValue(obj) {
|
|
56
|
-
this.value = obj;
|
|
57
|
-
}
|
|
58
|
-
setDisabledState(isDisabled) {
|
|
59
|
-
this.disabled = isDisabled;
|
|
60
|
-
}
|
|
61
|
-
registerOnChange(fn) {
|
|
62
|
-
this.onChange = fn;
|
|
63
|
-
}
|
|
64
|
-
registerOnTouched(fn) {
|
|
65
|
-
this.onTouch = fn;
|
|
66
|
-
}
|
|
67
|
-
manualChangeValue({ value }) {
|
|
68
|
-
this.value = value;
|
|
69
|
-
this.buttonSelected.emit(value);
|
|
70
|
-
}
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SegmentedButtonComponent, isStandalone: false, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig", disabled: "disabled", fullWidth: "fullWidth", value: "value", applicationTheme: "applicationTheme" }, outputs: { buttonSelected: "buttonSelected" }, providers: [
|
|
73
|
-
{
|
|
74
|
-
provide: NG_VALUE_ACCESSOR,
|
|
75
|
-
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
76
|
-
multi: true,
|
|
77
|
-
},
|
|
78
|
-
], ngImport: i0, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n [hideSingleSelectionIndicator]=\"true\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\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}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
79
|
-
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
81
|
-
type: Component,
|
|
82
|
-
args: [{ selector: 'ui-segmented-button', providers: [
|
|
83
|
-
{
|
|
84
|
-
provide: NG_VALUE_ACCESSOR,
|
|
85
|
-
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
86
|
-
multi: true,
|
|
87
|
-
},
|
|
88
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n [hideSingleSelectionIndicator]=\"true\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\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}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"] }]
|
|
89
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
90
|
-
type: Optional
|
|
91
|
-
}, {
|
|
92
|
-
type: Inject,
|
|
93
|
-
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
94
|
-
}] }], propDecorators: { buttonConfig: [{
|
|
95
|
-
type: Input,
|
|
96
|
-
args: [{ required: true }]
|
|
97
|
-
}], disabled: [{
|
|
98
|
-
type: Input
|
|
99
|
-
}], fullWidth: [{
|
|
100
|
-
type: Input
|
|
101
|
-
}], value: [{
|
|
102
|
-
type: Input
|
|
103
|
-
}], applicationTheme: [{
|
|
104
|
-
type: Input
|
|
105
|
-
}], buttonSelected: [{
|
|
106
|
-
type: Output
|
|
107
|
-
}] } });
|
|
108
|
-
|
|
109
|
-
class SegmentedButtonComponentModule {
|
|
110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
111
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SegmentedButtonComponentModule, declarations: [SegmentedButtonComponent], imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule], exports: [SegmentedButtonComponent] }); }
|
|
112
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedButtonComponentModule, imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule] }); }
|
|
113
|
-
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SegmentedButtonComponentModule, decorators: [{
|
|
115
|
-
type: NgModule,
|
|
116
|
-
args: [{
|
|
117
|
-
declarations: [SegmentedButtonComponent],
|
|
118
|
-
exports: [SegmentedButtonComponent],
|
|
119
|
-
imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule],
|
|
120
|
-
}]
|
|
121
|
-
}] });
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
* Generated bundle index. Do not edit.
|
|
125
|
-
*/
|
|
126
|
-
|
|
127
|
-
export { SegmentedButtonComponent, SegmentedButtonComponentModule };
|
|
128
|
-
//# sourceMappingURL=testgorilla-tgo-ui-components-segmented-button.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-segmented-button.mjs","sources":["../../../components/segmented-button/segmented-button.component.ts","../../../components/segmented-button/segmented-button.component.html","../../../components/segmented-button/segmented-button.component.module.ts","../../../components/segmented-button/testgorilla-tgo-ui-components-segmented-button.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n forwardRef,\n Inject,\n Input,\n Optional,\n Output\n} from '@angular/core';\nimport { SegmentedButton } from './segmented-button.model';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-segmented-button',\n templateUrl: './segmented-button.component.html',\n styleUrls: ['./segmented-button.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedButtonComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class SegmentedButtonComponent implements ControlValueAccessor {\n /**\n * Input property to set the buttons for the segmented button.\n * @type SegmentedButton\n * @memberof SegmentedButtonComponent\n */\n @Input({ required: true }) buttonConfig: SegmentedButton[];\n\n /**\n * Whether the component is disabled.\n * Default: false.\n *\n * @type {boolean}\n * @memberof SegmentedButtonComponent\n */\n @Input() disabled = false;\n\n /**\n * Indicator of the Segmented Button width\n *\n * @memberof SegmentedButtonComponent\n */\n @Input() fullWidth = false;\n\n /**\n * Selected button\n *\n * @memberof SegmentedButtonComponent\n */\n @Input() set value(v: any) {\n this._value = v;\n this.onChange(v);\n }\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof SegmentedButtonComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n @Output() buttonSelected = new EventEmitter<any>();\n\n protected _value: any;\n\n get value(): any {\n return this._value;\n }\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 onChange = (v: any) => {};\n onTouch = () => {};\n\n writeValue(obj: any): void {\n this.value = obj;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n manualChangeValue({ value }: any) {\n this.value = value;\n this.buttonSelected.emit(value);\n }\n}\n","<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n [hideSingleSelectionIndicator]=\"true\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SegmentedButtonComponent } from './segmented-button.component';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { FormsModule } from '@angular/forms';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@NgModule({\n declarations: [SegmentedButtonComponent],\n exports: [SegmentedButtonComponent],\n imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule],\n})\nexport class SegmentedButtonComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Optional, Inject, Component } from '@angular/core';
|
|
3
|
-
import * as i2 from 'ngx-skeleton-loader';
|
|
4
|
-
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
5
|
-
import * as i1 from '@angular/common';
|
|
6
|
-
import { CommonModule } from '@angular/common';
|
|
7
|
-
import { BehaviorSubject, combineLatest, map } from 'rxjs';
|
|
8
|
-
|
|
9
|
-
class SkeletonComponent {
|
|
10
|
-
set theme(value) {
|
|
11
|
-
this.theme$.next(value ?? {});
|
|
12
|
-
}
|
|
13
|
-
set appearance(value) {
|
|
14
|
-
this.appearance$.next(value ?? 'line');
|
|
15
|
-
}
|
|
16
|
-
constructor(defaultAppTheme) {
|
|
17
|
-
this.defaultAppTheme = defaultAppTheme;
|
|
18
|
-
this.count = '';
|
|
19
|
-
this.isAiTheme = false;
|
|
20
|
-
/**
|
|
21
|
-
*
|
|
22
|
-
* Defines the application theme
|
|
23
|
-
*
|
|
24
|
-
* @type {ApplicationTheme}
|
|
25
|
-
* @memberof SkeletonComponent
|
|
26
|
-
*/
|
|
27
|
-
this.applicationTheme = 'light';
|
|
28
|
-
this.theme$ = new BehaviorSubject({});
|
|
29
|
-
this.appearance$ = new BehaviorSubject('line');
|
|
30
|
-
this.currentTheme$ = combineLatest([this.theme$, this.appearance$]).pipe(map(([theme, appearance]) => this.getThemeWithDefaultValues(theme, appearance)));
|
|
31
|
-
if (defaultAppTheme) {
|
|
32
|
-
this.applicationTheme = defaultAppTheme;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
getThemeWithDefaultValues(theme, appearance) {
|
|
36
|
-
if (theme && appearance === 'circle') {
|
|
37
|
-
return {
|
|
38
|
-
...theme,
|
|
39
|
-
height: theme['height'] || theme['width'] || '48px',
|
|
40
|
-
width: theme['width'] || theme['height'] || '48px',
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
else if (theme && appearance !== 'circle' && !theme['height']) {
|
|
44
|
-
return {
|
|
45
|
-
...theme,
|
|
46
|
-
height: '24px',
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
return theme;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
54
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { count: "count", theme: "theme", appearance: "appearance", isAiTheme: "isAiTheme", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ngx-skeleton-loader\n [class.skeleton-ai]=\"isAiTheme\"\n [count]=\"count\"\n [theme]=\"currentTheme$ | async\"\n [appearance]=\"(appearance$ | async) || 'line'\"\n></ngx-skeleton-loader>\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}.skeleton-ai ::ng-deep .skeleton-loader{background:linear-gradient(to right,#d410aa 25%,#0165fc);opacity:.2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
|
|
55
|
-
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
57
|
-
type: Component,
|
|
58
|
-
args: [{ selector: 'ui-skeleton', imports: [CommonModule, NgxSkeletonLoaderModule], template: "<ngx-skeleton-loader\n [class.skeleton-ai]=\"isAiTheme\"\n [count]=\"count\"\n [theme]=\"currentTheme$ | async\"\n [appearance]=\"(appearance$ | async) || 'line'\"\n></ngx-skeleton-loader>\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}.skeleton-ai ::ng-deep .skeleton-loader{background:linear-gradient(to right,#d410aa 25%,#0165fc);opacity:.2}\n"] }]
|
|
59
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
60
|
-
type: Optional
|
|
61
|
-
}, {
|
|
62
|
-
type: Inject,
|
|
63
|
-
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
64
|
-
}] }], propDecorators: { count: [{
|
|
65
|
-
type: Input
|
|
66
|
-
}], theme: [{
|
|
67
|
-
type: Input
|
|
68
|
-
}], appearance: [{
|
|
69
|
-
type: Input
|
|
70
|
-
}], isAiTheme: [{
|
|
71
|
-
type: Input
|
|
72
|
-
}], applicationTheme: [{
|
|
73
|
-
type: Input
|
|
74
|
-
}] } });
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Generated bundle index. Do not edit.
|
|
78
|
-
*/
|
|
79
|
-
|
|
80
|
-
export { SkeletonComponent };
|
|
81
|
-
//# sourceMappingURL=testgorilla-tgo-ui-components-skeleton.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-skeleton.mjs","sources":["../../../components/skeleton/skeleton.component.ts","../../../components/skeleton/skeleton.component.html","../../../components/skeleton/testgorilla-tgo-ui-components-skeleton.ts"],"sourcesContent":["import { Component, Inject, Input, Optional } from '@angular/core';\nimport { NgxSkeletonLoaderConfigTheme, NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';\nimport { CommonModule } from '@angular/common';\nimport { BehaviorSubject, combineLatest, map } from 'rxjs';\nimport { Appearance } from './skeleton.model';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-skeleton',\n templateUrl: './skeleton.component.html',\n styleUrls: ['./skeleton.component.scss'],\n imports: [CommonModule, NgxSkeletonLoaderModule]\n})\nexport class SkeletonComponent {\n @Input() count: number | string = '';\n @Input() set theme(value: NgxSkeletonLoaderConfigTheme) {\n this.theme$.next(value ?? {});\n }\n @Input() set appearance(value: Appearance) {\n this.appearance$.next(value ?? 'line');\n }\n @Input() isAiTheme = false;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof SkeletonComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\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 protected readonly theme$ = new BehaviorSubject<NgxSkeletonLoaderConfigTheme>({});\n protected readonly appearance$ = new BehaviorSubject<Appearance>('line');\n protected readonly currentTheme$ = combineLatest([this.theme$, this.appearance$]).pipe(\n map(([theme, appearance]) => this.getThemeWithDefaultValues(theme, appearance))\n );\n\n private getThemeWithDefaultValues(\n theme: NgxSkeletonLoaderConfigTheme,\n appearance: Appearance\n ): NgxSkeletonLoaderConfigTheme {\n if (theme && appearance === 'circle') {\n return {\n ...theme,\n height: theme['height'] || theme['width'] || '48px',\n width: theme['width'] || theme['height'] || '48px',\n };\n } else if (theme && appearance !== 'circle' && !theme['height']) {\n return {\n ...theme,\n height: '24px',\n };\n } else {\n return theme;\n }\n }\n}\n","<ngx-skeleton-loader\n [class.skeleton-ai]=\"isAiTheme\"\n [count]=\"count\"\n [theme]=\"currentTheme$ | async\"\n [appearance]=\"(appearance$ | async) || 'line'\"\n></ngx-skeleton-loader>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|