@sap-ux/ui-components
Version:
SAP UI Components Library
3 lines (2 loc) • 18.1 kB
JavaScript
(()=>{var I=Object.defineProperty,O=Object.defineProperties;var P=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var E=(m,o,n)=>o in m?I(m,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):m[o]=n,g=(m,o)=>{for(var n in o||(o={}))U.call(o,n)&&E(m,n,o[n]);if(C)for(var n of C(o))D.call(o,n)&&E(m,n,o[n]);return m},S=(m,o)=>O(m,P(o));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[239],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@13.3.2_sass@1.66.1_webpack@5.96.1/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss":(m,o,n)=>{var _=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js"),r=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js"),s=r(_);s.push([m.id,":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)}",""]),m.exports=s},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js":m=>{"use strict";m.exports=function(o){var n=[];return n.toString=function(){return this.map(function(r){var s="",e=typeof r[5]!="undefined";return r[4]&&(s+="@supports (".concat(r[4],") {")),r[2]&&(s+="@media ".concat(r[2]," {")),e&&(s+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),s+=o(r),e&&(s+="}"),r[2]&&(s+="}"),r[4]&&(s+="}"),s}).join("")},n.i=function(r,s,e,t,a){typeof r=="string"&&(r=[[null,r,void 0]]);var l={};if(e)for(var c=0;c<this.length;c++){var b=this[c][0];b!=null&&(l[b]=!0)}for(var f=0;f<r.length;f++){var d=[].concat(r[f]);e&&l[d[0]]||(typeof a!="undefined"&&(typeof d[5]=="undefined"||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),s&&(d[2]&&(d[1]="@media ".concat(d[2]," {").concat(d[1],"}")),d[2]=s),t&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=t):d[4]="".concat(t)),n.push(d))}},n}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js":m=>{"use strict";m.exports=function(o){return o[1]}},"./src/styles/_shadows.scss":(m,o,n)=>{"use strict";n.r(o),n.d(o,{default:()=>T});var _=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),r=n.n(_),s=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js"),e=n.n(s),t=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js"),a=n.n(t),l=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),c=n.n(l),b=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js"),f=n.n(b),d=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js"),i=n.n(d),p=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@13.3.2_sass@1.66.1_webpack@5.96.1/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss"),u=n.n(p),y={};for(const v in p)v!=="default"&&(y[v]=()=>p[v]);n.d(o,y);var h={};h.styleTagTransform=i(),h.setAttributes=c(),h.insert=a().bind(null,"head"),h.domAPI=e(),h.insertStyleElement=f();var w=r()(u(),h);const T=u()&&u().locals?u().locals:void 0},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":m=>{"use strict";var o=[];function n(s){for(var e=-1,t=0;t<o.length;t++)if(o[t].identifier===s){e=t;break}return e}function _(s,e){for(var t={},a=[],l=0;l<s.length;l++){var c=s[l],b=e.base?c[0]+e.base:c[0],f=t[b]||0,d="".concat(b," ").concat(f);t[b]=f+1;var i=n(d),p={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(i!==-1)o[i].references++,o[i].updater(p);else{var u=r(p,e);e.byIndex=l,o.splice(l,0,{identifier:d,updater:u,references:1})}a.push(d)}return a}function r(s,e){var t=e.domAPI(e);t.update(s);var a=function(c){if(c){if(c.css===s.css&&c.media===s.media&&c.sourceMap===s.sourceMap&&c.supports===s.supports&&c.layer===s.layer)return;t.update(s=c)}else t.remove()};return a}m.exports=function(s,e){e=e||{},s=s||[];var t=_(s,e);return function(l){l=l||[];for(var c=0;c<t.length;c++){var b=t[c],f=n(b);o[f].references--}for(var d=_(l,e),i=0;i<t.length;i++){var p=t[i],u=n(p);o[u].references===0&&(o[u].updater(),o.splice(u,1))}t=d}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js":m=>{"use strict";var o={};function n(r){if(typeof o[r]=="undefined"){var s=document.querySelector(r);if(window.HTMLIFrameElement&&s instanceof window.HTMLIFrameElement)try{s=s.contentDocument.head}catch(e){s=null}o[r]=s}return o[r]}function _(r,s){var e=n(r);if(!e)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");e.appendChild(s)}m.exports=_},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js":m=>{"use strict";function o(n){var _=document.createElement("style");return n.setAttributes(_,n.attributes),n.insert(_,n.options),_}m.exports=o},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(m,o,n)=>{"use strict";function _(r){var s=n.nc;s&&r.setAttribute("nonce",s)}m.exports=_},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js":m=>{"use strict";function o(r,s,e){var t="";e.supports&&(t+="@supports (".concat(e.supports,") {")),e.media&&(t+="@media ".concat(e.media," {"));var a=typeof e.layer!="undefined";a&&(t+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),t+=e.css,a&&(t+="}"),e.media&&(t+="}"),e.supports&&(t+="}");var l=e.sourceMap;l&&typeof btoa!="undefined"&&(t+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(l))))," */")),s.styleTagTransform(t,r,s.options)}function n(r){if(r.parentNode===null)return!1;r.parentNode.removeChild(r)}function _(r){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var s=r.insertStyleElement(r);return{update:function(t){o(s,r,t)},remove:function(){n(s)}}}m.exports=_},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js":m=>{"use strict";function o(n,_){if(_.styleSheet)_.styleSheet.cssText=n;else{for(;_.firstChild;)_.removeChild(_.firstChild);_.appendChild(document.createTextNode(n))}}m.exports=o},"./src/components/UICallout/CalloutCollisionTransform.ts":(m,o)=>{"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.CalloutCollisionTransform=void 0;const n={target:".ms-Dialog-actions",container:".ms-Dialog-main",absolute:!0,minPagePadding:10},_=20;class r{constructor(e,t,a=n){this.originalStyle={},this.source=e,this.callout=t,this.props=a,this.applyTransformation=this.applyTransformation.bind(this),this.resetTransformation=this.resetTransformation.bind(this),this.preventDismissOnEvent=this.preventDismissOnEvent.bind(this)}createPlaceholder(e){const t=document.createElement("div");return t.classList.add("ts-Callout-transformation"),t.style.height=`${e}px`,t}getElements(){const e=this.source.current,t=e==null?void 0:e.closest(this.props.container);if(t&&e){const a=t==null?void 0:t.querySelector(this.props.target);if(a){const l={container:{dom:t,rect:t.getBoundingClientRect()},target:{dom:a,rect:a.getBoundingClientRect()},source:{dom:e,rect:e.getBoundingClientRect()}},c=this.callout.current;return c&&(l.callout={dom:c,rect:c.getBoundingClientRect()}),l}}}applyTransformation(){const e=this.getElements();if(!e)return;const{container:t,target:a,callout:l,source:c}=e;if(l){const b=window.innerHeight-n.minPagePadding,f=l.rect.height,d=c.rect.bottom;let i=d+f-a.rect.top,p=d+l.rect.height;if(i<=0||p>=b)return;if(p+=a.rect.height,p<=b&&(i+=_),this.props.absolute){const u=t.dom.style;this.originalStyle={transform:u.transform,position:u.position,top:u.top,left:u.left},u.transform="",u.position="absolute",u.top=`${t.rect.top}px`,u.left=`${t.rect.left}px`}this.placeholder=this.createPlaceholder(i),a.dom.prepend(this.placeholder)}}resetTransformation(){const e=this.getElements();if(!e)return;const{container:t,target:a}=e;for(const l in this.originalStyle){const c=this.originalStyle[l];typeof c=="string"&&(t.dom.style[l]=c)}this.originalStyle={},this.placeholder&&(a.dom.removeChild(this.placeholder),this.placeholder=void 0)}preventDismissOnEvent(e){const t=this.getElements();return!!(e.type==="focus"&&(t!=null&&t.target.dom.contains(e.target)))}}o.CalloutCollisionTransform=r},"./src/components/UICallout/UICallout.tsx":function(m,o,n){"use strict";var _=this&&this.__importDefault||function(f){return f&&f.__esModule?f:{default:f}};Object.defineProperty(o,"__esModule",{value:!0}),o.UICallout=o.getCalloutStyle=o.UICalloutContentPadding=o.CALLOUT_STYLES=void 0;const r=_(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),s=n("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),e=n("./src/utilities/index.ts");n("./src/styles/_shadows.scss"),o.CALLOUT_STYLES={background:"var(--vscode-editorWidget-background)",boxShadow:"var(--ui-box-shadow-small)",borderColor:"var(--vscode-editorWidget-border)",text:"var(--vscode-editorWidget-foreground)",font:"var(--vscode-font-family)",borderRadius:2};var t;(function(f){f.None="None",f.Standard="Standard"})(t||(o.UICalloutContentPadding=t={}));const a=new Map([[t.Standard,8]]),l=(f,d)=>typeof f=="object"&&typeof f[d]=="object"?f[d]:{},c=f=>{var d,i;return{root:g({boxShadow:o.CALLOUT_STYLES.boxShadow,backgroundColor:o.CALLOUT_STYLES.background,borderRadius:o.CALLOUT_STYLES.borderRadius,border:`1px solid ${o.CALLOUT_STYLES.borderColor}`},l(f.styles,"root")),beak:g({backgroundColor:o.CALLOUT_STYLES.background,boxShadow:o.CALLOUT_STYLES.boxShadow},l(f.styles,"beak")),beakCurtain:g({backgroundColor:o.CALLOUT_STYLES.background,borderRadius:o.CALLOUT_STYLES.borderRadius},l(f.styles,"beakCurtain")),calloutMain:g({backgroundColor:"transparent",color:o.CALLOUT_STYLES.text,fontFamily:o.CALLOUT_STYLES.font,borderRadius:o.CALLOUT_STYLES.borderRadius,minWidth:(d=f.calloutMinWidth)!=null?d:300,boxSizing:"border-box",padding:a.get((i=f.contentPadding)!=null?i:t.None)},l(f.styles,"calloutMain")),container:l(f.styles,"container")}};o.getCalloutStyle=c;class b extends r.default.Component{constructor(d){super(d),this.onKeyDown=this.onKeyDown.bind(this)}onKeyDown(d){const{onKeyDown:i,focusTargetSiblingOnTabPress:p,target:u}=this.props;if(p&&d.key==="Tab"&&u){let y=null;if(typeof u=="string"){const h=(0,s.getDocument)();y=h==null?void 0:h.querySelector(u)}else"getBoundingClientRect"in u&&(0,e.isHTMLElement)(u)&&(y=u);y&&(0,e.focusToSibling)(y,!d.shiftKey)&&(d.stopPropagation(),d.preventDefault())}i==null||i(d)}render(){return r.default.createElement(s.Callout,S(g({},this.props),{onKeyDown:this.onKeyDown,styles:(0,o.getCalloutStyle)(this.props)}),this.props.children)}}o.UICallout=b},"./src/components/UICallout/index.tsx":function(m,o,n){"use strict";var _=this&&this.__createBinding||(Object.create?function(s,e,t,a){a===void 0&&(a=t);var l=Object.getOwnPropertyDescriptor(e,t);(!l||("get"in l?!e.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return e[t]}}),Object.defineProperty(s,a,l)}:function(s,e,t,a){a===void 0&&(a=t),s[a]=e[t]}),r=this&&this.__exportStar||function(s,e){for(var t in s)t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&_(e,s,t)};Object.defineProperty(o,"__esModule",{value:!0}),r(n("./src/components/UICallout/CalloutCollisionTransform.ts"),o),r(n("./src/components/UICallout/UICallout.tsx"),o)},"./src/components/UIFocusZone/UIFocusTrapZone.tsx":function(m,o,n){"use strict";var _=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(o,"__esModule",{value:!0}),o.UIFocusTrapZone=void 0;const r=_(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),s=n("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js");class e extends r.default.Component{constructor(a){super(a)}render(){return r.default.createElement(s.FocusTrapZone,g({},this.props),this.props.children)}}o.UIFocusTrapZone=e},"./src/components/UIFocusZone/UIFocusZone.tsx":function(m,o,n){"use strict";var _=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(o,"__esModule",{value:!0}),o.UIFocusZone=o.UIFocusZoneTabbableElements=o.IFocusZone=o.UIFocusZoneProps=o.UIFocusZoneDirection=void 0;const r=_(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),s=n("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(o,"UIFocusZoneProps",{enumerable:!0,get:function(){return s.IFocusZoneProps}}),Object.defineProperty(o,"UIFocusZoneDirection",{enumerable:!0,get:function(){return s.FocusZoneDirection}}),Object.defineProperty(o,"IFocusZone",{enumerable:!0,get:function(){return s.IFocusZone}}),Object.defineProperty(o,"UIFocusZoneTabbableElements",{enumerable:!0,get:function(){return s.FocusZoneTabbableElements}});class e extends r.default.Component{constructor(a){super(a)}render(){return r.default.createElement(s.FocusZone,g({},this.props),this.props.children)}}o.UIFocusZone=e},"./src/components/UIFocusZone/index.tsx":function(m,o,n){"use strict";var _=this&&this.__createBinding||(Object.create?function(s,e,t,a){a===void 0&&(a=t);var l=Object.getOwnPropertyDescriptor(e,t);(!l||("get"in l?!e.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return e[t]}}),Object.defineProperty(s,a,l)}:function(s,e,t,a){a===void 0&&(a=t),s[a]=e[t]}),r=this&&this.__exportStar||function(s,e){for(var t in s)t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&_(e,s,t)};Object.defineProperty(o,"__esModule",{value:!0}),r(n("./src/components/UIFocusZone/UIFocusTrapZone.tsx"),o),r(n("./src/components/UIFocusZone/UIFocusZone.tsx"),o)},"./stories/UICallout.story.tsx":function(m,o,n){"use strict";var _=this&&this.__createBinding||(Object.create?function(i,p,u,y){y===void 0&&(y=u);var h=Object.getOwnPropertyDescriptor(p,u);(!h||("get"in h?!p.__esModule:h.writable||h.configurable))&&(h={enumerable:!0,get:function(){return p[u]}}),Object.defineProperty(i,y,h)}:function(i,p,u,y){y===void 0&&(y=u),i[y]=p[u]}),r=this&&this.__setModuleDefault||(Object.create?function(i,p){Object.defineProperty(i,"default",{enumerable:!0,value:p})}:function(i,p){i.default=p}),s=this&&this.__importStar||function(i){if(i&&i.__esModule)return i;var p={};if(i!=null)for(var u in i)u!=="default"&&Object.prototype.hasOwnProperty.call(i,u)&&_(p,i,u);return r(p,i),p};Object.defineProperty(o,"__esModule",{value:!0}),o.Callout=void 0;const e=s(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=n("./src/components/UIButton/index.tsx"),a=n("./src/components/UICallout/index.tsx"),l=n("./src/components/UIFocusZone/index.tsx"),c=n("./src/components/Icons.tsx");o.default={title:"Dropdowns/Callout"};const b=i=>{const{id:p}=i,[u,y]=(0,e.useState)(!1),h=()=>{y(!u)};return e.default.createElement("div",null,e.default.createElement(t.UIIconButton,{id:p,iconProps:{iconName:c.UiIcons.Bulb},checked:u,onClick:h}),u&&e.default.createElement(a.UICallout,{target:`#${p}`,isBeakVisible:!0,beakWidth:5,directionalHint:4,onDismiss:()=>h(),calloutWidth:300,calloutMinWidth:300,contentPadding:a.UICalloutContentPadding.Standard},e.default.createElement("div",null,"lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt")))},f=i=>{const{id:p}=i,[u,y]=(0,e.useState)(!1),h=()=>{y(!u)};return e.default.createElement("div",null,e.default.createElement(t.UIDefaultButton,{id:p,iconProps:{iconName:c.UiIcons.Bulb},checked:u,onClick:h},"Open"),u&&e.default.createElement(a.UICallout,{target:`#${p}`,isBeakVisible:!0,setInitialFocus:!0,beakWidth:5,directionalHint:4,onDismiss:()=>h(),calloutWidth:300,calloutMinWidth:300,contentPadding:a.UICalloutContentPadding.Standard,focusTargetSiblingOnTabPress:!0},e.default.createElement("div",null,e.default.createElement(l.UIFocusZone,null,e.default.createElement(t.UIDefaultButton,{onClick:h},"Option 1"),e.default.createElement(t.UIDefaultButton,{onClick:h},"Option 2"),e.default.createElement(t.UIDefaultButton,{onClick:h},"Option 3")))))},d=()=>e.default.createElement("div",null,e.default.createElement(b,{id:"callout-with-text-id"}),e.default.createElement(f,{id:"callout-with-items-1-id"}),e.default.createElement(f,{id:"callout-with-items-2-id"}));o.Callout=d}}]);})();