@agnos-ui/core-bootstrap 0.7.1 → 0.8.0-next.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.
@@ -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
- import { getAccordionDefaultConfig as getAccordionDefaultConfig$1, createAccordionItem as createAccordionItem$1, factoryCreateAccordion } from "@agnos-ui/core/components/accordion";
1
+ import { factoryCreateAccordion, createAccordionItem as createAccordionItem$1, getAccordionDefaultConfig as getAccordionDefaultConfig$1 } 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: "",
@@ -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";
3
- import { mergeDirectives, createAttributesDirective } from "@agnos-ui/core/utils/directive";
4
- import { typeBoolean, typeFunction, typeString } from "@agnos-ui/core/utils/writables";
2
+ import { writablesForProps, idWithDefault, stateStores, true$ } from "@agnos-ui/core/utils/stores";
3
+ import { createAttributesDirective, mergeDirectives } from "@agnos-ui/core/utils/directive";
4
+ import { typeString, typeBoolean, typeFunction } 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
  }
@@ -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,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-fxxgzVzz.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-6vo9eMAR.js";
2
2
  export {
3
3
  c as createCollapse,
4
4
  g as getCollapseDefaultConfig
@@ -1,4 +1,4 @@
1
- import { c, g } from "../../progressbar-D9S5NLpS.js";
1
+ import { c, g } from "../../progressbar-DcUv6Lh4.js";
2
2
  export * from "@agnos-ui/core/components/progressbar";
3
3
  export {
4
4
  c as createProgressbar,
@@ -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,13 @@
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-fill-color: var(--bs-white, #ffffff);
106
+ --bs-slider-tick-label-translate-vertical: translateY(75%);
100
107
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
101
108
  --bs-slider-progress-height: 0.25rem;
102
109
  --bs-slider-progress-vertical-transform: rotate(90deg);
@@ -137,7 +144,10 @@
137
144
  --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
138
145
  --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
139
146
  --bs-slider-handle-size: 1.5rem;
147
+ --bs-slider-tick-primary-size: 1.25rem;
148
+ --bs-slider-tick-secondary-size: 1.25rem;
140
149
  --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
150
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
141
151
  --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
142
152
  }
143
153
  .au-slider.au-slider-sm {
@@ -149,7 +159,10 @@
149
159
  --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
150
160
  --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
151
161
  --bs-slider-handle-size: 1rem;
162
+ --bs-slider-tick-primary-size: 0.75rem;
163
+ --bs-slider-tick-secondary-size: 0.75rem;
152
164
  --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
165
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
153
166
  --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
154
167
  }
155
168
  .au-slider.au-slider-horizontal {
@@ -162,6 +175,10 @@
162
175
  top: calc(50% - var(--bs-slider-handle-size) / 2);
163
176
  transform: var(--bs-slider-translate-horizontal);
164
177
  }
178
+ .au-slider.au-slider-horizontal .au-slider-tick-horizontal {
179
+ top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
180
+ transform: var(--bs-slider-translate-horizontal);
181
+ }
165
182
  .au-slider.au-slider-vertical {
166
183
  height: var(--bs-slider-primary-size);
167
184
  width: var(--bs-slider-secondary-size);
@@ -172,6 +189,10 @@
172
189
  left: calc(50% - var(--bs-slider-handle-size) / 2);
173
190
  transform: var(--bs-slider-translate-vertical);
174
191
  }
192
+ .au-slider.au-slider-vertical .au-slider-tick-vertical {
193
+ left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
194
+ transform: var(--bs-slider-translate-vertical);
195
+ }
175
196
  .au-slider .au-slider-handle {
176
197
  background-color: var(--bs-slider-handle-color);
177
198
  border: var(--bs-slider-handle-border);
@@ -191,6 +212,53 @@
191
212
  .au-slider .au-slider-handle:focus-visible {
192
213
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
193
214
  }
215
+ .au-slider .au-slider-tick {
216
+ position: absolute;
217
+ height: var(--bs-slider-tick-primary-size);
218
+ width: var(--bs-slider-tick-secondary-size);
219
+ cursor: var(--bs-slider-clickable-area-cursor);
220
+ }
221
+ .au-slider .au-slider-tick svg {
222
+ display: block;
223
+ width: var(--bs-slider-tick-secondary-size);
224
+ height: var(--bs-slider-tick-primary-size);
225
+ fill: none;
226
+ }
227
+ .au-slider .au-slider-tick svg circle {
228
+ cx: 50%;
229
+ cy: 50%;
230
+ fill: var(--bs-slider-tick-fill-color);
231
+ }
232
+ .au-slider .au-slider-tick svg circle.au-slider-tick-outer {
233
+ r: 45%;
234
+ stroke: var(--bs-slider-tick-neutral-color);
235
+ stroke-width: 1.5;
236
+ }
237
+ .au-slider .au-slider-tick svg circle.au-slider-tick-outer.au-slider-tick-disabled {
238
+ stroke: var(--bs-slider-tick-disabled-color);
239
+ }
240
+ .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer {
241
+ fill: var(--bs-slider-tick-selected-color);
242
+ stroke: none;
243
+ r: 50%;
244
+ }
245
+ .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer.au-slider-tick-disabled {
246
+ fill: var(--bs-slider-tick-disabled-color);
247
+ }
248
+ .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-inner {
249
+ r: 25%;
250
+ }
251
+ .au-slider .au-slider-tick-label {
252
+ position: absolute;
253
+ text-wrap: nowrap;
254
+ transform: var(--bs-slider-translate-horizontal);
255
+ margin-block-start: var(--bs-slider-label-margin-block-start);
256
+ }
257
+ .au-slider .au-slider-tick-label-vertical {
258
+ position: absolute;
259
+ margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
260
+ transform: var(--bs-slider-tick-label-translate-vertical);
261
+ }
194
262
  .au-slider .au-slider-progress {
195
263
  background-color: var(--bs-slider-progress-color);
196
264
  border-radius: var(--bs-slider-border-radius);
@@ -261,11 +329,16 @@
261
329
  flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
262
330
  cursor: var(--bs-slider-clickable-area-cursor);
263
331
  }
332
+ .au-slider .au-slider-clickable-area-with-ticks {
333
+ cursor: default;
334
+ }
264
335
  .au-slider.disabled {
265
336
  cursor: var(--bs-slider-disabled-cursor);
266
337
  }
267
338
  .au-slider.disabled .au-slider-label,
268
- .au-slider.disabled .au-slider-label-vertical {
339
+ .au-slider.disabled .au-slider-label-vertical,
340
+ .au-slider.disabled .au-slider-tick-label,
341
+ .au-slider.disabled .au-slider-tick-label-vertical {
269
342
  color: var(--bs-slider-disabled-color);
270
343
  }
271
344
  .au-slider.disabled .au-slider-progress,
@@ -274,7 +347,8 @@
274
347
  cursor: var(--bs-slider-disabled-cursor);
275
348
  }
276
349
  .au-slider.disabled .au-slider-clickable-area,
277
- .au-slider.disabled .au-slider-clickable-area-vertical {
350
+ .au-slider.disabled .au-slider-clickable-area-vertical,
351
+ .au-slider.disabled .au-slider-tick {
278
352
  cursor: var(--bs-slider-disabled-cursor);
279
353
  }
280
354
 
@@ -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;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;;;ACtPF;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;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;EA7FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAwFA;EAxGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAmGA;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;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;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;;;AClVF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
package/css/slider.css CHANGED
@@ -20,6 +20,13 @@
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-fill-color: var(--bs-white, #ffffff);
29
+ --bs-slider-tick-label-translate-vertical: translateY(75%);
23
30
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
24
31
  --bs-slider-progress-height: 0.25rem;
25
32
  --bs-slider-progress-vertical-transform: rotate(90deg);
@@ -60,7 +67,10 @@
60
67
  --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
61
68
  --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
62
69
  --bs-slider-handle-size: 1.5rem;
70
+ --bs-slider-tick-primary-size: 1.25rem;
71
+ --bs-slider-tick-secondary-size: 1.25rem;
63
72
  --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
73
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
64
74
  --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
65
75
  }
66
76
  .au-slider.au-slider-sm {
@@ -72,7 +82,10 @@
72
82
  --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
73
83
  --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
74
84
  --bs-slider-handle-size: 1rem;
85
+ --bs-slider-tick-primary-size: 0.75rem;
86
+ --bs-slider-tick-secondary-size: 0.75rem;
75
87
  --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
88
+ --bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
76
89
  --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
77
90
  }
78
91
  .au-slider.au-slider-horizontal {
@@ -85,6 +98,10 @@
85
98
  top: calc(50% - var(--bs-slider-handle-size) / 2);
86
99
  transform: var(--bs-slider-translate-horizontal);
87
100
  }
101
+ .au-slider.au-slider-horizontal .au-slider-tick-horizontal {
102
+ top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
103
+ transform: var(--bs-slider-translate-horizontal);
104
+ }
88
105
  .au-slider.au-slider-vertical {
89
106
  height: var(--bs-slider-primary-size);
90
107
  width: var(--bs-slider-secondary-size);
@@ -95,6 +112,10 @@
95
112
  left: calc(50% - var(--bs-slider-handle-size) / 2);
96
113
  transform: var(--bs-slider-translate-vertical);
97
114
  }
115
+ .au-slider.au-slider-vertical .au-slider-tick-vertical {
116
+ left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
117
+ transform: var(--bs-slider-translate-vertical);
118
+ }
98
119
  .au-slider .au-slider-handle {
99
120
  background-color: var(--bs-slider-handle-color);
100
121
  border: var(--bs-slider-handle-border);
@@ -114,6 +135,53 @@
114
135
  .au-slider .au-slider-handle:focus-visible {
115
136
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
116
137
  }
138
+ .au-slider .au-slider-tick {
139
+ position: absolute;
140
+ height: var(--bs-slider-tick-primary-size);
141
+ width: var(--bs-slider-tick-secondary-size);
142
+ cursor: var(--bs-slider-clickable-area-cursor);
143
+ }
144
+ .au-slider .au-slider-tick svg {
145
+ display: block;
146
+ width: var(--bs-slider-tick-secondary-size);
147
+ height: var(--bs-slider-tick-primary-size);
148
+ fill: none;
149
+ }
150
+ .au-slider .au-slider-tick svg circle {
151
+ cx: 50%;
152
+ cy: 50%;
153
+ fill: var(--bs-slider-tick-fill-color);
154
+ }
155
+ .au-slider .au-slider-tick svg circle.au-slider-tick-outer {
156
+ r: 45%;
157
+ stroke: var(--bs-slider-tick-neutral-color);
158
+ stroke-width: 1.5;
159
+ }
160
+ .au-slider .au-slider-tick svg circle.au-slider-tick-outer.au-slider-tick-disabled {
161
+ stroke: var(--bs-slider-tick-disabled-color);
162
+ }
163
+ .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer {
164
+ fill: var(--bs-slider-tick-selected-color);
165
+ stroke: none;
166
+ r: 50%;
167
+ }
168
+ .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer.au-slider-tick-disabled {
169
+ fill: var(--bs-slider-tick-disabled-color);
170
+ }
171
+ .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-inner {
172
+ r: 25%;
173
+ }
174
+ .au-slider .au-slider-tick-label {
175
+ position: absolute;
176
+ text-wrap: nowrap;
177
+ transform: var(--bs-slider-translate-horizontal);
178
+ margin-block-start: var(--bs-slider-label-margin-block-start);
179
+ }
180
+ .au-slider .au-slider-tick-label-vertical {
181
+ position: absolute;
182
+ margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
183
+ transform: var(--bs-slider-tick-label-translate-vertical);
184
+ }
117
185
  .au-slider .au-slider-progress {
118
186
  background-color: var(--bs-slider-progress-color);
119
187
  border-radius: var(--bs-slider-border-radius);
@@ -184,11 +252,16 @@
184
252
  flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
185
253
  cursor: var(--bs-slider-clickable-area-cursor);
186
254
  }
255
+ .au-slider .au-slider-clickable-area-with-ticks {
256
+ cursor: default;
257
+ }
187
258
  .au-slider.disabled {
188
259
  cursor: var(--bs-slider-disabled-cursor);
189
260
  }
190
261
  .au-slider.disabled .au-slider-label,
191
- .au-slider.disabled .au-slider-label-vertical {
262
+ .au-slider.disabled .au-slider-label-vertical,
263
+ .au-slider.disabled .au-slider-tick-label,
264
+ .au-slider.disabled .au-slider-tick-label-vertical {
192
265
  color: var(--bs-slider-disabled-color);
193
266
  }
194
267
  .au-slider.disabled .au-slider-progress,
@@ -197,7 +270,8 @@
197
270
  cursor: var(--bs-slider-disabled-cursor);
198
271
  }
199
272
  .au-slider.disabled .au-slider-clickable-area,
200
- .au-slider.disabled .au-slider-clickable-area-vertical {
273
+ .au-slider.disabled .au-slider-clickable-area-vertical,
274
+ .au-slider.disabled .au-slider-tick {
201
275
  cursor: var(--bs-slider-disabled-cursor);
202
276
  }
203
277
 
@@ -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;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;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;EA7FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAwFA;EAxGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAmGA;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;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;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-fxxgzVzz.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
- import { c as c5, g as g5 } from "./progressbar-D9S5NLpS.js";
5
+ import { c as c5, g as g5 } from "./progressbar-DcUv6Lh4.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-6vo9eMAR.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.1",
4
+ "version": "0.8.0-next.1",
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.1"
63
+ "@agnos-ui/core": "0.8.0-next.1"
64
64
  },
65
65
  "peerDependencies": {
66
66
  "@amadeus-it-group/tansu": "^2.0.0"
@@ -1,5 +1,5 @@
1
1
  import { getProgressbarDefaultConfig as getProgressbarDefaultConfig$1, createProgressbar as createProgressbar$1 } from "@agnos-ui/core/components/progressbar";
2
- import { typeString, typeBoolean, createTypeEnum } from "@agnos-ui/core/utils/writables";
2
+ import { createTypeEnum, typeBoolean, typeString } from "@agnos-ui/core/utils/writables";
3
3
  import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
4
4
  import { BS_CONTEXTUAL_CLASSES } from "./types.js";
5
5
  const defaultConfigExtraProps = {
@@ -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,13 @@ $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-fill-color: var(--#{$prefix}white, #ffffff) !default;
37
+ $au-slider-tick-label-translate-vertical: translateY(75%) !default;
31
38
  $au-slider-progress-color: var(--#{$prefix}primary, #0d6efd) !default;
32
39
  $au-slider-progress-height: 0.25rem !default;
33
40
  $au-slider-progress-vertical-transform: rotate(90deg) !default;
@@ -59,11 +66,15 @@ $au-slider-disabled-cursor: not-allowed !default;
59
66
 
60
67
  $au-slider-bar-size-sm: 0.2rem !default;
61
68
  $au-slider-handle-size-sm: 1rem !default;
69
+ $au-slider-tick-primary-size-sm: 0.75rem !default;
70
+ $au-slider-tick-secondary-size-sm: 0.75rem !default;
62
71
  $au-slider-font-size-sm: 0.875rem !default;
63
72
  $au-slider-offset-sm: 0rem !default;
64
73
 
65
74
  $au-slider-bar-size-lg: 0.3125rem !default;
66
75
  $au-slider-handle-size-lg: 1.5rem !default;
76
+ $au-slider-tick-primary-size-lg: 1.25rem !default;
77
+ $au-slider-tick-secondary-size-lg: 1.25rem !default;
67
78
  $au-slider-font-size-lg: 1.125rem !default;
68
79
  $au-slider-offset-lg: 0rem !default;
69
80
  // 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,16 @@
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
+ --#{variables.$prefix}slider-tick-fill-color: #{variables.$au-slider-tick-fill-color};
59
+
60
+ --#{variables.$prefix}slider-tick-label-translate-vertical: #{variables.$au-slider-tick-label-translate-vertical};
61
+
49
62
  --#{variables.$prefix}slider-progress-color: #{variables.$au-slider-progress-color};
50
63
  --#{variables.$prefix}slider-progress-height: #{variables.$au-slider-progress-height};
51
64
  --#{variables.$prefix}slider-progress-vertical-transform: #{variables.$au-slider-progress-vertical-transform};
@@ -89,7 +102,9 @@
89
102
  variables.$au-slider-bar-size-lg,
90
103
  variables.$au-slider-handle-size-lg,
91
104
  variables.$au-slider-font-size-lg,
92
- variables.$au-slider-offset-lg
105
+ variables.$au-slider-offset-lg,
106
+ variables.$au-slider-tick-primary-size-lg,
107
+ variables.$au-slider-tick-secondary-size-lg
93
108
  );
94
109
  }
95
110
 
@@ -98,7 +113,9 @@
98
113
  variables.$au-slider-bar-size-sm,
99
114
  variables.$au-slider-handle-size-sm,
100
115
  variables.$au-slider-font-size-sm,
101
- variables.$au-slider-offset-sm
116
+ variables.$au-slider-offset-sm,
117
+ variables.$au-slider-tick-primary-size-sm,
118
+ variables.$au-slider-tick-secondary-size-sm
102
119
  );
103
120
  }
104
121
 
@@ -111,6 +128,10 @@
111
128
  top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
112
129
  transform: var(--#{variables.$prefix}slider-translate-horizontal);
113
130
  }
131
+ .au-slider-tick-horizontal {
132
+ top: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
133
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
134
+ }
114
135
  }
115
136
 
116
137
  &.au-slider-vertical {
@@ -122,6 +143,10 @@
122
143
  left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
123
144
  transform: var(--#{variables.$prefix}slider-translate-vertical);
124
145
  }
146
+ .au-slider-tick-vertical {
147
+ left: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
148
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
149
+ }
125
150
  }
126
151
 
127
152
  .au-slider-handle {
@@ -145,6 +170,66 @@
145
170
  }
146
171
  }
147
172
 
173
+ .au-slider-tick {
174
+ position: absolute;
175
+ height: var(--#{variables.$prefix}slider-tick-primary-size);
176
+ width: var(--#{variables.$prefix}slider-tick-secondary-size);
177
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
178
+
179
+ // center align the svg along the slider axis
180
+ svg {
181
+ display: block;
182
+ width: var(--#{variables.$prefix}slider-tick-secondary-size);
183
+ height: var(--#{variables.$prefix}slider-tick-primary-size);
184
+ fill: none;
185
+
186
+ circle {
187
+ cx: 50%;
188
+ cy: 50%;
189
+ fill: var(--#{variables.$prefix}slider-tick-fill-color);
190
+
191
+ &.au-slider-tick-outer {
192
+ r: 45%;
193
+ stroke: var(--#{variables.$prefix}slider-tick-neutral-color);
194
+ stroke-width: 1.5;
195
+
196
+ &.au-slider-tick-disabled {
197
+ stroke: var(--#{variables.$prefix}slider-tick-disabled-color);
198
+ }
199
+ }
200
+
201
+ &.au-slider-tick-selected {
202
+ &.au-slider-tick-outer {
203
+ fill: var(--#{variables.$prefix}slider-tick-selected-color);
204
+ stroke: none;
205
+ r: 50%;
206
+
207
+ &.au-slider-tick-disabled {
208
+ fill: var(--#{variables.$prefix}slider-tick-disabled-color);
209
+ }
210
+ }
211
+
212
+ &.au-slider-tick-inner {
213
+ r: 25%;
214
+ }
215
+ }
216
+ }
217
+ }
218
+ }
219
+
220
+ .au-slider-tick-label {
221
+ position: absolute;
222
+ text-wrap: nowrap;
223
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
224
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
225
+ }
226
+
227
+ .au-slider-tick-label-vertical {
228
+ position: absolute;
229
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
230
+ transform: var(--#{variables.$prefix}slider-tick-label-translate-vertical);
231
+ }
232
+
148
233
  .au-slider-progress {
149
234
  background-color: var(--#{variables.$prefix}slider-progress-color);
150
235
  border-radius: var(--#{variables.$prefix}slider-border-radius);
@@ -232,10 +317,16 @@
232
317
  cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
233
318
  }
234
319
 
320
+ .au-slider-clickable-area-with-ticks {
321
+ cursor: default;
322
+ }
323
+
235
324
  &.disabled {
236
325
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
237
326
  .au-slider-label,
238
- .au-slider-label-vertical {
327
+ .au-slider-label-vertical,
328
+ .au-slider-tick-label,
329
+ .au-slider-tick-label-vertical {
239
330
  color: var(--#{variables.$prefix}slider-disabled-color);
240
331
  }
241
332
  .au-slider-progress,
@@ -244,7 +335,8 @@
244
335
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
245
336
  }
246
337
  .au-slider-clickable-area,
247
- .au-slider-clickable-area-vertical {
338
+ .au-slider-clickable-area-vertical,
339
+ .au-slider-tick {
248
340
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
249
341
  }
250
342
  }
@@ -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 };