novo-elements 13.2.0 → 13.3.0-next.2
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/addons/ckeditor/CKEditor.scss +8 -0
- package/elements/agenda/week/AgendaWeekView.scss +1 -1
- package/elements/breadcrumbs/Breadcrumb.scss +1 -1
- package/elements/button/styles/button-dialogue.scss +12 -0
- package/elements/button/styles/button-icon.scss +20 -0
- package/elements/button/styles/button-primary.scss +16 -1
- package/elements/button/styles/button-secondary.scss +14 -1
- package/elements/button/styles/button-standard.scss +14 -0
- package/elements/button/styles/button.scss +12 -1
- package/elements/card/Card.scss +80 -19
- package/elements/card/CardContent.scss +3 -0
- package/elements/card/CardHeader.scss +23 -0
- package/elements/card/index.d.ts +5 -3
- package/elements/category-dropdown/CategoryDropdown.scss +1 -1
- package/elements/checkbox/CheckList.scss +69 -0
- package/elements/checkbox/Checkbox.scss +104 -0
- package/elements/chips/Chip.scss +47 -1
- package/elements/chips/Chips.scss +9 -0
- package/elements/common/index.d.ts +14 -4
- package/elements/common/option/option.component.scss +11 -0
- package/elements/common/typography/text.mixins.scss +1 -1
- package/elements/data-table/data-table.component.scss +81 -3
- package/elements/data-table/pagination/data-table-pagination.component.scss +73 -0
- package/elements/date-picker/DatePicker.scss +1 -6
- package/elements/date-picker/DatePickerInput.scss +5 -0
- package/elements/date-time-picker/_DateTimePicker.scss +1 -1
- package/elements/dropdown/Dropdown.scss +17 -1
- package/elements/field/field.scss +10 -6
- package/elements/field/hint/hint.scss +6 -0
- package/elements/form/ControlGroup.scss +13 -0
- package/elements/form/Form.scss +272 -1
- package/elements/form/extras/address/Address.scss +77 -0
- package/elements/form/fieldset-header.scss +32 -0
- package/elements/form/index.d.ts +14 -4
- package/elements/header/Header.scss +45 -3
- package/elements/layout/index.d.ts +28 -4
- package/elements/list/list-item-content.scss +11 -10
- package/elements/menu/menu-content.component.scss +1 -0
- package/elements/modal/modal.component.scss +3 -13
- package/elements/modal/notification.component.scss +1 -6
- package/elements/picker/Picker.scss +26 -5
- package/elements/picker/extras/picker-results/PickerResults.scss +52 -0
- package/elements/progress/Progress.scss +8 -0
- package/elements/progress/ProgressBar.scss +4 -1
- package/elements/search/SearchBox.scss +53 -0
- package/elements/search/index.d.ts +19 -9
- package/elements/select/Select.scss +1 -1
- package/elements/simple-table/table.scss +1 -1
- package/elements/stepper/stepper.component.scss +4 -4
- package/elements/switch/Switch.scss +39 -3
- package/elements/tabbed-group-picker/TabbedGroupPicker.scss +47 -0
- package/elements/tabs/tab.scss +53 -14
- package/elements/tiles/Tiles.scss +24 -2
- package/elements/time-picker/TimePicker.scss +2 -2
- package/elements/time-picker/TimePickerInput.scss +7 -2
- package/elements/tip-well/TipWell.scss +53 -0
- package/elements/tip-well/index.d.ts +5 -1
- package/elements/toolbar/toolbar.component.scss +15 -0
- package/elements/tooltip/Tooltip.scss +19 -22
- package/elements/tooltip/index.d.ts +2 -1
- package/fesm2022/novo-elements-addons-ckeditor.mjs +2 -2
- package/fesm2022/novo-elements-addons-ckeditor.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-agenda.mjs +2 -2
- package/fesm2022/novo-elements-elements-breadcrumbs.mjs +3 -3
- package/fesm2022/novo-elements-elements-breadcrumbs.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-button.mjs +2 -2
- package/fesm2022/novo-elements-elements-button.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-card.mjs +27 -21
- package/fesm2022/novo-elements-elements-card.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-category-dropdown.mjs +2 -2
- package/fesm2022/novo-elements-elements-category-dropdown.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-checkbox.mjs +4 -4
- package/fesm2022/novo-elements-elements-checkbox.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-chips.mjs +6 -6
- package/fesm2022/novo-elements-elements-chips.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-common.mjs +52 -21
- package/fesm2022/novo-elements-elements-common.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-data-table.mjs +4 -4
- package/fesm2022/novo-elements-elements-data-table.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-date-picker.mjs +4 -4
- package/fesm2022/novo-elements-elements-date-picker.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-date-time-picker.mjs +2 -2
- package/fesm2022/novo-elements-elements-date-time-picker.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-dropdown.mjs +2 -2
- package/fesm2022/novo-elements-elements-dropdown.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-field.mjs +4 -4
- package/fesm2022/novo-elements-elements-field.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-form.mjs +145 -92
- package/fesm2022/novo-elements-elements-form.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-header.mjs +2 -2
- package/fesm2022/novo-elements-elements-header.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-layout.mjs +73 -14
- package/fesm2022/novo-elements-elements-layout.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-list.mjs +2 -2
- package/fesm2022/novo-elements-elements-list.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-menu.mjs +2 -2
- package/fesm2022/novo-elements-elements-menu.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-modal.mjs +4 -4
- package/fesm2022/novo-elements-elements-modal.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-multi-picker.mjs +2 -2
- package/fesm2022/novo-elements-elements-multi-picker.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-picker.mjs +6 -6
- package/fesm2022/novo-elements-elements-picker.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-progress.mjs +4 -4
- package/fesm2022/novo-elements-elements-progress.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-search.mjs +63 -17
- package/fesm2022/novo-elements-elements-search.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-select.mjs +2 -2
- package/fesm2022/novo-elements-elements-select.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-simple-table.mjs +4 -4
- package/fesm2022/novo-elements-elements-simple-table.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-stepper.mjs +6 -6
- package/fesm2022/novo-elements-elements-stepper.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-switch.mjs +2 -2
- package/fesm2022/novo-elements-elements-switch.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-tabbed-group-picker.mjs +2 -2
- package/fesm2022/novo-elements-elements-tabbed-group-picker.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-tabs.mjs +4 -4
- package/fesm2022/novo-elements-elements-tabs.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-tiles.mjs +2 -2
- package/fesm2022/novo-elements-elements-tiles.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-time-picker.mjs +4 -4
- package/fesm2022/novo-elements-elements-time-picker.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-tip-well.mjs +26 -6
- package/fesm2022/novo-elements-elements-tip-well.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-toolbar.mjs +2 -2
- package/fesm2022/novo-elements-elements-toolbar.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-tooltip.mjs +8 -4
- package/fesm2022/novo-elements-elements-tooltip.mjs.map +1 -1
- package/fesm2022/novo-elements-utils.mjs +4822 -364
- package/fesm2022/novo-elements-utils.mjs.map +1 -1
- package/package.json +2 -2
- package/styles/content/links.scss +4 -0
- package/styles/themes/bh2026.scss +131 -53
- package/styles/typography.scss +6 -0
- package/styles/variables.scss +2 -0
- package/utils/index.d.ts +2 -2
|
@@ -70,6 +70,59 @@
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
+
:host(.has-border) {
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: var(--spacing-8, 0.8rem);
|
|
77
|
+
height: auto;
|
|
78
|
+
padding: var(--spacing-4, 0.4rem) 0 var(--spacing-4, 0.4rem) var(--spacing-16, 1.6rem);
|
|
79
|
+
border-radius: var(--border-radius-sm, 3px);
|
|
80
|
+
max-width: none;
|
|
81
|
+
box-shadow: 0 0.2rem 0.2rem var(--color-transparency-charcoal-04, transparent);
|
|
82
|
+
|
|
83
|
+
novo-icon:first-child {
|
|
84
|
+
flex-shrink: 0;
|
|
85
|
+
font-size: 1.6rem;
|
|
86
|
+
color: var(--color-text-subtle, var(--text-muted));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
[novo-search-trailing-action] {
|
|
90
|
+
flex-shrink: 0;
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
color: var(--color-text-subtle, var(--text-muted));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
::ng-deep [novo-search-leading-content] {
|
|
96
|
+
flex: 1;
|
|
97
|
+
min-width: 0;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
> input {
|
|
103
|
+
flex: 1 1 0;
|
|
104
|
+
min-width: 0;
|
|
105
|
+
height: auto;
|
|
106
|
+
|
|
107
|
+
&::placeholder {
|
|
108
|
+
color: var(--color-text-subtle, var(--text-muted));
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
:host(.has-border.has-leading-content) {
|
|
114
|
+
> input {
|
|
115
|
+
display: none;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host-context([data-theme='bh2026']) {
|
|
120
|
+
&.has-border {
|
|
121
|
+
border: 1px solid var(--color-border-default);
|
|
122
|
+
border-radius: var(--button-radius);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
73
126
|
header {
|
|
74
127
|
novo-search.always-open:not(.focused) {
|
|
75
128
|
button {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { OnInit, ElementRef, EventEmitter, ChangeDetectorRef, NgZone } from '@angular/core';
|
|
2
|
+
import { OnInit, AfterContentChecked, ElementRef, EventEmitter, ChangeDetectorRef, NgZone } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
4
|
import { NovoLabelService } from 'novo-elements/services';
|
|
5
5
|
import * as i2 from '@angular/common';
|
|
@@ -8,7 +8,15 @@ import * as i4 from 'novo-elements/elements/picker';
|
|
|
8
8
|
import * as i5 from 'novo-elements/elements/tooltip';
|
|
9
9
|
import * as i6 from 'novo-elements/elements/common';
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
/**
|
|
12
|
+
* Marker directive for content projected into the leading (left) area of `novo-search`.
|
|
13
|
+
* When present, the text input is hidden and the projected content fills its space.
|
|
14
|
+
*/
|
|
15
|
+
declare class NovoSearchLeadingContentDirective {
|
|
16
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchLeadingContentDirective, never>;
|
|
17
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NovoSearchLeadingContentDirective, "[novo-search-leading-content]", never, {}, {}, never, never, false, never>;
|
|
18
|
+
}
|
|
19
|
+
declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit, AfterContentChecked {
|
|
12
20
|
element: ElementRef;
|
|
13
21
|
labels: NovoLabelService;
|
|
14
22
|
private _changeDetectorRef;
|
|
@@ -18,6 +26,8 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
|
|
|
18
26
|
position: string;
|
|
19
27
|
placeholder: string;
|
|
20
28
|
alwaysOpen: boolean;
|
|
29
|
+
bordered: boolean;
|
|
30
|
+
get hasBorder(): boolean;
|
|
21
31
|
theme: string;
|
|
22
32
|
color: string;
|
|
23
33
|
closeOnSelect: boolean;
|
|
@@ -32,6 +42,8 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
|
|
|
32
42
|
applySearch: EventEmitter<KeyboardEvent>;
|
|
33
43
|
focused: boolean;
|
|
34
44
|
value: any;
|
|
45
|
+
leadingContent: NovoSearchLeadingContentDirective;
|
|
46
|
+
get hasLeadingContent(): boolean;
|
|
35
47
|
/** View -> model callback called when value changes */
|
|
36
48
|
_onChange: (value: any) => void;
|
|
37
49
|
/** View -> model callback called when autocomplete has been touched */
|
|
@@ -40,12 +52,10 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
|
|
|
40
52
|
overlay: any;
|
|
41
53
|
input: any;
|
|
42
54
|
private debounceSearchChange;
|
|
55
|
+
private _hasLeadingContent;
|
|
43
56
|
constructor(element: ElementRef, labels: NovoLabelService, _changeDetectorRef: ChangeDetectorRef, _zone: NgZone);
|
|
44
57
|
ngOnInit(): void;
|
|
45
|
-
|
|
46
|
-
* @name showFasterFind
|
|
47
|
-
* @description This function shows the picker and adds the active class (for animation)
|
|
48
|
-
*/
|
|
58
|
+
ngAfterContentChecked(): void;
|
|
49
59
|
showSearch(event?: any, forceClose?: boolean): void;
|
|
50
60
|
onFocus(): void;
|
|
51
61
|
onBlur(): void;
|
|
@@ -73,13 +83,13 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
|
|
|
73
83
|
*/
|
|
74
84
|
clearValue(skip: any): void;
|
|
75
85
|
static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchBoxElement, never>;
|
|
76
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NovoSearchBoxElement, "novo-search", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "alwaysOpen": { "alias": "alwaysOpen"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "color": { "alias": "color"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "keepOpen": { "alias": "keepOpen"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "allowPropagation": { "alias": "allowPropagation"; "required": false; }; "overrideElement": { "alias": "overrideElement"; "required": false; }; }, { "searchChanged": "searchChanged"; "applySearch": "applySearch"; },
|
|
86
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NovoSearchBoxElement, "novo-search", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "alwaysOpen": { "alias": "alwaysOpen"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "color": { "alias": "color"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "keepOpen": { "alias": "keepOpen"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "allowPropagation": { "alias": "allowPropagation"; "required": false; }; "overrideElement": { "alias": "overrideElement"; "required": false; }; }, { "searchChanged": "searchChanged"; "applySearch": "applySearch"; }, ["leadingContent"], ["[novo-search-leading-content]", "[novo-search-trailing-action]", "*"], false, never>;
|
|
77
87
|
}
|
|
78
88
|
|
|
79
89
|
declare class NovoSearchBoxModule {
|
|
80
90
|
static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchBoxModule, never>;
|
|
81
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<NovoSearchBoxModule, [typeof NovoSearchBoxElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoPickerModule, typeof i5.NovoTooltipModule, typeof i6.NovoOverlayModule], [typeof NovoSearchBoxElement]>;
|
|
91
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<NovoSearchBoxModule, [typeof NovoSearchBoxElement, typeof NovoSearchLeadingContentDirective], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoPickerModule, typeof i5.NovoTooltipModule, typeof i6.NovoOverlayModule], [typeof NovoSearchBoxElement, typeof NovoSearchLeadingContentDirective]>;
|
|
82
92
|
static ɵinj: i0.ɵɵInjectorDeclaration<NovoSearchBoxModule>;
|
|
83
93
|
}
|
|
84
94
|
|
|
85
|
-
export { NovoSearchBoxElement, NovoSearchBoxModule };
|
|
95
|
+
export { NovoSearchBoxElement, NovoSearchBoxModule, NovoSearchLeadingContentDirective };
|
|
@@ -84,13 +84,13 @@
|
|
|
84
84
|
z-index: z(overlay);
|
|
85
85
|
max-height: 219px;
|
|
86
86
|
min-width: 200px;
|
|
87
|
-
width: 100%;
|
|
88
87
|
max-width: 800px;
|
|
89
88
|
width: inherit;
|
|
90
89
|
overflow: auto;
|
|
91
90
|
opacity: 1;
|
|
92
91
|
}
|
|
93
92
|
background-color: var(--background-bright);
|
|
93
|
+
border-radius: var(--border-radius-sm);
|
|
94
94
|
cursor: default;
|
|
95
95
|
list-style: none;
|
|
96
96
|
overflow: auto;
|
|
@@ -349,5 +349,5 @@ novo-simple-table-pagination {
|
|
|
349
349
|
// bh2026: subtle, medium-weight column headers (matches data-table).
|
|
350
350
|
[data-theme='bh2026'] .novo-simple-header-cell {
|
|
351
351
|
font-weight: 600;
|
|
352
|
-
color: var(--color-
|
|
352
|
+
color: var(--color-text-subtle);
|
|
353
353
|
}
|
|
@@ -102,16 +102,16 @@ $novo-stepper-line-gap: 8px !default;
|
|
|
102
102
|
// bh2026: neutral progress circles
|
|
103
103
|
:host-context([data-theme='bh2026']) {
|
|
104
104
|
.novo-step-icon .novo-step-number {
|
|
105
|
-
background: var(--color-
|
|
105
|
+
background: var(--color-text-body);
|
|
106
106
|
color: #fff;
|
|
107
|
-
border: 1px solid var(--color-
|
|
107
|
+
border: 1px solid var(--color-text-body);
|
|
108
108
|
border-radius: 50%;
|
|
109
109
|
box-shadow: none;
|
|
110
110
|
}
|
|
111
111
|
.novo-step-icon-not-touched .novo-step-number {
|
|
112
112
|
background: transparent;
|
|
113
|
-
color: var(--color-
|
|
114
|
-
border: 1px solid var(--color-border-default
|
|
113
|
+
color: var(--color-text-subtle);
|
|
114
|
+
border: 1px solid var(--color-border-default);
|
|
115
115
|
border-radius: 50%;
|
|
116
116
|
box-shadow: none;
|
|
117
117
|
}
|
|
@@ -142,10 +142,46 @@ $switch-thumb-size: 20px !default;
|
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
// bh2026:
|
|
145
|
+
// bh2026: 32×20 pill track, 16×16 thumb, always white — per Figma spec
|
|
146
146
|
:host-context([data-theme='bh2026']) {
|
|
147
|
+
.novo-switch-container {
|
|
148
|
+
width: 32px;
|
|
149
|
+
height: 20px;
|
|
150
|
+
}
|
|
147
151
|
.novo-switch-bar {
|
|
148
|
-
|
|
149
|
-
|
|
152
|
+
top: 0;
|
|
153
|
+
left: 0;
|
|
154
|
+
width: 32px;
|
|
155
|
+
height: 20px;
|
|
156
|
+
border-radius: 10px;
|
|
157
|
+
background-color: white;
|
|
158
|
+
border: 1px solid var(--color-border-input);
|
|
159
|
+
}
|
|
160
|
+
.novo-switch-thumb-container {
|
|
161
|
+
top: 2px;
|
|
162
|
+
left: 2px;
|
|
163
|
+
width: 12px; // travel: 32 - 16 - 4px padding = 12px
|
|
164
|
+
}
|
|
165
|
+
.novo-switch-thumb {
|
|
166
|
+
height: 16px;
|
|
167
|
+
width: 16px;
|
|
168
|
+
background-color: white;
|
|
169
|
+
border: 1px solid var(--color-border-input);
|
|
170
|
+
box-shadow: 0px 2px 4px 0px var(--color-transparency-charcoal-04);
|
|
171
|
+
|
|
172
|
+
novo-icon {
|
|
173
|
+
display: none;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
&[aria-checked="true"] {
|
|
178
|
+
.novo-switch-bar {
|
|
179
|
+
background-color: var(--color-utility-blue-600);
|
|
180
|
+
border: none;
|
|
181
|
+
}
|
|
182
|
+
.novo-switch-thumb {
|
|
183
|
+
background-color: white;
|
|
184
|
+
border: none;
|
|
185
|
+
}
|
|
150
186
|
}
|
|
151
187
|
}
|
|
@@ -182,3 +182,50 @@
|
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
|
+
|
|
186
|
+
// bh2026: icon-theme button must not be constrained to a square when it carries chips/label content
|
|
187
|
+
::ng-deep [data-theme='bh2026'] novo-button.tabbed-group-picker-button[theme='icon'] {
|
|
188
|
+
width: auto;
|
|
189
|
+
min-width: max-content;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// bh2026: Half-pill shaped indicator, updated colors
|
|
193
|
+
::ng-deep [data-theme='bh2026'] .dropdown-container {
|
|
194
|
+
.tabbed-group-picker-search {
|
|
195
|
+
padding-left: var(--spacing-lg);
|
|
196
|
+
}
|
|
197
|
+
.tabbed-group-picker-column.left {
|
|
198
|
+
novo-nav > novo-tab {
|
|
199
|
+
margin-right: 0;
|
|
200
|
+
|
|
201
|
+
.novo-tab-link {
|
|
202
|
+
margin-left: var(--spacing-sm);
|
|
203
|
+
margin-right: var(--spacing-sm);
|
|
204
|
+
|
|
205
|
+
i {
|
|
206
|
+
padding-left: var(--spacing-sm);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&.active {
|
|
211
|
+
.novo-tab-link {
|
|
212
|
+
font-weight: var(--typography-tabs-active-font-weight);
|
|
213
|
+
color: var(--color-text-body);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.indicator {
|
|
217
|
+
background: var(--novo-tabbed-picker-accent, var(--color-border-utility-positive));
|
|
218
|
+
border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
&:hover .novo-tab-link {
|
|
222
|
+
font-weight: var(--typography-tabs-active-font-weight);
|
|
223
|
+
color: var(--color-text-body);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
.tabbed-group-picker-column.right {
|
|
229
|
+
padding-top: var(--spacing-sm);
|
|
230
|
+
}
|
|
231
|
+
}
|
package/elements/tabs/tab.scss
CHANGED
|
@@ -28,6 +28,8 @@
|
|
|
28
28
|
gap: var(--spacing-xs);
|
|
29
29
|
cursor: pointer;
|
|
30
30
|
text-transform: uppercase;
|
|
31
|
+
-webkit-user-select: none;
|
|
32
|
+
user-select: none;
|
|
31
33
|
&:focus {
|
|
32
34
|
outline: none;
|
|
33
35
|
}
|
|
@@ -157,44 +159,81 @@
|
|
|
157
159
|
}
|
|
158
160
|
}
|
|
159
161
|
|
|
160
|
-
// bh2026:
|
|
162
|
+
// bh2026: subtle default text, body text when active/hover, blue indicator only
|
|
161
163
|
:host-context([data-theme='bh2026']) {
|
|
162
164
|
margin-right: var(--spacing-gap-lg);
|
|
163
|
-
|
|
165
|
+
|
|
164
166
|
.novo-tab-link {
|
|
165
|
-
color: var(--color-
|
|
167
|
+
color: var(--color-text-subtle);
|
|
166
168
|
// Tabs are Title Case, not uppercase.
|
|
167
169
|
text-transform: none;
|
|
168
|
-
font-weight:
|
|
170
|
+
font-weight: var(--typography-tabs-default-font-weight);
|
|
169
171
|
}
|
|
170
172
|
|
|
171
173
|
&.active,
|
|
172
174
|
&.router-link-active {
|
|
173
|
-
color: var(--color-content-link-hover, #221f1f);
|
|
174
175
|
.novo-tab-link {
|
|
175
|
-
color: var(--color-
|
|
176
|
-
font-weight:
|
|
176
|
+
color: var(--color-text-body);
|
|
177
|
+
font-weight: var(--typography-tabs-active-font-weight);
|
|
177
178
|
}
|
|
178
179
|
.indicator {
|
|
179
|
-
background: var(--color-
|
|
180
|
-
border-radius: 999px;
|
|
181
|
-
|
|
182
|
-
border-radius: 3px 3px 0 0 / 100% 100% 0 0;
|
|
180
|
+
background: var(--tab-indicator-color, var(--color-border-utility-positive));
|
|
181
|
+
border-radius: 999px 999px 0 0;
|
|
182
|
+
height: 2px;
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
&:hover {
|
|
186
|
+
&:hover:not(.active):not(.router-link-active):not(.disabled) {
|
|
187
187
|
.novo-tab-link {
|
|
188
|
-
|
|
188
|
+
color: var(--color-text-body);
|
|
189
|
+
font-weight: var(--typography-tabs-default-font-weight) !important;
|
|
189
190
|
}
|
|
190
191
|
}
|
|
191
192
|
}
|
|
192
193
|
|
|
194
|
+
:host-context([data-theme='bh2026'] novo-nav[direction=vertical]) {
|
|
195
|
+
margin-right: 0;
|
|
196
|
+
|
|
197
|
+
&.active,
|
|
198
|
+
&.router-link-active {
|
|
199
|
+
.indicator {
|
|
200
|
+
border-radius: 0 999px 999px 0;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
:host-context([data-theme='bh2026'] novo-nav[theme="color"]) {
|
|
206
|
+
.novo-tab-link {
|
|
207
|
+
color: var(--color-text-subtle) !important;
|
|
208
|
+
text-transform: none;
|
|
209
|
+
font-weight: var(--typography-tabs-default-font-weight);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
&.active,
|
|
213
|
+
&.router-link-active {
|
|
214
|
+
.novo-tab-link {
|
|
215
|
+
color: var(--color-text-body) !important;
|
|
216
|
+
font-weight: var(--typography-tabs-active-font-weight);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.indicator {
|
|
220
|
+
background: var(--tab-indicator-color, var(--color-border-utility-positive));
|
|
221
|
+
border-radius: 999px 999px 0 0;
|
|
222
|
+
height: 2px;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
&:hover:not(.active):not(.router-link-active):not(.disabled) {
|
|
227
|
+
.novo-tab-link {
|
|
228
|
+
color: var(--color-text-body) !important;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
193
232
|
|
|
194
233
|
:host-context(novo-nav[theme="color"]),
|
|
195
234
|
:host-context(novo-nav[theme="neutral"]) {
|
|
196
235
|
.novo-tab-link {
|
|
197
|
-
color: #fff;
|
|
236
|
+
color: #fff !important;
|
|
198
237
|
}
|
|
199
238
|
&.active,
|
|
200
239
|
&.router-link-active {
|
|
@@ -46,7 +46,29 @@
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
// bh2026:
|
|
49
|
+
// bh2026: pill track, subtle-hover selected state (toggle-style, not primary blue)
|
|
50
50
|
:host-context([data-theme='bh2026']) > .tile-container {
|
|
51
|
-
|
|
51
|
+
background: var(--color-gray-0);
|
|
52
|
+
border: 1px solid var(--color-border-default);
|
|
53
|
+
border-radius: var(--border-radius-pill);
|
|
54
|
+
padding: var(--spacing-padding-xsm);
|
|
55
|
+
gap: var(--spacing-gap-sm);
|
|
56
|
+
|
|
57
|
+
.tile {
|
|
58
|
+
border-radius: var(--border-radius-pill);
|
|
59
|
+
margin: 0;
|
|
60
|
+
color: var(--color-text-subtle);
|
|
61
|
+
i { color: var(--color-text-subtle); }
|
|
62
|
+
|
|
63
|
+
&:not(:last-child) {
|
|
64
|
+
margin-right: 0;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.tile.defaultColor.active {
|
|
69
|
+
background: var(--color-background-subtle-hover);
|
|
70
|
+
box-shadow: inset 0 4px 8px 0 var(--color-transparency-charcoal-08);
|
|
71
|
+
color: var(--color-text-subtle);
|
|
72
|
+
i { color: var(--color-text-subtle); }
|
|
73
|
+
}
|
|
52
74
|
}
|
|
@@ -364,7 +364,7 @@
|
|
|
364
364
|
}
|
|
365
365
|
|
|
366
366
|
&.hasButtons {
|
|
367
|
-
border-radius:
|
|
367
|
+
border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
|
|
368
368
|
|
|
369
369
|
&.military {
|
|
370
370
|
.increments--hour,
|
|
@@ -379,7 +379,7 @@
|
|
|
379
379
|
justify-content: flex-end;
|
|
380
380
|
padding: 1rem;
|
|
381
381
|
gap: .5rem;
|
|
382
|
-
border-radius: 0 0
|
|
382
|
+
border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
|
|
383
383
|
box-shadow: 0 1px 3px #00000026, 0 2px 7px #0000001a;
|
|
384
384
|
}
|
|
385
385
|
}
|
|
@@ -35,10 +35,15 @@
|
|
|
35
35
|
> i.bhi-calendar {
|
|
36
36
|
position: absolute;
|
|
37
37
|
right: 0;
|
|
38
|
-
top:
|
|
38
|
+
top: 0;
|
|
39
39
|
font-size: var(--font-size-sm);
|
|
40
|
+
|
|
41
|
+
[data-theme='bh2026'] & {
|
|
42
|
+
font-size: var(--typography-body-lg-font-size);
|
|
43
|
+
line-height: normal;
|
|
44
|
+
}
|
|
40
45
|
}
|
|
41
46
|
> i.bhi-times {
|
|
42
47
|
cursor: pointer;
|
|
43
48
|
}
|
|
44
|
-
}
|
|
49
|
+
}
|
|
@@ -30,4 +30,57 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
+
|
|
34
|
+
// Icon variant styling
|
|
35
|
+
&[data-variant='icon'] {
|
|
36
|
+
margin: 0 auto 0 var(--spacing-lg);
|
|
37
|
+
pointer-events: auto;
|
|
38
|
+
cursor: default;
|
|
39
|
+
|
|
40
|
+
> div {
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
44
|
+
border-radius: var(--border-radius-md);
|
|
45
|
+
border: 0.0625rem solid var(--tip-well-icon-border-color, #0066cc);
|
|
46
|
+
background-color: var(--tip-well-icon-background-color, #f0f4ff);
|
|
47
|
+
text-align: center;
|
|
48
|
+
|
|
49
|
+
i {
|
|
50
|
+
color: $charcoal !important;
|
|
51
|
+
margin-right: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
p {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
button {
|
|
59
|
+
margin-left: var(--spacing-md);
|
|
60
|
+
color: $charcoal;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// bh2026: bordered card, 4px radius, body text; subtle variant gets muted background
|
|
67
|
+
:host-context([data-theme='bh2026']) {
|
|
68
|
+
> div {
|
|
69
|
+
border-radius: 4px;
|
|
70
|
+
border: 1px solid var(--color-border-default);
|
|
71
|
+
color: var(--color-text-body);
|
|
72
|
+
overflow: clip;
|
|
73
|
+
|
|
74
|
+
> div > p {
|
|
75
|
+
line-height: var(--typography-body-default-line-height, 20px);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
> button {
|
|
79
|
+
font-size: var(--typography-button-sm-font-size, 12px);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&[data-variant='subtle'] > div {
|
|
84
|
+
background-color: var(--background-muted);
|
|
85
|
+
}
|
|
33
86
|
}
|
|
@@ -12,8 +12,12 @@ declare class NovoTipWellElement implements OnInit {
|
|
|
12
12
|
tip: string;
|
|
13
13
|
buttonText: string;
|
|
14
14
|
button: boolean;
|
|
15
|
+
buttonIcon: string;
|
|
15
16
|
icon: string;
|
|
16
17
|
sanitize: boolean;
|
|
18
|
+
variant: string;
|
|
19
|
+
buttonTheme: string;
|
|
20
|
+
buttonSize: string;
|
|
17
21
|
confirmed: EventEmitter<any>;
|
|
18
22
|
isActive: boolean;
|
|
19
23
|
isLocalStorageEnabled: any;
|
|
@@ -25,7 +29,7 @@ declare class NovoTipWellElement implements OnInit {
|
|
|
25
29
|
ngOnInit(): void;
|
|
26
30
|
hideTip(): void;
|
|
27
31
|
static ɵfac: i0.ɵɵFactoryDeclaration<NovoTipWellElement, never>;
|
|
28
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NovoTipWellElement, "novo-tip-well", never, { "name": { "alias": "name"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "button": { "alias": "button"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "sanitize": { "alias": "sanitize"; "required": false; }; }, { "confirmed": "confirmed"; }, never, ["novo-icon", "*"], false, never>;
|
|
32
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NovoTipWellElement, "novo-tip-well", never, { "name": { "alias": "name"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "button": { "alias": "button"; "required": false; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "sanitize": { "alias": "sanitize"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "buttonTheme": { "alias": "buttonTheme"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; }, { "confirmed": "confirmed"; }, never, ["novo-icon", "*"], false, never>;
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
declare class NovoTipWellModule {
|
|
@@ -62,4 +62,19 @@
|
|
|
62
62
|
flex-direction: column;
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
|
65
|
+
|
|
66
|
+
// bh2026: frosted translucent toolbar, no entity accent border
|
|
67
|
+
:root[data-theme='bh2026'] & {
|
|
68
|
+
background: var(--color-transparency-white-90);
|
|
69
|
+
backdrop-filter: blur(12px);
|
|
70
|
+
box-shadow: 0 1px 2px var(--color-transparency-charcoal-08);
|
|
71
|
+
|
|
72
|
+
.novo-toolbar-row {
|
|
73
|
+
background: transparent;
|
|
74
|
+
|
|
75
|
+
&[class*='novo-accent-'] {
|
|
76
|
+
border-bottom: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
65
80
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
$tooltip-background: var(--tooltip-background-
|
|
1
|
+
$tooltip-background: var(--tooltip-color-background-default, #3D464D);
|
|
2
2
|
$tooltip-error-color: var(--color-shade-error, #b34e4d);
|
|
3
3
|
$tooltip-info-color: var(--color-shade-info, #3986ac);
|
|
4
4
|
$tooltip-warning-color: var(--color-shade-warning, #c09854);
|
|
@@ -25,14 +25,23 @@ $tooltip-success-color: var(--color-shade-success, #458746);
|
|
|
25
25
|
|
|
26
26
|
:host {
|
|
27
27
|
div {
|
|
28
|
+
display: flex;
|
|
29
|
+
max-width: 300px;
|
|
30
|
+
padding: var(--tooltip-spacing-container-medium-padding-vertical, 16px) var(--tooltip-spacing-container-medium-padding-horizontal, 16px);
|
|
31
|
+
justify-content: center;
|
|
32
|
+
align-items: flex-start;
|
|
33
|
+
gap: 10px;
|
|
34
|
+
border-radius: var(--tooltip-border-radius-medium, 8px);
|
|
28
35
|
background: $tooltip-background;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
font-size: var(--font-size
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
+
box-shadow: 0 1px 2px -1px rgba(40, 40, 40, 0.10), 0 1px 2px 0 rgba(40, 40, 40, 0.08), 0 2px 2px -1px rgba(40, 40, 40, 0.08);
|
|
37
|
+
color: var(--tooltip-color-content-default, #fff);
|
|
38
|
+
font-family: var(--typography-body-sm-font-family, Inter);
|
|
39
|
+
font-size: var(--typography-body-sm-font-size, 12px);
|
|
40
|
+
font-weight: var(--typography-body-sm-font-weight-default, 400);
|
|
41
|
+
line-height: var(--typography-body-sm-line-height, 16px);
|
|
42
|
+
letter-spacing: var(--typography-body-sm-letter-spacing, 0);
|
|
43
|
+
white-space: normal;
|
|
44
|
+
word-wrap: break-word;
|
|
36
45
|
|
|
37
46
|
&.error {
|
|
38
47
|
background-color: $tooltip-error-color;
|
|
@@ -117,16 +126,9 @@ $tooltip-success-color: var(--color-shade-success, #458746);
|
|
|
117
126
|
}
|
|
118
127
|
|
|
119
128
|
// Sizing
|
|
120
|
-
&.extra-large,
|
|
121
|
-
&.large,
|
|
122
|
-
&.small,
|
|
123
|
-
&.medium {
|
|
124
|
-
white-space: normal;
|
|
125
|
-
line-height: 1.4em;
|
|
126
|
-
word-wrap: break-word;
|
|
127
|
-
}
|
|
128
129
|
&.extra-large {
|
|
129
130
|
width: 400px;
|
|
131
|
+
max-width: unset;
|
|
130
132
|
font-size: 1.2vh;
|
|
131
133
|
}
|
|
132
134
|
&.large {
|
|
@@ -139,7 +141,7 @@ $tooltip-success-color: var(--color-shade-success, #458746);
|
|
|
139
141
|
width: 80px;
|
|
140
142
|
}
|
|
141
143
|
&.preline {
|
|
142
|
-
|
|
144
|
+
flex-direction: column;
|
|
143
145
|
}
|
|
144
146
|
|
|
145
147
|
// Bounce
|
|
@@ -160,8 +162,3 @@ $tooltip-success-color: var(--color-shade-success, #458746);
|
|
|
160
162
|
}
|
|
161
163
|
}
|
|
162
164
|
}
|
|
163
|
-
|
|
164
|
-
// bh2026: rounder tooltip
|
|
165
|
-
:host-context([data-theme='bh2026']) div {
|
|
166
|
-
border-radius: var(--tooltip-radius, 0.8rem);
|
|
167
|
-
}
|
|
@@ -4,7 +4,8 @@ import { Overlay } from '@angular/cdk/overlay';
|
|
|
4
4
|
import * as i3 from '@angular/common';
|
|
5
5
|
|
|
6
6
|
declare class NovoTooltip {
|
|
7
|
-
message: string
|
|
7
|
+
readonly message: i0.WritableSignal<string>;
|
|
8
|
+
readonly messageLines: i0.Signal<string[]>;
|
|
8
9
|
hidden: boolean;
|
|
9
10
|
tooltipType: string;
|
|
10
11
|
rounded: boolean;
|