@agnos-ui/core-bootstrap 0.4.0-next.1 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/components/accordion/accordion.d.ts +19 -4
  2. package/components/alert/alert.d.ts +11 -0
  3. package/components/modal/modal.d.ts +17 -2
  4. package/components/pagination/pagination.d.ts +13 -7
  5. package/components/progressbar/progressbar.d.ts +6 -0
  6. package/components/rating/rating.d.ts +8 -3
  7. package/components/select/select.d.ts +10 -0
  8. package/components/slider/slider.d.ts +6 -1
  9. package/components/toast/toast.d.ts +9 -0
  10. package/css/agnosui.css +22 -2
  11. package/css/agnosui.css.map +1 -1
  12. package/css/rating.css +16 -0
  13. package/css/rating.css.map +1 -0
  14. package/css/select.css +9 -0
  15. package/css/select.css.map +1 -0
  16. package/css/slider.css +196 -0
  17. package/css/slider.css.map +1 -0
  18. package/index.d.ts +1 -0
  19. package/package.json +9 -9
  20. package/scss/_variables.scss +8 -3
  21. package/scss/agnosui.scss +1 -3
  22. package/scss/rating.scss +17 -0
  23. package/scss/select.scss +10 -0
  24. package/scss/slider.scss +243 -0
  25. package/scss/_select.scss +0 -7
  26. package/scss/_slider.scss +0 -219
  27. package/scss/_toast.scss +0 -3
package/components/accordion/accordion.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { AccordionApi, AccordionDirectives, AccordionItemActions, AccordionItemApi, AccordionProps as CoreProps, AccordionState as CoreState, AccordionItemState as CoreItemState, AccordionItemProps as CoreItemProps, AccordionItemDirectives } from '@agnos-ui/core/components/accordion';
2
2
  import type { SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
3
+ import type { TransitionFn } from '@agnos-ui/core/services/transitions/baseTransitions';
3
4
  export * from '@agnos-ui/core/components/accordion';
4
5
  export type AccordionItemContext = WidgetSlotContext<AccordionItemWidget>;
5
6
  interface AccordionExtraProps {
@@ -39,6 +40,15 @@ interface AccordionItemExtraProps {
39
40
  export interface AccordionState extends CoreState, AccordionExtraProps {
40
41
  }
41
42
  export interface AccordionProps extends CoreProps, AccordionExtraProps {
43
+ /**
44
+ * The transition to use for the accordion-item body-container when the accordion-item is toggled.
45
+ *
46
+ * @defaultValue
47
+ * ```ts
48
+ * collapseVerticalTransition
49
+ * ```
50
+ */
51
+ itemTransition: TransitionFn;
42
52
  }
43
53
  export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionApi, object, AccordionDirectives>;
44
54
  export interface AccordionItemState extends CoreItemState, AccordionItemExtraProps {
@@ -47,14 +57,19 @@ export interface AccordionItemProps extends CoreItemProps, AccordionItemExtraPro
47
57
  }
48
58
  export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemActions, AccordionItemDirectives>;
49
59
  /**
50
- * Create an AccordioItemnWidget with given config props
51
- * @param config - an optional alert config
52
- * @returns an AccordionWidget
60
+ * Create an AccordionItemWidget with given config props
61
+ * @param config - an optional AccordionItem config
62
+ * @returns an AccordionItemWidget
53
63
  */
54
- export declare const createAccordionItem: WidgetFactory<import("@agnos-ui/core/services/extendWidget").ExtendWidgetProps<import("@agnos-ui/core/components/accordion").AccordionItemWidget, AccordionItemExtraProps, object>>;
64
+ export declare const createAccordionItem: WidgetFactory<AccordionItemWidget>;
55
65
  /**
56
66
  * Retrieve a shallow copy of the default accordion config
57
67
  * @returns the default accordion config
58
68
  */
59
69
  export declare function getAccordionDefaultConfig(): AccordionProps;
70
+ /**
71
+ * Create an AccordionWidget with given config props
72
+ * @param config - an optional accordion config
73
+ * @returns an AccordionWidget
74
+ */
60
75
  export declare const createAccordion: WidgetFactory<AccordionWidget>;
package/components/alert/alert.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { AlertDirectives, AlertState as CoreState, AlertProps as CoreProps, AlertApi } from '@agnos-ui/core/components/alert';
2
2
  import type { SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
3
3
  import type { BSContextualClass } from '../../types';
4
+ import type { TransitionFn } from '@agnos-ui/core/services/transitions/baseTransitions';
4
5
  export * from '@agnos-ui/core/components/alert';
5
6
  export type AlertContext = WidgetSlotContext<AlertWidget>;
6
7
  interface AlertExtraProps {
@@ -14,12 +15,22 @@ interface AlertExtraProps {
14
15
  children: SlotContent<AlertContext>;
15
16
  /**
16
17
  * Type of the alert, following bootstrap types.
18
+ *
19
+ * @defaultValue `'primary'`
17
20
  */
18
21
  type: BSContextualClass;
19
22
  }
20
23
  export interface AlertState extends CoreState, AlertExtraProps {
21
24
  }
22
25
  export interface AlertProps extends CoreProps, AlertExtraProps {
26
+ /**
27
+ * The transition function will be executed when the alert is displayed or hidden.
28
+ *
29
+ * Depending on the value of `animatedOnInit`, the animation can be optionally skipped during the showing process.
30
+ *
31
+ * @defaultValue `fadeTransition`
32
+ */
33
+ transition: TransitionFn;
23
34
  }
24
35
  export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, object, AlertDirectives>;
25
36
  /**
package/components/modal/modal.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ModalProps as CoreProps, ModalState as CoreState, ModalActions, ModalApi as CoreApi, ModalDirectives } from '@agnos-ui/core/components/modal';
2
2
  import type { PropsConfig, SlotContent, Widget, WidgetSlotContext } from '@agnos-ui/core/types';
3
+ import type { TransitionFn } from '@agnos-ui/core/services/transitions/baseTransitions';
3
4
  export * from '@agnos-ui/core/components/modal';
4
5
  export type ModalContext<Data> = WidgetSlotContext<ModalWidget<Data>>;
5
6
  interface ModalExtraProps<Data> {
@@ -16,12 +17,12 @@ interface ModalExtraProps<Data> {
16
17
  */
17
18
  footer: SlotContent<ModalContext<Data>>;
18
19
  /**
19
- * Header of the modal. The default header includes {@link ModalCommonPropsAndState.title|title}.
20
+ * Header of the modal. The default header includes {@link ModalProps.title|title}.
20
21
  */
21
22
  header: SlotContent<ModalContext<Data>>;
22
23
  /**
23
24
  * Structure of the modal.
24
- * The default structure uses {@link ModalCommonPropsAndState.header|header}, {@link ModalCommonPropsAndState.children|children} and {@link ModalCommonPropsAndState.footer|footer}.
25
+ * The default structure uses {@link ModalProps.header|header}, {@link ModalProps.children|children} and {@link ModalProps.footer|footer}.
25
26
  */
26
27
  structure: SlotContent<ModalContext<Data>>;
27
28
  /**
@@ -30,12 +31,26 @@ interface ModalExtraProps<Data> {
30
31
  title: SlotContent<ModalContext<Data>>;
31
32
  /**
32
33
  * Option to create a fullscreen modal, according to the bootstrap documentation.
34
+ *
35
+ * @defaultValue `false`
33
36
  */
34
37
  fullscreen: boolean;
35
38
  }
36
39
  export interface ModalState<Data> extends CoreState, ModalExtraProps<Data> {
37
40
  }
38
41
  export interface ModalProps<Data> extends CoreProps, ModalExtraProps<Data> {
42
+ /**
43
+ * The transition to use for the backdrop behind the modal (if present).
44
+ *
45
+ * @defaultValue `fadeTransition`
46
+ */
47
+ backdropTransition: TransitionFn;
48
+ /**
49
+ * The transition to use for the modal.
50
+ *
51
+ * @defaultValue `fadeTransition`
52
+ */
53
+ modalTransition: TransitionFn;
39
54
  }
40
55
  export interface ModalApi<Data> extends Omit<CoreApi, 'patch'> {
41
56
  /**
package/components/pagination/pagination.d.ts CHANGED
@@ -27,35 +27,40 @@ interface PaginationExtraProps {
27
27
  * The template to use for the ellipsis slot
28
28
  * for I18n, we suggest to use the global configuration
29
29
  * override any configuration parameters provided for this
30
- * @defaultValue '…'
30
+ *
31
+ * @defaultValue `'…'`
31
32
  */
32
33
  ellipsisLabel: SlotContent<PaginationContext>;
33
34
  /**
34
35
  * The template to use for the first slot
35
36
  * for I18n, we suggest to use the global configuration
36
37
  * override any configuration parameters provided for this
37
- * @defaultValue '«'
38
+ *
39
+ * @defaultValue `'«'`
38
40
  */
39
41
  firstPageLabel: SlotContent<PaginationContext>;
40
42
  /**
41
43
  * The template to use for the previous slot
42
44
  * for I18n, we suggest to use the global configuration
43
45
  * override any configuration parameters provided for this
44
- * @defaultValue '‹'
46
+ *
47
+ * @defaultValue `'‹'`
45
48
  */
46
49
  previousPageLabel: SlotContent<PaginationContext>;
47
50
  /**
48
51
  * The template to use for the next slot
49
52
  * for I18n, we suggest to use the global configuration
50
53
  * override any configuration parameters provided for this
51
- * @defaultValue '›'
54
+ *
55
+ * @defaultValue `'›'`
52
56
  */
53
57
  nextPageLabel: SlotContent<PaginationContext>;
54
58
  /**
55
59
  * The template to use for the last slot
56
60
  * for I18n, we suggest to use the global configuration
57
61
  * override any configuration parameters provided for this
58
- * @defaultValue '»'
62
+ *
63
+ * @defaultValue `'»'`
59
64
  */
60
65
  lastPageLabel: SlotContent<PaginationContext>;
61
66
  /**
@@ -68,11 +73,12 @@ interface PaginationExtraProps {
68
73
  * The template to use for the number slot
69
74
  * override any configuration parameters provided for this
70
75
  * for I18n, we suggest to use the global configuration
76
+ * @param displayedPage - The current page number
77
+ *
71
78
  * @defaultValue
72
79
  * ```ts
73
- * ({displayedPage}) => `${displayedPage}`
80
+ * ({displayedPage}: PaginationNumberContext) => `${displayedPage}`
74
81
  * ```
75
- * @param displayedPage - The current page number
76
82
  */
77
83
  numberLabel: SlotContent<PaginationNumberContext>;
78
84
  }
package/components/progressbar/progressbar.d.ts CHANGED
@@ -14,15 +14,21 @@ interface ProgressbarExtraProps {
14
14
  children: SlotContent<ProgressbarContext>;
15
15
  /**
16
16
  * Height of the progressbar, can be any valid css height value.
17
+ *
18
+ * @defaultValue `''`
17
19
  */
18
20
  height: string;
19
21
  /**
20
22
  * If `true`, shows a striped progressbar.
23
+ *
24
+ * @defaultValue `false`
21
25
  */
22
26
  striped: boolean;
23
27
  /**
24
28
  * If `true`, animates a striped progressbar.
25
29
  * Takes effect only for browsers supporting CSS3 animations, and if `striped` is `true`.
30
+ *
31
+ * @defaultValue `false`
26
32
  */
27
33
  animated: boolean;
28
34
  /**
package/components/rating/rating.d.ts CHANGED
@@ -4,6 +4,11 @@ export * from '@agnos-ui/core/components/rating';
4
4
  interface RatingExtraProps {
5
5
  /**
6
6
  * The template to override the way each star is displayed.
7
+ *
8
+ * @defaultValue
9
+ * ```ts
10
+ * ({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734)
11
+ * ```
7
12
  */
8
13
  star: SlotContent<StarContext>;
9
14
  }
@@ -18,8 +23,8 @@ export type RatingWidget = Widget<RatingProps, RatingState, object, RatingAction
18
23
  */
19
24
  export declare function getRatingDefaultConfig(): RatingProps;
20
25
  /**
21
- * Create a Progressbar with given config props
22
- * @param config - an optional progressbar config
23
- * @returns a ProgressbarWidget
26
+ * Create a RatingWidget with given config props
27
+ * @param config - an optional rating config
28
+ * @returns a RatingWidget
24
29
  */
25
30
  export declare const createRating: WidgetFactory<RatingWidget>;
package/components/select/select.d.ts CHANGED
@@ -15,11 +15,21 @@ interface SelectExtraProps<Item> {
15
15
  /**
16
16
  * The template to override the way each badge on the left of the input is displayed.
17
17
  * This define the content of the badge inside the badge container.
18
+ *
19
+ * @defaultValue
20
+ * ```ts
21
+ * ({itemContext}: SelectItemContext<any>) => itemContext.item
22
+ * ```
18
23
  */
19
24
  badgeLabel: SlotContent<SelectItemContext<Item>>;
20
25
  /**
21
26
  * The template to override the way each item is displayed in the list.
22
27
  * This define the content of the badge inside the badge container.
28
+ *
29
+ * @defaultValue
30
+ * ```ts
31
+ * ({itemContext}: SelectItemContext<any>) => itemContext.item
32
+ * ```
23
33
  */
24
34
  itemLabel: SlotContent<SelectItemContext<Item>>;
25
35
  }
package/components/slider/slider.d.ts CHANGED
@@ -15,6 +15,11 @@ interface SliderExtraProps {
15
15
  structure: SlotContent<SliderContext>;
16
16
  /**
17
17
  * Slot to change the default labels of the slider
18
+ *
19
+ * @defaultValue
20
+ * ```ts
21
+ * ({value}: SliderSlotLabelContext) => '' + value
22
+ * ```
18
23
  */
19
24
  label: SlotContent<SliderSlotLabelContext>;
20
25
  /**
@@ -34,7 +39,7 @@ export type SliderWidget = Widget<SliderProps, SliderState, SliderApi, SliderAct
34
39
  export declare function getSliderDefaultConfig(): SliderProps;
35
40
  /**
36
41
  * Create a Slider with given config props
37
- * @param config - an optional progressbar config
42
+ * @param config - an optional slider config
38
43
  * @returns a SliderWidget
39
44
  */
40
45
  export declare const createSlider: WidgetFactory<SliderWidget>;
package/components/toast/toast.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ToastDirectives, ToastState as CoreState, ToastProps as CoreProps, ToastApi } from '@agnos-ui/core/components/toast';
2
2
  import type { SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
3
+ import type { TransitionFn } from '@agnos-ui/core/services/transitions/baseTransitions';
3
4
  export * from '@agnos-ui/core/components/toast';
4
5
  export type ToastContext = WidgetSlotContext<ToastWidget>;
5
6
  export interface ToastExtraProps {
@@ -19,6 +20,14 @@ export interface ToastExtraProps {
19
20
  export interface ToastState extends CoreState, ToastExtraProps {
20
21
  }
21
22
  export interface ToastProps extends CoreProps, ToastExtraProps {
23
+ /**
24
+ * The transition function will be executed when the alert is displayed or hidden.
25
+ *
26
+ * Depending on the value of `animatedOnInit`, the animation can be optionally skipped during the showing process.
27
+ *
28
+ * @defaultValue `fadeTransition`
29
+ */
30
+ transition: TransitionFn;
22
31
  }
23
32
  export type ToastWidget = Widget<ToastProps, ToastState, ToastApi, object, ToastDirectives>;
24
33
  /**
package/css/agnosui.css CHANGED
@@ -20,12 +20,14 @@
20
20
  --bs-slider-translate-vertical: translateY(-50%);
21
21
  --bs-slider-translate-horizontal: translateX(-50%);
22
22
  --bs-slider-handle-color: var(--bs-primary, #0d6efd);
23
+ --bs-slider-handle-hover-color: var(--bs-primary, #0d6efd);
23
24
  --bs-slider-handle-size: 1.25rem;
24
25
  --bs-slider-handle-border: none;
25
26
  --bs-slider-handle-border-hover: none;
26
27
  --bs-slider-handle-border-radius: 50%;
27
28
  --bs-slider-handle-outline: none;
28
29
  --bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
30
+ --bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
29
31
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
30
32
  --bs-slider-progress-height: 0.25rem;
31
33
  --bs-slider-progress-vertical-transform: rotate(90deg);
@@ -111,6 +113,10 @@
111
113
  }
112
114
  .au-slider .au-slider-handle:not([disabled]):hover {
113
115
  border: var(--bs-slider-handle-border-hover);
116
+ background-color: var(--bs-slider-handle-hover-color);
117
+ }
118
+ .au-slider .au-slider-handle:not([disabled]):hover:focus-visible {
119
+ box-shadow: var(--bs-slider-handle-focus-hover-box-shadow);
114
120
  }
115
121
  .au-slider .au-slider-handle:focus-visible {
116
122
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
@@ -144,6 +150,9 @@
144
150
  font-weight: var(--bs-slider-label-now-font-weight);
145
151
  transform: var(--bs-slider-label-now-transform);
146
152
  }
153
+ .au-slider .au-slider-label.invisible {
154
+ visibility: hidden;
155
+ }
147
156
  .au-slider .au-slider-label-vertical {
148
157
  position: absolute;
149
158
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
@@ -192,8 +201,19 @@
192
201
  cursor: var(--bs-slider-disabled-cursor);
193
202
  }
194
203
 
195
- .au-toast {
196
- width: unset;
204
+ .au-rating.d-inline-flex {
205
+ display: inline-flex;
206
+ }
207
+ .au-rating .visually-hidden {
208
+ position: absolute;
209
+ width: 1px;
210
+ height: 1px;
211
+ padding: 0;
212
+ margin: -1px;
213
+ overflow: hidden;
214
+ clip: rect(0, 0, 0, 0);
215
+ white-space: nowrap;
216
+ border: 0;
197
217
  }
198
218
 
199
219
  /*# sourceMappingURL=agnosui.css.map */
package/css/agnosui.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/scss/_select.scss","../../src/scss/_slider.scss","../../src/scss/_toast.scss","../../src/scss/_variables.scss"],"names":[],"mappings":"AAAA;EACC;;;AAGD;EACC;;;ACeD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA3EA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAkEA;EA/EA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAsEA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAED;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;;ACvNH;EACC,OCDiB","file":"agnosui.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"AAEA;EACC;;;AAID;EACC;;;ACcD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA/EA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA2EA;EAxFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAoFA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;;AC9OF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
package/css/rating.css ADDED
@@ -0,0 +1,16 @@
1
+ .au-rating.d-inline-flex {
2
+ display: inline-flex;
3
+ }
4
+ .au-rating .visually-hidden {
5
+ position: absolute;
6
+ width: 1px;
7
+ height: 1px;
8
+ padding: 0;
9
+ margin: -1px;
10
+ overflow: hidden;
11
+ clip: rect(0, 0, 0, 0);
12
+ white-space: nowrap;
13
+ border: 0;
14
+ }
15
+
16
+ /*# sourceMappingURL=rating.css.map */
package/css/rating.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/rating.scss"],"names":[],"mappings":"AACC;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"rating.css"}
package/css/select.css ADDED
@@ -0,0 +1,9 @@
1
+ .au-select:focus-within {
2
+ box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
3
+ }
4
+
5
+ .au-select-input {
6
+ outline: none;
7
+ }
8
+
9
+ /*# sourceMappingURL=select.css.map */
package/css/select.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/select.scss"],"names":[],"mappings":"AAEA;EACC;;;AAID;EACC","file":"select.css"}
package/css/slider.css ADDED
@@ -0,0 +1,196 @@
1
+ .au-slider {
2
+ --bs-slider-background-color: var(--bs-secondary-bg, #e9ecef);
3
+ --bs-slider-font-size: 1rem;
4
+ --bs-slider-border-radius: 0.125rem;
5
+ --bs-slider-line-height: 1.5;
6
+ --bs-slider-primary-size: 100%;
7
+ --bs-slider-secondary-size: 0.25rem;
8
+ --bs-slider-margin-block-start: calc((1.25rem - 0.25rem) / 2 + 1rem * 1.5 + 0.5rem);
9
+ --bs-slider-margin-block-end: calc((1.25rem - 0.25rem) / 2 + 0.5rem);
10
+ --bs-slider-vertical-margin-inline-start: 1rem;
11
+ --bs-slider-vertical-margin-inline-end: 3rem;
12
+ --bs-slider-translate-vertical: translateY(-50%);
13
+ --bs-slider-translate-horizontal: translateX(-50%);
14
+ --bs-slider-handle-color: var(--bs-primary, #0d6efd);
15
+ --bs-slider-handle-hover-color: var(--bs-primary, #0d6efd);
16
+ --bs-slider-handle-size: 1.25rem;
17
+ --bs-slider-handle-border: none;
18
+ --bs-slider-handle-border-hover: none;
19
+ --bs-slider-handle-border-radius: 50%;
20
+ --bs-slider-handle-outline: none;
21
+ --bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
22
+ --bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
23
+ --bs-slider-progress-color: var(--bs-primary, #0d6efd);
24
+ --bs-slider-progress-height: 0.25rem;
25
+ --bs-slider-progress-vertical-transform: rotate(90deg);
26
+ --bs-slider-label-margin-block-start: calc(-1 * (1rem * 1.5 + (1.25rem - 0.25rem) / 2));
27
+ --bs-slider-label-font-weight: normal;
28
+ --bs-slider-label-now-font-weight: normal;
29
+ --bs-slider-label-min-position: 0;
30
+ --bs-slider-label-max-position: 0;
31
+ --bs-slider-label-now-transform: translateX(-50%);
32
+ --bs-slider-label-vertical-margin-inline-start: 1rem;
33
+ --bs-slider-label-vertical-min-transform: translateY(-75%);
34
+ --bs-slider-label-vertical-max-transform: translateY(-25%);
35
+ --bs-slider-label-vertical-white-space: nowrap;
36
+ --bs-slider-label-vertical-min-top: 100%;
37
+ --bs-slider-label-vertical-max-top: 0%;
38
+ --bs-slider-label-vertical-now-transform: translateY(-50%);
39
+ --bs-slider-clickable-area-main-size: 1.5rem;
40
+ --bs-slider-clickable-area-secondary-size: 100%;
41
+ --bs-slider-clickable-area-translate: translateY(-50%);
42
+ --bs-slider-clickable-area-vertical-translate: translateX(-50%);
43
+ --bs-slider-clickable-area-vertical-flex-shrink: 0;
44
+ --bs-slider-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
45
+ --bs-slider-disabled-cursor: not-allowed;
46
+ display: flex;
47
+ background-color: var(--bs-slider-background-color);
48
+ border-radius: var(--bs-slider-border-radius);
49
+ font-size: var(--bs-slider-font-size);
50
+ line-height: var(--bs-slider-line-height);
51
+ position: relative;
52
+ }
53
+ .au-slider.au-slider-lg {
54
+ --bs-slider-font-size: 1.125rem;
55
+ --bs-slider-border-radius: calc(0.3125rem / 2);
56
+ --bs-slider-secondary-size: 0.3125rem;
57
+ --bs-slider-margin-block-start: calc((1.5rem - 0.3125rem) / 2 + 1.125rem * 1.5 + 0rem);
58
+ --bs-slider-margin-block-end: calc((1.5rem - 0.3125rem) / 2 + 0rem);
59
+ --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
60
+ --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
61
+ --bs-slider-handle-size: 1.5rem;
62
+ --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
63
+ --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
64
+ }
65
+ .au-slider.au-slider-sm {
66
+ --bs-slider-font-size: 0.875rem;
67
+ --bs-slider-border-radius: calc(0.2rem / 2);
68
+ --bs-slider-secondary-size: 0.2rem;
69
+ --bs-slider-margin-block-start: calc((1rem - 0.2rem) / 2 + 0.875rem * 1.5 + 0rem);
70
+ --bs-slider-margin-block-end: calc((1rem - 0.2rem) / 2 + 0rem);
71
+ --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
72
+ --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
73
+ --bs-slider-handle-size: 1rem;
74
+ --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
75
+ --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
76
+ }
77
+ .au-slider.au-slider-horizontal {
78
+ width: var(--bs-slider-primary-size);
79
+ height: var(--bs-slider-secondary-size);
80
+ margin-block-start: var(--bs-slider-margin-block-start);
81
+ margin-block-end: var(--bs-slider-margin-block-end);
82
+ }
83
+ .au-slider.au-slider-horizontal .au-slider-handle-horizontal {
84
+ top: calc(50% - var(--bs-slider-handle-size) / 2);
85
+ transform: var(--bs-slider-translate-horizontal);
86
+ }
87
+ .au-slider.au-slider-vertical {
88
+ height: var(--bs-slider-primary-size);
89
+ width: var(--bs-slider-secondary-size);
90
+ margin-inline-start: var(--bs-slider-vertical-margin-inline-start);
91
+ margin-inline-end: var(--bs-slider-vertical-margin-inline-end);
92
+ }
93
+ .au-slider.au-slider-vertical .au-slider-handle-vertical {
94
+ left: calc(50% - var(--bs-slider-handle-size) / 2);
95
+ transform: var(--bs-slider-translate-vertical);
96
+ }
97
+ .au-slider .au-slider-handle {
98
+ background-color: var(--bs-slider-handle-color);
99
+ border: var(--bs-slider-handle-border);
100
+ border-radius: var(--bs-slider-handle-border-radius);
101
+ outline: var(--bs-slider-handle-outline);
102
+ position: absolute;
103
+ width: var(--bs-slider-handle-size);
104
+ height: var(--bs-slider-handle-size);
105
+ }
106
+ .au-slider .au-slider-handle:not([disabled]):hover {
107
+ border: var(--bs-slider-handle-border-hover);
108
+ background-color: var(--bs-slider-handle-hover-color);
109
+ }
110
+ .au-slider .au-slider-handle:not([disabled]):hover:focus-visible {
111
+ box-shadow: var(--bs-slider-handle-focus-hover-box-shadow);
112
+ }
113
+ .au-slider .au-slider-handle:focus-visible {
114
+ box-shadow: var(--bs-slider-handle-focus-box-shadow);
115
+ }
116
+ .au-slider .au-slider-progress {
117
+ background-color: var(--bs-slider-progress-color);
118
+ border-radius: var(--bs-slider-border-radius);
119
+ position: absolute;
120
+ }
121
+ .au-slider .au-slider-progress-vertical {
122
+ transform: var(--bs-slider-progress-vertical-transform);
123
+ }
124
+ .au-slider .au-slider-label {
125
+ font-weight: var(--bs-slider-label-font-weight);
126
+ margin-block-start: var(--bs-slider-label-margin-block-start);
127
+ position: absolute;
128
+ }
129
+ .au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
130
+ left: var(--bs-slider-label-min-position);
131
+ }
132
+ .au-slider .au-slider-label.au-slider-label-min.au-slider-rtl {
133
+ right: var(--bs-slider-label-max-position);
134
+ }
135
+ .au-slider .au-slider-label.au-slider-label-max:not(.au-slider-rtl) {
136
+ right: var(--bs-slider-label-max-position);
137
+ }
138
+ .au-slider .au-slider-label.au-slider-label-max.au-slider-rtl {
139
+ left: var(--bs-slider-label-min-position);
140
+ }
141
+ .au-slider .au-slider-label.au-slider-label-now {
142
+ font-weight: var(--bs-slider-label-now-font-weight);
143
+ transform: var(--bs-slider-label-now-transform);
144
+ }
145
+ .au-slider .au-slider-label.invisible {
146
+ visibility: hidden;
147
+ }
148
+ .au-slider .au-slider-label-vertical {
149
+ position: absolute;
150
+ margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
151
+ white-space: var(--bs-slider-label-vertical-white-space);
152
+ }
153
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-min:not(.au-slider-rtl) {
154
+ top: var(--bs-slider-label-vertical-min-top);
155
+ transform: var(--bs-slider-label-vertical-min-transform);
156
+ }
157
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-min.au-slider-rtl {
158
+ top: var(--bs-slider-label-vertical-max-top);
159
+ transform: var(--bs-slider-label-vertical-max-transform);
160
+ }
161
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-max:not(.au-slider-rtl) {
162
+ top: var(--bs-slider-label-vertical-max-top);
163
+ transform: var(--bs-slider-label-vertical-max-transform);
164
+ }
165
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-max.au-slider-rtl {
166
+ top: var(--bs-slider-label-vertical-min-top);
167
+ transform: var(--bs-slider-label-vertical-min-transform);
168
+ }
169
+ .au-slider .au-slider-label-vertical.au-slider-label-vertical-now {
170
+ transform: var(--bs-slider-label-vertical-now-transform);
171
+ }
172
+ .au-slider .au-slider-clickable-area {
173
+ height: var(--bs-slider-clickable-area-main-size);
174
+ width: var(--bs-slider-clickable-area-secondary-size);
175
+ transform: var(--bs-slider-clickable-area-translate);
176
+ }
177
+ .au-slider .au-slider-clickable-area-vertical {
178
+ width: var(--bs-slider-clickable-area-main-size);
179
+ height: var(--bs-slider-clickable-area-secondary-size);
180
+ transform: var(--bs-slider-clickable-area-vertical-translate);
181
+ flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
182
+ }
183
+ .au-slider.disabled {
184
+ cursor: var(--bs-slider-disabled-cursor);
185
+ }
186
+ .au-slider.disabled .au-slider-label,
187
+ .au-slider.disabled .au-slider-label-vertical {
188
+ color: var(--bs-slider-disabled-color);
189
+ }
190
+ .au-slider.disabled .au-slider-progress,
191
+ .au-slider.disabled .au-slider-handle {
192
+ background-color: var(--bs-slider-disabled-color);
193
+ cursor: var(--bs-slider-disabled-cursor);
194
+ }
195
+
196
+ /*# sourceMappingURL=slider.css.map */
package/css/slider.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AAsBA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA/EA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA2EA;EAxFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAoFA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA","file":"slider.css"}
package/index.d.ts CHANGED
@@ -9,3 +9,4 @@ export * from './components/slider';
9
9
  export * from './components/toast';
10
10
  export * from './services/transitions';
11
11
  export * from './config';
12
+ export * from './types';
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@agnos-ui/core-bootstrap",
3
3
  "description": "Styles and widget interface extensions necessary to use AgnosUI with Bootstrap.",
4
- "version": "0.4.0-next.1",
4
+ "version": "0.4.1",
5
5
  "keywords": [
6
6
  "bootstrap",
7
7
  "css",
8
8
  "scss",
9
- "AgnosUI",
10
9
  "accordion",
10
+ "AgnosUI",
11
11
  "alert",
12
12
  "components",
13
13
  "modal",
@@ -49,17 +49,17 @@
49
49
  "require": "./config.cjs",
50
50
  "default": "./config.js"
51
51
  },
52
- "./scss/agnosui.scss": {
53
- "require": "./scss/agnosui.scss",
54
- "default": "./scss/agnosui.scss"
52
+ "./scss/*.scss": {
53
+ "require": "./scss/*.scss",
54
+ "default": "./scss/*.scss"
55
55
  },
56
- "./css/agnosui.css": {
57
- "require": "./css/agnosui.css",
58
- "default": "./css/agnosui.css"
56
+ "./css/*.css": {
57
+ "require": "./css/*.css",
58
+ "default": "./css/*.css"
59
59
  }
60
60
  },
61
61
  "dependencies": {
62
- "@agnos-ui/core": "0.4.0-next.1"
62
+ "@agnos-ui/core": "0.4.1"
63
63
  },
64
64
  "sideEffects": false,
65
65
  "homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
package/scss/_variables.scss CHANGED
@@ -3,7 +3,12 @@ $toast-max-width: unset;
3
3
  // this prefix is linked to bootstrap prefix
4
4
  $prefix: bs- !default;
5
5
 
6
+ $au-focus-ring-opacity: 0.25 !default;
7
+ $au-focus-ring-width: 0.25rem !default;
8
+ $au-focus-ring-color: rgba(#0d6efd, $au-focus-ring-opacity) !default;
9
+
6
10
  //slider variables
11
+ // scss-docs-start slider-vars
7
12
  $au-slider-color-background: var(--#{$prefix}secondary-bg, #e9ecef) !default;
8
13
  $au-slider-font-size: 1rem !default;
9
14
  $au-slider-line-height: 1.5 !default;
@@ -14,16 +19,15 @@ $au-slider-vertical-margin-inline-start: 1rem !default;
14
19
  $au-slider-vertical-margin-inline-end: 3rem !default;
15
20
  $au-slider-translate-vertical: translateY(-50%) !default;
16
21
  $au-slider-translate-horizontal: translateX(-50%) !default;
17
- $au-focus-ring-opacity: 0.25 !default;
18
- $au-focus-ring-width: 0.25rem !default;
19
- $au-focus-ring-color: rgba(#0d6efd, $au-focus-ring-opacity) !default;
20
22
  $au-slider-handle-color: var(--#{$prefix}primary, #0d6efd) !default;
23
+ $au-slider-handle-hover-color: var(--#{$prefix}primary, #0d6efd) !default;
21
24
  $au-slider-handle-size: 1.25rem !default;
22
25
  $au-slider-handle-border: none !default;
23
26
  $au-slider-handle-border-hover: none !default;
24
27
  $au-slider-handle-border-radius: 50% !default;
25
28
  $au-slider-handle-outline: none !default;
26
29
  $au-slider-handle-focus-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
30
+ $au-slider-handle-focus-hover-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
27
31
  $au-slider-progress-color: var(--#{$prefix}primary, #0d6efd) !default;
28
32
  $au-slider-progress-height: 0.25rem !default;
29
33
  $au-slider-progress-vertical-transform: rotate(90deg) !default;
@@ -61,3 +65,4 @@ $au-slider-bar-size-lg: 0.3125rem !default;
61
65
  $au-slider-handle-size-lg: 1.5rem !default;
62
66
  $au-slider-font-size-lg: 1.125rem !default;
63
67
  $au-slider-offset-lg: 0rem !default;
68
+ // scss-docs-end slider-vars
package/scss/agnosui.scss CHANGED
@@ -1,6 +1,4 @@
1
- @import 'variables';
2
-
3
1
  //components
4
2
  @import 'select';
5
3
  @import 'slider';
6
- @import 'toast';
4
+ @import 'rating';
package/scss/rating.scss ADDED
@@ -0,0 +1,17 @@
1
+ .au-rating {
2
+ &.d-inline-flex {
3
+ display: inline-flex;
4
+ }
5
+
6
+ .visually-hidden {
7
+ position: absolute;
8
+ width: 1px;
9
+ height: 1px;
10
+ padding: 0;
11
+ margin: -1px;
12
+ overflow: hidden;
13
+ clip: rect(0, 0, 0, 0);
14
+ white-space: nowrap;
15
+ border: 0;
16
+ }
17
+ }
package/scss/select.scss ADDED
@@ -0,0 +1,10 @@
1
+ @use 'variables';
2
+
3
+ .au-select:focus-within {
4
+ box-shadow: var(--#{variables.$prefix}focus-ring-x, 0) var(--#{variables.$prefix}focus-ring-y, 0) var(--#{variables.$prefix}focus-ring-blur, 0)
5
+ var(--#{variables.$prefix}focus-ring-width) var(--#{variables.$prefix}focus-ring-color);
6
+ }
7
+
8
+ .au-select-input {
9
+ outline: none;
10
+ }
package/scss/slider.scss ADDED
@@ -0,0 +1,243 @@
1
+ @use 'variables';
2
+
3
+ /// Mixin used to redefine css variable for different size of slider
4
+ /// In particular the size bar and the size of the handle
5
+ /// The offset is used to add some space between the text and the slider
6
+ @mixin setSliderSize($barSize, $handleSize, $fontSize, $offset) {
7
+ --#{variables.$prefix}slider-font-size: #{$fontSize};
8
+ --#{variables.$prefix}slider-border-radius: calc(#{$barSize} / 2);
9
+
10
+ --#{variables.$prefix}slider-secondary-size: #{$barSize};
11
+
12
+ --#{variables.$prefix}slider-margin-block-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
13
+ --#{variables.$prefix}slider-margin-block-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
14
+ --#{variables.$prefix}slider-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
15
+ --#{variables.$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
16
+
17
+ --#{variables.$prefix}slider-handle-size: #{$handleSize};
18
+
19
+ --#{variables.$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
20
+ --#{variables.$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
21
+ }
22
+
23
+ .au-slider {
24
+ // scss-docs-start slider-css-vars
25
+ --#{variables.$prefix}slider-background-color: #{variables.$au-slider-color-background};
26
+ --#{variables.$prefix}slider-font-size: #{variables.$au-slider-font-size};
27
+ --#{variables.$prefix}slider-border-radius: #{variables.$au-slider-border-radius};
28
+ --#{variables.$prefix}slider-line-height: #{variables.$au-slider-line-height};
29
+
30
+ --#{variables.$prefix}slider-primary-size: #{variables.$au-slider-primary-size};
31
+ --#{variables.$prefix}slider-secondary-size: #{variables.$au-slider-secondary-size};
32
+ --#{variables.$prefix}slider-margin-block-start: #{variables.$au-slider-margin-block-start};
33
+ --#{variables.$prefix}slider-margin-block-end: #{variables.$au-slider-margin-block-end};
34
+ --#{variables.$prefix}slider-vertical-margin-inline-start: #{variables.$au-slider-vertical-margin-inline-start};
35
+ --#{variables.$prefix}slider-vertical-margin-inline-end: #{variables.$au-slider-vertical-margin-inline-end};
36
+ --#{variables.$prefix}slider-translate-vertical: #{variables.$au-slider-translate-vertical};
37
+ --#{variables.$prefix}slider-translate-horizontal: #{variables.$au-slider-translate-horizontal};
38
+
39
+ --#{variables.$prefix}slider-handle-color: #{variables.$au-slider-handle-color};
40
+ --#{variables.$prefix}slider-handle-hover-color: #{variables.$au-slider-handle-hover-color};
41
+ --#{variables.$prefix}slider-handle-size: #{variables.$au-slider-handle-size};
42
+ --#{variables.$prefix}slider-handle-border: #{variables.$au-slider-handle-border};
43
+ --#{variables.$prefix}slider-handle-border-hover: #{variables.$au-slider-handle-border-hover};
44
+ --#{variables.$prefix}slider-handle-border-radius: #{variables.$au-slider-handle-border-radius};
45
+ --#{variables.$prefix}slider-handle-outline: #{variables.$au-slider-handle-outline};
46
+ --#{variables.$prefix}slider-handle-focus-box-shadow: #{variables.$au-slider-handle-focus-box-shadow};
47
+ --#{variables.$prefix}slider-handle-focus-hover-box-shadow: #{variables.$au-slider-handle-focus-hover-box-shadow};
48
+
49
+ --#{variables.$prefix}slider-progress-color: #{variables.$au-slider-progress-color};
50
+ --#{variables.$prefix}slider-progress-height: #{variables.$au-slider-progress-height};
51
+ --#{variables.$prefix}slider-progress-vertical-transform: #{variables.$au-slider-progress-vertical-transform};
52
+
53
+ --#{variables.$prefix}slider-label-margin-block-start: #{variables.$au-slider-label-margin-block-start};
54
+ --#{variables.$prefix}slider-label-font-weight: #{variables.$au-slider-label-font-weight};
55
+ --#{variables.$prefix}slider-label-now-font-weight: #{variables.$au-slider-label-now-font-weight};
56
+
57
+ --#{variables.$prefix}slider-label-min-position: #{variables.$au-slider-label-min-position};
58
+ --#{variables.$prefix}slider-label-max-position: #{variables.$au-slider-label-max-position};
59
+ --#{variables.$prefix}slider-label-now-transform: #{variables.$au-slider-label-now-transform};
60
+
61
+ --#{variables.$prefix}slider-label-vertical-margin-inline-start: #{variables.$au-slider-label-vertical-margin-inline-start};
62
+ --#{variables.$prefix}slider-label-vertical-min-transform: #{variables.$au-slider-label-vertical-min-transform};
63
+ --#{variables.$prefix}slider-label-vertical-max-transform: #{variables.$au-slider-label-vertical-max-transform};
64
+ --#{variables.$prefix}slider-label-vertical-white-space: #{variables.$au-slider-label-vertical-white-space};
65
+ --#{variables.$prefix}slider-label-vertical-min-top: #{variables.$au-slider-label-vertical-min-top};
66
+ --#{variables.$prefix}slider-label-vertical-max-top: #{variables.$au-slider-label-vertical-max-top};
67
+ --#{variables.$prefix}slider-label-vertical-now-transform: #{variables.$au-slider-label-vertical-now-transform};
68
+
69
+ --#{variables.$prefix}slider-clickable-area-main-size: #{variables.$au-slider-clickable-area-main-size};
70
+ --#{variables.$prefix}slider-clickable-area-secondary-size: #{variables.$au-slider-clickable-area-secondary-size};
71
+ --#{variables.$prefix}slider-clickable-area-translate: #{variables.$au-slider-clickable-area-translateY};
72
+ --#{variables.$prefix}slider-clickable-area-vertical-translate: #{variables.$au-slider-clickable-area-translateX};
73
+ --#{variables.$prefix}slider-clickable-area-vertical-flex-shrink: #{variables.$au-slider-clickable-area-vertical-flex-shrink};
74
+
75
+ --#{variables.$prefix}slider-disabled-color: #{variables.$au-slider-disabled-color};
76
+ --#{variables.$prefix}slider-disabled-cursor: #{variables.$au-slider-disabled-cursor};
77
+ // scss-docs-end slider-css-vars
78
+
79
+ display: flex;
80
+ background-color: var(--#{variables.$prefix}slider-background-color);
81
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
82
+ font-size: var(--#{variables.$prefix}slider-font-size);
83
+ line-height: var(--#{variables.$prefix}slider-line-height);
84
+ position: relative;
85
+
86
+ &.au-slider-lg {
87
+ @include setSliderSize(
88
+ variables.$au-slider-bar-size-lg,
89
+ variables.$au-slider-handle-size-lg,
90
+ variables.$au-slider-font-size-lg,
91
+ variables.$au-slider-offset-lg
92
+ );
93
+ }
94
+
95
+ &.au-slider-sm {
96
+ @include setSliderSize(
97
+ variables.$au-slider-bar-size-sm,
98
+ variables.$au-slider-handle-size-sm,
99
+ variables.$au-slider-font-size-sm,
100
+ variables.$au-slider-offset-sm
101
+ );
102
+ }
103
+
104
+ &.au-slider-horizontal {
105
+ width: var(--#{variables.$prefix}slider-primary-size);
106
+ height: var(--#{variables.$prefix}slider-secondary-size);
107
+ margin-block-start: var(--#{variables.$prefix}slider-margin-block-start);
108
+ margin-block-end: var(--#{variables.$prefix}slider-margin-block-end);
109
+ .au-slider-handle-horizontal {
110
+ top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
111
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
112
+ }
113
+ }
114
+
115
+ &.au-slider-vertical {
116
+ height: var(--#{variables.$prefix}slider-primary-size);
117
+ width: var(--#{variables.$prefix}slider-secondary-size);
118
+ margin-inline-start: var(--#{variables.$prefix}slider-vertical-margin-inline-start);
119
+ margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-end);
120
+ .au-slider-handle-vertical {
121
+ left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
122
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
123
+ }
124
+ }
125
+
126
+ .au-slider-handle {
127
+ background-color: var(--#{variables.$prefix}slider-handle-color);
128
+ border: var(--#{variables.$prefix}slider-handle-border);
129
+ border-radius: var(--#{variables.$prefix}slider-handle-border-radius);
130
+ outline: var(--#{variables.$prefix}slider-handle-outline);
131
+ position: absolute;
132
+ width: var(--#{variables.$prefix}slider-handle-size);
133
+ height: var(--#{variables.$prefix}slider-handle-size);
134
+
135
+ &:not([disabled]):hover {
136
+ border: var(--#{variables.$prefix}slider-handle-border-hover);
137
+ background-color: var(--#{variables.$prefix}slider-handle-hover-color);
138
+ &:focus-visible {
139
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-hover-box-shadow);
140
+ }
141
+ }
142
+ &:focus-visible {
143
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-box-shadow);
144
+ }
145
+ }
146
+
147
+ .au-slider-progress {
148
+ background-color: var(--#{variables.$prefix}slider-progress-color);
149
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
150
+ position: absolute;
151
+ }
152
+
153
+ .au-slider-progress-vertical {
154
+ transform: var(--#{variables.$prefix}slider-progress-vertical-transform);
155
+ }
156
+
157
+ .au-slider-label {
158
+ font-weight: var(--#{variables.$prefix}slider-label-font-weight);
159
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
160
+ position: absolute;
161
+
162
+ &.au-slider-label-min:not(.au-slider-rtl) {
163
+ left: var(--#{variables.$prefix}slider-label-min-position);
164
+ }
165
+
166
+ &.au-slider-label-min.au-slider-rtl {
167
+ right: var(--#{variables.$prefix}slider-label-max-position);
168
+ }
169
+
170
+ &.au-slider-label-max:not(.au-slider-rtl) {
171
+ right: var(--#{variables.$prefix}slider-label-max-position);
172
+ }
173
+
174
+ &.au-slider-label-max.au-slider-rtl {
175
+ left: var(--#{variables.$prefix}slider-label-min-position);
176
+ }
177
+
178
+ &.au-slider-label-now {
179
+ font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
180
+ transform: var(--#{variables.$prefix}slider-label-now-transform);
181
+ }
182
+
183
+ &.invisible {
184
+ visibility: hidden;
185
+ }
186
+ }
187
+
188
+ .au-slider-label-vertical {
189
+ position: absolute;
190
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
191
+ white-space: var(--#{variables.$prefix}slider-label-vertical-white-space);
192
+
193
+ &.au-slider-label-vertical-min:not(.au-slider-rtl) {
194
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
195
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
196
+ }
197
+
198
+ &.au-slider-label-vertical-min.au-slider-rtl {
199
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
200
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
201
+ }
202
+
203
+ &.au-slider-label-vertical-max:not(.au-slider-rtl) {
204
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
205
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
206
+ }
207
+
208
+ &.au-slider-label-vertical-max.au-slider-rtl {
209
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
210
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
211
+ }
212
+
213
+ &.au-slider-label-vertical-now {
214
+ transform: var(--#{variables.$prefix}slider-label-vertical-now-transform);
215
+ }
216
+ }
217
+
218
+ .au-slider-clickable-area {
219
+ height: var(--#{variables.$prefix}slider-clickable-area-main-size);
220
+ width: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
221
+ transform: var(--#{variables.$prefix}slider-clickable-area-translate);
222
+ }
223
+
224
+ .au-slider-clickable-area-vertical {
225
+ width: var(--#{variables.$prefix}slider-clickable-area-main-size);
226
+ height: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
227
+ transform: var(--#{variables.$prefix}slider-clickable-area-vertical-translate);
228
+ flex-shrink: var(--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink);
229
+ }
230
+
231
+ &.disabled {
232
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
233
+ .au-slider-label,
234
+ .au-slider-label-vertical {
235
+ color: var(--#{variables.$prefix}slider-disabled-color);
236
+ }
237
+ .au-slider-progress,
238
+ .au-slider-handle {
239
+ background-color: var(--#{variables.$prefix}slider-disabled-color);
240
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
241
+ }
242
+ }
243
+ }
package/scss/_select.scss DELETED
@@ -1,7 +0,0 @@
1
- .au-select:focus-within {
2
- box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
3
- }
4
-
5
- .au-select-input {
6
- outline: none;
7
- }
package/scss/_slider.scss DELETED
@@ -1,219 +0,0 @@
1
- /// Mixin used to redefine css variable for different size of slider
2
- /// In particular the size bar and the size of the handle
3
- /// The offset is used to add some space between the text and the slider
4
- @mixin setSliderSize($barSize, $handleSize, $fontSize, $offset) {
5
- --#{$prefix}slider-font-size: #{$fontSize};
6
- --#{$prefix}slider-border-radius: calc(#{$barSize} / 2);
7
-
8
- --#{$prefix}slider-secondary-size: #{$barSize};
9
-
10
- --#{$prefix}slider-margin-block-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
11
- --#{$prefix}slider-margin-block-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
12
- --#{$prefix}slider-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
13
- --#{$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
14
-
15
- --#{$prefix}slider-handle-size: #{$handleSize};
16
-
17
- --#{$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
18
- --#{$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
19
- }
20
-
21
- .au-slider {
22
- --#{$prefix}slider-background-color: #{$au-slider-color-background};
23
- --#{$prefix}slider-font-size: #{$au-slider-font-size};
24
- --#{$prefix}slider-border-radius: #{$au-slider-border-radius};
25
- --#{$prefix}slider-line-height: #{$au-slider-line-height};
26
-
27
- --#{$prefix}slider-primary-size: #{$au-slider-primary-size};
28
- --#{$prefix}slider-secondary-size: #{$au-slider-secondary-size};
29
- --#{$prefix}slider-margin-block-start: #{$au-slider-margin-block-start};
30
- --#{$prefix}slider-margin-block-end: #{$au-slider-margin-block-end};
31
- --#{$prefix}slider-vertical-margin-inline-start: #{$au-slider-vertical-margin-inline-start};
32
- --#{$prefix}slider-vertical-margin-inline-end: #{$au-slider-vertical-margin-inline-end};
33
- --#{$prefix}slider-translate-vertical: #{$au-slider-translate-vertical};
34
- --#{$prefix}slider-translate-horizontal: #{$au-slider-translate-horizontal};
35
-
36
- --#{$prefix}slider-handle-color: #{$au-slider-handle-color};
37
- --#{$prefix}slider-handle-size: #{$au-slider-handle-size};
38
- --#{$prefix}slider-handle-border: #{$au-slider-handle-border};
39
- --#{$prefix}slider-handle-border-hover: #{$au-slider-handle-border-hover};
40
- --#{$prefix}slider-handle-border-radius: #{$au-slider-handle-border-radius};
41
- --#{$prefix}slider-handle-outline: #{$au-slider-handle-outline};
42
- --#{$prefix}slider-handle-focus-box-shadow: #{$au-slider-handle-focus-box-shadow};
43
-
44
- --#{$prefix}slider-progress-color: #{$au-slider-progress-color};
45
- --#{$prefix}slider-progress-height: #{$au-slider-progress-height};
46
- --#{$prefix}slider-progress-vertical-transform: #{$au-slider-progress-vertical-transform};
47
-
48
- --#{$prefix}slider-label-margin-block-start: #{$au-slider-label-margin-block-start};
49
- --#{$prefix}slider-label-font-weight: #{$au-slider-label-font-weight};
50
- --#{$prefix}slider-label-now-font-weight: #{$au-slider-label-now-font-weight};
51
-
52
- --#{$prefix}slider-label-min-position: #{$au-slider-label-min-position};
53
- --#{$prefix}slider-label-max-position: #{$au-slider-label-max-position};
54
- --#{$prefix}slider-label-now-transform: #{$au-slider-label-now-transform};
55
-
56
- --#{$prefix}slider-label-vertical-margin-inline-start: #{$au-slider-label-vertical-margin-inline-start};
57
- --#{$prefix}slider-label-vertical-min-transform: #{$au-slider-label-vertical-min-transform};
58
- --#{$prefix}slider-label-vertical-max-transform: #{$au-slider-label-vertical-max-transform};
59
- --#{$prefix}slider-label-vertical-white-space: #{$au-slider-label-vertical-white-space};
60
- --#{$prefix}slider-label-vertical-min-top: #{$au-slider-label-vertical-min-top};
61
- --#{$prefix}slider-label-vertical-max-top: #{$au-slider-label-vertical-max-top};
62
- --#{$prefix}slider-label-vertical-now-transform: #{$au-slider-label-vertical-now-transform};
63
-
64
- --#{$prefix}slider-clickable-area-main-size: #{$au-slider-clickable-area-main-size};
65
- --#{$prefix}slider-clickable-area-secondary-size: #{$au-slider-clickable-area-secondary-size};
66
- --#{$prefix}slider-clickable-area-translate: #{$au-slider-clickable-area-translateY};
67
- --#{$prefix}slider-clickable-area-vertical-translate: #{$au-slider-clickable-area-translateX};
68
- --#{$prefix}slider-clickable-area-vertical-flex-shrink: #{$au-slider-clickable-area-vertical-flex-shrink};
69
-
70
- --#{$prefix}slider-disabled-color: #{$au-slider-disabled-color};
71
- --#{$prefix}slider-disabled-cursor: #{$au-slider-disabled-cursor};
72
-
73
- display: flex;
74
- background-color: var(--#{$prefix}slider-background-color);
75
- border-radius: var(--#{$prefix}slider-border-radius);
76
- font-size: var(--#{$prefix}slider-font-size);
77
- line-height: var(--#{$prefix}slider-line-height);
78
- position: relative;
79
-
80
- &.au-slider-lg {
81
- @include setSliderSize($au-slider-bar-size-lg, $au-slider-handle-size-lg, $au-slider-font-size-lg, $au-slider-offset-lg);
82
- }
83
-
84
- &.au-slider-sm {
85
- @include setSliderSize($au-slider-bar-size-sm, $au-slider-handle-size-sm, $au-slider-font-size-sm, $au-slider-offset-sm);
86
- }
87
-
88
- &.au-slider-horizontal {
89
- width: var(--#{$prefix}slider-primary-size);
90
- height: var(--#{$prefix}slider-secondary-size);
91
- margin-block-start: var(--#{$prefix}slider-margin-block-start);
92
- margin-block-end: var(--#{$prefix}slider-margin-block-end);
93
- .au-slider-handle-horizontal {
94
- top: calc(50% - var(--#{$prefix}slider-handle-size) / 2);
95
- transform: var(--#{$prefix}slider-translate-horizontal);
96
- }
97
- }
98
-
99
- &.au-slider-vertical {
100
- height: var(--#{$prefix}slider-primary-size);
101
- width: var(--#{$prefix}slider-secondary-size);
102
- margin-inline-start: var(--#{$prefix}slider-vertical-margin-inline-start);
103
- margin-inline-end: var(--#{$prefix}slider-vertical-margin-inline-end);
104
- .au-slider-handle-vertical {
105
- left: calc(50% - var(--#{$prefix}slider-handle-size) / 2);
106
- transform: var(--#{$prefix}slider-translate-vertical);
107
- }
108
- }
109
-
110
- .au-slider-handle {
111
- background-color: var(--#{$prefix}slider-handle-color);
112
- border: var(--#{$prefix}slider-handle-border);
113
- border-radius: var(--#{$prefix}slider-handle-border-radius);
114
- outline: var(--#{$prefix}slider-handle-outline);
115
- position: absolute;
116
- width: var(--#{$prefix}slider-handle-size);
117
- height: var(--#{$prefix}slider-handle-size);
118
-
119
- &:not([disabled]):hover {
120
- border: var(--#{$prefix}slider-handle-border-hover);
121
- }
122
- &:focus-visible {
123
- box-shadow: var(--#{$prefix}slider-handle-focus-box-shadow);
124
- }
125
- }
126
-
127
- .au-slider-progress {
128
- background-color: var(--#{$prefix}slider-progress-color);
129
- border-radius: var(--#{$prefix}slider-border-radius);
130
- position: absolute;
131
- }
132
-
133
- .au-slider-progress-vertical {
134
- transform: var(--#{$prefix}slider-progress-vertical-transform);
135
- }
136
-
137
- .au-slider-label {
138
- font-weight: var(--#{$prefix}slider-label-font-weight);
139
- margin-block-start: var(--#{$prefix}slider-label-margin-block-start);
140
- position: absolute;
141
-
142
- &.au-slider-label-min:not(.au-slider-rtl) {
143
- left: var(--#{$prefix}slider-label-min-position);
144
- }
145
-
146
- &.au-slider-label-min.au-slider-rtl {
147
- right: var(--#{$prefix}slider-label-max-position);
148
- }
149
-
150
- &.au-slider-label-max:not(.au-slider-rtl) {
151
- right: var(--#{$prefix}slider-label-max-position);
152
- }
153
-
154
- &.au-slider-label-max.au-slider-rtl {
155
- left: var(--#{$prefix}slider-label-min-position);
156
- }
157
-
158
- &.au-slider-label-now {
159
- font-weight: var(--#{$prefix}slider-label-now-font-weight);
160
- transform: var(--#{$prefix}slider-label-now-transform);
161
- }
162
- }
163
-
164
- .au-slider-label-vertical {
165
- position: absolute;
166
- margin-inline-start: var(--#{$prefix}slider-label-vertical-margin-inline-start);
167
- white-space: var(--#{$prefix}slider-label-vertical-white-space);
168
-
169
- &.au-slider-label-vertical-min:not(.au-slider-rtl) {
170
- top: var(--#{$prefix}slider-label-vertical-min-top);
171
- transform: var(--#{$prefix}slider-label-vertical-min-transform);
172
- }
173
-
174
- &.au-slider-label-vertical-min.au-slider-rtl {
175
- top: var(--#{$prefix}slider-label-vertical-max-top);
176
- transform: var(--#{$prefix}slider-label-vertical-max-transform);
177
- }
178
-
179
- &.au-slider-label-vertical-max:not(.au-slider-rtl) {
180
- top: var(--#{$prefix}slider-label-vertical-max-top);
181
- transform: var(--#{$prefix}slider-label-vertical-max-transform);
182
- }
183
-
184
- &.au-slider-label-vertical-max.au-slider-rtl {
185
- top: var(--#{$prefix}slider-label-vertical-min-top);
186
- transform: var(--#{$prefix}slider-label-vertical-min-transform);
187
- }
188
-
189
- &.au-slider-label-vertical-now {
190
- transform: var(--#{$prefix}slider-label-vertical-now-transform);
191
- }
192
- }
193
-
194
- .au-slider-clickable-area {
195
- height: var(--#{$prefix}slider-clickable-area-main-size);
196
- width: var(--#{$prefix}slider-clickable-area-secondary-size);
197
- transform: var(--#{$prefix}slider-clickable-area-translate);
198
- }
199
-
200
- .au-slider-clickable-area-vertical {
201
- width: var(--#{$prefix}slider-clickable-area-main-size);
202
- height: var(--#{$prefix}slider-clickable-area-secondary-size);
203
- transform: var(--#{$prefix}slider-clickable-area-vertical-translate);
204
- flex-shrink: var(--#{$prefix}slider-clickable-area-vertical-flex-shrink);
205
- }
206
-
207
- &.disabled {
208
- cursor: var(--#{$prefix}slider-disabled-cursor);
209
- .au-slider-label,
210
- .au-slider-label-vertical {
211
- color: var(--#{$prefix}slider-disabled-color);
212
- }
213
- .au-slider-progress,
214
- .au-slider-handle {
215
- background-color: var(--#{$prefix}slider-disabled-color);
216
- cursor: var(--#{$prefix}slider-disabled-cursor);
217
- }
218
- }
219
- }
package/scss/_toast.scss DELETED
@@ -1,3 +0,0 @@
1
- .au-toast {
2
- width: $toast-max-width;
3
- }