@ardium-ui/ui 5.0.0-alpha.15 → 5.0.0-alpha.16

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.
Files changed (9) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +28 -7
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/checkbox-list/checkbox-list.component.d.ts +5 -3
  4. package/lib/checkbox-list/checkbox-list.directives.d.ts +7 -0
  5. package/lib/checkbox-list/checkbox-list.module.d.ts +1 -1
  6. package/package.json +1 -1
  7. package/prebuilt-themes/default/checkbox-list.css +28 -16
  8. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  9. package/themes/default/checkbox-list.scss +48 -19
package/lib/checkbox-list/checkbox-list.component.d.ts CHANGED
@@ -3,10 +3,10 @@ import { BooleanLike, NumberLike } from '@ardium-ui/devkit';
3
3
  import { SimpleItemStorageHost } from '../_internal/item-storages/simple-item-storage';
4
4
  import { _NgModelComponentBase } from '../_internal/ngmodel-component';
5
5
  import { ComponentColor } from '../types/colors.types';
6
- import { ArdOptionSimple, CompareWithFn } from '../types/item-storage.types';
6
+ import { ArdOptionSimple, CompareWithFn, OptionContext } from '../types/item-storage.types';
7
7
  import { Nullable } from '../types/utility.types';
8
8
  import { ArdCheckboxListDefaults } from './checkbox-list.defaults';
9
- import { ArdCheckboxListCheckboxTemplateDirective } from './checkbox-list.directives';
9
+ import { ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective } from './checkbox-list.directives';
10
10
  import { CheckboxListAlignType } from './checkbox-list.types';
11
11
  import * as i0 from "@angular/core";
12
12
  export declare class ArdiumCheckboxListComponent extends _NgModelComponentBase implements SimpleItemStorageHost, AfterViewInit {
@@ -47,6 +47,8 @@ export declare class ArdiumCheckboxListComponent extends _NgModelComponentBase i
47
47
  unselectItem(v: ArdOptionSimple): void;
48
48
  toggleItem(v: ArdOptionSimple): void;
49
49
  readonly checkboxTemplate: import("@angular/core").Signal<ArdCheckboxListCheckboxTemplateDirective | undefined>;
50
+ readonly labelTemplate: import("@angular/core").Signal<ArdCheckboxListLabelTemplateDirective | undefined>;
51
+ getLabelContext(item: ArdOptionSimple): OptionContext<ArdOptionSimple>;
50
52
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumCheckboxListComponent, never>;
51
- static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumCheckboxListComponent, "ard-checkbox-list", never, { "valueFrom": { "alias": "valueFrom"; "required": false; "isSignal": true; }; "labelFrom": { "alias": "labelFrom"; "required": false; "isSignal": true; }; "disabledFrom": { "alias": "disabledFrom"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "invertDisabled": { "alias": "invertDisabled"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; }, ["checkboxTemplate"], never, false, never>;
53
+ static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumCheckboxListComponent, "ard-checkbox-list", never, { "valueFrom": { "alias": "valueFrom"; "required": false; "isSignal": true; }; "labelFrom": { "alias": "labelFrom"; "required": false; "isSignal": true; }; "disabledFrom": { "alias": "disabledFrom"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "invertDisabled": { "alias": "invertDisabled"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; }, ["checkboxTemplate", "labelTemplate"], never, false, never>;
52
54
  }
package/lib/checkbox-list/checkbox-list.directives.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { TemplateRef } from '@angular/core';
2
2
  import { CheckboxTemplateContext } from '../checkbox/checkbox.types';
3
+ import { ArdOptionSimple, OptionContext } from '../types/item-storage.types';
3
4
  import * as i0 from "@angular/core";
4
5
  export declare class ArdCheckboxListCheckboxTemplateDirective {
5
6
  template: TemplateRef<CheckboxTemplateContext>;
@@ -7,3 +8,9 @@ export declare class ArdCheckboxListCheckboxTemplateDirective {
7
8
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdCheckboxListCheckboxTemplateDirective, never>;
8
9
  static ɵdir: i0.ɵɵDirectiveDeclaration<ArdCheckboxListCheckboxTemplateDirective, "ard-checkbox-list > ng-template[ard-checkbox-tmp]", never, {}, {}, never, never, false, never>;
9
10
  }
11
+ export declare class ArdCheckboxListLabelTemplateDirective {
12
+ template: TemplateRef<OptionContext<ArdOptionSimple>>;
13
+ constructor(template: TemplateRef<OptionContext<ArdOptionSimple>>);
14
+ static ɵfac: i0.ɵɵFactoryDeclaration<ArdCheckboxListLabelTemplateDirective, never>;
15
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ArdCheckboxListLabelTemplateDirective, "ard-checkbox-list > ng-template[ard-label-tmp]", never, {}, {}, never, never, false, never>;
16
+ }
package/lib/checkbox-list/checkbox-list.module.d.ts CHANGED
@@ -6,6 +6,6 @@ import * as i4 from "../checkbox/checkbox.module";
6
6
  import * as i5 from "../checkbox/checkbox.internal-directives";
7
7
  export declare class ArdiumCheckboxListModule {
8
8
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumCheckboxListModule, never>;
9
- static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumCheckboxListModule, [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumCheckboxModule, typeof i5._CheckboxTemplateRepositoryDirective], [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective]>;
9
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumCheckboxListModule, [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective, typeof i2.ArdCheckboxListLabelTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumCheckboxModule, typeof i5._CheckboxTemplateRepositoryDirective], [typeof i1.ArdiumCheckboxListComponent, typeof i2.ArdCheckboxListCheckboxTemplateDirective, typeof i2.ArdCheckboxListLabelTemplateDirective]>;
10
10
  static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumCheckboxListModule>;
11
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.15",
3
+ "version": "5.0.0-alpha.16",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/prebuilt-themes/default/checkbox-list.css CHANGED
@@ -1,3 +1,13 @@
1
+ :root {
2
+ --ard-checkbox-list-item-hover-opacity: 5%;
3
+ --ard-checkbox-list-item-active-opacity: 15%;
4
+ --ard-checkbox-list-item-height: 3rem;
5
+ --ard-checkbox-list-item-height-compact: 2rem;
6
+ --ard-checkbox-list-checkbox-min-width: 1.25rem;
7
+ --ard-checkbox-list-checkbox-padding: 0.625rem;
8
+ --ard-checkbox-list-label-padding: 0 0.5rem;
9
+ }
10
+
1
11
  .ard-checkbox-list {
2
12
  display: flex;
3
13
  flex-direction: column;
@@ -6,16 +16,21 @@
6
16
  .ard-checkbox-list .ard-checkbox-list__item {
7
17
  display: flex;
8
18
  align-items: center;
19
+ justify-content: stretch;
9
20
  padding: 0;
10
21
  position: relative;
11
22
  cursor: pointer;
12
23
  height: max-content;
13
- min-height: 3rem;
24
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
14
25
  }
15
26
  .ard-checkbox-list .ard-checkbox-list__item > label {
16
27
  pointer-events: none;
17
28
  user-select: none;
18
- padding: 0 0.5rem;
29
+ flex-grow: 1;
30
+ padding: var(--ard-checkbox-list-label-padding, 0 0.5rem);
31
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
32
+ display: flex;
33
+ align-items: center;
19
34
  }
20
35
  .ard-checkbox-list .ard-checkbox-list__item > .ard-focus-overlay {
21
36
  position: absolute;
@@ -30,14 +45,14 @@
30
45
  background: var(--ard-overlay);
31
46
  }
32
47
  .ard-checkbox-list .ard-checkbox-list__item.ard-item-highlighted > .ard-focus-overlay {
33
- opacity: 5%;
48
+ opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
34
49
  }
35
50
  .ard-checkbox-list .ard-checkbox-list__item:active > .ard-focus-overlay {
36
- opacity: 15%;
51
+ opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
37
52
  }
38
53
  .ard-checkbox-list .ard-checkbox-list__item ard-checkbox {
39
- padding: 0.625rem;
40
- min-width: 1.25rem;
54
+ padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
55
+ min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
41
56
  }
42
57
  .ard-checkbox-list .ard-checkbox-list__item ard-checkbox .ard-checkbox .ard-focus-overlay {
43
58
  display: none;
@@ -50,19 +65,16 @@
50
65
  }
51
66
  .ard-checkbox-list.ard-compact .ard-checkbox-list__item {
52
67
  gap: 0.325rem;
53
- height: 2rem;
54
- }
55
- .ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item {
56
- flex-direction: row;
68
+ height: var(--ard-checkbox-list-item-height-compact, 2rem);
57
69
  }
58
- .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item {
59
- flex-direction: row-reverse;
60
- }
61
- .ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item {
70
+ .ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item label, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item label {
62
71
  justify-content: flex-start;
63
72
  }
64
- .ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item {
65
- justify-content: space-between;
73
+ .ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item label, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item label {
74
+ justify-content: flex-end;
75
+ }
76
+ .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item {
77
+ flex-direction: row-reverse;
66
78
  }
67
79
 
68
80
  /*# sourceMappingURL=checkbox-list.css.map */
package/prebuilt-themes/default/checkbox-list.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox-list.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;ECTF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDEI,YEtBI;;AFyBJ;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;;AAGE;EACE;;AAIN;EACE;;AAEA;EACE;;AAKJ;EACE;EACA;;AAMF;EACE;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"checkbox-list.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox-list.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;ECxBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDiBI,YErCI;;AFwCJ;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;;AAGE;EACE;;AAIN;EACE;;AAEA;EACE;;AAKJ;EACE;EACA;;AAOA;EACE;;AAOF;EACE;;AAMJ;EACE","file":"checkbox-list.css"}
package/themes/default/checkbox-list.scss CHANGED
@@ -1,6 +1,16 @@
1
1
  @use './mixins' as CM;
2
2
  @use '../variables' as ARD;
3
3
 
4
+ :root {
5
+ --ard-checkbox-list-item-hover-opacity: 5%;
6
+ --ard-checkbox-list-item-active-opacity: 15%;
7
+ --ard-checkbox-list-item-height: 3rem;
8
+ --ard-checkbox-list-item-height-compact: 2rem;
9
+ --ard-checkbox-list-checkbox-min-width: 1.25rem;
10
+ --ard-checkbox-list-checkbox-padding: 0.625rem;
11
+ --ard-checkbox-list-label-padding: 0 0.5rem;
12
+ }
13
+
4
14
  .ard-checkbox-list {
5
15
  display: flex;
6
16
  flex-direction: column;
@@ -9,16 +19,21 @@
9
19
  .ard-checkbox-list__item {
10
20
  display: flex;
11
21
  align-items: center;
22
+ justify-content: stretch;
12
23
  padding: 0;
13
24
  position: relative;
14
25
  cursor: pointer;
15
26
  height: max-content;
16
- min-height: 3rem;
27
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
17
28
 
18
29
  > label {
19
30
  pointer-events: none;
20
31
  user-select: none;
21
- padding: 0 0.5rem;
32
+ flex-grow: 1;
33
+ padding: var(--ard-checkbox-list-label-padding, 0 0.5rem);
34
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
35
+ display: flex;
36
+ align-items: center;
22
37
  }
23
38
  > .ard-focus-overlay {
24
39
  @include CM.focus-overlay();
@@ -26,17 +41,17 @@
26
41
  }
27
42
  &.ard-item-highlighted {
28
43
  > .ard-focus-overlay {
29
- opacity: 5%;
44
+ opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
30
45
  }
31
46
  }
32
47
  &:active {
33
48
  > .ard-focus-overlay {
34
- opacity: 15%;
49
+ opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
35
50
  }
36
51
  }
37
52
  ard-checkbox {
38
- padding: 0.625rem;
39
- min-width: 1.25rem;
53
+ padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
54
+ min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
40
55
 
41
56
  .ard-checkbox {
42
57
  .ard-focus-overlay {
@@ -55,32 +70,46 @@
55
70
  &.ard-compact {
56
71
  .ard-checkbox-list__item {
57
72
  gap: 0.325rem;
58
- height: 2rem;
73
+ height: var(--ard-checkbox-list-item-height-compact, 2rem);
59
74
  }
60
75
  }
61
76
  //! ALIGN TYPES
62
77
  &.ard-align-left-clumped,
63
- &.ard-align-left-split {
64
- .ard-checkbox-list__item {
65
- flex-direction: row;
66
- }
67
- }
68
- &.ard-align-right-clumped,
69
78
  &.ard-align-right-split {
70
79
  .ard-checkbox-list__item {
71
- flex-direction: row-reverse;
80
+ label {
81
+ justify-content: flex-start;
82
+ }
72
83
  }
73
84
  }
74
- &.ard-align-left-clumped,
85
+ &.ard-align-left-split,
75
86
  &.ard-align-right-clumped {
76
87
  .ard-checkbox-list__item {
77
- justify-content: flex-start;
88
+ label {
89
+ justify-content: flex-end;
90
+ }
78
91
  }
79
92
  }
80
- &.ard-align-left-split,
81
- &.ard-align-right-split {
93
+ &.ard-align-right-split,
94
+ &.ard-align-right-clumped {
82
95
  .ard-checkbox-list__item {
83
- justify-content: space-between;
96
+ flex-direction: row-reverse;
84
97
  }
85
98
  }
99
+ // &.ard-align-left-clumped,
100
+ // &.ard-align-right-clumped {
101
+ // .ard-checkbox-list__item {
102
+ // label {
103
+ // justify-content: flex-start;
104
+ // }
105
+ // }
106
+ // }
107
+ // &.ard-align-left-split,
108
+ // &.ard-align-right-split {
109
+ // .ard-checkbox-list__item {
110
+ // label {
111
+ // justify-content: space-between;
112
+ // }
113
+ // }
114
+ // }
86
115
  }