@roadtrip/components 3.12.0 → 3.12.2
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-navbar-item.cjs.entry.js +4 -3
- package/dist/cjs/road-navbar-item.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/navbar-item/navbar-item.css +28 -1
- package/dist/collection/components/navbar-item/navbar-item.js +3 -2
- package/dist/collection/components/navbar-item/navbar-item.js.map +1 -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-navbar-item.entry.js +4 -3
- package/dist/esm/road-navbar-item.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-336aa5f6.entry.js +2 -0
- package/dist/roadtrip/p-336aa5f6.entry.js.map +1 -0
- 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.js +23 -21
- 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-90b35d7e.entry.js +0 -2
- package/dist/roadtrip/p-90b35d7e.entry.js.map +0 -1
- 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
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-12592729.js');
|
|
6
6
|
const index$1 = require('./index-fb57f684.js');
|
|
7
7
|
|
|
8
|
-
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
|
|
8
|
+
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)}";
|
|
9
9
|
|
|
10
10
|
const Dialog = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-dialog.entry.cjs.js","mappings":"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","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"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.cjs.js","mappings":"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","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"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}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-12592729.js');
|
|
6
6
|
const index$1 = require('./index-fb57f684.js');
|
|
7
7
|
|
|
8
|
-
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
|
|
8
|
+
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}}";
|
|
9
9
|
|
|
10
10
|
const Modal = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-modal.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"road-modal.entry.cjs.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,GAAGA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,OAAO,IAACA,uBAAW,IAAI,EAAEC,uBAAe,iBAAc,MAAM,GAAa,CAAS,GAAG,EAAE,CAAC;IAEjN,QACED,QAACE,UAAI,IAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,EAAE,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,IACnEF,iBAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,GAAO,EACtEA,iBAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,IAC/FA,iBAAK,KAAK,EAAC,eAAe,IACxBA,oBAAQ,KAAK,EAAE,gBAAgB,kBAAkB,EAAE,IACjDA,gBAAI,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM,EAC7C,gBAAgB,CACV,EACTA,iBAAK,KAAK,EAAC,YAAY,IACrBA,qBAAO,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":["h","navigationClose","Host"],"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}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-12592729.js');
|
|
6
6
|
|
|
7
|
-
const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon{color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:\"\";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
|
|
7
|
+
const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-disabled),:host(.tab-disabled) road-tooltip,:host(.tab-disabled) road-tooltip road-icon,:host(.tab-disabled) ::slotted(road-icon){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon,:host(.tab-selected) ::slotted(road-icon){color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:\"\";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}:host(.tab-disabled.focus-visible) ::slotted(road-icon),:host(.tab-disabled.focus-visible) ::slotted(road-label),:host(.tab-disabled:hover) ::slotted(road-icon),:host(.tab-disabled:hover) ::slotted(road-label){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.tab-disabled) .button-native{cursor:not-allowed}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
|
|
8
8
|
|
|
9
9
|
const NavbarItem = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -50,16 +50,17 @@ const NavbarItem = class {
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
|
-
const { href, rel, target, selected, tab } = this;
|
|
53
|
+
const { href, rel, target, selected, tab, disabled } = this;
|
|
54
54
|
const attrs = {
|
|
55
55
|
download: this.download,
|
|
56
56
|
href,
|
|
57
57
|
rel,
|
|
58
58
|
target,
|
|
59
59
|
};
|
|
60
|
-
return (index.h(index.Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, class: {
|
|
60
|
+
return (index.h(index.Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
|
|
61
61
|
'navbar-item': true,
|
|
62
62
|
'tab-selected': selected,
|
|
63
|
+
'tab-disabled': disabled,
|
|
63
64
|
} }, index.h("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { class: "button-inner" }, index.h("slot", null)))));
|
|
64
65
|
}
|
|
65
66
|
get el() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-navbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"road-navbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,kiGAAkiG;;MCa3iG,UAAU;;;;;IAiFb,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAC5C;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;GACF;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC5D,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAC,GAAG,mBACG,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,IAAI,EACnD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB,IAEDD,+BAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,KAC7DA,kBAAM,KAAK,EAAC,cAAc,IACxBA,qBAAO,CACF,CACL,CACC,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-basis: 0;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n :host {\n flex-grow: inherit;\n width: 100%;\n padding: 0.5rem;\n }\n\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon) {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n fill: var(--road-on-surface-disabled);\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--road-on-button-tertiary);\n fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n position: absolute;\n bottom: -12px;\n left: 0;\n display: block;\n width: 100%;\n height: 4px;\n color: var(--road-on-button-tertiary);\n content: \"\";\n background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n :host(.tab-selected)::after {\n bottom: auto;\n left: 0;\n width: 4px;\n height: 100%;\n }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n color: var(--road-on-button-tertiary);\n}\n\n:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label) {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n fill: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n margin: 0;\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host(.tab-disabled) .button-native {\n cursor: not-allowed;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-flow: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n display: block;\n width: 2rem;\n height: 2rem;\n margin-right: auto;\n margin-bottom: 0.25rem;\n margin-left: auto;\n fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n :host ::slotted(road-tooltip) {\n width: 100%;\n }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-direction: column;\n font-size: var(--road-label-small);\n font-weight: 700;\n text-align: center;\n white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n ::slotted(road-label) {\n display: block;\n }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n position: absolute;\n top: 4px;\n left: calc(50% + 0.375rem);\n z-index: 1;\n box-sizing: border-box;\n height: auto;\n font-size: var(--road-font-size-10);\n font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n tag: 'road-navbar-item',\n styleUrl: 'navbar-item.css',\n shadow: true,\n})\nexport class NavbarItem {\n\n @Element() el!: HTMLRoadNavbarItemElement;\n\n /**\n * If `true`, the user cannot interact with the tab button.\n */\n @Prop() disabled = false;\n\n /**\n * This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n */\n @Prop() download: string | undefined;\n\n /**\n * Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n */\n @Prop() href: string | undefined;\n\n /**\n * Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n */\n @Prop() rel: string | undefined;\n\n /**\n * The selected tab component\n */\n @Prop({ mutable: true }) selected = false;\n\n /**\n * A tab id must be provided for each `road-tab`. It's used internally to reference\n * the selected tab.\n */\n @Prop() tab?: string;\n\n /**\n * Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n */\n @Prop() target: string | undefined;\n\n /**\n * Emitted when the tab bar is clicked\n * @internal\n */\n @Event() roadnavbaritemclick!: EventEmitter;\n /** @internal */\n @Event() roadNavbarItemClick!: EventEmitter;\n\n @Listen('roadNavbarChanged', { target: 'window' })\n @Listen('roadnavbarchanged', { target: 'window' })\n onNavbarChanged(ev: CustomEvent) {\n this.selected = this.tab === ev.detail.tab;\n }\n\n private selectTab(ev: Event | KeyboardEvent) {\n if (this.tab !== undefined) {\n if (!this.disabled) {\n this.roadnavbaritemclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadNavbarItemClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n }\n if(this.href === undefined) {\n ev.preventDefault();\n }\n }\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' || ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { href, rel, target, selected, tab, disabled } = this;\n const attrs = {\n download: this.download,\n href,\n rel,\n target,\n };\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex=\"0\"\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `navbar-item-${tab}` : null}\n disabled={disabled}\n class={{\n 'navbar-item': true,\n 'tab-selected': selected,\n 'tab-disabled': disabled,\n }}\n >\n <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n <span class=\"button-inner\">\n <slot/>\n </span>\n </a>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -1197,7 +1197,7 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
|
|
|
1197
1197
|
});
|
|
1198
1198
|
});
|
|
1199
1199
|
|
|
1200
|
-
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
|
|
1200
|
+
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, '')}";
|
|
1201
1201
|
|
|
1202
1202
|
let selectIds = 0;
|
|
1203
1203
|
const RoadPhoneNumberInput = class {
|
|
@@ -1227,7 +1227,6 @@ const RoadPhoneNumberInput = class {
|
|
|
1227
1227
|
}
|
|
1228
1228
|
// On component load
|
|
1229
1229
|
componentWillLoad() {
|
|
1230
|
-
var _a;
|
|
1231
1230
|
this.placeErrorMessage();
|
|
1232
1231
|
let fromSelect = false;
|
|
1233
1232
|
if (this.phoneValue) {
|
|
@@ -1235,8 +1234,10 @@ const RoadPhoneNumberInput = class {
|
|
|
1235
1234
|
}
|
|
1236
1235
|
if (this.countryCode) {
|
|
1237
1236
|
this.selectedCountry = this.countryCode;
|
|
1238
|
-
|
|
1239
|
-
|
|
1237
|
+
if (this.getPhoneCodeFromCountryCode(this.countryCode)) {
|
|
1238
|
+
this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode));
|
|
1239
|
+
fromSelect = true;
|
|
1240
|
+
}
|
|
1240
1241
|
}
|
|
1241
1242
|
this.updateCountryOptions();
|
|
1242
1243
|
this.createAndDispatchPhoneData(fromSelect);
|