@scania/tegel 0.0.1-beta.3 → 0.0.1-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index-e1c79686.js +1912 -0
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/loader.cjs.js +21 -0
- package/dist/cjs/popper-11d5f714.js +1801 -0
- package/dist/cjs/sdds-accordion-item.cjs.entry.js +34 -0
- package/dist/cjs/sdds-accordion.cjs.entry.js +21 -0
- package/dist/cjs/sdds-badges.cjs.entry.js +55 -0
- package/dist/cjs/sdds-body-cell_2.cjs.entry.js +173 -0
- package/dist/cjs/sdds-button.cjs.entry.js +36 -0
- package/dist/cjs/sdds-datetime.cjs.entry.js +66 -0
- package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +92 -0
- package/dist/cjs/sdds-dropdown_2.cjs.entry.js +335 -0
- package/dist/cjs/sdds-header-cell.cjs.entry.js +141 -0
- package/dist/cjs/sdds-icon.cjs.entry.js +42 -0
- package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +96 -0
- package/dist/cjs/sdds-inline-tabs.cjs.entry.js +211 -0
- package/dist/cjs/sdds-modal.cjs.entry.js +49 -0
- package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +95 -0
- package/dist/cjs/sdds-popover-canvas.cjs.entry.js +76 -0
- package/dist/cjs/sdds-popover-menu.cjs.entry.js +75 -0
- package/dist/cjs/sdds-slider.cjs.entry.js +336 -0
- package/dist/cjs/sdds-spinner.cjs.entry.js +21 -0
- package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +81 -0
- package/dist/cjs/sdds-table-body.cjs.entry.js +289 -0
- package/dist/cjs/sdds-table-footer.cjs.entry.js +165 -0
- package/dist/cjs/sdds-table-header.cjs.entry.js +100 -0
- package/dist/cjs/sdds-table-toolbar.cjs.entry.js +66 -0
- package/dist/cjs/sdds-table.cjs.entry.js +69 -0
- package/dist/cjs/sdds-textarea.cjs.entry.js +61 -0
- package/dist/cjs/sdds-textfield.cjs.entry.js +82 -0
- package/dist/cjs/sdds-tooltip.cjs.entry.js +95 -0
- package/dist/cjs/tegel.cjs.js +19 -0
- package/dist/collection/collection-manifest.json +40 -0
- package/dist/collection/components/accordion/accordion-item/accordion-item.css +134 -0
- package/dist/collection/components/accordion/accordion-item/accordion-item.js +146 -0
- package/dist/collection/components/accordion/accordion.css +77 -0
- package/dist/collection/components/accordion/accordion.js +62 -0
- package/dist/collection/components/accordion/accordion.stories.js +91 -0
- package/dist/collection/components/badge/badge.stories.js +101 -0
- package/dist/collection/components/badge/badges.css +42 -0
- package/dist/collection/components/badge/badges.js +150 -0
- package/dist/collection/components/banner/banner.stories.js +93 -0
- package/dist/collection/components/block/block.stories.js +46 -0
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +26 -0
- package/dist/collection/components/button/button-component.js +154 -0
- package/dist/collection/components/button/button-native.stories.js +183 -0
- package/dist/collection/components/button/button-webcomponent.stories.js +182 -0
- package/dist/collection/components/button/button.css +658 -0
- package/dist/collection/components/card/card.stories.js +181 -0
- package/dist/collection/components/checkbox/checkbox.stories.js +54 -0
- package/dist/collection/components/chips/chips.stories.js +124 -0
- package/dist/collection/components/data-table/native-table.stories.js +182 -0
- package/dist/collection/components/data-table/table/table.css +15 -0
- package/dist/collection/components/data-table/table/table.js +253 -0
- package/dist/collection/components/data-table/table-body/table-body.css +22 -0
- package/dist/collection/components/data-table/table-body/table-body.js +425 -0
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +40 -0
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +169 -0
- package/dist/collection/components/data-table/table-body-row/table-body-row.css +196 -0
- package/dist/collection/components/data-table/table-body-row/table-body-row.js +164 -0
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +79 -0
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +155 -0
- package/dist/collection/components/data-table/table-component-basic.stories.js +163 -0
- package/dist/collection/components/data-table/table-component-batch-actions.stories.js +129 -0
- package/dist/collection/components/data-table/table-component-bodydata.stories.js +58 -0
- package/dist/collection/components/data-table/table-component-custom-width.stories.js +198 -0
- package/dist/collection/components/data-table/table-component-event-listeners.stories.js +153 -0
- package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +137 -0
- package/dist/collection/components/data-table/table-component-filtering.stories.js +139 -0
- package/dist/collection/components/data-table/table-component-multiselect.stories.js +160 -0
- package/dist/collection/components/data-table/table-component-pagination.stories.js +129 -0
- package/dist/collection/components/data-table/table-component-sorting.stories.js +107 -0
- package/dist/collection/components/data-table/table-footer/table-footer.css +93 -0
- package/dist/collection/components/data-table/table-footer/table-footer.js +355 -0
- package/dist/collection/components/data-table/table-header/table-header.css +204 -0
- package/dist/collection/components/data-table/table-header/table-header.js +153 -0
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +126 -0
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +320 -0
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +92 -0
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +142 -0
- package/dist/collection/components/datetime/datetime.css +375 -0
- package/dist/collection/components/datetime/datetime.js +251 -0
- package/dist/collection/components/datetime/datetime.stories.js +149 -0
- package/dist/collection/components/divider/divider.stories.js +116 -0
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +339 -0
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +130 -0
- package/dist/collection/components/dropdown/dropdown-native.stories.js +90 -0
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +185 -0
- package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +151 -0
- package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +146 -0
- package/dist/collection/components/dropdown/dropdown.css +891 -0
- package/dist/collection/components/dropdown/dropdown.js +554 -0
- package/dist/collection/components/footer/footer.stories.js +100 -0
- package/dist/collection/components/header/header-all.stories.js +217 -0
- package/dist/collection/components/header/header-default.stories.js +47 -0
- package/dist/collection/components/header/header-inline.stories.js +113 -0
- package/dist/collection/components/header/header-search.stories.js +263 -0
- package/dist/collection/components/header/header-toolbar.stories.js +204 -0
- package/dist/collection/components/icon/icon-font.stories.js +57 -0
- package/dist/collection/components/icon/icon-web-component.stories.js +51 -0
- package/dist/collection/components/icon/icon.css +16 -0
- package/dist/collection/components/icon/icon.js +89 -0
- package/dist/collection/components/icon/iconsArray.js +2 -0
- package/dist/collection/components/link/link.stories.js +45 -0
- package/dist/collection/components/message/message.stories.js +117 -0
- package/dist/collection/components/modal/modal-native.stories.js +121 -0
- package/dist/collection/components/modal/modal-webcomponent.stories.js +78 -0
- package/dist/collection/components/modal/modal.css +324 -0
- package/dist/collection/components/modal/modal.js +146 -0
- package/dist/collection/components/popover-canvas/popover-canvas.css +20 -0
- package/dist/collection/components/popover-canvas/popover-canvas.js +190 -0
- package/dist/collection/components/popover-canvas/popover-canvas.stories.js +87 -0
- package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +132 -0
- package/dist/collection/components/popover-menu/popover-menu.css +19 -0
- package/dist/collection/components/popover-menu/popover-menu.js +189 -0
- package/dist/collection/components/popover-menu/popover-menu.stories.js +109 -0
- package/dist/collection/components/radio-button/radio-button.stories.js +68 -0
- package/dist/collection/components/side-menu/side-menu.stories.js +182 -0
- package/dist/collection/components/slider/slider.css +260 -0
- package/dist/collection/components/slider/slider.js +682 -0
- package/dist/collection/components/slider/slider.stories.js +251 -0
- package/dist/collection/components/spinner/spinner.css +79 -0
- package/dist/collection/components/spinner/spinner.js +61 -0
- package/dist/collection/components/spinner/spinner.stories.js +59 -0
- package/dist/collection/components/stepper/stepper.stories.js +139 -0
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +159 -0
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +302 -0
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +65 -0
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +172 -0
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +126 -0
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +43 -0
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +153 -0
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +103 -0
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +32 -0
- package/dist/collection/components/textarea/textarea.css +283 -0
- package/dist/collection/components/textarea/textarea.js +336 -0
- package/dist/collection/components/textarea/textarea.stories.js +149 -0
- package/dist/collection/components/textfield/textfield.css +494 -0
- package/dist/collection/components/textfield/textfield.js +359 -0
- package/dist/collection/components/textfield/textfield.stories.js +222 -0
- package/dist/collection/components/toast/toast.stories.js +119 -0
- package/dist/collection/components/toggle/toggle.stories.js +62 -0
- package/dist/collection/components/tooltip/tooltip.css +46 -0
- package/dist/collection/components/tooltip/tooltip.js +200 -0
- package/dist/collection/components/tooltip/tooltip.stories.js +113 -0
- package/dist/collection/components/utility/colour/background-color.stories.js +96 -0
- package/dist/collection/components/utility/colour/text-color.stories.js +94 -0
- package/dist/collection/foundations-stories/colour/colour-brand.stories.js +38 -0
- package/dist/collection/foundations-stories/colour/colour-scales.stories.js +71 -0
- package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +40 -0
- package/dist/collection/foundations-stories/grid/grid.stories.js +386 -0
- package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +100 -0
- package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +94 -0
- package/dist/collection/foundations-stories/typography/typography-body.stories.js +16 -0
- package/dist/collection/foundations-stories/typography/typography-detail.stories.js +17 -0
- package/dist/collection/foundations-stories/typography/typography-headline.stories.js +39 -0
- package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +12 -0
- package/dist/collection/index.js +1 -0
- package/dist/collection/stories/assets/code-brackets.svg +1 -0
- package/dist/collection/stories/assets/colors.svg +1 -0
- package/dist/collection/stories/assets/comments.svg +1 -0
- package/dist/collection/stories/assets/direction.svg +1 -0
- package/dist/collection/stories/assets/flow.svg +1 -0
- package/dist/collection/stories/assets/plugin.svg +1 -0
- package/dist/collection/stories/assets/repo.svg +1 -0
- package/dist/collection/stories/assets/stackalt.svg +1 -0
- package/dist/collection/utils/utils.js +12 -0
- package/dist/esm/index-b67b15a6.js +1884 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/loader.js +17 -0
- package/dist/esm/polyfills/core-js.js +11 -0
- package/dist/esm/polyfills/css-shim.js +1 -0
- package/dist/esm/polyfills/dom.js +79 -0
- package/dist/esm/polyfills/es5-html-element.js +1 -0
- package/dist/esm/polyfills/index.js +34 -0
- package/dist/esm/polyfills/system.js +6 -0
- package/dist/esm/popper-f860750c.js +1799 -0
- package/dist/esm/sdds-accordion-item.entry.js +30 -0
- package/dist/esm/sdds-accordion.entry.js +17 -0
- package/dist/esm/sdds-badges.entry.js +51 -0
- package/dist/esm/sdds-body-cell_2.entry.js +168 -0
- package/dist/esm/sdds-button.entry.js +32 -0
- package/dist/esm/sdds-datetime.entry.js +62 -0
- package/dist/esm/sdds-dropdown-filter.entry.js +88 -0
- package/dist/esm/sdds-dropdown_2.entry.js +330 -0
- package/dist/esm/sdds-header-cell.entry.js +137 -0
- package/dist/esm/sdds-icon.entry.js +38 -0
- package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +92 -0
- package/dist/esm/sdds-inline-tabs.entry.js +207 -0
- package/dist/esm/sdds-modal.entry.js +45 -0
- package/dist/esm/sdds-navigation-tabs.entry.js +91 -0
- package/dist/esm/sdds-popover-canvas.entry.js +72 -0
- package/dist/esm/sdds-popover-menu.entry.js +71 -0
- package/dist/esm/sdds-slider.entry.js +332 -0
- package/dist/esm/sdds-spinner.entry.js +17 -0
- package/dist/esm/sdds-table-body-row-expandable.entry.js +77 -0
- package/dist/esm/sdds-table-body.entry.js +285 -0
- package/dist/esm/sdds-table-footer.entry.js +161 -0
- package/dist/esm/sdds-table-header.entry.js +96 -0
- package/dist/esm/sdds-table-toolbar.entry.js +62 -0
- package/dist/esm/sdds-table.entry.js +65 -0
- package/dist/esm/sdds-textarea.entry.js +57 -0
- package/dist/esm/sdds-textfield.entry.js +78 -0
- package/dist/esm/sdds-tooltip.entry.js +91 -0
- package/dist/esm/tegel.js +17 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/tegel/index.esm.js +0 -0
- package/dist/tegel/p-040efb32.entry.js +1 -0
- package/dist/tegel/p-12ca5cfa.entry.js +1 -0
- package/dist/tegel/p-157e1618.js +2 -0
- package/dist/tegel/p-1fe61cf6.entry.js +1 -0
- package/dist/tegel/p-2f376504.entry.js +1 -0
- package/dist/tegel/p-44ced895.entry.js +1 -0
- package/dist/tegel/p-4880f03d.entry.js +1 -0
- package/dist/tegel/p-4aba73a3.entry.js +1 -0
- package/dist/tegel/p-4b58a02c.entry.js +1 -0
- package/dist/tegel/p-4cb85347.entry.js +1 -0
- package/dist/tegel/p-52031b5a.entry.js +1 -0
- package/dist/tegel/p-677baf7f.entry.js +1 -0
- package/dist/tegel/p-71797eaf.entry.js +1 -0
- package/dist/tegel/p-7373284c.entry.js +1 -0
- package/dist/tegel/p-7451779b.entry.js +1 -0
- package/dist/tegel/p-77aeea3b.entry.js +1 -0
- package/dist/tegel/p-8582d6a7.entry.js +1 -0
- package/dist/tegel/p-96021bd0.entry.js +1 -0
- package/dist/tegel/p-9d8caf51.entry.js +1 -0
- package/dist/tegel/p-a5919930.entry.js +1 -0
- package/dist/tegel/p-b01cface.entry.js +1 -0
- package/dist/tegel/p-bf896643.entry.js +1 -0
- package/dist/tegel/p-c311725c.entry.js +1 -0
- package/dist/tegel/p-cf72dfd9.entry.js +1 -0
- package/dist/tegel/p-d91caec6.entry.js +1 -0
- package/dist/tegel/p-e10eec33.entry.js +1 -0
- package/dist/tegel/p-ec26fc38.js +1 -0
- package/dist/tegel/p-f2262a69.entry.js +1 -0
- package/dist/tegel/p-f2f7aa45.entry.js +1 -0
- package/dist/tegel/tegel.css +101 -0
- package/dist/tegel/tegel.esm.js +1 -0
- package/loader/cdn.js +3 -0
- package/loader/index.cjs.js +3 -0
- package/loader/index.d.ts +12 -0
- package/loader/index.es2017.js +3 -0
- package/loader/index.js +4 -0
- package/loader/package.json +11 -0
- package/package.json +1 -1
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
:root,
|
|
2
|
+
.sdds-theme-light {
|
|
3
|
+
--sdds-textarea-color: var(--sdds-grey-868);
|
|
4
|
+
--sdds-textarea-bg: var(--sdds-white);
|
|
5
|
+
--sdds-textarea-placeholder: var(--sdds-grey-500);
|
|
6
|
+
--sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
|
|
7
|
+
--sdds-textarea-on-white-bg: var(--sdds-grey-50);
|
|
8
|
+
--sdds-textarea-disabled-color: var(--sdds-grey-400);
|
|
9
|
+
--sdds-textarea-disabled-bg: var(--sdds-white);
|
|
10
|
+
--sdds-textarea-disabled-placeholder: var(--sdds-grey-400);
|
|
11
|
+
--sdds-textarea-disabled-label: var(--sdds-grey-400);
|
|
12
|
+
--sdds-textarea-label-color: var(--sdds-grey-958);
|
|
13
|
+
--sdds-textarea-label-inside-color: var(--sdds-grey-700);
|
|
14
|
+
--sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
|
|
15
|
+
--sdds-textarea-helper: var(--sdds-grey-700);
|
|
16
|
+
--sdds-textarea-helper-error: var(--sdds-red-500);
|
|
17
|
+
--sdds-textarea-bar: var(--sdds-blue-400);
|
|
18
|
+
--sdds-textarea-bar-error: var(--sdds-red-500);
|
|
19
|
+
--sdds-textarea-textcounter: var(--sdds-grey-700);
|
|
20
|
+
--sdds-textarea-textcounter-divider: var(--sdds-grey-500);
|
|
21
|
+
--sdds-textarea-border-bottom: var(--sdds-grey-400);
|
|
22
|
+
--sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
|
|
23
|
+
--sdds-textarea-border-bottom-success: var(--sdds-grey-800);
|
|
24
|
+
--sdds-textarea-border-bottom-error: var(--sdds-red-500);
|
|
25
|
+
--sdds-textarea-icon-read-only-color: var(--sdds-white);
|
|
26
|
+
--sdds-textarea-icon-read-only-label-color: var(--sdds-grey-800);
|
|
27
|
+
--sdds-textarea-resize-icon: var(--sdds-grey-500);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.sdds-theme-dark {
|
|
31
|
+
--sdds-textarea-color: var(--sdds-grey-868);
|
|
32
|
+
--sdds-textarea-bg: var(--sdds-red);
|
|
33
|
+
--sdds-textarea-placeholder: var(--sdds-grey-500);
|
|
34
|
+
--sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
|
|
35
|
+
--sdds-textarea-on-white-bg: var(--sdds-grey-50);
|
|
36
|
+
--sdds-textarea-disabled-color: var(--sdds-grey-400);
|
|
37
|
+
--sdds-textarea-disabled-bg: var(--sdds-red);
|
|
38
|
+
--sdds-textarea-disabled-placeholder: var(--sdds-grey-400);
|
|
39
|
+
--sdds-textarea-disabled-label: var(--sdds-grey-400);
|
|
40
|
+
--sdds-textarea-label-color: var(--sdds-grey-958);
|
|
41
|
+
--sdds-textarea-label-inside-color: var(--sdds-grey-700);
|
|
42
|
+
--sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
|
|
43
|
+
--sdds-textarea-helper: var(--sdds-grey-700);
|
|
44
|
+
--sdds-textarea-helper-error: var(--sdds-red-500);
|
|
45
|
+
--sdds-textarea-bar: var(--sdds-blue-400);
|
|
46
|
+
--sdds-textarea-bar-error: var(--sdds-red-500);
|
|
47
|
+
--sdds-textarea-textcounter: var(--sdds-grey-700);
|
|
48
|
+
--sdds-textarea-textcounter-divider: var(--sdds-grey-500);
|
|
49
|
+
--sdds-textarea-border-bottom: var(--sdds-grey-400);
|
|
50
|
+
--sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
|
|
51
|
+
--sdds-textarea-border-bottom-success: var(--sdds-grey-800);
|
|
52
|
+
--sdds-textarea-border-bottom-error: var(--sdds-red-500);
|
|
53
|
+
--sdds-textarea-icon-read-only-color: var(--sdds-white);
|
|
54
|
+
--sdds-textarea-icon-read-only-label-color: var(--sdds-grey-800);
|
|
55
|
+
--sdds-textarea-resize-icon: var(--sdds-grey-500);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.sdds-on-white-bg {
|
|
59
|
+
--sdds-textarea-bg: var(--sdds-textarea-on-white-bg);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.sdds-textarea-container {
|
|
63
|
+
border-radius: 4px 4px 0 0;
|
|
64
|
+
position: relative;
|
|
65
|
+
box-sizing: border-box;
|
|
66
|
+
height: auto;
|
|
67
|
+
width: 100%;
|
|
68
|
+
min-width: 208px;
|
|
69
|
+
display: inline-flex;
|
|
70
|
+
background-color: transparent;
|
|
71
|
+
flex-flow: row wrap;
|
|
72
|
+
border-bottom: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.sdds-textarea-container .sdds-textarea-wrapper {
|
|
76
|
+
position: relative;
|
|
77
|
+
width: unset;
|
|
78
|
+
min-width: 100%;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before, .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after {
|
|
82
|
+
content: "";
|
|
83
|
+
height: 2px;
|
|
84
|
+
width: 0;
|
|
85
|
+
position: absolute;
|
|
86
|
+
background: var(--sdds-textarea-bar);
|
|
87
|
+
transition: 0.35s ease all;
|
|
88
|
+
}
|
|
89
|
+
.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before {
|
|
90
|
+
left: 50%;
|
|
91
|
+
}
|
|
92
|
+
.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after {
|
|
93
|
+
right: 50%;
|
|
94
|
+
}
|
|
95
|
+
.sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after, .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before {
|
|
96
|
+
top: calc(100% - 2px);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.sdds-textarea-input {
|
|
100
|
+
border-radius: 4px 4px 0 0;
|
|
101
|
+
width: 100%;
|
|
102
|
+
box-sizing: border-box;
|
|
103
|
+
margin: 0;
|
|
104
|
+
border: none;
|
|
105
|
+
outline: none;
|
|
106
|
+
height: 100%;
|
|
107
|
+
color: var(--sdds-textarea-color);
|
|
108
|
+
background-color: var(--sdds-textarea-bg);
|
|
109
|
+
font: var(--sdds-detail-02);
|
|
110
|
+
letter-spacing: var(--sdds-detail-02-ls);
|
|
111
|
+
padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
|
|
112
|
+
display: block;
|
|
113
|
+
resize: vertical;
|
|
114
|
+
border-bottom: 1px solid var(--sdds-textarea-border-bottom);
|
|
115
|
+
transition: border-bottom-color 200ms ease;
|
|
116
|
+
}
|
|
117
|
+
.sdds-textarea-input::placeholder {
|
|
118
|
+
opacity: 1;
|
|
119
|
+
color: var(--sdds-textarea-placeholder);
|
|
120
|
+
}
|
|
121
|
+
.sdds-textarea-input:focus::placeholder {
|
|
122
|
+
color: var(--sdds-textarea-placeholder-focus-color);
|
|
123
|
+
}
|
|
124
|
+
.sdds-textarea-input:disabled {
|
|
125
|
+
background-color: var(--sdds-textarea-disabled-bg);
|
|
126
|
+
color: var(--sdds-textarea-disabled-color);
|
|
127
|
+
cursor: not-allowed;
|
|
128
|
+
}
|
|
129
|
+
.sdds-textarea-input:disabled::placeholder {
|
|
130
|
+
color: var(--sdds-textarea-disabled-placeholder);
|
|
131
|
+
}
|
|
132
|
+
.sdds-textarea-input:disabled ~ .sdds-textfield-label-inside {
|
|
133
|
+
color: var(--sdds-textarea-disabled-label);
|
|
134
|
+
}
|
|
135
|
+
.sdds-textarea-input::-webkit-resizer {
|
|
136
|
+
display: none;
|
|
137
|
+
}
|
|
138
|
+
.sdds-textarea-input:hover {
|
|
139
|
+
border-bottom-color: var(--sdds-textarea-border-bottom-hover);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.sdds-textarea-resizer-icon {
|
|
143
|
+
color: var(--sdds-textarea-resize-icon);
|
|
144
|
+
position: absolute;
|
|
145
|
+
display: block;
|
|
146
|
+
bottom: 2px;
|
|
147
|
+
right: 1px;
|
|
148
|
+
padding-bottom: 2px;
|
|
149
|
+
padding-right: 2px;
|
|
150
|
+
pointer-events: none;
|
|
151
|
+
background-color: var(--sdds-textarea-bg);
|
|
152
|
+
}
|
|
153
|
+
.sdds-textarea-resizer-icon svg {
|
|
154
|
+
display: block;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.sdds-textarea-label {
|
|
158
|
+
font: var(--sdds-detail-05);
|
|
159
|
+
letter-spacing: var(--sdds-detail-05-ls);
|
|
160
|
+
display: block;
|
|
161
|
+
z-index: 2;
|
|
162
|
+
margin-bottom: var(--sdds-spacing-element-8);
|
|
163
|
+
color: var(--sdds-textarea-label-color);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-label {
|
|
167
|
+
font: var(--sdds-detail-02);
|
|
168
|
+
letter-spacing: var(--sdds-detail-02-ls);
|
|
169
|
+
transition: 0.1s ease all;
|
|
170
|
+
color: var(--sdds-textarea-label-inside-color);
|
|
171
|
+
position: absolute;
|
|
172
|
+
top: var(--sdds-spacing-element-20);
|
|
173
|
+
left: var(--sdds-spacing-element-16);
|
|
174
|
+
}
|
|
175
|
+
.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input::placeholder {
|
|
176
|
+
color: transparent;
|
|
177
|
+
}
|
|
178
|
+
.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input ::placeholder {
|
|
179
|
+
color: transparent;
|
|
180
|
+
}
|
|
181
|
+
.sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input:focus::placeholder {
|
|
182
|
+
transition: color 0.35s ease;
|
|
183
|
+
color: var(--sdds-textarea-placeholder-focus-color);
|
|
184
|
+
}
|
|
185
|
+
.sdds-textarea-container.sdds-textarea-focus.sdds-textarea-label-inside .sdds-textarea-label {
|
|
186
|
+
font: var(--sdds-detail-07);
|
|
187
|
+
letter-spacing: var(--sdds-detail-07-ls);
|
|
188
|
+
top: var(--sdds-spacing-element-8);
|
|
189
|
+
}
|
|
190
|
+
.sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::before, .sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::after {
|
|
191
|
+
width: 50%;
|
|
192
|
+
}
|
|
193
|
+
.sdds-textarea-container.sdds-textarea-data.sdds-textarea-label-inside .sdds-textarea-label {
|
|
194
|
+
font: var(--sdds-detail-07);
|
|
195
|
+
letter-spacing: var(--sdds-detail-07-ls);
|
|
196
|
+
top: var(--sdds-spacing-element-8);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.sdds-textarea-textcounter {
|
|
200
|
+
font: var(--sdds-detail-05);
|
|
201
|
+
letter-spacing: var(--sdds-detail-05-ls);
|
|
202
|
+
color: var(--sdds-textarea-textcounter);
|
|
203
|
+
float: right;
|
|
204
|
+
flex-basis: 100%;
|
|
205
|
+
text-align: right;
|
|
206
|
+
padding-top: var(--sdds-spacing-element-4);
|
|
207
|
+
}
|
|
208
|
+
.sdds-textarea-textcounter .sdds-textfield-textcounter-divider {
|
|
209
|
+
font: var(--sdds-detail-05);
|
|
210
|
+
letter-spacing: var(--sdds-detail-05-ls);
|
|
211
|
+
color: var(--sdds-textarea-textcounter-divider);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.sdds-textarea-helper {
|
|
215
|
+
font: var(--sdds-detail-05);
|
|
216
|
+
letter-spacing: var(--sdds-detail-05-ls);
|
|
217
|
+
display: block;
|
|
218
|
+
padding-top: var(--sdds-spacing-element-4);
|
|
219
|
+
color: var(--sdds-textarea-helper);
|
|
220
|
+
flex-grow: 2;
|
|
221
|
+
flex-basis: auto;
|
|
222
|
+
}
|
|
223
|
+
.sdds-textarea-helper ~ .sdds-textarea-textcounter {
|
|
224
|
+
flex-basis: auto;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.sdds-textarea-success .sdds-textarea-input {
|
|
228
|
+
border-bottom-color: var(--sdds-textarea-border-bottom-success);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.sdds-textarea-error .sdds-textarea-input {
|
|
232
|
+
border-bottom-color: var(--sdds-textarea-border-bottom-error);
|
|
233
|
+
}
|
|
234
|
+
.sdds-textarea-error .sdds-textarea-wrapper::after, .sdds-textarea-error .sdds-textarea-wrapper::before {
|
|
235
|
+
background: var(--sdds-textarea-bar-error);
|
|
236
|
+
}
|
|
237
|
+
.sdds-textarea-error .sdds-textarea-helper {
|
|
238
|
+
color: var(--sdds-textarea-helper-error);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.sdds-textarea-disabled .sdds-textarea-input {
|
|
242
|
+
border-bottom-color: transparent;
|
|
243
|
+
}
|
|
244
|
+
.sdds-textarea-disabled .sdds-textarea-label {
|
|
245
|
+
color: var(--sdds-textarea-disabled-label);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.sdds-textarea-icon__readonly {
|
|
249
|
+
display: none;
|
|
250
|
+
position: absolute;
|
|
251
|
+
right: 18px;
|
|
252
|
+
top: 18px;
|
|
253
|
+
}
|
|
254
|
+
.sdds-textarea-icon__readonly-label {
|
|
255
|
+
display: none;
|
|
256
|
+
position: absolute;
|
|
257
|
+
right: 18px;
|
|
258
|
+
top: 48px;
|
|
259
|
+
font: var(--sdds-detail-05);
|
|
260
|
+
letter-spacing: var(--sdds-detail-05-ls);
|
|
261
|
+
padding: 8px;
|
|
262
|
+
color: var(--sdds-textarea-icon-read-only-label-color);
|
|
263
|
+
background-color: var(--sdds-textarea-icon-read-only-label-bg);
|
|
264
|
+
white-space: nowrap;
|
|
265
|
+
border-radius: 4px 0 4px 4px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.sdds-textarea-readonly {
|
|
269
|
+
pointer-events: none;
|
|
270
|
+
}
|
|
271
|
+
.sdds-textarea-readonly .sdds-textarea-icon__readonly {
|
|
272
|
+
display: block;
|
|
273
|
+
}
|
|
274
|
+
.sdds-textarea-readonly .sdds-textarea-icon__readonly:hover ~ .sdds-textarea-icon__readonly-label {
|
|
275
|
+
display: block;
|
|
276
|
+
}
|
|
277
|
+
.sdds-textarea-readonly .sdds-textfield-input {
|
|
278
|
+
padding-right: 54px;
|
|
279
|
+
background-color: transparent;
|
|
280
|
+
}
|
|
281
|
+
.sdds-textarea-readonly .sdds-textfield-container {
|
|
282
|
+
background-color: transparent;
|
|
283
|
+
}
|
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
export class Textarea {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.label = '';
|
|
5
|
+
this.name = '';
|
|
6
|
+
this.helper = '';
|
|
7
|
+
this.cols = undefined;
|
|
8
|
+
this.rows = undefined;
|
|
9
|
+
this.labelPosition = 'no-label';
|
|
10
|
+
this.placeholder = '';
|
|
11
|
+
this.value = '';
|
|
12
|
+
this.disabled = false;
|
|
13
|
+
this.readOnly = false;
|
|
14
|
+
this.state = 'default';
|
|
15
|
+
this.maxLength = undefined;
|
|
16
|
+
this.modeVariant = 'primary';
|
|
17
|
+
this.autoFocus = false;
|
|
18
|
+
this.focusInput = undefined;
|
|
19
|
+
}
|
|
20
|
+
// Data input event in value prop
|
|
21
|
+
handleInput(e) {
|
|
22
|
+
this.value = e.target.value;
|
|
23
|
+
}
|
|
24
|
+
/* Set the input as focus when clicking the whole textfield with suffix/prefix */
|
|
25
|
+
handleFocusClick() {
|
|
26
|
+
this.textEl.focus();
|
|
27
|
+
this.focusInput = true;
|
|
28
|
+
}
|
|
29
|
+
handleChange(e) {
|
|
30
|
+
this.customChange.emit(e);
|
|
31
|
+
}
|
|
32
|
+
render() {
|
|
33
|
+
var _a;
|
|
34
|
+
return (h("div", { class: `
|
|
35
|
+
sdds-textarea-container
|
|
36
|
+
${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}
|
|
37
|
+
${this.focusInput ? 'sdds-textarea-focus' : ''}
|
|
38
|
+
${this.disabled ? 'sdds-textarea-disabled' : ''}
|
|
39
|
+
${this.readOnly ? 'sdds-textarea-readonly' : ''}
|
|
40
|
+
${this.modeVariant === 'primary' ? 'sdds-on-white-bg' : ''}
|
|
41
|
+
${this.value ? 'sdds-textarea-data' : ''}
|
|
42
|
+
${this.state === 'error' || this.state === 'success' ? `sdds-textarea-${this.state}` : ''}
|
|
43
|
+
`, onClick: () => this.handleFocusClick() }, this.labelPosition !== 'no-label' && (h("span", { class: 'sdds-textarea-label' }, this.label)), h("div", { class: "sdds-textarea-wrapper" }, h("textarea", { onFocus: () => {
|
|
44
|
+
this.focusInput = true;
|
|
45
|
+
}, onBlur: () => {
|
|
46
|
+
this.focusInput = false;
|
|
47
|
+
}, class: 'sdds-textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autoFocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e) }), h("span", { class: "sdds-textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("svg", { class: "sdds-textarea-icon__readonly", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6242 10.7946L17.1365 7.28228C17.6247 6.79412 17.6247 6.00266 17.1365 5.5145L14.485 2.86295C13.9968 2.37479 13.2054 2.37479 12.7172 2.86295L9.20483 6.3753L10.0887 7.25919L11.3914 5.95654L14.0429 8.6081L12.7403 9.91075L13.6242 10.7946ZM13.6011 3.74684L16.2526 6.39839L14.9268 7.72421L12.2753 5.07265L13.6011 3.74684Z", fill: "#0D0F13" }), h("path", { d: "M7.43707 9.91075L5.00974 12.3381L4.01561 15.9837L7.6613 14.9896L10.0886 12.5623L10.9725 13.4462L8.54519 15.8735C8.39136 16.0274 8.20004 16.1384 7.99014 16.1956L3.28932 17.4774C3.07294 17.5364 2.84154 17.475 2.68295 17.3164C2.52436 17.1578 2.46291 16.9264 2.52191 16.71L3.80377 12.0092C3.861 11.7993 3.97202 11.608 4.12585 11.4542L6.55318 9.02686L7.43707 9.91075Z", fill: "#0D0F13" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.43306 1.43306C1.67714 1.18898 2.07287 1.18898 2.31695 1.43306L18.5671 17.6832C18.8112 17.9273 18.8112 18.323 18.5671 18.5671C18.323 18.8112 17.9273 18.8112 17.6832 18.5671L1.43306 2.31695C1.18898 2.07287 1.18898 1.67714 1.43306 1.43306Z", fill: "#0D0F13" })), h("span", { class: "sdds-textarea-icon__readonly-label" }, "This field is non-editable")), this.helper.length > 0 && h("span", { class: 'sdds-textarea-helper' }, this.helper), this.maxLength > 0 && (h("div", { class: 'sdds-textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
|
|
48
|
+
}
|
|
49
|
+
static get is() { return "sdds-textarea"; }
|
|
50
|
+
static get originalStyleUrls() {
|
|
51
|
+
return {
|
|
52
|
+
"$": ["textarea.scss"]
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
static get styleUrls() {
|
|
56
|
+
return {
|
|
57
|
+
"$": ["textarea.css"]
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
static get properties() {
|
|
61
|
+
return {
|
|
62
|
+
"label": {
|
|
63
|
+
"type": "string",
|
|
64
|
+
"mutable": false,
|
|
65
|
+
"complexType": {
|
|
66
|
+
"original": "string",
|
|
67
|
+
"resolved": "string",
|
|
68
|
+
"references": {}
|
|
69
|
+
},
|
|
70
|
+
"required": false,
|
|
71
|
+
"optional": false,
|
|
72
|
+
"docs": {
|
|
73
|
+
"tags": [],
|
|
74
|
+
"text": "Label text"
|
|
75
|
+
},
|
|
76
|
+
"attribute": "label",
|
|
77
|
+
"reflect": false,
|
|
78
|
+
"defaultValue": "''"
|
|
79
|
+
},
|
|
80
|
+
"name": {
|
|
81
|
+
"type": "string",
|
|
82
|
+
"mutable": false,
|
|
83
|
+
"complexType": {
|
|
84
|
+
"original": "string",
|
|
85
|
+
"resolved": "string",
|
|
86
|
+
"references": {}
|
|
87
|
+
},
|
|
88
|
+
"required": false,
|
|
89
|
+
"optional": false,
|
|
90
|
+
"docs": {
|
|
91
|
+
"tags": [],
|
|
92
|
+
"text": "Name attribute"
|
|
93
|
+
},
|
|
94
|
+
"attribute": "name",
|
|
95
|
+
"reflect": false,
|
|
96
|
+
"defaultValue": "''"
|
|
97
|
+
},
|
|
98
|
+
"helper": {
|
|
99
|
+
"type": "string",
|
|
100
|
+
"mutable": false,
|
|
101
|
+
"complexType": {
|
|
102
|
+
"original": "string",
|
|
103
|
+
"resolved": "string",
|
|
104
|
+
"references": {}
|
|
105
|
+
},
|
|
106
|
+
"required": false,
|
|
107
|
+
"optional": false,
|
|
108
|
+
"docs": {
|
|
109
|
+
"tags": [],
|
|
110
|
+
"text": "Helper text"
|
|
111
|
+
},
|
|
112
|
+
"attribute": "helper",
|
|
113
|
+
"reflect": false,
|
|
114
|
+
"defaultValue": "''"
|
|
115
|
+
},
|
|
116
|
+
"cols": {
|
|
117
|
+
"type": "number",
|
|
118
|
+
"mutable": false,
|
|
119
|
+
"complexType": {
|
|
120
|
+
"original": "number",
|
|
121
|
+
"resolved": "number",
|
|
122
|
+
"references": {}
|
|
123
|
+
},
|
|
124
|
+
"required": false,
|
|
125
|
+
"optional": false,
|
|
126
|
+
"docs": {
|
|
127
|
+
"tags": [],
|
|
128
|
+
"text": "Textarea cols attribute"
|
|
129
|
+
},
|
|
130
|
+
"attribute": "cols",
|
|
131
|
+
"reflect": false
|
|
132
|
+
},
|
|
133
|
+
"rows": {
|
|
134
|
+
"type": "number",
|
|
135
|
+
"mutable": false,
|
|
136
|
+
"complexType": {
|
|
137
|
+
"original": "number",
|
|
138
|
+
"resolved": "number",
|
|
139
|
+
"references": {}
|
|
140
|
+
},
|
|
141
|
+
"required": false,
|
|
142
|
+
"optional": false,
|
|
143
|
+
"docs": {
|
|
144
|
+
"tags": [],
|
|
145
|
+
"text": "Textarea rows attribute"
|
|
146
|
+
},
|
|
147
|
+
"attribute": "rows",
|
|
148
|
+
"reflect": false
|
|
149
|
+
},
|
|
150
|
+
"labelPosition": {
|
|
151
|
+
"type": "string",
|
|
152
|
+
"mutable": false,
|
|
153
|
+
"complexType": {
|
|
154
|
+
"original": "'inside' | 'outside' | 'no-label'",
|
|
155
|
+
"resolved": "\"inside\" | \"no-label\" | \"outside\"",
|
|
156
|
+
"references": {}
|
|
157
|
+
},
|
|
158
|
+
"required": false,
|
|
159
|
+
"optional": false,
|
|
160
|
+
"docs": {
|
|
161
|
+
"tags": [],
|
|
162
|
+
"text": "Position of the label for the textfield."
|
|
163
|
+
},
|
|
164
|
+
"attribute": "label-position",
|
|
165
|
+
"reflect": false,
|
|
166
|
+
"defaultValue": "'no-label'"
|
|
167
|
+
},
|
|
168
|
+
"placeholder": {
|
|
169
|
+
"type": "string",
|
|
170
|
+
"mutable": false,
|
|
171
|
+
"complexType": {
|
|
172
|
+
"original": "string",
|
|
173
|
+
"resolved": "string",
|
|
174
|
+
"references": {}
|
|
175
|
+
},
|
|
176
|
+
"required": false,
|
|
177
|
+
"optional": false,
|
|
178
|
+
"docs": {
|
|
179
|
+
"tags": [],
|
|
180
|
+
"text": "Placeholder text"
|
|
181
|
+
},
|
|
182
|
+
"attribute": "placeholder",
|
|
183
|
+
"reflect": false,
|
|
184
|
+
"defaultValue": "''"
|
|
185
|
+
},
|
|
186
|
+
"value": {
|
|
187
|
+
"type": "string",
|
|
188
|
+
"mutable": false,
|
|
189
|
+
"complexType": {
|
|
190
|
+
"original": "string",
|
|
191
|
+
"resolved": "string",
|
|
192
|
+
"references": {}
|
|
193
|
+
},
|
|
194
|
+
"required": false,
|
|
195
|
+
"optional": false,
|
|
196
|
+
"docs": {
|
|
197
|
+
"tags": [],
|
|
198
|
+
"text": "Value of the input text"
|
|
199
|
+
},
|
|
200
|
+
"attribute": "value",
|
|
201
|
+
"reflect": false,
|
|
202
|
+
"defaultValue": "''"
|
|
203
|
+
},
|
|
204
|
+
"disabled": {
|
|
205
|
+
"type": "boolean",
|
|
206
|
+
"mutable": false,
|
|
207
|
+
"complexType": {
|
|
208
|
+
"original": "boolean",
|
|
209
|
+
"resolved": "boolean",
|
|
210
|
+
"references": {}
|
|
211
|
+
},
|
|
212
|
+
"required": false,
|
|
213
|
+
"optional": false,
|
|
214
|
+
"docs": {
|
|
215
|
+
"tags": [],
|
|
216
|
+
"text": "Set input in disabled state"
|
|
217
|
+
},
|
|
218
|
+
"attribute": "disabled",
|
|
219
|
+
"reflect": false,
|
|
220
|
+
"defaultValue": "false"
|
|
221
|
+
},
|
|
222
|
+
"readOnly": {
|
|
223
|
+
"type": "boolean",
|
|
224
|
+
"mutable": false,
|
|
225
|
+
"complexType": {
|
|
226
|
+
"original": "boolean",
|
|
227
|
+
"resolved": "boolean",
|
|
228
|
+
"references": {}
|
|
229
|
+
},
|
|
230
|
+
"required": false,
|
|
231
|
+
"optional": false,
|
|
232
|
+
"docs": {
|
|
233
|
+
"tags": [],
|
|
234
|
+
"text": "Set input in readonly state"
|
|
235
|
+
},
|
|
236
|
+
"attribute": "read-only",
|
|
237
|
+
"reflect": false,
|
|
238
|
+
"defaultValue": "false"
|
|
239
|
+
},
|
|
240
|
+
"state": {
|
|
241
|
+
"type": "string",
|
|
242
|
+
"mutable": false,
|
|
243
|
+
"complexType": {
|
|
244
|
+
"original": "'error' | 'success' | 'default'",
|
|
245
|
+
"resolved": "\"default\" | \"error\" | \"success\"",
|
|
246
|
+
"references": {}
|
|
247
|
+
},
|
|
248
|
+
"required": false,
|
|
249
|
+
"optional": false,
|
|
250
|
+
"docs": {
|
|
251
|
+
"tags": [],
|
|
252
|
+
"text": "Error state of input"
|
|
253
|
+
},
|
|
254
|
+
"attribute": "state",
|
|
255
|
+
"reflect": false,
|
|
256
|
+
"defaultValue": "'default'"
|
|
257
|
+
},
|
|
258
|
+
"maxLength": {
|
|
259
|
+
"type": "number",
|
|
260
|
+
"mutable": false,
|
|
261
|
+
"complexType": {
|
|
262
|
+
"original": "number",
|
|
263
|
+
"resolved": "number",
|
|
264
|
+
"references": {}
|
|
265
|
+
},
|
|
266
|
+
"required": false,
|
|
267
|
+
"optional": false,
|
|
268
|
+
"docs": {
|
|
269
|
+
"tags": [],
|
|
270
|
+
"text": "Max length of input"
|
|
271
|
+
},
|
|
272
|
+
"attribute": "max-length",
|
|
273
|
+
"reflect": false
|
|
274
|
+
},
|
|
275
|
+
"modeVariant": {
|
|
276
|
+
"type": "string",
|
|
277
|
+
"mutable": false,
|
|
278
|
+
"complexType": {
|
|
279
|
+
"original": "'primary' | 'secondary'",
|
|
280
|
+
"resolved": "\"primary\" | \"secondary\"",
|
|
281
|
+
"references": {}
|
|
282
|
+
},
|
|
283
|
+
"required": false,
|
|
284
|
+
"optional": false,
|
|
285
|
+
"docs": {
|
|
286
|
+
"tags": [],
|
|
287
|
+
"text": "Variant of the tabs, primary= on white, secondary= on grey50"
|
|
288
|
+
},
|
|
289
|
+
"attribute": "mode-variant",
|
|
290
|
+
"reflect": false,
|
|
291
|
+
"defaultValue": "'primary'"
|
|
292
|
+
},
|
|
293
|
+
"autoFocus": {
|
|
294
|
+
"type": "boolean",
|
|
295
|
+
"mutable": false,
|
|
296
|
+
"complexType": {
|
|
297
|
+
"original": "boolean",
|
|
298
|
+
"resolved": "boolean",
|
|
299
|
+
"references": {}
|
|
300
|
+
},
|
|
301
|
+
"required": false,
|
|
302
|
+
"optional": false,
|
|
303
|
+
"docs": {
|
|
304
|
+
"tags": [],
|
|
305
|
+
"text": "Control of autofocus"
|
|
306
|
+
},
|
|
307
|
+
"attribute": "auto-focus",
|
|
308
|
+
"reflect": false,
|
|
309
|
+
"defaultValue": "false"
|
|
310
|
+
}
|
|
311
|
+
};
|
|
312
|
+
}
|
|
313
|
+
static get states() {
|
|
314
|
+
return {
|
|
315
|
+
"focusInput": {}
|
|
316
|
+
};
|
|
317
|
+
}
|
|
318
|
+
static get events() {
|
|
319
|
+
return [{
|
|
320
|
+
"method": "customChange",
|
|
321
|
+
"name": "customChange",
|
|
322
|
+
"bubbles": true,
|
|
323
|
+
"cancelable": true,
|
|
324
|
+
"composed": true,
|
|
325
|
+
"docs": {
|
|
326
|
+
"tags": [],
|
|
327
|
+
"text": "Change event for the textarea"
|
|
328
|
+
},
|
|
329
|
+
"complexType": {
|
|
330
|
+
"original": "any",
|
|
331
|
+
"resolved": "any",
|
|
332
|
+
"references": {}
|
|
333
|
+
}
|
|
334
|
+
}];
|
|
335
|
+
}
|
|
336
|
+
}
|