@roadtrip/components 3.51.2 → 3.52.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/loader.cjs.js +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +49 -5
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-segmented-button-bar.cjs.entry.js +1 -1
- package/dist/cjs/road-segmented-button.cjs.entry.js +4 -3
- package/dist/cjs/road-segmented-button.cjs.entry.js.map +1 -1
- package/dist/cjs/road-segmented-buttons.cjs.entry.js +1 -1
- package/dist/cjs/road-select-filter.cjs.entry.js +1 -1
- package/dist/cjs/road-select.cjs.entry.js +1 -1
- package/dist/cjs/road-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/road-spinner.cjs.entry.js +1 -1
- package/dist/cjs/road-status-chip.cjs.entry.js +1 -1
- package/dist/cjs/road-switch.cjs.entry.js +2 -2
- package/dist/cjs/road-tab-bar.cjs.entry.js +2 -2
- package/dist/cjs/road-tab-button.cjs.entry.js +2 -2
- package/dist/cjs/road-tab.cjs.entry.js +2 -2
- package/dist/cjs/road-table.cjs.entry.js +1 -1
- package/dist/cjs/road-tabs.cjs.entry.js +1 -1
- package/dist/cjs/road-tag.cjs.entry.js +1 -1
- package/dist/cjs/road-text.cjs.entry.js +1 -1
- package/dist/cjs/road-textarea.cjs.entry.js +22 -1
- package/dist/cjs/road-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/road-time-range-picker.cjs.entry.js +1 -1
- package/dist/cjs/road-toast.cjs.entry.js +1 -1
- package/dist/cjs/road-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/road-toggle.cjs.entry.js +2 -2
- package/dist/cjs/road-toolbar-title-page.cjs.entry.js +1 -1
- package/dist/cjs/road-toolbar-title.cjs.entry.js +1 -1
- package/dist/cjs/road-toolbar-v2.cjs.entry.js +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/roadtrip.cjs.js +1 -1
- package/dist/collection/components/badge/badge.css +9 -1
- package/dist/collection/components/badge/badge.js +1 -1
- package/dist/collection/components/badge/badge.stories.js +1 -1
- package/dist/collection/components/drawer/drawer.js +91 -3
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/segmented-button/segmented-button.css +14 -1
- package/dist/collection/components/segmented-button/segmented-button.js +24 -4
- package/dist/collection/components/segmented-button/segmented-button.js.map +1 -1
- package/dist/collection/components/segmented-button-bar/segmented-button-bar.js +1 -1
- package/dist/collection/components/segmented-buttons/segmented-buttons.js +1 -1
- package/dist/collection/components/segmented-buttons/segmented-buttons.stories.js +39 -0
- package/dist/collection/components/select/select.js +1 -1
- package/dist/collection/components/select-filter/select-filter.js +1 -1
- package/dist/collection/components/skeleton/skeleton.js +1 -1
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/status-chip/status-chip.js +1 -1
- package/dist/collection/components/switch/switch.js +2 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-bar/tab-bar.js +2 -2
- package/dist/collection/components/tab-button/tab-button.js +2 -2
- package/dist/collection/components/table/table.js +1 -1
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/tag/tag.js +1 -1
- package/dist/collection/components/text/text.js +1 -1
- package/dist/collection/components/textarea/textarea.js +22 -1
- package/dist/collection/components/textarea/textarea.js.map +1 -1
- package/dist/collection/components/time-range-picker/time-range-picker.js +1 -1
- package/dist/collection/components/toast/toast.js +1 -1
- package/dist/collection/components/toast/toast.js.map +1 -1
- package/dist/collection/components/toggle/toggle.js +2 -2
- package/dist/collection/components/toolbar/toolbar.js +1 -1
- package/dist/collection/components/toolbar-title/toolbar-title.js +1 -1
- package/dist/collection/components/toolbar-title-page/toolbar-title-page.js +1 -1
- package/dist/collection/components/toolbar-v2/toolbar-v2.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +3 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/road-badge_14.entry.js +49 -5
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-segmented-button-bar.entry.js +1 -1
- package/dist/esm/road-segmented-button.entry.js +4 -3
- package/dist/esm/road-segmented-button.entry.js.map +1 -1
- package/dist/esm/road-segmented-buttons.entry.js +1 -1
- package/dist/esm/road-select-filter.entry.js +1 -1
- package/dist/esm/road-select.entry.js +1 -1
- package/dist/esm/road-skeleton.entry.js +1 -1
- package/dist/esm/road-spinner.entry.js +1 -1
- package/dist/esm/road-status-chip.entry.js +1 -1
- package/dist/esm/road-switch.entry.js +2 -2
- package/dist/esm/road-tab-bar.entry.js +2 -2
- package/dist/esm/road-tab-button.entry.js +2 -2
- package/dist/esm/road-tab.entry.js +2 -2
- package/dist/esm/road-table.entry.js +1 -1
- package/dist/esm/road-tabs.entry.js +1 -1
- package/dist/esm/road-tag.entry.js +1 -1
- package/dist/esm/road-text.entry.js +1 -1
- package/dist/esm/road-textarea.entry.js +22 -1
- package/dist/esm/road-textarea.entry.js.map +1 -1
- package/dist/esm/road-time-range-picker.entry.js +1 -1
- package/dist/esm/road-toast.entry.js +1 -1
- package/dist/esm/road-toast.entry.js.map +1 -1
- package/dist/esm/road-toggle.entry.js +2 -2
- package/dist/esm/road-toolbar-title-page.entry.js +1 -1
- package/dist/esm/road-toolbar-title.entry.js +1 -1
- package/dist/esm/road-toolbar-v2.entry.js +1 -1
- package/dist/esm/road-tooltip.entry.js +3 -3
- package/dist/esm/roadtrip.js +1 -1
- package/dist/html.html-data.json +13 -0
- package/dist/roadtrip/{p-0c6ad72e.entry.js → p-19ff95e3.entry.js} +2 -2
- package/dist/roadtrip/{p-3dfa5636.entry.js → p-22de5cde.entry.js} +2 -2
- package/dist/roadtrip/{p-ac64606d.entry.js → p-2b2749da.entry.js} +2 -2
- package/dist/roadtrip/{p-ce281723.entry.js → p-2fef9c0f.entry.js} +5 -5
- package/dist/roadtrip/p-2fef9c0f.entry.js.map +1 -0
- package/dist/roadtrip/{p-9b1fa6a6.entry.js → p-320b58c5.entry.js} +2 -2
- package/dist/roadtrip/{p-4374d63f.entry.js → p-3646f072.entry.js} +2 -2
- package/dist/roadtrip/{p-4374d63f.entry.js.map → p-3646f072.entry.js.map} +1 -1
- package/dist/roadtrip/{p-335498ee.entry.js → p-368b36e3.entry.js} +2 -2
- package/dist/roadtrip/p-3d30fba4.entry.js +2 -0
- package/dist/roadtrip/{p-1f1021bc.entry.js → p-41aa8071.entry.js} +2 -2
- package/dist/roadtrip/p-41dbdb75.entry.js +2 -0
- package/dist/roadtrip/p-41dbdb75.entry.js.map +1 -0
- package/dist/roadtrip/{p-456f66fc.entry.js → p-54ccd027.entry.js} +2 -2
- package/dist/roadtrip/{p-187ab5f5.entry.js → p-579fce4c.entry.js} +2 -2
- package/dist/roadtrip/p-7563a0f9.entry.js +2 -0
- package/dist/roadtrip/{p-7aceed1a.entry.js.map → p-7563a0f9.entry.js.map} +1 -1
- package/dist/roadtrip/{p-dbb675a2.entry.js → p-77578033.entry.js} +2 -2
- package/dist/roadtrip/{p-c0f2eca7.entry.js → p-93ffbb6e.entry.js} +2 -2
- package/dist/roadtrip/p-93ffbb6e.entry.js.map +1 -0
- package/dist/roadtrip/{p-6311f3f0.entry.js → p-9ecf3634.entry.js} +2 -2
- package/dist/roadtrip/{p-718c6406.entry.js → p-a25cdb1f.entry.js} +2 -2
- package/dist/roadtrip/{p-83f9db8d.entry.js → p-ae250ecf.entry.js} +2 -2
- package/dist/roadtrip/{p-3d4cd373.entry.js → p-ae53bc43.entry.js} +2 -2
- package/dist/roadtrip/{p-61190b12.entry.js → p-bfc2379c.entry.js} +2 -2
- package/dist/roadtrip/{p-da0a75ff.entry.js → p-c6206416.entry.js} +2 -2
- package/dist/roadtrip/{p-85e18b2f.entry.js → p-d42b2603.entry.js} +2 -2
- package/dist/roadtrip/{p-5381957c.entry.js → p-fb7caf90.entry.js} +2 -2
- package/dist/roadtrip/{p-d1de4eb6.entry.js → p-fba1b425.entry.js} +2 -2
- package/dist/roadtrip/{p-ceb904c0.entry.js → p-fc261f58.entry.js} +2 -2
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/roadtrip.esm.js.map +1 -1
- package/dist/types/components/drawer/drawer.d.ts +11 -0
- package/dist/types/components/segmented-button/segmented-button.d.ts +5 -1
- package/dist/types/components/textarea/textarea.d.ts +5 -0
- package/dist/types/components.d.ts +22 -2
- package/dist/types/interface.d.ts +1 -1
- package/hydrate/index.js +109 -40
- package/hydrate/index.mjs +109 -40
- package/package.json +1 -1
- package/dist/roadtrip/p-249b8592.entry.js +0 -2
- package/dist/roadtrip/p-7aceed1a.entry.js +0 -2
- package/dist/roadtrip/p-c0f2eca7.entry.js.map +0 -1
- package/dist/roadtrip/p-ce281723.entry.js.map +0 -1
- package/dist/roadtrip/p-f0d930e5.entry.js +0 -2
- package/dist/roadtrip/p-f0d930e5.entry.js.map +0 -1
- /package/dist/roadtrip/{p-0c6ad72e.entry.js.map → p-19ff95e3.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-3dfa5636.entry.js.map → p-22de5cde.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-ac64606d.entry.js.map → p-2b2749da.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-9b1fa6a6.entry.js.map → p-320b58c5.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-335498ee.entry.js.map → p-368b36e3.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-249b8592.entry.js.map → p-3d30fba4.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-1f1021bc.entry.js.map → p-41aa8071.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-456f66fc.entry.js.map → p-54ccd027.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-187ab5f5.entry.js.map → p-579fce4c.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-dbb675a2.entry.js.map → p-77578033.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-6311f3f0.entry.js.map → p-9ecf3634.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-718c6406.entry.js.map → p-a25cdb1f.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-83f9db8d.entry.js.map → p-ae250ecf.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-3d4cd373.entry.js.map → p-ae53bc43.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-61190b12.entry.js.map → p-bfc2379c.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-da0a75ff.entry.js.map → p-c6206416.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-85e18b2f.entry.js.map → p-d42b2603.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-5381957c.entry.js.map → p-fb7caf90.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-d1de4eb6.entry.js.map → p-fba1b425.entry.js.map} +0 -0
- /package/dist/roadtrip/{p-ceb904c0.entry.js.map → p-fc261f58.entry.js.map} +0 -0
|
@@ -28,7 +28,7 @@ const ButtonBar = class {
|
|
|
28
28
|
this.selectedTabChanged();
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (index.h(index.Host, { key: '
|
|
31
|
+
return (index.h(index.Host, { key: '76466abd7a912ac1a0df83853216c3f20ac3086a', role: "tablist" }, index.h("slot", { key: '04290019d2aea356a7fd24739b68c371455e3b70' })));
|
|
32
32
|
}
|
|
33
33
|
get el() { return index.getElement(this); }
|
|
34
34
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-fee0103c.js');
|
|
6
6
|
|
|
7
|
-
const segmentedButtonCss = ":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:
|
|
7
|
+
const segmentedButtonCss = ":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:3rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-on-surface-weak);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-radius:8px;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;margin-right:var(--road-spacing-02);overflow:hidden}:host(:last-child){margin-right:0}:host(.btn-sm){height:2.5rem}:host(.btn-md){height:2.75rem}:host(.btn-lg){height:3rem}:host(.tab-selected){color:var(--road-button-primary);fill:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(.tab-selected:hover){color:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(:hover){color:var(--road-on-surface);background-color:var(--road-surface-inverse)}:host(.focus-visible){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%;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)}:host ::slotted(road-icon){margin:-0.2rem var(--road-spacing-03) -0.2rem 0;float:left}.button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:flex;align-items:center}.button-content-badge{margin-left:var(--road-spacing-03)}";
|
|
8
8
|
const RoadSegmentedButtonStyle0 = segmentedButtonCss;
|
|
9
9
|
|
|
10
10
|
const SegmentedButton = class {
|
|
@@ -59,10 +59,11 @@ const SegmentedButton = class {
|
|
|
59
59
|
render() {
|
|
60
60
|
const { tabIndex, selected, tab } = this;
|
|
61
61
|
const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: 'c32084087edad1374074d06d73fe718361396247', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
|
|
63
63
|
'tab-selected': selected,
|
|
64
64
|
[`${sizeClass}`]: true,
|
|
65
|
-
} }, index.h("span", { key: '
|
|
65
|
+
} }, index.h("span", { key: '55c39f3b6508f33537a0d0e243bc61a700d5c533', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: 'fa599539a08ff52bbfe0c479e809926aecabc85a', class: "button-content" }, index.h("slot", { key: '044b41c9a2217d62aa30f4221d4a5670105e7bd5' }), this.badge &&
|
|
66
|
+
index.h("road-badge", { key: '35a10d98aa0149976dcb21c4f7cb546753ed933f', color: this.selected ? 'primary' : 'neutral', class: "button-content-badge" }, this.badge)))));
|
|
66
67
|
}
|
|
67
68
|
get el() { return index.getElement(this); }
|
|
68
69
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-segmented-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,
|
|
1
|
+
{"file":"road-segmented-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,6gEAA6gE,CAAC;AACziE,kCAAe,kBAAkB;;MCWpB,eAAe;IAL5B;;;;;;;QAYW,SAAI,GAAyB,IAAI,CAAC;;;;QAKlB,aAAQ,GAAG,KAAK,CAAC;QAwDlC,YAAO,GAAG,CAAC,EAAiB;YAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;gBACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;aACpB;SACF,CAAC;QAEM,YAAO,GAAG,CAAC,EAAS;YAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;SACpB,CAAC;KA+BH;IAzEC,kBAAkB,CAAC,EAAe;QAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;YACnH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;SAC5C;KACF;IAEO,SAAS,CAAC,EAAyB;QACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;YAC1B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;KACF;IAED,IAAY,QAAQ;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAErD,IAAI,WAAW,EAAE;YACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;SACzC;QAED,OAAO,CAAC,CAAC;KACV;IAYD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;QAGpE,QACEA,QAACC,UAAI,qDACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,cAAc,GAAG,EAAE,GAAG,IAAI,EAClD,KAAK,EAAE;gBACL,cAAc,EAAE,QAAQ;gBACxB,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI;aACvB,IAEDD,mEAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,IACxEA,mEAAM,KAAK,EAAC,gBAAgB,IAC1BA,oEAAO,EACN,IAAI,CAAC,KAAK;YACTA,yEAAY,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAc,CAC7G,CACF,CACF,EACP;KACH;;;;;;;","names":["h","Host"],"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: 3rem;\n font-size: var(--road-button-medium);\n font-weight: 700;\n color: var(--road-on-surface-weak);\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n background-color: var(--road-surface);\n border-radius: 8px;\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 margin-right: var(--road-spacing-02);\n overflow: hidden;\n}\n\n:host(:last-child){\n margin-right: 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n height: 2.5rem;\n}\n\n/**\n * medium\n */\n\n :host(.btn-md) {\n height: 2.75rem;\n}\n\n/**\n* medium\n*/\n\n:host(.btn-lg) {\n height: 3rem;\n}\n\n/**\n * Active state\n */\n\n :host(.tab-selected) {\n color: var(--road-button-primary);\n fill: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n:host(.tab-selected:hover) {\n color: var(--road-button-primary);\n background-color: var(--road-button-tertiary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n color: var(--road-on-surface);\n background-color: var(--road-surface-inverse);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\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 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:host ::slotted(road-icon) {\n margin: -0.2rem var(--road-spacing-03) -0.2rem 0;\n float: left;\n}\n\n\n.button-content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n display: flex;\n align-items: center;\n}\n.button-content-badge{\n margin-left: var(--road-spacing-03);\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' | 'lg' = '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 * A badge can be added to the segmented button by providing a string value to this property.\n */\n @Prop() badge?: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 <span class=\"button-content\">\n <slot/>\n {this.badge &&\n <road-badge color={this.selected ? 'primary' : 'neutral'} class=\"button-content-badge\">{this.badge}</road-badge>}\n </span>\n </span>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -95,7 +95,7 @@ const Tabs = class {
|
|
|
95
95
|
return Array.from(this.el.querySelectorAll('road-tab'));
|
|
96
96
|
}
|
|
97
97
|
render() {
|
|
98
|
-
return (index.h(index.Host, { key: '
|
|
98
|
+
return (index.h(index.Host, { key: '74762d3d2e76c9926a2344182debdd17dbf3c011', onRoadSegmentedButtonClick: this.onTabClicked }, index.h("slot", { key: 'f4d5f461a7fe74ebc76c181b185932759ceb0f34', name: "top" }), index.h("slot", { key: '6b99ef4524d2aa3f55b95b33b7028097abb03712' })));
|
|
99
99
|
}
|
|
100
100
|
get el() { return index.getElement(this); }
|
|
101
101
|
};
|
|
@@ -1968,7 +1968,7 @@ const SelectFilter = class {
|
|
|
1968
1968
|
const options = this.filteredOptions;
|
|
1969
1969
|
const isActive = this.isActive ? 'true' : 'false';
|
|
1970
1970
|
const notActive = this.isActive ? '' : 'not-active';
|
|
1971
|
-
return (index.h(index.Host, { key: '
|
|
1971
|
+
return (index.h(index.Host, { key: '7fdfb3dadc614f4e851891dceb20e19f33074443', "is-active": isActive }, index.h("slot", { key: 'e2be686790e0ad87e002c8f393cee0ac0864d532' }), this.isOpen && (index.h("div", { key: '155ccb2711eaa3f8e92f25a3d3b7b9dfa34d4021', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (index.h("div", { class: "select-filter-empty" }, "Aucune option")) : (index.h("ul", { class: "pl-0" }, options.map((option, idx) => (index.h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
|
|
1972
1972
|
}
|
|
1973
1973
|
get el() { return index.getElement(this); }
|
|
1974
1974
|
static get watchers() { return {
|
|
@@ -107,7 +107,7 @@ const Select = class {
|
|
|
107
107
|
const labelId = this.selectId + '-label';
|
|
108
108
|
const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
|
|
109
109
|
const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
|
|
110
|
-
return (index.h(index.Host, { key: '
|
|
110
|
+
return (index.h(index.Host, { key: '5bb29d6c8e7ed03e244ec3fdd239589bab5cabe0', class: this.sizes && `select-${this.sizes}` }, index.h("select", { key: '2493089b1bb3c57c3af43ebbb5daff18ae4744e0', class: `form-select ${hasValueClass} ${isInvalidClass}`, 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 }, index.h("option", { key: 'e2bf03909eac53047f830ce9a655a643690f918e', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (index.h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), index.h("label", { key: '8a8ad20b057bec306e122587b24f5ffbcb79a3de', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: '1d5648a6e2fb46921900ff639b17ac5cc536350e', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '88a14e5d848bda00fea2088013037f37559387f0', class: "helper" }, this.helper)));
|
|
111
111
|
}
|
|
112
112
|
static get watchers() { return {
|
|
113
113
|
"value": ["valueChanged"]
|
|
@@ -12,7 +12,7 @@ const Skeleton = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h("span", { key: '
|
|
15
|
+
return (index.h("span", { key: 'eecb6ba03a976649272ec4df632022afa71b4a1e' }, "\u00A0"));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
Skeleton.style = RoadSkeletonStyle0;
|
|
@@ -22,7 +22,7 @@ const Spinner = class {
|
|
|
22
22
|
render() {
|
|
23
23
|
const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
|
|
24
24
|
const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
|
|
25
|
-
return (index.h("svg", { key: '
|
|
25
|
+
return (index.h("svg", { key: 'eb559d1ad35ed62c6c4cb1e7280faf29e52fe2f6', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '8faa4a39732b5b882a2c76abed424d95846c3083', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
Spinner.style = RoadSpinnerStyle0;
|
|
@@ -28,7 +28,7 @@ const StatusChip = class {
|
|
|
28
28
|
};
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (index.h(index.Host, { key: '
|
|
31
|
+
return (index.h(index.Host, { key: 'f261ddcd3afd748b815d63d973724d0898b48cd7', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, index.h("div", { key: '1a6fdaf843be1db93ee850456d662c98c6ab182b', class: "chip-description" }, index.h("road-icon", { key: '169dc92bb2d1ef16083019799ba80573731464f4', class: "chip-icon", color: "info", icon: index$1.alertInfoSolid }), index.h("slot", { key: '4e24bd7b4a140a532970959e5c2140a54910feb6' }))));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
StatusChip.style = RoadStatusChipStyle0;
|
|
@@ -85,11 +85,11 @@ const Switch = class {
|
|
|
85
85
|
}
|
|
86
86
|
render() {
|
|
87
87
|
const labelId = this.switchId + '-label';
|
|
88
|
-
const textLabel = index.h("label", { key: '
|
|
88
|
+
const textLabel = index.h("label", { key: 'c232e4f3505aa5d27a54077cf9883fef864efc4d', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
|
|
89
89
|
const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
|
|
90
90
|
const isSpacedClass = this.isSpaced && 'form-switch-spaced';
|
|
91
91
|
const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
|
|
92
|
-
return (index.h(index.Host, { key: '
|
|
92
|
+
return (index.h(index.Host, { key: '3d93be9bb557c13028dabaef2e82a1e53b814c56' }, index.h("input", { key: '9682f18c59fa23c8bdaeb30c27ea0aea4c37b2e2', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: '30340789f9d2d0182d478f7e840d705afcb4cf13', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '7dd93e85e3a444f92dbfb524e5ba401e1f5ecb7d', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
|
|
93
93
|
}
|
|
94
94
|
static get watchers() { return {
|
|
95
95
|
"checked": ["checkedChanged"]
|
|
@@ -44,11 +44,11 @@ const TabBar = class {
|
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
46
|
const { expand, center, secondary } = this;
|
|
47
|
-
return (index.h(index.Host, { key: '
|
|
47
|
+
return (index.h(index.Host, { key: '598640b2a0d7bfc657df37e30deff1a0aee2698c', role: "tablist", class: {
|
|
48
48
|
'tab-expand': expand,
|
|
49
49
|
'tab-center': center,
|
|
50
50
|
'tab-secondary': secondary,
|
|
51
|
-
} }, index.h("slot", { key: '
|
|
51
|
+
} }, index.h("slot", { key: '2f8c35375effb72f15d0b37d80ff3dd3a2779b22' })));
|
|
52
52
|
}
|
|
53
53
|
get el() { return index.getElement(this); }
|
|
54
54
|
static get watchers() { return {
|
|
@@ -77,7 +77,7 @@ const TabButton = class {
|
|
|
77
77
|
rel,
|
|
78
78
|
target,
|
|
79
79
|
};
|
|
80
|
-
return (index.h(index.Host, { key: '
|
|
80
|
+
return (index.h(index.Host, { key: 'd0232d92d13b395713e9537e4e985b9b1aef4be8', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
|
|
81
81
|
'tab-selected': selected,
|
|
82
82
|
'tab-has-label': hasLabel,
|
|
83
83
|
'tab-has-icon': hasIcon,
|
|
@@ -85,7 +85,7 @@ const TabButton = class {
|
|
|
85
85
|
'tab-has-icon-only': hasIcon && !hasLabel,
|
|
86
86
|
[`tab-layout-${layout}`]: true,
|
|
87
87
|
'tab-disabled': disabled, // Classe CSS pour les styles désactivés
|
|
88
|
-
} }, index.h("a", Object.assign({ key: '
|
|
88
|
+
} }, index.h("a", Object.assign({ key: '3cfffe4aef2432b2a23eb2ff6c86c5da125f0e04' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '36f97b5e282bf7870228ca6651629b766d614512', class: "button-inner" }, index.h("slot", { key: '4f963acbe1cc57893b19c0f86af05b8e754c96c1' })))));
|
|
89
89
|
}
|
|
90
90
|
get el() { return index.getElement(this); }
|
|
91
91
|
};
|
|
@@ -27,9 +27,9 @@ const Tab = class {
|
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
29
|
const { tab, active } = this;
|
|
30
|
-
return (index.h(index.Host, { key: '
|
|
30
|
+
return (index.h(index.Host, { key: 'e5f32c9c796b1a798eca2d24a7a660d808d060f8', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
|
|
31
31
|
'tab-hidden': !active,
|
|
32
|
-
} }, index.h("slot", { key: '
|
|
32
|
+
} }, index.h("slot", { key: '018740decce73c280c77ba78216623ac0f842e9d' })));
|
|
33
33
|
}
|
|
34
34
|
get el() { return index.getElement(this); }
|
|
35
35
|
};
|
|
@@ -12,7 +12,7 @@ const Table = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h("slot", { key: '
|
|
15
|
+
return (index.h("slot", { key: '81dd5f1f536cbc1362baa3027bb76b8fa5a6022b' }));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
Table.style = RoadTableStyle0;
|
|
@@ -108,7 +108,7 @@ const Tabs = class {
|
|
|
108
108
|
return Array.from(this.el.querySelectorAll('road-tab'));
|
|
109
109
|
}
|
|
110
110
|
render() {
|
|
111
|
-
return (index.h(index.Host, { key: '
|
|
111
|
+
return (index.h(index.Host, { key: '0e0850a766229851fb10751a2c598517ea6ab666', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: '449935aea69a4bb19f26ffefa9427af73dea2400', name: "top" }), index.h("div", { key: 'cca0b8a935a1e8df7fc9ce46fab95371910e7676', class: "tabs-inner" }, index.h("slot", { key: '649c2c4cec7a0cd43dfc668eab513ce80207ac9a' }))));
|
|
112
112
|
}
|
|
113
113
|
get el() { return index.getElement(this); }
|
|
114
114
|
};
|
|
@@ -22,7 +22,7 @@ const Tag = class {
|
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
24
|
const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
|
|
25
|
-
return (index.h(index.Host, { key: '
|
|
25
|
+
return (index.h(index.Host, { key: 'c17a38527980d6d453ba3846f9a3b2d57f31c071', class: `${contrastClass}` }, index.h("slot", { key: '77293988ddc60d4defb5e1600db3340c95335cb3' })));
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
Tag.style = RoadTagStyle0;
|
|
@@ -17,7 +17,7 @@ const Text = class {
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
const colorClass = this.color !== undefined ? `text-${this.color}` : '';
|
|
20
|
-
return (index.h(index.Host, { key: '
|
|
20
|
+
return (index.h(index.Host, { key: '727ee50da083fe2504862c80ed7aa5e5392e0226', class: `${colorClass}` }, index.h("slot", { key: '6e5322eed782d23164f11060a5be01a140182d5d' })));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
Text.style = RoadTextStyle0;
|
|
@@ -67,6 +67,8 @@ const Textarea = class {
|
|
|
67
67
|
*/
|
|
68
68
|
this.label = `${this.textareaId}-label`;
|
|
69
69
|
this.onInput = (ev) => {
|
|
70
|
+
if (this.isComposing)
|
|
71
|
+
return;
|
|
70
72
|
const input = ev.target;
|
|
71
73
|
if (input) {
|
|
72
74
|
this.value = input.value || '';
|
|
@@ -75,6 +77,14 @@ const Textarea = class {
|
|
|
75
77
|
this.roadInput.emit(ev);
|
|
76
78
|
};
|
|
77
79
|
this.onBlur = () => {
|
|
80
|
+
var _a, _b;
|
|
81
|
+
if (this.isComposing) {
|
|
82
|
+
this.isComposing = false;
|
|
83
|
+
const domValue = (_b = (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
84
|
+
if (this.value !== domValue) {
|
|
85
|
+
this.value = domValue;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
78
88
|
this.roadblur.emit();
|
|
79
89
|
this.roadBlur.emit();
|
|
80
90
|
};
|
|
@@ -82,6 +92,17 @@ const Textarea = class {
|
|
|
82
92
|
this.roadfocus.emit();
|
|
83
93
|
this.roadFocus.emit();
|
|
84
94
|
};
|
|
95
|
+
this.isComposing = false;
|
|
96
|
+
this.onCompositionStart = () => {
|
|
97
|
+
this.isComposing = true;
|
|
98
|
+
};
|
|
99
|
+
this.onCompositionUpdate = (ev) => {
|
|
100
|
+
this.onInput(ev);
|
|
101
|
+
};
|
|
102
|
+
this.onCompositionEnd = (ev) => {
|
|
103
|
+
this.isComposing = false;
|
|
104
|
+
this.onInput(ev);
|
|
105
|
+
};
|
|
85
106
|
}
|
|
86
107
|
/**
|
|
87
108
|
* Update the native textarea element when the value changes
|
|
@@ -99,7 +120,7 @@ const Textarea = class {
|
|
|
99
120
|
const hasValueClass = this.value !== '' ? 'has-value' : '';
|
|
100
121
|
const noResizeClass = this.resize == false ? 'no-resize' : '';
|
|
101
122
|
const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
|
|
102
|
-
return (index.h(index.Host, { key: '
|
|
123
|
+
return (index.h(index.Host, { key: 'b11f3ddbd35f2d9b093d5a1ea8a7aadc9d22e52d', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '9bd42480182ef1a6804c84bcec4cbcdfaf2208ba', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, 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: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), index.h("label", { key: 'a46e0ff32396e011cb0bca6d65794e5e080ec633', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '703184751f1e79b0b925b1146a8a226f10d47be9', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '5537817fa2cf67f3b4be1e5606c2c5eec556d5b5', class: "helper" }, this.helper)));
|
|
103
124
|
}
|
|
104
125
|
static get watchers() { return {
|
|
105
126
|
"value": ["valueChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-textarea.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,o5GAAo5G,CAAC;AACz6G,2BAAe,WAAW;;MCMb,QAAQ;IALrB;;;;;;;;;;;;;QAUU,eAAU,GAAW,iBAAiB,WAAW,EAAE,EAAE,CAAC;;;;QAKtD,mBAAc,GAAW,MAAM,CAAC;;;;QAKhC,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,aAAQ,GAAY,KAAK,CAAC;;;;QA4B1B,SAAI,GAAW,IAAI,CAAC,UAAU,CAAC;;;;QAU9B,UAAK,GAAgB,IAAI,CAAC;;;;QAK3B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,eAAU,GAAY,KAAK,CAAC;;;;QAK1B,WAAM,GAAY,IAAI,CAAC;;;;QAoBR,UAAK,GAAmB,EAAE,CAAC;;;;QAK5C,UAAK,GAAW,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC;QAyD3C,YAAO,GAAG,CAAC,EAAS;YAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAChC;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;YACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;SAC1C,CAAC;QAEM,WAAM,GAAG;YACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;KA4CH;;;;IAtGW,YAAY;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAC7C;IAkCO,QAAQ;QACd,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;KACzB;IAqBD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,WAAW,GAAG,EAAE,CAAC;QAC3D,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,WAAW,GAAG,EAAE,CAAC;QAC9D,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;QAEzF,QACEA,QAACC,UAAI,sEAAgB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,IAC5FD,uEACE,KAAK,EAAE,iCAAiC,aAAa,IAAI,aAAa,IAAI,cAAc,EAAE,EAC1F,EAAE,EAAE,IAAI,CAAC,UAAU,mBACJ,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GAEZ,EACXA,oEAAO,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAS,EACpF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAIA,gEAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAIA,gEAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK,CACpE,EACP;KACH;;;;;AAIH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"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}\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 width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\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 width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\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"],"version":3}
|
|
1
|
+
{"file":"road-textarea.entry.cjs.js","mappings":"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","names":["h","Host"],"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}\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 width: 95%;\n white-space: normal;\n overflow-wrap: break-word;\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 width:100%;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100%;\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 if (this.isComposing) return;\n\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 if (this.isComposing) {\n this.isComposing = false;\n const domValue = this.textareaEl?.value ?? '';\n if (this.value !== domValue) {\n this.value = domValue;\n }\n }\n\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private isComposing = false;\n\n private onCompositionStart = () => {\n this.isComposing = true;\n };\n\n private onCompositionUpdate = (ev: CompositionEvent) => {\n this.onInput(ev as unknown as Event);\n };\n\n private onCompositionEnd = (ev: CompositionEvent) => {\n this.isComposing = false;\n this.onInput(ev as unknown as Event);\n };\n\n private textareaEl?: HTMLTextAreaElement;\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 onCompositionstart={this.onCompositionStart}\n onCompositionupdate={this.onCompositionUpdate}\n onCompositionend={this.onCompositionEnd}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n ref={el => (this.textareaEl = el as HTMLTextAreaElement)}\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"],"version":3}
|
|
@@ -89,7 +89,7 @@ const RoadTimeRangePicker = class {
|
|
|
89
89
|
return { start: this.start, end: this.end };
|
|
90
90
|
}
|
|
91
91
|
render() {
|
|
92
|
-
return (index.h(index.Host, { key: '
|
|
92
|
+
return (index.h(index.Host, { key: '4c05c2fcbbe5c0f7df1c3e9750873faad0fa7b5c', class: `time-range-picker input-${this.sizes}` }, this.label && (index.h("p", { key: '2c963e240ae199d1eee6ba76d85013eac8ccfdb8', class: "label m-0" }, this.label, this.required && index.h("span", { key: 'd8232329248063a4b3dc7b4ba746cb31d4e9f56e', class: "required-indicator" }, " *"))), index.h("div", { key: 'a848889d0465791fb95ce1c8264212d681e60ae9', class: "time-range-picker-content d-flex align-items-center my-4" }, index.h("slot", { key: 'a4ded18bd9a179c34616e5a176c4c96189a99de8', name: "start" }), index.h("span", { key: 'abd5e370b9ae64e5ce7f236017c0bf02a15ef8de', class: "separator mx-12" }, this.separator), index.h("slot", { key: 'a8445f25548d8580c6275860d330e189f64d1d4c', name: "end" })), index.h("div", { key: '26723daafbce66f009a0b3d2708a0fa47531947d', class: "messages mt-1" }, this.errorMessages.map((msg, index$1) => (index.h("p", { key: index$1, class: "invalid-feedback m-0" }, index.h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && index.h("p", { key: '751b03bef9d11b330916ca30d431185034d65294', class: "helper mt-1" }, this.helper)));
|
|
93
93
|
}
|
|
94
94
|
get hostEl() { return index.getElement(this); }
|
|
95
95
|
};
|
|
@@ -88,7 +88,7 @@ const Toast = class {
|
|
|
88
88
|
if (this.color == 'danger') {
|
|
89
89
|
this.timeout = 0;
|
|
90
90
|
}
|
|
91
|
-
return (index.h(index.Host, { key: '
|
|
91
|
+
return (index.h(index.Host, { key: '5c3caac868d79f97699af08fb0b96c1ff35ad9cc', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: 'b20177ba76a147f157605497de541dd53070a7b1', class: `toast toast-${this.color}` }, index.h("road-icon", { key: 'f75466515c805ee5460577e9694b374b1a30ac62', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: 'a2e984002c90fbcc7f0eb8f912835c46f1f5effd', class: "toast-label" }, this.label), index.h("button", { key: '37b9009541e949ee9ffe2350abd189a2d5bcf014', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: '5c0cd9dbae939e8c52cb2150861b3c0f68d5518b', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: '48469490e404f7db80d5c77aa3e08c02d769dd4f', name: "progress" }))));
|
|
92
92
|
}
|
|
93
93
|
static get watchers() { return {
|
|
94
94
|
"isOpen": ["isOpenChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-toast.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,urEAAurE,CAAC;AACzsE,wBAAe,QAAQ;;MCkBV,KAAK;IALlB;;;;;;QAU2B,WAAM,GAAY,KAAK,CAAC;;;;QAKzC,UAAK,GAAmB,MAAM,CAAC;;;;;QAW/B,YAAO,GAAW,IAAI,CAAC;;;;QA0CvB,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KA8CH;;;;IAlFC,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;;;;IAMD,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnB,UAAU,CAAC;gBACT,IAAI,CAAC,KAAK,EAAE,CAAC;aACd,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAClB;KACF;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;IAYD,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;QACzD,IAAI,IAAI,CAAC;QACT,QAAO,IAAI,CAAC,KAAK;YACjB,KAAK,MAAM;gBACT,IAAI,GAAGA,wBAAgB,CAAC;gBACxB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAGC,0BAAkB,CAAC;gBAC1B,MAAM;YACR;gBACE,IAAI,GAAGH,wBAAgB,CAAC;gBACxB,MAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;SACjB;QAED,QACEI,QAACC,UAAI,qDAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9CD,kEAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrCA,wEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzEA,gEAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvCA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChFA,wEAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACTF,mEAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;KACH;;;;;;;;;","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * Toast\n *\n *\n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n */\n\n\n/* CONTAINER\n -------------------- */\n\n:host {\n position: fixed;\n right: 0;\n bottom: 1rem;\n left: 0;\n z-index: 1;\n display: flex;\n justify-content: center;\n width: 328px;\n margin: 0 auto;\n pointer-events: none;\n visibility: hidden;\n opacity: 0;\n transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n :host {\n right: 1.5rem;\n bottom: 3rem;\n left: auto;\n width: auto;\n transform: translateX(100%);\n }\n}\n\n/**\n * Open state\n */\n\n:host(.toast-open) {\n visibility: visible;\n opacity: 1;\n transform: none;\n}\n\n/* TOAST\n -------------------- */\n\n.toast {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 0 0 100%;\n flex-flow: wrap;\n align-items: flex-start;\n width: 328px;\n padding: 0.75rem 2rem 0.6rem 1rem;\n font-family: var(--road-font);\n font-size: var(--road-body-medium);\n line-height: 1.4;\n color: var(--road-on-info-surface-inverse);\n text-align: left;\n background: var(--road-info-surface-inverse);\n border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n .toast {\n padding: 1rem;\n margin-right: auto;\n margin-left: auto;\n }\n}\n\n/* FEEDBACK COLOR\n -------------------- */\n\n/**\n * Danger\n */\n\n.toast-danger {\n color: var(--road-on-danger-surface-inverse);\n pointer-events: all;\n background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n color: var(--road-danger-icon-inverse);\n}\n\n/**\n * Warning\n */\n\n.toast-warning {\n color: var(--road-on-warning-surface-inverse);\n background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n color: var(--road-warning-icon-inverse);\n}\n\n/**\n * Success\n */\n\n.toast-success {\n color: var(--road-on-success-surface-inverse);\n background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n color: var(--road-success-icon-inverse);\n}\n\n/**\n * Info\n */\n\n.toast-info {\n color: var(--road-on-info-surface-inverse);\n background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n color: var(--road-info-icon-inverse);\n}\n\n/* FEEDBACK ICON\n -------------------- */\n\n.toast-icon {\n top: auto;\n left: 0.5rem;\n margin-top: -5px;\n margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n .toast-icon {\n position: relative;\n top: auto;\n left: auto;\n margin-right: 0.5rem;\n }\n}\n\n/* CLOSE BUTTON\n -------------------- */\n\n.toast-close {\n position: absolute;\n right: 0.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: none;\n border: 0;\n border-radius: 4px;\n fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n fill: var(--road-warning-icon-inverse);\n}\n\n\n/**\n * Focus state\n */\n\n.toast-close:focus {\n border-color: var(--road-info-surface-inverse);\n outline: none;\n}\n\n/* TOAST LABEL\n -------------------- */\n\n.toast-label{\n width: 240px;\n margin: 0;\n}\n\n/* TOAST PORGRESS BAR\n -------------------- */\n\n:host ::slotted(road-progress) {\n position: absolute;\n bottom: -8px;\n left: 0;\n flex-basis: 100%;\n width: 100%;\n margin-top: 0.5rem;\n}\n\n/* ANIMATION\n -------------------- */\n\n\n@keyframes load {\n\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/**\n *\n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n */\n\n@Component({\n tag: 'road-toast',\n styleUrl: 'toast.css',\n shadow: true,\n})\nexport class Toast {\n\n /**\n * Set `open` propertie to `true` to open the toast\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Set the color of the toast. e.g. info, success, warning, danger\n */\n @Prop() color: FeedbackColors = 'info';\n\n /**\n * Text display in the toast\n */\n @Prop() label?: string;\n\n /**\n * How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n * until `close()` is called.\n */\n @Prop() timeout: number = 5000;\n\n /**\n * Indicate when closing the toast\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Watch the isOpen property to start the timeout before closing\n */\n @Watch('isOpen')\n isOpenChanged() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n /**\n * Open the toast\n */\n @Method()\n async open() {\n this.isOpen = true;\n if(this.timeout > 0) {\n setTimeout(() => {\n this.close();\n }, this.timeout);\n }\n }\n\n /**\n * Close the toast\n */\n @Method()\n async close() {\n this.isOpen = false;\n this.onClose.emit();\n }\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n componentDidLoad() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n render() {\n const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n let icon;\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n\n if (this.color =='danger') {\n this.timeout = 0\n }\n\n return (\n <Host class={`${toastIsOpenClass}`} role=\"alert\">\n <div class={`toast toast-${this.color}`}>\n <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n <p class=\"toast-label\">{this.label}</p>\n <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n <road-icon icon={navigationClose} size=\"md\"></road-icon>\n </button>\n <slot name=\"progress\"/>\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"road-toast.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,urEAAurE,CAAC;AACzsE,wBAAe,QAAQ;;MCkBV,KAAK;IALlB;;;;;;QAU2B,WAAM,GAAY,KAAK,CAAC;;;;QAKzC,UAAK,GAAmB,MAAM,CAAC;;;;;QAW/B,YAAO,GAAW,IAAI,CAAC;;;;QA0CvB,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KA8CH;;;;IAlFC,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;;;;IAMD,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnB,UAAU,CAAC;gBACT,IAAI,CAAC,KAAK,EAAE,CAAC;aACd,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAClB;KACF;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;IAYD,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YACnC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;KACF;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC;QACzD,IAAI,IAAI,CAAC;QACT,QAAO,IAAI,CAAC,KAAK;YACjB,KAAK,MAAM;gBACT,IAAI,GAAGA,wBAAgB,CAAC;gBACxB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,GAAGC,2BAAmB,CAAC;gBAC3B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAGC,0BAAkB,CAAC;gBAC1B,MAAM;YACR;gBACE,IAAI,GAAGH,wBAAgB,CAAC;gBACxB,MAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,IAAG,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;SACjB;QAED,QACEI,QAACC,UAAI,qDAAC,KAAK,EAAE,GAAG,gBAAgB,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9CD,kEAAK,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,IACrCA,wEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa,EACzEA,gEAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAK,EACvCA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,gBAAY,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAChFA,wEAAW,IAAI,EAAEE,uBAAe,EAAE,IAAI,EAAC,IAAI,GAAa,CACjD,EACTF,mEAAM,IAAI,EAAC,UAAU,GAAE,CACnB,CACD,EACP;KACH;;;;;;;;;","names":["alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","navigationClose"],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * Toast\n *\n *\n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n */\n\n\n/* CONTAINER\n -------------------- */\n\n:host {\n position: fixed;\n right: 0;\n bottom: 1rem;\n left: 0;\n z-index: 1;\n display: flex;\n justify-content: center;\n width: 328px;\n margin: 0 auto;\n pointer-events: none;\n visibility: hidden;\n opacity: 0;\n transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n :host {\n right: 1.5rem;\n bottom: 3rem;\n left: auto;\n width: auto;\n transform: translateX(100%);\n }\n}\n\n/**\n * Open state\n */\n\n:host(.toast-open) {\n visibility: visible;\n opacity: 1;\n transform: none;\n}\n\n/* TOAST\n -------------------- */\n\n.toast {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 0 0 100%;\n flex-flow: wrap;\n align-items: flex-start;\n width: 328px;\n padding: 0.75rem 2rem 0.6rem 1rem;\n font-family: var(--road-font);\n font-size: var(--road-body-medium);\n line-height: 1.4;\n color: var(--road-on-info-surface-inverse);\n text-align: left;\n background: var(--road-info-surface-inverse);\n border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n .toast {\n padding: 1rem;\n margin-right: auto;\n margin-left: auto;\n }\n}\n\n/* FEEDBACK COLOR\n -------------------- */\n\n/**\n * Danger\n */\n\n.toast-danger {\n color: var(--road-on-danger-surface-inverse);\n pointer-events: all;\n background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n color: var(--road-danger-icon-inverse);\n}\n\n/**\n * Warning\n */\n\n.toast-warning {\n color: var(--road-on-warning-surface-inverse);\n background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n color: var(--road-warning-icon-inverse);\n}\n\n/**\n * Success\n */\n\n.toast-success {\n color: var(--road-on-success-surface-inverse);\n background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n color: var(--road-success-icon-inverse);\n}\n\n/**\n * Info\n */\n\n.toast-info {\n color: var(--road-on-info-surface-inverse);\n background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n color: var(--road-info-icon-inverse);\n}\n\n/* FEEDBACK ICON\n -------------------- */\n\n.toast-icon {\n top: auto;\n left: 0.5rem;\n margin-top: -5px;\n margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n .toast-icon {\n position: relative;\n top: auto;\n left: auto;\n margin-right: 0.5rem;\n }\n}\n\n/* CLOSE BUTTON\n -------------------- */\n\n.toast-close {\n position: absolute;\n right: 0.5rem;\n padding: 0;\n color: inherit;\n cursor: pointer;\n background: none;\n border: 0;\n border-radius: 4px;\n fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n fill: var(--road-warning-icon-inverse);\n}\n\n\n/**\n * Focus state\n */\n\n.toast-close:focus {\n border-color: var(--road-info-surface-inverse);\n outline: none;\n}\n\n/* TOAST LABEL\n -------------------- */\n\n.toast-label{\n width: 240px;\n margin: 0;\n}\n\n/* TOAST PORGRESS BAR\n -------------------- */\n\n:host ::slotted(road-progress) {\n position: absolute;\n bottom: -8px;\n left: 0;\n flex-basis: 100%;\n width: 100%;\n margin-top: 0.5rem;\n}\n\n/* ANIMATION\n -------------------- */\n\n\n@keyframes load {\n\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/**\n *\n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n */\n\n@Component({\n tag: 'road-toast',\n styleUrl: 'toast.css',\n shadow: true,\n})\nexport class Toast {\n\n /**\n * Set `open` propertie to `true` to open the toast\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Set the color of the toast. e.g. info, success, warning, danger\n */\n @Prop() color: FeedbackColors = 'info';\n\n /**\n * Text display in the toast\n */\n @Prop() label?: string;\n\n /**\n * How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n * until `close()` is called.\n */\n @Prop() timeout: number = 5000;\n\n /**\n * Indicate when closing the toast\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Watch the isOpen property to start the timeout before closing\n */\n @Watch('isOpen')\n isOpenChanged() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n /**\n * Open the toast\n */\n @Method()\n async open() {\n this.isOpen = true;\n if(this.timeout > 0) {\n setTimeout(() => {\n this.close();\n }, this.timeout);\n }\n }\n\n /**\n * Close the toast\n */\n @Method()\n async close() {\n this.isOpen = false;\n this.onClose.emit();\n }\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n componentDidLoad() {\n if (this.isOpen && this.timeout > 0) {\n setTimeout(() => this.close(), this.timeout);\n }\n }\n\n render() {\n const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n let icon;\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n\n if (this.color =='danger') {\n this.timeout = 0\n }\n\n return (\n <Host class={`${toastIsOpenClass}`} role=\"alert\">\n <div class={`toast toast-${this.color}`}>\n <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n <p class=\"toast-label\">{this.label}</p>\n <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n <road-icon icon={navigationClose} size=\"md\"></road-icon>\n </button>\n <slot name=\"progress\"/>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -73,11 +73,11 @@ const toggle = class {
|
|
|
73
73
|
}
|
|
74
74
|
render() {
|
|
75
75
|
const labelId = this.toggleId + '-label';
|
|
76
|
-
const textLabel = index.h("label", { key: '
|
|
76
|
+
const textLabel = index.h("label", { key: '688af16c9f4a539dd13c5bb98c0f2a731b492c06', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
|
|
77
77
|
const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
|
|
78
78
|
const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
|
|
79
79
|
const disabledClass = this.disabled ? 'disabled' : '';
|
|
80
|
-
return (index.h(index.Host, { key: '
|
|
80
|
+
return (index.h(index.Host, { key: '530c7052c4b2d783599f0e997954a368bc49be45' }, index.h("input", { key: '669fb27728139752f1e63319b86e804e7cf91da5', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: '0f186f04ecd674c4c91458a1f6ef7aca63ee60cf', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: 'b0df7532dea735dfbd25da5307ba27d77fb7b6cc', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (index.h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (index.h("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
|
|
81
81
|
}
|
|
82
82
|
static get watchers() { return {
|
|
83
83
|
"checked": ["checkedChanged"]
|
|
@@ -12,7 +12,7 @@ const ToolbarAppName = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h("div", { key: '
|
|
15
|
+
return (index.h("div", { key: '6523ca97a8377f6af5fd0800aa5543cbc316f13f', class: "toolbar-title-page" }, index.h("slot", { key: 'c5d3422ec09f1d54d24fb28cb2be7a84dd700703' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
ToolbarAppName.style = RoadToolbarTitlePageStyle0;
|
|
@@ -12,7 +12,7 @@ const ToolbarTitle = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h("div", { key: '
|
|
15
|
+
return (index.h("div", { key: '9ed296ef2918332630e1b5a7b7026b2edeb91b21', class: "toolbar-title" }, index.h("slot", { key: 'a39fdb646a9bcb5aea4641575161229610d75878' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
ToolbarTitle.style = RoadToolbarTitleStyle0;
|
|
@@ -12,7 +12,7 @@ const ToolbarV2 = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h(index.Host, { key: '
|
|
15
|
+
return (index.h(index.Host, { key: '36c585d9dec920f5b72e37733e74c4134ee67185', class: "toolbar" }, index.h("div", { key: '947c33c46e0bbc26b75d5bab2ed2c89ab228e808', class: "toolbar-container" }, index.h("div", { key: '83d61111f17d1022ba7b54089e203277955e0a68', class: "toolbar-container-content-left" }, index.h("slot", { key: '7ac57443795d0347afb7e5ce1070d42ac7f91017', name: "start" }), index.h("slot", { key: 'a6089fd013186ea231d8d88d5af878239acf92f8', name: "primary" })), index.h("div", { key: '441aaee506f1cf8a99921cf0a932303a9bdf18aa', class: "toolbar-content" }, index.h("slot", { key: 'b72650e9913e3f0d08fbe2d2f8eed7219e132837' })), index.h("div", { key: '48a7f37607c0ebd5a88620cd2ebac74bc12708ed', class: "toolbar-container-content-right" }, index.h("slot", { key: '137e2d29e96b188194c0e9f82b6081a35119c371', name: "secondary" }), index.h("slot", { key: '777d8774c10c9e4a784b193139ff10085166a103', name: "end" })))));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
ToolbarV2.style = RoadToolbarV2Style0;
|
|
@@ -113,12 +113,12 @@ const Tooltip = class {
|
|
|
113
113
|
return triggers.includes(triggerType);
|
|
114
114
|
}
|
|
115
115
|
render() {
|
|
116
|
-
return (index.h(index.Host, { key: '
|
|
116
|
+
return (index.h(index.Host, { key: 'dbe023bc59f5d6637f901291cdd2c1a5d9b27450', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
|
|
117
117
|
,
|
|
118
|
-
"data-tooltip-position": this.position }, index.h("slot", { key: '
|
|
118
|
+
"data-tooltip-position": this.position }, index.h("slot", { key: 'ba01929185c87ed190275aafa8326bbbbd70ebca', "aria-describedby": this.tooltipId }), index.h("div", { key: 'df67e1ec087033b72259fae58fc5447ed0d20a01', part: "tooltip", id: this.tooltipId, class: {
|
|
119
119
|
tooltip: true,
|
|
120
120
|
"tooltip-open": this.isOpen,
|
|
121
|
-
}, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, index.h("slot", { key: '
|
|
121
|
+
}, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, index.h("slot", { key: '8fc2ca39b71812dabd43af2a8fb3d0b2ef223a28', name: "tooltip-content" }))));
|
|
122
122
|
}
|
|
123
123
|
get el() { return index.getElement(this); }
|
|
124
124
|
};
|