@roadtrip/components 3.20.3 → 3.20.4
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/road-accordion.cjs.entry.js +1 -1
- package/dist/cjs/road-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/road-area-code.cjs.entry.js +1 -1
- package/dist/cjs/road-area-code.cjs.entry.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +2 -2
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-carousel.cjs.entry.js +1 -1
- package/dist/cjs/road-carousel.cjs.entry.js.map +1 -1
- package/dist/cjs/road-dialog.cjs.entry.js +1 -1
- package/dist/cjs/road-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/road-modal.cjs.entry.js +1 -1
- package/dist/cjs/road-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/road-phone-number-input.cjs.entry.js +1 -1
- package/dist/cjs/road-phone-number-input.cjs.entry.js.map +1 -1
- package/dist/cjs/road-plate-number.cjs.entry.js +1 -1
- package/dist/cjs/road-plate-number.cjs.entry.js.map +1 -1
- package/dist/cjs/road-range.cjs.entry.js +1 -1
- package/dist/cjs/road-range.cjs.entry.js.map +1 -1
- package/dist/cjs/road-select.cjs.entry.js +1 -1
- package/dist/cjs/road-select.cjs.entry.js.map +1 -1
- package/dist/cjs/road-textarea.cjs.entry.js +1 -1
- package/dist/cjs/road-textarea.cjs.entry.js.map +1 -1
- package/dist/collection/components/accordion/accordion.css +5 -5
- package/dist/collection/components/area-code/area-code.css +1 -2
- package/dist/collection/components/carousel/carousel.css +1 -1
- package/dist/collection/components/dialog/dialog.css +1 -2
- package/dist/collection/components/drawer/drawer.css +1 -2
- package/dist/collection/components/input/input.css +2 -4
- package/dist/collection/components/modal/modal.css +2 -2
- package/dist/collection/components/phone-number-input/phone-number-input.css +2 -4
- package/dist/collection/components/plate-number/plate-number.css +1 -2
- package/dist/collection/components/range/range.css +3 -6
- package/dist/collection/components/select/select.css +1 -2
- package/dist/collection/components/textarea/textarea.css +1 -2
- package/dist/esm/road-accordion.entry.js +1 -1
- package/dist/esm/road-accordion.entry.js.map +1 -1
- package/dist/esm/road-area-code.entry.js +1 -1
- package/dist/esm/road-area-code.entry.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +2 -2
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-carousel.entry.js +1 -1
- package/dist/esm/road-carousel.entry.js.map +1 -1
- package/dist/esm/road-dialog.entry.js +1 -1
- package/dist/esm/road-dialog.entry.js.map +1 -1
- package/dist/esm/road-modal.entry.js +1 -1
- package/dist/esm/road-modal.entry.js.map +1 -1
- package/dist/esm/road-phone-number-input.entry.js +1 -1
- package/dist/esm/road-phone-number-input.entry.js.map +1 -1
- package/dist/esm/road-plate-number.entry.js +1 -1
- package/dist/esm/road-plate-number.entry.js.map +1 -1
- package/dist/esm/road-range.entry.js +1 -1
- package/dist/esm/road-range.entry.js.map +1 -1
- package/dist/esm/road-select.entry.js +1 -1
- package/dist/esm/road-select.entry.js.map +1 -1
- package/dist/esm/road-textarea.entry.js +1 -1
- package/dist/esm/road-textarea.entry.js.map +1 -1
- package/dist/roadtrip/{p-c6a552b7.entry.js → p-026e28b6.entry.js} +2 -2
- package/dist/roadtrip/{p-c6a552b7.entry.js.map → p-026e28b6.entry.js.map} +1 -1
- package/dist/roadtrip/p-0c4ae774.entry.js +2 -0
- package/dist/roadtrip/{p-27d2770a.entry.js.map → p-0c4ae774.entry.js.map} +1 -1
- package/dist/roadtrip/{p-72b3b34a.entry.js → p-12802fd7.entry.js} +2 -2
- package/dist/roadtrip/{p-72b3b34a.entry.js.map → p-12802fd7.entry.js.map} +1 -1
- package/dist/roadtrip/p-4001ab77.entry.js +2 -0
- package/dist/roadtrip/{p-c7866ae4.entry.js.map → p-4001ab77.entry.js.map} +1 -1
- package/dist/roadtrip/p-418ca731.entry.js +2 -0
- package/dist/roadtrip/{p-9a929988.entry.js.map → p-418ca731.entry.js.map} +1 -1
- package/dist/roadtrip/p-7c7117a9.entry.js +2 -0
- package/dist/roadtrip/p-7c7117a9.entry.js.map +1 -0
- package/dist/roadtrip/p-8acb1859.entry.js +2 -0
- package/dist/roadtrip/{p-18967429.entry.js.map → p-8acb1859.entry.js.map} +1 -1
- package/dist/roadtrip/p-b376be90.entry.js +2 -0
- package/dist/roadtrip/{p-efe6e22f.entry.js.map → p-b376be90.entry.js.map} +1 -1
- package/dist/roadtrip/p-bc671fae.entry.js +2 -0
- package/dist/roadtrip/p-bc671fae.entry.js.map +1 -0
- package/dist/roadtrip/p-d6425d60.entry.js +2 -0
- package/dist/roadtrip/{p-27dcbb18.entry.js.map → p-d6425d60.entry.js.map} +1 -1
- package/dist/roadtrip/p-f3a88dc3.entry.js +2 -0
- package/dist/roadtrip/{p-4a2f2612.entry.js.map → p-f3a88dc3.entry.js.map} +1 -1
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/hydrate/index.d.ts +13 -31
- package/hydrate/index.js +34654 -45894
- package/hydrate/package.json +1 -7
- package/package.json +1 -1
- package/dist/roadtrip/p-18967429.entry.js +0 -2
- package/dist/roadtrip/p-233eb25c.entry.js +0 -2
- package/dist/roadtrip/p-233eb25c.entry.js.map +0 -1
- package/dist/roadtrip/p-27d2770a.entry.js +0 -2
- package/dist/roadtrip/p-27dcbb18.entry.js +0 -2
- package/dist/roadtrip/p-4a2f2612.entry.js +0 -2
- package/dist/roadtrip/p-9a929988.entry.js +0 -2
- package/dist/roadtrip/p-ba1249d7.entry.js +0 -2
- package/dist/roadtrip/p-ba1249d7.entry.js.map +0 -1
- package/dist/roadtrip/p-c7866ae4.entry.js +0 -2
- package/dist/roadtrip/p-efe6e22f.entry.js +0 -2
- package/hydrate/index.mjs +0 -49852
|
@@ -6,7 +6,7 @@ const index = require('./index-12592729.js');
|
|
|
6
6
|
const index$1 = require('./index-fb57f684.js');
|
|
7
7
|
require('./polyfill-b1fff766.js');
|
|
8
8
|
|
|
9
|
-
const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0
|
|
9
|
+
const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--icon-color:var(--road-icon);--max-height:none;display:block;margin-bottom:1rem}:host(.focus-visible){border:1px solid var(--road-primary)}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--road-spacing-04) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot=\"header\"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
|
|
10
10
|
|
|
11
11
|
const Accordion = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-accordion.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"road-accordion.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,uqFAAuqF;;MCiB/qF,SAAS;;;;;;IAyBZ,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;mBAKpB,KAAK;4BAKK,KAAK;mBAKd,KAAK;;EASnC,MAAM;IAEJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,WAAW,CAAC;IAChF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,GAAG,yCAAyC,GAAG,kBAAkB,CAAC;IAC3G,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,2CAA2C,GAAG,mBAAmB,CAAC;IAC/G,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,GAAG,mDAAmD,GAAG,WAAW,CAAC;IAC1H,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,kDAAkD,GAAG,WAAW,CAAC;IACvG,QACEA,qBAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjGA,qBAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClHA,iBAAK,KAAK,EAAE,oBAAoB,IAC9BA,kBAAM,IAAI,EAAC,WAAW,GAAE,EACxBA,kBAAM,IAAI,EAAC,QAAQ,GAAE,EACrBA,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEC,yBAAiB,GAAc,CACpE,CACE,EACVD,iBAAK,KAAK,EAAE,qBAAqB,IAC/BA,qBAAO,CACH,CACE,EACV;GACH;;;;;;","names":["h","navigationChevron"],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/*\n * Accordion\n *\n * For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Accordion\n * - Button\n * - Content\n */\n\n/**\n * @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n */\n\n:host {\n --accordion-header-border: 1px;\n --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n --content-padding: var(--road-spacing-04) 0 0;\n --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n --icon-color: var(--road-icon);\n --max-height: none;\n\n display: block;\n margin-bottom: 1rem;\n}\n\n:host(.focus-visible){\n border: 1px solid var(--road-primary);\n}\n\n/* ACCORDION\n -------------------- */\n\n.accordion {\n --max-height: none;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-body-small);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid;\n border-color: var(--road-outline-weak);\n border-radius: 0.25rem;\n transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n background: none;\n border: 0;\n}\n\n/**\n * Open state\n */\n\n.accordion[open] {\n max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n padding: var(--content-padding);\n margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n display: none;\n}\n\n/* BUTTON\n -------------------- */\n\n.accordion-trigger {\n box-sizing: border-box;\n display: block;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */\n display: none;\n}\n\n/**\n * Focus on Tab\n */\n\n.accordion-trigger.focus-visible {\n border-color: var(--road-primary);\n}\n\n/**\n * Active state\n */\n\n.accordion-trigger:active {\n background: var(--road-surface-inverse);\n}\n\n/**\n * .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n */\n\n.accordion-header {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: var(--header-padding);\n font-size: var(--road-body-medium);\n font-weight: 700;\n cursor: pointer;\n user-select: none;\n}\n\n.accordion-light-header {\n position: relative;\n padding: var(--road-spacing-04) 0;\n font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n position: absolute;\n bottom: 1px;\n width: 98.3%;\n height: 1px;\n content: \"\";\n background: var(--road-outline-weak);\n}\n\n/**\n * Custom arrow\n */\n\n.accordion-arrow {\n margin-left: auto;\n color: var(--icon-color);\n transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n display: flex;\n align-items: center;\n}\n\n:host(.accordion-icon-left){\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 1rem;\n}\n\n/* CONTENT\n -------------------- */\n\n.accordion-content {\n padding: 0 0.5rem;\n margin: 0 1rem;\n overflow: hidden;\n font-size: var(--road-body-medium);\n border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n */\n\n@Component({\n tag: 'road-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class Accordion {\n\n /**\n * Set to `true` to open the accordion and to `false` to close it.\n */\n @Prop({ mutable: true }) isOpen : boolean = false;\n\n /**\n * Set to `true` to remove border the accordion and to `false` to add border it.\n */\n @Prop() isLight : boolean = false;\n\n /**\n * Set to `true` to add a border in the header and the content only for the light accordion.\n */\n @Prop() isLightSeparator : boolean = false;\n\n /**\n * Set to `true` to add the small version only for the light accordion.\n */\n @Prop() isSmall : boolean = false;\n\n /**\n * Toggle the display when clicking header\n */\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n render() {\n\n const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n return (\n <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={accordionLightHeader}>\n <slot name=\"icon-left\"/>\n <slot name=\"header\"/>\n <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n </div>\n </summary>\n <div class={accordionLightContent}>\n <slot/>\n </div>\n </details>\n );\n }\n}"],"version":3}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-12592729.js');
|
|
6
6
|
|
|
7
|
-
const areaCodeCss = ".sc-road-area-code-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none
|
|
7
|
+
const areaCodeCss = ".sc-road-area-code-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;appearance:none;width:5rem;height:3.5rem}.form-select-area.sc-road-area-code{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.form-select-area.sc-road-area-code:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-area-code::-ms-expand{display:none}.form-select-area.sc-road-area-code::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-area-code:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-area-code:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-area-code:disabled,.form-select-area[readonly].sc-road-area-code{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-area-code{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-area-code:required~.form-select-area-label.sc-road-area-code::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-area-code{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-area-code-h .form-select-area-label.sc-road-area-code{top:1rem}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"date\"].sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"time\"].sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:placeholder-shown~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-area-code{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code~.invalid-feedback.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid~.invalid-feedback.sc-road-area-code{display:block}.form-select-area.sc-road-area-code option.sc-road-area-code:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-area-code::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
|
|
8
8
|
|
|
9
9
|
const RoadAreaCode = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-area-code.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","src/components/area-code/area-code.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n box-shadow: none;\n appearance: none;\n width: 5rem;\n height: 3.5rem;\n}\n\n/* SELECT\n -------------------- */\n\n.form-select-area {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { /* IE fix remove native arrow */\n display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select-area::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-select-area:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-select-area:disabled,\n.form-select-area[readonly] {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n background-color: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-area-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface-extra-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n.form-select-area:required ~ .form-select-area-label::after{\n color: var(--road-on-danger-surface);\n content: \" *\";\n}\n\n/* Value\n -------------------- */\n\n.form-select-area-value {\n position: absolute;\n top: 1.4rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select-area {\n height: 3.5rem;\n padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid,\n.was-validated .form-select-area:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n display: block;\n}\n\n\n.form-select-area option:checked::after {\n position: absolute;\n top: 0;\n left: 0;\n content: attr(data-content);\n}\n\n.form-select-area::after {\n position: absolute;\n top: 0;\n left: 0;\n content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n tag: 'road-area-code',\n styleUrl: 'area-code.css', // Mettez à jour le nom du fichier de style si nécessaire\n scoped: true,\n})\nexport class RoadAreaCode {\n\n /**\n * The id of select\n */\n\n @Prop() selectId: string = `road-select-${selectIds++}`;\n @State() selectedValue: string = '';\n\n/**\n * List of options of the area code\n */\n @Prop() options: Array<{\n value: string;\n label: string;\n selected?: boolean;\n }> = [];\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n\n @Prop() disabled: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the areacode\n */\n @Prop() size: number = 0;\n\n /**\n * The size of the areacode\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * The label of the areacode\n */\n @Prop() label: string = 'Country';\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * the value of the select.\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n* Emitted when the select has focus.\n*/\n\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n* Emitted when the select loses focus.\n*/\n\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n this.selectedValue = this.getMatchedOptionValue();\n }\n\n /**\n * Trigger number.\n */\n @Prop({ mutable: true }) triggerRender: number = 0;\n\n componentWillLoad() {\n if (!this.value && this.options.length > 0) {\n this.selectedValue = this.options[0].value;\n } else {\n this.selectedValue = this.getMatchedOptionValue();\n }\n }\n\n getMatchedOptionValue() {\n return this.options.find(option => option.value === this.value)?.value ?? '';\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement | null;\n if (select) {\n this.value = select.value || '';\n this.selectedValue = this.getMatchedOptionValue();\n }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const valueId = this.selectId + '-value';\n\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select-area has-value ${isInvalidClass}`} // Appliquez la classe has-value par défaut ici\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.options && this.options.map(option => (\n <option value={option.value} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n}\n\nlet selectIds = 0;\n"],"version":3}
|
|
1
|
+
{"file":"road-area-code.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,szIAAszI;;MCO7zI,YAAY;;;;;;;;;IAwHf,aAAQ,GAAG,CAAC,EAAS;MAC3B,MAAM,MAAM,GAAG,EAAE,CAAC,MAAkC,CAAC;MACrD,IAAI,MAAM,EAAE;QACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;QAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;OACnD;KACF,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;oBAlIyB,eAAe,SAAS,EAAE,EAAE;yBACtB,EAAE;mBAS9B,EAAE;qBAMsB,KAAK;oBAMN,KAAK;gBAKV,IAAI,CAAC,QAAQ;oBAKR,KAAK;gBAKV,CAAC;iBAKK,IAAI;iBAKT,SAAS;;iBAUQ,EAAE;yBA2CM,CAAC;;EAblD,YAAY;IACV,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;GACnD;EAOD,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;MAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KAC5C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;KACnD;GACF;EAED,qBAAqB;;IACnB,OAAO,MAAA,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,EAAE,CAAC;GAC9E;EAoBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAEzC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;IAEzF,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,EAAE,IAC/CD,oBACE,KAAK,EAAE,8BAA8B,cAAc,EAAE,EACrD,EAAE,EAAE,IAAI,CAAC,QAAQ,mBACF,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtCA,oBAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAU,CAChF,CAAC,CACK,EACTA,mBAAO,KAAK,EAAC,wBAAwB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,EAC/FA,mBAAO,KAAK,EAAC,wBAAwB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,SAAI,IAAI,CAAC,aAAa,CAAS,EACvG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAIA,eAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC3E,EACP;GACH;;;;;AAGH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","src/components/area-code/area-code.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n box-shadow: none;\n appearance: none;\n width: 5rem;\n height: 3.5rem;\n}\n\n/* SELECT\n -------------------- */\n\n.form-select-area {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { /* IE fix remove native arrow */\n display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select-area::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-select-area:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-select-area:disabled,\n.form-select-area[readonly] {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n background-color: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-area-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface-extra-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n.form-select-area:required ~ .form-select-area-label::after{\n color: var(--road-on-danger-surface);\n content: \" *\";\n}\n\n/* Value\n -------------------- */\n\n.form-select-area-value {\n position: absolute;\n top: 1.4rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select-area {\n height: 3.5rem;\n padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid,\n.was-validated .form-select-area:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n display: block;\n}\n\n\n.form-select-area option:checked::after {\n position: absolute;\n top: 0;\n left: 0;\n content: attr(data-content);\n}\n\n.form-select-area::after {\n position: absolute;\n top: 0;\n left: 0;\n content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n tag: 'road-area-code',\n styleUrl: 'area-code.css', // Mettez à jour le nom du fichier de style si nécessaire\n scoped: true,\n})\nexport class RoadAreaCode {\n\n /**\n * The id of select\n */\n\n @Prop() selectId: string = `road-select-${selectIds++}`;\n @State() selectedValue: string = '';\n\n/**\n * List of options of the area code\n */\n @Prop() options: Array<{\n value: string;\n label: string;\n selected?: boolean;\n }> = [];\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n\n @Prop() disabled: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the areacode\n */\n @Prop() size: number = 0;\n\n /**\n * The size of the areacode\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * The label of the areacode\n */\n @Prop() label: string = 'Country';\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * the value of the select.\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n* Emitted when the select has focus.\n*/\n\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n* Emitted when the select loses focus.\n*/\n\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n this.selectedValue = this.getMatchedOptionValue();\n }\n\n /**\n * Trigger number.\n */\n @Prop({ mutable: true }) triggerRender: number = 0;\n\n componentWillLoad() {\n if (!this.value && this.options.length > 0) {\n this.selectedValue = this.options[0].value;\n } else {\n this.selectedValue = this.getMatchedOptionValue();\n }\n }\n\n getMatchedOptionValue() {\n return this.options.find(option => option.value === this.value)?.value ?? '';\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement | null;\n if (select) {\n this.value = select.value || '';\n this.selectedValue = this.getMatchedOptionValue();\n }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const valueId = this.selectId + '-value';\n\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select-area has-value ${isInvalidClass}`} // Appliquez la classe has-value par défaut ici\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.options && this.options.map(option => (\n <option value={option.value} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n}\n\nlet selectIds = 0;\n"],"version":3}
|
|
@@ -231,7 +231,7 @@ const Counter = class {
|
|
|
231
231
|
let counterIds = 0;
|
|
232
232
|
Counter.style = counterCss;
|
|
233
233
|
|
|
234
|
-
const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0
|
|
234
|
+
const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
|
|
235
235
|
|
|
236
236
|
const Drawer = class {
|
|
237
237
|
constructor(hostRef) {
|
|
@@ -17690,7 +17690,7 @@ var lodash = _commonjsHelpers.createCommonjsModule(function (module, exports) {
|
|
|
17690
17690
|
}.call(_commonjsHelpers.commonjsGlobal));
|
|
17691
17691
|
});
|
|
17692
17692
|
|
|
17693
|
-
const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none
|
|
17693
|
+
const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;appearance:none}.form-control[type=\"number\"].sc-road-input{appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
|
|
17694
17694
|
|
|
17695
17695
|
const Input = class {
|
|
17696
17696
|
constructor(hostRef) {
|