@sap-ux/ui-components/storybook/UITextInput-story.07380d08.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var C=Object.defineProperty,E=Object.defineProperties;var w=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var k=(d,r,s)=>r in d?C(d,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):d[r]=s,m=(d,r)=>{for(var s in r||(r={}))S.call(r,s)&&k(d,s,r[s]);if(y)for(var s of y(r))T.call(r,s)&&k(d,s,r[s]);return d},h=(d,r)=>E(d,w(r));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[644],{"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"(d){d.exports=function(r){var s=[];return s.toString=function(){return this.map(function(e){var t="",a=typeof e[5]!="undefined";return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),a&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=r(e),a&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t}).join("")},s.i=function(e,t,a,n,u){typeof e=="string"&&(e=[[null,e,void 0]]);var l={};if(a)for(var c=0;c<this.length;c++){var p=this[c][0];p!=null&&(l[p]=!0)}for(var f=0;f<e.length;f++){var o=[].concat(e[f]);a&&l[o[0]]||(typeof u!="undefined"&&(typeof o[5]=="undefined"||(o[1]="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {").concat(o[1],"}")),o[5]=u),t&&(o[2]&&(o[1]="@media ".concat(o[2]," {").concat(o[1],"}")),o[2]=t),n&&(o[4]?(o[1]="@supports (".concat(o[4],") {").concat(o[1],"}"),o[4]=n):o[4]="".concat(n)),s.push(o))}},s}},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"(d){d.exports=function(r){return r[1]}},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"(d){var r=[];function s(t){for(var a=-1,n=0;n<r.length;n++)if(r[n].identifier===t){a=n;break}return a}function i(t,a){for(var n={},u=[],l=0;l<t.length;l++){var c=t[l],p=a.base?c[0]+a.base:c[0],f=n[p]||0,o="".concat(p," ").concat(f);n[p]=f+1;var b=s(o),_={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(b!==-1)r[b].references++,r[b].updater(_);else{var g=e(_,a);a.byIndex=l,r.splice(l,0,{identifier:o,updater:g,references:1})}u.push(o)}return u}function e(t,a){var n=a.domAPI(a);n.update(t);var u=function(c){if(c){if(c.css===t.css&&c.media===t.media&&c.sourceMap===t.sourceMap&&c.supports===t.supports&&c.layer===t.layer)return;n.update(t=c)}else n.remove()};return u}d.exports=function(t,a){a=a||{},t=t||[];var n=i(t,a);return function(l){l=l||[];for(var c=0;c<n.length;c++){var p=n[c],f=s(p);r[f].references--}for(var o=i(l,a),b=0;b<n.length;b++){var _=n[b],g=s(_);r[g].references===0&&(r[g].updater(),r.splice(g,1))}n=o}}},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"(d){var r={};function s(e){if(typeof r[e]=="undefined"){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(a){t=null}r[e]=t}return r[e]}function i(e,t){var a=s(e);if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}d.exports=i},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"(d){function r(s){var i=document.createElement("style");return s.setAttributes(i,s.attributes),s.insert(i,s.options),i}d.exports=r},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"(d,r,s){function i(e){var t=s.nc;t&&e.setAttribute("nonce",t)}d.exports=i},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"(d){function r(e,t,a){var n="";a.supports&&(n+="@supports (".concat(a.supports,") {")),a.media&&(n+="@media ".concat(a.media," {"));var u=typeof a.layer!="undefined";u&&(n+="@layer".concat(a.layer.length>0?" ".concat(a.layer):""," {")),n+=a.css,u&&(n+="}"),a.media&&(n+="}"),a.supports&&(n+="}");var l=a.sourceMap;l&&typeof btoa!="undefined"&&(n+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(l))))," */")),t.styleTagTransform(n,e,t.options)}function s(e){if(e.parentNode===null)return!1;e.parentNode.removeChild(e)}function i(e){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){r(t,e,n)},remove:function(){s(t)}}}d.exports=i},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"(d){function r(s,i){if(i.styleSheet)i.styleSheet.cssText=s;else{for(;i.firstChild;)i.removeChild(i.firstChild);i.appendChild(document.createTextNode(s))}}d.exports=r},"./src/components/UICheckbox/UICheckbox.tsx"(d,r,s){var i=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(r,"__esModule",{value:!0}),r.UICheckbox=void 0;const e=i(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=s("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),a=s("./src/helper/ValidationMessage/index.tsx"),n=s("./src/components/UIInput/index.tsx");class u extends e.default.Component{constructor(c){super(c),this.GlobalClassNames={root:"ms-Checkbox",label:"ms-Checkbox-label",checkbox:"ms-Checkbox-checkbox",checkmark:"ms-Checkbox-checkmark",text:"ms-Checkbox-text"},this.setStyle=(p,f)=>({root:[!f.disabled&&[!f.checked&&{[`:hover .${this.GlobalClassNames.checkbox}`]:{background:"var(--vscode-checkbox-background)",borderColor:"var(--vscode-focusBorder)",[t.HighContrastSelector]:{borderColor:"Highlight"}},[`:focus .${this.GlobalClassNames.checkbox}`]:{background:"var(--vscode-checkbox-background)",borderColor:"var(--vscode-focusBorder)"},[`:hover .${this.GlobalClassNames.checkmark}`]:{color:"var(--vscode-foreground)",opacity:0,[t.HighContrastSelector]:{color:"Highlight"}}},{[`:hover .${this.GlobalClassNames.text}, :focus .${this.GlobalClassNames.text}`]:{color:"var(--vscode-foreground)",[t.HighContrastSelector]:{color:f.disabled?"GrayText":"WindowText"}}}],f.checked&&!f.indeterminate&&{[`:hover .${this.GlobalClassNames.checkbox}`]:{background:f.disabled?"":"var(--vscode-checkbox-background)",borderColor:f.disabled?"":"var(--vscode-focusBorder)"},[`:focus .${this.GlobalClassNames.checkbox}`]:{background:"var(--vscode-checkbox-background)",borderColor:"var(--vscode-focusBorder)"},[t.HighContrastSelector]:{[`:hover .${this.GlobalClassNames.checkbox}`]:{background:"Highlight",borderColor:"Highlight"},[`:focus .${this.GlobalClassNames.checkbox}`]:{background:"Highlight"},[`:focus:hover .${this.GlobalClassNames.checkbox}`]:{background:"Highlight"},[`:focus:hover .${this.GlobalClassNames.checkmark}`]:{color:"Window"},[`:hover .${this.GlobalClassNames.checkmark}`]:{color:"Window"}}},p.message&&{marginBottom:2}],input:{[`.${t.IsFocusVisibleClassName} &:focus + label::before`]:{content:"",position:"absolute",inset:-1,border:"1px solid transparent !important",outline:"1px solid var(--vscode-focusBorder) !important",[t.HighContrastSelector]:{outline:"1px solid WindowText"}}},checkbox:{backgroundColor:"var(--vscode-debugToolBar-background, var(--vscode-editorWidget-background))",borderColor:"var(--vscode-editorWidget-border)",opacity:f.disabled?.4:void 0,borderRadius:n.COMMON_INPUT_STYLES.borderRadius},checkmark:{color:"var(--vscode-checkbox-foreground, var(--vscode-editorWidget-foreground))"},text:{color:"var(--vscode-foreground)",opacity:f.disabled?.4:void 0}})}render(){const c=(0,a.getMessageInfo)(this.props),p=e.default.createElement(t.Checkbox,h(m({},this.props),{styles:f=>m(m({},this.setStyle(c,f)),this.props.styles)}));return c.message?e.default.createElement(a.MessageWrapper,{message:c},p):p}}r.UICheckbox=u,u.__docgenInfo={description:`UICheckbox component.
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox

@exports
@class UICheckbox
@extends {React.Component<ICheckboxProps, {}>}`,methods:[{name:"setStyle",docblock:null,modifiers:[],params:[{name:"messageInfo",optional:!1,type:{name:"InputValidationMessageInfo",alias:"InputValidationMessageInfo"}},{name:"props",optional:!1,type:{name:"ICheckboxStyleProps",alias:"ICheckboxStyleProps"}}],returns:{type:{name:"ICheckboxStyles"}}}],displayName:"UICheckbox",props:{warningMessage:{required:!1,tsType:{name:"string"},description:""},infoMessage:{required:!1,tsType:{name:"string"},description:""},errorMessage:{required:!1,tsType:{name:"string"},description:""},CheckboxMinWidth:{required:!1,tsType:{name:"number"},description:""}},composes:["ICheckboxProps"]}},"./src/components/UICheckbox/index.tsx"(d,r,s){var i=this&&this.__createBinding||(Object.create?(function(t,a,n,u){u===void 0&&(u=n);var l=Object.getOwnPropertyDescriptor(a,n);(!l||("get"in l?!a.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return a[n]}}),Object.defineProperty(t,u,l)}):(function(t,a,n,u){u===void 0&&(u=n),t[u]=a[n]})),e=this&&this.__exportStar||function(t,a){for(var n in t)n!=="default"&&!Object.prototype.hasOwnProperty.call(a,n)&&i(a,t,n)};Object.defineProperty(r,"__esModule",{value:!0}),e(s("./src/components/UICheckbox/UICheckbox.tsx"),r)},"./stories/UITextInput.story.tsx"(d,r,s){var i=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(r,"__esModule",{value:!0}),r.withMessages=r.accessibilityStates=r.defaultUsage=void 0;const e=i(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=s("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),a=s("./src/components/UIInput/index.tsx"),n=s("./src/components/UICheckbox/index.tsx");r.default={title:"Basic Inputs/Input"};const u={childrenGap:40},l={iconName:"FolderOpened"},c=()=>e.default.createElement(t.Stack,{tokens:u,style:{width:300}},e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(t.Text,{variant:"large",className:"textColor"},"UIInput"),e.default.createElement(a.UITextInput,{label:"Enter your name"})),e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(t.Text,{variant:"large",className:"textColor"},"UIInput with icon"),e.default.createElement(a.UITextInput,{label:"Select your folder",iconProps:l})),e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(t.Text,{variant:"large",className:"textColor"},"UIInput disabled"),e.default.createElement(a.UITextInput,{label:"Enter your name",disabled:!0})),e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(a.UITextInput,{label:"Required",required:!0})));r.defaultUsage=c;const p=()=>{const[o,b]=e.default.useState(!1),[_,g]=e.default.useState("Content"),v={multiline:o,onChange:(I,x)=>{g(x||"")}};return e.default.createElement("div",null,e.default.createElement(t.Stack,{horizontal:!0,tokens:u},e.default.createElement(n.UICheckbox,{label:"Multi Line",checked:o,onChange:(I,x)=>{b(x)}})),e.default.createElement(t.Stack,{horizontal:!0,tokens:u},e.default.createElement("table",{style:{borderSpacing:20,width:"100%",maxWidth:750}},e.default.createElement("tr",null,e.default.createElement("td",{style:{minWidth:100,width:150}}),e.default.createElement("td",{style:{width:"50%"}},"Placeholder Text"),e.default.createElement("td",{style:{width:"50%"}},"Input Text")),e.default.createElement("tr",null,e.default.createElement("td",null,"Regular"),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{placeholder:"Placeholder"}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{value:_})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Error"),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{placeholder:"Placeholder",errorMessage:"Dummy error"}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{errorMessage:"Dummy error",value:_})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Disabled"),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{placeholder:"Placeholder",disabled:!0}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{value:_,disabled:!0})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Read Only"),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{placeholder:"Placeholder",readOnly:!0}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,h(m({},v),{value:_,readOnly:!0})))))))};r.accessibilityStates=p;const f=()=>{const o="Dummy message";return e.default.createElement(t.Stack,{tokens:u,style:{width:"100%"}},e.default.createElement(t.Stack,{tokens:{childrenGap:16},style:{width:300}},e.default.createElement(t.Text,{variant:"large",className:"textColor"},"UIInput with error message"),e.default.createElement(a.UITextInput,{label:"input field label",errorMessage:o})),e.default.createElement(t.Separator,null),e.default.createElement(t.Stack,{tokens:{childrenGap:16},style:{width:300}},e.default.createElement(t.Text,{variant:"large",className:"textColor"},"UIInput with warning message"),e.default.createElement(a.UITextInput,{label:"input field label",warningMessage:o})),e.default.createElement(t.Separator,null),e.default.createElement(t.Stack,{tokens:{childrenGap:16},style:{width:300}},e.default.createElement(t.Text,{variant:"large",className:"textColor"},"UIInput with info message"),e.default.createElement(a.UITextInput,{label:"input field label",infoMessage:o})))};r.withMessages=f}}]);})();