@roadtrip/components 3.12.0 → 3.12.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/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 +3 -3
- 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 +5 -4
- 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 +4 -4
- 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/area-code/area-code.css +0 -1
- package/dist/collection/components/button/button.css +2 -0
- package/dist/collection/components/carousel/carousel.css +1 -1
- package/dist/collection/components/dialog/dialog.css +0 -1
- package/dist/collection/components/drawer/drawer.css +0 -1
- package/dist/collection/components/input/input.css +0 -2
- package/dist/collection/components/modal/modal.css +0 -1
- package/dist/collection/components/phone-number-input/phone-number-input.css +0 -1
- package/dist/collection/components/phone-number-input/phone-number-input.js +4 -3
- package/dist/collection/components/phone-number-input/phone-number-input.js.map +1 -1
- package/dist/collection/components/phone-number-input/phone-number-input.stories.js +0 -1
- package/dist/collection/components/plate-number/plate-number.css +0 -1
- package/dist/collection/components/range/range.css +2 -5
- package/dist/collection/components/select/select.css +0 -1
- package/dist/collection/components/select/select.js +3 -3
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/select/select.stories.js +2 -2
- package/dist/collection/components/textarea/textarea.css +0 -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 +3 -3
- 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 +5 -4
- 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 +4 -4
- 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-c33f5249.entry.js → p-2c132382.entry.js} +2 -2
- package/dist/roadtrip/{p-c33f5249.entry.js.map → p-2c132382.entry.js.map} +1 -1
- package/dist/roadtrip/p-33002e9d.entry.js +2 -0
- package/dist/roadtrip/{p-9b170273.entry.js.map → p-33002e9d.entry.js.map} +1 -1
- package/dist/roadtrip/p-6e3e0b40.entry.js +2 -0
- package/dist/roadtrip/{p-d794a8d4.entry.js.map → p-6e3e0b40.entry.js.map} +1 -1
- package/dist/roadtrip/p-869a3d78.entry.js +2 -0
- package/dist/roadtrip/{p-be8aee32.entry.js.map → p-869a3d78.entry.js.map} +1 -1
- package/dist/roadtrip/{p-9173eb4b.entry.js → p-96b80b11.entry.js} +2 -2
- package/dist/roadtrip/{p-9173eb4b.entry.js.map → p-96b80b11.entry.js.map} +1 -1
- package/dist/roadtrip/p-a73ef7de.entry.js +2 -0
- package/dist/roadtrip/{p-0f8966f4.entry.js.map → p-a73ef7de.entry.js.map} +1 -1
- package/dist/roadtrip/p-acbc0a14.entry.js +2 -0
- package/dist/roadtrip/{p-5ab03aa4.entry.js.map → p-acbc0a14.entry.js.map} +1 -1
- package/dist/roadtrip/p-c5ca63ec.entry.js +2 -0
- package/dist/roadtrip/p-c5ca63ec.entry.js.map +1 -0
- package/dist/roadtrip/p-ee7aaee5.entry.js +2 -0
- package/dist/roadtrip/{p-9fefc8af.entry.js.map → p-ee7aaee5.entry.js.map} +1 -1
- package/dist/roadtrip/p-efe6e22f.entry.js +2 -0
- package/dist/roadtrip/{p-13d54b3e.entry.js.map → p-efe6e22f.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 +6 -6
- package/hydrate/index.js +193 -252
- package/package.json +1 -1
- package/dist/collection/components/icon/svg/vehicle-car-search-color.svg +0 -1
- package/dist/roadtrip/p-028243c1.entry.js +0 -2
- package/dist/roadtrip/p-028243c1.entry.js.map +0 -1
- package/dist/roadtrip/p-0f8966f4.entry.js +0 -2
- package/dist/roadtrip/p-13d54b3e.entry.js +0 -2
- package/dist/roadtrip/p-5ab03aa4.entry.js +0 -2
- package/dist/roadtrip/p-9b170273.entry.js +0 -2
- package/dist/roadtrip/p-9fefc8af.entry.js +0 -2
- package/dist/roadtrip/p-be8aee32.entry.js +0 -2
- package/dist/roadtrip/p-d794a8d4.entry.js +0 -2
- package/dist/roadtrip/svg/vehicle-car-search-color.svg +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
|
|
2
2
|
import { a as navigationClose, d as alertInfoOutline, e as alertDangerOutline, f as alertWarningOutline, g as alertSuccessOutline } from './index-891decf5.js';
|
|
3
3
|
|
|
4
|
-
const dialogCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.dialog-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;background:var(--road-overlay)}:host(.dialog-has-close) .dialog-overlay{cursor:pointer}.dialog-modal{position:relative;width:auto;margin:1rem;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.dialog-open){visibility:visible !important;opacity:1}:host(.dialog-open) .dialog-modal{transform:none}.dialog-content{position:relative;display:flex;flex-direction:column;width:100%;padding:0 0 1.5rem;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;border-radius:0.25rem;outline:0;box-shadow:var(--road-elevation-highest)}@media (min-width: 576px){.dialog-content{max-width:454px}}.dialog-header{display:flex;align-items:center;justify-content:flex-end;height:100%;max-height:2.75rem;margin-bottom:2rem}.dialog-close{display:flex;align-items:center;align-self:flex-start;justify-content:center;width:3.5rem;height:3.5rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none
|
|
4
|
+
const dialogCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.dialog-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;background:var(--road-overlay)}:host(.dialog-has-close) .dialog-overlay{cursor:pointer}.dialog-modal{position:relative;width:auto;margin:1rem;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.dialog-open){visibility:visible !important;opacity:1}:host(.dialog-open) .dialog-modal{transform:none}.dialog-content{position:relative;display:flex;flex-direction:column;width:100%;padding:0 0 1.5rem;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;border-radius:0.25rem;outline:0;box-shadow:var(--road-elevation-highest)}@media (min-width: 576px){.dialog-content{max-width:454px}}.dialog-header{display:flex;align-items:center;justify-content:flex-end;height:100%;max-height:2.75rem;margin-bottom:2rem}.dialog-close{display:flex;align-items:center;align-self:flex-start;justify-content:center;width:3.5rem;height:3.5rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.dialog-icon{display:inline-block;width:3rem;height:3rem;font-size:var(--road-font-size-48)}.dialog-body{padding:0 1.5rem;text-align:center}@media (min-width: 768px){.dialog-body{padding:0 3rem}}.dialog-title{padding:0;margin:0 0 1rem;font-size:var(--road-body-medium);font-weight:700;line-height:1.2}.dialog-description{margin:0 0 0.5rem;overflow:auto;font-size:var(--road-body-medium)}.dialog-footer{display:flex;justify-content:center;padding:0 1.5rem}.dialog-footer ::slotted(road-button){margin-top:1rem}.dialog-footer .btn{min-width:130px;max-width:calc(50% - 0.5rem)}";
|
|
5
5
|
|
|
6
6
|
const Dialog = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-dialog.entry.js","mappings":"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","names":[],"sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/*\n * Dialog\n *\n * Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n */\n\n/**\n * @prop --z-index: The z-index of the Dialog.\n */\n\n:host {\n --z-index: 3;\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface);\n visibility: hidden !important;\n opacity: 0;\n transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.dialog-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n touch-action: none;\n background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n cursor: pointer;\n}\n\n/* DIALOG\n -------------------- */\n\n.dialog-modal {\n position: relative;\n width: auto;\n margin: 1rem;\n pointer-events: none;\n transition: transform 0.3s ease-out;\n transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.dialog-open) {\n visibility: visible !important;\n opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0 0 1.5rem;\n pointer-events: auto;\n background: var(--road-surface);\n background-clip: padding-box;\n border-radius: 0.25rem;\n outline: 0;\n box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n .dialog-content {\n max-width: 454px;\n }\n}\n\n/* HEADER\n -------------------- */\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n max-height: 2.75rem;\n margin-bottom: 2rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.dialog-close {\n display: flex;\n align-items: center;\n align-self: flex-start;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: transparent;\n border: 0;\n appearance: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n font-size: var(--road-font-size-48);\n}\n\n/* BODY\n -------------------- */\n\n.dialog-body {\n padding: 0 1.5rem;\n text-align: center;\n}\n\n@media (min-width: 768px) {\n\n .dialog-body {\n padding: 0 3rem;\n }\n}\n\n/* TITLE\n -------------------- */\n\n.dialog-title {\n padding: 0;\n margin: 0 0 1rem;\n font-size: var(--road-body-medium);\n font-weight: 700;\n line-height: 1.2;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.dialog-description {\n margin: 0 0 0.5rem;\n overflow: auto;\n font-size: var(--road-body-medium);\n}\n\n/* FOOTER\n -------------------- */\n\n.dialog-footer {\n display: flex;\n justify-content: center;\n padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n margin-top: 1rem;\n}\n\n/**\n * Footer buttons\n */\n\n.dialog-footer .btn {\n min-width: 130px;\n max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /**\n * Current reference of the dialog\n */\n @Element() el!: HTMLRoadDialogElement;\n\n /**\n * Set isOpen property to true to open the dialog\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Show / hide the close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Set the color of information dialog. e.g. info, success, warning, danger\n */\n @Prop() color?: FeedbackColors;\n\n /**\n * override default icon\n */\n @Prop() icon?: string;\n\n /**\n * Text to the top\n */\n @Prop() label?: string;\n\n /**\n * Content description of the dialog\n */\n @Prop() description?: string;\n\n /**\n * Indicate when closing the dialog\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Open the dialog\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the dialog\n */\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\n }\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /**\n * Close the dialog when press Escape key\n */\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' || event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n this.close();\n }\n }\n\n /**\n * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-labelledby=\"dialogLabel\" aria-describedby=\"dialogDesc\">\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\" id=\"dialogLabel\">{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"road-dialog.entry.js","mappings":"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","names":[],"sources":["src/components/dialog/dialog.css?tag=road-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/*\n * Dialog\n *\n * Index\n * - Overlay\n * - Dialog\n * - Content\n * - Header\n * - Close\n * - Body\n * - Title\n * - Description\n * - Footer\n */\n\n/**\n * @prop --z-index: The z-index of the Dialog.\n */\n\n:host {\n --z-index: 3;\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface);\n visibility: hidden !important;\n opacity: 0;\n transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.dialog-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n touch-action: none;\n background: var(--road-overlay);\n}\n\n:host(.dialog-has-close) .dialog-overlay {\n cursor: pointer;\n}\n\n/* DIALOG\n -------------------- */\n\n.dialog-modal {\n position: relative;\n width: auto;\n margin: 1rem;\n pointer-events: none;\n transition: transform 0.3s ease-out;\n transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.dialog-open) {\n visibility: visible !important;\n opacity: 1;\n}\n\n:host(.dialog-open) .dialog-modal {\n transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 0 0 1.5rem;\n pointer-events: auto;\n background: var(--road-surface);\n background-clip: padding-box;\n border-radius: 0.25rem;\n outline: 0;\n box-shadow: var(--road-elevation-highest);\n}\n\n@media (min-width: 576px) {\n\n .dialog-content {\n max-width: 454px;\n }\n}\n\n/* HEADER\n -------------------- */\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n max-height: 2.75rem;\n margin-bottom: 2rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.dialog-close {\n display: flex;\n align-items: center;\n align-self: flex-start;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: transparent;\n border: 0;\n appearance: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dialog-icon {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n font-size: var(--road-font-size-48);\n}\n\n/* BODY\n -------------------- */\n\n.dialog-body {\n padding: 0 1.5rem;\n text-align: center;\n}\n\n@media (min-width: 768px) {\n\n .dialog-body {\n padding: 0 3rem;\n }\n}\n\n/* TITLE\n -------------------- */\n\n.dialog-title {\n padding: 0;\n margin: 0 0 1rem;\n font-size: var(--road-body-medium);\n font-weight: 700;\n line-height: 1.2;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.dialog-description {\n margin: 0 0 0.5rem;\n overflow: auto;\n font-size: var(--road-body-medium);\n}\n\n/* FOOTER\n -------------------- */\n\n.dialog-footer {\n display: flex;\n justify-content: center;\n padding: 0 1.5rem;\n}\n\n.dialog-footer ::slotted(road-button) {\n margin-top: 1rem;\n}\n\n/**\n * Footer buttons\n */\n\n.dialog-footer .btn {\n min-width: 130px;\n max-width: calc(50% - 0.5rem);\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /**\n * Current reference of the dialog\n */\n @Element() el!: HTMLRoadDialogElement;\n\n /**\n * Set isOpen property to true to open the dialog\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Show / hide the close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Set the color of information dialog. e.g. info, success, warning, danger\n */\n @Prop() color?: FeedbackColors;\n\n /**\n * override default icon\n */\n @Prop() icon?: string;\n\n /**\n * Text to the top\n */\n @Prop() label?: string;\n\n /**\n * Content description of the dialog\n */\n @Prop() description?: string;\n\n /**\n * Indicate when closing the dialog\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Open the dialog\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the dialog\n */\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\n }\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /**\n * Close the dialog when press Escape key\n */\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' || event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\n this.close();\n }\n }\n\n /**\n * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-labelledby=\"dialogLabel\" aria-describedby=\"dialogDesc\">\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\" id=\"dialogLabel\">{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
|
|
2
2
|
import { a as navigationClose } from './index-891decf5.js';
|
|
3
3
|
|
|
4
|
-
const modalCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none
|
|
4
|
+
const modalCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.modal-action~.modal-title,.modal-close~.modal-title{padding-left:0}.modal-action-left,.modal-close-left{margin-right:auto}.modal-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);font-weight:400}.modal-body{padding:2.5rem 0.5rem;overflow-y:auto}.modal-header-inverse+.modal-body{padding-top:0}@media (min-width: 768px){.modal-body{max-height:86vh;padding-right:5rem;padding-left:5rem}}";
|
|
5
5
|
|
|
6
6
|
const Modal = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-modal.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"road-modal.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,gnEAAgnE;;MCYpnE,KAAK;;;;;;;IA2DR,YAAO,GAAG,CAAC,EAAW;MAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;oBAtDyB,GAAG;kBAKa,KAAK;4BAKZ,KAAK;;wBAUT,IAAI;;;;;EAWpC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE;MACxC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;GACnB;;;;EAgBD,QAAQ,CAAC,KAAoB;IAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;MACjD,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;GACF;;;;EAKD,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI;MAC7D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KACpD,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;IACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,GAAG,EAAE,CAAC;IAC/E,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,OAAO,IAAC,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAAS,GAAG,EAAE,CAAC;IAEjN,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,EAAE,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,IACnE,WAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,GAAO,EACtE,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,IAC/F,WAAK,KAAK,EAAC,eAAe,IACxB,cAAQ,KAAK,EAAE,gBAAgB,kBAAkB,EAAE,IACjD,UAAI,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM,EAC7C,gBAAgB,CACV,EACT,WAAK,KAAK,EAAC,YAAY,IACrB,eAAO,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/modal/modal.css?tag=road-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * Modal\n *\n * Index\n * - Overlay\n * - Modal\n * - Content\n * - Header\n * - Actions\n * - Title\n * - Body\n */\n\n/**\n * @prop --z-index: The z-index of the Modal.\n */\n\n\n/* OVERLAY\n -------------------- */\n\n:host {\n --z-index: 3;\n\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-grey-900);\n visibility: hidden !important;\n opacity: 0;\n transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.modal-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n touch-action: none;\n cursor: pointer;\n background: var(--road-overlay);\n}\n\n/* MODAL\n -------------------- */\n\n.modal-dialog {\n position: relative;\n width: 100%;\n pointer-events: none;\n transition: transform 0.3s ease-out;\n transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.modal-open) {\n visibility: visible !important;\n opacity: 1;\n}\n\n:host(.modal-open) .modal-dialog {\n transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100vh;\n pointer-events: auto;\n background: var(--road-surface);\n background-clip: padding-box;\n box-shadow: var(--road-elevation-hight);\n}\n\n@media (min-width: 768px) {\n\n .modal-content {\n height: auto;\n border-radius: 0.25rem;\n }\n}\n\n/* HEADER\n -------------------- */\n\n.modal-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--road-on-header-surface);\n background: var(--road-header-surface);\n}\n\n.modal-header road-icon {\n color: var(--road-header-icon);\n}\n\n@media (min-width: 768px) {\n\n .modal-header {\n border-radius: 0.25rem 0.25rem 0 0;\n }\n}\n\n/**\n * Modal header inverse colors\n */\n\n.modal-header-inverse {\n color: var(--road-on-surface);\n background: none;\n}\n\n.modal-header-inverse road-icon {\n color: var(--road-icon);\n}\n\n/* ACTIONS\n -------------------- */\n\n.modal-action,\n.modal-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n padding: 0;\n font-weight: 700;\n color: inherit;\n cursor: pointer;\n background: transparent;\n border: 0;\n appearance: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.modal-action ~ .modal-title,\n.modal-close ~ .modal-title {\n padding-left: 0;\n}\n\n.modal-action-left,\n.modal-close-left {\n margin-right: auto;\n}\n\n/* TITLE\n -------------------- */\n\n.modal-title {\n display: flex;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n height: 3.5rem;\n padding-left: 3.5rem;\n margin: 0;\n font-size: var(--road-body-medium);\n font-weight: 400;\n}\n\n/* BODY\n -------------------- */\n\n.modal-body {\n padding: 2.5rem 0.5rem;\n overflow-y: auto;\n}\n\n.modal-header-inverse + .modal-body {\n padding-top: 0;\n}\n\n@media (min-width: 768px) {\n\n .modal-body {\n max-height: 86vh;\n padding-right: 5rem;\n padding-left: 5rem;\n }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n/**\n * @slot - Content of the modal.\n */\n\n@Component({\n tag: 'road-modal',\n styleUrl: 'modal.css',\n shadow: true,\n})\nexport class Modal {\n\n /**\n * Current reference of the modal\n */\n @Element() el!: HTMLRoadModalElement;\n\n /**\n * Max width of the modal on desktop\n */\n @Prop() maxWidth: number = 696;\n\n /**\n * Set isOpen propertie to true to show the modal\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * inverse header colors\n */\n @Prop() hasInverseHeader: boolean = false;\n\n /**\n * Title of the modal in the header bar\n */\n @Prop() modalTitle?: string;\n\n /**\n * Show / hide close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Indicate when closing the modal\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Open the modal\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the modal\n */\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\n }\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /**\n * Close the dialog when press Escape key\n */\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if (event.key === 'Escape' || event.key === \"Esc\") {\n this.close();\n }\n }\n\n /**\n * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n render() {\n const modalIsOpenClass = this.isOpen ? 'modal-open' : '';\n const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';\n const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"modal-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n\n return (\n <Host class={`modal ${modalIsOpenClass}`} tabindex=\"-1\" role=\"dialog\">\n <div class=\"modal-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n <div class=\"modal-dialog\" style={{ maxWidth: `${this.maxWidth}px` }} role=\"document\" tabindex=\"0\">\n <div class=\"modal-content\">\n <header class={`modal-header ${inverseHeaderClass}`}>\n <h2 class=\"modal-title\">{this.modalTitle}</h2>\n {closeIconElement}\n </header>\n <div class=\"modal-body\">\n <slot/>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -1193,7 +1193,7 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
|
|
|
1193
1193
|
});
|
|
1194
1194
|
});
|
|
1195
1195
|
|
|
1196
|
-
const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{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;-webkit-appearance:none
|
|
1196
|
+
const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{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;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{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-phone-number-input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-phone-number-input::-ms-expand{display:none}.form-select-area.sc-road-phone-number-input::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-phone-number-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-phone-number-input:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-phone-number-input:disabled,.form-select-area[readonly].sc-road-phone-number-input{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-phone-number-input{position:absolute;top:0.9rem;left:1rem;display:block;font-size:var(--road-font-size-18);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-phone-number-input:required~.form-select-area-label.sc-road-phone-number-input::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-phone-number-input{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-phone-number-input-h .form-select-area.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-phone-number-input-h .form-select-area-label.sc-road-phone-number-input{top:1rem}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"date\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"time\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:placeholder-shown~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-phone-number-input{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-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input~.invalid-feedback.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid~.invalid-feedback.sc-road-phone-number-input{display:block}.form-select-area.sc-road-phone-number-input option.sc-road-phone-number-input:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-phone-number-input::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
|
|
1197
1197
|
|
|
1198
1198
|
let selectIds = 0;
|
|
1199
1199
|
const RoadPhoneNumberInput = class {
|
|
@@ -1223,7 +1223,6 @@ const RoadPhoneNumberInput = class {
|
|
|
1223
1223
|
}
|
|
1224
1224
|
// On component load
|
|
1225
1225
|
componentWillLoad() {
|
|
1226
|
-
var _a;
|
|
1227
1226
|
this.placeErrorMessage();
|
|
1228
1227
|
let fromSelect = false;
|
|
1229
1228
|
if (this.phoneValue) {
|
|
@@ -1231,8 +1230,10 @@ const RoadPhoneNumberInput = class {
|
|
|
1231
1230
|
}
|
|
1232
1231
|
if (this.countryCode) {
|
|
1233
1232
|
this.selectedCountry = this.countryCode;
|
|
1234
|
-
|
|
1235
|
-
|
|
1233
|
+
if (this.getPhoneCodeFromCountryCode(this.countryCode)) {
|
|
1234
|
+
this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode));
|
|
1235
|
+
fromSelect = true;
|
|
1236
|
+
}
|
|
1236
1237
|
}
|
|
1237
1238
|
this.updateCountryOptions();
|
|
1238
1239
|
this.createAndDispatchPhoneData(fromSelect);
|