@sapudex/web-components 0.231.3 → 0.231.5
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/Assets.d.ts +1 -0
- package/dist/Assets.js +1 -0
- package/dist/Assets.js.map +1 -1
- package/dist/ControlButton.d.ts +3 -1
- package/dist/ControlButton.js +13 -3
- package/dist/ControlButton.js.map +1 -1
- package/dist/CountrySelector.d.ts +2 -2
- package/dist/CountrySelector.js +8 -5
- package/dist/CountrySelector.js.map +1 -1
- package/dist/DatePicker.js +2 -2
- package/dist/DatePicker.js.map +1 -1
- package/dist/FilterMenu.d.ts +23 -4
- package/dist/FilterMenu.js +70 -13
- package/dist/FilterMenu.js.map +1 -1
- package/dist/MastheadShell.d.ts +6 -3
- package/dist/MastheadShell.js +14 -4
- package/dist/MastheadShell.js.map +1 -1
- package/dist/TextField.d.ts +19 -10
- package/dist/TextField.js +42 -29
- package/dist/TextField.js.map +1 -1
- package/dist/assets/ar-4f0abe88.js +1 -0
- package/dist/assets/ar_EG-33c30640.js +1 -0
- package/dist/assets/ar_SA-4fb0119e.js +1 -0
- package/dist/assets/bg-4dfbac34.js +1 -0
- package/dist/assets/{bundle.esm-d507a7fc.js → bundle.esm-c89b7e7f.js} +191 -191
- package/dist/assets/ca-0adfb0a5.js +1 -0
- package/dist/assets/cnr-7b8ee13c.js +1 -0
- package/dist/assets/cs-7ce6fc77.js +1 -0
- package/dist/assets/da-d531cb4b.js +1 -0
- package/dist/assets/de-0956bb86.js +1 -0
- package/dist/assets/de_AT-1d4a673c.js +1 -0
- package/dist/assets/de_CH-b0aa3afe.js +1 -0
- package/dist/assets/el-087bca7a.js +1 -0
- package/dist/assets/el_CY-e2999371.js +1 -0
- package/dist/assets/en-5e51a9cc.js +1 -0
- package/dist/assets/en_AU-d8fe8569.js +1 -0
- package/dist/assets/en_GB-ba18957c.js +1 -0
- package/dist/assets/en_HK-95927212.js +1 -0
- package/dist/assets/en_IE-72dac8b7.js +1 -0
- package/dist/assets/en_IN-c51dcb94.js +1 -0
- package/dist/assets/en_NZ-799668bd.js +1 -0
- package/dist/assets/en_PG-322a9c1d.js +1 -0
- package/dist/assets/en_SG-e2817500.js +1 -0
- package/dist/assets/en_ZA-7a8893ed.js +1 -0
- package/dist/assets/es-a49e4234.js +1 -0
- package/dist/assets/es_AR-987273ce.js +1 -0
- package/dist/assets/es_BO-6407ce81.js +1 -0
- package/dist/assets/es_CL-bbd249e2.js +1 -0
- package/dist/assets/es_CO-5aadb676.js +1 -0
- package/dist/assets/es_MX-64ffbc24.js +1 -0
- package/dist/assets/es_PE-220c371e.js +1 -0
- package/dist/assets/es_UY-9608e924.js +1 -0
- package/dist/assets/es_VE-87def8b1.js +1 -0
- package/dist/assets/et-ed2e4c5e.js +1 -0
- package/dist/assets/fa-372c2ca8.js +1 -0
- package/dist/assets/fi-49cc59c4.js +1 -0
- package/dist/assets/fr-cb891f3c.js +1 -0
- package/dist/assets/fr_BE-49546add.js +1 -0
- package/dist/assets/fr_CA-de78fbe1.js +1 -0
- package/dist/assets/fr_CH-36c5581d.js +1 -0
- package/dist/assets/fr_LU-84ec0ca9.js +1 -0
- package/dist/assets/he-7010fec0.js +1 -0
- package/dist/assets/hi-011032b8.js +1 -0
- package/dist/assets/hr-cf6424f4.js +1 -0
- package/dist/assets/hu-de5c6410.js +1 -0
- package/dist/assets/id-d519ad13.js +1 -0
- package/dist/assets/it-7571a45f.js +1 -0
- package/dist/assets/it_CH-2d02acb4.js +1 -0
- package/dist/assets/ja-ed518694.js +1 -0
- package/dist/assets/kk-11548ca1.js +1 -0
- package/dist/assets/ko-ff650cea.js +1 -0
- package/dist/assets/lt-a55a76f9.js +1 -0
- package/dist/assets/lv-988dcda6.js +1 -0
- package/dist/assets/mk-6f2db893.js +1 -0
- package/dist/assets/ms-79ea2811.js +1 -0
- package/dist/assets/nb-d8116e03.js +1 -0
- package/dist/assets/nl-60ec308f.js +1 -0
- package/dist/assets/nl_BE-b51c75e9.js +1 -0
- package/dist/assets/pl-78f5b229.js +1 -0
- package/dist/assets/pt-a8c3a084.js +1 -0
- package/dist/assets/pt_PT-73b47e3d.js +1 -0
- package/dist/assets/ro-bb1a86ed.js +1 -0
- package/dist/assets/ru-3f49aae1.js +1 -0
- package/dist/assets/ru_UA-3eeb1b85.js +1 -0
- package/dist/assets/sk-e6cafcc8.js +1 -0
- package/dist/assets/sl-0bc16b8c.js +1 -0
- package/dist/assets/sr-08575b3a.js +1 -0
- package/dist/assets/sr_Latn-1440b74b.js +1 -0
- package/dist/assets/sv-f1bbb7c1.js +1 -0
- package/dist/assets/th-a4513b78.js +1 -0
- package/dist/assets/tr-f0f57c58.js +1 -0
- package/dist/assets/uk-f6e80b51.js +1 -0
- package/dist/assets/vi-52a2fc96.js +1 -0
- package/dist/assets/zh_CN-c4c6c916.js +1 -0
- package/dist/assets/zh_HK-e173672f.js +1 -0
- package/dist/assets/zh_SG-fcc2a69f.js +1 -0
- package/dist/assets/zh_TW-f1555202.js +1 -0
- package/dist/css/themes/DatePicker.css +1 -1
- package/dist/css/themes/Dropdown.css +1 -1
- package/dist/css/themes/FilterMenu.css +1 -1
- package/dist/css/themes/MastheadItem.css +1 -1
- package/dist/css/themes/MastheadMenu.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/SelectBox.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/TextField.css +1 -1
- package/dist/custom-elements-internal.json +6 -6
- package/dist/custom-elements.json +6 -6
- package/dist/generated/templates/CountrySelectorTemplate.lit.js +1 -2
- package/dist/generated/templates/CountrySelectorTemplate.lit.js.map +1 -1
- package/dist/generated/templates/DatePickerTemplate.lit.js +1 -2
- package/dist/generated/templates/DatePickerTemplate.lit.js.map +1 -1
- package/dist/generated/templates/FilterMenuTemplate.lit.js +2 -2
- package/dist/generated/templates/FilterMenuTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SearchableListBaseTemplate.lit.js +1 -1
- package/dist/generated/templates/SearchableListBaseTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SelectBoxTemplate.lit.js +3 -3
- package/dist/generated/templates/SelectBoxTemplate.lit.js.map +1 -1
- package/dist/generated/templates/TextFieldTemplate.lit.js +1 -1
- package/dist/generated/templates/TextFieldTemplate.lit.js.map +1 -1
- package/dist/generated/themes/DatePicker.css.js +1 -1
- package/dist/generated/themes/DatePicker.css.js.map +1 -1
- package/dist/generated/themes/Dropdown.css.js +1 -1
- package/dist/generated/themes/Dropdown.css.js.map +1 -1
- package/dist/generated/themes/FilterMenu.css.js +1 -1
- package/dist/generated/themes/FilterMenu.css.js.map +1 -1
- package/dist/generated/themes/MastheadItem.css.js +1 -1
- package/dist/generated/themes/MastheadItem.css.js.map +1 -1
- package/dist/generated/themes/MastheadMenu.css.js +1 -1
- package/dist/generated/themes/MastheadMenu.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/SelectBox.css.js +1 -1
- package/dist/generated/themes/SelectBox.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/generated/themes/TextField.css.js +1 -1
- package/dist/generated/themes/TextField.css.js.map +1 -1
- package/dist/web-types.json +4 -4
- package/package.json +2 -1
- package/src/Assets.ts +1 -0
- package/src/ControlButton.ts +16 -3
- package/src/CountrySelector.hbs +3 -9
- package/src/CountrySelector.ts +9 -6
- package/src/DatePicker.hbs +17 -27
- package/src/DatePicker.ts +2 -2
- package/src/FilterMenu.hbs +32 -36
- package/src/FilterMenu.ts +80 -17
- package/src/MastheadShell.ts +19 -7
- package/src/SearchableListBase.hbs +1 -1
- package/src/SelectBox.hbs +10 -12
- package/src/TextField.hbs +16 -14
- package/src/TextField.ts +86 -65
- package/src/generated/templates/CountrySelectorTemplate.lit.ts +1 -2
- package/src/generated/templates/DatePickerTemplate.lit.ts +1 -2
- package/src/generated/templates/FilterMenuTemplate.lit.ts +2 -2
- package/src/generated/templates/SearchableListBaseTemplate.lit.ts +1 -1
- package/src/generated/templates/SelectBoxTemplate.lit.ts +3 -3
- package/src/generated/templates/TextFieldTemplate.lit.ts +1 -1
- package/src/generated/themes/DatePicker.css.ts +1 -1
- package/src/generated/themes/Dropdown.css.ts +1 -1
- package/src/generated/themes/FilterMenu.css.ts +1 -1
- package/src/generated/themes/MastheadItem.css.ts +1 -1
- package/src/generated/themes/MastheadMenu.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/SelectBox.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/TextField.css.ts +1 -1
- package/src/themes/DatePicker.css +0 -6
- package/src/themes/Dropdown.css +1 -1
- package/src/themes/FilterMenu.css +2 -2
- package/src/themes/MastheadItem.css +2 -1
- package/src/themes/MastheadMenu.css +4 -4
- package/src/themes/SelectBox.css +1 -2
- package/src/themes/TextField.css +0 -26
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,sBAAsB,EAAC,OAAO,EAAC;CAC3G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/Slider.css.ts\",content:`:host{--udex-slider-color-track-start-point: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-track-active: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-handle-focus-range: var( --sapSlider_Selected_BorderColor, #0070f2 );--udex-slider-color-handle-active-background: var( --sapSlider_Active_HandleBackground, #ffffff );--udex-slider-color-handle-default-icon: var( --sapContent_Selected_ForegroundColor, #0040b0 );--udex-slider-radius-range-size: var(---udexRadiusM, .5rem)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v0-231-
|
|
1
|
+
{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,sBAAsB,EAAC,OAAO,EAAC;CAC3G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/Slider.css.ts\",content:`:host{--udex-slider-color-track-start-point: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-track-active: var( --sapSlider_Selected_Background, #0070f2 );--udex-slider-color-handle-focus-range: var( --sapSlider_Selected_BorderColor, #0070f2 );--udex-slider-color-handle-active-background: var( --sapSlider_Active_HandleBackground, #ffffff );--udex-slider-color-handle-default-icon: var( --sapContent_Selected_ForegroundColor, #0040b0 );--udex-slider-radius-range-size: var(---udexRadiusM, .5rem)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v0-231-5_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}\n`};\nexport default styleData;\n\t"]}
|
|
@@ -3,7 +3,7 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
|
|
|
3
3
|
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
4
4
|
registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
5
5
|
registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
|
|
6
|
-
const styleData = { packageName: "@sapudex/web-components", fileName: "themes/TextField.css.ts", content: `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}:host([active]) .udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state="Success"][displayonly]) .udex-text-field__wrap,:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,:host([value-state="Error"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover{border:none}:host([value-state="Error"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__wrap[open],:host([value-state="Error"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__wrap[open],:host([value-state="Warning"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([active]) [active].udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}:host [active].udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}
|
|
6
|
+
const styleData = { packageName: "@sapudex/web-components", fileName: "themes/TextField.css.ts", content: `:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__wrap:before{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state="Success"][displayonly]) .udex-text-field__wrap,:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,:host([value-state="Error"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover{border:none}:host([value-state="Error"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state="Error"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state="Error"]) .udex-text-field__wrap[open],:host([value-state="Error"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state="Warning"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state="Warning"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state="Warning"]) .udex-text-field__wrap[open],:host([value-state="Warning"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state="Success"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state="Success"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state="Success"]) .udex-text-field__wrap[open],:host([value-state="Success"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state="Error"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state="Warning"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state="Success"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}
|
|
7
7
|
` };
|
|
8
8
|
export default styleData;
|
|
9
9
|
//# sourceMappingURL=TextField.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TextField.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,yBAAyB,EAAC,OAAO,EAAC;CAC9G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/TextField.css.ts\",content:`:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__wrap:before{content:\"\";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}:host([active]) .udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state=\"Success\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Warning\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Error\"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state=\"Success\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Warning\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Error\"]) .udex-text-field__wrap:hover{border:none}:host([value-state=\"Error\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap[open],:host([value-state=\"Error\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state=\"Warning\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap[open],:host([value-state=\"Warning\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state=\"Success\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}:host([active]) [active].udex-text-field_icon-container{border-color:transparent;color:var(--udexColorGrey7, #475E75)}:host [active].udex-text-field_icon-container{border-color:var(--udexColorBlue4, #89D1FF);color:var(--udexColorBlue9, #0040B0)}:host([active]) .udex-text-field_icon-container:hover{border-color:var(--udexColorGrey7, #475E75);color:var(--udexColorGrey7, #475E75)}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}\n`};\nexport default styleData;\n\t"]}
|
|
1
|
+
{"version":3,"file":"TextField.css.js","sourceRoot":"","sources":["../../../src/generated/themes/TextField.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,yBAAyB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAElG,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,yBAAyB,EAAC,QAAQ,EAAC,yBAAyB,EAAC,OAAO,EAAC;CAC9G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@sapudex/web-components\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@sapudex/web-components\",fileName:\"themes/TextField.css.ts\",content:`:host{--udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));--udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));--udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));--udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);--udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);--udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);--udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);--udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);--udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));--udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));--udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));--udex-input-padding: 0 var(--udexSpacer12, 12px);--udex-input-min-width-xs-and-s: 100%;--udex-input-max-width: 100%}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border)}.udex-text-field__wrap:hover{border-color:var(--udex-input-color-standard-hover-border)}.udex-text-field__container{position:relative;font-family:var(--sapFontFamily, sans-serif);max-width:var(--udex-input-max-width);width:100%}@media (width < 640px){.udex-text-field__container{min-width:var(--udex-input-min-width-xs-and-s)}}:host([disabled]) .udex-text-field__container{opacity:var(--sapContent_DisabledOpacity)}.udex-text-field__input{width:100%;height:40px;font-size:var(--sapProgress_FontSize, 16px);font-family:inherit;line-height:24px;color:var(--udex-input-color-standard-default-typed-text);padding:var(--udex-input-padding);border-radius:var(--udexRadiusXS, 4px);box-sizing:border-box;font-weight:var(--udexTypographyFontWeightRegular, 400);background:transparent;border:none}.udex-text-field__input:focus{outline:none}:host(:not([_is-touched]):not([aria-expanded=\"true\"])[active]) .udex-text-field__wrap:before{content:\"\";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}.udex-text-field__wrap[open],:host([active]) .udex-text-field__wrap{border-color:var(--udex-input-color-standard-active-border);outline:0}.udex-text-field__wrap[open]:hover{border-color:var(--udex-input-color-standard-active-border)}:host([disabled]) .udex-text-field__wrap{border-color:var(--udex-input-color-disabled-border);background-color:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__wrap{border-color:var(--udex-input-color-read-only-default-border);background-color:var(--udex-input-color-read-only-default-background)}:host([value-state=\"Success\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Warning\"][displayonly]) .udex-text-field__wrap,:host([value-state=\"Error\"][displayonly]) .udex-text-field__wrap,:host([displayonly]) .udex-text-field__wrap{border:0;background-color:transparent;font-family:inherit}:host([displayonly]) .udex-text-field__wrap[open],:host([displayonly]) .udex-text-field__wrap{outline:0;border:0}:host([displayonly][value-state=\"Success\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Warning\"]) .udex-text-field__wrap:hover,:host([displayonly][value-state=\"Error\"]) .udex-text-field__wrap:hover{border:none}:host([value-state=\"Error\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-default-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-error-hover-border)}:host([value-state=\"Error\"]) .udex-text-field__wrap[open],:host([value-state=\"Error\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-error-active-border);outline:0}:host([value-state=\"Warning\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-default-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-warning-hover-border)}:host([value-state=\"Warning\"]) .udex-text-field__wrap[open],:host([value-state=\"Warning\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-warning-active-border);outline:0}:host([value-state=\"Success\"]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-default-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap:hover{border:1px solid var(--udex-input-color-success-hover-border)}:host([value-state=\"Success\"]) .udex-text-field__wrap[open],:host([value-state=\"Success\"][active]) .udex-text-field__wrap{border:1px solid var(--udex-input-color-success-active-border);outline:0}.udex-text-field__label{position:absolute;z-index:2;color:var(--udex-input-color-standard-default-label);transition:transform .15s ease-out,font-size .15s ease-out;line-height:24px;font-weight:var(--udexTypographyFontWeightRegular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--udexSpacer12) * 2)}.udex-text-field__container:dir(rtl) .udex-text-field_icon-container{left:1px;right:auto}.udex-text-field__container:dir(ltr) .udex-text-field__label,.udex-text-field__container:dir(rtl) .udex-text-field__label{top:9px}.udex-text-field__container:dir(ltr) .udex-text-field__label{left:12px}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:12px}:host([displayonly]:dir(ltr)) .udex-text-field__label,:host([displayonly]:dir(rtl)) .udex-text-field__label{padding:0}.udex-text-field__label.udex-text-field__label_active,:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label{line-height:18px;transform:translateY(-110%);padding:6px 4px 0;font-size:12px;background:linear-gradient(transparent 55%,var(--udex-input-color-standard-default-background-light) 45%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 55%,var(--udex-input-color-read-only-default-background) 45%)}:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,:host([displayonly]) .udex-text-field__label.udex-text-field__label_active{background-color:transparent;background:none}:host([disabled]) .udex-text-field__label{color:var(--udex-input-color-disabled-label)}.udex-text-field_icon-container{--sapContent_DisabledOpacity: 1;--sapButton_BorderWidth: 0 0 0 1px;--udex-control-button-large-height: 40px;--udex-control-button-large-width: 40px;position:relative;padding:var(--udexSpacer4, 4px)}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container{--udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);--sapButton_BorderWidth: 0 1px 0 0}:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container{--sapButton_BorderWidth: 0 1px 0 0}.udex-text-field__supporting-text{font-size:12px;line-height:18px;color:var(--udex-input-color-standard-default-supporting-text);padding:4px 12px;display:block;position:relative}:host([value-state=\"Error\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-error-default-supporting-text)}:host([value-state=\"Warning\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-warning-default-supporting-text)}:host([value-state=\"Success\"]) .udex-text-field__supporting-text{color:var(--udex-input-color-success-default-supporting-text)}.udex-text-field__icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-text-field__supporting-text-icon{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px);width:var(--sapContent_IconHeight, 16px);height:var(--sapContent_IconHeight, 16px)}.udex-text-field__input[type=number]::-webkit-outer-spin-button,.udex-text-field__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.udex-text-field__input[type=number]{-moz-appearance:textfield;appearance:textfield}.hidden-text{display:none}\n`};\nexport default styleData;\n\t"]}
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@sapudex/web-components",
|
|
4
|
-
"version": "0.231.
|
|
4
|
+
"version": "0.231.5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -3551,17 +3551,17 @@
|
|
|
3551
3551
|
{
|
|
3552
3552
|
"name": "body-overflow",
|
|
3553
3553
|
"description": "Defines overflow style for the body after clicking mobile menu opener button",
|
|
3554
|
-
"value": { "type": "boolean", "default": "
|
|
3554
|
+
"value": { "type": "boolean", "default": "false" }
|
|
3555
3555
|
},
|
|
3556
3556
|
{
|
|
3557
3557
|
"name": "show-search-by-default",
|
|
3558
3558
|
"description": "Defines the visibility of the Search by default.",
|
|
3559
|
-
"value": { "type": "boolean", "default": "
|
|
3559
|
+
"value": { "type": "boolean", "default": "false" }
|
|
3560
3560
|
},
|
|
3561
3561
|
{
|
|
3562
3562
|
"name": "sticky-position",
|
|
3563
3563
|
"description": "Defines sticky position for component",
|
|
3564
|
-
"value": { "type": "boolean", "default": "
|
|
3564
|
+
"value": { "type": "boolean", "default": "false" }
|
|
3565
3565
|
},
|
|
3566
3566
|
{
|
|
3567
3567
|
"name": "logo-url",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sapudex/web-components",
|
|
3
|
-
"version": "0.231.
|
|
3
|
+
"version": "0.231.5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"registry": "https://registry.npmjs.org/"
|
|
6
6
|
},
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
"@ui5/webcomponents-base": "1.24.23",
|
|
35
35
|
"@ui5/webcomponents-fiori": "1.24.23",
|
|
36
36
|
"@ui5/webcomponents-icons": "1.24.23",
|
|
37
|
+
"@ui5/webcomponents-localization": "1.24.23",
|
|
37
38
|
"@ui5/webcomponents-theming": "1.24.23",
|
|
38
39
|
"@vimeo/player": "^2.24.0",
|
|
39
40
|
"video.js": "8.22.0"
|
package/src/Assets.ts
CHANGED
package/src/ControlButton.ts
CHANGED
|
@@ -65,12 +65,25 @@ class UDExControlButton extends Button {
|
|
|
65
65
|
|
|
66
66
|
onAfterRendering() {
|
|
67
67
|
if (this._isComboboxRole) {
|
|
68
|
-
this.
|
|
68
|
+
this._setComboboxRole();
|
|
69
69
|
}
|
|
70
|
+
|
|
71
|
+
const accessibleDescription = this.getAttribute("accessible-description");
|
|
72
|
+
if (accessibleDescription) {
|
|
73
|
+
this._setAccessibleDescription(accessibleDescription);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
_setAccessibleDescription(value: string): void {
|
|
78
|
+
this.setButtonAttribute("aria-description", value);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
_setComboboxRole(): void {
|
|
82
|
+
this.setButtonAttribute("role", "combobox");
|
|
70
83
|
}
|
|
71
84
|
|
|
72
|
-
|
|
73
|
-
this.shadowRoot?.querySelector(".ui5-button-root")?.setAttribute(
|
|
85
|
+
private setButtonAttribute(attribute: string, value: string): void {
|
|
86
|
+
this.shadowRoot?.querySelector(".ui5-button-root")?.setAttribute(attribute, value);
|
|
74
87
|
}
|
|
75
88
|
}
|
|
76
89
|
|
package/src/CountrySelector.hbs
CHANGED
|
@@ -17,13 +17,6 @@
|
|
|
17
17
|
{{> trigger}}
|
|
18
18
|
{{searchableList}}
|
|
19
19
|
</udex-dropdown>
|
|
20
|
-
{{#if supportingText}}
|
|
21
|
-
<udex-status-message
|
|
22
|
-
?disabled="{{disabled}}"
|
|
23
|
-
supporting-text="{{supportingText}}"
|
|
24
|
-
value-state="{{valueState}}">
|
|
25
|
-
</udex-status-message>
|
|
26
|
-
{{/if}}
|
|
27
20
|
</div>
|
|
28
21
|
|
|
29
22
|
{{#*inline "trigger"}}
|
|
@@ -43,12 +36,12 @@
|
|
|
43
36
|
class="udex-country-selector__text"
|
|
44
37
|
value="{{selectedCountryName}}"
|
|
45
38
|
value-state="{{valueState}}"
|
|
39
|
+
supporting-text="{{supportingText}}"
|
|
46
40
|
direction="left"
|
|
47
41
|
aria-label="{{effectiveAriaLabel}}"
|
|
48
42
|
accessible-name="{{supportingText}}"
|
|
49
43
|
accessible-name-ref="{{accessibleNameRef}}"
|
|
50
44
|
aria-controls="{{ariaControls}}"
|
|
51
|
-
role="combobox"
|
|
52
45
|
aria-haspopup="true"
|
|
53
46
|
aria-expanded="{{_open}}"
|
|
54
47
|
?required="{{required}}"
|
|
@@ -59,7 +52,8 @@
|
|
|
59
52
|
@mousedown="{{handleInputMouseDown}}"
|
|
60
53
|
icon="{{triggerIcon}}"
|
|
61
54
|
accessible-icon-name="{{effectiveAriaLabel}}"
|
|
62
|
-
maxlength="0"
|
|
55
|
+
maxlength="0"
|
|
56
|
+
_is-combobox-role>
|
|
63
57
|
</udex-text-field>
|
|
64
58
|
</div>
|
|
65
59
|
{{/inline}}
|
package/src/CountrySelector.ts
CHANGED
|
@@ -365,8 +365,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
|
|
|
365
365
|
return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
|
|
366
366
|
}
|
|
367
367
|
|
|
368
|
-
get triggerIcon(): string {
|
|
369
|
-
|
|
368
|
+
get triggerIcon(): string | undefined {
|
|
369
|
+
if (!this.displayonly) {
|
|
370
|
+
return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
|
|
371
|
+
}
|
|
370
372
|
}
|
|
371
373
|
|
|
372
374
|
get countrySelectorClasses(): string {
|
|
@@ -411,7 +413,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
|
|
|
411
413
|
|
|
412
414
|
handleCloseSearch() {
|
|
413
415
|
this.dropdownClose();
|
|
414
|
-
this.
|
|
416
|
+
this.getTextField()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
|
|
415
417
|
}
|
|
416
418
|
|
|
417
419
|
handleItemPress(e: CustomEvent) {
|
|
@@ -419,12 +421,12 @@ class UDExCountrySelector extends UDExSearchableListBase {
|
|
|
419
421
|
const target = e.target as HTMLElement;
|
|
420
422
|
const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
|
|
421
423
|
this.selectedCountry = this.countryList.find(country => country.iso === item._id);
|
|
422
|
-
this.
|
|
424
|
+
this.getDropdownPopover()?.close();
|
|
423
425
|
}
|
|
424
426
|
|
|
425
427
|
handleKeyPress(keyEvent: KeyboardEvent) {
|
|
426
428
|
const key = keyEvent.key;
|
|
427
|
-
this._dropdown.onOpen(this.
|
|
429
|
+
this._dropdown.onOpen(this.getTextField());
|
|
428
430
|
this._search.focus();
|
|
429
431
|
this._search.value = key;
|
|
430
432
|
this.fireChangeSearch();
|
|
@@ -435,6 +437,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
|
|
|
435
437
|
}
|
|
436
438
|
|
|
437
439
|
handleTriggerClick() {
|
|
440
|
+
this._dropdown.onOpen(this.getTextField()._inputHolder);
|
|
438
441
|
this._dropdown.open = !this._dropdown.open;
|
|
439
442
|
}
|
|
440
443
|
|
|
@@ -502,7 +505,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
|
|
|
502
505
|
return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
|
|
503
506
|
}
|
|
504
507
|
|
|
505
|
-
|
|
508
|
+
getTextField(): UDExTextField {
|
|
506
509
|
return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
|
|
507
510
|
}
|
|
508
511
|
|
package/src/DatePicker.hbs
CHANGED
|
@@ -1,27 +1,17 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
>
|
|
19
|
-
</udex-text-field>
|
|
20
|
-
{{#if supportingText}}
|
|
21
|
-
<udex-status-message
|
|
22
|
-
?disabled="{{disabled}}"
|
|
23
|
-
supporting-text="{{supportingText}}"
|
|
24
|
-
value-state="{{valueState}}">
|
|
25
|
-
</udex-status-message>
|
|
26
|
-
{{/if}}
|
|
27
|
-
</div>
|
|
1
|
+
<udex-text-field
|
|
2
|
+
value="{{value}}"
|
|
3
|
+
@ui5-change="{{_onInputChange}}"
|
|
4
|
+
class="udex-date-picker__input"
|
|
5
|
+
label="{{label}}"
|
|
6
|
+
accessible-name="{{dateAccessibleName}}"
|
|
7
|
+
accessible-name-ref="{{accessibleNameRef}}"
|
|
8
|
+
accessible-icon-name="{{accessibleIconName}}"
|
|
9
|
+
_aria-has-popup="grid"
|
|
10
|
+
?disabled="{{disabled}}"
|
|
11
|
+
?required="{{required}}"
|
|
12
|
+
?readonly="{{readonly}}"
|
|
13
|
+
icon="appointment-2"
|
|
14
|
+
@ui5-click-icon="{{handleInputClick}}"
|
|
15
|
+
value-state="{{valueState}}"
|
|
16
|
+
supporting-text="{{supportingText}}">
|
|
17
|
+
</udex-text-field>
|
package/src/DatePicker.ts
CHANGED
|
@@ -224,7 +224,7 @@ class UDExDatePicker extends DateComponentBase {
|
|
|
224
224
|
* @private
|
|
225
225
|
*/
|
|
226
226
|
get _dropdownTrigger(): UDExTextField {
|
|
227
|
-
return this.shadowRoot!.querySelector<UDExTextField>("
|
|
227
|
+
return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
|
|
228
228
|
}
|
|
229
229
|
|
|
230
230
|
_afterDropdownClose(): void {
|
|
@@ -244,7 +244,7 @@ class UDExDatePicker extends DateComponentBase {
|
|
|
244
244
|
async _openRespPopover(): Promise<void> {
|
|
245
245
|
this._dropdownTrigger.active = true;
|
|
246
246
|
this.responsivePopover = await this._getResponsePopover();
|
|
247
|
-
this.responsivePopover?.onOpen(this._dropdownTrigger);
|
|
247
|
+
this.responsivePopover?.onOpen(this._dropdownTrigger._inputHolder);
|
|
248
248
|
}
|
|
249
249
|
|
|
250
250
|
hideCalendar(): void {
|
package/src/FilterMenu.hbs
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
<div>
|
|
2
2
|
<button
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
{{/if}}
|
|
18
|
-
<span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
|
|
19
|
-
<span class="udex-filter-menu__trigger-name">{{filterName}}</span>
|
|
20
|
-
{{#if badgeValue}}
|
|
21
|
-
<udex-badge
|
|
22
|
-
class="udex-filter-menu__badge"
|
|
23
|
-
type="Number"
|
|
24
|
-
design="Info"
|
|
25
|
-
size="Small">
|
|
26
|
-
{{badgeValue}}
|
|
27
|
-
</udex-badge>
|
|
3
|
+
id="filterMenuTrigger"
|
|
4
|
+
@click="{{handleTriggerClick}}"
|
|
5
|
+
@keydown="{{handleTriggerKeydown}}"
|
|
6
|
+
aria-label="{{triggerButtonAccessibleName}}"
|
|
7
|
+
aria-labelledby="{{accessibleNameRef}}"
|
|
8
|
+
aria-expanded="{{_open}}"
|
|
9
|
+
aria-haspopup="true"
|
|
10
|
+
role="{{triggerAccessibleRole}}"
|
|
11
|
+
aria-controls="{{this._id}}_udex-filter-menu-dropdown"
|
|
12
|
+
?disabled="{{disabled}}"
|
|
13
|
+
class="udex-filter-menu__trigger"
|
|
14
|
+
tabindex="0">
|
|
15
|
+
{{#if hasFilterNamePrefix}}
|
|
16
|
+
<span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
|
|
28
17
|
{{/if}}
|
|
29
|
-
<
|
|
30
|
-
class="udex-filter-menu__trigger-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
<span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
|
|
19
|
+
<span class="udex-filter-menu__trigger-name">{{filterName}}</span>
|
|
20
|
+
{{#if badgeValue}}
|
|
21
|
+
<udex-badge
|
|
22
|
+
class="udex-filter-menu__badge"
|
|
23
|
+
type="Number"
|
|
24
|
+
design="Info"
|
|
25
|
+
size="Small">
|
|
26
|
+
{{badgeValue}}
|
|
27
|
+
</udex-badge>
|
|
28
|
+
{{/if}}
|
|
29
|
+
<ui5-icon
|
|
30
|
+
class="udex-filter-menu__trigger-icon"
|
|
31
|
+
name="navigation-down-arrow"
|
|
32
|
+
accessible-name="{{_iconAccessibleNameText}}">
|
|
33
|
+
</ui5-icon>
|
|
34
|
+
</span>
|
|
35
|
+
</button>
|
|
36
36
|
<ui5-popover
|
|
37
37
|
id="{{this._id}}_udex-filter-menu-dropdown"
|
|
38
38
|
hide-arrow
|
|
@@ -59,8 +59,6 @@
|
|
|
59
59
|
</ui5-popover>
|
|
60
60
|
</div>
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
62
|
{{#*inline "buttons"}}
|
|
65
63
|
{{#unless hideActionBar}}
|
|
66
64
|
<div class="udex-filter-menu__footer" slot="footer" name="footer">
|
|
@@ -69,7 +67,6 @@
|
|
|
69
67
|
class="udex-filter-menu__result-btn"
|
|
70
68
|
size="Medium"
|
|
71
69
|
design="Primary"
|
|
72
|
-
?disabled="{{disabledButtons}}"
|
|
73
70
|
@keydown="{{handleKeyDownResultBtn}}"
|
|
74
71
|
@click="{{handleResult}}">
|
|
75
72
|
{{getResultLabelText}}
|
|
@@ -81,7 +78,6 @@
|
|
|
81
78
|
size="Medium"
|
|
82
79
|
design="Tertiary"
|
|
83
80
|
@keydown="{{handleKeyDownResetBtn}}"
|
|
84
|
-
?disabled="{{disabledButtons}}"
|
|
85
81
|
@click="{{handleReset}}">
|
|
86
82
|
{{getResetLabelText}}
|
|
87
83
|
</udex-button>
|
package/src/FilterMenu.ts
CHANGED
|
@@ -27,6 +27,7 @@ import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
|
|
|
27
27
|
import UDExListSelectAll from "./ListSelectAll.js";
|
|
28
28
|
import UDExBadge from "./Badge.js";
|
|
29
29
|
import UDExListItemBase from "./ListItemBase.js";
|
|
30
|
+
import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
|
|
30
31
|
|
|
31
32
|
import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
|
|
32
33
|
import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
|
|
@@ -36,6 +37,11 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
|
|
|
36
37
|
import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
|
|
37
38
|
import SearchableListCss from "./generated/themes/SearchableList.css.js";
|
|
38
39
|
|
|
40
|
+
type initialItemState = {
|
|
41
|
+
id: string,
|
|
42
|
+
selected: boolean,
|
|
43
|
+
indeterminate?: boolean,
|
|
44
|
+
}
|
|
39
45
|
/**
|
|
40
46
|
* @class
|
|
41
47
|
*
|
|
@@ -251,7 +257,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
251
257
|
* Hides the result button in the footer.
|
|
252
258
|
*
|
|
253
259
|
* @type {boolean}
|
|
254
|
-
* @name sap.ui.webc.web-components.UDExFilterMenu.prototype.hideResultBtn
|
|
255
260
|
* @defaultvalue false
|
|
256
261
|
* @public
|
|
257
262
|
*/
|
|
@@ -262,7 +267,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
262
267
|
* Hides the reset button in the footer.
|
|
263
268
|
*
|
|
264
269
|
* @type {boolean}
|
|
265
|
-
* @name sap.ui.webc.web-components.UDExFilterMenu.prototype.hideResetBtn
|
|
266
270
|
* @defaultvalue false
|
|
267
271
|
* @public
|
|
268
272
|
*/
|
|
@@ -303,10 +307,27 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
303
307
|
@property({ type: String, defaultValue: "combobox" })
|
|
304
308
|
triggerAccessibleRole!: string;
|
|
305
309
|
|
|
310
|
+
/**
|
|
311
|
+
* Determines whether the filter should be applied.
|
|
312
|
+
* @default false
|
|
313
|
+
* @private
|
|
314
|
+
*/
|
|
315
|
+
@property({ type: Boolean })
|
|
316
|
+
_shouldApplyFilter: boolean = false;
|
|
317
|
+
|
|
318
|
+
/**
|
|
319
|
+
* Internal flag to request a re-render of the component.
|
|
320
|
+
* @default false
|
|
321
|
+
* @private
|
|
322
|
+
*/
|
|
323
|
+
@property({ type: Boolean, noAttribute: true })
|
|
324
|
+
_requestRender = false;
|
|
325
|
+
|
|
306
326
|
_trigger!: UDExButton;
|
|
307
327
|
_search!: UDExSearch;
|
|
308
328
|
_popover!: Popover;
|
|
309
329
|
_breakpointSizeXS = 640;
|
|
330
|
+
_initialState: Array<initialItemState> = [];
|
|
310
331
|
|
|
311
332
|
onEnterDOM(): void {
|
|
312
333
|
if (isDesktop()) {
|
|
@@ -355,6 +376,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
355
376
|
}
|
|
356
377
|
|
|
357
378
|
handleReset(): void {
|
|
379
|
+
this._shouldApplyFilter = true;
|
|
380
|
+
this.onDropdownClose();
|
|
358
381
|
this.fireEvent("reset-click", {
|
|
359
382
|
restoredItems: this.selectedItems,
|
|
360
383
|
});
|
|
@@ -362,12 +385,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
362
385
|
}
|
|
363
386
|
|
|
364
387
|
handleResult(): void {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
}
|
|
388
|
+
this._shouldApplyFilter = true;
|
|
389
|
+
this.onDropdownClose();
|
|
390
|
+
this.fireEvent("result-click", {
|
|
391
|
+
selectedItems: this.selectedItems,
|
|
392
|
+
});
|
|
371
393
|
}
|
|
372
394
|
|
|
373
395
|
handleKeyDownList(e: KeyboardEvent): void {
|
|
@@ -443,6 +465,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
443
465
|
const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
|
|
444
466
|
content.style.maxHeight = this.height;
|
|
445
467
|
}
|
|
468
|
+
|
|
469
|
+
this._initialState = this._getInitialState(this.items);
|
|
446
470
|
this.fireEvent("before-open");
|
|
447
471
|
}
|
|
448
472
|
|
|
@@ -459,11 +483,54 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
459
483
|
}
|
|
460
484
|
|
|
461
485
|
_dropdownAfterClose(): void {
|
|
486
|
+
if (!this._shouldApplyFilter && this.modeMultiSelect && !this.modeSelectAll) {
|
|
487
|
+
this._setInitialState();
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
this._shouldApplyFilter = false;
|
|
462
491
|
this._open = false;
|
|
463
492
|
this._trigger.classList.remove("udex-filter-menu__trigger-active");
|
|
464
493
|
this.fireEvent("after-close");
|
|
465
494
|
}
|
|
466
495
|
|
|
496
|
+
_getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState> {
|
|
497
|
+
return items.flatMap(item => {
|
|
498
|
+
if (item.isGroup) {
|
|
499
|
+
const groupState: initialItemState = {
|
|
500
|
+
id: item._id,
|
|
501
|
+
selected: item.selected,
|
|
502
|
+
indeterminate: item.indeterminate,
|
|
503
|
+
};
|
|
504
|
+
const subItemsState = (item as UDExListGroupHeaderBase).getItems().map(subItem => ({
|
|
505
|
+
id: subItem._id,
|
|
506
|
+
selected: subItem.selected,
|
|
507
|
+
}));
|
|
508
|
+
return [groupState, ...subItemsState];
|
|
509
|
+
}
|
|
510
|
+
return {
|
|
511
|
+
id: item._id,
|
|
512
|
+
selected: item.selected,
|
|
513
|
+
};
|
|
514
|
+
});
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
_setInitialListState(): void {
|
|
518
|
+
this.getSlottedItems(this.items).forEach((item, index) => {
|
|
519
|
+
const initialState = this._initialState[index];
|
|
520
|
+
if (item._id === initialState?.id) {
|
|
521
|
+
item.selected = initialState.selected;
|
|
522
|
+
if (item.isGroup) {
|
|
523
|
+
item.indeterminate = initialState.indeterminate;
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
});
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
_setInitialState(): void {
|
|
530
|
+
this._setInitialListState();
|
|
531
|
+
this._requestRender = true;
|
|
532
|
+
}
|
|
533
|
+
|
|
467
534
|
get disableAllowTargetOverlap(): boolean {
|
|
468
535
|
return !this.disableTargetOverlap;
|
|
469
536
|
}
|
|
@@ -482,10 +549,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
482
549
|
return hasLabel ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
|
|
483
550
|
}
|
|
484
551
|
|
|
485
|
-
get disabledButtons(): boolean {
|
|
486
|
-
return !this.selectedItems.length && !this.selectAll;
|
|
487
|
-
}
|
|
488
|
-
|
|
489
552
|
get _iconAccessibleNameText(): string {
|
|
490
553
|
return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
|
|
491
554
|
}
|
|
@@ -503,17 +566,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
|
|
|
503
566
|
}
|
|
504
567
|
|
|
505
568
|
get hasFooterButtons(): boolean {
|
|
506
|
-
return
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
get hasResultBtn(): boolean {
|
|
510
|
-
return !this.hideResultBtn && !this.disabledButtons;
|
|
569
|
+
return !!this.shadowRoot!.querySelector("[udex-button]");
|
|
511
570
|
}
|
|
512
571
|
|
|
513
572
|
get hasResetBtn(): boolean {
|
|
514
573
|
return !this.hideResetBtn;
|
|
515
574
|
}
|
|
516
575
|
|
|
576
|
+
get modeSelectAll(): boolean {
|
|
577
|
+
return !!this.querySelector<UDExFilterMenuSelectAll>("[udex-filter-menu-select-all]");
|
|
578
|
+
}
|
|
579
|
+
|
|
517
580
|
getTriggerButton(): UDExButton {
|
|
518
581
|
return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
|
|
519
582
|
}
|