@sap-ux/ui-components
Version:
SAP UI Components Library
8 lines (6 loc) • 12.2 kB
JavaScript
;(()=>{var g=Object.defineProperty,C=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var x=(l,s,a)=>s in l?g(l,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[s]=a,_=(l,s)=>{for(var a in s||(s={}))I.call(s,a)&&x(l,a,s[a]);if(v)for(var a of v(s))w.call(s,a)&&x(l,a,s[a]);return l},k=(l,s)=>C(l,y(s));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[558],{"../../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"(l){l.exports=function(s){var a=[];return a.toString=function(){return this.map(function(t){var e="",o=typeof t[5]!="undefined";return t[4]&&(e+="@supports (".concat(t[4],") {")),t[2]&&(e+="@media ".concat(t[2]," {")),o&&(e+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),e+=s(t),o&&(e+="}"),t[2]&&(e+="}"),t[4]&&(e+="}"),e}).join("")},a.i=function(t,e,o,r,u){typeof t=="string"&&(t=[[null,t,void 0]]);var n={};if(o)for(var c=0;c<this.length;c++){var p=this[c][0];p!=null&&(n[p]=!0)}for(var f=0;f<t.length;f++){var i=[].concat(t[f]);o&&n[i[0]]||(typeof u!="undefined"&&(typeof i[5]=="undefined"||(i[1]="@layer".concat(i[5].length>0?" ".concat(i[5]):""," {").concat(i[1],"}")),i[5]=u),e&&(i[2]&&(i[1]="@media ".concat(i[2]," {").concat(i[1],"}")),i[2]=e),r&&(i[4]?(i[1]="@supports (".concat(i[4],") {").concat(i[1],"}"),i[4]=r):i[4]="".concat(r)),a.push(i))}},a}},"../../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"(l){l.exports=function(s){return s[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"(l){var s=[];function a(e){for(var o=-1,r=0;r<s.length;r++)if(s[r].identifier===e){o=r;break}return o}function d(e,o){for(var r={},u=[],n=0;n<e.length;n++){var c=e[n],p=o.base?c[0]+o.base:c[0],f=r[p]||0,i="".concat(p," ").concat(f);r[p]=f+1;var h=a(i),b={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(h!==-1)s[h].references++,s[h].updater(b);else{var m=t(b,o);o.byIndex=n,s.splice(n,0,{identifier:i,updater:m,references:1})}u.push(i)}return u}function t(e,o){var r=o.domAPI(o);r.update(e);var u=function(c){if(c){if(c.css===e.css&&c.media===e.media&&c.sourceMap===e.sourceMap&&c.supports===e.supports&&c.layer===e.layer)return;r.update(e=c)}else r.remove()};return u}l.exports=function(e,o){o=o||{},e=e||[];var r=d(e,o);return function(n){n=n||[];for(var c=0;c<r.length;c++){var p=r[c],f=a(p);s[f].references--}for(var i=d(n,o),h=0;h<r.length;h++){var b=r[h],m=a(b);s[m].references===0&&(s[m].updater(),s.splice(m,1))}r=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/insertBySelector.js"(l){var s={};function a(t){if(typeof s[t]=="undefined"){var e=document.querySelector(t);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(o){e=null}s[t]=e}return s[t]}function d(t,e){var o=a(t);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(e)}l.exports=d},"../../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"(l){function s(a){var d=document.createElement("style");return a.setAttributes(d,a.attributes),a.insert(d,a.options),d}l.exports=s},"../../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"(l,s,a){function d(t){var e=a.nc;e&&t.setAttribute("nonce",e)}l.exports=d},"../../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"(l){function s(t,e,o){var r="";o.supports&&(r+="@supports (".concat(o.supports,") {")),o.media&&(r+="@media ".concat(o.media," {"));var u=typeof o.layer!="undefined";u&&(r+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),r+=o.css,u&&(r+="}"),o.media&&(r+="}"),o.supports&&(r+="}");var n=o.sourceMap;n&&typeof btoa!="undefined"&&(r+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(n))))," */")),e.styleTagTransform(r,t,e.options)}function a(t){if(t.parentNode===null)return!1;t.parentNode.removeChild(t)}function d(t){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(r){s(e,t,r)},remove:function(){a(e)}}}l.exports=d},"../../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"(l){function s(a,d){if(d.styleSheet)d.styleSheet.cssText=a;else{for(;d.firstChild;)d.removeChild(d.firstChild);d.appendChild(document.createTextNode(a))}}l.exports=s},"./src/components/UICheckbox/UICheckbox.tsx"(l,s,a){var d=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(s,"__esModule",{value:!0}),s.UICheckbox=void 0;const t=d(a("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),e=a("../../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"),o=a("./src/helper/ValidationMessage/index.tsx"),r=a("./src/components/UIInput/index.tsx");class u extends t.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)",[e.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,[e.HighContrastSelector]:{color:"Highlight"}}},{[`:hover .${this.GlobalClassNames.text}, :focus .${this.GlobalClassNames.text}`]:{color:"var(--vscode-foreground)",[e.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)"},[e.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:{[`.${e.IsFocusVisibleClassName} &:focus + label::before`]:{content:"",position:"absolute",inset:-1,border:"1px solid transparent !important",outline:"1px solid var(--vscode-focusBorder) !important",[e.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:r.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,o.getMessageInfo)(this.props),p=t.default.createElement(e.Checkbox,k(_({},this.props),{styles:f=>_(_({},this.setStyle(c,f)),this.props.styles)}));return c.message?t.default.createElement(o.MessageWrapper,{message:c},p):p}}s.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"(l,s,a){var d=this&&this.__createBinding||(Object.create?(function(e,o,r,u){u===void 0&&(u=r);var n=Object.getOwnPropertyDescriptor(o,r);(!n||("get"in n?!o.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return o[r]}}),Object.defineProperty(e,u,n)}):(function(e,o,r,u){u===void 0&&(u=r),e[u]=o[r]})),t=this&&this.__exportStar||function(e,o){for(var r in e)r!=="default"&&!Object.prototype.hasOwnProperty.call(o,r)&&d(o,e,r)};Object.defineProperty(s,"__esModule",{value:!0}),t(a("./src/components/UICheckbox/UICheckbox.tsx"),s)},"./stories/UICheckbox.story.tsx"(l,s,a){var d=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(s,"__esModule",{value:!0}),s.defaultUsage=void 0;const t=d(a("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),e=a("../../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"),o=a("./src/components/UICheckbox/index.tsx");s.default={title:"Basic Inputs/Checkbox"};const r={childrenGap:40},u=()=>{const n="Dummy message",c={width:"300px",marginBottom:"25px"};return t.default.createElement(e.Stack,{tokens:r,style:{width:300}},t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UICheckbox"),t.default.createElement(o.UICheckbox,{label:"check"})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UICheckbox with error message"),t.default.createElement(o.UICheckbox,{label:"Error",errorMessage:n})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UICheckbox with warning message"),t.default.createElement(o.UICheckbox,{label:"Warning",warningMessage:n})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UICheckbox with info message"),t.default.createElement(o.UICheckbox,{label:"Info",infoMessage:n})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UICheckbox disabled"),t.default.createElement(o.UICheckbox,{label:"Info",disabled:!0})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UICheckbox checked and disabled"),t.default.createElement(o.UICheckbox,{label:"Info",checked:!0,disabled:!0})))};s.defaultUsage=u}}]);})();