@roadtrip/components 3.52.0 → 3.53.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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/road-alert.cjs.entry.js +1 -1
- package/dist/cjs/road-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +62 -12
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-card.cjs.entry.js +12 -2
- package/dist/cjs/road-card.cjs.entry.js.map +1 -1
- package/dist/cjs/road-progress.cjs.entry.js +1 -1
- package/dist/cjs/road-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/road-toast.cjs.entry.js +66 -16
- package/dist/cjs/road-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/roadtrip.cjs.js +1 -1
- package/dist/collection/components/alert/alert.css +5 -1
- package/dist/collection/components/card/card.css +10 -0
- package/dist/collection/components/card/card.js +31 -1
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/card/card.stories.js +16 -0
- package/dist/collection/components/counter/counter.js +128 -2
- package/dist/collection/components/counter/counter.js.map +1 -1
- package/dist/collection/components/counter/counter.stories.js +36 -0
- package/dist/collection/components/drawer/drawer.css +44 -6
- package/dist/collection/components/drawer/drawer.js +23 -10
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/collection/components/progress/progress.css +2 -1
- package/dist/collection/components/toast/toast.css +20 -1
- package/dist/collection/components/toast/toast.js +68 -14
- package/dist/collection/components/toast/toast.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/road-alert.entry.js +1 -1
- package/dist/esm/road-alert.entry.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +62 -12
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-card.entry.js +12 -2
- package/dist/esm/road-card.entry.js.map +1 -1
- package/dist/esm/road-progress.entry.js +1 -1
- package/dist/esm/road-progress.entry.js.map +1 -1
- package/dist/esm/road-toast.entry.js +66 -16
- package/dist/esm/road-toast.entry.js.map +1 -1
- package/dist/esm/roadtrip.js +1 -1
- package/dist/html.html-data.json +28 -0
- package/dist/roadtrip/p-12f2b114.entry.js +2 -0
- package/dist/roadtrip/p-12f2b114.entry.js.map +1 -0
- package/dist/roadtrip/p-27dea4d1.entry.js +18 -0
- package/dist/roadtrip/p-27dea4d1.entry.js.map +1 -0
- package/dist/roadtrip/p-3444d6fe.entry.js +2 -0
- package/dist/roadtrip/p-3444d6fe.entry.js.map +1 -0
- package/dist/roadtrip/p-ad2f2c53.entry.js +2 -0
- package/dist/roadtrip/p-ad2f2c53.entry.js.map +1 -0
- package/dist/roadtrip/p-f94214a1.entry.js +2 -0
- package/dist/roadtrip/p-f94214a1.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/roadtrip.esm.js.map +1 -1
- package/dist/types/components/card/card.d.ts +6 -0
- package/dist/types/components/counter/counter.d.ts +20 -0
- package/dist/types/components/drawer/drawer.d.ts +5 -0
- package/dist/types/components/toast/toast.d.ts +12 -0
- package/dist/types/components.d.ts +80 -0
- package/hydrate/index.js +252 -131
- package/hydrate/index.mjs +252 -131
- package/package.json +1 -1
- package/dist/roadtrip/p-23b0d708.entry.js +0 -2
- package/dist/roadtrip/p-23b0d708.entry.js.map +0 -1
- package/dist/roadtrip/p-2fef9c0f.entry.js +0 -18
- package/dist/roadtrip/p-2fef9c0f.entry.js.map +0 -1
- package/dist/roadtrip/p-3646f072.entry.js +0 -2
- package/dist/roadtrip/p-3646f072.entry.js.map +0 -1
- package/dist/roadtrip/p-4bbe3312.entry.js +0 -2
- package/dist/roadtrip/p-4bbe3312.entry.js.map +0 -1
- package/dist/roadtrip/p-8630081f.entry.js +0 -2
- package/dist/roadtrip/p-8630081f.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB;;;;GAIG;AAOH,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,cAAS,GAAmC,MAAM,CAAC;QAE3D;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAOhC;;;WAGG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;;WAGG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QA8C/C,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;;YAC7B,uDAAuD;YACvD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;YAC5D,IAAI,YAAY,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YAED,qDAAqD;YACrD,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from \"@stencil/core\";\n\n/**\n * @slot - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n tag: \"road-card\",\n styleUrl: \"card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el!: HTMLRoadCardElement;\n\n /**\n * The elevation.\n */\n @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n /**\n * If `true`, a button tag will be rendered and the card will be tappable.\n */\n @Prop() button: boolean = false;\n\n /**\n * value of the card\n */\n @Prop() value?: string;\n\n /**\n * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n * Toggled automatically when the card is clicked (when clickable).\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * If `true`, the card is disabled and cannot be clicked.\n * Only applies when in button mode (button=true and no href).\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Defines the selection mode.\n * - `\"single\"`: only one card can be selected at a time (focus outline disabled).\n * - `\"multiple\"`: multiple cards can be selected simultaneously.\n */\n @Prop({ reflect: true }) selectionMode?: \"single\" | \"multiple\" = \"multiple\";\n\n\n /**\n * The type of the button. Only used when an `onclick` or `button` property is present.\n */\n @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n /**\n * This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n */\n @Prop() download?: string;\n\n /**\n * Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n */\n @Prop() href?: string;\n\n /**\n * Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n */\n @Prop() rel?: string;\n\n /**\n * Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n */\n @Prop() target?: string;\n\n /**\n * Emitted when the card is clicked and send the `value` of the card\n */\n @Event() roadcardclick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n /** @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n\n private isClickable(): boolean {\n return this.href !== undefined || this.button;\n }\n\n private onClick = (e: Event) => {\n // If disabled in button mode, prevent all interactions\n const isButtonMode = this.button && this.href === undefined;\n if (isButtonMode && this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n // Toggle selected state on click for clickable cards\n this.selected = !this.selected;\n if (this.selectionMode === \"single\") {\n (e.currentTarget as HTMLElement).blur();\n }\n\n if (this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [<slot />];\n }\n const { href } = this;\n const TagType = clickable\n ? href === undefined\n ? \"button\"\n : \"a\"\n : (\"div\" as any);\n const isButtonMode = this.button && href === undefined;\n const attrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: isButtonMode && this.disabled,\n \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot />\n </TagType>\n );\n }\n\n render() {\n const { elevation } = this;\n const isButtonMode = this.button && this.href === undefined;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n const selectedClass = this.selected ? \"selected\" : \"\";\n const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n const singleClass = isButtonMode && this.selectionMode === \"single\" ? \"is-single\" : \"\";\n return (\n <Host\n class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}`}\n >\n {this.renderCard()}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -34,6 +34,15 @@ export default {
|
|
|
34
34
|
description:
|
|
35
35
|
"If `true`, the card is disabled and cannot be clicked. * Only applies when in button mode (button=true and no href).",
|
|
36
36
|
},
|
|
37
|
+
selectionMode: {
|
|
38
|
+
options: ["single", "multiple"],
|
|
39
|
+
control: { type: "select" },
|
|
40
|
+
description:
|
|
41
|
+
"Defines the selection mode. `single`: only one card can be selected (focus outline disabled). `multiple`: multiple cards can be selected.",
|
|
42
|
+
table: {
|
|
43
|
+
defaultValue: { summary: "multiple" },
|
|
44
|
+
},
|
|
45
|
+
},
|
|
37
46
|
},
|
|
38
47
|
args: {
|
|
39
48
|
elevation: "none",
|
|
@@ -49,6 +58,7 @@ const Template = (args) => html`
|
|
|
49
58
|
<road-card
|
|
50
59
|
button="${ifDefined(args.button)}"
|
|
51
60
|
disabled="${ifDefined(args.disabled)}"
|
|
61
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
52
62
|
value="125"
|
|
53
63
|
elevation="${ifDefined(args.elevation)}"
|
|
54
64
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -60,6 +70,7 @@ const Template = (args) => html`
|
|
|
60
70
|
<road-card
|
|
61
71
|
button="${ifDefined(args.button)}"
|
|
62
72
|
disabled="${ifDefined(args.disabled)}"
|
|
73
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
63
74
|
value="135"
|
|
64
75
|
elevation="${ifDefined(args.elevation)}"
|
|
65
76
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -71,6 +82,7 @@ const Template = (args) => html`
|
|
|
71
82
|
<road-card
|
|
72
83
|
button="${ifDefined(args.button)}"
|
|
73
84
|
disabled="${ifDefined(args.disabled)}"
|
|
85
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
74
86
|
value="145"
|
|
75
87
|
elevation="${ifDefined(args.elevation)}"
|
|
76
88
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -82,6 +94,7 @@ const Template = (args) => html`
|
|
|
82
94
|
<road-card
|
|
83
95
|
button="${ifDefined(args.button)}"
|
|
84
96
|
disabled="${ifDefined(args.disabled)}"
|
|
97
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
85
98
|
value="155"
|
|
86
99
|
elevation="${ifDefined(args.elevation)}"
|
|
87
100
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -93,6 +106,7 @@ const Template = (args) => html`
|
|
|
93
106
|
<road-card
|
|
94
107
|
button="${ifDefined(args.button)}"
|
|
95
108
|
disabled="${ifDefined(args.disabled)}"
|
|
109
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
96
110
|
value="165"
|
|
97
111
|
elevation="${ifDefined(args.elevation)}"
|
|
98
112
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -104,6 +118,7 @@ const Template = (args) => html`
|
|
|
104
118
|
<road-card
|
|
105
119
|
button="${ifDefined(args.button)}"
|
|
106
120
|
disabled="${ifDefined(args.disabled)}"
|
|
121
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
107
122
|
value="175"
|
|
108
123
|
elevation="${ifDefined(args.elevation)}"
|
|
109
124
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -120,6 +135,7 @@ Value.args = {
|
|
|
120
135
|
elevation: "average",
|
|
121
136
|
button: true,
|
|
122
137
|
disabled: false,
|
|
138
|
+
selectionMode: "multiple",
|
|
123
139
|
};
|
|
124
140
|
|
|
125
141
|
export const Vehicle = (args) => html`
|
|
@@ -4,6 +4,8 @@ export class Counter {
|
|
|
4
4
|
this.leftIconClasses = "";
|
|
5
5
|
this.rightIconClasses = "";
|
|
6
6
|
this.isDustbinVisible = false;
|
|
7
|
+
this.decreaseAriaLabel = "";
|
|
8
|
+
this.increaseAriaLabel = "";
|
|
7
9
|
/**
|
|
8
10
|
* The id of counter
|
|
9
11
|
*/
|
|
@@ -28,6 +30,22 @@ export class Counter {
|
|
|
28
30
|
* Set to `true` to not modify the input field
|
|
29
31
|
*/
|
|
30
32
|
this.readonly = false;
|
|
33
|
+
/**
|
|
34
|
+
* Accessible label for the dustbin button when `dustbin` is enabled and value equals `min`.
|
|
35
|
+
*/
|
|
36
|
+
this.dustbinLabelA11y = "Supprimer l'article";
|
|
37
|
+
/**
|
|
38
|
+
* Accessible label for the decrease button (suffix `, minimum {min}` is appended when not in dustbin mode).
|
|
39
|
+
*/
|
|
40
|
+
this.decreaseLabelA11y = 'Diminuer la quantité';
|
|
41
|
+
/**
|
|
42
|
+
* Accessible label for the increase button (suffix `, maximum {max}` is appended when not in dustbin mode).
|
|
43
|
+
*/
|
|
44
|
+
this.increaseLabelA11y = 'Augmenter la quantité';
|
|
45
|
+
/**
|
|
46
|
+
* Accessible label for the input field.
|
|
47
|
+
*/
|
|
48
|
+
this.quantityLabelA11y = 'Quantité';
|
|
31
49
|
this.setIsDustbinVisible = (valueInput) => {
|
|
32
50
|
if (valueInput > this.min) {
|
|
33
51
|
this.isDustbinVisible = false;
|
|
@@ -99,6 +117,23 @@ export class Counter {
|
|
|
99
117
|
onValueChange(valueInput) {
|
|
100
118
|
this.setIsDustbinVisible(valueInput);
|
|
101
119
|
this.setIconsClasses(valueInput);
|
|
120
|
+
this.updateAriaLabels(valueInput);
|
|
121
|
+
}
|
|
122
|
+
onA11yLabelChange() {
|
|
123
|
+
var _a, _b, _c;
|
|
124
|
+
const currentValue = parseInt((_c = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : String(this.value));
|
|
125
|
+
this.updateAriaLabels(currentValue);
|
|
126
|
+
}
|
|
127
|
+
updateAriaLabels(valueInput) {
|
|
128
|
+
const isDustbin = this.isDustbinVisible || (valueInput <= this.min && this.dustbin);
|
|
129
|
+
this.decreaseAriaLabel = isDustbin
|
|
130
|
+
? this.dustbinLabelA11y
|
|
131
|
+
: this.min > 0
|
|
132
|
+
? `${this.decreaseLabelA11y}, minimum ${this.min}`
|
|
133
|
+
: this.decreaseLabelA11y;
|
|
134
|
+
this.increaseAriaLabel = this.max
|
|
135
|
+
? `${this.increaseLabelA11y}, maximum ${this.max}`
|
|
136
|
+
: this.increaseLabelA11y;
|
|
102
137
|
}
|
|
103
138
|
setIconsClasses(valueInput) {
|
|
104
139
|
valueInput = valueInput !== null && valueInput !== void 0 ? valueInput : parseInt(this.inputElement.querySelector('input').value);
|
|
@@ -154,7 +189,7 @@ export class Counter {
|
|
|
154
189
|
}
|
|
155
190
|
render() {
|
|
156
191
|
const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
|
|
157
|
-
return (h("road-input-group", { key: '
|
|
192
|
+
return (h("road-input-group", { key: '59731a94e0d7c0d8774556692dbdc4b1f626e635', class: this.size && `counter-${this.size}` }, h("road-button", { key: '95dcb39bb1fb496f74786095af6b5e2d7a75da00', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, disabled: this.readonly || (this.leftIconClasses === "disabled"), "aria-label": this.decreaseAriaLabel, "data-cy": "road-decrease" }, h("road-icon", { key: '49146a633a0f249b8cc13df674ca8e4ed1825912', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, "aria-hidden": "true" })), h("road-input", { key: 'c84bbe30befc22c50897a0765ea2364cd17f86f8', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.quantityLabelA11y, "aria-live": "polite" }), h("road-button", { key: 'c6518e4cd30bed6667587766a950936e91e7bb9e', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, disabled: this.readonly || (this.rightIconClasses === "disabled"), "aria-label": this.increaseAriaLabel, "data-cy": "road-increase" }, h("road-icon", { key: '285031ad919ebbb4b1659aba873f99a5748ef375', name: "navigation-add-more", size: this.size, "aria-hidden": "true" }))));
|
|
158
193
|
}
|
|
159
194
|
static get is() { return "road-counter"; }
|
|
160
195
|
static get encapsulation() { return "scoped"; }
|
|
@@ -327,6 +362,86 @@ export class Counter {
|
|
|
327
362
|
"attribute": "readonly",
|
|
328
363
|
"reflect": false,
|
|
329
364
|
"defaultValue": "false"
|
|
365
|
+
},
|
|
366
|
+
"dustbinLabelA11y": {
|
|
367
|
+
"type": "string",
|
|
368
|
+
"mutable": false,
|
|
369
|
+
"complexType": {
|
|
370
|
+
"original": "string",
|
|
371
|
+
"resolved": "string",
|
|
372
|
+
"references": {}
|
|
373
|
+
},
|
|
374
|
+
"required": false,
|
|
375
|
+
"optional": false,
|
|
376
|
+
"docs": {
|
|
377
|
+
"tags": [],
|
|
378
|
+
"text": "Accessible label for the dustbin button when `dustbin` is enabled and value equals `min`."
|
|
379
|
+
},
|
|
380
|
+
"getter": false,
|
|
381
|
+
"setter": false,
|
|
382
|
+
"attribute": "dustbin-label-a11y",
|
|
383
|
+
"reflect": false,
|
|
384
|
+
"defaultValue": "\"Supprimer l'article\""
|
|
385
|
+
},
|
|
386
|
+
"decreaseLabelA11y": {
|
|
387
|
+
"type": "string",
|
|
388
|
+
"mutable": false,
|
|
389
|
+
"complexType": {
|
|
390
|
+
"original": "string",
|
|
391
|
+
"resolved": "string",
|
|
392
|
+
"references": {}
|
|
393
|
+
},
|
|
394
|
+
"required": false,
|
|
395
|
+
"optional": false,
|
|
396
|
+
"docs": {
|
|
397
|
+
"tags": [],
|
|
398
|
+
"text": "Accessible label for the decrease button (suffix `, minimum {min}` is appended when not in dustbin mode)."
|
|
399
|
+
},
|
|
400
|
+
"getter": false,
|
|
401
|
+
"setter": false,
|
|
402
|
+
"attribute": "decrease-label-a11y",
|
|
403
|
+
"reflect": false,
|
|
404
|
+
"defaultValue": "'Diminuer la quantit\u00E9'"
|
|
405
|
+
},
|
|
406
|
+
"increaseLabelA11y": {
|
|
407
|
+
"type": "string",
|
|
408
|
+
"mutable": false,
|
|
409
|
+
"complexType": {
|
|
410
|
+
"original": "string",
|
|
411
|
+
"resolved": "string",
|
|
412
|
+
"references": {}
|
|
413
|
+
},
|
|
414
|
+
"required": false,
|
|
415
|
+
"optional": false,
|
|
416
|
+
"docs": {
|
|
417
|
+
"tags": [],
|
|
418
|
+
"text": "Accessible label for the increase button (suffix `, maximum {max}` is appended when not in dustbin mode)."
|
|
419
|
+
},
|
|
420
|
+
"getter": false,
|
|
421
|
+
"setter": false,
|
|
422
|
+
"attribute": "increase-label-a11y",
|
|
423
|
+
"reflect": false,
|
|
424
|
+
"defaultValue": "'Augmenter la quantit\u00E9'"
|
|
425
|
+
},
|
|
426
|
+
"quantityLabelA11y": {
|
|
427
|
+
"type": "string",
|
|
428
|
+
"mutable": false,
|
|
429
|
+
"complexType": {
|
|
430
|
+
"original": "string",
|
|
431
|
+
"resolved": "string",
|
|
432
|
+
"references": {}
|
|
433
|
+
},
|
|
434
|
+
"required": false,
|
|
435
|
+
"optional": false,
|
|
436
|
+
"docs": {
|
|
437
|
+
"tags": [],
|
|
438
|
+
"text": "Accessible label for the input field."
|
|
439
|
+
},
|
|
440
|
+
"getter": false,
|
|
441
|
+
"setter": false,
|
|
442
|
+
"attribute": "quantity-label-a11y",
|
|
443
|
+
"reflect": false,
|
|
444
|
+
"defaultValue": "'Quantit\u00E9'"
|
|
330
445
|
}
|
|
331
446
|
};
|
|
332
447
|
}
|
|
@@ -334,7 +449,9 @@ export class Counter {
|
|
|
334
449
|
return {
|
|
335
450
|
"leftIconClasses": {},
|
|
336
451
|
"rightIconClasses": {},
|
|
337
|
-
"isDustbinVisible": {}
|
|
452
|
+
"isDustbinVisible": {},
|
|
453
|
+
"decreaseAriaLabel": {},
|
|
454
|
+
"increaseAriaLabel": {}
|
|
338
455
|
};
|
|
339
456
|
}
|
|
340
457
|
static get events() {
|
|
@@ -408,6 +525,15 @@ export class Counter {
|
|
|
408
525
|
}, {
|
|
409
526
|
"propName": "readonly",
|
|
410
527
|
"methodName": "onValueChange"
|
|
528
|
+
}, {
|
|
529
|
+
"propName": "decreaseLabelA11y",
|
|
530
|
+
"methodName": "onA11yLabelChange"
|
|
531
|
+
}, {
|
|
532
|
+
"propName": "increaseLabelA11y",
|
|
533
|
+
"methodName": "onA11yLabelChange"
|
|
534
|
+
}, {
|
|
535
|
+
"propName": "dustbinLabelA11y",
|
|
536
|
+
"methodName": "onA11yLabelChange"
|
|
411
537
|
}];
|
|
412
538
|
}
|
|
413
539
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'road-counter',\n styleUrl: 'counter.css',\n scoped: true,\n})\nexport class Counter {\n\n @Element() el!: HTMLRoadCounterElement;\n\n iconCounterLess!: HTMLRoadIconElement;\n inputElement!: HTMLRoadInputElement;\n\n @State() leftIconClasses: string = \"\";\n @State() rightIconClasses: string = \"\";\n @State() isDustbinVisible: boolean = false;\n\n /**\n * The id of counter\n */\n @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n /**\n * The minimum value, which must not be greater than its maximum (max attribute) value.\n */\n @Prop() min: number = 0;\n\n /**\n * The maximum value, which must not be less than its minimum (min attribute) value.\n */\n @Prop() max?: number;\n\n /**\n * Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n */\n @Prop() step?: string;\n\n /**\n * The value of the counter.\n */\n @Prop() value: number = 1;\n\n /**\n * The size of the counter.\n */\n @Prop() size?: 'sm' | 'md' | 'lg' = \"lg\";\n\n /**\n * Set to `true` to add the dustbin icon if the value is equal to the min.\n */\n @Prop() dustbin: boolean = false;\n\n /**\n * Set to `true` to not modify the input field\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Emitted when the plus button is clicked\n */\n @Event() roadIncrease!: EventEmitter<{\n value: number | undefined | null;\n }>;\n\n /**\n * Emitted when the minus button is clicked\n */\n @Event() roadDecrease!: EventEmitter<{\n value: number | undefined | null;\n }>;\n\n /**\n * Emitted when the minus button is clicked\n */\n @Event() roadChange!: EventEmitter<{\n value: number | undefined | null;\n }>;\n\n /**\n * Emitted when the dustbin is clicked\n */\n @Event() roadDustbinClick!: EventEmitter<void>;\n\n @Watch('value')\n @Watch('readonly')\n private onValueChange(valueInput: number) {\n this.setIsDustbinVisible(valueInput);\n this.setIconsClasses(valueInput);\n }\n\n private setIconsClasses(valueInput?: number) {\n valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n this.leftIconClasses = this.readonly || valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n this.rightIconClasses = this.readonly || this.max && valueInput >= this.max ? \"disabled\" : \"\";\n }\n\n private setIsDustbinVisible = (valueInput: number) => {\n if (valueInput > this.min) {\n this.isDustbinVisible = false;\n } else if (this.dustbin) {\n this.isDustbinVisible = true;\n }\n else {\n this.isDustbinVisible = false;\n }\n }\n\n private increase = () => {\n const input = this.inputElement.querySelector('input') as HTMLInputElement;\n\n input.stepUp();\n\n let valueInput = parseInt(input.value);\n\n if (isNaN(valueInput)) {\n valueInput = this.min;\n }\n\n this.onValueChange(valueInput);\n this.roadIncrease.emit({ value: valueInput });\n};\n\nprivate decrease = () => {\n if (this.isDustbinVisible) {\n this.roadDustbinClick.emit();\n return;\n }\n\n const input = this.inputElement.querySelector('input') as HTMLInputElement;\n\n input.stepDown();\n\n let valueInput = parseInt(input.value);\n\n if (isNaN(valueInput)) {\n valueInput = this.min;\n }\n\n this.onValueChange(valueInput);\n this.roadDecrease.emit({ value: valueInput });\n};\n\n private checkValue = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n\n if (value == null || value === \"\") return;\n\n if (value < this.min) {\n input.value = this.min.toString()\n }\n else if (this.max && value > this.max) {\n input.value = this.max.toString()\n }\n\n this.onValueChange(parseInt(input.value));\n }\n\n private onRoadChange = (ev: Event) => {\n ev.stopPropagation();\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n if (value !== null && value !== \"\") {\n if (value < this.min) {\n this.roadChange.emit({ value: this.min });\n }\n else if (this.max && value > this.max) {\n this.roadChange.emit({ value: this.max });\n }\n else {\n this.roadChange.emit({ value: parseInt(input.value) });\n }\n }\n else {\n this.roadChange.emit({ value: null });\n }\n };\n\n componentWillLoad() {\n this.onValueChange(this.value);\n }\n\n /** Vérifie et applique le `text-indent` si `prepend` est présent */\n private updateIndentation() {\n const hasPrepend = !!this.el.querySelector('[slot=\"prepend\"]');\n const formControl = this.el.querySelector('.form-control') as HTMLElement;\n const formLabel = this.el.querySelector('.form-label') as HTMLElement;\n \n if (formControl) {\n formControl.style.textIndent = hasPrepend ? '' : '';\n }\n if (formLabel) {\n formLabel.style.textIndent = hasPrepend ? '' : '';\n }\n }\n\n componentDidLoad() {\n const buttons = this.el.querySelectorAll('road-button') as NodeListOf<HTMLRoadButtonElement>;\n this.updateIndentation(); // Appliquer les styles au montage\n // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)\n const observer = new MutationObserver(() => this.updateIndentation());\n observer.observe(this.el, { childList: true, subtree: true });\n\n // Ajouter les événements pour chaque road-button\n buttons.forEach((btn) => {\n btn.addEventListener('touchstart', () => {\n btn.style.backgroundColor = 'var(--road-button-tertiary-variant)'; // Appliquer le style hover\n });\n \n btn.addEventListener('touchend', () => {\n btn.style.backgroundColor = 'var(--road-surface)'; // Supprimer le style hover après touchend\n });\n });\n\n // Accessibilité : Cacher le label\n const label = this.el.querySelector('.form-label') as HTMLElement;\n const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n if (label) {\n label.style.clip = 'rect(0 0 0 0)';\n label.style.border = '0';\n label.style.height = '1px';\n label.style.left = '0';\n label.style.margin = '-1px';\n label.style.overflow = 'hidden';\n label.style.padding = '0';\n label.style.position = 'absolute';\n label.style.top = '0';\n label.style.width = '1px';\n\n input.style.padding = '0 1rem 0';\n \n }\n }\n\n render() {\n\n const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n return (\n <road-input-group\n class={this.size && `counter-${this.size}`}\n >\n <road-button\n slot=\"prepend\"\n size={this.size}\n onClick={this.decrease}\n class={this.leftIconClasses}\n disabled={this.readonly}\n data-cy=\"road-decrease\"\n >\n <road-icon\n name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n size={this.size}\n data-cy={dataCi}\n role=\"button\"\n />\n </road-button>\n <road-input\n ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n type=\"number\"\n min={this.min.toString()}\n max={(this.max && this.max.toString()) as string}\n step={this.step}\n value={this.value}\n onRoadChange={this.onRoadChange}\n onKeyUp={this.checkValue}\n data-cy=\"road-input-counter\"\n readonly={this.readonly}\n label=\"Quantité\"\n />\n <road-button\n slot=\"append\"\n size={this.size}\n onClick={this.increase}\n class={this.rightIconClasses}\n disabled={this.readonly}\n data-cy=\"road-increase\"\n >\n <road-icon\n name=\"navigation-add-more\"\n size={this.size}\n role=\"button\"\n />\n </road-button>\n </road-input-group>\n );\n }\n}\n\nlet counterIds = 0;\n"]}
|
|
1
|
+
{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'road-counter',\n styleUrl: 'counter.css',\n scoped: true,\n})\nexport class Counter {\n\n @Element() el!: HTMLRoadCounterElement;\n\n iconCounterLess!: HTMLRoadIconElement;\n inputElement!: HTMLRoadInputElement;\n\n @State() leftIconClasses: string = \"\";\n @State() rightIconClasses: string = \"\";\n @State() isDustbinVisible: boolean = false;\n @State() decreaseAriaLabel: string = \"\";\n @State() increaseAriaLabel: string = \"\";\n\n /**\n * The id of counter\n */\n @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n /**\n * The minimum value, which must not be greater than its maximum (max attribute) value.\n */\n @Prop() min: number = 0;\n\n /**\n * The maximum value, which must not be less than its minimum (min attribute) value.\n */\n @Prop() max?: number;\n\n /**\n * Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n */\n @Prop() step?: string;\n\n /**\n * The value of the counter.\n */\n @Prop() value: number = 1;\n\n /**\n * The size of the counter.\n */\n @Prop() size?: 'sm' | 'md' | 'lg' = \"lg\";\n\n /**\n * Set to `true` to add the dustbin icon if the value is equal to the min.\n */\n @Prop() dustbin: boolean = false;\n\n /**\n * Set to `true` to not modify the input field\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Accessible label for the dustbin button when `dustbin` is enabled and value equals `min`.\n */\n @Prop({ attribute: 'dustbin-label-a11y' }) dustbinLabelA11y: string = \"Supprimer l'article\";\n\n\n /**\n * Accessible label for the decrease button (suffix `, minimum {min}` is appended when not in dustbin mode).\n */\n @Prop({ attribute: 'decrease-label-a11y' }) decreaseLabelA11y: string = 'Diminuer la quantité';\n\n\n /**\n * Accessible label for the increase button (suffix `, maximum {max}` is appended when not in dustbin mode).\n */\n @Prop({ attribute: 'increase-label-a11y' }) increaseLabelA11y: string = 'Augmenter la quantité';\n\n\n /**\n * Accessible label for the input field.\n */\n @Prop({ attribute: 'quantity-label-a11y' }) quantityLabelA11y: string = 'Quantité';\n\n /**\n * Emitted when the plus button is clicked\n */\n @Event() roadIncrease!: EventEmitter<{\n value: number | undefined | null;\n }>;\n\n /**\n * Emitted when the minus button is clicked\n */\n @Event() roadDecrease!: EventEmitter<{\n value: number | undefined | null;\n }>;\n\n /**\n * Emitted when the minus button is clicked\n */\n @Event() roadChange!: EventEmitter<{\n value: number | undefined | null;\n }>;\n\n /**\n * Emitted when the dustbin is clicked\n */\n @Event() roadDustbinClick!: EventEmitter<void>;\n\n @Watch('value')\n @Watch('readonly')\n\n private onValueChange(valueInput: number) {\n this.setIsDustbinVisible(valueInput);\n this.setIconsClasses(valueInput);\n this.updateAriaLabels(valueInput);\n }\n\n @Watch('decreaseLabelA11y')\n @Watch('increaseLabelA11y')\n @Watch('dustbinLabelA11y')\n protected onA11yLabelChange() {\n const currentValue = parseInt(\n this.inputElement?.querySelector('input')?.value ?? String(this.value)\n );\n this.updateAriaLabels(currentValue);\n }\n\n private updateAriaLabels(valueInput: number) {\n const isDustbin = this.isDustbinVisible || (valueInput <= this.min && this.dustbin);\n\n this.decreaseAriaLabel = isDustbin\n ? this.dustbinLabelA11y\n : this.min > 0\n ? `${this.decreaseLabelA11y}, minimum ${this.min}`\n : this.decreaseLabelA11y;\n\n this.increaseAriaLabel = this.max\n ? `${this.increaseLabelA11y}, maximum ${this.max}`\n : this.increaseLabelA11y;\n }\n\n private setIconsClasses(valueInput?: number) {\n valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n this.leftIconClasses = this.readonly || valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n this.rightIconClasses = this.readonly || this.max && valueInput >= this.max ? \"disabled\" : \"\";\n }\n\n private setIsDustbinVisible = (valueInput: number) => {\n if (valueInput > this.min) {\n this.isDustbinVisible = false;\n } else if (this.dustbin) {\n this.isDustbinVisible = true;\n }\n else {\n this.isDustbinVisible = false;\n }\n }\n\n private increase = () => {\n const input = this.inputElement.querySelector('input') as HTMLInputElement;\n\n input.stepUp();\n\n let valueInput = parseInt(input.value);\n\n if (isNaN(valueInput)) {\n valueInput = this.min;\n }\n\n this.onValueChange(valueInput);\n this.roadIncrease.emit({ value: valueInput });\n};\n\nprivate decrease = () => {\n if (this.isDustbinVisible) {\n this.roadDustbinClick.emit();\n return;\n }\n\n const input = this.inputElement.querySelector('input') as HTMLInputElement;\n\n input.stepDown();\n\n let valueInput = parseInt(input.value);\n\n if (isNaN(valueInput)) {\n valueInput = this.min;\n }\n\n this.onValueChange(valueInput);\n this.roadDecrease.emit({ value: valueInput });\n};\n\n private checkValue = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n\n if (value == null || value === \"\") return;\n\n if (value < this.min) {\n input.value = this.min.toString()\n }\n else if (this.max && value > this.max) {\n input.value = this.max.toString()\n }\n\n this.onValueChange(parseInt(input.value));\n }\n\n private onRoadChange = (ev: Event) => {\n ev.stopPropagation();\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n if (value !== null && value !== \"\") {\n if (value < this.min) {\n this.roadChange.emit({ value: this.min });\n }\n else if (this.max && value > this.max) {\n this.roadChange.emit({ value: this.max });\n }\n else {\n this.roadChange.emit({ value: parseInt(input.value) });\n }\n }\n else {\n this.roadChange.emit({ value: null });\n }\n };\n\n componentWillLoad() {\n this.onValueChange(this.value);\n }\n\n /** Vérifie et applique le `text-indent` si `prepend` est présent */\n private updateIndentation() {\n const hasPrepend = !!this.el.querySelector('[slot=\"prepend\"]');\n const formControl = this.el.querySelector('.form-control') as HTMLElement;\n const formLabel = this.el.querySelector('.form-label') as HTMLElement;\n \n if (formControl) {\n formControl.style.textIndent = hasPrepend ? '' : '';\n }\n if (formLabel) {\n formLabel.style.textIndent = hasPrepend ? '' : '';\n }\n }\n\n componentDidLoad() {\n const buttons = this.el.querySelectorAll('road-button') as NodeListOf<HTMLRoadButtonElement>;\n this.updateIndentation(); // Appliquer les styles au montage\n // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)\n const observer = new MutationObserver(() => this.updateIndentation());\n observer.observe(this.el, { childList: true, subtree: true });\n\n // Ajouter les événements pour chaque road-button\n buttons.forEach((btn) => {\n btn.addEventListener('touchstart', () => {\n btn.style.backgroundColor = 'var(--road-button-tertiary-variant)'; // Appliquer le style hover\n });\n \n btn.addEventListener('touchend', () => {\n btn.style.backgroundColor = 'var(--road-surface)'; // Supprimer le style hover après touchend\n });\n });\n\n // Accessibilité : Cacher le label\n const label = this.el.querySelector('.form-label') as HTMLElement;\n const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n if (label) {\n label.style.clip = 'rect(0 0 0 0)';\n label.style.border = '0';\n label.style.height = '1px';\n label.style.left = '0';\n label.style.margin = '-1px';\n label.style.overflow = 'hidden';\n label.style.padding = '0';\n label.style.position = 'absolute';\n label.style.top = '0';\n label.style.width = '1px';\n\n input.style.padding = '0 1rem 0';\n \n }\n }\n\n render() {\n\n const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n return (\n <road-input-group\n class={this.size && `counter-${this.size}`}\n >\n <road-button\n slot=\"prepend\"\n size={this.size}\n onClick={this.decrease}\n class={this.leftIconClasses}\n disabled={this.readonly || (this.leftIconClasses === \"disabled\")}\n aria-label={this.decreaseAriaLabel}\n \n data-cy=\"road-decrease\"\n >\n <road-icon\n name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n size={this.size}\n data-cy={dataCi}\n aria-hidden=\"true\"\n />\n </road-button>\n <road-input\n ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n type=\"number\"\n min={this.min.toString()}\n max={(this.max && this.max.toString()) as string}\n step={this.step}\n value={this.value}\n onRoadChange={this.onRoadChange}\n onKeyUp={this.checkValue}\n data-cy=\"road-input-counter\"\n readonly={this.readonly}\n label=\"Quantité\"\n aria-valuenow={this.value}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-label={this.quantityLabelA11y}\n aria-live=\"polite\"\n />\n <road-button\n slot=\"append\"\n size={this.size}\n onClick={this.increase}\n class={this.rightIconClasses}\n disabled={this.readonly || (this.rightIconClasses === \"disabled\")}\n aria-label={this.increaseAriaLabel}\n data-cy=\"road-increase\"\n >\n <road-icon\n name=\"navigation-add-more\"\n size={this.size}\n aria-hidden=\"true\"\n />\n </road-button>\n </road-input-group>\n );\n }\n}\n\nlet counterIds = 0;\n"]}
|
|
@@ -54,6 +54,34 @@ export default {
|
|
|
54
54
|
control: 'boolean',
|
|
55
55
|
description: 'Displays a delete (dustbin) icon when set to `true`.',
|
|
56
56
|
},
|
|
57
|
+
'dustbin-label-a11y': {
|
|
58
|
+
control: 'text',
|
|
59
|
+
description: 'Accessible label for the dustbin button when visible.',
|
|
60
|
+
table: {
|
|
61
|
+
defaultValue: { summary: "Supprimer l'article" },
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
'decrease-label-a11y': {
|
|
65
|
+
control: 'text',
|
|
66
|
+
description: 'Accessible label for the decrease button (`, minimum {min}` is appended).',
|
|
67
|
+
table: {
|
|
68
|
+
defaultValue: { summary: 'Diminuer la quantité' },
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
'increase-label-a11y': {
|
|
72
|
+
control: 'text',
|
|
73
|
+
description: 'Accessible label for the increase button (suffix `, maximum {max}` is appended when not in dustbin mode).',
|
|
74
|
+
table: {
|
|
75
|
+
defaultValue: { summary: 'Augmenter la quantité' },
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
'quantity-label-a11y': {
|
|
79
|
+
control: 'text',
|
|
80
|
+
description: 'Accessible label for the input field.',
|
|
81
|
+
table: {
|
|
82
|
+
defaultValue: { summary: 'Quantité' },
|
|
83
|
+
},
|
|
84
|
+
},
|
|
57
85
|
readonly: {
|
|
58
86
|
control: 'boolean',
|
|
59
87
|
description: 'Prevents editing the value when set to `true`.',
|
|
@@ -71,6 +99,10 @@ export default {
|
|
|
71
99
|
value: 1,
|
|
72
100
|
dustbin: false,
|
|
73
101
|
readonly: false,
|
|
102
|
+
'dustbin-label-a11y': "Supprimer l'article",
|
|
103
|
+
'decrease-label-a11y': 'Diminuer la quantité',
|
|
104
|
+
'increase-label-a11y': 'Augmenter la quantité',
|
|
105
|
+
'quantity-label-a11y': 'Quantité',
|
|
74
106
|
},
|
|
75
107
|
};
|
|
76
108
|
|
|
@@ -82,6 +114,10 @@ const Template = (args) => html`
|
|
|
82
114
|
step="${ifDefined(args.step)}"
|
|
83
115
|
value="${ifDefined(args.value)}"
|
|
84
116
|
?dustbin="${args.dustbin}"
|
|
117
|
+
dustbin-label-a11y="${ifDefined(args['dustbin-label-a11y'])}"
|
|
118
|
+
decrease-label-a11y="${ifDefined(args['decrease-label-a11y'])}"
|
|
119
|
+
increase-label-a11y="${ifDefined(args['increase-label-a11y'])}"
|
|
120
|
+
quantity-label-a11y="${ifDefined(args['quantity-label-a11y'])}"
|
|
85
121
|
?readonly="${args.readonly}"
|
|
86
122
|
input-id="${ifDefined(args['input-id'])}"
|
|
87
123
|
style="--counter-margin-bottom: ${ifDefined(args['--counter-margin-bottom'])};"
|
|
@@ -52,8 +52,7 @@
|
|
|
52
52
|
line-height: 1.5;
|
|
53
53
|
color: var(--color);
|
|
54
54
|
visibility: hidden !important;
|
|
55
|
-
|
|
56
|
-
transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
|
|
55
|
+
transition: visibility 0s linear 0.3s;
|
|
57
56
|
|
|
58
57
|
}
|
|
59
58
|
|
|
@@ -70,6 +69,7 @@
|
|
|
70
69
|
touch-action: none;
|
|
71
70
|
cursor: pointer;
|
|
72
71
|
background: var(--road-overlay);
|
|
72
|
+
opacity: 0;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
/* DRAWER
|
|
@@ -85,7 +85,8 @@
|
|
|
85
85
|
width: 100%;
|
|
86
86
|
pointer-events: none;
|
|
87
87
|
transition: transform 0.3s ease-out;
|
|
88
|
-
|
|
88
|
+
opacity: 0;
|
|
89
|
+
transform: none;
|
|
89
90
|
}
|
|
90
91
|
|
|
91
92
|
/* POSITION
|
|
@@ -101,6 +102,7 @@
|
|
|
101
102
|
|
|
102
103
|
:host(.drawer-left) .road-drawer-wrapper .drawer-dialog {
|
|
103
104
|
left: 0;
|
|
105
|
+
transform: translateX(-100%);
|
|
104
106
|
}
|
|
105
107
|
|
|
106
108
|
/**
|
|
@@ -114,6 +116,7 @@
|
|
|
114
116
|
:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog {
|
|
115
117
|
width: 100%;
|
|
116
118
|
max-height: var(--max-height);
|
|
119
|
+
bottom: 0;
|
|
117
120
|
transform: translateY(100%);
|
|
118
121
|
}
|
|
119
122
|
|
|
@@ -275,10 +278,45 @@
|
|
|
275
278
|
|
|
276
279
|
:host(.drawer-open) {
|
|
277
280
|
visibility: visible !important;
|
|
281
|
+
transition: visibility 0s linear 0s;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
:host(.drawer-open) .drawer-overlay,
|
|
285
|
+
:host(.drawer-open) .drawer-dialog,
|
|
286
|
+
:host(.drawer-open) .road-drawer-wrapper .drawer-dialog {
|
|
278
287
|
opacity: 1;
|
|
279
|
-
|
|
288
|
+
transform: translateY(0) translateX(0);
|
|
280
289
|
}
|
|
281
290
|
|
|
282
|
-
|
|
283
|
-
|
|
291
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
292
|
+
/**
|
|
293
|
+
* Fade overlay & dialog in even when mounted already open.
|
|
294
|
+
*/
|
|
295
|
+
:host(.drawer-open) .drawer-overlay,
|
|
296
|
+
:host(.drawer-open) .drawer-dialog {
|
|
297
|
+
animation: road-drawer-fade-in 0.3s ease-out both;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.drawer-overlay,
|
|
301
|
+
.drawer-dialog {
|
|
302
|
+
animation: road-drawer-fade-out 0.3s ease-out both;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
@keyframes road-drawer-fade-in {
|
|
306
|
+
from {
|
|
307
|
+
opacity: 0;
|
|
308
|
+
}
|
|
309
|
+
to {
|
|
310
|
+
opacity: 1;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
@keyframes road-drawer-fade-out {
|
|
315
|
+
from {
|
|
316
|
+
opacity: 1;
|
|
317
|
+
}
|
|
318
|
+
to {
|
|
319
|
+
opacity: 0;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
284
322
|
}
|
|
@@ -53,6 +53,11 @@ export class Drawer {
|
|
|
53
53
|
* Footer Content state
|
|
54
54
|
*/
|
|
55
55
|
this.hasFooterContent = false;
|
|
56
|
+
/**
|
|
57
|
+
* Used to ensure open transitions run when the drawer
|
|
58
|
+
* is initially mounted with `isOpen=true`.
|
|
59
|
+
*/
|
|
60
|
+
this.hasMounted = false;
|
|
56
61
|
this.onFooterSlotChange = (event) => {
|
|
57
62
|
const slot = event.target;
|
|
58
63
|
this.hasFooterContent = slot.assignedElements().length > 0;
|
|
@@ -149,18 +154,19 @@ export class Drawer {
|
|
|
149
154
|
}, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
|
|
150
155
|
}
|
|
151
156
|
handleOpen(openValue) {
|
|
152
|
-
var _a;
|
|
157
|
+
var _a, _b;
|
|
158
|
+
const dialog = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drawer-dialog');
|
|
153
159
|
if (openValue === true) {
|
|
154
160
|
this.onOpen.emit();
|
|
155
|
-
|
|
161
|
+
dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
|
|
156
162
|
if (this.enabledFocusTrap) {
|
|
157
163
|
this.getOrCreateFocusTrap().activate();
|
|
158
164
|
}
|
|
159
165
|
}, { once: true });
|
|
160
166
|
}
|
|
161
167
|
else {
|
|
162
|
-
(
|
|
163
|
-
|
|
168
|
+
(_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.deactivate();
|
|
169
|
+
dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
|
|
164
170
|
this.onClose.emit();
|
|
165
171
|
this.el.shadowRoot &&
|
|
166
172
|
(this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
|
|
@@ -179,9 +185,14 @@ export class Drawer {
|
|
|
179
185
|
this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
|
|
180
186
|
item.addEventListener("click", () => this.close());
|
|
181
187
|
});
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
188
|
+
// Wait for the first paint so the "closed" transform can be applied,
|
|
189
|
+
// then open on the next frame to allow CSS transitions to run.
|
|
190
|
+
requestAnimationFrame(() => {
|
|
191
|
+
this.hasMounted = true;
|
|
192
|
+
if (this.isOpen) {
|
|
193
|
+
this.handleOpen(true);
|
|
194
|
+
}
|
|
195
|
+
});
|
|
185
196
|
}
|
|
186
197
|
getOrCreateFocusTrap(elements) {
|
|
187
198
|
var _a;
|
|
@@ -211,7 +222,8 @@ export class Drawer {
|
|
|
211
222
|
}
|
|
212
223
|
render() {
|
|
213
224
|
var _a, _b, _c;
|
|
214
|
-
const
|
|
225
|
+
const isEffectivelyOpen = this.isOpen && this.hasMounted;
|
|
226
|
+
const drawerIsOpenClass = isEffectivelyOpen ? "drawer-open" : "";
|
|
215
227
|
const removePaddingClass = this.removePadding ? "remove-padding" : "";
|
|
216
228
|
const inverseHeaderClass = this.hasInverseHeader
|
|
217
229
|
? "drawer-header-inverse"
|
|
@@ -223,7 +235,7 @@ export class Drawer {
|
|
|
223
235
|
const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
|
|
224
236
|
const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
|
|
225
237
|
const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
|
|
226
|
-
return (h(Host, { key: '
|
|
238
|
+
return (h(Host, { key: 'ecd747ab4372bed7cefb4647dfaf9404c7206b53', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '1d5760b82a095696e30867669f607d5c3608c308', class: "road-drawer-wrapper" }, h("div", { key: '4d519361b71dd228e7a35a1ee20f741911e0752f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '36dc3dac85b6784b66f5a12476be608d2b43c40c', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '74a7d03928a6919fa6cd95c6a66a61c9bf225e20', class: "drawer-content" }, h("header", { key: 'f4c543d1ea08ee62ea3a9f93e34499a7f5c81fa5', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '796030c5a5cf6661aa4c1f4c10cc039e0e550d4c', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '8c0bdfa660ace789ea5a01ada7ce3cd9c5cc3d4a' })), h("footer", { key: 'a52a747ea4c5de885fc440ac4f8247f5c9ab88b0', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '0bef80d08a9e6078f025768eb88f93df86517fb9', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
|
|
227
239
|
}
|
|
228
240
|
static get is() { return "road-drawer"; }
|
|
229
241
|
static get encapsulation() { return "shadow"; }
|
|
@@ -517,7 +529,8 @@ export class Drawer {
|
|
|
517
529
|
static get states() {
|
|
518
530
|
return {
|
|
519
531
|
"focusTrap": {},
|
|
520
|
-
"hasFooterContent": {}
|
|
532
|
+
"hasFooterContent": {},
|
|
533
|
+
"hasMounted": {}
|
|
521
534
|
};
|
|
522
535
|
}
|
|
523
536
|
static get events() {
|