@roadtrip/components 3.24.0 → 3.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/road-accordion.cjs.entry.js +1 -1
- package/dist/cjs/road-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/road-avatar.cjs.entry.js +1 -1
- package/dist/cjs/road-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +2 -2
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-chip.cjs.entry.js +1 -1
- package/dist/cjs/road-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/road-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/road-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/road-navbar.cjs.entry.js +1 -1
- package/dist/cjs/road-navbar.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-segmented-button.cjs.entry.js +1 -1
- package/dist/cjs/road-segmented-button.cjs.entry.js.map +1 -1
- package/dist/cjs/road-select.cjs.entry.js +1 -1
- package/dist/cjs/road-select.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tab-button.cjs.entry.js +1 -1
- package/dist/cjs/road-tab-button.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/cjs/road-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/accordion/accordion.css +4 -7
- package/dist/collection/components/accordion/accordion.stories.js +10 -2
- package/dist/collection/components/avatar/avatar.css +5 -2
- package/dist/collection/components/button/button.css +0 -1
- package/dist/collection/components/chip/chip.css +2 -0
- package/dist/collection/components/dropdown/dropdown.css +5 -4
- package/dist/collection/components/global-navigation/global-navigation.stories.js +4 -4
- package/dist/collection/components/navbar/navbar.css +2 -2
- package/dist/collection/components/navbar/navbar.stories.js +1 -1
- package/dist/collection/components/plate-number/plate-number.css +1 -3
- package/dist/collection/components/segmented-button/segmented-button.css +1 -1
- package/dist/collection/components/select/select.css +0 -5
- package/dist/collection/components/tab-button/tab-button.css +6 -1
- package/dist/collection/components/textarea/textarea.css +0 -1
- package/dist/collection/components/toolbar/toolbar.css +3 -3
- package/dist/collection/components/tooltip/tooltip.css +2 -2
- package/dist/collection/components/tooltip/tooltip.stories.js +2 -2
- package/dist/esm/road-accordion.entry.js +1 -1
- package/dist/esm/road-accordion.entry.js.map +1 -1
- package/dist/esm/road-avatar.entry.js +1 -1
- package/dist/esm/road-avatar.entry.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +2 -2
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-chip.entry.js +1 -1
- package/dist/esm/road-chip.entry.js.map +1 -1
- package/dist/esm/road-dropdown.entry.js +1 -1
- package/dist/esm/road-dropdown.entry.js.map +1 -1
- package/dist/esm/road-navbar.entry.js +1 -1
- package/dist/esm/road-navbar.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-segmented-button.entry.js +1 -1
- package/dist/esm/road-segmented-button.entry.js.map +1 -1
- package/dist/esm/road-select.entry.js +1 -1
- package/dist/esm/road-select.entry.js.map +1 -1
- package/dist/esm/road-tab-button.entry.js +1 -1
- package/dist/esm/road-tab-button.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/esm/road-tooltip.entry.js +1 -1
- package/dist/esm/road-tooltip.entry.js.map +1 -1
- package/dist/roadtrip/p-10903095.entry.js +2 -0
- package/dist/roadtrip/p-10903095.entry.js.map +1 -0
- package/dist/roadtrip/p-48fad2ec.entry.js +2 -0
- package/dist/roadtrip/p-48fad2ec.entry.js.map +1 -0
- package/dist/roadtrip/{p-31cf9b61.entry.js → p-548b3e44.entry.js} +2 -2
- package/dist/roadtrip/{p-31cf9b61.entry.js.map → p-548b3e44.entry.js.map} +1 -1
- package/dist/roadtrip/p-631eca8b.entry.js +2 -0
- package/dist/roadtrip/p-631eca8b.entry.js.map +1 -0
- package/dist/roadtrip/p-6ff5ec7c.entry.js +2 -0
- package/dist/roadtrip/p-6ff5ec7c.entry.js.map +1 -0
- package/dist/roadtrip/p-73f81e81.entry.js +2 -0
- package/dist/roadtrip/p-73f81e81.entry.js.map +1 -0
- package/dist/roadtrip/p-98cd42c5.entry.js +2 -0
- package/dist/roadtrip/p-98cd42c5.entry.js.map +1 -0
- package/dist/roadtrip/p-a0cde368.entry.js +2 -0
- package/dist/roadtrip/p-a0cde368.entry.js.map +1 -0
- package/dist/roadtrip/{p-5829857c.entry.js → p-a77727f2.entry.js} +2 -2
- package/dist/roadtrip/{p-5829857c.entry.js.map → p-a77727f2.entry.js.map} +1 -1
- package/dist/roadtrip/p-d9c73068.entry.js +2 -0
- package/dist/roadtrip/{p-0c4ae774.entry.js.map → p-d9c73068.entry.js.map} +1 -1
- package/dist/roadtrip/p-f0a7c904.entry.js +2 -0
- package/dist/roadtrip/p-f0a7c904.entry.js.map +1 -0
- package/dist/roadtrip/p-fc41f5e6.entry.js +2 -0
- package/dist/roadtrip/p-fc41f5e6.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/hydrate/index.js +13 -13
- package/package.json +1 -1
- package/dist/roadtrip/p-08b0be1b.entry.js +0 -2
- package/dist/roadtrip/p-08b0be1b.entry.js.map +0 -1
- package/dist/roadtrip/p-0c4ae774.entry.js +0 -2
- package/dist/roadtrip/p-14ecc91e.entry.js +0 -2
- package/dist/roadtrip/p-14ecc91e.entry.js.map +0 -1
- package/dist/roadtrip/p-172d4877.entry.js +0 -2
- package/dist/roadtrip/p-172d4877.entry.js.map +0 -1
- package/dist/roadtrip/p-38099006.entry.js +0 -2
- package/dist/roadtrip/p-38099006.entry.js.map +0 -1
- package/dist/roadtrip/p-3c2da24f.entry.js +0 -2
- package/dist/roadtrip/p-3c2da24f.entry.js.map +0 -1
- package/dist/roadtrip/p-4001ab77.entry.js +0 -2
- package/dist/roadtrip/p-4001ab77.entry.js.map +0 -1
- package/dist/roadtrip/p-78e9bbd5.entry.js +0 -2
- package/dist/roadtrip/p-78e9bbd5.entry.js.map +0 -1
- package/dist/roadtrip/p-b65252b7.entry.js +0 -2
- package/dist/roadtrip/p-b65252b7.entry.js.map +0 -1
- package/dist/roadtrip/p-cfa6e719.entry.js +0 -2
- package/dist/roadtrip/p-cfa6e719.entry.js.map +0 -1
package/hydrate/index.js
CHANGED
|
@@ -5839,7 +5839,7 @@ if (window.applyFocusVisiblePolyfill == null) {
|
|
|
5839
5839
|
Promise.resolve().then(function () { return focusVisible$1; });
|
|
5840
5840
|
}
|
|
5841
5841
|
|
|
5842
|
-
const accordionCss = "/*!@:host*/.sc-road-accordion-h{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--icon-color:var(--road-icon);--max-height:none;display:block}
|
|
5842
|
+
const accordionCss = "/*!@:host*/.sc-road-accordion-h{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--header-padding-vertical:var(--road-spacing-04);--icon-color:var(--road-icon);--max-height:none;display:block}/*!@.accordion*/.accordion.sc-road-accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}/*!@.accordion.accordion-light*/.accordion.accordion-light.sc-road-accordion{background:none;border:0}/*!@.accordion[open]*/.accordion[open].sc-road-accordion{max-height:var(--max-height)}/*!@.accordion[open] .accordion-arrow*/.accordion[open].sc-road-accordion .accordion-arrow.sc-road-accordion{transform:rotate(-90deg)}/*!@.accordion[open] .accordion-content*/.accordion[open].sc-road-accordion .accordion-content.sc-road-accordion{padding:var(--content-padding);margin:var(--content-margin)}/*!@.accordion-light[open] .accordion-light-content*/.accordion-light[open].sc-road-accordion .accordion-light-content.sc-road-accordion{margin:0 0 var(--road-spacing-04)}/*!@.accordion-light[open] .accordion-light-header::after*/.accordion-light[open].sc-road-accordion .accordion-light-header.sc-road-accordion::after{display:none}/*!@.accordion-trigger*/.accordion-trigger.sc-road-accordion{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.accordion-light .accordion-trigger:active*/.accordion-light.sc-road-accordion .accordion-trigger.sc-road-accordion:active{background:none}/*!@.accordion-trigger::-webkit-details-marker*/.accordion-trigger.sc-road-accordion::-webkit-details-marker{display:none}/*!@.accordion-trigger.focus-visible*/.accordion-trigger.focus-visible.sc-road-accordion{border-color:var(--road-primary)}/*!@.accordion-trigger:active*/.accordion-trigger.sc-road-accordion:active{background:var(--road-surface-inverse)}/*!@.accordion-header*/.accordion-header.sc-road-accordion{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}/*!@.accordion-light-header*/.accordion-light-header.sc-road-accordion{position:relative;padding:var(--header-padding-vertical) 0;font-size:var(--road-body-large)}/*!@.accordion-light--small .accordion-light-header*/.accordion-light--small.sc-road-accordion .accordion-light-header.sc-road-accordion{font-size:var(--road-body-medium)}/*!@.accordion-light--border .accordion-light-header::after*/.accordion-light--border.sc-road-accordion .accordion-light-header.sc-road-accordion::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}/*!@.accordion-arrow*/.accordion-arrow.sc-road-accordion{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}/*!@.accordion-light--small .accordion-arrow*/.accordion-light--small.sc-road-accordion .accordion-arrow.sc-road-accordion{width:1.5rem;height:1.5rem}/*!@::slotted([slot=\"header\"])*/.sc-road-accordion-s>[slot=\"header\"]{display:flex;align-items:center}/*!@:host(.accordion-icon-left)*/.accordion-icon-left.sc-road-accordion-h{width:1.5rem;height:1.5rem;margin-right:1rem}/*!@.accordion-content*/.accordion-content.sc-road-accordion{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}/*!@.accordion-light-content*/.accordion-light-content.sc-road-accordion{border-top:1px solid var(--road-outline-weak)}/*!@.accordion-light--border .accordion-light-content*/.accordion-light--border.sc-road-accordion .accordion-light-content.sc-road-accordion{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
|
|
5843
5843
|
|
|
5844
5844
|
/**
|
|
5845
5845
|
* @slot header - Content of the header.
|
|
@@ -6082,7 +6082,7 @@ class Autocomplete {
|
|
|
6082
6082
|
}; }
|
|
6083
6083
|
}
|
|
6084
6084
|
|
|
6085
|
-
const avatarCss = "/*!@:host*/.sc-road-avatar-h{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}/*!@:host(:hover)
|
|
6085
|
+
const avatarCss = "/*!@:host*/.sc-road-avatar-h{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}/*!@:host(:hover)*/.sc-road-avatar-h:hover{box-shadow:0 0 0 4px var(--road-primary-80)}/*!@:host(.focus-visible),\n:host(:focus)*/.focus-visible.sc-road-avatar-h,.sc-road-avatar-h:focus{outline:auto}/*!@:host ::slotted(road-icon)*/.sc-road-avatar-h .sc-road-avatar-s>road-icon{fill:var(--road-icon-inverse)}/*!@:host(.avatar-sm)*/.avatar-sm.sc-road-avatar-h{width:2.625rem;height:2.625rem;font-size:1.25rem}/*!@:host(.avatar-md)*/.avatar-md.sc-road-avatar-h{width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}/*!@:host(.avatar-lg)*/.avatar-lg.sc-road-avatar-h{width:4rem;height:4rem;font-size:2.375rem}/*!@::slotted(road-img),\n::slotted(img)*/.sc-road-avatar-s>road-img,.sc-road-avatar-s>img{width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}/*!@::slotted(road-badge)*/.sc-road-avatar-s>road-badge{position:absolute;top:0;right:0}";
|
|
6086
6086
|
|
|
6087
6087
|
/**
|
|
6088
6088
|
* @slot - Image of the avatar.
|
|
@@ -6186,7 +6186,7 @@ class Banner {
|
|
|
6186
6186
|
}; }
|
|
6187
6187
|
}
|
|
6188
6188
|
|
|
6189
|
-
const buttonCss = "/*!@:host*/.sc-road-button-h{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(:hover)*/.sc-road-button-h:hover{text-decoration:none}/*!@:host(.focus-visible)*/.focus-visible.sc-road-button-h{text-decoration:underline;outline:auto}/*!@.button-native*/.button-native.sc-road-button{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;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:none
|
|
6189
|
+
const buttonCss = "/*!@:host*/.sc-road-button-h{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(:hover)*/.sc-road-button-h:hover{text-decoration:none}/*!@:host(.focus-visible)*/.focus-visible.sc-road-button-h{text-decoration:underline;outline:auto}/*!@.button-native*/.button-native.sc-road-button{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;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:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@:host(.btn-default:not([disabled]).focus-visible)*/.btn-default.sc-road-button-h:not([disabled]).focus-visible{background:var(--road-grey-80)}/*!@:host(.btn-primary)*/.btn-primary.sc-road-button-h{color:var(--road-on-button-primary);background:var(--road-button-primary)}/*!@:host(.btn-primary) ::slotted(road-icon)*/.sc-road-button-h.btn-primary .sc-road-button-s>road-icon{color:var(--road-on-button-primary)}/*!@:host(.btn-primary:not([disabled]):hover),\n:host(.btn-primary:not([disabled]).focus-visible)*/.btn-primary.sc-road-button-h:not([disabled]):hover,.btn-primary.sc-road-button-h:not([disabled]).focus-visible{background:var(--road-button-primary-variant);outline:0}/*!@:host(.btn-secondary)*/.btn-secondary.sc-road-button-h{color:var(--road-on-button-secondary);background:var(--road-button-secondary)}/*!@:host(.btn-secondary) ::slotted(road-icon)*/.sc-road-button-h.btn-secondary .sc-road-button-s>road-icon{color:var(--road-on-button-secondary)}/*!@:host(.btn-secondary:not([disabled]):hover),\n:host(.btn-secondary:not([disabled]).focus-visible)*/.btn-secondary.sc-road-button-h:not([disabled]):hover,.btn-secondary.sc-road-button-h:not([disabled]).focus-visible{background:var(--road-button-secondary-variant)}/*!@:host(.btn-link)*/.btn-link.sc-road-button-h{font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}/*!@:host(.btn-link:not([disabled]):hover),\n:host(.btn-link:not([disabled]).focus-visible)*/.btn-link.sc-road-button-h:not([disabled]):hover,.btn-link.sc-road-button-h:not([disabled]).focus-visible{color:var(--road-primary-30)}/*!@:host(.btn-outline-primary),\n:host(.btn-outline-secondary),\n:host(.btn-outline-default)*/.btn-outline-primary.sc-road-button-h,.btn-outline-secondary.sc-road-button-h,.btn-outline-default.sc-road-button-h{background:transparent}/*!@:host(.btn-outline-default)*/.btn-outline-default.sc-road-button-h{color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}/*!@:host(.btn-outline-default) ::slotted(road-icon)*/.sc-road-button-h.btn-outline-default .sc-road-button-s>road-icon{color:var(--road-on-surface-weak)}/*!@:host(.btn-outline-default:hover),\n:host(.btn-outline-default.focus-visible)*/.btn-outline-default.sc-road-button-h:hover,.btn-outline-default.focus-visible.sc-road-button-h{background:var(--road-grey-80)}/*!@:host(.btn-ghost) ::slotted(road-icon)*/.sc-road-button-h.btn-ghost .sc-road-button-s>road-icon{color:var(--road-icon)}/*!@:host(.btn-ghost:hover),\n:host(.btn-ghost.focus-visible)*/.btn-ghost.sc-road-button-h:hover,.btn-ghost.focus-visible.sc-road-button-h{background:var(--road-button-ghost-variant)}/*!@:host([aria-disabled].btn-outline-primary)*/[aria-disabled].btn-outline-primary.sc-road-button-h{background:none}/*!@:host(.btn-outline-primary)*/.btn-outline-primary.sc-road-button-h{color:var(--road-button-primary);border-color:var(--road-button-tertiary-outline)}/*!@:host(.btn-outline-primary) ::slotted(road-icon)*/.sc-road-button-h.btn-outline-primary .sc-road-button-s>road-icon{color:var(--road-button-primary)}/*!@:host(.btn-outline-primary:hover),\n:host(.btn-outline-primary.focus-visible)*/.btn-outline-primary.sc-road-button-h:hover,.btn-outline-primary.focus-visible.sc-road-button-h{background:var(--road-button-tertiary-variant)}/*!@:host(.btn-outline-secondary)*/.btn-outline-secondary.sc-road-button-h{color:var(--road-button-secondary);border-color:var(--road-button-secondary)}/*!@:host(.btn-outline-secondary) ::slotted(road-icon)*/.sc-road-button-h.btn-outline-secondary .sc-road-button-s>road-icon{color:var(--road-button-secondary)}/*!@:host(.btn-outline-secondary:hover),\n:host(.btn-outline-secondary.focus-visible)*/.btn-outline-secondary.sc-road-button-h:hover,.btn-outline-secondary.focus-visible.sc-road-button-h{background:var(--road-button-tertiary-variant)}/*!@:host([aria-disabled])*/[aria-disabled].sc-road-button-h{color:var(--road-on-surface-disabled);pointer-events:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border-color:1px solid var(--road-surface-disabled)}/*!@:host([aria-disabled]) ::slotted(road-icon)*/.sc-road-button-h[aria-disabled] .sc-road-button-s>road-icon{color:var(--road-on-surface-disabled)}/*!@.button-native:disabled*/.button-native.sc-road-button:disabled{cursor:not-allowed}/*!@::slotted([slot=\"start\"])*/.sc-road-button-s>[slot=\"start\"]{margin-right:0.5rem}/*!@::slotted([slot=\"end\"])*/.sc-road-button-s>[slot=\"end\"]{margin-left:0.5rem}/*!@:host(.btn-xl)*/.btn-xl.sc-road-button-h{height:3.5rem}/*!@:host(.btn-xl) ::slotted(road-icon)*/.sc-road-button-h.btn-xl .sc-road-button-s>road-icon{width:2rem;height:2rem}/*!@:host(.btn-icon.btn-xl)*/.btn-icon.btn-xl.sc-road-button-h{width:56px}/*!@:host(.btn-lg)*/.btn-lg.sc-road-button-h{height:3rem}/*!@:host(.btn-lg) ::slotted(road-icon)*/.sc-road-button-h.btn-lg .sc-road-button-s>road-icon{width:2rem;height:2rem}/*!@:host(.btn-icon.btn-lg)*/.btn-icon.btn-lg.sc-road-button-h{width:48px}/*!@:host(.btn-md)*/.btn-md.sc-road-button-h{--font-size:var(--road-font-size-14);height:2.5rem}/*!@:host(.btn-md) ::slotted(road-icon)*/.sc-road-button-h.btn-md .sc-road-button-s>road-icon{width:1.5rem;height:1.5rem}/*!@:host(.btn-icon.btn-md)*/.btn-icon.btn-md.sc-road-button-h{width:40px}/*!@:host(.btn-sm)*/.btn-sm.sc-road-button-h{--font-size:var(--road-font-size-14);height:2rem}/*!@:host(.btn-sm) ::slotted(road-icon)*/.sc-road-button-h.btn-sm .sc-road-button-s>road-icon{width:1.25rem;height:1.25rem}/*!@:host(.btn-icon.btn-sm)*/.btn-icon.btn-sm.sc-road-button-h{width:32px}/*!@:host(.btn-block)*/.btn-block.sc-road-button-h{width:100%}/*!@:host(.btn-icon) .button-native*/.btn-icon.sc-road-button-h .button-native.sc-road-button{padding:0}/*!@::slotted(road-badge)*/.sc-road-button-s>road-badge{position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
|
|
6190
6190
|
|
|
6191
6191
|
/**
|
|
6192
6192
|
* @slot - Content of the button.
|
|
@@ -13351,7 +13351,7 @@ class Checkbox {
|
|
|
13351
13351
|
}
|
|
13352
13352
|
let checkboxIds = 0;
|
|
13353
13353
|
|
|
13354
|
-
const chipCss = "/*!@:host*/.sc-road-chip-h{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@.chip-description*/.chip-description.sc-road-chip{display:inline-flex;align-items:center;padding:0 0.5rem}/*!@:host(.chip-outline)*/.chip-outline.sc-road-chip-h{border-style:solid;border-width:1px}/*!@::slotted(road-icon)*/.sc-road-chip-s>road-icon{width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}/*!@.chip-close*/.chip-close.sc-road-chip{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(.chip-lg)*/.chip-lg.sc-road-chip-h{height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}/*!@:host(.chip-lg) ::slotted(road-icon)*/.sc-road-chip-h.chip-lg .sc-road-chip-s>road-icon{width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}/*!@:host(.chip-lg) .chip-description*/.chip-lg.sc-road-chip-h .chip-description.sc-road-chip{padding:0 0.75rem}/*!@:host(.chip-lg) .chip-close*/.chip-lg.sc-road-chip-h .chip-close.sc-road-chip{width:1.5rem;height:1.5rem}/*!@:host(.chip-default)*/.chip-default.sc-road-chip-h{color:var(--road-on-surface);background:var(--road-grey-200)}/*!@:host(.chip-outline.chip-default)*/.chip-outline.chip-default.sc-road-chip-h{background:var(--road-surface);border-color:var(--road-outline)}/*!@:host(.chip-secondary)*/.chip-secondary.sc-road-chip-h{color:var(--road-on-button-primary);background:var(--road-button-primary);border-color:transparent}/*!@:host(.chip-secondary) .chip-close*/.chip-secondary.sc-road-chip-h .chip-close.sc-road-chip{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){/*!@:host(.chip-outline:hover)*/.chip-outline.sc-road-chip-h:hover{border-color:var(--road-outline-variant)}/*!@:host(.chip-secondary:hover)*/.chip-secondary.sc-road-chip-h:hover{background:var(--road-button-primary-variant)}/*!@:host(.chip-secondary:hover) .chip-close*/.chip-secondary.sc-road-chip-h:hover .chip-close.sc-road-chip{color:var(--road-primary)}}/*!@:host(.chip-outline:focus-visible)*/.chip-outline.sc-road-chip-h:focus-visible{border-color:var(--road-outline-variant)}/*!@:host(.chip-secondary.focus-visible)*/.chip-secondary.focus-visible.sc-road-chip-h{background:var(--road-button-primary-variant)}";
|
|
13354
|
+
const chipCss = "/*!@:host*/.sc-road-chip-h{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@.chip-description*/.chip-description.sc-road-chip{display:inline-flex;align-items:center;padding:0 0.5rem}/*!@:host(.chip-outline)*/.chip-outline.sc-road-chip-h{border-style:solid;border-width:1px}/*!@::slotted(road-icon)*/.sc-road-chip-s>road-icon{width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}/*!@.chip-close*/.chip-close.sc-road-chip{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(.chip-lg)*/.chip-lg.sc-road-chip-h{height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}/*!@:host(.chip-lg) ::slotted(road-icon)*/.sc-road-chip-h.chip-lg .sc-road-chip-s>road-icon{width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}/*!@:host(.chip-lg) .chip-description*/.chip-lg.sc-road-chip-h .chip-description.sc-road-chip{padding:0 0.75rem}/*!@:host(.chip-lg) .chip-close*/.chip-lg.sc-road-chip-h .chip-close.sc-road-chip{width:1.5rem;height:1.5rem}/*!@:host(.chip-default)*/.chip-default.sc-road-chip-h{color:var(--road-on-surface);background:var(--road-grey-200)}/*!@:host(.chip-outline.chip-default)*/.chip-outline.chip-default.sc-road-chip-h{background:var(--road-surface);border-color:var(--road-outline)}/*!@:host(.chip-secondary)*/.chip-secondary.sc-road-chip-h{color:var(--road-on-button-primary);background:var(--road-button-primary);border-color:transparent}/*!@:host(.chip-secondary) .chip-close*/.chip-secondary.sc-road-chip-h .chip-close.sc-road-chip{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){/*!@:host(.chip-outline:hover)*/.chip-outline.sc-road-chip-h:hover{border-color:var(--road-outline-variant)}/*!@:host(.chip-secondary:hover)*/.chip-secondary.sc-road-chip-h:hover{background:var(--road-button-primary-variant)}/*!@:host(.chip-secondary:hover) .chip-close*/.chip-secondary.sc-road-chip-h:hover .chip-close.sc-road-chip{color:var(--road-primary)}}/*!@:host(.chip-outline:focus-visible)*/.chip-outline.sc-road-chip-h:focus-visible{border-color:var(--road-outline-variant);outline:auto}/*!@:host(.chip-secondary.focus-visible)*/.chip-secondary.focus-visible.sc-road-chip-h{background:var(--road-button-primary-variant);outline:auto}";
|
|
13355
13355
|
|
|
13356
13356
|
/**
|
|
13357
13357
|
* @slot - Content of the chip.
|
|
@@ -13906,7 +13906,7 @@ class Drawer {
|
|
|
13906
13906
|
}; }
|
|
13907
13907
|
}
|
|
13908
13908
|
|
|
13909
|
-
const dropdownCss = "/*!@:host*/.sc-road-dropdown-h{--margin-top:0.5rem;display:block;width:max-content}/*!@.dropdown*/.dropdown.sc-road-dropdown{position:relative;font-family:var(--road-font)}/*!@.dropdown summary*/.dropdown.sc-road-dropdown summary.sc-road-dropdown{display:block;background-color:var(--road-surface);border-radius:0.25rem
|
|
13909
|
+
const dropdownCss = "/*!@:host*/.sc-road-dropdown-h{--margin-top:0.5rem;display:block;width:max-content}/*!@.dropdown*/.dropdown.sc-road-dropdown{position:relative;font-family:var(--road-font)}/*!@.dropdown summary*/.dropdown.sc-road-dropdown summary.sc-road-dropdown{display:block;background-color:var(--road-surface);border-radius:0.25rem}/*!@.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within*/.dropdown.sc-road-dropdown summary.sc-road-dropdown:focus,.dropdown.sc-road-dropdown summary.focus-visible.sc-road-dropdown,.dropdown.sc-road-dropdown summary.sc-road-dropdown:focus-within{background:var(--road-surface-inverse)}/*!@.dropdown summary::-webkit-details-marker*/.dropdown.sc-road-dropdown summary.sc-road-dropdown::-webkit-details-marker{display:none}/*!@.dropdown-button*/.dropdown-button.sc-road-dropdown{position:relative;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}/*!@.dropdown-medium-button*/.dropdown-medium-button.sc-road-dropdown{width:2.5rem;height:2.5rem}/*!@.position-right*/.position-right.sc-road-dropdown{display:flex;justify-content:flex-end}/*!@.bg-white*/.bg-white.sc-road-dropdown{background:var(--road-grey-000)}/*!@.dropdown-button-icon*/.dropdown-button-icon.sc-road-dropdown{width:2.5rem;height:2.5rem}/*!@.dropdown-medium-button .dropdown-button-icon*/.dropdown-medium-button.sc-road-dropdown .dropdown-button-icon.sc-road-dropdown{width:1.75rem;height:1.75rem}/*!@.dropdown[open] .dropdown-menu*/.dropdown[open].sc-road-dropdown .dropdown-menu.sc-road-dropdown{transform:scaleY(1)}/*!@.dropdown[open] .dropdown-menu.direction-top*/.dropdown[open].sc-road-dropdown .dropdown-menu.direction-top.sc-road-dropdown{position:absolute;bottom:0;left:auto;transform:translate3d(0, -56px, 0);will-change:transform}/*!@.dropdown-menu*/.dropdown-menu.sc-road-dropdown{position:absolute;z-index:1;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}/*!@.dropdown-left*/.dropdown-left.sc-road-dropdown{left:0}/*!@.dropdown-right*/.dropdown-right.sc-road-dropdown{right:0}/*!@.dropdown-item*/.dropdown-item.sc-road-dropdown{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none}/*!@.dropdown-item-border*/.dropdown-item-border.sc-road-dropdown{border-color:var(--road-outline-weak);border-bottom:1px solid}/*!@.dropdown-item:hover*/.dropdown-item.sc-road-dropdown:hover{background:var(--road-surface-inverse)}/*!@.dropdown-item.focus-visible*/.dropdown-item.focus-visible.sc-road-dropdown{outline:auto}";
|
|
13910
13910
|
|
|
13911
13911
|
class Dropdown$1 {
|
|
13912
13912
|
constructor(hostRef) {
|
|
@@ -32099,7 +32099,7 @@ class Modal {
|
|
|
32099
32099
|
}; }
|
|
32100
32100
|
}
|
|
32101
32101
|
|
|
32102
|
-
const navbarCss = "/*!@:host*/.sc-road-navbar-h{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline)}@media (max-width: 576px){/*!@:host*/.sc-road-navbar-h{overflow-x:auto}}@media (min-width: 1200px){/*!@:host*/.sc-road-navbar-h{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline)}}/*!@::slotted(.drawer-button-save)*/.sc-road-navbar-s>.drawer-button-save{position:absolute;bottom:0;width:100%}";
|
|
32102
|
+
const navbarCss = "/*!@:host*/.sc-road-navbar-h{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline-weak)}@media (max-width: 576px){/*!@:host*/.sc-road-navbar-h{overflow-x:auto}}@media (min-width: 1200px){/*!@:host*/.sc-road-navbar-h{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline-weak)}}/*!@::slotted(.drawer-button-save)*/.sc-road-navbar-s>.drawer-button-save{position:absolute;bottom:0;width:100%}";
|
|
32103
32103
|
|
|
32104
32104
|
/**
|
|
32105
32105
|
* @slot - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile
|
|
@@ -32230,7 +32230,7 @@ class NavbarItem {
|
|
|
32230
32230
|
}; }
|
|
32231
32231
|
}
|
|
32232
32232
|
|
|
32233
|
-
const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;
|
|
32233
|
+
const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{outline:auto}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
|
|
32234
32234
|
|
|
32235
32235
|
class PlateNumber {
|
|
32236
32236
|
constructor(hostRef) {
|
|
@@ -34368,7 +34368,7 @@ class Row {
|
|
|
34368
34368
|
}; }
|
|
34369
34369
|
}
|
|
34370
34370
|
|
|
34371
|
-
const segmentedButtonCss = "/*!@:host*/.sc-road-segmented-button-h{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.5rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-primary);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-top:1px solid var(--road-primary);border-bottom:1px solid var(--road-primary);border-left:1px solid var(--road-primary);border-radius:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(:first-child)*/.sc-road-segmented-button-h:first-child{border:1px solid var(--road-primary);border-right:0;border-radius:999em 0 0 999em}/*!@:host(:last-child)*/.sc-road-segmented-button-h:last-child{border:1px solid var(--road-primary);border-radius:0 999em 999em 0}/*!@:host(.btn-sm)*/.btn-sm.sc-road-segmented-button-h{height:2rem;font-size:var(--road-button-small)}/*!@:host(.tab-selected)*/.tab-selected.sc-road-segmented-button-h{color:var(--road-primary-contrast);background-color:var(--road-primary)}/*!@:host(.tab-selected:hover)*/.tab-selected.sc-road-segmented-button-h:hover{background-color:var(--road-button-primary-variant)}/*!@:host(:hover)*/.sc-road-segmented-button-h:hover{background:var(--road-primary-90)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-segmented-button-h{background:var(--road-primary-90);outline:
|
|
34371
|
+
const segmentedButtonCss = "/*!@:host*/.sc-road-segmented-button-h{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.5rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-primary);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-top:1px solid var(--road-primary);border-bottom:1px solid var(--road-primary);border-left:1px solid var(--road-primary);border-radius:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}/*!@:host(:first-child)*/.sc-road-segmented-button-h:first-child{border:1px solid var(--road-primary);border-right:0;border-radius:999em 0 0 999em}/*!@:host(:last-child)*/.sc-road-segmented-button-h:last-child{border:1px solid var(--road-primary);border-radius:0 999em 999em 0}/*!@:host(.btn-sm)*/.btn-sm.sc-road-segmented-button-h{height:2rem;font-size:var(--road-button-small)}/*!@:host(.tab-selected)*/.tab-selected.sc-road-segmented-button-h{color:var(--road-primary-contrast);background-color:var(--road-primary)}/*!@:host(.tab-selected:hover)*/.tab-selected.sc-road-segmented-button-h:hover{background-color:var(--road-button-primary-variant)}/*!@:host(:hover)*/.sc-road-segmented-button-h:hover{background:var(--road-primary-90)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-segmented-button-h{background:var(--road-primary-90);outline:auto}/*!@:host(.tab-selected.focus-visible)*/.tab-selected.focus-visible.sc-road-segmented-button-h{background-color:var(--road-button-primary-variant)}/*!@.button-native*/.button-native.sc-road-segmented-button{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;max-height:2.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}";
|
|
34372
34372
|
|
|
34373
34373
|
/**
|
|
34374
34374
|
*
|
|
@@ -34442,7 +34442,7 @@ class SegmentedButton {
|
|
|
34442
34442
|
}; }
|
|
34443
34443
|
}
|
|
34444
34444
|
|
|
34445
|
-
const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;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;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:
|
|
34445
|
+
const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;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;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:\" *\"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}";
|
|
34446
34446
|
|
|
34447
34447
|
class Select {
|
|
34448
34448
|
constructor(hostRef) {
|
|
@@ -36727,7 +36727,7 @@ class TabBar {
|
|
|
36727
36727
|
}; }
|
|
36728
36728
|
}
|
|
36729
36729
|
|
|
36730
|
-
const tabButtonCss = "/*!@:host*/.sc-road-tab-button-h{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}/*!@:host(.tab-secondary)*/.tab-secondary.sc-road-tab-button-h{--tab-underline-selected:var(--road-secondary-600)}/*!@:host(.tab-selected)*/.tab-selected.sc-road-tab-button-h{color:var(--tab-color-selected)}/*!@:host(.tab-selected) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-selected .sc-road-tab-button-s>road-icon{color:var(--tab-color-selected)}/*!@:host(.tab-selected) .button-native::after*/.tab-selected.sc-road-tab-button-h .button-native.sc-road-tab-button::after{background:var(--tab-underline-selected);opacity:1;transform:none}/*!@:host(:hover)*/.sc-road-tab-button-h:hover{background:var(--tab-background-hover)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-tab-button-h{background:var(--tab-background-focused);outline:auto}/*!@.button-native*/.button-native.sc-road-tab-button{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.button-native::after*/.button-native.sc-road-tab-button::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}/*!@.button-inner*/.button-inner.sc-road-tab-button{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}/*!@:host ::slotted(road-icon)*/.sc-road-tab-button-h .sc-road-tab-button-s>road-icon{color:var(--tab-color)}/*!@:host(.tab-layout-icon-start) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-layout-icon-start .sc-road-tab-button-s>road-icon{margin-right:0.5rem}/*!@:host(.tab-layout-icon-top) .button-inner*/.tab-layout-icon-top.sc-road-tab-button-h .button-inner.sc-road-tab-button{flex-direction:column}/*!@:host ::slotted(road-label)*/.sc-road-tab-button-h .sc-road-tab-button-s>road-label{display:-webkit-box;font-size:1rem;-webkit-line-clamp:
|
|
36730
|
+
const tabButtonCss = "/*!@:host*/.sc-road-tab-button-h{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}/*!@:host(.tab-secondary)*/.tab-secondary.sc-road-tab-button-h{--tab-underline-selected:var(--road-secondary-600)}/*!@:host(.tab-selected)*/.tab-selected.sc-road-tab-button-h{color:var(--tab-color-selected)}/*!@:host(.tab-selected) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-selected .sc-road-tab-button-s>road-icon{color:var(--tab-color-selected)}/*!@:host(.tab-selected) .button-native::after*/.tab-selected.sc-road-tab-button-h .button-native.sc-road-tab-button::after{background:var(--tab-underline-selected);opacity:1;transform:none}/*!@:host(:hover)*/.sc-road-tab-button-h:hover{background:var(--tab-background-hover)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-tab-button-h{background:var(--tab-background-focused);outline:auto}/*!@.button-native*/.button-native.sc-road-tab-button{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.button-native::after*/.button-native.sc-road-tab-button::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}/*!@.button-inner*/.button-inner.sc-road-tab-button{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}/*!@:host ::slotted(road-icon)*/.sc-road-tab-button-h .sc-road-tab-button-s>road-icon{color:var(--tab-color)}/*!@:host(.tab-layout-icon-start) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-layout-icon-start .sc-road-tab-button-s>road-icon{margin-right:0.5rem}/*!@:host(.tab-layout-icon-top) .button-inner*/.tab-layout-icon-top.sc-road-tab-button-h .button-inner.sc-road-tab-button{flex-direction:column}/*!@:host ::slotted(road-label)*/.sc-road-tab-button-h .sc-road-tab-button-s>road-label{display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}/*!@:host(.tab-layout-icon-top) ::slotted(road-label)*/.sc-road-tab-button-h.tab-layout-icon-top .sc-road-tab-button-s>road-label{margin-top:0.25rem;font-size:1rem}";
|
|
36731
36731
|
|
|
36732
36732
|
/**
|
|
36733
36733
|
* @slot - Content of the tab-button, it should be road-icon and road-label elements.
|
|
@@ -37165,7 +37165,7 @@ class Text {
|
|
|
37165
37165
|
}; }
|
|
37166
37166
|
}
|
|
37167
37167
|
|
|
37168
|
-
const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant)
|
|
37168
|
+
const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"date\"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"time\"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}";
|
|
37169
37169
|
|
|
37170
37170
|
class Textarea {
|
|
37171
37171
|
constructor(hostRef) {
|
|
@@ -37377,7 +37377,7 @@ class Toast {
|
|
|
37377
37377
|
}; }
|
|
37378
37378
|
}
|
|
37379
37379
|
|
|
37380
|
-
const toolbarCss = "/*!@:host*/.sc-road-toolbar-h{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline)}/*!@.toolbar-container*/.toolbar-container.sc-road-toolbar{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}/*!@.toolbar-title-container*/.toolbar-title-container.sc-road-toolbar{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}/*!@.toolbar-title*/.toolbar-title.sc-road-toolbar{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){/*!@.toolbar-title*/.toolbar-title.sc-road-toolbar{font-size:var(--road-font-size-21);text-align:center}}/*!@.toolbar-content*/.toolbar-content.sc-road-toolbar{flex:1 1 0%;min-width:0;max-width:100%}/*!@.toolbar .logo*/.toolbar.sc-road-toolbar .logo.sc-road-toolbar{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}/*!@.toolbar .app-name*/.toolbar.sc-road-toolbar .app-name.sc-road-toolbar{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}/*!@::slotted([slot=\"start\"])*/.sc-road-toolbar-s>[slot=\"start\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline);border-radius:0}/*!@::slotted([slot=\"end\"]),\n::slotted([slot=\"secondary\"])*/.sc-road-toolbar-s>[slot=\"end\"],.sc-road-toolbar-s>[slot=\"secondary\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline);border-radius:0}/*!@:host(.toolbar-primary)*/.toolbar-primary.sc-road-toolbar-h{color:var(--road-on-header-surface);background:var(--road-header-surface)}/*!@:host(.toolbar-secondary)*/.toolbar-secondary.sc-road-toolbar-h{color:var(--road-on-secondary);background:var(--road-secondary)}";
|
|
37380
|
+
const toolbarCss = "/*!@:host*/.sc-road-toolbar-h{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline-weak)}/*!@.toolbar-container*/.toolbar-container.sc-road-toolbar{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}/*!@.toolbar-title-container*/.toolbar-title-container.sc-road-toolbar{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}/*!@.toolbar-title*/.toolbar-title.sc-road-toolbar{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){/*!@.toolbar-title*/.toolbar-title.sc-road-toolbar{font-size:var(--road-font-size-21);text-align:center}}/*!@.toolbar-content*/.toolbar-content.sc-road-toolbar{flex:1 1 0%;min-width:0;max-width:100%}/*!@.toolbar .logo*/.toolbar.sc-road-toolbar .logo.sc-road-toolbar{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}/*!@.toolbar .app-name*/.toolbar.sc-road-toolbar .app-name.sc-road-toolbar{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}/*!@::slotted([slot=\"start\"])*/.sc-road-toolbar-s>[slot=\"start\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline-weak);border-radius:0}/*!@::slotted([slot=\"end\"]),\n::slotted([slot=\"secondary\"])*/.sc-road-toolbar-s>[slot=\"end\"],.sc-road-toolbar-s>[slot=\"secondary\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline-weak);border-radius:0}/*!@:host(.toolbar-primary)*/.toolbar-primary.sc-road-toolbar-h{color:var(--road-on-header-surface);background:var(--road-header-surface)}/*!@:host(.toolbar-secondary)*/.toolbar-secondary.sc-road-toolbar-h{color:var(--road-on-secondary);background:var(--road-secondary)}";
|
|
37381
37381
|
|
|
37382
37382
|
/**
|
|
37383
37383
|
*
|
|
@@ -37455,7 +37455,7 @@ class ToolbarTitle {
|
|
|
37455
37455
|
}; }
|
|
37456
37456
|
}
|
|
37457
37457
|
|
|
37458
|
-
const tooltipCss = "/*!@:host*/.sc-road-tooltip-h{--max-width:
|
|
37458
|
+
const tooltipCss = "/*!@:host*/.sc-road-tooltip-h{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}/*!@:host(:hover)*/.sc-road-tooltip-h:hover{cursor:pointer}/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:none}@media (min-width: 1200px){/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:block}}/*!@.tooltip*/.tooltip.sc-road-tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}/*!@:host([contentalign=\"left\"]) .tooltip*/[contentalign=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{text-align:left}/*!@.tooltip.tooltip-text-left::after*/.tooltip.tooltip-text-left.sc-road-tooltip::after{text-align:left}/*!@.tooltip-open*/.tooltip-open.sc-road-tooltip{opacity:1}/*!@:host([data-tooltip-position=\"top\"]) .tooltip*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}/*!@:host([data-tooltip-position=\"top\"]) .tooltip-open*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-100%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:0%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip-open*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip-open*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:100%;transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip-open*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-103%) translateY(-55%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip-open*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-50%) translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip-open*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-4%) translateY(-55%)}";
|
|
37459
37459
|
|
|
37460
37460
|
/**
|
|
37461
37461
|
* @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as r,h as e,H as i,a as o}from"./p-f3d586b3.js";const a=":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.5rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-primary);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-top:1px solid var(--road-primary);border-bottom:1px solid var(--road-primary);border-left:1px solid var(--road-primary);border-radius:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:first-child){border:1px solid var(--road-primary);border-right:0;border-radius:999em 0 0 999em}:host(:last-child){border:1px solid var(--road-primary);border-radius:0 999em 999em 0}:host(.btn-sm){height:2rem;font-size:var(--road-button-small)}:host(.tab-selected){color:var(--road-primary-contrast);background-color:var(--road-primary)}:host(.tab-selected:hover){background-color:var(--road-button-primary-variant)}:host(:hover){background:var(--road-primary-90)}:host(.focus-visible){background:var(--road-primary-90);outline:0}:host(.tab-selected.focus-visible){background-color:var(--road-button-primary-variant)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;max-height:2.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}";const n=class{constructor(e){t(this,e);this.roadsegmentedbuttonclick=r(this,"roadsegmentedbuttonclick",7);this.roadSegmentedButtonClick=r(this,"roadSegmentedButtonClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.size="md";this.selected=false;this.tab=undefined}onButtonBarChanged(t){const r=t.target;const e=this.el.parentElement;if(t.composedPath&&t.composedPath().includes(e)||r&&r.contains(this.el)){this.selected=this.tab===t.detail.tab}}selectTab(t){if(this.tab!==undefined){this.roadsegmentedbuttonclick.emit({tab:this.tab,selected:this.selected});this.roadSegmentedButtonClick.emit({tab:this.tab,selected:this.selected});t.preventDefault()}}get tabIndex(){const t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0}render(){const{tabIndex:t,selected:r,tab:o}=this;const a=this.size!==undefined?`btn-${this.size}`:"";return e(i,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:t,"aria-selected":r?"true":null,id:o!==undefined?`tab-button-${o}`:null,class:{"tab-selected":r,[`${a}`]:true}},e("span",{tabIndex:-1,class:"button-native",part:"native","aria-hidden":"true"},e("slot",null)))}get el(){return o(this)}};n.style=a;export{n as road_segmented_button};
|
|
2
|
-
//# sourceMappingURL=p-08b0be1b.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["segmentedButtonCss","SegmentedButton","this","onKeyUp","ev","key","selectTab","onClick","onButtonBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadsegmentedbuttonclick","emit","roadSegmentedButtonClick","preventDefault","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","sizeClass","size","h","Host","onKeyup","role","tabindex","id","class","part"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/*\n * Tab button\n */\n\n\n/* BUTTON\n -------------------- */\n\n\n:host {\n --border-radius: 0.25rem;\n --font-size: var(--road-button-medium);\n --margin-bottom: 1rem;\n --padding-start: 1.5rem;\n --padding-end: 1.5rem;\n box-sizing: border-box;\n flex: 1;\n align-items: center;\n justify-content: center;\n max-height: 2.5rem;\n font-size: var(--road-button-medium);\n font-weight: 700;\n color: var(--road-primary);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--road-surface);\n border-top: 1px solid var(--road-primary);\n border-bottom: 1px solid var(--road-primary);\n border-left: 1px solid var(--road-primary);\n border-radius: 0;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n\n:host(:first-child){\n border: 1px solid var(--road-primary);\n border-right: 0;\n border-radius: 999em 0 0 999em;\n}\n\n:host(:last-child){\n border: 1px solid var(--road-primary);\n border-radius: 0 999em 999em 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n height: 2rem;\n font-size: var(--road-button-small);\n}\n\n/**\n * Active state\n */\n\n:host(.tab-selected) {\n color: var(--road-primary-contrast);\n background-color: var(--road-primary);\n}\n\n:host(.tab-selected:hover) {\n background-color: var(--road-button-primary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n background: var(--road-primary-90);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\n background: var(--road-primary-90);\n outline: 0;\n}\n\n:host(.tab-selected.focus-visible){\n background-color: var(--road-button-primary-variant);\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 max-height: 2.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\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 -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n tag: 'road-segmented-button',\n styleUrl: 'segmented-button.css',\n shadow: true,\n})\nexport class SegmentedButton {\n\n @Element() el!: HTMLRoadSegmentedButtonElement;\n\n /**\n * The Segmented buttons size.\n */\n @Prop() size?: 'sm' | 'md' = 'md';\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 */\n @Prop() tab?: string;\n\n /**\n * Emitted when the tab bar is clicked\n * @internal\n */\n @Event() roadsegmentedbuttonclick!: EventEmitter;\n /** @internal */\n @Event() roadSegmentedButtonClick!: EventEmitter;\n\n @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n onButtonBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event | KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadsegmentedbuttonclick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n this.roadSegmentedButtonClick.emit({\n tab: this.tab,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\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 { tabIndex, selected, tab } = this;\n\n const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n [`${sizeClass}`]: true,\n }}\n >\n <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n <slot/>\n </span>\n </Host>\n );\n }\n}"],"mappings":"gEAAA,MAAMA,EAAqB,89D,MCYdC,EAAe,M,+JA+DlBC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,UA/DU,K,cAKM,M,mBAiBpC,kBAAAI,CAAmBJ,GACjB,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,yBAAyBC,KAAK,CACjCJ,IAAKhB,KAAKgB,IACVD,SAAUf,KAAKe,WAEjBf,KAAKqB,yBAAyBD,KAAK,CACjCJ,IAAKhB,KAAKgB,IACVD,SAAUf,KAAKe,WAGjBb,EAAGoB,gB,EAIP,YAAYC,GACV,MAAMC,EAAcxB,KAAKU,GAAGe,aAAa,YAEzC,GAAID,EAAa,CACf,OAAOxB,KAAKU,GAAGgB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAMJ,SAAEA,EAAQR,SAAEA,EAAQC,IAAEA,GAAQhB,KAEpC,MAAM4B,EAAY5B,KAAK6B,OAASX,UAAY,OAAOlB,KAAK6B,OAAS,GAGjE,OACEC,EAACC,EAAI,CACH1B,QAASL,KAAKK,QACd2B,QAAShC,KAAKC,QACdgC,KAAK,MACLC,SAAUX,EAAQ,gBACHR,EAAW,OAAS,KACnCoB,GAAInB,IAAQE,UAAY,cAAcF,IAAQ,KAC9CoB,MAAO,CACL,eAAgBrB,EAChB,CAAC,GAAGa,KAAc,OAGpBE,EAAA,QAAMP,UAAW,EAAGa,MAAM,gBAAgBC,KAAK,SAAQ,cAAa,QAChEP,EAAA,c"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as r,h as t}from"./p-f3d586b3.js";import{l as a}from"./p-ac7a8bca.js";const n=".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;outline:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{border-color:var(--road-input-outline-variant);outline:0}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";const o=class{constructor(t){e(this,t);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.countries=[{country:"FR",letter:"F",placeholder:"AT-857-YY"},{country:"BE",letter:"B",placeholder:"1-AAA-001"},{country:"IT",letter:"I",placeholder:"AT 814TX"},{country:"ES",letter:"E",placeholder:"9512 HVY"},{country:"PT",letter:"P",placeholder:"13 24 PZ"},{country:"PL",letter:"PL",placeholder:"GD 921KF"},{country:"AT",letter:"A",placeholder:"FF 10 FF"},{country:"DE",letter:"D",placeholder:"RA KL 8136"}];this.onInput=e=>{const r=e.target;if(r){r.value=r.value.toUpperCase()||""}this.roadinput.emit(e);this.roadInput.emit(e)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.country="FR";this.disabled=false;this.placeholder=undefined;this.readonly=false;this.value="";this.motorbike=undefined}valueChanged(){this.roadchange.emit({value:this.value==null?this.value:this.value.toString()});this.roadChange.emit({value:this.value==null?this.value:this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const e=this.getValue();const r=this.motorbike?"motorbike-plate":"";return t("road-input-group",{class:`plate-number plate-number-${this.country.toLowerCase()} ${r}`},t("label",{slot:"prepend",class:"input-group-prepend"},t("div",{class:"plate-number-start"},t("road-icon",{class:"plate-number-icon",icon:a}),t("div",{class:"plate-number-location","aria-label":this.country,role:"img"},this.countries.filter((e=>e.country===this.country))[0].letter))),this.motorbike?t("textarea",{class:"form-control plate-number-input mb-0",disabled:this.disabled,placeholder:this.placeholder!=null?this.placeholder:this.countries.filter((e=>e.country===this.country))[0].placeholder,readOnly:this.readonly,maxlength:"9",rows:2,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}):t("input",{class:"plate-number-input mb-0",disabled:this.disabled,placeholder:this.placeholder!=null?this.placeholder:this.countries.filter((e=>e.country===this.country))[0].placeholder,readOnly:this.readonly,value:e,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),t("label",{slot:"append",class:"input-group-append"},t("div",{class:"plate-number-end"})))}static get watchers(){return{value:["valueChanged"]}}};o.style=n;export{o as road_plate_number};
|
|
2
|
-
//# sourceMappingURL=p-0c4ae774.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as o,H as i}from"./p-f3d586b3.js";import"./p-1ccae339.js";const a=":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline)}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}";const r=class{constructor(o){t(this,o);this.roadnavbarchanged=e(this,"roadnavbarchanged",7);this.roadNavbarChanged=e(this,"roadNavbarChanged",7);this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){return o(i,{role:"menubar"},o("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};r.style=a;export{r as road_navbar};
|
|
2
|
-
//# sourceMappingURL=p-14ecc91e.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["navbarCss","Navbar","selectedTabChanged","this","selectedTab","undefined","roadnavbarchanged","emit","tab","roadNavbarChanged","onNavbarChanged","ev","detail","componentWillLoad","render","h","Host","role"],"sources":["src/components/navbar/navbar.css?tag=road-navbar&encapsulation=shadow","src/components/navbar/navbar.tsx"],"sourcesContent":["/*\n * Navbar\n *\n */\n\n/**\n * @prop --z-index: The z-index of the Navbar.\n */\n\n:host {\n --z-index: 3;\n\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: var(--z-index);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n height: 5.125rem;\n padding-left: 0;\n margin: 0;\n text-align: center;\n user-select: none;\n background-color: var(--road-surface);\n border-top: 1px solid var(--road-outline);\n}\n\n@media (max-width: 576px) {\n\n :host {\n overflow-x: auto;\n }\n}\n\n@media (min-width: 1200px) {\n\n :host {\n bottom: auto;\n flex-direction: column;\n width: 104px;\n height: 100%;\n border-top: 0;\n border-right: 1px solid var(--road-outline);\n }\n}\n\n/**\n * Button save drawer.\n */\n\n::slotted(.drawer-button-save) {\n position: absolute;\n bottom: 0;\n width: 100%;\n}\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n tag: 'road-navbar',\n styleUrl: 'navbar.css',\n shadow: true,\n})\nexport class Navbar {\n\n /**\n * The selected tab component\n */\n @Prop() selectedTab?: string;\n @Watch('selectedTab')\n selectedTabChanged() {\n if (this.selectedTab !== undefined) {\n this.roadnavbarchanged.emit({\n tab: this.selectedTab,\n });\n this.roadNavbarChanged.emit({\n tab: this.selectedTab,\n });\n }\n }\n\n /** @internal */\n @Event() roadnavbarchanged!: EventEmitter;\n /** @internal */\n @Event() roadNavbarChanged!: EventEmitter;\n\n @Listen('roadNavbarItemClick')\n @Listen('roadnavbaritemclick')\n onNavbarChanged(ev: CustomEvent) {\n this.selectedTab = ev.detail.tab;\n }\n\n componentWillLoad() {\n this.selectedTabChanged();\n }\n\n render() {\n return (\n <Host\n role=\"menubar\"\n >\n <slot/>\n </Host>\n );\n }\n\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,wkB,MCYLC,EAAM,M,8JAOjB,kBAAAC,GACE,GAAIC,KAAKC,cAAgBC,UAAW,CAClCF,KAAKG,kBAAkBC,KAAK,CAC1BC,IAAKL,KAAKC,cAEZD,KAAKM,kBAAkBF,KAAK,CAC1BC,IAAKL,KAAKC,a,EAYhB,eAAAM,CAAgBC,GACdR,KAAKC,YAAcO,EAAGC,OAAOJ,G,CAG/B,iBAAAK,GACEV,KAAKD,oB,CAGP,MAAAY,GACE,OACEC,EAACC,EAAI,CACHC,KAAK,WAELF,EAAA,a"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as n,a as o}from"./p-f3d586b3.js";const r=':host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:"";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;font-size:1rem;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}';const a=class{constructor(i){t(this,i);this.roadtabbuttonclick=e(this,"roadtabbuttonclick",7);this.roadTabButtonClick=e(this,"roadTabButtonClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.download=undefined;this.href=undefined;this.rel=undefined;this.layout="icon-start";this.selected=false;this.tab=undefined;this.target=undefined}onTabBarChanged(t){const e=t.target;const i=this.el.parentElement;if(t.composedPath&&t.composedPath().includes(i)||e&&e.contains(this.el)){this.selected=this.tab===t.detail.tab}}selectTab(t){if(this.tab!==undefined){this.roadtabbuttonclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadTabButtonClick.emit({tab:this.tab,href:this.href,selected:this.selected});t.preventDefault()}}get hasLabel(){return!!this.el.querySelector("road-label")}get hasIcon(){return!!this.el.querySelector("road-icon")}get tabIndex(){const t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0}render(){const{hasIcon:t,hasLabel:e,tabIndex:o,href:r,rel:a,target:s,layout:l,selected:h,tab:d}=this;const b={download:this.download,href:r,rel:a,target:s};return i(n,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:o,"aria-selected":h?"true":null,id:d!==undefined?`tab-button-${d}`:null,class:{"tab-selected":h,"tab-has-label":e,"tab-has-icon":t,"tab-has-label-only":e&&!t,"tab-has-icon-only":t&&!e,[`tab-layout-${l}`]:true}},i("a",Object.assign({},b,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return o(this)}};a.style=r;export{a as road_tab_button};
|
|
2
|
-
//# sourceMappingURL=p-172d4877.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["tabButtonCss","TabButton","this","onKeyUp","ev","key","selectTab","onClick","onTabBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadtabbuttonclick","emit","href","roadTabButtonClick","preventDefault","hasLabel","querySelector","hasIcon","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","rel","layout","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","part"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\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 min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\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 -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: scaleX(0);\n transform-origin: center;\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: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n font-size: 1rem;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot - Content of the tab-button, 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-tab-button',\n styleUrl: 'tab-button.css',\n shadow: true,\n})\nexport class TabButton {\n\n @Element() el!: HTMLRoadTabButtonElement;\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 * Set the layout of the text and icon in the tab bar.\n * It defaults to `'icon-start'`.\n */\n @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\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 */\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() roadtabbuttonclick!: EventEmitter;\n /** @internal */\n @Event() roadTabButtonClick!: EventEmitter;\n\n @Listen('roadTabBarChanged', { target: 'window' })\n @Listen('roadTabbarchanged', { target: 'window' })\n onTabBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event | KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadtabbuttonclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadTabButtonClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get hasLabel() {\n return !!this.el.querySelector('road-label');\n }\n\n private get hasIcon() {\n return !!this.el.querySelector('road-icon');\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = 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={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n 'tab-has-label': hasLabel,\n 'tab-has-icon': hasIcon,\n 'tab-has-label-only': hasLabel && !hasIcon,\n 'tab-has-icon-only': hasIcon && !hasLabel,\n [`tab-layout-${layout}`]: true,\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"],"mappings":"gEAAA,MAAMA,EAAe,igE,MCaRC,EAAS,M,uIAqGZC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,2EAhFyB,a,cAKT,M,yCAwBpC,eAAAI,CAAgBJ,GACd,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,mBAAmBC,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAEjBf,KAAKsB,mBAAmBF,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAGjBb,EAAGqB,gB,EAIP,YAAYC,GACV,QAASxB,KAAKU,GAAGe,cAAc,a,CAGjC,WAAYC,GACV,QAAS1B,KAAKU,GAAGe,cAAc,Y,CAGjC,YAAYE,GACV,MAAMC,EAAc5B,KAAKU,GAAGmB,aAAa,YAEzC,GAAID,EAAa,CACf,OAAO5B,KAAKU,GAAGoB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAML,QAAEA,EAAOF,SAAEA,EAAQG,SAAEA,EAAQN,KAAEA,EAAIW,IAAEA,EAAGxB,OAAEA,EAAMyB,OAAEA,EAAMlB,SAAEA,EAAQC,IAAEA,GAAQhB,KAClF,MAAMkC,EAAQ,CACZC,SAAUnC,KAAKmC,SACfd,OACAW,MACAxB,UAGF,OACE4B,EAACC,EAAI,CACHhC,QAASL,KAAKK,QACdiC,QAAStC,KAAKC,QACdsC,KAAK,MACLC,SAAUb,EAAQ,gBACHZ,EAAW,OAAS,KACnC0B,GAAIzB,IAAQE,UAAY,cAAcF,IAAQ,KAC9C0B,MAAO,CACL,eAAgB3B,EAChB,gBAAiBS,EACjB,eAAgBE,EAChB,qBAAsBF,IAAaE,EACnC,oBAAqBA,IAAYF,EACjC,CAAC,cAAcS,KAAW,OAG5BG,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEP,UAAW,EAAGe,MAAM,gBAAgBG,KAAK,WACrDT,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as s,h as t,H as l}from"./p-f3d586b3.js";const r='.sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;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;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:" *"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type="date"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type="time"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type="date"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type="time"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}';const c=class{constructor(t){e(this,t);this.roadchange=s(this,"roadchange",7);this.roadChange=s(this,"roadChange",7);this.roadfocus=s(this,"roadfocus",7);this.roadFocus=s(this,"roadFocus",7);this.roadblur=s(this,"roadblur",7);this.roadBlur=s(this,"roadBlur",7);this.onChange=e=>{const s=e.target;if(s){this.value=s.value||null}};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.selectId=`road-select-${a++}`;this.options=[];this.autofocus=false;this.disabled=false;this.name=this.selectId;this.required=false;this.size=0;this.sizes="xl";this.label=`${this.selectId}-label`;this.error=undefined;this.value=undefined}valueChanged(){if(this.value===null){this.resetSelection()}else{this.addSelected()}this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}componentWillLoad(){if(this.value===null){this.resetSelection()}else{this.addSelected()}}addSelected(){this.options.forEach((e=>e.selected=false));const e=this.options.find((e=>e.value==this.value));if(e){e.selected=true}}resetSelection(){this.value=null;this.options.forEach((e=>e.selected=false))}render(){const e=this.selectId+"-label";const s=this.value&&this.value!==""?"has-value":"";const r=this.error!==undefined&&this.error!==""?"is-invalid":"";return t(l,{class:this.sizes&&`select-${this.sizes}`},t("select",{class:`form-select ${s} ${r}`,id:this.selectId,"aria-disabled":this.disabled?"true":null,autoFocus:this.autofocus,disabled:this.disabled,name:this.name,required:this.required,size:this.size,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur},t("option",{selected:!this.value,disabled:true,hidden:true,style:{display:"none"},value:""}),this.options&&this.options.map((e=>t("option",{value:e.value,selected:this.value!==null&&e.value==this.value},e.label)))),t("label",{class:"form-select-label",id:e,htmlFor:this.selectId},this.label),this.error&&this.error!==""&&t("p",{class:"invalid-feedback"},this.error))}static get watchers(){return{value:["valueChanged"]}}};let a=0;c.style=r;export{c as road_select};
|
|
2
|
-
//# sourceMappingURL=p-38099006.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["selectCss","Select","this","onChange","ev","select","target","value","onBlur","roadblur","emit","roadBlur","onFocus","roadfocus","roadFocus","selectIds","selectId","valueChanged","resetSelection","addSelected","roadchange","roadChange","componentWillLoad","options","forEach","option","selected","selectedOption","find","render","labelId","hasValueClass","isInvalidClass","error","undefined","h","Host","class","sizes","id","disabled","autoFocus","autofocus","name","required","size","hidden","style","display","map","label","htmlFor"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: auto;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n.form-select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-select:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n background-color: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n color: var(--road-on-danger-surface);\n content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n min-height: 3.5rem;\n padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n min-height: 2.5rem;\n padding: 1rem 1rem 0;\n font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-select',\n styleUrl: 'select.css',\n scoped: true,\n})\nexport class Select {\n\n /**\n * The id of select\n */\n @Prop() selectId: string = `road-select-${selectIds++}`;\n\n /**\n * List of options of the select\n */\n @Prop() options: Array<{\n value: string | number;\n label: string;\n selected?: boolean;\n }> = [];\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n * this attribute represents the number of rows in the list that should be visible at one time.\n */\n @Prop() size: number = 0;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.selectId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * the value of the select.\n */\n @Prop({ mutable: true }) value?: any | null;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null;\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null;\n }>;\n\n /**\n * Emitted when the select has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n if (this.value === null) {\n this.resetSelection();\n } else {\n this.addSelected();\n }\n\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n }\n\n componentWillLoad() {\n if (this.value === null) {\n this.resetSelection();\n } else {\n this.addSelected();\n }\n }\n\n addSelected() {\n // Désélection de toutes les options\n this.options.forEach(option => option.selected = false);\n\n // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n const selectedOption = this.options.find(option => option.value == this.value);\n if (selectedOption) {\n selectedOption.selected = true;\n }\n }\n\n resetSelection() {\n this.value = null;\n this.options.forEach(option => option.selected = false);\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement | null;\n if (select) {\n this.value = select.value || null;\n }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select ${hasValueClass} ${isInvalidClass}`}\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <option\n selected={!this.value} // sélectionné si this.value est null ou vide\n disabled\n hidden\n style={{ display: 'none' }}\n value=\"\"\n >\n </option>\n {this.options && this.options.map(option => (\n <option\n value={option.value}\n selected={this.value !== null && option.value == this.value}\n >\n {option.label}\n </option>\n ))}\n </select>\n <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n\n}\n\nlet selectIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAY,8vI,MCOLC,EAAM,M,uPA+HTC,KAAAC,SAAYC,IAClB,MAAMC,EAASD,EAAGE,OAClB,GAAID,EAAQ,CACVH,KAAKK,MAAQF,EAAOE,OAAS,I,GAIzBL,KAAAM,OAAS,KACfN,KAAKO,SAASC,OACdR,KAAKS,SAASD,MAAM,EAGdR,KAAAU,QAAU,KAChBV,KAAKW,UAAUH,OACfR,KAAKY,UAAUJ,MAAM,E,cAxII,eAAeK,M,aASrC,G,eAKwB,M,cAKD,M,UAKLb,KAAKc,S,cAKA,M,UAML,E,WAKa,K,WAKZ,GAAGd,KAAKc,iB,0CAsChC,YAAAC,GACE,GAAIf,KAAKK,QAAU,KAAM,CACvBL,KAAKgB,gB,KACA,CACLhB,KAAKiB,a,CAGPjB,KAAKkB,WAAWV,KAAK,CACnBH,MAAOL,KAAKK,QAEdL,KAAKmB,WAAWX,KAAK,CACnBH,MAAOL,KAAKK,O,CAIhB,iBAAAe,GACE,GAAIpB,KAAKK,QAAU,KAAM,CACvBL,KAAKgB,gB,KACA,CACLhB,KAAKiB,a,EAIT,WAAAA,GAEEjB,KAAKqB,QAAQC,SAAQC,GAAUA,EAAOC,SAAW,QAGjD,MAAMC,EAAiBzB,KAAKqB,QAAQK,MAAKH,GAAUA,EAAOlB,OAASL,KAAKK,QACxE,GAAIoB,EAAgB,CAClBA,EAAeD,SAAW,I,EAI9B,cAAAR,GACEhB,KAAKK,MAAQ,KACbL,KAAKqB,QAAQC,SAAQC,GAAUA,EAAOC,SAAW,O,CAoBnD,MAAAG,GACE,MAAMC,EAAU5B,KAAKc,SAAW,SAChC,MAAMe,EAAgB7B,KAAKK,OAASL,KAAKK,QAAU,GAAK,YAAc,GACtE,MAAMyB,EAAiB9B,KAAK+B,QAAUC,WAAahC,KAAK+B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAACC,MAAOnC,KAAKoC,OAAS,UAAUpC,KAAKoC,SACxCH,EAAA,UACAE,MAAO,eAAeN,KAAiBC,IACvCO,GAAIrC,KAAKc,SAAQ,gBACFd,KAAKsC,SAAW,OAAS,KACxCC,UAAWvC,KAAKwC,UAChBF,SAAUtC,KAAKsC,SACfG,KAAMzC,KAAKyC,KACXC,SAAU1C,KAAK0C,SACfC,KAAM3C,KAAK2C,KACX1C,SAAUD,KAAKC,SACfS,QAASV,KAAKU,QACdJ,OAAQN,KAAKM,QAEb2B,EAAA,UACET,UAAWxB,KAAKK,MAChBiC,SAAQ,KACRM,OAAM,KACNC,MAAO,CAAEC,QAAS,QAClBzC,MAAM,KAGPL,KAAKqB,SAAWrB,KAAKqB,QAAQ0B,KAAIxB,GAChCU,EAAA,UACE5B,MAAOkB,EAAOlB,MACdmB,SAAUxB,KAAKK,QAAU,MAAQkB,EAAOlB,OAASL,KAAKK,OAErDkB,EAAOyB,UAIZf,EAAA,SAAOE,MAAM,oBAAoBE,GAAIT,EAASqB,QAASjD,KAAKc,UAAWd,KAAKgD,OAC3EhD,KAAK+B,OAAS/B,KAAK+B,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoBnC,KAAK+B,O,wDAO9E,IAAIlB,EAAY,E"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as o,h as r}from"./p-f3d586b3.js";import{n as a}from"./p-ac7a8bca.js";import"./p-1ccae339.js";const i=':host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--icon-color:var(--road-icon);--max-height:none;display:block}:host(.focus-visible){border:1px solid var(--road-primary)}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--road-spacing-04) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:"";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot="header"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}';const n=class{constructor(r){o(this,r);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.isLight=false;this.isLightSeparator=false;this.isSmall=false}render(){const o=this.isLight?"accordion accordion-light":"accordion";const i=this.isLight?"accordion-header accordion-light-header":"accordion-header";const n=this.isLight?"accordion-content accordion-light-content":"accordion-content";const e=this.isLightSeparator?"accordion accordion-light accordion-light--border":"accordion";const c=this.isSmall?"accordion accordion-light accordion-light--small":"accordion";return r("details",{class:`${o} ${c} ${e}`,open:this.isOpen},r("summary",{class:"accordion-trigger","aria-expanded":`${this.isOpen}`,tabindex:"0",role:"button",onClick:this.onClick},r("div",{class:i},r("slot",{name:"icon-left"}),r("slot",{name:"header"}),r("road-icon",{class:"accordion-arrow",icon:a}))),r("div",{class:n},r("slot",null)))}};n.style=i;export{n as road_accordion};
|
|
2
|
-
//# sourceMappingURL=p-3c2da24f.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["accordionCss","Accordion","this","onClick","isOpen","render","accordionLight","isLight","accordionLightHeader","accordionLightContent","accordionLightSeparator","isLightSeparator","accordionSmall","isSmall","h","class","open","tabindex","role","name","icon","navigationChevron"],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/*\n * Accordion\n *\n * For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Accordion\n * - Button\n * - Content\n */\n\n/**\n * @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n */\n\n:host {\n --accordion-header-border: 1px;\n --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n --content-padding: var(--road-spacing-04) 0 0;\n --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n --icon-color: var(--road-icon);\n --max-height: none;\n\n display: block;\n}\n\n:host(.focus-visible){\n border: 1px solid var(--road-primary);\n}\n\n/* ACCORDION\n -------------------- */\n\n.accordion {\n --max-height: none;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-body-small);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid;\n border-color: var(--road-outline-weak);\n border-radius: 0.25rem;\n transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n background: none;\n border: 0;\n}\n\n/**\n * Open state\n */\n\n.accordion[open] {\n max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n padding: var(--content-padding);\n margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n display: none;\n}\n\n/* BUTTON\n -------------------- */\n\n.accordion-trigger {\n box-sizing: border-box;\n display: block;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */\n display: none;\n}\n\n/**\n * Focus on Tab\n */\n\n.accordion-trigger.focus-visible {\n border-color: var(--road-primary);\n}\n\n/**\n * Active state\n */\n\n.accordion-trigger:active {\n background: var(--road-surface-inverse);\n}\n\n/**\n * .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n */\n\n.accordion-header {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: var(--header-padding);\n font-size: var(--road-body-medium);\n font-weight: 700;\n cursor: pointer;\n user-select: none;\n}\n\n.accordion-light-header {\n position: relative;\n padding: var(--road-spacing-04) 0;\n font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n position: absolute;\n bottom: 1px;\n width: 98.3%;\n height: 1px;\n content: \"\";\n background: var(--road-outline-weak);\n}\n\n/**\n * Custom arrow\n */\n\n.accordion-arrow {\n margin-left: auto;\n color: var(--icon-color);\n transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n display: flex;\n align-items: center;\n}\n\n:host(.accordion-icon-left){\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 1rem;\n}\n\n/* CONTENT\n -------------------- */\n\n.accordion-content {\n padding: 0 0.5rem;\n margin: 0 1rem;\n overflow: hidden;\n font-size: var(--road-body-medium);\n border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n */\n\n@Component({\n tag: 'road-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class Accordion {\n\n /**\n * Set to `true` to open the accordion and to `false` to close it.\n */\n @Prop({ mutable: true }) isOpen : boolean = false;\n\n /**\n * Set to `true` to remove border the accordion and to `false` to add border it.\n */\n @Prop() isLight : boolean = false;\n\n /**\n * Set to `true` to add a border in the header and the content only for the light accordion.\n */\n @Prop() isLightSeparator : boolean = false;\n\n /**\n * Set to `true` to add the small version only for the light accordion.\n */\n @Prop() isSmall : boolean = false;\n\n /**\n * Toggle the display when clicking header\n */\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n render() {\n\n const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n return (\n <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={accordionLightHeader}>\n <slot name=\"icon-left\"/>\n <slot name=\"header\"/>\n <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n </div>\n </summary>\n <div class={accordionLightContent}>\n <slot/>\n </div>\n </details>\n );\n }\n}"],"mappings":"uGAAA,MAAMA,EAAe,ipF,MCiBRC,EAAS,M,yBAyBZC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YArBgB,M,aAKf,M,sBAKU,M,aAKT,K,CAS9B,MAAAC,GAEE,MAAMC,EAAiBJ,KAAKK,QAAU,4BAA8B,YACpE,MAAMC,EAAuBN,KAAKK,QAAU,0CAA4C,mBACxF,MAAME,EAAwBP,KAAKK,QAAU,4CAA8C,oBAC3F,MAAMG,EAA0BR,KAAKS,iBAAmB,oDAAsD,YAC9G,MAAMC,EAAiBV,KAAKW,QAAU,mDAAqD,YAC3F,OACEC,EAAA,WAASC,MAAO,GAAGT,KAAkBM,KAAkBF,IAA2BM,KAAMd,KAAKE,QAC3FU,EAAA,WAASC,MAAM,oBAAmB,gBAAgB,GAAGb,KAAKE,SAAUa,SAAS,IAAIC,KAAK,SAASf,QAASD,KAAKC,SAC3GW,EAAA,OAAKC,MAAOP,GACVM,EAAA,QAAMK,KAAK,cACXL,EAAA,QAAMK,KAAK,WACXL,EAAA,aAAWC,MAAM,kBAAkBK,KAAMC,MAG7CP,EAAA,OAAKC,MAAON,GACVK,EAAA,c"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,c as r,h as t,H as e}from"./p-f3d586b3.js";const o='.sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="date"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="time"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}';const s=class{constructor(t){a(this,t);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.onInput=a=>{const r=a.target;if(r){this.value=r.value||""}this.roadinput.emit(a);this.roadInput.emit(a)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.textareaId=`road-textarea-${i++}`;this.autocapitalize="none";this.autofocus=false;this.disabled=false;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.textareaId;this.placeholder=undefined;this.sizes="lg";this.readonly=false;this.required=false;this.spellcheck=false;this.resize=true;this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.value="";this.label=`${this.textareaId}-label`;this.error=undefined;this.helper=undefined}valueChanged(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}getValue(){return this.value||""}render(){const a=this.getValue();const r=this.textareaId+"-label";const o=this.value!==""?"has-value":"";const s=this.resize==false?"no-resize":"";const i=this.error!==undefined&&this.error!==""?"is-invalid":"";return t(e,{"aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},t("textarea",{class:`form-control textarea-control ${o} ${s} ${i}`,id:this.textareaId,"aria-disabled":this.disabled?"true":null,"aria-labelledby":r,disabled:this.disabled,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,value:a,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),t("label",{class:"form-label",id:r,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&t("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&t("p",{class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let i=0;s.style=o;export{s as road_textarea};
|
|
2
|
-
//# sourceMappingURL=p-4001ab77.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["textareaCss","Textarea","this","onInput","ev","input","target","value","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","textareaIds","textareaId","valueChanged","roadchange","roadChange","getValue","render","labelId","hasValueClass","noResizeClass","resize","isInvalidClass","error","undefined","h","Host","disabled","class","sizes","id","autoCapitalize","autocapitalize","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","name","placeholder","readOnly","readonly","required","spellcheck","cols","rows","wrap","htmlFor","label","helper"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /**\n * The id of textarea\n */\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n */\n @Prop() autocapitalize: string = 'none';\n\n /**\n * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the textarea.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.textareaId;\n\n /**\n * Instructional text that shows before the textarea has a value.\n */\n @Prop() placeholder?: string;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * If `false`, to disabled resize.\n */\n @Prop() resize: boolean = true;\n\n /**\n * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n */\n @Prop() cols?: number;\n\n /**\n * The number of rows of the control.\n */\n @Prop() rows?: number;\n\n /**\n * Indicates how the control wraps text.\n */\n @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n /**\n * The value of the textarea.\n */\n @Prop({ mutable: true }) value?: string | null = '';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.textareaId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Update the native textarea element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /** @internal */\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the textarea loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,+0G,MCOPC,EAAQ,M,iUAgKXC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9BL,KAAKM,UAAUC,KAAKL,GACpBF,KAAKQ,UAAUD,KAAKL,EAAoB,EAGlCF,KAAAS,OAAS,KACfT,KAAKU,SAASH,OACdP,KAAKW,SAASJ,MAAM,EAGdP,KAAAY,QAAU,KAChBZ,KAAKa,UAAUN,OACfP,KAAKc,UAAUP,MAAM,E,gBA3KM,iBAAiBQ,M,oBAKb,O,eAKJ,M,cAKD,M,iHA4BLf,KAAKgB,W,sCAUE,K,cAKF,M,cAKA,M,gBAKE,M,YAKF,K,uEAoBqB,G,WAKzB,GAAGhB,KAAKgB,mB,2CAgBtB,YAAAC,GACRjB,KAAKkB,WAAWX,KAAK,CAAEF,MAAOL,KAAKK,QACnCL,KAAKmB,WAAWZ,KAAK,CAAEF,MAAOL,KAAKK,O,CAmC7B,QAAAe,GACN,OAAOpB,KAAKK,OAAS,E,CAsBvB,MAAAgB,GACE,MAAMhB,EAAQL,KAAKoB,WACnB,MAAME,EAAUtB,KAAKgB,WAAa,SAClC,MAAMO,EAAgBvB,KAAKK,QAAU,GAAK,YAAc,GACxD,MAAMmB,EAAgBxB,KAAKyB,QAAU,MAAQ,YAAc,GAC3D,MAAMC,EAAiB1B,KAAK2B,QAAUC,WAAa5B,KAAK2B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,iBAAgB9B,KAAK+B,SAAW,OAAS,KAAMC,MAAOhC,KAAKiC,OAAS,SAASjC,KAAKiC,SACrFJ,EAAA,YACEG,MAAO,iCAAiCT,KAAiBC,KAAiBE,IAC1EQ,GAAIlC,KAAKgB,WAAU,gBACJhB,KAAK+B,SAAW,OAAS,KAAI,kBAC3BT,EACjBS,SAAU/B,KAAK+B,SACfI,eAAgBnC,KAAKoC,eACrBC,UAAWrC,KAAKsC,UAChBC,aAAcvC,KAAKwC,aACnBC,UAAWzC,KAAK0C,UAChBC,UAAW3C,KAAK4C,UAChBC,UAAW7C,KAAK8C,UAChBC,KAAM/C,KAAK+C,KACXC,YAAahD,KAAKgD,YAClBC,SAAUjD,KAAKkD,SACfC,SAAUnD,KAAKmD,SACf9C,MAAOA,EACP+C,WAAYpD,KAAKoD,WACjBC,KAAMrD,KAAKqD,KACXC,KAAMtD,KAAKsD,KACXC,KAAMvD,KAAKuD,KACXtD,QAASD,KAAKC,QACdQ,OAAQT,KAAKS,OACbG,QAASZ,KAAKY,UAGhBiB,EAAA,SAAOG,MAAM,aAAaE,GAAIZ,EAASkC,QAASxD,KAAKgB,YAAahB,KAAKyD,OACtEzD,KAAK2B,OAAS3B,KAAK2B,QAAU,IAAME,EAAA,KAAGG,MAAM,oBAAoBhC,KAAK2B,OACrE3B,KAAK0D,QAAU1D,KAAK0D,SAAW,IAAM7B,EAAA,KAAGG,MAAM,UAAUhC,KAAK0D,Q,wDAOtE,IAAI3C,EAAc,E"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,h as t,H as r}from"./p-f3d586b3.js";const o=":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover),:host(.focus-visible),:host(:focus){box-shadow:0 0 0 4px var(--road-primary-80)}:host ::slotted(road-icon){fill:var(--road-icon-inverse)}:host(.avatar-sm){width:2.625rem;height:2.625rem;font-size:1.25rem}:host(.avatar-md){width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}:host(.avatar-lg){width:4rem;height:4rem;font-size:2.375rem}::slotted(road-img),::slotted(img){width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}::slotted(road-badge){position:absolute;top:0;right:0}";const e=class{constructor(t){a(this,t);this.size="md"}render(){const a=this.size!==undefined?`avatar-${this.size}`:"";return t(r,{class:`${a}`},t("slot",null))}};e.style=o;export{e as road_avatar};
|
|
2
|
-
//# sourceMappingURL=p-78e9bbd5.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["avatarCss","Avatar","render","sizeClass","this","size","undefined","h","Host","class"],"sources":["src/components/avatar/avatar.css?tag=road-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * Avatar\n *\n * Index\n * - Avatar\n * - Image\n * - Badge\n */\n\n/**\n * @prop --avatar-background: background color of the avatar\n * @prop --avatar-width: width & height of the avatar\n */\n\n/* AVATAR\n -------------------- */\n\n:host {\n --avatar-background: var(--road-primary);\n --avatar-width: 3rem;\n --avatar-color: var(--road-grey-100-new);\n\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--avatar-width);\n height: var(--avatar-width);\n font-weight: 700;\n color: var(--avatar-color);\n background: var(--avatar-background);\n border-radius: var(--avatar-width);\n transition: box-shadow 0.5s;\n}\n\n:host(:hover),\n:host(.focus-visible),\n:host(:focus){\n box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n\n\n:host ::slotted(road-icon) {\n fill: var(--road-icon-inverse);\n}\n\n\n/* SIZE\n -------------------- */\n\n:host(.avatar-sm) {\n width: 2.625rem;\n height: 2.625rem;\n font-size: 1.25rem;\n}\n\n:host(.avatar-md) {\n width: 3.5rem;\n height: 3.5rem;\n font-size: var(--road-font-size-32);\n}\n\n:host(.avatar-lg) {\n width: 4rem;\n height: 4rem;\n font-size: 2.375rem;\n}\n\n\n/* IMAGE\n -------------------- */\n\n::slotted(road-img),\n::slotted(img) {\n width: 100%;\n height: 100%;\n object-fit: cover;\n overflow: hidden;\n border-radius: var(--avatar-width);\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n position: absolute;\n top: 0;\n right: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * @slot - Image of the avatar.\n */\n@Component({\n tag: 'road-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class Avatar {\n\n /**\n * The Avatar size.\n */\n @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' = 'md';\n\n render() {\n\n const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';\n\n\n return (\n\n <Host\n class={`${sizeClass}`}\n >\n <slot/>\n </Host>\n \n );\n }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,+4B,MCULC,EAAM,M,mCAKqC,I,CAEtD,MAAAC,GAEE,MAAMC,EAAYC,KAAKC,OAASC,UAAY,UAAUF,KAAKC,OAAS,GAGpE,OAEEE,EAACC,EAAI,CACHC,MAAO,GAAGN,KAEVI,EAAA,a"}
|