@agnos-ui/core-bootstrap 0.7.0 → 0.8.0-next.0

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.
@@ -2,6 +2,7 @@
2
2
  const accordion = require("@agnos-ui/core/components/accordion");
3
3
  const collapse = require("./collapse-sUYbZqEx.cjs");
4
4
  const extendWidget = require("@agnos-ui/core/services/extendWidget");
5
+ const func = require("@agnos-ui/core/utils/func");
5
6
  const defaultConfigExtraProps = {
6
7
  itemStructure: void 0
7
8
  };
@@ -18,12 +19,9 @@ const accordionItemDefaultConfig = {
18
19
  animated: false,
19
20
  transition: collapse.collapseVerticalTransition,
20
21
  destroyOnHide: false,
21
- onShown: () => {
22
- },
23
- onHidden: () => {
24
- },
25
- onVisibleChange: () => {
26
- },
22
+ onShown: func.noop,
23
+ onHidden: func.noop,
24
+ onVisibleChange: func.noop,
27
25
  visible: false,
28
26
  disabled: false,
29
27
  id: "",
@@ -1,6 +1,7 @@
1
1
  import { getAccordionDefaultConfig as getAccordionDefaultConfig$1, createAccordionItem as createAccordionItem$1, factoryCreateAccordion } from "@agnos-ui/core/components/accordion";
2
2
  import { c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
3
3
  import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
4
+ import { noop } from "@agnos-ui/core/utils/func";
4
5
  const defaultConfigExtraProps = {
5
6
  itemStructure: void 0
6
7
  };
@@ -17,12 +18,9 @@ const accordionItemDefaultConfig = {
17
18
  animated: false,
18
19
  transition: collapseVerticalTransition,
19
20
  destroyOnHide: false,
20
- onShown: () => {
21
- },
22
- onHidden: () => {
23
- },
24
- onVisibleChange: () => {
25
- },
21
+ onShown: noop,
22
+ onHidden: noop,
23
+ onVisibleChange: noop,
26
24
  visible: false,
27
25
  disabled: false,
28
26
  id: "",
@@ -4,6 +4,7 @@ const stores = require("@agnos-ui/core/utils/stores");
4
4
  const directive = require("@agnos-ui/core/utils/directive");
5
5
  const writables = require("@agnos-ui/core/utils/writables");
6
6
  const collapse = require("./collapse-sUYbZqEx.cjs");
7
+ const func = require("@agnos-ui/core/utils/func");
7
8
  const equal = (a, b) => Object.is(a, b) && (!a || typeof a !== "object") && typeof a !== "function";
8
9
  const subscribersQueue = [];
9
10
  let willProcessQueue = false;
@@ -283,7 +284,7 @@ class RawStoreTrackingUsage extends RawStoreWritable {
283
284
  const flags = this.flags;
284
285
  if (flags & 2 && !this.extraUsages && !this.consumerLinks.length) {
285
286
  if (inFlushUnused || flags & 1) {
286
- this.flags &= ~2;
287
+ this.flags &= -3;
287
288
  untrack(() => this.endUse());
288
289
  } else if (!(flags & 4)) {
289
290
  this.flags |= 4;
@@ -450,7 +451,7 @@ class RawStoreComputedOrDerived extends RawStoreTrackingUsage {
450
451
  }
451
452
  } finally {
452
453
  setActiveConsumer(prevActiveConsumer);
453
- this.flags &= ~8;
454
+ this.flags &= -9;
454
455
  }
455
456
  }
456
457
  }
@@ -571,12 +572,9 @@ function computed(fn, options) {
571
572
  const defaultCollapseConfig = {
572
573
  visible: true,
573
574
  horizontal: false,
574
- onVisibleChange: () => {
575
- },
576
- onShown: () => {
577
- },
578
- onHidden: () => {
579
- },
575
+ onVisibleChange: func.noop,
576
+ onShown: func.noop,
577
+ onHidden: func.noop,
580
578
  animated: true,
581
579
  animatedOnInit: false,
582
580
  className: "",
@@ -597,7 +595,11 @@ const commonCollapseConfigValidator = {
597
595
  id: writables.typeString
598
596
  };
599
597
  function createCollapse(config) {
600
- const [{ animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$, ...stateProps }, patch] = stores.writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
598
+ const [
599
+ { animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
600
+ patch
601
+ ] = stores.writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
602
+ const id$ = stores.idWithDefault(_dirtyId$);
601
603
  const currentTransitionFn$ = asWritable(computed(() => horizontal$() ? collapse.collapseHorizontalTransition : collapse.collapseVerticalTransition));
602
604
  const transition = baseTransitions.createTransition({
603
605
  props: {
@@ -625,10 +627,22 @@ function createCollapse(config) {
625
627
  transition.directives.directive,
626
628
  directive.createAttributesDirective(() => ({
627
629
  attributes: {
628
- id: computed(() => id$() || void 0)
630
+ id: id$
631
+ },
632
+ classNames: {
633
+ "au-collapse": stores.true$
629
634
  }
630
635
  }))
631
- )
636
+ ),
637
+ triggerDirective: directive.createAttributesDirective(() => ({
638
+ attributes: {
639
+ "aria-expanded": computed(() => `${visible$()}`),
640
+ "aria-controls": id$
641
+ },
642
+ events: {
643
+ click: () => transition.api.toggle()
644
+ }
645
+ }))
632
646
  }
633
647
  };
634
648
  }
@@ -1,8 +1,9 @@
1
1
  import { createTransition } from "@agnos-ui/core/services/transitions/baseTransitions";
2
- import { writablesForProps, stateStores } from "@agnos-ui/core/utils/stores";
2
+ import { writablesForProps, idWithDefault, stateStores, true$ } from "@agnos-ui/core/utils/stores";
3
3
  import { mergeDirectives, createAttributesDirective } from "@agnos-ui/core/utils/directive";
4
4
  import { typeBoolean, typeFunction, typeString } from "@agnos-ui/core/utils/writables";
5
5
  import { a as collapseHorizontalTransition, c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
6
+ import { noop as noop$1 } from "@agnos-ui/core/utils/func";
6
7
  const equal = (a, b) => Object.is(a, b) && (!a || typeof a !== "object") && typeof a !== "function";
7
8
  const subscribersQueue = [];
8
9
  let willProcessQueue = false;
@@ -282,7 +283,7 @@ class RawStoreTrackingUsage extends RawStoreWritable {
282
283
  const flags = this.flags;
283
284
  if (flags & 2 && !this.extraUsages && !this.consumerLinks.length) {
284
285
  if (inFlushUnused || flags & 1) {
285
- this.flags &= ~2;
286
+ this.flags &= -3;
286
287
  untrack(() => this.endUse());
287
288
  } else if (!(flags & 4)) {
288
289
  this.flags |= 4;
@@ -449,7 +450,7 @@ class RawStoreComputedOrDerived extends RawStoreTrackingUsage {
449
450
  }
450
451
  } finally {
451
452
  setActiveConsumer(prevActiveConsumer);
452
- this.flags &= ~8;
453
+ this.flags &= -9;
453
454
  }
454
455
  }
455
456
  }
@@ -570,12 +571,9 @@ function computed(fn, options) {
570
571
  const defaultCollapseConfig = {
571
572
  visible: true,
572
573
  horizontal: false,
573
- onVisibleChange: () => {
574
- },
575
- onShown: () => {
576
- },
577
- onHidden: () => {
578
- },
574
+ onVisibleChange: noop$1,
575
+ onShown: noop$1,
576
+ onHidden: noop$1,
579
577
  animated: true,
580
578
  animatedOnInit: false,
581
579
  className: "",
@@ -596,7 +594,11 @@ const commonCollapseConfigValidator = {
596
594
  id: typeString
597
595
  };
598
596
  function createCollapse(config) {
599
- const [{ animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$, ...stateProps }, patch] = writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
597
+ const [
598
+ { animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
599
+ patch
600
+ ] = writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
601
+ const id$ = idWithDefault(_dirtyId$);
600
602
  const currentTransitionFn$ = asWritable(computed(() => horizontal$() ? collapseHorizontalTransition : collapseVerticalTransition));
601
603
  const transition = createTransition({
602
604
  props: {
@@ -624,10 +626,22 @@ function createCollapse(config) {
624
626
  transition.directives.directive,
625
627
  createAttributesDirective(() => ({
626
628
  attributes: {
627
- id: computed(() => id$() || void 0)
629
+ id: id$
630
+ },
631
+ classNames: {
632
+ "au-collapse": true$
628
633
  }
629
634
  }))
630
- )
635
+ ),
636
+ triggerDirective: createAttributesDirective(() => ({
637
+ attributes: {
638
+ "aria-expanded": computed(() => `${visible$()}`),
639
+ "aria-controls": id$
640
+ },
641
+ events: {
642
+ click: () => transition.api.toggle()
643
+ }
644
+ }))
631
645
  }
632
646
  };
633
647
  }
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const accordion = require("../../accordion-B-uoNLHJ.cjs");
3
+ const accordion = require("../../accordion-C1fPM-Yp.cjs");
4
4
  const accordion$1 = require("@agnos-ui/core/components/accordion");
5
5
  exports.createAccordion = accordion.createAccordion;
6
6
  exports.createAccordionItem = accordion.createAccordionItem;
@@ -1,4 +1,4 @@
1
- import { a, c, g } from "../../accordion-DBVC9W8u.js";
1
+ import { a, c, g } from "../../accordion-Dy6WokG3.js";
2
2
  export * from "@agnos-ui/core/components/accordion";
3
3
  export {
4
4
  a as createAccordion,
@@ -108,6 +108,10 @@ export interface CollapseDirectives {
108
108
  * Directive to apply the collapse.
109
109
  */
110
110
  collapseDirective: Directive;
111
+ /**
112
+ * Directive to apply to a trigger;
113
+ */
114
+ triggerDirective: Directive;
111
115
  }
112
116
  /**
113
117
  * Represents a widget for handling collapse functionality.
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const collapse = require("../../collapse-_elTaNvN.cjs");
3
+ const collapse = require("../../collapse-CSP8JFq-.cjs");
4
4
  exports.createCollapse = collapse.createCollapse;
5
5
  exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
@@ -1,4 +1,4 @@
1
- import { c, g } from "../../collapse-DAqth71Q.js";
1
+ import { c, g } from "../../collapse-DJJ1jB2v.js";
2
2
  export {
3
3
  c as createCollapse,
4
4
  g as getCollapseDefaultConfig
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const slider = require("../../slider-UHwPs1vO.cjs");
3
+ const slider = require("../../slider-CosrWCnn.cjs");
4
4
  const slider$1 = require("@agnos-ui/core/components/slider");
5
5
  exports.createSlider = slider.createSlider;
6
6
  exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;
@@ -1,4 +1,4 @@
1
- import { c, g } from "../../slider-CLWQS0Ke.js";
1
+ import { c, g } from "../../slider-Bj081WdM.js";
2
2
  export * from "@agnos-ui/core/components/slider";
3
3
  export {
4
4
  c as createSlider,
@@ -1,4 +1,4 @@
1
- import type { SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState } from '@agnos-ui/core/components/slider';
1
+ import type { SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState, SliderTick } from '@agnos-ui/core/components/slider';
2
2
  import type { SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
3
3
  export * from '@agnos-ui/core/components/slider';
4
4
  /**
@@ -27,6 +27,15 @@ export interface SliderSlotHandleContext extends SliderContext {
27
27
  */
28
28
  item: SliderHandle;
29
29
  }
30
+ /**
31
+ * Represents the context for a slider tick slot
32
+ */
33
+ export interface SliderSlotTickContext extends SliderContext {
34
+ /**
35
+ * tick context
36
+ */
37
+ tick: SliderTick;
38
+ }
30
39
  interface SliderExtraProps {
31
40
  /**
32
41
  * Slot to change the default display of the slider
@@ -45,6 +54,10 @@ interface SliderExtraProps {
45
54
  * Slot to change the handlers
46
55
  */
47
56
  handle: SlotContent<SliderSlotHandleContext>;
57
+ /**
58
+ * Slot to change the ticks
59
+ */
60
+ tick: SlotContent<SliderSlotTickContext>;
48
61
  }
49
62
  /**
50
63
  * Represents the state of a slider component.
package/css/agnosui.css CHANGED
@@ -97,6 +97,12 @@
97
97
  --bs-slider-handle-outline: none;
98
98
  --bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
99
99
  --bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
100
+ --bs-slider-tick-primary-size: 1rem;
101
+ --bs-slider-tick-secondary-size: 1rem;
102
+ --bs-slider-tick-neutral-color: var(--bs-light-emphasis, #666666);
103
+ --bs-slider-tick-selected-color: var(--bs-primary, #0d6efd);
104
+ --bs-slider-tick-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
105
+ --bs-slider-tick-label-translate-vertical: translateY(75%);
100
106
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
101
107
  --bs-slider-progress-height: 0.25rem;
102
108
  --bs-slider-progress-vertical-transform: rotate(90deg);
@@ -137,7 +143,10 @@
137
143
  --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
138
144
  --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
139
145
  --bs-slider-handle-size: 1.5rem;
146
+ --bs-slider-tick-primary-size: 1.25rem;
147
+ --bs-slider-tick-secondary-size: 1.25rem;
140
148
  --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
149
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
141
150
  --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
142
151
  }
143
152
  .au-slider.au-slider-sm {
@@ -149,7 +158,10 @@
149
158
  --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
150
159
  --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
151
160
  --bs-slider-handle-size: 1rem;
161
+ --bs-slider-tick-primary-size: 0.75rem;
162
+ --bs-slider-tick-secondary-size: 0.75rem;
152
163
  --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
164
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
153
165
  --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
154
166
  }
155
167
  .au-slider.au-slider-horizontal {
@@ -162,6 +174,10 @@
162
174
  top: calc(50% - var(--bs-slider-handle-size) / 2);
163
175
  transform: var(--bs-slider-translate-horizontal);
164
176
  }
177
+ .au-slider.au-slider-horizontal .au-slider-tick-horizontal {
178
+ top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
179
+ transform: var(--bs-slider-translate-horizontal);
180
+ }
165
181
  .au-slider.au-slider-vertical {
166
182
  height: var(--bs-slider-primary-size);
167
183
  width: var(--bs-slider-secondary-size);
@@ -172,6 +188,10 @@
172
188
  left: calc(50% - var(--bs-slider-handle-size) / 2);
173
189
  transform: var(--bs-slider-translate-vertical);
174
190
  }
191
+ .au-slider.au-slider-vertical .au-slider-tick-vertical {
192
+ left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
193
+ transform: var(--bs-slider-translate-vertical);
194
+ }
175
195
  .au-slider .au-slider-handle {
176
196
  background-color: var(--bs-slider-handle-color);
177
197
  border: var(--bs-slider-handle-border);
@@ -191,6 +211,26 @@
191
211
  .au-slider .au-slider-handle:focus-visible {
192
212
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
193
213
  }
214
+ .au-slider .au-slider-tick {
215
+ position: absolute;
216
+ height: var(--bs-slider-tick-primary-size);
217
+ width: var(--bs-slider-tick-secondary-size);
218
+ cursor: var(--bs-slider-clickable-area-cursor);
219
+ }
220
+ .au-slider .au-slider-tick svg {
221
+ display: block;
222
+ }
223
+ .au-slider .au-slider-tick-label {
224
+ position: absolute;
225
+ text-wrap: nowrap;
226
+ transform: var(--bs-slider-translate-horizontal);
227
+ margin-block-start: var(--bs-slider-label-margin-block-start);
228
+ }
229
+ .au-slider .au-slider-tick-label-vertical {
230
+ position: absolute;
231
+ margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
232
+ transform: var(--bs-slider-tick-label-translate-vertical);
233
+ }
194
234
  .au-slider .au-slider-progress {
195
235
  background-color: var(--bs-slider-progress-color);
196
236
  border-radius: var(--bs-slider-border-radius);
@@ -203,6 +243,7 @@
203
243
  font-weight: var(--bs-slider-label-font-weight);
204
244
  margin-block-start: var(--bs-slider-label-margin-block-start);
205
245
  position: absolute;
246
+ text-wrap: nowrap;
206
247
  }
207
248
  .au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
208
249
  left: var(--bs-slider-label-min-position);
@@ -260,11 +301,16 @@
260
301
  flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
261
302
  cursor: var(--bs-slider-clickable-area-cursor);
262
303
  }
304
+ .au-slider .au-slider-clickable-area-with-ticks {
305
+ cursor: default;
306
+ }
263
307
  .au-slider.disabled {
264
308
  cursor: var(--bs-slider-disabled-cursor);
265
309
  }
266
310
  .au-slider.disabled .au-slider-label,
267
- .au-slider.disabled .au-slider-label-vertical {
311
+ .au-slider.disabled .au-slider-label-vertical,
312
+ .au-slider.disabled .au-slider-tick-label,
313
+ .au-slider.disabled .au-slider-tick-label-vertical {
268
314
  color: var(--bs-slider-disabled-color);
269
315
  }
270
316
  .au-slider.disabled .au-slider-progress,
@@ -273,7 +319,8 @@
273
319
  cursor: var(--bs-slider-disabled-cursor);
274
320
  }
275
321
  .au-slider.disabled .au-slider-clickable-area,
276
- .au-slider.disabled .au-slider-clickable-area-vertical {
322
+ .au-slider.disabled .au-slider-clickable-area-vertical,
323
+ .au-slider.disabled .au-slider-tick {
277
324
  cursor: var(--bs-slider-disabled-cursor);
278
325
  }
279
326
 
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACbA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC;;;ACpEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACYD;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;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAhFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA4EA;EAzFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAqFA;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;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;EAEC;;;ACrPF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACfA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC;;;ACpEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACeD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA5FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAuFA;EAvGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAkGA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;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;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC9SF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
package/css/slider.css CHANGED
@@ -20,6 +20,12 @@
20
20
  --bs-slider-handle-outline: none;
21
21
  --bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
22
22
  --bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
23
+ --bs-slider-tick-primary-size: 1rem;
24
+ --bs-slider-tick-secondary-size: 1rem;
25
+ --bs-slider-tick-neutral-color: var(--bs-light-emphasis, #666666);
26
+ --bs-slider-tick-selected-color: var(--bs-primary, #0d6efd);
27
+ --bs-slider-tick-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
28
+ --bs-slider-tick-label-translate-vertical: translateY(75%);
23
29
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
24
30
  --bs-slider-progress-height: 0.25rem;
25
31
  --bs-slider-progress-vertical-transform: rotate(90deg);
@@ -60,7 +66,10 @@
60
66
  --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
61
67
  --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
62
68
  --bs-slider-handle-size: 1.5rem;
69
+ --bs-slider-tick-primary-size: 1.25rem;
70
+ --bs-slider-tick-secondary-size: 1.25rem;
63
71
  --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
72
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
64
73
  --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
65
74
  }
66
75
  .au-slider.au-slider-sm {
@@ -72,7 +81,10 @@
72
81
  --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
73
82
  --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
74
83
  --bs-slider-handle-size: 1rem;
84
+ --bs-slider-tick-primary-size: 0.75rem;
85
+ --bs-slider-tick-secondary-size: 0.75rem;
75
86
  --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
87
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
76
88
  --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
77
89
  }
78
90
  .au-slider.au-slider-horizontal {
@@ -85,6 +97,10 @@
85
97
  top: calc(50% - var(--bs-slider-handle-size) / 2);
86
98
  transform: var(--bs-slider-translate-horizontal);
87
99
  }
100
+ .au-slider.au-slider-horizontal .au-slider-tick-horizontal {
101
+ top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
102
+ transform: var(--bs-slider-translate-horizontal);
103
+ }
88
104
  .au-slider.au-slider-vertical {
89
105
  height: var(--bs-slider-primary-size);
90
106
  width: var(--bs-slider-secondary-size);
@@ -95,6 +111,10 @@
95
111
  left: calc(50% - var(--bs-slider-handle-size) / 2);
96
112
  transform: var(--bs-slider-translate-vertical);
97
113
  }
114
+ .au-slider.au-slider-vertical .au-slider-tick-vertical {
115
+ left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
116
+ transform: var(--bs-slider-translate-vertical);
117
+ }
98
118
  .au-slider .au-slider-handle {
99
119
  background-color: var(--bs-slider-handle-color);
100
120
  border: var(--bs-slider-handle-border);
@@ -114,6 +134,26 @@
114
134
  .au-slider .au-slider-handle:focus-visible {
115
135
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
116
136
  }
137
+ .au-slider .au-slider-tick {
138
+ position: absolute;
139
+ height: var(--bs-slider-tick-primary-size);
140
+ width: var(--bs-slider-tick-secondary-size);
141
+ cursor: var(--bs-slider-clickable-area-cursor);
142
+ }
143
+ .au-slider .au-slider-tick svg {
144
+ display: block;
145
+ }
146
+ .au-slider .au-slider-tick-label {
147
+ position: absolute;
148
+ text-wrap: nowrap;
149
+ transform: var(--bs-slider-translate-horizontal);
150
+ margin-block-start: var(--bs-slider-label-margin-block-start);
151
+ }
152
+ .au-slider .au-slider-tick-label-vertical {
153
+ position: absolute;
154
+ margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
155
+ transform: var(--bs-slider-tick-label-translate-vertical);
156
+ }
117
157
  .au-slider .au-slider-progress {
118
158
  background-color: var(--bs-slider-progress-color);
119
159
  border-radius: var(--bs-slider-border-radius);
@@ -126,6 +166,7 @@
126
166
  font-weight: var(--bs-slider-label-font-weight);
127
167
  margin-block-start: var(--bs-slider-label-margin-block-start);
128
168
  position: absolute;
169
+ text-wrap: nowrap;
129
170
  }
130
171
  .au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
131
172
  left: var(--bs-slider-label-min-position);
@@ -183,11 +224,16 @@
183
224
  flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
184
225
  cursor: var(--bs-slider-clickable-area-cursor);
185
226
  }
227
+ .au-slider .au-slider-clickable-area-with-ticks {
228
+ cursor: default;
229
+ }
186
230
  .au-slider.disabled {
187
231
  cursor: var(--bs-slider-disabled-cursor);
188
232
  }
189
233
  .au-slider.disabled .au-slider-label,
190
- .au-slider.disabled .au-slider-label-vertical {
234
+ .au-slider.disabled .au-slider-label-vertical,
235
+ .au-slider.disabled .au-slider-tick-label,
236
+ .au-slider.disabled .au-slider-tick-label-vertical {
191
237
  color: var(--bs-slider-disabled-color);
192
238
  }
193
239
  .au-slider.disabled .au-slider-progress,
@@ -196,7 +242,8 @@
196
242
  cursor: var(--bs-slider-disabled-cursor);
197
243
  }
198
244
  .au-slider.disabled .au-slider-clickable-area,
199
- .au-slider.disabled .au-slider-clickable-area-vertical {
245
+ .au-slider.disabled .au-slider-clickable-area-vertical,
246
+ .au-slider.disabled .au-slider-tick {
200
247
  cursor: var(--bs-slider-disabled-cursor);
201
248
  }
202
249
 
@@ -1 +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;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAhFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AA4EA;EAzFA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAqFA;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;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AACA;AAAA;EAEC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;EAEC","file":"slider.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AAyBA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA5FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAuFA;EAvGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAkGA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;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;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC","file":"slider.css"}
package/css/tree.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACbA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC","file":"tree.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACfA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC","file":"tree.css"}
package/index.cjs CHANGED
@@ -1,15 +1,15 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const accordion = require("./accordion-B-uoNLHJ.cjs");
3
+ const accordion = require("./accordion-C1fPM-Yp.cjs");
4
4
  const alert = require("./alert-C-GktcuR.cjs");
5
5
  const modal = require("./modal-DFEAGpCe.cjs");
6
6
  const pageFactory = require("./pageFactory-vEBrUBB-.cjs");
7
7
  const progressbar = require("./progressbar-FwnctYWo.cjs");
8
8
  const rating = require("./rating-C5NZjIRx.cjs");
9
9
  const select = require("./select-AtIM2x7x.cjs");
10
- const slider = require("./slider-UHwPs1vO.cjs");
10
+ const slider = require("./slider-CosrWCnn.cjs");
11
11
  const toast = require("./toast-BYDfN1cI.cjs");
12
- const collapse = require("./collapse-_elTaNvN.cjs");
12
+ const collapse = require("./collapse-CSP8JFq-.cjs");
13
13
  const tree = require("./tree-DuY7bsYo.cjs");
14
14
  const collapse$1 = require("./collapse-sUYbZqEx.cjs");
15
15
  const fade = require("./fade-CJ0jXGio.cjs");
package/index.js CHANGED
@@ -1,13 +1,13 @@
1
- import { a, c, g } from "./accordion-DBVC9W8u.js";
1
+ import { a, c, g } from "./accordion-Dy6WokG3.js";
2
2
  import { c as c2, g as g2 } from "./alert-DXTwYKjx.js";
3
3
  import { c as c3, g as g3 } from "./modal-CHqGXdvt.js";
4
4
  import { c as c4, g as g4, n } from "./pageFactory-CZZJDqOh.js";
5
5
  import { c as c5, g as g5 } from "./progressbar-D9S5NLpS.js";
6
6
  import { c as c6, g as g6 } from "./rating-hovacUx0.js";
7
7
  import { c as c7, g as g7 } from "./select-CLjBDJ3a.js";
8
- import { c as c8, g as g8 } from "./slider-CLWQS0Ke.js";
8
+ import { c as c8, g as g8 } from "./slider-Bj081WdM.js";
9
9
  import { c as c9, g as g9 } from "./toast-D-by8Hwt.js";
10
- import { c as c10, g as g10 } from "./collapse-DAqth71Q.js";
10
+ import { c as c10, g as g10 } from "./collapse-DJJ1jB2v.js";
11
11
  import { c as c11, g as g11 } from "./tree-Be8WJS8u.js";
12
12
  import { a as a2, c as c12 } from "./collapse-CVjUhnIz.js";
13
13
  import { f } from "./fade-uOobJKgw.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agnos-ui/core-bootstrap",
3
3
  "description": "Styles and component interface extensions necessary to use AgnosUI with Bootstrap.",
4
- "version": "0.7.0",
4
+ "version": "0.8.0-next.0",
5
5
  "keywords": [
6
6
  "bootstrap",
7
7
  "css",
@@ -60,7 +60,7 @@
60
60
  }
61
61
  },
62
62
  "dependencies": {
63
- "@agnos-ui/core": "0.7.0"
63
+ "@agnos-ui/core": "0.8.0-next.0"
64
64
  },
65
65
  "peerDependencies": {
66
66
  "@amadeus-it-group/tansu": "^2.0.0"
@@ -1,11 +1,13 @@
1
+ @use 'sass:string';
2
+
1
3
  /**
2
4
  * Utility function to replace a substring as Sass doesn't provide the built-in method to do it
3
5
  */
4
6
  @function str-replace($string, $search, $replace: '') {
5
- $index: str-index($string, $search);
7
+ $index: string.index($string, $search);
6
8
 
7
9
  @if $index {
8
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
10
+ @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
9
11
  }
10
12
 
11
13
  @return $string;
@@ -19,11 +21,11 @@ $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), ('
19
21
  * ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
20
22
  */
21
23
  @function escape-svg($string) {
22
- @if str-index($string, 'data:image/svg+xml') {
24
+ @if string.index($string, 'data:image/svg+xml') {
23
25
  @each $char, $encoded in $escaped-characters {
24
26
  // Do not escape the url brackets
25
- @if str-index($string, 'url(') == 1 {
26
- $string: url('#{str-replace(str-slice($string, 6, -3), $char, $encoded)}');
27
+ @if string.index($string, 'url(') == 1 {
28
+ $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
27
29
  } @else {
28
30
  $string: str-replace($string, $char, $encoded);
29
31
  }
@@ -28,6 +28,12 @@ $au-slider-handle-border-radius: 50% !default;
28
28
  $au-slider-handle-outline: none !default;
29
29
  $au-slider-handle-focus-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
30
30
  $au-slider-handle-focus-hover-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
31
+ $au-slider-tick-primary-size: 1rem !default;
32
+ $au-slider-tick-secondary-size: 1rem !default;
33
+ $au-slider-tick-neutral-color: var(--#{$prefix}light-emphasis, #666666) !default;
34
+ $au-slider-tick-disabled-color: var(--#{$prefix}dark-bg-subtle, #ced4da) !default;
35
+ $au-slider-tick-selected-color: var(--#{$prefix}primary, #0d6efd) !default;
36
+ $au-slider-tick-label-translate-vertical: translateY(75%) !default;
31
37
  $au-slider-progress-color: var(--#{$prefix}primary, #0d6efd) !default;
32
38
  $au-slider-progress-height: 0.25rem !default;
33
39
  $au-slider-progress-vertical-transform: rotate(90deg) !default;
@@ -59,11 +65,15 @@ $au-slider-disabled-cursor: not-allowed !default;
59
65
 
60
66
  $au-slider-bar-size-sm: 0.2rem !default;
61
67
  $au-slider-handle-size-sm: 1rem !default;
68
+ $au-slider-tick-primary-size-sm: 0.75rem !default;
69
+ $au-slider-tick-secondary-size-sm: 0.75rem !default;
62
70
  $au-slider-font-size-sm: 0.875rem !default;
63
71
  $au-slider-offset-sm: 0rem !default;
64
72
 
65
73
  $au-slider-bar-size-lg: 0.3125rem !default;
66
74
  $au-slider-handle-size-lg: 1.5rem !default;
75
+ $au-slider-tick-primary-size-lg: 1.25rem !default;
76
+ $au-slider-tick-secondary-size-lg: 1.25rem !default;
67
77
  $au-slider-font-size-lg: 1.125rem !default;
68
78
  $au-slider-offset-lg: 0rem !default;
69
79
  // scss-docs-end slider-vars
package/scss/slider.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  /// Mixin used to redefine css variable for different size of slider
4
4
  /// In particular the size bar and the size of the handle
5
5
  /// The offset is used to add some space between the text and the slider
6
- @mixin setSliderSize($barSize, $handleSize, $fontSize, $offset) {
6
+ @mixin setSliderSize($barSize, $handleSize, $fontSize, $offset, $tickPrimarySize, $tickSecondarySize) {
7
7
  --#{variables.$prefix}slider-font-size: #{$fontSize};
8
8
  --#{variables.$prefix}slider-border-radius: calc(#{$barSize} / 2);
9
9
 
@@ -15,8 +15,11 @@
15
15
  --#{variables.$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
16
16
 
17
17
  --#{variables.$prefix}slider-handle-size: #{$handleSize};
18
+ --#{variables.$prefix}slider-tick-primary-size: #{$tickPrimarySize};
19
+ --#{variables.$prefix}slider-tick-secondary-size: #{$tickSecondarySize};
18
20
 
19
21
  --#{variables.$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
22
+ --#{variables.$prefix}slider-tick-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$tickPrimarySize} - #{$barSize}) / 2));
20
23
  --#{variables.$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
21
24
  }
22
25
 
@@ -46,6 +49,15 @@
46
49
  --#{variables.$prefix}slider-handle-focus-box-shadow: #{variables.$au-slider-handle-focus-box-shadow};
47
50
  --#{variables.$prefix}slider-handle-focus-hover-box-shadow: #{variables.$au-slider-handle-focus-hover-box-shadow};
48
51
 
52
+ --#{variables.$prefix}slider-tick-primary-size: #{variables.$au-slider-tick-primary-size};
53
+ --#{variables.$prefix}slider-tick-secondary-size: #{variables.$au-slider-tick-secondary-size};
54
+
55
+ --#{variables.$prefix}slider-tick-neutral-color: #{variables.$au-slider-tick-neutral-color};
56
+ --#{variables.$prefix}slider-tick-selected-color: #{variables.$au-slider-tick-selected-color};
57
+ --#{variables.$prefix}slider-tick-disabled-color: #{variables.$au-slider-tick-disabled-color};
58
+
59
+ --#{variables.$prefix}slider-tick-label-translate-vertical: #{variables.$au-slider-tick-label-translate-vertical};
60
+
49
61
  --#{variables.$prefix}slider-progress-color: #{variables.$au-slider-progress-color};
50
62
  --#{variables.$prefix}slider-progress-height: #{variables.$au-slider-progress-height};
51
63
  --#{variables.$prefix}slider-progress-vertical-transform: #{variables.$au-slider-progress-vertical-transform};
@@ -89,7 +101,9 @@
89
101
  variables.$au-slider-bar-size-lg,
90
102
  variables.$au-slider-handle-size-lg,
91
103
  variables.$au-slider-font-size-lg,
92
- variables.$au-slider-offset-lg
104
+ variables.$au-slider-offset-lg,
105
+ variables.$au-slider-tick-primary-size-lg,
106
+ variables.$au-slider-tick-secondary-size-lg
93
107
  );
94
108
  }
95
109
 
@@ -98,7 +112,9 @@
98
112
  variables.$au-slider-bar-size-sm,
99
113
  variables.$au-slider-handle-size-sm,
100
114
  variables.$au-slider-font-size-sm,
101
- variables.$au-slider-offset-sm
115
+ variables.$au-slider-offset-sm,
116
+ variables.$au-slider-tick-primary-size-sm,
117
+ variables.$au-slider-tick-secondary-size-sm
102
118
  );
103
119
  }
104
120
 
@@ -111,6 +127,10 @@
111
127
  top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
112
128
  transform: var(--#{variables.$prefix}slider-translate-horizontal);
113
129
  }
130
+ .au-slider-tick-horizontal {
131
+ top: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
132
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
133
+ }
114
134
  }
115
135
 
116
136
  &.au-slider-vertical {
@@ -122,6 +142,10 @@
122
142
  left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
123
143
  transform: var(--#{variables.$prefix}slider-translate-vertical);
124
144
  }
145
+ .au-slider-tick-vertical {
146
+ left: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
147
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
148
+ }
125
149
  }
126
150
 
127
151
  .au-slider-handle {
@@ -145,6 +169,31 @@
145
169
  }
146
170
  }
147
171
 
172
+ .au-slider-tick {
173
+ position: absolute;
174
+ height: var(--#{variables.$prefix}slider-tick-primary-size);
175
+ width: var(--#{variables.$prefix}slider-tick-secondary-size);
176
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
177
+
178
+ // center align the svg along the slider axis
179
+ svg {
180
+ display: block;
181
+ }
182
+ }
183
+
184
+ .au-slider-tick-label {
185
+ position: absolute;
186
+ text-wrap: nowrap;
187
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
188
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
189
+ }
190
+
191
+ .au-slider-tick-label-vertical {
192
+ position: absolute;
193
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
194
+ transform: var(--#{variables.$prefix}slider-tick-label-translate-vertical);
195
+ }
196
+
148
197
  .au-slider-progress {
149
198
  background-color: var(--#{variables.$prefix}slider-progress-color);
150
199
  border-radius: var(--#{variables.$prefix}slider-border-radius);
@@ -159,6 +208,7 @@
159
208
  font-weight: var(--#{variables.$prefix}slider-label-font-weight);
160
209
  margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
161
210
  position: absolute;
211
+ text-wrap: nowrap;
162
212
 
163
213
  &.au-slider-label-min:not(.au-slider-rtl) {
164
214
  left: var(--#{variables.$prefix}slider-label-min-position);
@@ -231,10 +281,16 @@
231
281
  cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
232
282
  }
233
283
 
284
+ .au-slider-clickable-area-with-ticks {
285
+ cursor: default;
286
+ }
287
+
234
288
  &.disabled {
235
289
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
236
290
  .au-slider-label,
237
- .au-slider-label-vertical {
291
+ .au-slider-label-vertical,
292
+ .au-slider-tick-label,
293
+ .au-slider-tick-label-vertical {
238
294
  color: var(--#{variables.$prefix}slider-disabled-color);
239
295
  }
240
296
  .au-slider-progress,
@@ -243,7 +299,8 @@
243
299
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
244
300
  }
245
301
  .au-slider-clickable-area,
246
- .au-slider-clickable-area-vertical {
302
+ .au-slider-clickable-area-vertical,
303
+ .au-slider-tick {
247
304
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
248
305
  }
249
306
  }
@@ -3,7 +3,8 @@ import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
3
3
  const defaultConfigExtraProps = {
4
4
  structure: void 0,
5
5
  label: ({ value }) => "" + value,
6
- handle: void 0
6
+ handle: void 0,
7
+ tick: void 0
7
8
  };
8
9
  function getSliderDefaultConfig() {
9
10
  return { ...getSliderDefaultConfig$1(), ...defaultConfigExtraProps };
@@ -4,7 +4,8 @@ const extendWidget = require("@agnos-ui/core/services/extendWidget");
4
4
  const defaultConfigExtraProps = {
5
5
  structure: void 0,
6
6
  label: ({ value }) => "" + value,
7
- handle: void 0
7
+ handle: void 0,
8
+ tick: void 0
8
9
  };
9
10
  function getSliderDefaultConfig() {
10
11
  return { ...slider.getSliderDefaultConfig(), ...defaultConfigExtraProps };