@sapudex/web-components 2.16.0 → 2.16.1
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/cypress/specs/PasswordField.cy.tsx +91 -0
- package/cypress/support/component-imports.instrumented.ts +3 -1
- package/cypress/support/component-imports.src.ts +3 -1
- package/dist/AvatarGroup.d.ts +1 -0
- package/dist/AvatarGroup.js +8 -4
- package/dist/AvatarGroup.js.map +1 -1
- package/dist/LinkListItemTemplate.js +1 -1
- package/dist/LinkListItemTemplate.js.map +1 -1
- package/dist/List.js +7 -1
- package/dist/List.js.map +1 -1
- package/dist/ListGroupHeader.js +7 -1
- package/dist/ListGroupHeader.js.map +1 -1
- package/dist/ListSelectAll.js +7 -1
- package/dist/ListSelectAll.js.map +1 -1
- package/dist/PasswordField.d.ts +3 -5
- package/dist/PasswordField.js +6 -8
- package/dist/PasswordField.js.map +1 -1
- package/dist/PasswordFieldTemplate.d.ts +4 -0
- package/dist/PasswordFieldTemplate.js +8 -0
- package/dist/PasswordFieldTemplate.js.map +1 -0
- package/dist/TextField.d.ts +5 -3
- package/dist/TextField.js +5 -3
- package/dist/TextField.js.map +1 -1
- package/dist/Tooltip.d.ts +5 -0
- package/dist/Tooltip.js.map +1 -1
- package/dist/assets/{InputSuggestions-lpqKgn1j.js → InputSuggestions-C-OeoyHk.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-BPs3CyVq.js → ListItemStandardExpandableTextTemplate-D05JXl_S.js} +1 -1
- package/dist/assets/{bundle.esm-C3RAGF4b.js → bundle.esm-jB2aQPid.js} +175 -175
- package/dist/css/themes/CountrySelector.css +1 -1
- package/dist/css/themes/PhoneNumberField.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Search.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/TextArea.css +1 -1
- package/dist/css/themes/TextField.css +1 -1
- package/dist/custom-elements-internal.json +73 -0
- package/dist/custom-elements.json +61 -0
- package/dist/generated/themes/CountrySelector.css.d.ts +1 -1
- package/dist/generated/themes/CountrySelector.css.js +1 -1
- package/dist/generated/themes/CountrySelector.css.js.map +1 -1
- package/dist/generated/themes/PhoneNumberField.css.d.ts +1 -1
- package/dist/generated/themes/PhoneNumberField.css.js +1 -1
- package/dist/generated/themes/PhoneNumberField.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.d.ts +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/Search.css.d.ts +1 -1
- package/dist/generated/themes/Search.css.js +1 -1
- package/dist/generated/themes/Search.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +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/TextArea.css.d.ts +1 -1
- package/dist/generated/themes/TextArea.css.js +1 -1
- package/dist/generated/themes/TextArea.css.js.map +1 -1
- package/dist/generated/themes/TextField.css.d.ts +1 -1
- package/dist/generated/themes/TextField.css.js +1 -1
- package/dist/generated/themes/TextField.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +21 -3
- package/dist/web-types.json +60 -6
- package/package.json +1 -1
- package/src/AvatarGroup.ts +10 -5
- package/src/LinkListItemTemplate.tsx +4 -1
- package/src/List.ts +5 -0
- package/src/ListGroupHeader.ts +5 -0
- package/src/ListSelectAll.ts +5 -1
- package/src/PasswordField.ts +7 -10
- package/src/PasswordFieldTemplate.tsx +29 -0
- package/src/TextField.ts +5 -3
- package/src/Tooltip.ts +5 -0
- package/src/generated/themes/CountrySelector.css.ts +1 -1
- package/src/generated/themes/PhoneNumberField.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Search.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/TextArea.css.ts +1 -1
- package/src/generated/themes/TextField.css.ts +1 -1
- package/src/themes/CountrySelector.css +0 -8
- package/src/themes/PhoneNumberField.css +1 -21
- package/src/themes/Search.css +1 -5
- package/src/themes/TextArea.css +1 -25
- package/src/themes/TextField.css +4 -18
- package/dist/generated/templates/PasswordFieldTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/PasswordFieldTemplate.lit.js +0 -7
- package/dist/generated/templates/PasswordFieldTemplate.lit.js.map +0 -1
- package/src/PasswordField.hbs +0 -18
- package/src/generated/templates/PasswordFieldTemplate.lit.ts +0 -11
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-textarea-color-standard-default-background: var(--sapField_Background, #fff);--udex-textarea-color-standard-default-border: var(--sapField_BorderColor, #5b738b);--udex-textarea-color-standard-default-text: var(--sapField_TextColor, #223548);--udex-textarea-color-standard-default-label: var(--sapField_PlaceholderTextColor, #475e75);--udex-textarea-color-standard-hover-border: var(--sapField_Hover_BorderColor, #1b90ff);--udex-textarea-color-standard-actives-border: var(--sapField_Active_BorderColor, #0040b0);--udex-textarea-color-warning-default-background: var(--sapField_WarningBackground, #fff);--udex-textarea-color-warning-default-border: var(--udexCoreSemanticWarning6, #e76500);--udex-textarea-color-warning-hover-border: var(--sapField_WarningColor, #c35500);--udex-textarea-color-warning-actives-border: var(--sapWarningColor, #8d2a00);--udex-textarea-color-error-default-background: var(--sapField_InvalidBackground, #fff);--udex-textarea-color-error-default-border: var(--udexCoreSemanticError6, #ee3939);--udex-textarea-color-error-hover-border: var(--sapField_InvalidColor, #d20a0a);--udex-textarea-color-error-actives-border: var(--udexCoreSemanticError9, #840606);--udex-textarea-color-success-default-background: var(--sapField_SuccessBackground, #fff);--udex-textarea-color-success-default-border: var(--udexCoreSemanticSuccess6, #36a41d);--udex-textarea-color-success-hover-border: var(--sapField_SuccessColor, #188918);--udex-textarea-color-success-actives-border: var(--sapSuccessColor, #1e592f);--udex-textarea-color-disabled-default-background: var(--sapField_Background, #fff);--udex-textarea-color-disabled-default-border: var(--sapNeutralElementColor, #5b738b);--udex-textarea-color-readonly-default-background: var(--sapField_ReadOnly_Background, #eaecee);--udex-textarea-color-readonly-default-border: var(--sapNeutralElementColor, #5b738b);--udex-textarea-active-lable-font-size: var(--sapFontSmallSize, 12px);--udex-textarea-color-label-background:
|
|
8
|
+
export default `:host{--udex-textarea-color-standard-default-background: var(--sapField_Background, #fff);--udex-textarea-color-standard-default-border: var(--sapField_BorderColor, #5b738b);--udex-textarea-color-standard-default-text: var(--sapField_TextColor, #223548);--udex-textarea-color-standard-default-label: var(--sapField_PlaceholderTextColor, #475e75);--udex-textarea-color-standard-hover-border: var(--sapField_Hover_BorderColor, #1b90ff);--udex-textarea-color-standard-actives-border: var(--sapField_Active_BorderColor, #0040b0);--udex-textarea-color-warning-default-background: var(--sapField_WarningBackground, #fff);--udex-textarea-color-warning-default-border: var(--udexCoreSemanticWarning6, #e76500);--udex-textarea-color-warning-hover-border: var(--sapField_WarningColor, #c35500);--udex-textarea-color-warning-actives-border: var(--sapWarningColor, #8d2a00);--udex-textarea-color-error-default-background: var(--sapField_InvalidBackground, #fff);--udex-textarea-color-error-default-border: var(--udexCoreSemanticError6, #ee3939);--udex-textarea-color-error-hover-border: var(--sapField_InvalidColor, #d20a0a);--udex-textarea-color-error-actives-border: var(--udexCoreSemanticError9, #840606);--udex-textarea-color-success-default-background: var(--sapField_SuccessBackground, #fff);--udex-textarea-color-success-default-border: var(--udexCoreSemanticSuccess6, #36a41d);--udex-textarea-color-success-hover-border: var(--sapField_SuccessColor, #188918);--udex-textarea-color-success-actives-border: var(--sapSuccessColor, #1e592f);--udex-textarea-color-disabled-default-background: var(--sapField_Background, #fff);--udex-textarea-color-disabled-default-border: var(--sapNeutralElementColor, #5b738b);--udex-textarea-color-readonly-default-background: var(--sapField_ReadOnly_Background, #eaecee);--udex-textarea-color-readonly-default-border: var(--sapNeutralElementColor, #5b738b);--udex-textarea-active-lable-font-size: var(--sapFontSmallSize, 12px);--udex-textarea-color-label-background: var(--sapField_Background, #fff);--udex-textarea-paddings: 9px var(--udexSpacer12, 12px) 15px;--udex-textarea-radius: var(--udexRadiusXS, 4px);--udex-textarea-height: 50px;--udex-textarea-border-width: 1px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapFontSize, 16px);color:var(--udex-textarea-color-standard-default-text)}.udex-textarea{position:relative}.udex-textarea__label{font-weight:var(--udexTypographyFontWeightRegular, 400);position:absolute;top:10px;margin-inline-start:9px;padding:0 var(--udexSpacer4, 4px);color:var(--udex-textarea-color-standard-default-label);line-height:24px;transition:top .15s ease-out,font-size .15s ease-out}.udex-textarea__label--active{top:-11px;font-size:var(--udex-textarea-active-lable-font-size);line-height:1.5;z-index:2;background:linear-gradient(var(--udex-textarea-color-label-background) 60%,var(--udex-textarea-color-standard-default-background) 60%)}:host [ui5-icon]{color:inherit;vertical-align:top;margin-inline-end:var(--udexSpacer4, 4px)}.udex-textarea__field{display:block;box-sizing:border-box;width:100%;height:var(--udex-textarea-height);max-height:94vh;margin:0;padding:var(--udex-textarea-paddings);background:var(--udex-textarea-color-standard-default-background);border-radius:var(--udex-textarea-radius);border:var(--udex-textarea-border-width) solid var(--udex-textarea-color-standard-default-border);font-weight:var(--udexTypographyFontWeightRegular, 400);outline:none;color:inherit;font-size:inherit;font-family:inherit;font-style:inherit;-webkit-appearance:none;-moz-appearance:textfield;overflow:auto;resize:none;line-height:24px;letter-spacing:inherit;word-spacing:inherit}.udex-textarea__field:hover{border-color:var(--udex-textarea-color-standard-hover-border)}.udex-textarea__field:focus{border-color:var(--udex-textarea-color-standard-actives-border)}.udex-textarea__wrapper{position:relative}:host(:not([_is-touched])[active]) .udex-textarea__wrapper:before{content:"";position:absolute;z-index:-1;inset:-5px;border:2px solid var(--udexColorBlue10);border-radius:var(--udexRadiusS, 6px)}:host([value-state="Warning"]) .udex-textarea__field{background-color:var(--udex-textarea-color-warning-default-background);border-color:var(--udex-textarea-color-warning-default-border)}:host([value-state="Warning"]) .udex-textarea__label--active{background:linear-gradient(var(--udex-textarea-color-label-background) 60%,var(--udex-textarea-color-warning-default-background) 60%)}:host([value-state="Warning"]) .udex-textarea__field:hover{border-color:var(--udex-textarea-color-warning-hover-border)}:host([value-state="Warning"]) .udex-textarea__field:focus{border-color:var(--udex-textarea-color-warning-actives-border)}:host([value-state="Error"]) .udex-textarea__field{background-color:var(--udex-textarea-color-error-default-background);border-color:var(--udex-textarea-color-error-default-border)}:host([value-state="Error"]) .udex-textarea__label--active{background:linear-gradient(var(--udex-textarea-color-label-background) 60%,var(--udex-textarea-color-error-default-background) 60%)}:host([value-state="Error"]) .udex-textarea__field:hover{border-color:var(--udex-textarea-color-error-hover-border)}:host([value-state="Error"]) .udex-textarea__field:focus{border-color:var(--udex-textarea-color-error-actives-border)}:host([value-state="Success"]) .udex-textarea__field{background-color:var(--udex-textarea-color-success-default-background);border-color:var(--udex-textarea-color-success-default-border)}:host([value-state="Success"]) .udex-textarea__label--active{background:linear-gradient(var(--udex-textarea-color-label-background) 60%,var(--udex-textarea-color-success-default-background) 60%)}:host([value-state="Success"]) .udex-textarea__field:hover{border-color:var(--udex-textarea-color-success-hover-border)}:host([value-state="Success"]) .udex-textarea__field:focus{border-color:var(--udex-textarea-color-success-actives-border)}:host([disabled]) .udex-textarea{opacity:.4}:host([disabled]) .udex-textarea__field,:host([disabled]) .udex-textarea__field:hover{background-color:var(--udex-textarea-color-disabled-default-background);border-color:var(--udex-textarea-color-disabled-default-border)}:host([disabled]) .udex-textarea__label--active{background:linear-gradient(var(--udex-textarea-color-label-background) 60%,var(--udex-textarea-color-disabled-default-background) 60%)}:host([readonly]) .udex-textarea,:host([displayonly]) .udex-textarea{opacity:1}:host([readonly]) .udex-textarea__field,:host([readonly]) .udex-textarea__field:hover,:host([readonly]) .udex-textarea__field:focus{background-color:var(--udex-textarea-color-readonly-default-background);border-color:var(--udex-textarea-color-readonly-default-border)}:host([readonly]) .udex-textarea__label--active{background:linear-gradient(var(--udex-textarea-color-label-background) 60%,var(--udex-textarea-color-readonly-default-background) 60%)}:host([displayonly]) .udex-textarea__field,:host([displayonly]) .udex-textarea__field:hover,:host([displayonly]) .udex-textarea__field:focus{background-color:transparent;border-color:transparent}:host([displayonly]) .udex-textarea__label--active{background:transparent}:host([rows]) .udex-textarea__field{height:auto}:host([rows="1"]) .udex-textarea__field{height:var(--udex-textarea-height)}.udex-textarea__field::-webkit-scrollbar-thumb{border:2px solid var(--udex-textarea-color-standard-default-background)}:host([value-state="Warning"]) .udex-textarea__field::-webkit-scrollbar-thumb{border:2px solid var(--udex-textarea-color-warning-default-background)}:host([value-state="Error"]) .udex-textarea__field::-webkit-scrollbar-thumb{border:2px solid var(--udex-textarea-color-error-default-background)}:host([value-state="Success"]) .udex-textarea__field::-webkit-scrollbar-thumb{border:2px solid var(--udex-textarea-color-success-default-background)}:host([disabled]) .udex-textarea__field::-webkit-scrollbar-thumb{border:2px solid var(--udex-textarea-color-disabled-default-background)}:host([readonly]) .udex-textarea__field::-webkit-scrollbar-thumb{border:2px solid var(--udex-textarea-color-readonly-default-background)}:host([displayonly]) .udex-textarea__field::-webkit-scrollbar-thumb{border:2px solid transparent}.hidden-text{display:none}.hidden-label{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `: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-input-background-color: var(--sapField_Background, var(--udexColorNeutralWhite))}.udex-text-field__wrap{display:flex;position:relative;border-radius:var(--udexRadiusXS, 4px);border:1px solid var(--udex-input-color-standard-default-border);background-color:var(--udex-input-background-color)}.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;text-overflow:ellipsis}.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:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}: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:0 var(--udexSpacer4);font-size:12px;background:linear-gradient(transparent 60%,var(--udex-input-color-standard-default-background-light) 60%)}:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 40%,var(--udex-input-color-standard-default-background-light) 40%)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}:host([readonly]:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(transparent 60%,var(--udex-input-color-read-only-default-background) 60%)}: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}
|
|
8
|
+
export default `: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);background-color:var(--udex-input-color-standard-default-background-light)}.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;text-overflow:ellipsis}.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);padding:0 var(--udexSpacer4)}.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:var(--udexSpacer8)}.udex-text-field__container:dir(rtl) .udex-text-field__label{right:var(--udexSpacer8)}.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%);font-size:12px;background:var(--udex-input-color-standard-default-background-light)}:host([readonly]) .udex-text-field__label.udex-text-field__label_active{background:linear-gradient(var(--udex-input-color-standard-default-background-light) 65%,var(--udex-input-color-read-only-default-background) 65%)}: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}
|
|
9
9
|
`
|
|
@@ -90,14 +90,6 @@
|
|
|
90
90
|
inset-inline-start: var(--udexSpacer12);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
[udex-text-field][aria-expanded="true"]::part(label) {
|
|
94
|
-
line-height: 18px;
|
|
95
|
-
transform: translateY(-110%);
|
|
96
|
-
padding: 0 4px;
|
|
97
|
-
font-size: 12px;
|
|
98
|
-
background: linear-gradient(transparent 60%, var(--sapField_Background) 60%);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
93
|
[udex-text-field]::part(label) {
|
|
102
94
|
max-width: calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)
|
|
103
95
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
--udex-phone-number-field-lable-font-size: var(--sapFontSmallSize, 12px);
|
|
37
37
|
|
|
38
|
-
--udex-phone-number-field-color-label-background:
|
|
38
|
+
--udex-phone-number-field-color-label-background: var(--sapField_Background, #fff);
|
|
39
39
|
|
|
40
40
|
--udex-phone-number-field-height: 42px;
|
|
41
41
|
--udex-phone-number-field-paddings: 9px var(--udexSpacer12, 12px);
|
|
@@ -88,10 +88,6 @@
|
|
|
88
88
|
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 60%, var(--udex-phone-number-field-color-standard-default-background) 60%);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
:host(:not([_is-touched])[active]) .udex-phone-number-field__label {
|
|
92
|
-
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 40%, var(--udex-phone-number-field-color-standard-default-background) 40%);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
91
|
.udex-phone-number-field__button-content {
|
|
96
92
|
display: flex;
|
|
97
93
|
align-items: center;
|
|
@@ -258,10 +254,6 @@
|
|
|
258
254
|
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 60%, var(--udex-phone-number-field-color-error-default-background) 60%);
|
|
259
255
|
}
|
|
260
256
|
|
|
261
|
-
:host([value-state="Error"]:not([_is-touched])[active]) .udex-phone-number-field__label {
|
|
262
|
-
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 40%, var(--udex-phone-number-field-color-error-default-background) 40%);
|
|
263
|
-
}
|
|
264
|
-
|
|
265
257
|
:host([value-state="Error"]) .udex-phone-number-field:hover {
|
|
266
258
|
border-color: var(--udex-phone-number-field-color-error-hover-border);
|
|
267
259
|
}
|
|
@@ -279,10 +271,6 @@
|
|
|
279
271
|
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 60%, var(--udex-phone-number-field-color-success-default-background) 60%);
|
|
280
272
|
}
|
|
281
273
|
|
|
282
|
-
:host([value-state="Success"]:not([_is-touched])[active]) .udex-phone-number-field__label {
|
|
283
|
-
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 40%, var(--udex-phone-number-field-color-success-default-background) 40%);
|
|
284
|
-
}
|
|
285
|
-
|
|
286
274
|
:host([value-state="Success"]) .udex-phone-number-field:hover {
|
|
287
275
|
border-color: var(--udex-phone-number-field-color-success-hover-border);
|
|
288
276
|
}
|
|
@@ -307,10 +295,6 @@
|
|
|
307
295
|
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 60%, var(--udex-phone-number-field-color-disabled-default-background) 60%);
|
|
308
296
|
}
|
|
309
297
|
|
|
310
|
-
:host([disabled]:not([_is-touched])[active]) .udex-phone-number-field__label {
|
|
311
|
-
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 40%, var(--udex-phone-number-field-color-disabled-default-background) 40%);
|
|
312
|
-
}
|
|
313
|
-
|
|
314
298
|
:host([readonly]) .udex-phone-number-field,
|
|
315
299
|
:host([displayonly]) .udex-phone-number-field {
|
|
316
300
|
opacity: 1;
|
|
@@ -332,10 +316,6 @@
|
|
|
332
316
|
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 60%, var(--udex-phone-number-field-color-readonly-default-background) 60%);
|
|
333
317
|
}
|
|
334
318
|
|
|
335
|
-
:host([readonly]:not([_is-touched])[active]) .udex-phone-number-field__label {
|
|
336
|
-
background: linear-gradient(var(--udex-phone-number-field-color-label-background) 40%, var(--udex-phone-number-field-color-readonly-default-background) 40%);
|
|
337
|
-
}
|
|
338
|
-
|
|
339
319
|
:host([displayonly]) .udex-phone-number-field,
|
|
340
320
|
:host([displayonly]) .udex-phone-number-field:hover,
|
|
341
321
|
:host([displayonly]) .udex-phone-number-field:focus-within,
|
package/src/themes/Search.css
CHANGED
|
@@ -66,11 +66,7 @@
|
|
|
66
66
|
font-size: var(--udex-input-font-size-label-active);
|
|
67
67
|
font-weight: var(--udex-input-font-weight-label-active);
|
|
68
68
|
line-height: var(--udex-input-line-height-label-active);
|
|
69
|
-
background:
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
:host([active]:not([mode="Home Search"])) .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled {
|
|
73
|
-
background: linear-gradient(transparent 35%, var(--udex-input-color-background-light) 35%);
|
|
69
|
+
background: var(--udex-input-color-background-light);
|
|
74
70
|
}
|
|
75
71
|
|
|
76
72
|
:host([mode="Home Search"]) .udex-search__root,
|
package/src/themes/TextArea.css
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
--udex-textarea-active-lable-font-size: var(--sapFontSmallSize, 12px);
|
|
35
35
|
|
|
36
|
-
--udex-textarea-color-label-background:
|
|
36
|
+
--udex-textarea-color-label-background: var(--sapField_Background, #fff);
|
|
37
37
|
|
|
38
38
|
--udex-textarea-paddings: 9px var(--udexSpacer12, 12px) 15px;
|
|
39
39
|
--udex-textarea-radius: var(--udexRadiusXS, 4px);
|
|
@@ -68,10 +68,6 @@
|
|
|
68
68
|
background: linear-gradient(var(--udex-textarea-color-label-background) 60%, var(--udex-textarea-color-standard-default-background) 60%);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
:host(:not([_is-touched])[active]) .udex-textarea__label--active {
|
|
72
|
-
background: linear-gradient(var(--udex-textarea-color-label-background) 30%, var(--udex-textarea-color-standard-default-background) 30%);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
71
|
:host [ui5-icon] {
|
|
76
72
|
color: inherit;
|
|
77
73
|
vertical-align: top;
|
|
@@ -134,10 +130,6 @@
|
|
|
134
130
|
background: linear-gradient(var(--udex-textarea-color-label-background) 60%, var(--udex-textarea-color-warning-default-background) 60%);
|
|
135
131
|
}
|
|
136
132
|
|
|
137
|
-
:host([value-state="Warning"]:not([_is-touched])[active]) .udex-textarea__label--active {
|
|
138
|
-
background: linear-gradient(var(--udex-textarea-color-label-background) 30%, var(--udex-textarea-color-warning-default-background) 30%);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
133
|
:host([value-state="Warning"]) .udex-textarea__field:hover {
|
|
142
134
|
border-color: var(--udex-textarea-color-warning-hover-border);
|
|
143
135
|
}
|
|
@@ -155,10 +147,6 @@
|
|
|
155
147
|
background: linear-gradient(var(--udex-textarea-color-label-background) 60%, var(--udex-textarea-color-error-default-background) 60%);
|
|
156
148
|
}
|
|
157
149
|
|
|
158
|
-
:host([value-state="Error"]:not([_is-touched])[active]) .udex-textarea__label--active {
|
|
159
|
-
background: linear-gradient(var(--udex-textarea-color-label-background) 30%, var(--udex-textarea-color-error-default-background) 30%);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
150
|
:host([value-state="Error"]) .udex-textarea__field:hover {
|
|
163
151
|
border-color: var(--udex-textarea-color-error-hover-border);
|
|
164
152
|
}
|
|
@@ -176,10 +164,6 @@
|
|
|
176
164
|
background: linear-gradient(var(--udex-textarea-color-label-background) 60%, var(--udex-textarea-color-success-default-background) 60%);
|
|
177
165
|
}
|
|
178
166
|
|
|
179
|
-
:host([value-state="Success"]:not([_is-touched])[active]) .udex-textarea__label--active {
|
|
180
|
-
background: linear-gradient(var(--udex-textarea-color-label-background) 30%, var(--udex-textarea-color-success-default-background) 30%);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
167
|
:host([value-state="Success"]) .udex-textarea__field:hover {
|
|
184
168
|
border-color: var(--udex-textarea-color-success-hover-border);
|
|
185
169
|
}
|
|
@@ -202,10 +186,6 @@
|
|
|
202
186
|
background: linear-gradient(var(--udex-textarea-color-label-background) 60%, var(--udex-textarea-color-disabled-default-background) 60%);
|
|
203
187
|
}
|
|
204
188
|
|
|
205
|
-
:host([disabled]:not([_is-touched])[active]) .udex-textarea__label--active {
|
|
206
|
-
background: linear-gradient(var(--udex-textarea-color-label-background) 30%, var(--udex-textarea-color-disabled-default-background) 30%);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
189
|
:host([readonly]) .udex-textarea,
|
|
210
190
|
:host([displayonly]) .udex-textarea {
|
|
211
191
|
opacity: 1;
|
|
@@ -222,10 +202,6 @@
|
|
|
222
202
|
background: linear-gradient(var(--udex-textarea-color-label-background) 60%, var(--udex-textarea-color-readonly-default-background) 60%);
|
|
223
203
|
}
|
|
224
204
|
|
|
225
|
-
:host([readonly]:not([_is-touched])[active]) .udex-textarea__label--active {
|
|
226
|
-
background: linear-gradient(var(--udex-textarea-color-label-background) 30%, var(--udex-textarea-color-readonly-default-background) 30%);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
205
|
:host([displayonly]) .udex-textarea__field,
|
|
230
206
|
:host([displayonly]) .udex-textarea__field:hover,
|
|
231
207
|
:host([displayonly]) .udex-textarea__field:focus {
|
package/src/themes/TextField.css
CHANGED
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
--udex-input-padding: 0 var(--udexSpacer12, 12px);
|
|
32
32
|
--udex-input-min-width-xs-and-s: 100%;
|
|
33
33
|
--udex-input-max-width: 100%;
|
|
34
|
-
--udex-input-background-color: var(--sapField_Background, var(--udexColorNeutralWhite));
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
.udex-text-field__wrap {
|
|
@@ -39,7 +38,7 @@
|
|
|
39
38
|
position: relative;
|
|
40
39
|
border-radius: var(--udexRadiusXS, 4px);
|
|
41
40
|
border: 1px solid var(--udex-input-color-standard-default-border);
|
|
42
|
-
background-color: var(--udex-input-background-
|
|
41
|
+
background-color: var(--udex-input-color-standard-default-background-light);
|
|
43
42
|
}
|
|
44
43
|
|
|
45
44
|
.udex-text-field__wrap:hover {
|
|
@@ -193,6 +192,7 @@
|
|
|
193
192
|
overflow: hidden;
|
|
194
193
|
text-overflow: ellipsis;
|
|
195
194
|
max-width: calc(100% - var(--udexSpacer12) * 2);
|
|
195
|
+
padding: 0 var(--udexSpacer4);
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
.udex-text-field__container:dir(rtl) .udex-text-field_icon-container {
|
|
@@ -213,30 +213,16 @@
|
|
|
213
213
|
right: var(--udexSpacer8)
|
|
214
214
|
}
|
|
215
215
|
|
|
216
|
-
:host([displayonly]:dir(ltr)) .udex-text-field__label,
|
|
217
|
-
:host([displayonly]:dir(rtl)) .udex-text-field__label {
|
|
218
|
-
padding: 0;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
216
|
.udex-text-field__label.udex-text-field__label_active,
|
|
222
217
|
:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label {
|
|
223
218
|
line-height: 18px;
|
|
224
219
|
transform: translateY(-110%);
|
|
225
|
-
padding: 0 var(--udexSpacer4);
|
|
226
220
|
font-size: 12px;
|
|
227
|
-
background:
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
:host(:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__label.udex-text-field__label_active {
|
|
231
|
-
background: linear-gradient(transparent 40%, var(--udex-input-color-standard-default-background-light) 40%);
|
|
221
|
+
background: var(--udex-input-color-standard-default-background-light);
|
|
232
222
|
}
|
|
233
223
|
|
|
234
224
|
:host([readonly]) .udex-text-field__label.udex-text-field__label_active {
|
|
235
|
-
background: linear-gradient(
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
:host([readonly]:not([_is-touched]):not([aria-expanded="true"])[active]) .udex-text-field__label.udex-text-field__label_active {
|
|
239
|
-
background: linear-gradient(transparent 60%, var(--udex-input-color-read-only-default-background) 60%);
|
|
225
|
+
background: linear-gradient(var(--udex-input-color-standard-default-background-light) 65%, var(--udex-input-color-read-only-default-background) 65%);
|
|
240
226
|
}
|
|
241
227
|
|
|
242
228
|
:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/* eslint no-unused-vars: 0 */
|
|
2
|
-
import { html, ifDefined, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
|
3
|
-
import { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
|
|
4
|
-
function block0(context, tags, suffix) { return suffix ? html `<${scopeTag("udex-text-field", tags, suffix)} type="${ifDefined(this.type)}" value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" autocomplete="${ifDefined(this.autocomplete)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @ui5-click-icon="${ifDefined(this.handleShowPassword)}" icon="${ifDefined(this.iconButton)}"></${scopeTag("udex-text-field", tags, suffix)}>` : html `<udex-text-field type="${ifDefined(this.type)}" value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" autocomplete="${ifDefined(this.autocomplete)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @ui5-click-icon="${ifDefined(this.handleShowPassword)}" icon="${ifDefined(this.iconButton)}"></udex-text-field>`; }
|
|
5
|
-
function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }
|
|
6
|
-
export default template;
|
|
7
|
-
//# sourceMappingURL=PasswordFieldTemplate.lit.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordFieldTemplate.lit.js","sourceRoot":"","sources":["../../../src/generated/templates/PasswordFieldTemplate.lit.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,IAAI,EAAmC,SAAS,EAAc,QAAQ,EAAE,MAAM,sDAAsD,CAAC;AAC9I,OAAO,EAAE,8BAA8B,EAAE,MAAM,0DAA0D,CAAC;AAK1G,SAAS,MAAM,CAAuB,OAAmB,EAAE,IAAc,EAAE,MAA0B,IAAI,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,IAAI,QAAQ,CAAC,iBAAiB,EAAE,IAAI,EAAE,MAAM,CAAC,UAAU,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,IAAI,CAAC,QAAQ,gBAAgB,IAAI,CAAC,QAAQ,mBAAmB,IAAI,CAAC,WAAW,gBAAgB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,0BAA0B,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,2BAA2B,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,0BAA0B,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAAW,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,QAAQ,CAAC,iBAAiB,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,0BAA0B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,IAAI,CAAC,QAAQ,gBAAgB,IAAI,CAAC,QAAQ,mBAAmB,IAAI,CAAC,WAAW,gBAAgB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,0BAA0B,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,2BAA2B,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,0BAA0B,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAAW,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAA,CAAC;AAE5oD,SAAS,QAAQ,KAAwB,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAG,IAAI,CAAC,WAAiC,CAAC,WAAW,EAAE,8BAA8B,EAAE,CAAC,CAAC,CAAC,CAAC;AACjK,eAAe,QAAQ,CAAC","sourcesContent":["/* eslint no-unused-vars: 0 */\nimport { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getCustomElementsScopingSuffix } from \"@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type PasswordField from \"../../PasswordField.js\";\nimport type { ClassMapValue } from \"@ui5/webcomponents-base/dist/types.js\";\n\t\nfunction block0 (this: PasswordField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag(\"udex-text-field\", tags, suffix)} type=\"${ifDefined(this.type)}\" value=\"${ifDefined(this.value)}\" label=\"${ifDefined(this.passwordLabel)}\" autocomplete=\"${ifDefined(this.autocomplete)}\" ?disabled=\"${this.disabled}\" ?readonly=\"${this.readonly}\" ?displayonly=\"${this.displayonly}\" maxlength=\"${ifDefined(this.maxlength)}\" value-state=\"${ifDefined(this.valueState)}\" supporting-text=\"${ifDefined(this.supportingText)}\" accessible-name=\"${ifDefined(this.accessibleName)}\" accessible-name-ref=\"${ifDefined(this.accessibleNameRef)}\" accessible-icon-name=\"${ifDefined(this.showButtonTooltip)}\" show-button-tooltip=\"${ifDefined(this.showButtonTooltip)}\" @ui5-click-icon=\"${ifDefined(this.handleShowPassword)}\" icon=\"${ifDefined(this.iconButton)}\"></${scopeTag(\"udex-text-field\", tags, suffix)}>` : html`<udex-text-field type=\"${ifDefined(this.type)}\" value=\"${ifDefined(this.value)}\" label=\"${ifDefined(this.passwordLabel)}\" autocomplete=\"${ifDefined(this.autocomplete)}\" ?disabled=\"${this.disabled}\" ?readonly=\"${this.readonly}\" ?displayonly=\"${this.displayonly}\" maxlength=\"${ifDefined(this.maxlength)}\" value-state=\"${ifDefined(this.valueState)}\" supporting-text=\"${ifDefined(this.supportingText)}\" accessible-name=\"${ifDefined(this.accessibleName)}\" accessible-name-ref=\"${ifDefined(this.accessibleNameRef)}\" accessible-icon-name=\"${ifDefined(this.showButtonTooltip)}\" show-button-tooltip=\"${ifDefined(this.showButtonTooltip)}\" @ui5-click-icon=\"${ifDefined(this.handleShowPassword)}\" icon=\"${ifDefined(this.iconButton)}\"></udex-text-field>`;}\n\nfunction template(this: PasswordField) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }\nexport default template;"]}
|
package/src/PasswordField.hbs
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
<udex-text-field
|
|
2
|
-
type="{{type}}"
|
|
3
|
-
value="{{value}}"
|
|
4
|
-
label="{{passwordLabel}}"
|
|
5
|
-
autocomplete="{{autocomplete}}"
|
|
6
|
-
?disabled="{{disabled}}"
|
|
7
|
-
?readonly="{{readonly}}"
|
|
8
|
-
?displayonly="{{displayonly}}"
|
|
9
|
-
maxlength="{{maxlength}}"
|
|
10
|
-
value-state="{{valueState}}"
|
|
11
|
-
supporting-text="{{supportingText}}"
|
|
12
|
-
accessible-name="{{accessibleName}}"
|
|
13
|
-
accessible-name-ref="{{accessibleNameRef}}"
|
|
14
|
-
accessible-icon-name="{{showButtonTooltip}}"
|
|
15
|
-
show-button-tooltip="{{showButtonTooltip}}"
|
|
16
|
-
@ui5-click-icon="{{handleShowPassword}}"
|
|
17
|
-
icon="{{iconButton}}"
|
|
18
|
-
></udex-text-field>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/* eslint no-unused-vars: 0 */
|
|
2
|
-
import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
|
|
3
|
-
import { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
|
|
4
|
-
import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
5
|
-
import type PasswordField from "../../PasswordField.js";
|
|
6
|
-
import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
|
|
7
|
-
|
|
8
|
-
function block0 (this: PasswordField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-text-field", tags, suffix)} type="${ifDefined(this.type)}" value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" autocomplete="${ifDefined(this.autocomplete)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @ui5-click-icon="${ifDefined(this.handleShowPassword)}" icon="${ifDefined(this.iconButton)}"></${scopeTag("udex-text-field", tags, suffix)}>` : html`<udex-text-field type="${ifDefined(this.type)}" value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" autocomplete="${ifDefined(this.autocomplete)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @ui5-click-icon="${ifDefined(this.handleShowPassword)}" icon="${ifDefined(this.iconButton)}"></udex-text-field>`;}
|
|
9
|
-
|
|
10
|
-
function template(this: PasswordField) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
|
|
11
|
-
export default template;
|