UNPKG

@sap-ux/ui-components

Version:

SAP UI Components Library

SAP/open-ux-tools

29 lines (24 loc) • 17.6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
(()=>{var R=Object.defineProperty,j=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var D=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var S=(d,e,t)=>e in d?R(d,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):d[e]=t,p=(d,e)=>{for(var t in e||(e={}))x.call(e,t)&&S(d,t,e[t]);if(D)for(var t of D(e))O.call(e,t)&&S(d,t,e[t]);return d},M=(d,e)=>j(d,U(e));var L=(d,e)=>{var t={};for(var a in d)x.call(d,a)&&e.indexOf(a)<0&&(t[a]=d[a]);if(d!=null&&D)for(var a of D(d))e.indexOf(a)<0&&O.call(d,a)&&(t[a]=d[a]);return t};(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[880],{"../../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/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UILoader/UILoader.scss"(d,e,t){var a=t("../../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=t("../../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(a);_.push([d.id,".ui-large-header{font-family:var(--vscode-font-family);font-weight:bold;font-size:24px;font-style:normal;line-height:29px;color:var(--vscode-settings-headerForeground)}.ui-medium-header{font-family:var(--vscode-font-family);font-weight:bold;font-size:14px;font-style:normal;line-height:16px;color:var(--vscode-settings-headerForeground)}.ui-small-header{font-family:var(--vscode-font-family);font-weight:bold;font-size:13px;font-style:normal;line-height:15px;color:var(--vscode-settings-textInputForeground)}.ui-medium-text{font-family:var(--vscode-font-family);font-weight:normal;font-size:13px;font-style:normal;line-height:18px;color:var(--vscode-settings-textInputForeground)}.ui-medium-italic-text{font-family:var(--vscode-font-family);font-weight:normal;font-size:13px;font-style:italic;line-height:18px;color:var(--vscode-settings-textInputForeground)}.ui-small-text{font-family:var(--vscode-font-family);font-weight:normal;font-size:11px;font-style:normal;line-height:15px;color:var(--vscode-settings-textInputForeground)}.ui-small-italic-text{font-family:var(--vscode-font-family);font-weight:normal;font-size:11px;font-style:italic;line-height:15px;color:var(--vscode-settings-textInputForeground)}code{font-family:var(--vscode-editor-font-family);font-size:85%;padding:2px 4px;border-radius:var(--vscode-cornerRadius-small, 4px);color:var(--vscode-textPreformat-foreground);background-color:var(--vscode-textPreformat-background)}:root{--ui-box-shadow-small: 0 4px 8px 0 var(--vscode-widget-shadow);--ui-box-shadow-medium: 0 6px 12px 0 var(--vscode-widget-shadow);--ui-box-shadow-large: 0 10px 20px 0 var(--vscode-widget-shadow)}.ui-box-shadow-small{box-shadow:var(--ui-box-shadow-small)}.ui-box-shadow-medium{box-shadow:var(--ui-box-shadow-medium)}.ui-box-shadow-large{box-shadow:var(--ui-box-shadow-large)}.uiLoaderXLarge .ms-Spinner-circle{width:50px;height:50px}.uiLoaderXSmall .ms-Spinner-circle{border-width:1px;width:12px;height:12px}.ui-loader--delayed{opacity:0;animation:1s ease-in .3s normal forwards 1 ui-loader-fade-in;z-index:1}@keyframes ui-loader-fade-in{0%{opacity:0}100%{opacity:1}}",""]),d.exports=_},"./src/components/UILoader/UILoader.scss"(d,e,t){"use strict";t.r(e),t.d(e,{default:()=>b});var a=t("../../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=t.n(a),_=t("../../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"),n=t.n(_),o=t("../../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"),s=t.n(o),r=t("../../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"),u=t.n(r),c=t("../../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"),i=t.n(c),m=t("../../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"),g=t.n(m),h=t("../../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/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UILoader/UILoader.scss"),y=t.n(h),v={};for(const E in h)E!=="default"&&(v[E]=()=>h[E]);t.d(e,v);var f={};f.styleTagTransform=g(),f.setAttributes=u(),f.insert=s().bind(null,"head"),f.domAPI=n(),f.insertStyleElement=i();var w=l()(y(),f);const b=y()&&y().locals?y().locals:void 0},"./src/components/UIDialog/UIDialog.tsx"(d,e,t){"use strict";var a=this&&this.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(e,"__esModule",{value:!0}),e.UIDialog=e.UIDialogScrollArea=e.DIALOG_STYLES=e.DIALOG_MAX_HEIGHT_OFFSET=void 0;const l=a(t("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),_=t("../../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"),n=t("./src/components/UIButton/index.tsx"),o=t("./src/utilities/DeepMerge.ts");t("./src/styles/_shadows.scss"),e.DIALOG_MAX_HEIGHT_OFFSET=32,e.DIALOG_STYLES={background:"var(--vscode-editorWidget-background)",boxShadow:"var(--ui-box-shadow-medium)",borderColor:"var(--vscode-editorWidget-border)",borderRadius:"var(--vscode-cornerRadius-small, 4px)",vPadding:20,vPaddingHalf:10,hPadding:45,title:{color:"var(--vscode-panelTitle-activeForeground)"},contentText:{fontSize:13,color:"var(--vscode-foreground)"},modalOverlay:{background:"var(--vscode-editor-background)",opacity:.8}};var s;(function(u){u.Content="Content",u.Dialog="Dialog"})(s||(e.UIDialogScrollArea=s={}));class r extends l.default.Component{constructor(c){super(c),this.onResize=this.onResize.bind(this),this.onModalLayerMount=this.onModalLayerMount.bind(this),this.onModalLayerUnmount=this.onModalLayerUnmount.bind(this),this.attachResize=this.attachResize.bind(this),this.detachResize=this.detachResize.bind(this),this.onHeaderMouseDown=this.onHeaderMouseDown.bind(this),this.state={resizeMaxHeight:this.getResizeMaxHeight(),isMounted:!1}}componentDidUpdate(c){const{scrollArea:i}=this.props;c.scrollArea!==i&&(i===s.Content?this.attachResize():this.detachResize())}onModalLayerMount(){this.attachResize(),this.setState({isMounted:!0})}onModalLayerUnmount(){this.detachResize(),this.setState({isMounted:!1})}attachResize(){window.addEventListener("resize",this.onResize),this.onResize()}detachResize(){window.removeEventListener("resize",this.onResize)}onResize(){this.setState({resizeMaxHeight:this.getResizeMaxHeight()})}getResizeMaxHeight(){return window.innerHeight-e.DIALOG_MAX_HEIGHT_OFFSET}getFooter(){let c;const{acceptButtonText:i,cancelButtonText:m,onAccept:g,onCancel:h,acceptButtonId:y,cancelButtonId:v,footer:f}=this.props,w={styles:{actionsRight:{width:"100%",textAlign:"center",justifyContent:"center",margin:"0px"},actions:{margin:`${e.DIALOG_STYLES.vPaddingHalf}px 0 ${e.DIALOG_STYLES.vPadding}px`,lineHeight:"auto"},action:{margin:"0px 5px"}}};return f?c=l.default.createElement(_.DialogFooter,p({},w),f):(g||h)&&(c=l.default.createElement(_.DialogFooter,p({},w),g?l.default.createElement(n.UIDefaultButton,{onClick:g,primary:!0,style:{height:"26px"},id:y},i):"",h?l.default.createElement(n.UIDefaultButton,{onClick:h,style:{height:"26px"},id:v},m):"")),c}onHeaderMouseDown(c){var m;if(!((m=this.props.modalProps)!=null&&m.dragOptions))return;const i=c.target.closest(".ms-Dialog-main");i!=null&&i.firstChild&&i.firstChild.focus()}render(){const I=this.props,{acceptButtonText:c,cancelButtonText:i,onAccept:m,onCancel:g,acceptButtonId:h,cancelButtonId:y,footer:v,closeButtonVisible:f,multiLineTitle:w,scrollArea:b=s.Content,children:E}=I,T=L(I,["acceptButtonText","cancelButtonText","onAccept","onCancel","acceptButtonId","cancelButtonId","footer","closeButtonVisible","multiLineTitle","scrollArea","children"]),A={minWidth:"460px",modalProps:{layerProps:{onLayerDidMount:this.onModalLayerMount,onLayerWillUnmount:this.onModalLayerUnmount},overlay:{styles:{root:{background:e.DIALOG_STYLES.modalOverlay.background,opacity:e.DIALOG_STYLES.modalOverlay.opacity}}}},styles:{root:{opacity:!this.props.isOpenAnimated||this.state.isMounted?void 0:0},main:p({backgroundColor:e.DIALOG_STYLES.background,border:`1px solid ${e.DIALOG_STYLES.borderColor}`,boxShadow:e.DIALOG_STYLES.boxShadow,borderRadius:e.DIALOG_STYLES.borderRadius,minHeight:100},b===s.Content&&{overflow:"hidden",".ms-Modal-scrollableContent":{overflow:"hidden",height:"100%"}})},dialogContentProps:{title:this.props.title,titleProps:{className:"ui-medium-header",style:p({padding:`${e.DIALOG_STYLES.vPadding}px 0 5px`,textAlign:"center",color:e.DIALOG_STYLES.title.color},!w&&{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",padding:`${e.DIALOG_STYLES.vPadding}px ${e.DIALOG_STYLES.hPadding}px 5px`}),onMouseDown:this.onHeaderMouseDown},styles:{button:{display:f?void 0:"none"},inner:p({padding:"0"},b===s.Content&&{height:"100%",overflow:"hidden",display:"flex",flexDirection:"column"}),subText:p({margin:"0",lineHeight:18},e.DIALOG_STYLES.contentText),content:p(p({},e.DIALOG_STYLES.contentText),b===s.Content&&{height:"100%",display:"flex",flexDirection:"column",maxHeight:this.state.resizeMaxHeight}),innerContent:p({padding:`${e.DIALOG_STYLES.vPaddingHalf}px ${e.DIALOG_STYLES.hPadding}px`,boxSizing:"border-box"},b===s.Content&&{height:"100%",overflow:"auto",boxSizing:"border-box"})}}},P=(0,o.deepMerge)(A,T);return l.default.createElement(_.Dialog,p({},P),E,this.getFooter())}}e.UIDialog=r,r.defaultProps={isOpenAnimated:!0},r.__docgenInfo={description:`UIDialog component. based on https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog and https://app.abstract.com/projects/42046ab5-889d-4a59-88e6-1089e98cba67/branches/master/commits/f1fcd77447bb2b32aab3498311c1c39517e47e49/files/1455D538-559B-48EF-8D9F-1C2884ED540B/layers/AFDAAFD3-BFA6-4E96-BB6D-057DD13753E5 @exports @class UIDialog @extends {React.Component<IDialogProps, {}>}`,methods:[{name:"getFooter",docblock:`Method returns footer element depending in component props. Three states. 1. Accept/Decline buttons. 2. Custom content of footer. 3. No footer. @returns {JSX.Element | null} Footer element to render.`,modifiers:[],params:[],returns:{description:"Footer element to render.",type:{name:"union",raw:"JSX.Element | undefined",elements:[{name:"JSX.Element"},{name:"undefined"}]}},description:`Method returns footer element depending in component props. Three states. 1. Accept/Decline buttons. 2. Custom content of footer. 3. No footer.`},{name:"onHeaderMouseDown",docblock:`Method handles mousedown event for dialog header area. Method added to handle scenario when we open dropdown menu and move dialog. Code in method sets focus to focuszone's placeholder - it triggers close for opened dropdown menu. @param {React.MouseEvent} event Mousedown event`,modifiers:[],params:[{name:"event",description:"Mousedown event",type:{name:"ReactMouseEvent",raw:"React.MouseEvent",alias:"React.MouseEvent"},optional:!1}],returns:{type:{name:"void"}},description:`Method handles mousedown event for dialog header area. Method added to handle scenario when we open dropdown menu and move dialog. Code in method sets focus to focuszone's placeholder - it triggers close for opened dropdown menu.`}],displayName:"UIDialog",props:{acceptButtonText:{required:!1,tsType:{name:"string"},description:""},cancelButtonText:{required:!1,tsType:{name:"string"},description:""},acceptButtonId:{required:!1,tsType:{name:"string"},description:""},cancelButtonId:{required:!1,tsType:{name:"string"},description:""},onAccept:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onCancel:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},scrollArea:{required:!1,tsType:{name:"UIDialogScrollArea"},description:""},closeButtonVisible:{required:!1,tsType:{name:"boolean"},description:""},footer:{required:!1,tsType:{name:"union",raw:"React.ReactElement | React.ReactElement[]",elements:[{name:"ReactReactElement",raw:"React.ReactElement"},{name:"Array",elements:[{name:"ReactReactElement",raw:"React.ReactElement"}],raw:"React.ReactElement[]"}]},description:""},multiLineTitle:{required:!1,tsType:{name:"boolean"},description:""},title:{required:!1,tsType:{name:"union",raw:"string | JSX.Element",elements:[{name:"string"},{name:"JSX.Element"}]},description:"The title text to display at the top of the dialog."},isOpenAnimated:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}},composes:["IDialogProps"]}},"./src/components/UIDialog/index.ts"(d,e,t){"use strict";var a=this&&this.__createBinding||(Object.create?(function(_,n,o,s){s===void 0&&(s=o);var r=Object.getOwnPropertyDescriptor(n,o);(!r||("get"in r?!n.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return n[o]}}),Object.defineProperty(_,s,r)}):(function(_,n,o,s){s===void 0&&(s=o),_[s]=n[o]})),l=this&&this.__exportStar||function(_,n){for(var o in _)o!=="default"&&!Object.prototype.hasOwnProperty.call(n,o)&&a(n,_,o)};Object.defineProperty(e,"__esModule",{value:!0}),l(t("./src/components/UIDialog/UIDialog.tsx"),e)},"./src/components/UILoader/UILoader.tsx"(d,e,t){"use strict";var a=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(e,"__esModule",{value:!0}),e.UILoader=e.UISpinnerSize=void 0;const l=a(t("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),_=t("../../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");Object.defineProperty(e,"UISpinnerSize",{enumerable:!0,get:function(){return _.SpinnerSize}}),t("./src/components/UILoader/UILoader.scss");class n extends l.default.Component{constructor(s){super(s)}render(){const{blockDOM:s,delayed:r}=this.props,u=()=>({root:p({},s&&{height:"100%"}),circle:[{borderColor:"var(--vscode-progressBar-background) var(--vscode-terminal-ansiBrightWhite) var(--vscode-terminal-ansiBrightWhite)",borderWidth:2,zIndex:1}],label:{color:"var(--vscode-foreground)",fontSize:14,fontWeight:"bold",zIndex:1}}),c=l.default.createElement(_.Spinner,M(p({},this.props),{styles:u}));if(s){const i=()=>({root:{backgroundColor:"transparent",selectors:{"&:before":{content:'""',position:"absolute",inset:0,backgroundColor:"var(--vscode-editor-background)",opacity:.6,zIndex:1}}}});return l.default.createElement(_.Overlay,{className:`ui-loader-blocker${r?" ui-loader--delayed":""}`,styles:i},c)}else return c}}e.UILoader=n,n.__docgenInfo={description:`UILoader component based on https://developer.microsoft.com/en-us/fluentui#/controls/web/spinner @exports @class UILoader @extends {React.Component<ISpinnerProps, {}>}`,methods:[],displayName:"UILoader",props:{blockDOM:{required:!1,tsType:{name:"boolean"},description:""},delayed:{required:!1,tsType:{name:"boolean"},description:""}},composes:["ISpinnerProps"]}},"./src/components/UILoader/index.tsx"(d,e,t){"use strict";var a=this&&this.__createBinding||(Object.create?(function(_,n,o,s){s===void 0&&(s=o);var r=Object.getOwnPropertyDescriptor(n,o);(!r||("get"in r?!n.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return n[o]}}),Object.defineProperty(_,s,r)}):(function(_,n,o,s){s===void 0&&(s=o),_[s]=n[o]})),l=this&&this.__exportStar||function(_,n){for(var o in _)o!=="default"&&!Object.prototype.hasOwnProperty.call(n,o)&&a(n,_,o)};Object.defineProperty(e,"__esModule",{value:!0}),l(t("./src/components/UILoader/UILoader.tsx"),e)},"./src/utilities/DeepMerge.ts"(d,e,t){"use strict";var a=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(e,"__esModule",{value:!0}),e.deepMerge=_;const l=a(t("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js"));function _(o,s){var c;const r=Object.keys(o).length?_({},o):{},u=Object.keys(s);for(const i of u){const m=s[i];if(n(m))if(!r[i]||n(r[i]))r[i]=_((c=r[i])!=null?c:{},m);else throw new Error("Object structures are not compatible!");else r[i]=m}return r}function n(o){return o?typeof o=="object"&&!Array.isArray(o)&&!l.default.isValidElement(o):!1}}}]);})();