@sap-ux/ui-components/storybook/UIChoiceGroup-story.bad964a5.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var m=Object.defineProperty,C=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var _=(c,o,r)=>o in c?m(c,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):c[o]=r,d=(c,o)=>{for(var r in o||(o={}))g.call(o,r)&&_(c,r,o[r]);if(b)for(var r of b(o))I.call(o,r)&&_(c,r,o[r]);return c},p=(c,o)=>C(c,y(o));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[525],{"./src/components/UIChoiceGroup/UIChoiceGroup.tsx"(c,o,r){var s=this&&this.__importDefault||function(f){return f&&f.__esModule?f:{default:f}};Object.defineProperty(o,"__esModule",{value:!0}),o.UIChoiceGroup=void 0;const a=s(r("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),i=r("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),l=r("./src/components/UILabel/index.tsx"),t=r("./src/components/types.ts"),n={fontSize:13,disableOpacity:.4},e={label:p(d({},n),{color:"var(--vscode-input-foreground)"}),radio:{borderColor:"var(--vscode-editorWidget-border)",background:"var(--vscode-input-background)",bullet:{background:"var(--vscode-input-foreground)"},hover:{background:"var(--vscode-focusBorder)"},focus:{borderColor:"var(--vscode-focusBorder)"},label:p(d({},n),{color:"var(--vscode-foreground)"})}};class u extends a.default.Component{constructor(h){super(h),this.setStyles=()=>d({root:{".ms-ChoiceFieldGroup label.ms-Label":{fontWeight:"bold",fontSize:e.label.fontSize,fontStyle:"normal",lineHeight:15,color:e.label.color,marginTop:10,padding:0},".ms-ChoiceField":{minHeight:20},".ms-ChoiceField-field":{fontWeight:"normal",fontSize:e.radio.label.fontSize,fontStyle:"normal",lineHeight:18,color:e.radio.label.color,margin:0},".ms-ChoiceField-field::before":{backgroundColor:e.radio.background,borderColor:e.radio.borderColor,top:0,left:0,width:18,height:18},".ms-ChoiceField-field::after":{left:5,top:5,height:8,width:8,borderWidth:4,backgroundColor:e.radio.background,transition:"none"},".ms-ChoiceFieldLabel":{paddingLeft:26},".ms-ChoiceField-field.is-checked::after":{borderColor:e.radio.bullet.background},".ms-ChoiceField-field:hover":{"span.ms-ChoiceFieldLabel":{color:e.radio.label.color},"::before":{borderColor:e.radio.hover.background},"::after":{borderColor:"transparent",background:"transparent"}},"label.ms-ChoiceField-field.is-checked:hover::after":{borderColor:e.radio.bullet.background},".ms-ChoiceField-wrapper.is-inFocus::after":{borderColor:e.radio.focus.borderColor},".ms-ChoiceField-input:focus":{opacity:0},".is-disabled + .ms-ChoiceField-field":{" .ms-ChoiceFieldLabel":{opacity:e.radio.label.disableOpacity,color:e.radio.label.color},":hover::before":{borderColor:e.radio.borderColor},":after":{opacity:e.radio.label.disableOpacity}}},label:d(d(d({},l.labelGlobalStyle),this.props.disabled&&{opacity:e.label.disableOpacity,color:e.label.color}),this.props.required&&{selectors:{"::after":{content:t.REQUIRED_LABEL_INDICATOR,color:"var(--vscode-inputValidation-errorBorder)",paddingRight:12}}})},this.props.inline&&{flexContainer:{display:"flex",flexDirection:"row",flexWrap:"wrap",selectors:{"> .ms-ChoiceField":{paddingRight:16}}}})}render(){return a.default.createElement(i.ChoiceGroup,d({styles:this.setStyles},this.props))}}o.UIChoiceGroup=u,u.__docgenInfo={description:`UIChoiceGroup component.
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup

@exports
@class UIChoiceGroup
@extends {React.Component<IChoiceGroupProps, {}>}`,methods:[{name:"setStyles",docblock:null,modifiers:[],params:[],returns:{type:{name:"Partial",elements:[{name:"IChoiceGroupStyles"}],raw:"Partial<IChoiceGroupStyles>"}}}],displayName:"UIChoiceGroup",props:{inline:{required:!1,tsType:{name:"boolean"},description:""}},composes:["IChoiceGroupProps"]}},"./src/components/UIChoiceGroup/index.tsx"(c,o,r){var s=this&&this.__createBinding||(Object.create?(function(i,l,t,n){n===void 0&&(n=t);var e=Object.getOwnPropertyDescriptor(l,t);(!e||("get"in e?!l.__esModule:e.writable||e.configurable))&&(e={enumerable:!0,get:function(){return l[t]}}),Object.defineProperty(i,n,e)}):(function(i,l,t,n){n===void 0&&(n=t),i[n]=l[t]})),a=this&&this.__exportStar||function(i,l){for(var t in i)t!=="default"&&!Object.prototype.hasOwnProperty.call(l,t)&&s(l,i,t)};Object.defineProperty(o,"__esModule",{value:!0}),a(r("./src/components/UIChoiceGroup/UIChoiceGroup.tsx"),o)},"./src/components/UILabel/UILabel.tsx"(c,o,r){var s=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(o,"__esModule",{value:!0}),o.UILabel=o.labelGlobalStyle=void 0;const a=s(r("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),i=r("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),l=r("./src/components/types.ts");o.labelGlobalStyle={fontWeight:"bold",fontSize:"13px",color:"var(--vscode-input-foreground)",padding:"4px 0"};class t extends a.default.Component{constructor(e){super(e)}render(){const e=u=>({root:[d({marginTop:25},o.labelGlobalStyle),u.disabled&&{opacity:"0.4"},u.required&&{selectors:{"::after":{content:l.REQUIRED_LABEL_INDICATOR,color:"var(--vscode-inputValidation-errorBorder)",paddingRight:12}}}]});return a.default.createElement(i.Label,p(d({},this.props),{styles:e}))}}o.UILabel=t,t.__docgenInfo={description:`UILabel component
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/label

@exports
@class UILabel
@extends {React.Component<ILabelProps, {}>}`,methods:[],displayName:"UILabel"}},"./src/components/UILabel/index.tsx"(c,o,r){var s=this&&this.__createBinding||(Object.create?(function(i,l,t,n){n===void 0&&(n=t);var e=Object.getOwnPropertyDescriptor(l,t);(!e||("get"in e?!l.__esModule:e.writable||e.configurable))&&(e={enumerable:!0,get:function(){return l[t]}}),Object.defineProperty(i,n,e)}):(function(i,l,t,n){n===void 0&&(n=t),i[n]=l[t]})),a=this&&this.__exportStar||function(i,l){for(var t in i)t!=="default"&&!Object.prototype.hasOwnProperty.call(l,t)&&s(l,i,t)};Object.defineProperty(o,"__esModule",{value:!0}),a(r("./src/components/UILabel/UILabel.tsx"),o)},"./src/components/types.ts"(c,o){Object.defineProperty(o,"__esModule",{value:!0}),o.REQUIRED_LABEL_INDICATOR=void 0,o.REQUIRED_LABEL_INDICATOR="' *' / ''"},"./stories/UIChoiceGroup.story.tsx"(c,o,r){var s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(o,"__esModule",{value:!0}),o.ChoiceGroup=void 0;const a=s(r("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),i=r("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),l=r("./src/components/UIChoiceGroup/index.tsx");o.default={title:"Basic Inputs/ChoiceGroup"};const t={options:[{key:"key1",text:"Option 1"},{key:"key2",text:"Option 2"},{key:"key3",text:"Option 3",disabled:!0}],defaultSelectedKey:"key2",label:"Title",onChange:(e,u)=>{console.log(u.text)}},n=()=>a.default.createElement(i.Stack,null,a.default.createElement(i.Stack,null,a.default.createElement(i.Text,{variant:"large",block:!0},"ChoiceGroup"),a.default.createElement(i.Stack,null,a.default.createElement(l.UIChoiceGroup,d({},t))),a.default.createElement(i.Stack,null,a.default.createElement(l.UIChoiceGroup,p(d({},t),{title:"Disabled",disabled:!0}))),a.default.createElement(i.Stack,null,a.default.createElement(l.UIChoiceGroup,p(d({},t),{title:"Required",required:!0}))),a.default.createElement(i.Stack,null,a.default.createElement(l.UIChoiceGroup,p(d({},t),{title:"Inline",inline:!0})))));o.ChoiceGroup=n}}]);})();