@sap-ux/ui-components 1.18.10 → 1.19.0
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/dist/components/UIDropdown/UIDropdown.scss +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/_variables.scss +2 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/index.d.ts.map +1 -0
- package/dist/theme/index.js +16 -0
- package/dist/theme/index.js.map +1 -0
- package/package.json +1 -1
- package/storybook/389.5879b7cc.iframe.bundle.js +55 -0
- package/storybook/{973.191cea0f.iframe.bundle.js → 973.78173de2.iframe.bundle.js} +1 -1
- package/storybook/{UICallout-story.3e5d6267.iframe.bundle.js → UICallout-story.a22932c4.iframe.bundle.js} +2 -2
- package/storybook/UICalloutCollisionTransform-story.14658a75.iframe.bundle.js +1 -0
- package/storybook/{UICheckbox-story.ccf2a048.iframe.bundle.js → UICheckbox-story.624f35bc.iframe.bundle.js} +2 -2
- package/storybook/UIChoiceGroup-story.3f7410da.iframe.bundle.js +1 -0
- package/storybook/UICombobox-story.2bb0d961.iframe.bundle.js +1 -0
- package/storybook/{UIContextualMenu-story.fdeddc59.iframe.bundle.js → UIContextualMenu-story.2362d642.iframe.bundle.js} +2 -2
- package/storybook/UICreateSelect-story.29c5d25d.iframe.bundle.js +2 -0
- package/storybook/UIDatePicker-story.22bc503a.iframe.bundle.js +2 -0
- package/storybook/UIDialog-story.b439e60a.iframe.bundle.js +2 -0
- package/storybook/UIDropdown-story.20290ff6.iframe.bundle.js +1 -0
- package/storybook/{UIFlexibleTable-story.e26a75b6.iframe.bundle.js → UIFlexibleTable-story.81441f28.iframe.bundle.js} +3 -3
- package/storybook/UIIcon-story.578a5088.iframe.bundle.js +2 -0
- package/storybook/UILabel-story.2dc6751f.iframe.bundle.js +1 -0
- package/storybook/UILoader-story.53a44698.iframe.bundle.js +6 -0
- package/storybook/UIQuickNavigation-story.3111e6e0.iframe.bundle.js +1 -0
- package/storybook/UISearchBox-story.383f63fc.iframe.bundle.js +1 -0
- package/storybook/UITextInput-story.c304ef49.iframe.bundle.js +2 -0
- package/storybook/{UIToggleGroup-story.50b2392c.iframe.bundle.js → UIToggleGroup-story.14a29e9a.iframe.bundle.js} +2 -2
- package/storybook/UITooltip-story.16d8ba4e.iframe.bundle.js +1 -0
- package/storybook/UITranslationInput-story.61827811.iframe.bundle.js +1 -0
- package/storybook/Utilities-story.2aeb882a.iframe.bundle.js +1 -0
- package/storybook/iframe.html +3 -3
- package/storybook/main.f69d158b.iframe.bundle.js +1 -0
- package/storybook/project.json +1 -1
- package/storybook/runtime~main.35667639.iframe.bundle.js +2 -0
- package/storybook/341.db2c9a0a.iframe.bundle.js +0 -27
- package/storybook/391.beec054e.iframe.bundle.js +0 -1
- package/storybook/721.ec63ce0c.iframe.bundle.js +0 -29
- package/storybook/UICalloutCollisionTransform-story.65d35532.iframe.bundle.js +0 -1
- package/storybook/UIChoiceGroup-story.a1b90c0f.iframe.bundle.js +0 -1
- package/storybook/UICombobox-story.0984959c.iframe.bundle.js +0 -1
- package/storybook/UICreateSelect-story.8d814a30.iframe.bundle.js +0 -2
- package/storybook/UIDatePicker-story.d3c6db4c.iframe.bundle.js +0 -2
- package/storybook/UIDialog-story.d6271932.iframe.bundle.js +0 -2
- package/storybook/UIDropdown-story.95735ffc.iframe.bundle.js +0 -1
- package/storybook/UIIcon-story.16f5f8ab.iframe.bundle.js +0 -2
- package/storybook/UILabel-story.38df6674.iframe.bundle.js +0 -1
- package/storybook/UILoader-story.946c062c.iframe.bundle.js +0 -6
- package/storybook/UIQuickNavigation-story.5f9bb898.iframe.bundle.js +0 -1
- package/storybook/UISearchBox-story.da945a0f.iframe.bundle.js +0 -1
- package/storybook/UITextInput-story.635fe59b.iframe.bundle.js +0 -2
- package/storybook/UITooltip-story.a9c06aed.iframe.bundle.js +0 -1
- package/storybook/UITranslationInput-story.e739a305.iframe.bundle.js +0 -1
- package/storybook/Utilities-story.d347dfb2.iframe.bundle.js +0 -1
- package/storybook/main.bf0ad9a1.iframe.bundle.js +0 -1
- package/storybook/runtime~main.bdb461c6.iframe.bundle.js +0 -2
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(()=>{(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[191],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/components/UIDatePicker/UIDatePicker.scss":(i,o,n)=>{var l=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js"),t=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js"),e=t(l);e.push([i.id,".ui-DatePicker{display:flex;align-items:center;height:24px;max-height:24px;min-height:24px;margin:0}.ui-DatePicker-toggle{position:relative;margin-left:10px}.ui-DatePicker-toggle input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.ui-DatePicker-toggle input::-webkit-calendar-picker-indicator{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer}body[data-vscode-theme-kind=vscode-dark] .ui-DatePicker-toggle input{color-scheme:dark}",""]),i.exports=e},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js":i=>{"use strict";i.exports=function(o){var n=[];return n.toString=function(){return this.map(function(t){var e="",s=typeof t[5]!="undefined";return t[4]&&(e+="@supports (".concat(t[4],") {")),t[2]&&(e+="@media ".concat(t[2]," {")),s&&(e+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),e+=o(t),s&&(e+="}"),t[2]&&(e+="}"),t[4]&&(e+="}"),e}).join("")},n.i=function(t,e,s,_,u){typeof t=="string"&&(t=[[null,t,void 0]]);var a={};if(s)for(var r=0;r<this.length;r++){var c=this[r][0];c!=null&&(a[c]=!0)}for(var p=0;p<t.length;p++){var d=[].concat(t[p]);s&&a[d[0]]||(typeof u!="undefined"&&(typeof d[5]=="undefined"||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=u),e&&(d[2]&&(d[1]="@media ".concat(d[2]," {").concat(d[1],"}")),d[2]=e),_&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=_):d[4]="".concat(_)),n.push(d))}},n}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js":i=>{"use strict";i.exports=function(o){return o[1]}},"./src/components/UIDatePicker/UIDatePicker.scss":(i,o,n)=>{"use strict";n.r(o),n.d(o,{default:()=>I});var l=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),t=n.n(l),e=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js"),s=n.n(e),_=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js"),u=n.n(_),a=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),r=n.n(a),c=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js"),p=n.n(c),d=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js"),f=n.n(d),y=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/components/UIDatePicker/UIDatePicker.scss"),m=n.n(y),P={};for(const v in y)v!=="default"&&(P[v]=()=>y[v]);n.d(o,P);var h={};h.styleTagTransform=f(),h.setAttributes=r(),h.insert=u().bind(null,"head"),h.domAPI=s(),h.insertStyleElement=p();var D=t()(m(),h);const I=m()&&m().locals?m().locals:void 0},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":i=>{"use strict";var o=[];function n(e){for(var s=-1,_=0;_<o.length;_++)if(o[_].identifier===e){s=_;break}return s}function l(e,s){for(var _={},u=[],a=0;a<e.length;a++){var r=e[a],c=s.base?r[0]+s.base:r[0],p=_[c]||0,d="".concat(c," ").concat(p);_[c]=p+1;var f=n(d),y={css:r[1],media:r[2],sourceMap:r[3],supports:r[4],layer:r[5]};if(f!==-1)o[f].references++,o[f].updater(y);else{var m=t(y,s);s.byIndex=a,o.splice(a,0,{identifier:d,updater:m,references:1})}u.push(d)}return u}function t(e,s){var _=s.domAPI(s);_.update(e);var u=function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap&&r.supports===e.supports&&r.layer===e.layer)return;_.update(e=r)}else _.remove()};return u}i.exports=function(e,s){s=s||{},e=e||[];var _=l(e,s);return function(a){a=a||[];for(var r=0;r<_.length;r++){var c=_[r],p=n(c);o[p].references--}for(var d=l(a,s),f=0;f<_.length;f++){var y=_[f],m=n(y);o[m].references===0&&(o[m].updater(),o.splice(m,1))}_=d}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js":i=>{"use strict";var o={};function n(t){if(typeof o[t]=="undefined"){var e=document.querySelector(t);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(s){e=null}o[t]=e}return o[t]}function l(t,e){var s=n(t);if(!s)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(e)}i.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js":i=>{"use strict";function o(n){var l=document.createElement("style");return n.setAttributes(l,n.attributes),n.insert(l,n.options),l}i.exports=o},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(i,o,n)=>{"use strict";function l(t){var e=n.nc;e&&t.setAttribute("nonce",e)}i.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js":i=>{"use strict";function o(t,e,s){var _="";s.supports&&(_+="@supports (".concat(s.supports,") {")),s.media&&(_+="@media ".concat(s.media," {"));var u=typeof s.layer!="undefined";u&&(_+="@layer".concat(s.layer.length>0?" ".concat(s.layer):""," {")),_+=s.css,u&&(_+="}"),s.media&&(_+="}"),s.supports&&(_+="}");var a=s.sourceMap;a&&typeof btoa!="undefined"&&(_+=`
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(_,t,e.options)}function n(t){if(t.parentNode===null)return!1;t.parentNode.removeChild(t)}function l(t){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(_){o(e,t,_)},remove:function(){n(e)}}}i.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js":i=>{"use strict";function o(n,l){if(l.styleSheet)l.styleSheet.cssText=n;else{for(;l.firstChild;)l.removeChild(l.firstChild);l.appendChild(document.createTextNode(n))}}i.exports=o},"./src/components/UIDatePicker/UIDatePicker.tsx":function(i,o,n){"use strict";var l=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(o,"__esModule",{value:!0}),o.UIDatePicker=void 0;const t=l(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),e=n("./src/components/UIInput/index.tsx"),s=n("./src/components/UIIcon/index.tsx"),_=n("./src/components/Icons.tsx");n("./src/components/UIDatePicker/UIDatePicker.scss");class u extends t.default.Component{constructor(r){var c;super(r),this.state={value:""},this.dateRegex=/^\d{4}-\d{2}-\d{2}$/,this.dateTimeRegex=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/,this.state.value=(c=r.defaultValue)!=null?c:"",this.onInputChange=this.onInputChange.bind(this),this.onPickerChange=this.onPickerChange.bind(this)}onInputChange(r,c=""){var p,d;c=c.trim(),(d=(p=this.props).onChange)==null||d.call(p,r,c),this.setState({value:c})}onPickerChange(r){var p,d;let c=r.target.value;!this.props.dateOnly&&!this.dateTimeRegex.test(c)&&(c=`${r.target.value}:00`),(d=(p=this.props).onChange)==null||d.call(p,r,c),this.setState({value:c})}render(){const r=this.dateRegex.test(this.state.value)||this.dateTimeRegex.test(this.state.value);return t.default.createElement("div",{className:"ui-DatePicker",onKeyDown:this.props.onKeyDown,onClick:this.props.onClick},t.default.createElement(e.UITextInput,{componentRef:this.props.componentRef,errorMessage:this.props.errorMessage,value:this.state.value,onChange:this.onInputChange}),t.default.createElement("div",{className:"ui-DatePicker-toggle"},t.default.createElement(s.UIIcon,{iconName:_.UiIcons.Calendar}),t.default.createElement("input",{type:this.props.dateOnly?"date":"datetime-local",step:"1",value:r?this.state.value:"",onChange:this.onPickerChange})))}}o.UIDatePicker=u},"./src/components/UIDatePicker/index.tsx":function(i,o,n){"use strict";var l=this&&this.__createBinding||(Object.create?function(e,s,_,u){u===void 0&&(u=_);var a=Object.getOwnPropertyDescriptor(s,_);(!a||("get"in a?!s.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return s[_]}}),Object.defineProperty(e,u,a)}:function(e,s,_,u){u===void 0&&(u=_),e[u]=s[_]}),t=this&&this.__exportStar||function(e,s){for(var _ in e)_!=="default"&&!Object.prototype.hasOwnProperty.call(s,_)&&l(s,e,_)};Object.defineProperty(o,"__esModule",{value:!0}),t(n("./src/components/UIDatePicker/UIDatePicker.tsx"),o)},"./stories/UIDatePicker.story.tsx":function(i,o,n){"use strict";var l=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(o,"__esModule",{value:!0}),o.defaultUsage=void 0;const t=l(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),e=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"),s=n("./src/components/UIDatePicker/index.tsx");o.default={title:"Basic Inputs/DatePicker"};const _={childrenGap:40},u=()=>t.default.createElement(e.Stack,{tokens:_,style:{width:300}},t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UIDatePicker"),t.default.createElement(s.UIDatePicker,{defaultValue:"2018-06-12T19:30"})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UIDatePicker with only date"),t.default.createElement(s.UIDatePicker,{defaultValue:"2020-07-21",dateOnly:!0})));o.defaultUsage=u}}]);})();
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";(()=>{var O=Object.defineProperty,M=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var S=(c,a,o)=>a in c?O(c,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):c[a]=o,T=(c,a)=>{for(var o in a||(a={}))w.call(a,o)&&S(c,o,a[o]);if(C)for(var o of C(a))P.call(a,o)&&S(c,o,a[o]);return c},A=(c,a)=>M(c,B(a));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[937],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js":c=>{c.exports=function(a){var o=[];return o.toString=function(){return this.map(function(l){var t="",e=typeof l[5]!="undefined";return l[4]&&(t+="@supports (".concat(l[4],") {")),l[2]&&(t+="@media ".concat(l[2]," {")),e&&(t+="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {")),t+=a(l),e&&(t+="}"),l[2]&&(t+="}"),l[4]&&(t+="}"),t}).join("")},o.i=function(l,t,e,n,h){typeof l=="string"&&(l=[[null,l,void 0]]);var p={};if(e)for(var r=0;r<this.length;r++){var y=this[r][0];y!=null&&(p[y]=!0)}for(var I=0;I<l.length;I++){var u=[].concat(l[I]);e&&p[u[0]]||(typeof h!="undefined"&&(typeof u[5]=="undefined"||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=h),t&&(u[2]&&(u[1]="@media ".concat(u[2]," {").concat(u[1],"}")),u[2]=t),n&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=n):u[4]="".concat(n)),o.push(u))}},o}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js":c=>{c.exports=function(a){return a[1]}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":c=>{var a=[];function o(t){for(var e=-1,n=0;n<a.length;n++)if(a[n].identifier===t){e=n;break}return e}function d(t,e){for(var n={},h=[],p=0;p<t.length;p++){var r=t[p],y=e.base?r[0]+e.base:r[0],I=n[y]||0,u="".concat(y," ").concat(I);n[y]=I+1;var m=o(u),E={css:r[1],media:r[2],sourceMap:r[3],supports:r[4],layer:r[5]};if(m!==-1)a[m].references++,a[m].updater(E);else{var v=l(E,e);e.byIndex=p,a.splice(p,0,{identifier:u,updater:v,references:1})}h.push(u)}return h}function l(t,e){var n=e.domAPI(e);n.update(t);var h=function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap&&r.supports===t.supports&&r.layer===t.layer)return;n.update(t=r)}else n.remove()};return h}c.exports=function(t,e){e=e||{},t=t||[];var n=d(t,e);return function(p){p=p||[];for(var r=0;r<n.length;r++){var y=n[r],I=o(y);a[I].references--}for(var u=d(p,e),m=0;m<n.length;m++){var E=n[m],v=o(E);a[v].references===0&&(a[v].updater(),a.splice(v,1))}n=u}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js":c=>{var a={};function o(l){if(typeof a[l]=="undefined"){var t=document.querySelector(l);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}a[l]=t}return a[l]}function d(l,t){var e=o(l);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(t)}c.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js":c=>{function a(o){var d=document.createElement("style");return o.setAttributes(d,o.attributes),o.insert(d,o.options),d}c.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(c,a,o)=>{function d(l){var t=o.nc;t&&l.setAttribute("nonce",t)}c.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js":c=>{function a(l,t,e){var n="";e.supports&&(n+="@supports (".concat(e.supports,") {")),e.media&&(n+="@media ".concat(e.media," {"));var h=typeof e.layer!="undefined";h&&(n+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),n+=e.css,h&&(n+="}"),e.media&&(n+="}"),e.supports&&(n+="}");var p=e.sourceMap;p&&typeof btoa!="undefined"&&(n+=`
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(p))))," */")),t.styleTagTransform(n,l,t.options)}function o(l){if(l.parentNode===null)return!1;l.parentNode.removeChild(l)}function d(l){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var t=l.insertStyleElement(l);return{update:function(n){a(t,l,n)},remove:function(){o(t)}}}c.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js":c=>{function a(o,d){if(d.styleSheet)d.styleSheet.cssText=o;else{for(;d.firstChild;)d.removeChild(d.firstChild);d.appendChild(document.createTextNode(o))}}c.exports=a},"./stories/UIDialog.story.tsx":function(c,a,o){var d=this&&this.__createBinding||(Object.create?function(s,i,g,f){f===void 0&&(f=g);var x=Object.getOwnPropertyDescriptor(i,g);(!x||("get"in x?!i.__esModule:x.writable||x.configurable))&&(x={enumerable:!0,get:function(){return i[g]}}),Object.defineProperty(s,f,x)}:function(s,i,g,f){f===void 0&&(f=g),s[f]=i[g]}),l=this&&this.__setModuleDefault||(Object.create?function(s,i){Object.defineProperty(s,"default",{enumerable:!0,value:i})}:function(s,i){s.default=i}),t=this&&this.__importStar||function(s){if(s&&s.__esModule)return s;var i={};if(s!=null)for(var g in s)g!=="default"&&Object.prototype.hasOwnProperty.call(s,g)&&d(i,s,g);return l(i,s),i};Object.defineProperty(a,"__esModule",{value:!0}),a.Dialog=void 0;const e=t(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=o("../../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"),h=o("./src/components/UIDialog/index.ts"),p=o("./src/components/UIButton/index.tsx"),r=o("./src/components/UIInput/index.tsx"),y=o("./src/components/UIDropdown/index.tsx"),I=o("./src/components/UIComboBox/index.tsx"),u=o("./src/components/UICheckbox/index.tsx");a.default={title:"Dialogs/Dialogs"};const m={childrenGap:40},E={main:{".ms-TextField-wrapper > .ms-Label":{margin:0}}};class v extends e.default.Component{constructor(){super(...arguments),this.state={isOpen:!1,text:"Some Text"},this.onChange=i=>{this.setState({text:i.target.value})},this.onToggle=()=>{this.setState({isOpen:!this.state.isOpen})},this.onAccept=()=>{alert(`You wrote: ${this.state.text}`),this.setState({isOpen:!1})}}render(){const{draggable:i}=this.props,g=[{key:"111",text:"Dummy option 111"},{key:"222",text:"Dummy option 222"}],f=this.props.draggable?{modalProps:{dragOptions:{moveMenuItemText:"Move",closeMenuItemText:"Close",menu:n.ContextualMenu,keepInBounds:!0}}}:void 0;return e.default.createElement(e.default.Fragment,null,e.default.createElement(p.UIDefaultButton,{onClick:this.onToggle,primary:!0},i?"Open Draggable Dialog":"Open Dialog"),e.default.createElement(h.UIDialog,A(T({isOpen:this.state.isOpen,isOpenAnimated:this.props.openAnimation,isBlocking:!0,title:"Header Title",acceptButtonText:"Accept",cancelButtonText:"Cancel"},f),{onAccept:this.onAccept,styles:E,onCancel:this.onToggle,onDismiss:this.onToggle}),e.default.createElement(r.UITextInput,{label:"Dialog Content",value:this.state.text,onChange:this.onChange}),e.default.createElement(y.UIDropdown,{label:"Dummy",options:g}),e.default.createElement(I.UIComboBox,{label:"Dummy",highlight:!0,options:g})))}}const D=s=>{const[i,g]=(0,e.useState)(!1),f=()=>{g(!i)},x=T({},E.main),{size:b}=s;b&&(x.height=b);let U="Open Large Dialog";return b&&(U+=` height=${b}`),e.default.createElement(e.default.Fragment,null,e.default.createElement(p.UIDefaultButton,{onClick:f,primary:!0},U),e.default.createElement(h.UIDialog,{isOpen:i,isOpenAnimated:s.openAnimation,isBlocking:!0,title:"Header Title",acceptButtonText:"Accept",cancelButtonText:"Cancel",styles:{main:x},onAccept:f,onCancel:f,onDismiss:f},e.default.createElement(y.UIDropdown,{label:"Dummy",options:[]}),e.default.createElement(r.UITextInput,{label:"Username"}),e.default.createElement(r.UITextInput,{label:"Email"}),e.default.createElement(r.UITextInput,{label:"Password",type:"password"}),e.default.createElement(r.UITextInput,{label:"Email"}),e.default.createElement(r.UITextInput,{label:"First name"}),e.default.createElement(r.UITextInput,{label:"Last name"}),e.default.createElement(r.UITextInput,{label:"Address"}),e.default.createElement(r.UITextInput,{label:"State"}),e.default.createElement(r.UITextInput,{label:"Country"}),e.default.createElement(r.UITextInput,{label:"Phone"}),e.default.createElement(r.UITextInput,{label:"Dummy 1"}),e.default.createElement(r.UITextInput,{label:"Dummy 2"}),e.default.createElement(r.UITextInput,{label:"Dummy 3"}),e.default.createElement(r.UITextInput,{label:"Dummy 4"}),e.default.createElement(r.UITextInput,{label:"Dummy 5"})))},_=s=>{const[i,g]=(0,e.useState)(!1),f=()=>{g(!i)};return e.default.createElement(e.default.Fragment,null,e.default.createElement(p.UIDefaultButton,{onClick:f,primary:!0},"Open Confirm Dialog"),e.default.createElement(h.UIDialog,{isOpen:i,isOpenAnimated:s.openAnimation,isBlocking:!0,onAccept:f,onCancel:f,onDismiss:f,acceptButtonText:"Yes",cancelButtonText:"No",title:"Delete Confirmation",dialogContentProps:{subText:"Are you sure you want to delete entry? This action cannot be undone."}}))},k=()=>{const[s,i]=(0,e.useState)(!0);return e.default.createElement(n.Stack,{tokens:m},e.default.createElement(n.Stack,{tokens:m},e.default.createElement(n.Text,{variant:"large",block:!0},"Dialogs"),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(u.UICheckbox,{label:"Open animation enabled",checked:s,onChange:(g,f)=>{i(f)}})),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(v,{draggable:!1,openAnimation:s})),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(v,{draggable:!1,openAnimation:s})),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(v,{draggable:!0,openAnimation:s})),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(D,{openAnimation:s})),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(D,{size:400,openAnimation:s})),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(D,{openAnimation:s})),e.default.createElement(n.Stack,{horizontal:!0,tokens:m},e.default.createElement(_,{openAnimation:s}))))};a.Dialog=k}}]);})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{var T=Object.defineProperty,B=Object.defineProperties;var O=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var w=(u,t,d)=>t in u?T(u,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):u[t]=d,i=(u,t)=>{for(var d in t||(t={}))P.call(t,d)&&w(u,d,t[d]);if(x)for(var d of x(t))G.call(t,d)&&w(u,d,t[d]);return u},c=(u,t)=>B(u,O(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[6],{"./stories/UIDropdown.story.tsx":function(u,t,d){var p=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(t,"__esModule",{value:!0}),t.customRender=t.groupsAndSeparators=t.accessibilityStates=t.UseDropdownAsMenuMinWidth=t.Messages=t.MultiSelectDropdown=t.States=t.Short=t.Basic=void 0;const e=p(d("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),E=d("../../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"),a=d("./src/components/index.tsx"),n=d("./test/__mock__/select-data.ts");t.default={title:"Dropdowns/Dropdown"};const k=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,useDropdownAsMenuMinWidth:!0}));t.Basic=k;const D=()=>e.default.createElement("div",{style:{width:"150px"}},e.default.createElement(a.UIDropdown,{options:n.shortData}),e.default.createElement(a.UIDropdown,{options:n.shortData,disabled:!0}));t.Short=D;const I=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,label:"Error",errorMessage:"Dummy Error"}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Disabled",disabled:!0}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Required",required:!0}));t.States=I;const M=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,multiSelect:!0,responsiveMode:5}));t.MultiSelectDropdown=M;const S=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,label:"Error",errorMessage:"Dummy Error"}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Warning",warningMessage:"Dummy Warning"}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Info",infoMessage:"Dummy Info"}));t.Messages=S;const U=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement("div",null,e.default.createElement("div",null,"useDropdownAsMenuMinWidth ON"),e.default.createElement(a.UIDropdown,{label:"Long",options:n.data,useDropdownAsMenuMinWidth:!0}),e.default.createElement(a.UIDropdown,{label:"Short",options:n.shortData,useDropdownAsMenuMinWidth:!0})),e.default.createElement("div",null,e.default.createElement("div",null,"useDropdownAsMenuMinWidth OFF"),e.default.createElement(a.UIDropdown,{label:"Long",options:n.data}),e.default.createElement(a.UIDropdown,{label:"Short",options:n.shortData})));t.UseDropdownAsMenuMinWidth=U;const A=()=>{const[l,y]=e.default.useState(!1),[r,s]=e.default.useState("EE"),h={childrenGap:40},f=Array.isArray(r)?r:void 0,m={options:n.data,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,multiSelect:l,onChange:(C,o)=>{if(Array.isArray(r)){const K=[...r,o==null?void 0:o.key].filter(R=>o!=null&&o.selected?!0:R!==(o==null?void 0:o.key));s(K)}else o&&s(o.key)}};return e.default.createElement("div",null,e.default.createElement(a.UICheckbox,{label:"Multi Select",checked:l,onChange:(C,o)=>{o&&!Array.isArray(r)?s([r]):!o&&Array.isArray(r)&&s(r[0]),y(o)}}),e.default.createElement(E.Stack,{horizontal:!0,tokens:h},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.UIDropdown,c(i({},m),{placeholder:"Placeholder"}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{selectedKey:r,selectedKeys:f})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Error"),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{placeholder:"Placeholder",errorMessage:"Dummy error"}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{errorMessage:"Dummy error",selectedKey:r,selectedKeys:f})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Disabled"),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{placeholder:"Placeholder",disabled:!0}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{selectedKey:r,selectedKeys:f,disabled:!0})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Read Only"),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{placeholder:"Placeholder",readOnly:!0}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{selectedKey:r,selectedKeys:f,readOnly:!0})))))))};t.accessibilityStates=A;const g=()=>{const l=[...n.groupsData];return l.splice(4,0,{key:"div1",text:"",itemType:a.UISelectableOptionMenuItemType.Divider}),l.splice(14,0,{key:"div1",text:"",itemType:a.UISelectableOptionMenuItemType.Divider}),l.splice(18,0,{key:"div1",text:"",itemType:a.UISelectableOptionMenuItemType.Divider}),e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.groupsData,label:"Menu items with headers"}),e.default.createElement(a.UIDropdown,{options:l,label:"Menu items with dividers and headers"}),e.default.createElement(a.UIDropdown,{options:n.groupsData,multiSelect:!0,label:"Menu items with headers - multi select"}),e.default.createElement(a.UIDropdown,{options:l,multiSelect:!0,label:"Menu items with dividers and headers - multi select"}))};t.groupsAndSeparators=g;const b=["AR","BR","DK"],v=n.data.map(l=>b.includes(l.key)?c(i({},l),{editable:!0}):l),_=()=>e.default.createElement(a.UIDropdown,{options:v,onRenderOption:(l,y)=>{var r;return"editable"in(l!=null?l:{})?e.default.createElement(a.UITextInput,{onMouseDown:s=>{s.target.focus()},onClick:s=>{s.nativeEvent.preventDefault(),s.nativeEvent.stopPropagation(),s.preventDefault(),s.stopPropagation()}}):(r=y==null?void 0:y(l))!=null?r:null},onRenderItem:(l,y)=>{var r;return(r=y==null?void 0:y(l))!=null?r:null}});t.customRender=_},"./test/__mock__/select-data.ts":(u,t,d)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.groupsData=t.shortData=t.data=void 0;const p=d("./src/components/index.tsx");t.data=[{key:"",text:""},{key:"DZ",text:"Algeria"},{key:"AR",text:"Argentina"},{key:"AU",text:"Australia"},{key:"AT",text:"Austria"},{key:"BH",text:"Bahrain"},{key:"BE",text:"Belgium"},{key:"BC",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"},{key:"BA",text:"Bosnia and Herzegovina"},{key:"BR",text:"Brazil"},{key:"BG",text:"Bulgaria"},{key:"CA",text:"Canada"},{key:"CL",text:"Chile"},{key:"CO",text:"Colombia"},{key:"HR",text:"Croatia"},{key:"CU",text:"Cuba"},{key:"CZ",text:"Czech Republic"},{key:"DK",text:"Denmark"},{key:"EG",text:"Egypt"},{key:"EE",text:"Estonia"},{key:"FI",text:"Finland"},{key:"FR",text:"France"},{key:"GER",text:"Germany"},{key:"GH",text:"Ghana"},{key:"GR",text:"Greece"},{key:"HU",text:"Hungary"},{key:"IN",text:"India"},{key:"ID",text:"Indonesia"},{key:"IE",text:"Ireland"},{key:"IL",text:"Israel"},{key:"IT",text:"Italy"},{key:"JP",text:"Japan"},{key:"JO",text:"Jordan"},{key:"KE",text:"Kenya"},{key:"KW",text:"Kuwait"},{key:"LV",text:"Latvia"},{key:"LT",text:"Lithuania"},{key:"MK",text:"Macedonia"},{key:"MY",text:"Malaysia"},{key:"MX",text:"Mexico"},{key:"ME",text:"Montenegro"},{key:"MA",text:"Morocco"},{key:"NL",text:"Netherlands"},{key:"NZ",text:"New Zealand"},{key:"NG",text:"Nigeria"},{key:"NO",text:"Norway"},{key:"OM",text:"Oman"},{key:"PE",text:"Peru"},{key:"PH",text:"Philippines"},{key:"PL",text:"Poland"},{key:"PT",text:"Portugal"},{key:"QA",text:"Qatar"},{key:"RO",text:"Romania"},{key:"RU",text:"Russia"},{key:"SA",text:"Saudi Arabia"},{key:"SN",text:"Senegal"},{key:"RS",text:"Serbia"},{key:"SG",text:"Singapore"},{key:"SK",text:"Slovakia"},{key:"SI",text:"Slovenia"},{key:"ZA",text:"South Africa"},{key:"KR",text:"South Korea"},{key:"ES",text:"Spain"},{key:"SE",text:"Sweden"},{key:"CH",text:"Switzerland"},{key:"TN",text:"Tunisia"},{key:"TR",text:"Turkey"},{key:"UG",text:"Uganda"},{key:"UA",text:"Ukraine"},{key:"AE",text:"United Arab Emirates"},{key:"GB",text:"United Kingdom"},{key:"DU",text:"Dummmmmmmmyyyyyy"},{key:"DD",text:"Dudududumy"},{key:"YE",text:"Yemen"}],t.shortData=[t.data[0],t.data[1],t.data[2],t.data[3],t.data[4]];const e={africa:["DZ","EG","GH","KE","MA","NG","SN","ZA","TN","UG"],asia:["BH","IN","ID","JP","JO","KW","MY","OM","PH","QA","SA","SG","KR","AE","YE"],"Australia and Oceania":["AU","BC","NZ"],europe:["AT","BE","BA","BG","HR","CZ","DK","EE","FI","FR","GER","GR","HU","IE","IL","IT","LV","LT","MK","ME","NL","NO","PL","PT","RO","RU","RS","SK","SI","ES","SE","CH","TR","UA","GB"],northAmerica:["CA"],southAmerica:["AR","BR","CL","CO","CU","MX","PE"],unknown:["DU","DD"]};t.groupsData=[];for(const E in e){t.groupsData.push({key:E,text:E.charAt(0).toUpperCase()+E.slice(1),itemType:p.UISelectableOptionMenuItemType.Header});const a=e[E];for(const n of a){const k=t.data.find(D=>D.key===n);k&&t.groupsData.push(k)}}}}]);})();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
1
|
+
"use strict";(()=>{var _e=Object.defineProperty,Ne=Object.defineProperties;var Le=Object.getOwnPropertyDescriptors;var Ie=Object.getOwnPropertySymbols;var Ue=Object.prototype.hasOwnProperty,$e=Object.prototype.propertyIsEnumerable;var Se=(R,w,m)=>w in R?_e(R,w,{enumerable:!0,configurable:!0,writable:!0,value:m}):R[w]=m,B=(R,w)=>{for(var m in w||(w={}))Ue.call(w,m)&&Se(R,m,w[m]);if(Ie)for(var m of Ie(w))$e.call(w,m)&&Se(R,m,w[m]);return R},F=(R,w)=>Ne(R,Le(w));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[812],{"./stories/UIFlexibleTable.story.tsx":function(R,w,m){var ye=this&&this.__createBinding||(Object.create?function(l,a,t,s){s===void 0&&(s=t);var c=Object.getOwnPropertyDescriptor(a,t);(!c||("get"in c?!a.__esModule:c.writable||c.configurable))&&(c={enumerable:!0,get:function(){return a[t]}}),Object.defineProperty(l,s,c)}:function(l,a,t,s){s===void 0&&(s=t),l[s]=a[t]}),De=this&&this.__setModuleDefault||(Object.create?function(l,a){Object.defineProperty(l,"default",{enumerable:!0,value:a})}:function(l,a){l.default=a}),Ce=this&&this.__importStar||function(l){if(l&&l.__esModule)return l;var a={};if(l!=null)for(var t in l)t!=="default"&&Object.prototype.hasOwnProperty.call(l,t)&&ye(a,l,t);return De(a,l),a};Object.defineProperty(w,"__esModule",{value:!0}),w.WrappingTable=w.InlineFlexTable=void 0;const e=Ce(m("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),d=m("./src/components/index.tsx"),me=m("../../node_modules/.pnpm/react-movable@2.5.4_react-dom@16.14.0_react@16.14.0/node_modules/react-movable/lib/index.js");w.default={title:"Tables/UIFlexibleTable"};const _=["table1","table2"],N=Array.from({length:10}).map((l,a)=>({key:`column${a+1}`,title:a===0?"Beginning Column":`Column ${a+1}`,tooltip:`Tooltip for column #${a+1}`}));N.push({key:"preferred",title:"Preferred",hidden:!0});const Z=l=>{const a={};return N.forEach((t,s)=>{a[t.key]=s<5?`sample_${l}${s}`:"a"}),a},pe=[],ge=(l,a,t)=>l.map((c,f)=>{const x={};N.forEach((h,I)=>{x[h.key]={type:I<5?"input":a&&I===9?"link":"dropdown",value:l[f][h.key]}});const S=x.preferred.value==="1";return{key:f.toFixed(0),title:`Row ${f+1}`,className:t===f||t===100?"active-row":S?"preferred-row":"",cells:x,tooltip:`Tooltip for row #${f+1}`}});function xe(l,a,t,s){const c=l.value.value,f=l.colIndex===1&&l.rowIndex===2&&s,x=N[l.colIndex];switch(l.value.type){case"dropdown":{const S=["a","b","c"].map(h=>({key:h,text:`Option ${h.toUpperCase()}`}));return{title:f?"Custom Title for spanned cell":void 0,isSpan:f,cellClassNames:f?"spanned-cell":s&&l.rowIndex===2&&!f?"not-spanned-cell":void 0,content:e.default.createElement(d.UIDropdown,{options:S,selectedKey:c,disabled:a,onChange:(h,I,A)=>{var L;return t((L=I==null?void 0:I.key.toString())!=null?L:"")},title:x.tooltip})}}case"input":return{title:f?"Custom Title for spanned cell":void 0,isSpan:f,cellClassNames:[f?"spanned-cell":s&&l.rowIndex===2&&!f?"not-spanned-cell":""],content:e.default.createElement(ve,{value:c,readonly:a,onChange:S=>t(S),title:x.tooltip})};default:return{content:e.default.createElement(d.UILink,{href:"",title:"Tooltip for navigation"},"Link")}}}function ve(l){const[a,t]=(0,e.useState)("");(0,e.useEffect)(()=>{t(l.value)},[l.value]);const s=c=>{t(c)};return e.default.createElement(d.UITextInput,{value:a,readOnly:l.readonly,onChange:(c,f)=>s(f||""),onBlur:()=>{l.value!==a&&setTimeout(()=>{l.onChange(a)},0)},title:l.title})}function he(l){const a=Z(l.length);l.push(a)}const ke=`
|
|
2
2
|
.flexible-table {
|
|
3
3
|
font-size: 13px;
|
|
4
4
|
}
|
|
@@ -34,7 +34,7 @@ body .flexible-table-content-table-row.dragged {
|
|
|
34
34
|
.in-row .not-spanned-cell {
|
|
35
35
|
flex: 1;
|
|
36
36
|
}
|
|
37
|
-
`,Te=()=>{const[l,a]=(0,e.useState)(pe),[t,s]=(0,e.useState)([]),[c,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[M,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[P,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[$,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!0),[v,se]=(0,e.useState)(!1),[O,z]=(0,e.useState)(!1),[j,re]=(0,e.useState)(!1),[H,G]=(0,e.useState)(-1),[k,ie]=(0,e.useState)(!1),[V,de]=(0,e.useState)(!1),[T,K]=(0,e.useState)(!1),[g,ce]=(0,e.useState)(!1),[J,ue]=(0,e.useState)(!0),i=(0,e.useRef)({}),Q=o=>{o.stopPropagation()},E=o=>{a(ge(o,v,H))};(0,e.useEffect)(()=>{for(const o in i.current){const b=i.current[o];b.current&&(b.current.removeEventListener("mousedown",Q),b.current.addEventListener("mousedown",Q))}}),(0,e.useEffect)(()=>{E(t)},[v,H]),(0,e.useEffect)(()=>{const o=Array.from({length:3}).map((b,D)=>Z(D));s(o),E(o)},[]);const X=()=>(he(t),s(t),E(t),{scrollToRow:t.length-1}),fe=o=>{t.splice(o.rowIndex,1),s(t),E(t)},be=o=>{const b=g&&o.oldIndex===0&&o.newIndex>1;if(!b){const D=(0,me.arrayMove)(t,o.oldIndex,o.newIndex);s(D),E(D)}return{isDropDisabled:b}},u=(o,b,D)=>e.default.createElement(d.UICheckbox,{label:o,checked:b,onChange:()=>{D(!b)}}),n=o=>{const b=`cell-${o.rowIndex}-${o.colIndex}`;i.current[b]||(i.current[b]=e.default.createRef());const Re=xe(o,y,Fe=>{t[o.rowIndex][o.colKey]=Fe,s(t),E(t)},j);return F(B({},Re),{content:e.default.createElement("div",{ref:i.current[b]},Re.content)})},r=o=>{if(o.rowIndex===t.length-1)return e.default.createElement("div",{style:{padding:"0 5px",verticalAlign:"center"}},"Special row content")},p=o=>{G(o),new Promise(b=>{setTimeout(()=>b(!0),2e3)}).then(()=>{G(-1)})},Y=o=>[e.default.createElement(d.UIFlexibleTableRowActionButton,{key:`goto-code-row-${o.rowIndex}`,actionName:"GotoCode",tableId:
|
|
37
|
+
`,Te=()=>{const[l,a]=(0,e.useState)(pe),[t,s]=(0,e.useState)([]),[c,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[M,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[P,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[$,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!0),[v,se]=(0,e.useState)(!1),[O,z]=(0,e.useState)(!1),[j,re]=(0,e.useState)(!1),[H,G]=(0,e.useState)(-1),[k,ie]=(0,e.useState)(!1),[V,de]=(0,e.useState)(!1),[T,K]=(0,e.useState)(!1),[g,ce]=(0,e.useState)(!1),[J,ue]=(0,e.useState)(!0),i=(0,e.useRef)({}),Q=o=>{o.stopPropagation()},E=o=>{a(ge(o,v,H))};(0,e.useEffect)(()=>{for(const o in i.current){const b=i.current[o];b.current&&(b.current.removeEventListener("mousedown",Q),b.current.addEventListener("mousedown",Q))}}),(0,e.useEffect)(()=>{E(t)},[v,H]),(0,e.useEffect)(()=>{const o=Array.from({length:3}).map((b,D)=>Z(D));s(o),E(o)},[]);const X=()=>(he(t),s(t),E(t),{scrollToRow:t.length-1}),fe=o=>{t.splice(o.rowIndex,1),s(t),E(t)},be=o=>{const b=g&&o.oldIndex===0&&o.newIndex>1;if(!b){const D=(0,me.arrayMove)(t,o.oldIndex,o.newIndex);s(D),E(D)}return{isDropDisabled:b}},u=(o,b,D)=>e.default.createElement(d.UICheckbox,{label:o,checked:b,onChange:()=>{D(!b)}}),n=o=>{const b=`cell-${o.rowIndex}-${o.colIndex}`;i.current[b]||(i.current[b]=e.default.createRef());const Re=xe(o,y,Fe=>{t[o.rowIndex][o.colKey]=Fe,s(t),E(t)},j);return F(B({},Re),{content:e.default.createElement("div",{ref:i.current[b]},Re.content)})},r=o=>{if(o.rowIndex===t.length-1)return e.default.createElement("div",{style:{padding:"0 5px",verticalAlign:"center"}},"Special row content")},p=o=>{G(o),new Promise(b=>{setTimeout(()=>b(!0),2e3)}).then(()=>{G(-1)})},Y=o=>[e.default.createElement(d.UIFlexibleTableRowActionButton,{key:`goto-code-row-${o.rowIndex}`,actionName:"GotoCode",tableId:_[0],iconName:d.UiIcons.CodeSnippet,rowNumber:o.rowIndex,onClick:()=>p(o.rowIndex),title:"Navigation demo"})],we=o=>[e.default.createElement(d.UIFlexibleTableActionButton,{key:"goto-code-row-0",actionName:"GotoCode",tableId:_[0],iconName:d.UiIcons.CodeSnippet,onClick:()=>p(100),title:"Navigation demo"})],Be=o=>[e.default.createElement(d.UIDefaultButton,{key:"1",iconProps:{iconName:"Delete"},className:"flexible-table-btn-clear",disabled:c||o.readonly,onClick:()=>{s([]),a([])}},"Clear table")];return e.default.createElement("div",null,e.default.createElement("h3",null,"In-line layout"),e.default.createElement("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"20px",maxWidth:"1200px"}},u("Vertical layout",U,ee),u("Show titles",h,I),u("Show titles in cells",M,q),u("Show row headers",A,L),u("Show Index",W,ae),u("Show custom content",v,se),u("Span cells",j,re),u("Reorder enabled",x,S),u("Reorder restrictions",g,ce),u("Disable Adding",C,ne),u("Disable Deletion",$,oe),u("Readonly",y,le),u("No row background",P,te),u("Loading data",c,f),u("Column highlight",O,z),u("Is fixed max width",k,ie),u("Lock vertically",V,de),u("Reverse background",T,K),u("Disable drag using touch",J,ue)),e.default.createElement("hr",null),e.default.createElement("div",null,e.default.createElement("style",null,ke),e.default.createElement("div",{style:{maxWidth:U?"500px":"1300px"}},e.default.createElement(d.UIFlexibleTable,{addRowButton:{label:"Add row",title:y?"Disabled due to read only mode":"",onClick:X},columns:N.map((o,b)=>F(B({},o),{className:`table-column column-${O?b:""}${v?"fixed":""}`})),id:_[0],layout:d.UIFlexibleTableLayout.InlineFlex,onRenderCell:n,rows:l,inRowLayoutMinWidth:1e3,onDeleteRow:fe,showColumnTitles:h,showColumnTitlesInCells:M,isContentLoading:c,onTableReorder:x?be:void 0,noRowBackground:P,isAddItemDisabled:C,showIndexColumn:W,readonly:y,onRenderDeleteAction:o=>({isDeleteDisabled:$&&o.rowIndex===0,tooltip:$&&o.rowIndex===0?"Disabled for demo purposes":"Click to delete the row"}),onRenderActions:Y,onRenderRowDataContent:v?r:void 0,onRenderReorderActions:o=>g?{up:{disabled:o.rowIndex===1,tooltip:o.rowIndex===1?"Move up disabled for demo purposes":void 0},down:{disabled:o.rowIndex===1,tooltip:o.rowIndex===1?"Move down disabled for demo purposes":void 0}}:{},onBeforeTableRender:g?o=>({rows:o.rows.map((b,D)=>F(B({},b),{disabled:D===1}))}):void 0,onRenderRowContainer:g?o=>({isDropWarning:!o.isDragged&&!!o.rowIndex&&o.rowIndex>1}):void 0,maxScrollableContentHeight:U?700:220,showRowTitles:A,maxWidth:k?800:void 0,lockVertically:V,reverseBackground:T,onRenderPrimaryTableActions:Be,onRenderSecondaryTableActions:we,noDataText:"No data",isTouchDragDisabled:J}))))};w.InlineFlexTable=Te;const Ee=`
|
|
38
38
|
|
|
39
39
|
.flexible-table {
|
|
40
40
|
font-size: 13px;
|
|
@@ -71,4 +71,4 @@ body .flexible-table-content-table-row.dragged {
|
|
|
71
71
|
.flexible-table-content-table-row-wrapper.wrapping-layout .flexible-table-content-table-row-item-data-cells-wrapper.spanned-cell {
|
|
72
72
|
width: 240px !important;
|
|
73
73
|
}
|
|
74
|
-
`,Ae=()=>{const[l,a]=(0,e.useState)(pe),[t,s]=(0,e.useState)([]),[c,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[M,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[P,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[$,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!1),[v,se]=(0,e.useState)(!1),[O,z]=(0,e.useState)(-1),[j,re]=(0,e.useState)(!1),[H,G]=(0,e.useState)(!1),[k,ie]=(0,e.useState)(!1),[V,de]=(0,e.useState)(!0),T=(0,e.useRef)({}),K=n=>{n.stopPropagation()},g=n=>{a(ge(n,y,O))};(0,e.useEffect)(()=>{for(const n in T.current){const r=T.current[n];r.current&&(r.current.removeEventListener("mousedown",K),r.current.addEventListener("mousedown",K))}}),(0,e.useEffect)(()=>{g(t)},[y,O]),(0,e.useEffect)(()=>{const n=Array.from({length:3}).map((r,p)=>Z(p));s(n),g(n)},[]);const ce=()=>(he(t),s(t),g(t),{scrollToRow:t.length-1}),J=n=>{t.splice(n.rowIndex,1),s(t),g(t)},ue=n=>{const r=k&&n.oldIndex===0&&n.newIndex>1;if(!r){const p=(0,me.arrayMove)(t,n.oldIndex,n.newIndex);s(p),g(p)}return{isDropDisabled:r}},i=(n,r,p)=>e.default.createElement(d.UICheckbox,{label:n,checked:r,onChange:()=>{p(!r)}}),Q=n=>{const r=`cell-${n.rowIndex}-${n.colIndex}`;T.current[r]||(T.current[r]=e.default.createRef());const Y=xe(n,C,we=>{t[n.rowIndex][n.colKey]=we,s(t),g(t)},v);return F(B({},Y),{content:e.default.createElement("div",{ref:T.current[r]},Y.content)})},E=n=>{if(n.rowIndex===t.length-1)return e.default.createElement("div",{style:{padding:"0 5px",verticalAlign:"center"}},"Special row content")},X=n=>{z(n),new Promise(r=>{setTimeout(()=>r(!0),2e3)}).then(()=>{z(-1)})},fe=n=>[e.default.createElement(d.UIToggle,{key:"1",label:"Preferred",checked:n.cells.preferred.value==="1",onChange:(r,p)=>{t[n.rowIndex].preferred=p?"1":"0",s(t),g(t)},inlineLabel:!0,inlineLabelLeft:!0,labelFlexGrow:!0,size:d.UIToggleSize.Small,disabled:C}),e.default.createElement(d.UIFlexibleTableRowActionButton,{key:`goto-code-row-${n.rowIndex}`,actionName:"GotoCode",tableId:
|
|
74
|
+
`,Ae=()=>{const[l,a]=(0,e.useState)(pe),[t,s]=(0,e.useState)([]),[c,f]=(0,e.useState)(!1),[x,S]=(0,e.useState)(!0),[h,I]=(0,e.useState)(!0),[A,L]=(0,e.useState)(!1),[M,q]=(0,e.useState)(!1),[U,ee]=(0,e.useState)(!1),[P,te]=(0,e.useState)(!1),[C,ne]=(0,e.useState)(!1),[$,oe]=(0,e.useState)(!1),[y,le]=(0,e.useState)(!1),[W,ae]=(0,e.useState)(!1),[v,se]=(0,e.useState)(!1),[O,z]=(0,e.useState)(-1),[j,re]=(0,e.useState)(!1),[H,G]=(0,e.useState)(!1),[k,ie]=(0,e.useState)(!1),[V,de]=(0,e.useState)(!0),T=(0,e.useRef)({}),K=n=>{n.stopPropagation()},g=n=>{a(ge(n,y,O))};(0,e.useEffect)(()=>{for(const n in T.current){const r=T.current[n];r.current&&(r.current.removeEventListener("mousedown",K),r.current.addEventListener("mousedown",K))}}),(0,e.useEffect)(()=>{g(t)},[y,O]),(0,e.useEffect)(()=>{const n=Array.from({length:3}).map((r,p)=>Z(p));s(n),g(n)},[]);const ce=()=>(he(t),s(t),g(t),{scrollToRow:t.length-1}),J=n=>{t.splice(n.rowIndex,1),s(t),g(t)},ue=n=>{const r=k&&n.oldIndex===0&&n.newIndex>1;if(!r){const p=(0,me.arrayMove)(t,n.oldIndex,n.newIndex);s(p),g(p)}return{isDropDisabled:r}},i=(n,r,p)=>e.default.createElement(d.UICheckbox,{label:n,checked:r,onChange:()=>{p(!r)}}),Q=n=>{const r=`cell-${n.rowIndex}-${n.colIndex}`;T.current[r]||(T.current[r]=e.default.createRef());const Y=xe(n,C,we=>{t[n.rowIndex][n.colKey]=we,s(t),g(t)},v);return F(B({},Y),{content:e.default.createElement("div",{ref:T.current[r]},Y.content)})},E=n=>{if(n.rowIndex===t.length-1)return e.default.createElement("div",{style:{padding:"0 5px",verticalAlign:"center"}},"Special row content")},X=n=>{z(n),new Promise(r=>{setTimeout(()=>r(!0),2e3)}).then(()=>{z(-1)})},fe=n=>[e.default.createElement(d.UIToggle,{key:"1",label:"Preferred",checked:n.cells.preferred.value==="1",onChange:(r,p)=>{t[n.rowIndex].preferred=p?"1":"0",s(t),g(t)},inlineLabel:!0,inlineLabelLeft:!0,labelFlexGrow:!0,size:d.UIToggleSize.Small,disabled:C}),e.default.createElement(d.UIFlexibleTableRowActionButton,{key:`goto-code-row-${n.rowIndex}`,actionName:"GotoCode",tableId:_[1],iconName:d.UiIcons.CodeSnippet,rowNumber:n.rowIndex,onClick:()=>X(n.rowIndex),title:"Navigation demo"})],be=n=>[e.default.createElement(d.UIFlexibleTableActionButton,{key:"goto-code-row-0",actionName:"GotoCode",tableId:_[0],iconName:d.UiIcons.CodeSnippet,onClick:()=>X(100),title:"Navigation demo"})],u=n=>[e.default.createElement(d.UIDefaultButton,{key:"1",iconProps:{iconName:"Delete"},className:"flexible-table-btn-clear",disabled:c||n.readonly,onClick:()=>{s([]),a([])}},"Clear table")];return e.default.createElement("div",null,e.default.createElement("hr",null),e.default.createElement("h3",null,"Wrapping layout"),e.default.createElement("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"20px",maxWidth:"1200px"}},i("Compact size",A,L),i("Show titles",h,I),i("Show Index",$,oe),i("Show custom content",y,le),i("Span cells",v,se),i("Reorder enabled",x,S),i("Reorder restrictions",k,ie),i("Disable Adding",U,ee),i("Disable Deletion",P,te),i("Readonly",C,ne),i("No row background",M,q),i("Loading data",c,f),i("Column highlight",W,ae),i("Lock vertically",j,re),i("Reverse background",H,G),i("Disable drag using touch",V,de)),e.default.createElement("hr",null),e.default.createElement("div",null,e.default.createElement("style",null,Ee),e.default.createElement("div",{style:{maxWidth:A?"500px":"fit-content"}},e.default.createElement(d.UIFlexibleTable,{addRowButton:{label:"Add row",title:C?"Disabled due to read only mode":"",onClick:ce},columns:N.map((n,r)=>F(B({},n),{className:`table-column column-${W?r:""}`})),id:_[1],layout:d.UIFlexibleTableLayout.Wrapping,onRenderCell:Q,rows:l,onDeleteRow:J,showColumnTitles:h,isContentLoading:c,onTableReorder:x?ue:void 0,noRowBackground:M,isAddItemDisabled:U,showIndexColumn:$,readonly:C,onRenderDeleteAction:n=>({isDeleteDisabled:P&&n.rowIndex===0}),onRenderReorderActions:n=>k?{up:{disabled:n.rowIndex===1,tooltip:n.rowIndex===1?"Move up disabled for demo purposes":void 0},down:{disabled:n.rowIndex===1,tooltip:n.rowIndex===1?"Move down disabled for demo purposes":void 0}}:{},onBeforeTableRender:k?n=>({rows:n.rows.map((r,p)=>F(B({},r),{disabled:p===1}))}):void 0,onRenderRowContainer:k?n=>({isDropWarning:!n.isDragged&&!!n.rowIndex&&n.rowIndex>1}):void 0,onRenderRowDataContent:y?E:void 0,onRenderActions:fe,maxScrollableContentHeight:A?700:400,lockVertically:j,reverseBackground:H,onRenderPrimaryTableActions:u,onRenderSecondaryTableActions:be,isTouchDragDisabled:V}))))};w.WrappingTable=Ae}}]);})();
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(()=>{var D=Object.defineProperty,A=Object.defineProperties;var T=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var P=(d,n,e)=>n in d?D(d,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):d[n]=e,M=(d,n)=>{for(var e in n||(n={}))U.call(n,e)&&P(d,e,n[e]);if(h)for(var e of h(n))j.call(n,e)&&P(d,e,n[e]);return d},S=(d,n)=>A(d,T(n));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[222],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss":(d,n,e)=>{var l=e("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js"),o=e("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js"),s=o(l);s.push([d.id,".ts-icon{fill:var(--vscode-foreground)}",""]),d.exports=s},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js":d=>{"use strict";d.exports=function(n){var e=[];return e.toString=function(){return this.map(function(o){var s="",t=typeof o[5]!="undefined";return o[4]&&(s+="@supports (".concat(o[4],") {")),o[2]&&(s+="@media ".concat(o[2]," {")),t&&(s+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),s+=n(o),t&&(s+="}"),o[2]&&(s+="}"),o[4]&&(s+="}"),s}).join("")},e.i=function(o,s,t,_,u){typeof o=="string"&&(o=[[null,o,void 0]]);var c={};if(t)for(var r=0;r<this.length;r++){var i=this[r][0];i!=null&&(c[i]=!0)}for(var p=0;p<o.length;p++){var a=[].concat(o[p]);t&&c[a[0]]||(typeof u!="undefined"&&(typeof a[5]=="undefined"||(a[1]="@layer".concat(a[5].length>0?" ".concat(a[5]):""," {").concat(a[1],"}")),a[5]=u),s&&(a[2]&&(a[1]="@media ".concat(a[2]," {").concat(a[1],"}")),a[2]=s),_&&(a[4]?(a[1]="@supports (".concat(a[4],") {").concat(a[1],"}"),a[4]=_):a[4]="".concat(_)),e.push(a))}},e}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js":d=>{"use strict";d.exports=function(n){return n[1]}},"./src/components/UIIcon/UIIcon.scss":(d,n,e)=>{"use strict";e.r(n),e.d(n,{default:()=>O});var l=e("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),o=e.n(l),s=e("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js"),t=e.n(s),_=e("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js"),u=e.n(_),c=e("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),r=e.n(c),i=e("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js"),p=e.n(i),a=e("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js"),f=e.n(a),y=e("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss"),m=e.n(y),E={};for(const v in y)v!=="default"&&(E[v]=()=>y[v]);e.d(n,E);var I={};I.styleTagTransform=f(),I.setAttributes=r(),I.insert=u().bind(null,"head"),I.domAPI=t(),I.insertStyleElement=p();var b=o()(m(),I);const O=m()&&m().locals?m().locals:void 0},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":d=>{"use strict";var n=[];function e(s){for(var t=-1,_=0;_<n.length;_++)if(n[_].identifier===s){t=_;break}return t}function l(s,t){for(var _={},u=[],c=0;c<s.length;c++){var r=s[c],i=t.base?r[0]+t.base:r[0],p=_[i]||0,a="".concat(i," ").concat(p);_[i]=p+1;var f=e(a),y={css:r[1],media:r[2],sourceMap:r[3],supports:r[4],layer:r[5]};if(f!==-1)n[f].references++,n[f].updater(y);else{var m=o(y,t);t.byIndex=c,n.splice(c,0,{identifier:a,updater:m,references:1})}u.push(a)}return u}function o(s,t){var _=t.domAPI(t);_.update(s);var u=function(r){if(r){if(r.css===s.css&&r.media===s.media&&r.sourceMap===s.sourceMap&&r.supports===s.supports&&r.layer===s.layer)return;_.update(s=r)}else _.remove()};return u}d.exports=function(s,t){t=t||{},s=s||[];var _=l(s,t);return function(c){c=c||[];for(var r=0;r<_.length;r++){var i=_[r],p=e(i);n[p].references--}for(var a=l(c,t),f=0;f<_.length;f++){var y=_[f],m=e(y);n[m].references===0&&(n[m].updater(),n.splice(m,1))}_=a}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js":d=>{"use strict";var n={};function e(o){if(typeof n[o]=="undefined"){var s=document.querySelector(o);if(window.HTMLIFrameElement&&s instanceof window.HTMLIFrameElement)try{s=s.contentDocument.head}catch(t){s=null}n[o]=s}return n[o]}function l(o,s){var t=e(o);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(s)}d.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js":d=>{"use strict";function n(e){var l=document.createElement("style");return e.setAttributes(l,e.attributes),e.insert(l,e.options),l}d.exports=n},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(d,n,e)=>{"use strict";function l(o){var s=e.nc;s&&o.setAttribute("nonce",s)}d.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js":d=>{"use strict";function n(o,s,t){var _="";t.supports&&(_+="@supports (".concat(t.supports,") {")),t.media&&(_+="@media ".concat(t.media," {"));var u=typeof t.layer!="undefined";u&&(_+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),_+=t.css,u&&(_+="}"),t.media&&(_+="}"),t.supports&&(_+="}");var c=t.sourceMap;c&&typeof btoa!="undefined"&&(_+=`
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(c))))," */")),s.styleTagTransform(_,o,s.options)}function e(o){if(o.parentNode===null)return!1;o.parentNode.removeChild(o)}function l(o){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var s=o.insertStyleElement(o);return{update:function(_){n(s,o,_)},remove:function(){e(s)}}}d.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js":d=>{"use strict";function n(e,l){if(l.styleSheet)l.styleSheet.cssText=e;else{for(;l.firstChild;)l.removeChild(l.firstChild);l.appendChild(document.createTextNode(e))}}d.exports=n},"./src/components/UIIcon/UIIcon.tsx":function(d,n,e){"use strict";var l=this&&this.__importDefault||function(_){return _&&_.__esModule?_:{default:_}};Object.defineProperty(n,"__esModule",{value:!0}),n.UIIcon=void 0;const o=l(e("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),s=e("../../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("./src/components/UIIcon/UIIcon.scss");class t extends o.default.Component{constructor(u){super(u),this.setStyle=()=>({})}render(){const u=this.props.className?` ${this.props.className}`:"";return o.default.createElement(s.Icon,S(M({},this.props),{className:`ts-icon${u}`,styles:this.setStyle()}))}}n.UIIcon=t},"./src/components/UIIcon/index.tsx":function(d,n,e){"use strict";var l=this&&this.__createBinding||(Object.create?function(s,t,_,u){u===void 0&&(u=_);var c=Object.getOwnPropertyDescriptor(t,_);(!c||("get"in c?!t.__esModule:c.writable||c.configurable))&&(c={enumerable:!0,get:function(){return t[_]}}),Object.defineProperty(s,u,c)}:function(s,t,_,u){u===void 0&&(u=_),s[u]=t[_]}),o=this&&this.__exportStar||function(s,t){for(var _ in s)_!=="default"&&!Object.prototype.hasOwnProperty.call(t,_)&&l(t,s,_)};Object.defineProperty(n,"__esModule",{value:!0}),o(e("./src/components/UIIcon/UIIcon.tsx"),n)},"./stories/UIIcon.story.tsx":function(d,n,e){"use strict";var l=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(n,"__esModule",{value:!0}),n.SvgIcon=void 0;const o=l(e("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),s=e("../../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"),t=e("./src/components/UIIcon/index.tsx");n.default={title:"Utilities/Icons"};const _=[];for(const r in UiIcons)_.push(r);_.sort();const u=[{key:"column1",name:"Icon",minWidth:50,maxWidth:60,onRender:r=>o.default.createElement(t.UIIcon,{style:{width:"16px",height:"16px"},iconName:r})},{key:"column2",name:"Name",minWidth:50,onRender:r=>o.default.createElement("span",null,r)}],c=()=>o.default.createElement("div",null,o.default.createElement(s.DetailsList,{selectionMode:s.SelectionMode.none,items:_,columns:u,isHeaderVisible:!0,selectionPreservedOnEmptyClick:!0}));n.SvgIcon=c}}]);})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{var b=Object.defineProperty,p=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var f=(c,e,t)=>e in c?b(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t,d=(c,e)=>{for(var t in e||(e={}))y.call(e,t)&&f(c,t,e[t]);if(i)for(var t of i(e))h.call(e,t)&&f(c,t,e[t]);return c},_=(c,e)=>p(c,m(e));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[69],{"./src/components/UILabel/UILabel.tsx":function(c,e,t){var s=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(e,"__esModule",{value:!0}),e.UILabel=e.labelGlobalStyle=void 0;const u=s(t("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=t("../../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.labelGlobalStyle={fontWeight:"bold",fontSize:"13px",color:"var(--vscode-input-foreground)",fontFamily:"var(--vscode-font-family)",padding:"4px 0"};class r extends u.default.Component{constructor(o){super(o)}render(){const o=l=>({root:[d({marginTop:25},e.labelGlobalStyle),l.disabled&&{opacity:"0.4"},l.required&&{selectors:{"::after":{content:"' *'",color:"var(--vscode-inputValidation-errorBorder)",paddingRight:12}}}]});return u.default.createElement(n.Label,_(d({},this.props),{styles:o}))}}e.UILabel=r},"./src/components/UILabel/index.tsx":function(c,e,t){var s=this&&this.__createBinding||(Object.create?function(n,r,a,o){o===void 0&&(o=a);var l=Object.getOwnPropertyDescriptor(r,a);(!l||("get"in l?!r.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return r[a]}}),Object.defineProperty(n,o,l)}:function(n,r,a,o){o===void 0&&(o=a),n[o]=r[a]}),u=this&&this.__exportStar||function(n,r){for(var a in n)a!=="default"&&!Object.prototype.hasOwnProperty.call(r,a)&&s(r,n,a)};Object.defineProperty(e,"__esModule",{value:!0}),u(t("./src/components/UILabel/UILabel.tsx"),e)},"./stories/UILabel.story.tsx":function(c,e,t){var s=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(e,"__esModule",{value:!0}),e.defaultUsage=void 0;const u=s(t("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=t("../../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"),r=t("./src/components/UILabel/index.tsx");e.default={title:"Basic Inputs/Label"};const a={childrenGap:40},o=()=>u.default.createElement(n.Stack,{tokens:a,style:{width:300}},u.default.createElement(n.Stack,{tokens:{childrenGap:16}},u.default.createElement(n.Text,{variant:"large",className:"textColor"},"UILabel"),u.default.createElement(r.UILabel,null,"Just a label")),u.default.createElement(n.Stack,{tokens:{childrenGap:16}},u.default.createElement(n.Text,{variant:"large",className:"textColor"},"UILabel with required on"),u.default.createElement(r.UILabel,{required:!0},"Just a label")));e.defaultUsage=o}}]);})();
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
(()=>{(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[660],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss":(f,n,s)=>{var d=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js"),l=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js"),a=l(d);a.push([f.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)}",""]),f.exports=a},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js":f=>{"use strict";f.exports=function(n){var s=[];return s.toString=function(){return this.map(function(l){var a="",e=typeof l[5]!="undefined";return l[4]&&(a+="@supports (".concat(l[4],") {")),l[2]&&(a+="@media ".concat(l[2]," {")),e&&(a+="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {")),a+=n(l),e&&(a+="}"),l[2]&&(a+="}"),l[4]&&(a+="}"),a}).join("")},s.i=function(l,a,e,t,_){typeof l=="string"&&(l=[[null,l,void 0]]);var i={};if(e)for(var r=0;r<this.length;r++){var m=this[r][0];m!=null&&(i[m]=!0)}for(var y=0;y<l.length;y++){var o=[].concat(l[y]);e&&i[o[0]]||(typeof _!="undefined"&&(typeof o[5]=="undefined"||(o[1]="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {").concat(o[1],"}")),o[5]=_),a&&(o[2]&&(o[1]="@media ".concat(o[2]," {").concat(o[1],"}")),o[2]=a),t&&(o[4]?(o[1]="@supports (".concat(o[4],") {").concat(o[1],"}"),o[4]=t):o[4]="".concat(t)),s.push(o))}},s}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js":f=>{"use strict";f.exports=function(n){return n[1]}},"./src/styles/_shadows.scss":(f,n,s)=>{"use strict";s.r(n),s.d(n,{default:()=>v});var d=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),l=s.n(d),a=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js"),e=s.n(a),t=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js"),_=s.n(t),i=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),r=s.n(i),m=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js"),y=s.n(m),o=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js"),S=s.n(o),D=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss"),E=s.n(D),u={};for(const h in D)h!=="default"&&(u[h]=()=>D[h]);s.d(n,u);var c={};c.styleTagTransform=S(),c.setAttributes=r(),c.insert=_().bind(null,"head"),c.domAPI=e(),c.insertStyleElement=y();var p=l()(E(),c);const v=E()&&E().locals?E().locals:void 0},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":f=>{"use strict";var n=[];function s(a){for(var e=-1,t=0;t<n.length;t++)if(n[t].identifier===a){e=t;break}return e}function d(a,e){for(var t={},_=[],i=0;i<a.length;i++){var r=a[i],m=e.base?r[0]+e.base:r[0],y=t[m]||0,o="".concat(m," ").concat(y);t[m]=y+1;var S=s(o),D={css:r[1],media:r[2],sourceMap:r[3],supports:r[4],layer:r[5]};if(S!==-1)n[S].references++,n[S].updater(D);else{var E=l(D,e);e.byIndex=i,n.splice(i,0,{identifier:o,updater:E,references:1})}_.push(o)}return _}function l(a,e){var t=e.domAPI(e);t.update(a);var _=function(r){if(r){if(r.css===a.css&&r.media===a.media&&r.sourceMap===a.sourceMap&&r.supports===a.supports&&r.layer===a.layer)return;t.update(a=r)}else t.remove()};return _}f.exports=function(a,e){e=e||{},a=a||[];var t=d(a,e);return function(i){i=i||[];for(var r=0;r<t.length;r++){var m=t[r],y=s(m);n[y].references--}for(var o=d(i,e),S=0;S<t.length;S++){var D=t[S],E=s(D);n[E].references===0&&(n[E].updater(),n.splice(E,1))}t=o}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js":f=>{"use strict";var n={};function s(l){if(typeof n[l]=="undefined"){var a=document.querySelector(l);if(window.HTMLIFrameElement&&a instanceof window.HTMLIFrameElement)try{a=a.contentDocument.head}catch(e){a=null}n[l]=a}return n[l]}function d(l,a){var e=s(l);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(a)}f.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js":f=>{"use strict";function n(s){var d=document.createElement("style");return s.setAttributes(d,s.attributes),s.insert(d,s.options),d}f.exports=n},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(f,n,s)=>{"use strict";function d(l){var a=s.nc;a&&l.setAttribute("nonce",a)}f.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js":f=>{"use strict";function n(l,a,e){var t="";e.supports&&(t+="@supports (".concat(e.supports,") {")),e.media&&(t+="@media ".concat(e.media," {"));var _=typeof e.layer!="undefined";_&&(t+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),t+=e.css,_&&(t+="}"),e.media&&(t+="}"),e.supports&&(t+="}");var i=e.sourceMap;i&&typeof btoa!="undefined"&&(t+=`
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),a.styleTagTransform(t,l,a.options)}function s(l){if(l.parentNode===null)return!1;l.parentNode.removeChild(l)}function d(l){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var a=l.insertStyleElement(l);return{update:function(t){n(a,l,t)},remove:function(){s(a)}}}f.exports=d},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js":f=>{"use strict";function n(s,d){if(d.styleSheet)d.styleSheet.cssText=s;else{for(;d.firstChild;)d.removeChild(d.firstChild);d.appendChild(document.createTextNode(s))}}f.exports=n},"./stories/UILoader.story.tsx":function(f,n,s){"use strict";var d=this&&this.__createBinding||(Object.create?function(u,c,p,v){v===void 0&&(v=p);var h=Object.getOwnPropertyDescriptor(c,p);(!h||("get"in h?!c.__esModule:h.writable||h.configurable))&&(h={enumerable:!0,get:function(){return c[p]}}),Object.defineProperty(u,v,h)}:function(u,c,p,v){v===void 0&&(v=p),u[v]=c[p]}),l=this&&this.__setModuleDefault||(Object.create?function(u,c){Object.defineProperty(u,"default",{enumerable:!0,value:c})}:function(u,c){u.default=c}),a=this&&this.__importStar||function(u){if(u&&u.__esModule)return u;var c={};if(u!=null)for(var p in u)p!=="default"&&Object.prototype.hasOwnProperty.call(u,p)&&d(c,u,p);return l(c,u),c};Object.defineProperty(n,"__esModule",{value:!0}),n.Dialogs=n.Delayed=n.Loaders=void 0;const e=a(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=s("../../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"),_=s("./src/components/UILoader/index.tsx"),i=s("./src/components/UIButton/index.tsx"),r=s("./src/components/UIDialog/index.ts");n.default={title:"Progress/Loader"};const m={childrenGap:40},y=()=>e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Default Loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,null))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Large loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.large}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Medium loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.medium}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Small loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.small}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"xSmall loader"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{size:t.SpinnerSize.xSmall}))),e.default.createElement(t.Stack,{tokens:m,style:{position:"relative"}},e.default.createElement(t.Text,null,"Loader - block DOM"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{blockDOM:!0}))),e.default.createElement(t.Stack,{tokens:m,style:{position:"relative",height:"75px"}},e.default.createElement(t.Text,null,"Loader - block DOM with text..."),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{blockDOM:!0,label:"Loader label..."}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Small loader - css class"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{className:"uiLoaderXSmall"}))),e.default.createElement(t.Stack,{tokens:m},e.default.createElement(t.Text,null,"Large loader - css class"),e.default.createElement(t.Stack,{horizontal:!0},e.default.createElement(_.UILoader,{className:"uiLoaderXLarge"}))));n.Loaders=y;const o=()=>{const[u,c]=(0,e.useState)(!1);return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",null,e.default.createElement("div",{style:{position:"relative",height:"100px",width:"300px",textAlign:"center"}},e.default.createElement(t.Text,null,"Loader - delayed"),u&&e.default.createElement(_.UILoader,{delayed:!0,blockDOM:!0,label:"Delayed loader"})),e.default.createElement("div",null,e.default.createElement(i.UIDefaultButton,{text:"Toggle Loader",onClick:()=>{c(!u)}}))))};n.Delayed=o;const S=`
|
|
3
|
+
.popup--busy .ms-Dialog-content {
|
|
4
|
+
position: static;
|
|
5
|
+
}
|
|
6
|
+
`,D=u=>{const{delayed:c,text:p}=u,[v,h]=(0,e.useState)(!1),[T,I]=(0,e.useState)(!1),g=()=>{h(!v)},b=()=>{I(!0),setTimeout(()=>{I(!1),g()},500)};return e.default.createElement(e.default.Fragment,null,e.default.createElement(i.UIDefaultButton,{onClick:g,primary:!0},p),e.default.createElement(r.UIDialog,{isOpen:v,isBlocking:!0,title:"Header Title",acceptButtonText:"Accept",cancelButtonText:"Cancel",onAccept:g,onCancel:g,onDismiss:g,modalProps:{className:"popup--busy"},footer:e.default.createElement("div",null,e.default.createElement(i.UIDefaultButton,{onClick:b},"Accept"))},e.default.createElement("div",null,"Dummy"),T&&e.default.createElement(_.UILoader,{className:"uiLoaderXLarge",blockDOM:!0,delayed:c})))},E=()=>e.default.createElement(e.default.Fragment,null,e.default.createElement("style",null,S),e.default.createElement("div",null,e.default.createElement(D,{delayed:!1,text:"Open Dialog with loader"})),e.default.createElement("div",null,e.default.createElement(D,{delayed:!0,text:"Open Dialog with delayed loader"})));n.Dialogs=E}}]);})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{var p=Object.defineProperty;var m=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var s=(a,e,n)=>e in a?p(a,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):a[e]=n,r=(a,e)=>{for(var n in e||(e={}))g.call(e,n)&&s(a,n,e[n]);if(m)for(var n of m(e))y.call(e,n)&&s(a,n,e[n]);return a};(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[680],{"./stories/UIQuickNavigation.story.tsx":function(a,e,n){var f=this&&this.__importDefault||function(u){return u&&u.__esModule?u:{default:u}};Object.defineProperty(e,"__esModule",{value:!0}),e.ExternalWithCustomOffset=e.External=e.Inline=void 0;const t=f(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),i=n("./src/components/index.tsx");e.default={title:"Utilities/Quick Navigation"};const k={name:"Hello, world!",html:"<span><strong>Tag:</strong> name</span>"},c=u=>{const{title:d}=u;return t.default.createElement("div",{style:{border:"1px solid red",margin:"20px 0",padding:10}},t.default.createElement("div",null,d),t.default.createElement(i.UITextInput,{label:"Dummy 1"}),t.default.createElement(i.UITextInput,{label:"Dummy 2"}),t.default.createElement(i.UIDefaultButton,null,"Submit"))},o=u=>{const{inline:d,offsets:l}=u;return t.default.createElement("div",{style:{margin:10}},t.default.createElement("div",null,`Inline = ${d}`),t.default.createElement(i.UIQuickNavigation,{inline:d},t.default.createElement("div",r({},(0,i.setQuickNavigationKey)("A",l==null?void 0:l[0])),t.default.createElement(c,{title:"Group 1"})),t.default.createElement("div",r({},(0,i.setQuickNavigationKey)("B",l==null?void 0:l[1])),t.default.createElement(c,{title:"Group 2"})),t.default.createElement("div",r({},(0,i.setQuickNavigationKey)("C",l==null?void 0:l[2])),t.default.createElement(c,{title:"Group 3"})),t.default.createElement("div",r({},(0,i.setQuickNavigationKey)("D",l==null?void 0:l[3])),t.default.createElement(c,{title:"Group 4"}))))},E=()=>t.default.createElement(o,{inline:!0});e.Inline=E;const v=()=>t.default.createElement(o,{inline:!1});e.External=v;const _=()=>t.default.createElement(o,{inline:!1,offsets:[{y:30,x:0},{y:0,x:30},{y:-15,x:-15}]});e.ExternalWithCustomOffset=_}}]);})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{var O=Object.defineProperty,C=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var _=(c,t,a)=>t in c?O(c,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[t]=a,p=(c,t)=>{for(var a in t||(t={}))P.call(t,a)&&_(c,a,t[a]);if(h)for(var a of h(t))w.call(t,a)&&_(c,a,t[a]);return c},x=(c,t)=>C(c,I(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[104],{"./stories/UISearchBox.story.tsx":function(c,t,a){var m=this&&this.__createBinding||(Object.create?function(e,n,r,o){o===void 0&&(o=r);var l=Object.getOwnPropertyDescriptor(n,r);(!l||("get"in l?!n.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return n[r]}}),Object.defineProperty(e,o,l)}:function(e,n,r,o){o===void 0&&(o=r),e[o]=n[r]}),b=this&&this.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),S=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var r in e)r!=="default"&&Object.prototype.hasOwnProperty.call(e,r)&&m(n,e,r);return b(n,e),n};Object.defineProperty(t,"__esModule",{value:!0}),t.SearchBox=void 0;const s=S(a("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),i=a("../../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"),v=a("./src/components/UISearchBox/index.tsx"),y=a("./src/components/index.tsx");t.default={title:"Basic Inputs/Search"};const B={childrenGap:40},g=()=>{const[e,n]=(0,s.useState)(""),r=(f,u)=>{u!==void 0&&n(u)},o=()=>{n("")},l=(f,u)=>{j(x(p({},d),{[f]:u}))},[d,j]=(0,s.useState)({value:e,onChange:r,onClear:o});return s.default.createElement(i.Stack,{tokens:B,style:{width:300}},s.default.createElement(i.Stack,{tokens:{childrenGap:16}},s.default.createElement(i.Text,{variant:"large",className:"textColor"},"UISearchBox"),s.default.createElement("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap",gap:"20px",maxWidth:"1200px"}},s.default.createElement(y.UICheckbox,{label:"Disabled",checked:d.disabled,onChange:(f,u)=>{l("disabled",u)}})),s.default.createElement(v.UISearchBox,p({},d))))};t.SearchBox=g}}]);})();
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";(()=>{var C=Object.defineProperty,E=Object.defineProperties;var S=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var I=(u,r,l)=>r in u?C(u,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):u[r]=l,m=(u,r)=>{for(var l in r||(r={}))U.call(r,l)&&I(u,l,r[l]);if(y)for(var l of y(r))T.call(r,l)&&I(u,l,r[l]);return u},p=(u,r)=>E(u,S(r));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[644],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js":u=>{u.exports=function(r){var l=[];return l.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("")},l.i=function(e,t,a,n,s){typeof e=="string"&&(e=[[null,e,void 0]]);var c={};if(a)for(var d=0;d<this.length;d++){var f=this[d][0];f!=null&&(c[f]=!0)}for(var h=0;h<e.length;h++){var o=[].concat(e[h]);a&&c[o[0]]||(typeof s!="undefined"&&(typeof o[5]=="undefined"||(o[1]="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {").concat(o[1],"}")),o[5]=s),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)),l.push(o))}},l}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js":u=>{u.exports=function(r){return r[1]}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":u=>{var r=[];function l(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={},s=[],c=0;c<t.length;c++){var d=t[c],f=a.base?d[0]+a.base:d[0],h=n[f]||0,o="".concat(f," ").concat(h);n[f]=h+1;var v=l(o),b={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(v!==-1)r[v].references++,r[v].updater(b);else{var x=e(b,a);a.byIndex=c,r.splice(c,0,{identifier:o,updater:x,references:1})}s.push(o)}return s}function e(t,a){var n=a.domAPI(a);n.update(t);var s=function(d){if(d){if(d.css===t.css&&d.media===t.media&&d.sourceMap===t.sourceMap&&d.supports===t.supports&&d.layer===t.layer)return;n.update(t=d)}else n.remove()};return s}u.exports=function(t,a){a=a||{},t=t||[];var n=i(t,a);return function(c){c=c||[];for(var d=0;d<n.length;d++){var f=n[d],h=l(f);r[h].references--}for(var o=i(c,a),v=0;v<n.length;v++){var b=n[v],x=l(b);r[x].references===0&&(r[x].updater(),r.splice(x,1))}n=o}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js":u=>{var r={};function l(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=l(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)}u.exports=i},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js":u=>{function r(l){var i=document.createElement("style");return l.setAttributes(i,l.attributes),l.insert(i,l.options),i}u.exports=r},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(u,r,l)=>{function i(e){var t=l.nc;t&&e.setAttribute("nonce",t)}u.exports=i},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js":u=>{function r(e,t,a){var n="";a.supports&&(n+="@supports (".concat(a.supports,") {")),a.media&&(n+="@media ".concat(a.media," {"));var s=typeof a.layer!="undefined";s&&(n+="@layer".concat(a.layer.length>0?" ".concat(a.layer):""," {")),n+=a.css,s&&(n+="}"),a.media&&(n+="}"),a.supports&&(n+="}");var c=a.sourceMap;c&&typeof btoa!="undefined"&&(n+=`
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(c))))," */")),t.styleTagTransform(n,e,t.options)}function l(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(){l(t)}}}u.exports=i},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js":u=>{function r(l,i){if(i.styleSheet)i.styleSheet.cssText=l;else{for(;i.firstChild;)i.removeChild(i.firstChild);i.appendChild(document.createTextNode(l))}}u.exports=r},"./src/components/UICheckbox/UICheckbox.tsx":function(u,r,l){var i=this&&this.__importDefault||function(s){return s&&s.__esModule?s:{default:s}};Object.defineProperty(r,"__esModule",{value:!0}),r.UICheckbox=void 0;const e=i(l("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=l("../../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"),a=l("./src/helper/ValidationMessage/index.tsx");class n 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=(d,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"}}},d.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},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),d=e.default.createElement(t.Checkbox,p(m({},this.props),{styles:f=>m(m({},this.setStyle(c,f)),this.props.styles)}));return c.message?e.default.createElement(a.MessageWrapper,{message:c},d):d}}r.UICheckbox=n},"./src/components/UICheckbox/index.tsx":function(u,r,l){var i=this&&this.__createBinding||(Object.create?function(t,a,n,s){s===void 0&&(s=n);var c=Object.getOwnPropertyDescriptor(a,n);(!c||("get"in c?!a.__esModule:c.writable||c.configurable))&&(c={enumerable:!0,get:function(){return a[n]}}),Object.defineProperty(t,s,c)}:function(t,a,n,s){s===void 0&&(s=n),t[s]=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(l("./src/components/UICheckbox/UICheckbox.tsx"),r)},"./stories/UITextInput.story.tsx":function(u,r,l){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(l("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=l("../../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"),a=l("./src/components/UIInput/index.tsx"),n=l("./src/components/UICheckbox/index.tsx");r.default={title:"Basic Inputs/Input"};const s={childrenGap:40},c={iconName:"FolderOpened"},d=()=>e.default.createElement(t.Stack,{tokens:s,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:c})),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})));r.defaultUsage=d;const f=()=>{const[o,v]=e.default.useState(!1),[b,x]=e.default.useState("Content"),g={multiline:o,onChange:(_,k)=>{x(k||"")}};return e.default.createElement("div",null,e.default.createElement(t.Stack,{horizontal:!0,tokens:s},e.default.createElement(n.UICheckbox,{label:"Multi Line",checked:o,onChange:(_,k)=>{v(k)}})),e.default.createElement(t.Stack,{horizontal:!0,tokens:s},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,p(m({},g),{placeholder:"Placeholder"}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,p(m({},g),{value:b})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Error"),e.default.createElement("td",null,e.default.createElement(a.UITextInput,p(m({},g),{placeholder:"Placeholder",errorMessage:"Dummy error"}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,p(m({},g),{errorMessage:"Dummy error",value:b})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Disabled"),e.default.createElement("td",null,e.default.createElement(a.UITextInput,p(m({},g),{placeholder:"Placeholder",disabled:!0}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,p(m({},g),{value:b,disabled:!0})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Read Only"),e.default.createElement("td",null,e.default.createElement(a.UITextInput,p(m({},g),{placeholder:"Placeholder",readOnly:!0}))),e.default.createElement("td",null,e.default.createElement(a.UITextInput,p(m({},g),{value:b,readOnly:!0})))))))};r.accessibilityStates=f;const h=()=>{const o="Dummy message";return e.default.createElement(t.Stack,{tokens:s,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=h}}]);})();
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{var
|
|
2
|
-
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(
|
|
1
|
+
(()=>{var T=Object.defineProperty,j=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var P=(d,n,s)=>n in d?T(d,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):d[n]=s,v=(d,n)=>{for(var s in n||(n={}))U.call(n,s)&&P(d,s,n[s]);if(E)for(var s of E(n))S.call(n,s)&&P(d,s,n[s]);return d},h=(d,n)=>j(d,M(n));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[218],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss":(d,n,s)=>{var a=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js"),r=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js"),o=r(a);o.push([d.id,".ts-icon{fill:var(--vscode-foreground)}",""]),d.exports=o},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js":d=>{"use strict";d.exports=function(n){var s=[];return s.toString=function(){return this.map(function(r){var o="",t=typeof r[5]!="undefined";return r[4]&&(o+="@supports (".concat(r[4],") {")),r[2]&&(o+="@media ".concat(r[2]," {")),t&&(o+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),o+=n(r),t&&(o+="}"),r[2]&&(o+="}"),r[4]&&(o+="}"),o}).join("")},s.i=function(r,o,t,e,l){typeof r=="string"&&(r=[[null,r,void 0]]);var _={};if(t)for(var i=0;i<this.length;i++){var c=this[i][0];c!=null&&(_[c]=!0)}for(var m=0;m<r.length;m++){var u=[].concat(r[m]);t&&_[u[0]]||(typeof l!="undefined"&&(typeof u[5]=="undefined"||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=l),o&&(u[2]&&(u[1]="@media ".concat(u[2]," {").concat(u[1],"}")),u[2]=o),e&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=e):u[4]="".concat(e)),s.push(u))}},s}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js":d=>{"use strict";d.exports=function(n){return n[1]}},"./src/components/UIIcon/UIIcon.scss":(d,n,s)=>{"use strict";s.r(n),s.d(n,{default:()=>O});var a=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),r=s.n(a),o=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js"),t=s.n(o),e=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js"),l=s.n(e),_=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),i=s.n(_),c=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js"),m=s.n(c),u=s("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js"),f=s.n(u),p=s("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/components/UIIcon/UIIcon.scss"),y=s.n(p),g={};for(const I in p)I!=="default"&&(g[I]=()=>p[I]);s.d(n,g);var b={};b.styleTagTransform=f(),b.setAttributes=i(),b.insert=l().bind(null,"head"),b.domAPI=t(),b.insertStyleElement=m();var D=r()(y(),b);const O=y()&&y().locals?y().locals:void 0},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":d=>{"use strict";var n=[];function s(o){for(var t=-1,e=0;e<n.length;e++)if(n[e].identifier===o){t=e;break}return t}function a(o,t){for(var e={},l=[],_=0;_<o.length;_++){var i=o[_],c=t.base?i[0]+t.base:i[0],m=e[c]||0,u="".concat(c," ").concat(m);e[c]=m+1;var f=s(u),p={css:i[1],media:i[2],sourceMap:i[3],supports:i[4],layer:i[5]};if(f!==-1)n[f].references++,n[f].updater(p);else{var y=r(p,t);t.byIndex=_,n.splice(_,0,{identifier:u,updater:y,references:1})}l.push(u)}return l}function r(o,t){var e=t.domAPI(t);e.update(o);var l=function(i){if(i){if(i.css===o.css&&i.media===o.media&&i.sourceMap===o.sourceMap&&i.supports===o.supports&&i.layer===o.layer)return;e.update(o=i)}else e.remove()};return l}d.exports=function(o,t){t=t||{},o=o||[];var e=a(o,t);return function(_){_=_||[];for(var i=0;i<e.length;i++){var c=e[i],m=s(c);n[m].references--}for(var u=a(_,t),f=0;f<e.length;f++){var p=e[f],y=s(p);n[y].references===0&&(n[y].updater(),n.splice(y,1))}e=u}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js":d=>{"use strict";var n={};function s(r){if(typeof n[r]=="undefined"){var o=document.querySelector(r);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(t){o=null}n[r]=o}return n[r]}function a(r,o){var t=s(r);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(o)}d.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js":d=>{"use strict";function n(s){var a=document.createElement("style");return s.setAttributes(a,s.attributes),s.insert(a,s.options),a}d.exports=n},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(d,n,s)=>{"use strict";function a(r){var o=s.nc;o&&r.setAttribute("nonce",o)}d.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js":d=>{"use strict";function n(r,o,t){var e="";t.supports&&(e+="@supports (".concat(t.supports,") {")),t.media&&(e+="@media ".concat(t.media," {"));var l=typeof t.layer!="undefined";l&&(e+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),e+=t.css,l&&(e+="}"),t.media&&(e+="}"),t.supports&&(e+="}");var _=t.sourceMap;_&&typeof btoa!="undefined"&&(e+=`
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(_))))," */")),o.styleTagTransform(e,r,o.options)}function s(r){if(r.parentNode===null)return!1;r.parentNode.removeChild(r)}function a(r){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var o=r.insertStyleElement(r);return{update:function(e){n(o,r,e)},remove:function(){s(o)}}}d.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js":d=>{"use strict";function n(s,a){if(a.styleSheet)a.styleSheet.cssText=s;else{for(;a.firstChild;)a.removeChild(a.firstChild);a.appendChild(document.createTextNode(s))}}d.exports=n},"./src/components/UIIcon/UIIcon.tsx":function(d,n,s){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.UIIcon=void 0;const r=a(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),o=s("../../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");s("./src/components/UIIcon/UIIcon.scss");class t extends r.default.Component{constructor(l){super(l),this.setStyle=()=>({})}render(){const l=this.props.className?` ${this.props.className}`:"";return r.default.createElement(o.Icon,h(v({},this.props),{className:`ts-icon${l}`,styles:this.setStyle()}))}}n.UIIcon=t},"./src/components/UIIcon/index.tsx":function(d,n,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(o,t,e,l){l===void 0&&(l=e);var _=Object.getOwnPropertyDescriptor(t,e);(!_||("get"in _?!t.__esModule:_.writable||_.configurable))&&(_={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(o,l,_)}:function(o,t,e,l){l===void 0&&(l=e),o[l]=t[e]}),r=this&&this.__exportStar||function(o,t){for(var e in o)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&a(t,o,e)};Object.defineProperty(n,"__esModule",{value:!0}),r(s("./src/components/UIIcon/UIIcon.tsx"),n)},"./src/components/UILabel/UILabel.tsx":function(d,n,s){"use strict";var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.UILabel=n.labelGlobalStyle=void 0;const r=a(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),o=s("../../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");n.labelGlobalStyle={fontWeight:"bold",fontSize:"13px",color:"var(--vscode-input-foreground)",fontFamily:"var(--vscode-font-family)",padding:"4px 0"};class t extends r.default.Component{constructor(l){super(l)}render(){const l=_=>({root:[v({marginTop:25},n.labelGlobalStyle),_.disabled&&{opacity:"0.4"},_.required&&{selectors:{"::after":{content:"' *'",color:"var(--vscode-inputValidation-errorBorder)",paddingRight:12}}}]});return r.default.createElement(o.Label,h(v({},this.props),{styles:l}))}}n.UILabel=t},"./src/components/UILabel/index.tsx":function(d,n,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(o,t,e,l){l===void 0&&(l=e);var _=Object.getOwnPropertyDescriptor(t,e);(!_||("get"in _?!t.__esModule:_.writable||_.configurable))&&(_={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(o,l,_)}:function(o,t,e,l){l===void 0&&(l=e),o[l]=t[e]}),r=this&&this.__exportStar||function(o,t){for(var e in o)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&a(t,o,e)};Object.defineProperty(n,"__esModule",{value:!0}),r(s("./src/components/UILabel/UILabel.tsx"),n)},"./src/utilities/Dom.ts":(d,n)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.isHTMLElement=s,n.isHTMLInputElement=a;function s(r){return"title"in r}function a(r){return"value"in r&&"tagName"in r&&r.tagName==="INPUT"}},"./src/utilities/Focus.ts":(d,n,s)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getPreviousElement=n.getNextElement=n.setUIFocusVisibility=n.getUILastFocusable=n.getUIFirstFocusable=void 0,n.focusToSibling=r;const a=s("../../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(n,"getUIFirstFocusable",{enumerable:!0,get:function(){return a.getFirstFocusable}}),Object.defineProperty(n,"getUILastFocusable",{enumerable:!0,get:function(){return a.getLastFocusable}}),Object.defineProperty(n,"setUIFocusVisibility",{enumerable:!0,get:function(){return a.setFocusVisibility}}),Object.defineProperty(n,"getNextElement",{enumerable:!0,get:function(){return a.getNextElement}}),Object.defineProperty(n,"getPreviousElement",{enumerable:!0,get:function(){return a.getPreviousElement}});function r(o,t){const e=(0,a.getDocument)();if(e){let l=null;if(t?l=(0,a.getNextElement)(e.body,o,!1,!1,!0,!0):l=(0,a.getPreviousElement)(e.body,o,!1,!1,!0,!0),l)return l.focus(),l}return null}},"./src/utilities/Id.ts":(d,n,s)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getUIId=void 0;const a=s("../../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(n,"getUIId",{enumerable:!0,get:function(){return a.getId}})},"./src/utilities/Keys.ts":(d,n,s)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.UIKeyCodes=void 0;const a=s("../../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(n,"UIKeyCodes",{enumerable:!0,get:function(){return a.KeyCodes}})},"./src/utilities/index.ts":function(d,n,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(o,t,e,l){l===void 0&&(l=e);var _=Object.getOwnPropertyDescriptor(t,e);(!_||("get"in _?!t.__esModule:_.writable||_.configurable))&&(_={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(o,l,_)}:function(o,t,e,l){l===void 0&&(l=e),o[l]=t[e]}),r=this&&this.__exportStar||function(o,t){for(var e in o)e!=="default"&&!Object.prototype.hasOwnProperty.call(t,e)&&a(t,o,e)};Object.defineProperty(n,"__esModule",{value:!0}),r(s("./src/utilities/Dom.ts"),n),r(s("./src/utilities/Focus.ts"),n),r(s("./src/utilities/Id.ts"),n),r(s("./src/utilities/Keys.ts"),n)},"./stories/UIToggleGroup.story.tsx":function(d,n,s){"use strict";var a=this&&this.__createBinding||(Object.create?function(c,m,u,f){f===void 0&&(f=u);var p=Object.getOwnPropertyDescriptor(m,u);(!p||("get"in p?!m.__esModule:p.writable||p.configurable))&&(p={enumerable:!0,get:function(){return m[u]}}),Object.defineProperty(c,f,p)}:function(c,m,u,f){f===void 0&&(f=u),c[f]=m[u]}),r=this&&this.__setModuleDefault||(Object.create?function(c,m){Object.defineProperty(c,"default",{enumerable:!0,value:m})}:function(c,m){c.default=m}),o=this&&this.__importStar||function(c){if(c&&c.__esModule)return c;var m={};if(c!=null)for(var u in c)u!=="default"&&Object.prototype.hasOwnProperty.call(c,u)&&a(m,c,u);return r(m,c),m};Object.defineProperty(n,"__esModule",{value:!0}),n.defaultUsage=void 0;const t=o(s("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),e=s("../../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"),l=s("./src/components/UIToggleGroup/index.ts");n.default={title:"Basic Inputs/Toggle/Group"};const _={childrenGap:40},i=()=>{const[c,m]=(0,t.useState)(""),u=[{key:"high",text:"H",ariaLabel:"High",title:"High"},{key:"medium",text:"M",ariaLabel:"Medium",title:"Medium"},{key:"low",text:"L",ariaLabel:"Low",title:"Low"}],f=[{key:"high",text:"H"},{key:"medium",text:"M",disabled:!0},{key:"low",text:"L"},{key:"long_text",text:"Long Text"}],p=[{key:"chart",icon:"Chart"},{key:"star",icon:"Star"},{key:"settings",icon:"Settings"}],y=(g,b)=>{m(b?g:"")};return t.default.createElement(e.Stack,{tokens:_,style:{width:300}},t.default.createElement(e.Text,{variant:"large",className:"textColor"},"UIToggleGroup"),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, default usage"),t.default.createElement(l.UIToggleGroup,{options:u,label:"Test",ariaLabel:"test",onChange:y.bind(this)}),t.default.createElement("span",null,"selection: ",c)),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, required value"),t.default.createElement(l.UIToggleGroup,{options:u,label:"Test",required:!0})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with default selected value"),t.default.createElement(l.UIToggleGroup,{options:u,label:"Test",selectedKey:"medium"})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with a disabled option"),t.default.createElement(l.UIToggleGroup,{options:f,label:"Test"})),t.default.createElement(e.Stack,{tokens:{childrenGap:16}},t.default.createElement(e.Text,{variant:"medium",className:"textColor"},"UIToggleGroup, with icons option"),t.default.createElement(l.UIToggleGroup,{options:p,label:"Test"})))};n.defaultUsage=i}}]);})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{var U=Object.defineProperty,L=Object.defineProperties;var P=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var S=(i,e,o)=>e in i?U(i,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[e]=o,y=(i,e)=>{for(var o in e||(e={}))v.call(e,o)&&S(i,o,e[o]);if(C)for(var o of C(e))I.call(e,o)&&S(i,o,e[o]);return i},E=(i,e)=>L(i,P(e));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[406],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss":(i,e,o)=>{var c=o("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/noSourceMaps.js"),_=o("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/node_modules/css-loader/dist/runtime/api.js"),a=_(c);a.push([i.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)}",""]),i.exports=a},"./src/styles/_shadows.scss":(i,e,o)=>{"use strict";o.r(e),o.d(e,{default:()=>O});var c=o("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),_=o.n(c),a=o("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleDomAPI.js"),s=o.n(a),t=o("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertBySelector.js"),l=o.n(t),n=o("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),m=o.n(n),T=o("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/insertStyleElement.js"),d=o.n(T),r=o("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.94.0/node_modules/style-loader/dist/runtime/styleTagTransform.js"),p=o.n(r),f=o("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.94.0/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.94.0/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss"),u=o.n(f),g={};for(const b in f)b!=="default"&&(g[b]=()=>f[b]);o.d(e,g);var h={};h.styleTagTransform=p(),h.setAttributes=m(),h.insert=l().bind(null,"head"),h.domAPI=s(),h.insertStyleElement=d();var j=_()(u(),h);const O=u()&&u().locals?u().locals:void 0},"./src/components/UICallout/CalloutCollisionTransform.ts":(i,e)=>{"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.CalloutCollisionTransform=void 0;const o={target:".ms-Dialog-actions",container:".ms-Dialog-main",absolute:!0,minPagePadding:10},c=20;class _{constructor(s,t,l=o){this.originalStyle={},this.source=s,this.callout=t,this.props=l,this.applyTransformation=this.applyTransformation.bind(this),this.resetTransformation=this.resetTransformation.bind(this),this.preventDismissOnEvent=this.preventDismissOnEvent.bind(this)}createPlaceholder(s){const t=document.createElement("div");return t.classList.add("ts-Callout-transformation"),t.style.height=`${s}px`,t}getElements(){const s=this.source.current,t=s==null?void 0:s.closest(this.props.container);if(t&&s){const l=t==null?void 0:t.querySelector(this.props.target);if(l){const n={container:{dom:t,rect:t.getBoundingClientRect()},target:{dom:l,rect:l.getBoundingClientRect()},source:{dom:s,rect:s.getBoundingClientRect()}},m=this.callout.current;return m&&(n.callout={dom:m,rect:m.getBoundingClientRect()}),n}}}applyTransformation(){const s=this.getElements();if(!s)return;const{container:t,target:l,callout:n,source:m}=s;if(n){const T=window.innerHeight-o.minPagePadding,d=n.rect.height,r=m.rect.bottom;let p=r+d-l.rect.top,f=r+n.rect.height;if(p<=0||f>=T)return;if(f+=l.rect.height,f<=T&&(p+=c),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(p),l.dom.prepend(this.placeholder)}}resetTransformation(){const s=this.getElements();if(!s)return;const{container:t,target:l}=s;for(const n in this.originalStyle){const m=this.originalStyle[n];typeof m=="string"&&(t.dom.style[n]=m)}this.originalStyle={},this.placeholder&&(l.dom.removeChild(this.placeholder),this.placeholder=void 0)}preventDismissOnEvent(s){const t=this.getElements();return!!(s.type==="focus"&&(t!=null&&t.target.dom.contains(s.target)))}}e.CalloutCollisionTransform=_},"./src/components/UICallout/UICallout.tsx":function(i,e,o){"use strict";var c=this&&this.__importDefault||function(d){return d&&d.__esModule?d:{default:d}};Object.defineProperty(e,"__esModule",{value:!0}),e.UICallout=e.getCalloutStyle=e.UICalloutContentPadding=e.CALLOUT_STYLES=void 0;const _=c(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),a=o("../../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"),s=o("./src/utilities/index.ts");o("./src/styles/_shadows.scss"),e.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(d){d.None="None",d.Standard="Standard"})(t||(e.UICalloutContentPadding=t={}));const l=new Map([[t.Standard,8]]),n=(d,r)=>typeof d=="object"&&typeof d[r]=="object"?d[r]:{},m=d=>{var r,p;return{root:y({boxShadow:e.CALLOUT_STYLES.boxShadow,backgroundColor:e.CALLOUT_STYLES.background,borderRadius:e.CALLOUT_STYLES.borderRadius,border:`1px solid ${e.CALLOUT_STYLES.borderColor}`},n(d.styles,"root")),beak:y({backgroundColor:e.CALLOUT_STYLES.background,boxShadow:e.CALLOUT_STYLES.boxShadow},n(d.styles,"beak")),beakCurtain:y({backgroundColor:e.CALLOUT_STYLES.background,borderRadius:e.CALLOUT_STYLES.borderRadius},n(d.styles,"beakCurtain")),calloutMain:y({backgroundColor:"transparent",color:e.CALLOUT_STYLES.text,fontFamily:e.CALLOUT_STYLES.font,borderRadius:e.CALLOUT_STYLES.borderRadius,minWidth:(r=d.calloutMinWidth)!=null?r:300,boxSizing:"border-box",padding:l.get((p=d.contentPadding)!=null?p:t.None)},n(d.styles,"calloutMain")),container:n(d.styles,"container")}};e.getCalloutStyle=m;class T extends _.default.Component{constructor(r){super(r),this.onKeyDown=this.onKeyDown.bind(this)}onKeyDown(r){const{onKeyDown:p,focusTargetSiblingOnTabPress:f,target:u}=this.props;if(f&&r.key==="Tab"&&u){let g=null;if(typeof u=="string"){const h=(0,a.getDocument)();g=h==null?void 0:h.querySelector(u)}else"getBoundingClientRect"in u&&(0,s.isHTMLElement)(u)&&(g=u);g&&(0,s.focusToSibling)(g,!r.shiftKey)&&(r.stopPropagation(),r.preventDefault())}p==null||p(r)}render(){return _.default.createElement(a.Callout,E(y({},this.props),{onKeyDown:this.onKeyDown,styles:(0,e.getCalloutStyle)(this.props)}),this.props.children)}}e.UICallout=T},"./src/components/UICallout/index.tsx":function(i,e,o){"use strict";var c=this&&this.__createBinding||(Object.create?function(a,s,t,l){l===void 0&&(l=t);var n=Object.getOwnPropertyDescriptor(s,t);(!n||("get"in n?!s.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return s[t]}}),Object.defineProperty(a,l,n)}:function(a,s,t,l){l===void 0&&(l=t),a[l]=s[t]}),_=this&&this.__exportStar||function(a,s){for(var t in a)t!=="default"&&!Object.prototype.hasOwnProperty.call(s,t)&&c(s,a,t)};Object.defineProperty(e,"__esModule",{value:!0}),_(o("./src/components/UICallout/CalloutCollisionTransform.ts"),e),_(o("./src/components/UICallout/UICallout.tsx"),e)},"./src/components/UITooltip/UITooltip.tsx":function(i,e,o){"use strict";var c=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(e,"__esModule",{value:!0}),e.UITooltip=e.UITooltipDelay=void 0;const _=c(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),a=o("../../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(e,"UITooltipDelay",{enumerable:!0,get:function(){return a.TooltipDelay}});const s=o("./src/components/UICallout/index.tsx");class t extends _.default.Component{constructor(n){super(n)}render(){var p;const n=(p=this.props.maxWidth)!=null?p:200,m=()=>y({root:{display:"inline-block"},content:{backgroundColor:s.CALLOUT_STYLES.background,color:s.CALLOUT_STYLES.text,fontFamily:s.CALLOUT_STYLES.font}},this.props.styles),d={beakWidth:10,styles:()=>(0,s.getCalloutStyle)({calloutMinWidth:0,styles:{root:{display:"inline-block"},calloutMain:{padding:10,maxWidth:n}}})},r=_.default.createElement(a.TooltipHost,E(y({},this.props),{styles:m,calloutProps:y(y({},d),this.props.calloutProps)}));return this.props.showOnFocus?r:_.default.createElement("div",{onFocusCapture:f=>{f.target.parentElement&&f.target.parentElement.classList.contains("ms-TooltipHost")&&f.stopPropagation()}},r)}}e.UITooltip=t},"./src/components/UITooltip/UITooltipUtils.tsx":function(i,e,o){"use strict";var c=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(e,"__esModule",{value:!0}),e.UITooltipUtils=void 0;const _=c(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),a=c(o("../../node_modules/.pnpm/sanitize-html@2.12.1/node_modules/sanitize-html/index.js")),s=o("./src/components/UICallout/index.tsx");class t{static getStyles(){return{root:{},content:{background:s.CALLOUT_STYLES.background,color:s.CALLOUT_STYLES.text},subText:{}}}static renderContent(n){return{onRenderContent:()=>_.default.createElement("span",null,n!=null?n:""),styles:t.getStyles()}}static renderHTMLContent(n){const m=(0,a.default)(n);return{onRenderContent:()=>_.default.createElement("span",{dangerouslySetInnerHTML:{__html:m}}),styles:t.getStyles()}}}e.UITooltipUtils=t},"./src/components/UITooltip/index.tsx":function(i,e,o){"use strict";var c=this&&this.__createBinding||(Object.create?function(a,s,t,l){l===void 0&&(l=t);var n=Object.getOwnPropertyDescriptor(s,t);(!n||("get"in n?!s.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return s[t]}}),Object.defineProperty(a,l,n)}:function(a,s,t,l){l===void 0&&(l=t),a[l]=s[t]}),_=this&&this.__exportStar||function(a,s){for(var t in a)t!=="default"&&!Object.prototype.hasOwnProperty.call(s,t)&&c(s,a,t)};Object.defineProperty(e,"__esModule",{value:!0}),_(o("./src/components/UITooltip/UITooltip.tsx"),e),_(o("./src/components/UITooltip/UITooltipUtils.tsx"),e)},"./stories/UITooltip.story.tsx":function(i,e,o){"use strict";var c=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(e,"__esModule",{value:!0}),e.Tooltips=void 0;const _=c(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),a=o("./src/components/UITooltip/index.tsx"),s=o("./src/components/UIButton/index.tsx");e.default={title:"Dropdowns/Tooltip"};const t={name:"Hello, world!",html:"<span><strong>Tag:</strong> name</span>"},l=()=>_.default.createElement(_.default.Fragment,null,_.default.createElement("div",{style:{margin:20}},_.default.createElement(a.UITooltip,{tooltipProps:a.UITooltipUtils.renderContent(t.name)},t.name)),_.default.createElement("div",{style:{margin:20}},_.default.createElement(a.UITooltip,{tooltipProps:a.UITooltipUtils.renderHTMLContent(t.html)},"render HTML content")),_.default.createElement("div",null,_.default.createElement(a.UITooltip,{content:"This is the tooltip"},_.default.createElement(s.UIDefaultButton,null,"Show tooltip on hover and ignore focus"))),_.default.createElement("div",null,_.default.createElement(a.UITooltip,{content:"This is the tooltip",showOnFocus:!0},_.default.createElement(s.UIDefaultButton,null,"Show tooltip on hover and on focus"))));e.Tooltips=l},"?e93e":()=>{},"?67a2":()=>{},"?b45d":()=>{},"?333a":()=>{},"?cb65":()=>{}}]);})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{var V=Object.defineProperty,K=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var v=(c,t,e)=>t in c?V(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e,f=(c,t)=>{for(var e in t||(t={}))O.call(t,e)&&v(c,e,t[e]);if(g)for(var e of g(t))z.call(t,e)&&v(c,e,t[e]);return c},B=(c,t)=>K(c,M(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[530],{"./stories/UITranslationInput.story.tsx":function(c,t,e){var T=this&&this.__importDefault||function(s){return s&&s.__esModule?s:{default:s}};Object.defineProperty(t,"__esModule",{value:!0}),t.translationInput=void 0;const n=T(e("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),D=e("../../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"),y=e("../../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"),r=e("./src/components/UITranslationInput/index.tsx"),S=e("./src/components/Icons.tsx"),U=e("./src/components/UITable/index.tsx"),C=e("./src/components/UIButton/index.tsx"),p=e("./src/components/UICheckbox/index.tsx");t.default={title:"Basic Inputs/Input"};const I={childrenGap:60},h="ui-components-i18n-bundle",N=()=>{let s={};try{s=JSON.parse(window.localStorage.getItem(h)||"")}catch(d){s={}}return s},k=s=>{window.localStorage.setItem(h,JSON.stringify(s))},P=()=>{const[s,d]=n.default.useState("Content"),[m,b]=n.default.useState(!1),[i,u]=n.default.useState(!1),[a,x]=n.default.useState(N()),_=(o,l)=>{d(l||"")},j=o=>{a[o.key.value]||(a[o.key.value]=[B(f({},o),{dummyPath:"dddd"})],k(a),x(f({},a)))},W=o=>{const l=document.querySelector(`div[data-i18n-key="${o.key.value}"]`);(l==null?void 0:l.parentElement).focus(),(0,D.setFocusVisibility)(!0,l==null?void 0:l.parentElement)},F=o=>{a[o]&&(delete a[o],k(a),x(f({},a)))},E=[];for(const o in a){const l=a[o];for(const R of l)E.push({key:o,value:R.value.value})}return n.default.createElement(y.Stack,{tokens:I,style:{width:"100%",height:"100%"}},n.default.createElement(y.Stack,{horizontal:!0,tokens:I},n.default.createElement(p.UICheckbox,{label:"Disabled",checked:m,onChange:(o,l)=>{b(l)}}),n.default.createElement(p.UICheckbox,{label:"Busy",checked:i,onChange:(o,l)=>{u(l)}})),n.default.createElement(r.UITranslationInput,{entries:a,id:"test",i18nPrefix:"i18n",allowedI18nPrefixes:["i18n","@i18n"],allowedPatterns:[r.TranslationTextPattern.SingleBracketBinding,r.TranslationTextPattern.DoubleBracketReplace],defaultPattern:r.TranslationTextPattern.SingleBracketBinding,value:s,onChange:_,onCreateNewEntry:j,onShowExistingEntry:W,disabled:m,busy:i?{busy:i,useMinWaitingTime:!0}:void 0}),n.default.createElement(w,{tableData:E,onDelete:F}))};t.translationInput=P;function w(s){const d=Array.from({length:3}).map((b,i)=>{const u={key:"test"+(i+1),name:"",fieldName:"",minWidth:100,maxWidth:300};return i===0?(u.name="Key",u.fieldName="key",u.onRender=a=>n.default.createElement("div",{"data-i18n-key":a.key},a.key)):i===1?(u.name="Value",u.fieldName="value"):i===2&&(u.name="Delete",u.minWidth=50,u.maxWidth=50,u.onRender=a=>n.default.createElement(C.UIIconButton,{onClick:()=>{s.onDelete(a.key)},iconProps:{iconName:S.UiIcons.TrashCan}})),u}),m=".ms-Fabric--isFocusVisible .ms-DetailsList .ms-DetailsRow-cell:focus::after { z-index: -1; }";return n.default.createElement(n.default.Fragment,null,n.default.createElement("style",null,m),n.default.createElement("div",{style:{position:"relative",height:"100%"}},n.default.createElement(U.UITable,{dataSetKey:"datasetkey",items:s.tableData,columns:d})))}}}]);})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[393],{"./stories/Utilities.story.tsx":function(f,s,a){var d=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(s,"__esModule",{value:!0}),s.shadows=void 0;const t=d(a("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),i=a("../../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"),r=a("./src/components/index.tsx");s.default={title:"Utilities/Misc"};const u={childrenGap:20},m=e=>t.default.createElement("div",{style:{padding:10}},e,t.default.createElement("br",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"),p=()=>{const e=[],l=["ui-box-shadow-small","ui-box-shadow-medium","ui-box-shadow-large"];for(let o=0;o<l.length;o++){const n=l[o],c=`host-${o}`;e.push(t.default.createElement(i.Stack,{tokens:u,key:n},t.default.createElement("div",{id:c}),t.default.createElement(r.UICallout,{className:n,styles:{root:{position:"static"}},layerProps:{hostId:c}},m(n))))}return t.default.createElement(i.Stack,{tokens:u,style:{width:300}},e)};s.shadows=p}}]);})();
|
package/storybook/iframe.html
CHANGED
|
@@ -488,8 +488,8 @@
|
|
|
488
488
|
window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
|
|
489
489
|
|
|
490
490
|
|
|
491
|
-
import './runtime~main.
|
|
491
|
+
import './runtime~main.35667639.iframe.bundle.js';
|
|
492
492
|
|
|
493
|
-
import './
|
|
493
|
+
import './389.5879b7cc.iframe.bundle.js';
|
|
494
494
|
|
|
495
|
-
import './main.
|
|
495
|
+
import './main.f69d158b.iframe.bundle.js';</script></body></html>
|