@bizhermit/react-sdk/elements/caption.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var l=Object.getOwnPropertyDescriptor(t,n);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,l)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importDefault(require("react")),css_var_1=__importStar(require("../styles/css-var")),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),label_1=__importDefault(require("./label")),cn="bh-cap",Caption=e=>react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,cn),"data-signal":e.$signal,"data-flow":e.$flow??"row","data-border":e.$border},react_1.default.createElement("div",{className:`${cn}-lbl`,style:{width:e.$width}},string_utils_1.default.isString(e.$label)?react_1.default.createElement(label_1.default,null,e.$label):e.$label),react_1.default.createElement("div",{className:`${cn}-body`},e.children),Style),Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${cn} {\n  ${css_var_1.CssPV.flex}\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  flex: none;\n  overflow: visible;\n  min-height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2);\n  border-radius: ${css_var_1.default.bdr};\n}\n.${cn}[data-flow="row"] {\n  flex-direction: row;\n  align-items: center;\n}\n.${cn}[data-flow="column"] {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.${cn}-lbl {\n  box-sizing: border-box;\n  position: relative;\n  flex: none;\n  font-weight: bold;\n  padding-top: 2px;\n}\n.${cn}-body {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row wrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: 1;\n  overflow: visible;\n}\n.${cn}[data-flow="column"] > .${cn}-body {\n  margin-left: 10px;\n}\n.${cn}[data-border="true"] {\n  border: 1px solid ${css_var_1.default.bdc};\n}\n${(0,css_var_1.signalIterator)(((e,t,n)=>`\n.${cn}${n} > .${cn}-lbl {\n  color: ${t.fc};\n}\n.${cn}${n}[data-border="true"] {\n  border: 1px solid ${t.bdc};\n}`)).join("")}\n`));exports.default=Caption;