@sap-ux/ui-components/storybook/UIDatePicker-story.5d2ae767.iframe.bundle.js

SAP UI Components Library

(()=>{(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[191],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@13.3.2_sass@1.66.1_webpack@5.96.1/node_modules/sass-loader/dist/cjs.js!./src/components/UIDatePicker/UIDatePicker.scss":(i,o,n)=>{var l=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js"),t=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/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.96.1/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.96.1/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.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),t=n.n(l),e=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js"),s=n.n(e),_=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js"),u=n.n(_),a=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),r=n.n(a),c=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js"),p=n.n(c),d=n("../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js"),f=n.n(d),y=n("../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@13.3.2_sass@1.66.1_webpack@5.96.1/node_modules/sass-loader/dist/cjs.js!./src/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.96.1/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.96.1/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.96.1/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.96.1/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.96.1/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"&&(_+=`
/*# 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.96.1/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}}]);})();