@greenbone/ui-lib 2.1.1 → 2.1.2
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/lib/cjs/components/Tag/Tag.js +1 -1
- package/lib/cjs/components/Tag/Tag.js.map +1 -1
- package/lib/cjs/components/Tag/Tag.module.css +1 -1
- package/lib/cjs/components/Tag/TagsCollapsed.js +1 -1
- package/lib/cjs/components/Tag/TagsCollapsed.js.map +1 -1
- package/lib/esm/components/Tag/Tag.js +1 -1
- package/lib/esm/components/Tag/Tag.js.map +1 -1
- package/lib/esm/components/Tag/Tag.module.css +1 -1
- package/lib/esm/components/Tag/TagsCollapsed.js +1 -1
- package/lib/esm/components/Tag/TagsCollapsed.js.map +1 -1
- package/package.json +1 -1
- package/types/src/components/Tag/Tag.d.ts +2 -1
- package/types/src/components/Tag/Tag.d.ts.map +1 -1
- package/types/src/components/Tag/TagsCollapsed.d.ts +4 -3
- package/types/src/components/Tag/TagsCollapsed.d.ts.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Tag",{enumerable:true,get:function(){return Tag}});const _jsxruntime=require("react/jsx-runtime");const _Badge=require("../Badge");const _theme=require("../../theme");const _TextWithTooltip=require("../TextWithTooltip");const _Tagmodulecss=/*#__PURE__*/_interop_require_default(require("./Tag.module.css"));function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}const Tag=_0=>{let{name,value}=_0,badgeProps=_object_without_properties(_0,["name","value"]);return(0,_jsxruntime.jsx)(_Badge.Badge,_object_spread_props(_object_spread({className:_Tagmodulecss.default["tag-name"],color:_theme.EThemeColors.NeutralLight},badgeProps),{children:(0,_jsxruntime.jsx)(_TextWithTooltip.TextWithTooltip,{tooltipProps:{multiline:true,style:{width:300}},classNameText:_Tagmodulecss.default.typo,classNameTooltip:_Tagmodulecss.default["tooltip-text"],text:`${name}: ${value}`,tooltip:`${name}: ${value}`,typoType:"small"})}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Tag",{enumerable:true,get:function(){return Tag}});const _jsxruntime=require("react/jsx-runtime");const _Badge=require("../Badge");const _theme=require("../../theme");const _TextWithTooltip=require("../TextWithTooltip");const _Tagmodulecss=/*#__PURE__*/_interop_require_default(require("./Tag.module.css"));function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}const Tag=_0=>{let{name,value,icon}=_0,badgeProps=_object_without_properties(_0,["name","value","icon"]);return(0,_jsxruntime.jsx)(_Badge.Badge,_object_spread_props(_object_spread({className:_Tagmodulecss.default["tag-name"],color:_theme.EThemeColors.NeutralLight},badgeProps),{children:(0,_jsxruntime.jsxs)("span",{className:_Tagmodulecss.default.content,children:[icon?(0,_jsxruntime.jsx)("span",{className:_Tagmodulecss.default["left-icon"],children:icon}):null,(0,_jsxruntime.jsx)(_TextWithTooltip.TextWithTooltip,{tooltipProps:{multiline:true,style:{width:300}},classNameText:_Tagmodulecss.default.typo,classNameTooltip:_Tagmodulecss.default["tooltip-text"],text:`${name}: ${value}`,tooltip:`${name}: ${value}`,typoType:"small"})]})}))};
|
|
2
2
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC } from \"react\"\nimport { Badge, TBadgeProps } from \"../Badge\"\nimport { EThemeColors } from \"../../theme\"\nimport { TextWithTooltip } from \"../TextWithTooltip\"\nimport classes from \"./Tag.module.css\"\n\nexport type TTagProps = Partial<TBadgeProps> & {\n name: string\n value: string\n}\nexport const Tag: FC<TTagProps> = ({ name, value, ...badgeProps }) => {\n return (\n <Badge className={classes[\"tag-name\"]} color={EThemeColors.NeutralLight} {...badgeProps}>\n <TextWithTooltip\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, ReactNode } from \"react\"\nimport { Badge, TBadgeProps } from \"../Badge\"\nimport { EThemeColors } from \"../../theme\"\nimport { TextWithTooltip } from \"../TextWithTooltip\"\nimport classes from \"./Tag.module.css\"\n\nexport type TTagProps = Partial<TBadgeProps> & {\n name: string\n value: string\n icon?: ReactNode\n}\nexport const Tag: FC<TTagProps> = ({ name, value, icon, ...badgeProps }) => {\n return (\n <Badge className={classes[\"tag-name\"]} color={EThemeColors.NeutralLight} {...badgeProps}>\n <span className={classes.content}>\n {icon ? <span className={classes[\"left-icon\"]}>{icon}</span> : null}\n <TextWithTooltip\n tooltipProps={{\n multiline: true,\n style: {\n width: 300,\n },\n }}\n classNameText={classes.typo}\n classNameTooltip={classes[\"tooltip-text\"]}\n text={`${name}: ${value}`}\n tooltip={`${name}: ${value}`}\n typoType={\"small\"}\n />\n </span>\n </Badge>\n )\n}\n"],"names":["Tag","name","value","icon","badgeProps","Badge","className","classes","color","EThemeColors","NeutralLight","span","content","TextWithTooltip","tooltipProps","multiline","style","width","classNameText","typo","classNameTooltip","text","tooltip","typoType"],"mappings":"oGAeaA,6CAAAA,2EAVsB,iCACN,8CACG,wFACZ,i4EAOb,MAAMA,IAAqB,QAAC,CAAEC,IAAI,CAAEC,KAAK,CAAEC,IAAI,CAAiB,IAAZC,kEACzD,MACE,oBAACC,YAAK,sCAACC,UAAWC,qBAAO,CAAC,WAAW,CAAEC,MAAOC,mBAAY,CAACC,YAAY,EAAMN,sBAC3E,qBAACO,QAAKL,UAAWC,qBAAO,CAACK,OAAO,WAC7BT,KAAO,oBAACQ,QAAKL,UAAWC,qBAAO,CAAC,YAAY,UAAGJ,OAAe,KAC/D,oBAACU,gCAAe,EACdC,aAAc,CACZC,UAAW,KACXC,MAAO,CACLC,MAAO,GACT,CACF,EACAC,cAAeX,qBAAO,CAACY,IAAI,CAC3BC,iBAAkBb,qBAAO,CAAC,eAAe,CACzCc,KAAM,CAAC,EAAEpB,KAAK,EAAE,EAAEC,MAAM,CAAC,CACzBoB,QAAS,CAAC,EAAErB,KAAK,EAAE,EAAEC,MAAM,CAAC,CAC5BqB,SAAU,eAKpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tag-name{margin-right:calc(.25rem*var(--mantine-scale))}.
|
|
1
|
+
.tag-name{margin-right:calc(.25rem*var(--mantine-scale));max-width:100%}.content{gap:var(--mantine-spacing-xs);min-width:0}.content,.left-icon{align-items:center;display:inline-flex}.left-icon{flex:0 0 auto}.text-wrapper{max-width:calc(18.75rem*var(--mantine-scale));overflow:hidden}.tooltip-text{word-break:break-word}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"TagsCollapsed",{enumerable:true,get:function(){return TagsCollapsed}});const _jsxruntime=require("react/jsx-runtime");const _react=require("react");const _core=require("@mantine/core");const _Badge=require("../Badge");const _Tooltip=require("../Tooltip");const _theme=require("../../theme");const _reacti18next=require("react-i18next");const _Tag=require("./Tag");const _TagsCollapsedmodulecss=/*#__PURE__*/_interop_require_default(require("./TagsCollapsed.module.css"));function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"TagsCollapsed",{enumerable:true,get:function(){return TagsCollapsed}});const _jsxruntime=require("react/jsx-runtime");const _react=require("react");const _core=require("@mantine/core");const _Badge=require("../Badge");const _Tooltip=require("../Tooltip");const _theme=require("../../theme");const _reacti18next=require("react-i18next");const _Tag=require("./Tag");const _TagsCollapsedmodulecss=/*#__PURE__*/_interop_require_default(require("./TagsCollapsed.module.css"));function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}const TagsCollapsed=({onClick,tags})=>{const{t}=(0,_reacti18next.useTranslation)();const[tooltipText,setTooltipText]=(0,_react.useState)("Show remaining tags");const tagsLength=tags.length;if(tagsLength<1){return null}return(0,_jsxruntime.jsxs)("div",{className:_TagsCollapsedmodulecss.default["tag-wrapper"],children:[(0,_jsxruntime.jsx)(_Tag.Tag,{name:tags[0].name,value:tags[0].value,icon:tags[0].icon,onClick:onClick}),tagsLength>1&&(0,_jsxruntime.jsx)("div",{className:_TagsCollapsedmodulecss.default.count,children:(0,_jsxruntime.jsxs)(_core.Popover,{onOpen:()=>setTooltipText("Hide remaining tags"),onClose:()=>setTooltipText("Show remaining tags"),children:[(0,_jsxruntime.jsx)(_core.Popover.Target,{children:(0,_jsxruntime.jsx)("div",{children:(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{label:t(tooltipText),children:(0,_jsxruntime.jsx)(_Badge.Badge,{color:_theme.EThemeColors.NeutralLight,className:_TagsCollapsedmodulecss.default["count-badge"],children:(0,_jsxruntime.jsxs)("div",{children:["+",tagsLength-1]})})})})}),(0,_jsxruntime.jsx)(_core.Popover.Dropdown,{p:"0.5em",children:(0,_jsxruntime.jsx)("div",{className:_TagsCollapsedmodulecss.default["listed-tags-container"],children:[...tags].slice(1).map(tag=>(0,_jsxruntime.jsx)(_Tag.Tag,{name:tag.name,value:tag.value,icon:tag.icon,className:_TagsCollapsedmodulecss.default["listed-tag"]},`${tag.name}:${tag.value}`))})})]})})]})};
|
|
2
2
|
//# sourceMappingURL=TagsCollapsed.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, ReactNode, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype TTagValue = {\n name: string\n value: string\n icon?: ReactNode\n}\n\nexport type TTagsCollapsedProps = {\n onClick?: MouseEventHandler\n tags: Array<TTagValue>\n}\n\nconst TagsCollapsed: FC<TTagsCollapsedProps> = ({ onClick, tags }) => {\n const { t } = useTranslation()\n const [tooltipText, setTooltipText] = useState(\"Show remaining tags\")\n const tagsLength = tags.length\n\n if (tagsLength < 1) {\n return null\n }\n\n return (\n <div className={classes[\"tag-wrapper\"]}>\n <Tag name={tags[0].name} value={tags[0].value} icon={tags[0].icon} onClick={onClick} />\n\n {tagsLength > 1 && (\n <div className={classes.count}>\n <Popover\n onOpen={() => setTooltipText(\"Hide remaining tags\")}\n onClose={() => setTooltipText(\"Show remaining tags\")}\n >\n <Popover.Target>\n <div>\n <Tooltip label={t(tooltipText)}>\n <Badge color={EThemeColors.NeutralLight} className={classes[\"count-badge\"]}>\n <div>+{tagsLength - 1}</div>\n </Badge>\n </Tooltip>\n </div>\n </Popover.Target>\n\n <Popover.Dropdown p=\"0.5em\">\n <div className={classes[\"listed-tags-container\"]}>\n {[...tags].slice(1).map((tag) => (\n <Tag\n key={`${tag.name}:${tag.value}`}\n name={tag.name}\n value={tag.value}\n icon={tag.icon}\n className={classes[\"listed-tag\"]}\n />\n ))}\n </div>\n </Popover.Dropdown>\n </Popover>\n </div>\n )}\n </div>\n )\n}\n\nexport { TagsCollapsed }\n"],"names":["TagsCollapsed","onClick","tags","t","useTranslation","tooltipText","setTooltipText","useState","tagsLength","length","div","className","classes","Tag","name","value","icon","count","Popover","onOpen","onClose","Target","Tooltip","label","Badge","color","EThemeColors","NeutralLight","Dropdown","p","slice","map","tag"],"mappings":"oGAyESA,uDAAAA,qFArEkD,6BACnC,sCACF,mCACE,mCACK,2CACE,oCACX,qFACA,mHAapB,MAAMA,cAAyC,CAAC,CAAEC,OAAO,CAAEC,IAAI,CAAE,IAC/D,KAAM,CAAEC,CAAC,CAAE,CAAGC,GAAAA,4BAAc,IAC5B,KAAM,CAACC,YAAaC,eAAe,CAAGC,GAAAA,eAAQ,EAAC,uBAC/C,MAAMC,WAAaN,KAAKO,MAAM,CAE9B,GAAID,WAAa,EAAG,CAClB,OAAO,IACT,CAEA,MACE,qBAACE,OAAIC,UAAWC,+BAAO,CAAC,cAAc,WACpC,oBAACC,QAAG,EAACC,KAAMZ,IAAI,CAAC,EAAE,CAACY,IAAI,CAAEC,MAAOb,IAAI,CAAC,EAAE,CAACa,KAAK,CAAEC,KAAMd,IAAI,CAAC,EAAE,CAACc,IAAI,CAAEf,QAASA,UAE3EO,WAAa,GACZ,oBAACE,OAAIC,UAAWC,+BAAO,CAACK,KAAK,UAC3B,qBAACC,aAAO,EACNC,OAAQ,IAAMb,eAAe,uBAC7Bc,QAAS,IAAMd,eAAe,iCAE9B,oBAACY,aAAO,CAACG,MAAM,WACb,oBAACX,gBACC,oBAACY,gBAAO,EAACC,MAAOpB,EAAEE,sBAChB,oBAACmB,YAAK,EAACC,MAAOC,mBAAY,CAACC,YAAY,CAAEhB,UAAWC,+BAAO,CAAC,cAAc,UACxE,qBAACF,iBAAI,IAAEF,WAAa,aAM5B,oBAACU,aAAO,CAACU,QAAQ,EAACC,EAAE,iBAClB,oBAACnB,OAAIC,UAAWC,+BAAO,CAAC,wBAAwB,UAC7C,IAAIV,KAAK,CAAC4B,KAAK,CAAC,GAAGC,GAAG,CAAC,AAACC,KACvB,oBAACnB,QAAG,EAEFC,KAAMkB,IAAIlB,IAAI,CACdC,MAAOiB,IAAIjB,KAAK,CAChBC,KAAMgB,IAAIhB,IAAI,CACdL,UAAWC,+BAAO,CAAC,aAAa,EAJ3B,CAAC,EAAEoB,IAAIlB,IAAI,CAAC,CAAC,EAAEkB,IAAIjB,KAAK,CAAC,CAAC,cAcnD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx}from"react/jsx-runtime";import{Badge}from"../Badge";import{EThemeColors}from"../../theme";import{TextWithTooltip}from"../TextWithTooltip";import classes from"./Tag.module.css";export const Tag=_0=>{let{name,value}=_0,badgeProps=_object_without_properties(_0,["name","value"]);return _jsx(Badge,_object_spread_props(_object_spread({className:classes["tag-name"],color:EThemeColors.NeutralLight},badgeProps),{children:_jsx(TextWithTooltip,{tooltipProps:{multiline:true,style:{width:300}},classNameText:classes.typo,classNameTooltip:classes["tooltip-text"],text:`${name}: ${value}`,tooltip:`${name}: ${value}`,typoType:"small"})}))};
|
|
1
|
+
function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target={},sourceKeys,key,i;if(typeof Reflect!=="undefined"&&Reflect.ownKeys){sourceKeys=Reflect.ownKeys(Object(source));for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){sourceKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.getOwnPropertyNames(source),key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}return target}import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Badge}from"../Badge";import{EThemeColors}from"../../theme";import{TextWithTooltip}from"../TextWithTooltip";import classes from"./Tag.module.css";export const Tag=_0=>{let{name,value,icon}=_0,badgeProps=_object_without_properties(_0,["name","value","icon"]);return _jsx(Badge,_object_spread_props(_object_spread({className:classes["tag-name"],color:EThemeColors.NeutralLight},badgeProps),{children:_jsxs("span",{className:classes.content,children:[icon?_jsx("span",{className:classes["left-icon"],children:icon}):null,_jsx(TextWithTooltip,{tooltipProps:{multiline:true,style:{width:300}},classNameText:classes.typo,classNameTooltip:classes["tooltip-text"],text:`${name}: ${value}`,tooltip:`${name}: ${value}`,typoType:"small"})]})}))};
|
|
2
2
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC } from \"react\"\nimport { Badge, TBadgeProps } from \"../Badge\"\nimport { EThemeColors } from \"../../theme\"\nimport { TextWithTooltip } from \"../TextWithTooltip\"\nimport classes from \"./Tag.module.css\"\n\nexport type TTagProps = Partial<TBadgeProps> & {\n name: string\n value: string\n}\nexport const Tag: FC<TTagProps> = ({ name, value, ...badgeProps }) => {\n return (\n <Badge className={classes[\"tag-name\"]} color={EThemeColors.NeutralLight} {...badgeProps}>\n <TextWithTooltip\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, ReactNode } from \"react\"\nimport { Badge, TBadgeProps } from \"../Badge\"\nimport { EThemeColors } from \"../../theme\"\nimport { TextWithTooltip } from \"../TextWithTooltip\"\nimport classes from \"./Tag.module.css\"\n\nexport type TTagProps = Partial<TBadgeProps> & {\n name: string\n value: string\n icon?: ReactNode\n}\nexport const Tag: FC<TTagProps> = ({ name, value, icon, ...badgeProps }) => {\n return (\n <Badge className={classes[\"tag-name\"]} color={EThemeColors.NeutralLight} {...badgeProps}>\n <span className={classes.content}>\n {icon ? <span className={classes[\"left-icon\"]}>{icon}</span> : null}\n <TextWithTooltip\n tooltipProps={{\n multiline: true,\n style: {\n width: 300,\n },\n }}\n classNameText={classes.typo}\n classNameTooltip={classes[\"tooltip-text\"]}\n text={`${name}: ${value}`}\n tooltip={`${name}: ${value}`}\n typoType={\"small\"}\n />\n </span>\n </Badge>\n )\n}\n"],"names":["Badge","EThemeColors","TextWithTooltip","classes","Tag","name","value","icon","badgeProps","className","color","NeutralLight","span","content","tooltipProps","multiline","style","width","classNameText","typo","classNameTooltip","text","tooltip","typoType"],"mappings":"g1EAKA,QAASA,KAAK,KAAqB,UAAU,AAC7C,QAASC,YAAY,KAAQ,aAAa,AAC1C,QAASC,eAAe,KAAQ,oBAAoB,AACpD,QAAOC,YAAa,kBAAkB,AAOtC,QAAO,MAAMC,IAAqB,QAAC,CAAEC,IAAI,CAAEC,KAAK,CAAEC,IAAI,CAAiB,IAAZC,kEACzD,OACE,KAACR,2CAAMS,UAAWN,OAAO,CAAC,WAAW,CAAEO,MAAOT,aAAaU,YAAY,EAAMH,sBAC3E,MAACI,QAAKH,UAAWN,QAAQU,OAAO,WAC7BN,KAAO,KAACK,QAAKH,UAAWN,OAAO,CAAC,YAAY,UAAGI,OAAe,KAC/D,KAACL,iBACCY,aAAc,CACZC,UAAW,KACXC,MAAO,CACLC,MAAO,GACT,CACF,EACAC,cAAef,QAAQgB,IAAI,CAC3BC,iBAAkBjB,OAAO,CAAC,eAAe,CACzCkB,KAAM,CAAC,EAAEhB,KAAK,EAAE,EAAEC,MAAM,CAAC,CACzBgB,QAAS,CAAC,EAAEjB,KAAK,EAAE,EAAEC,MAAM,CAAC,CAC5BiB,SAAU,eAKpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tag-name{margin-right:calc(.25rem*var(--mantine-scale))}.
|
|
1
|
+
.tag-name{margin-right:calc(.25rem*var(--mantine-scale));max-width:100%}.content{gap:var(--mantine-spacing-xs);min-width:0}.content,.left-icon{align-items:center;display:inline-flex}.left-icon{flex:0 0 auto}.text-wrapper{max-width:calc(18.75rem*var(--mantine-scale));overflow:hidden}.tooltip-text{word-break:break-word}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Popover}from"@mantine/core";import{Badge}from"../Badge";import{Tooltip}from"../Tooltip";import{EThemeColors}from"../../theme";import{useTranslation}from"react-i18next";import{Tag}from"./Tag";import classes from"./TagsCollapsed.module.css";const TagsCollapsed=({onClick,tags})=>{const{t}=useTranslation();const[tooltipText,setTooltipText]=useState("Show remaining tags");const tagsLength=tags.length;if(tagsLength<1){return null}return _jsxs("div",{className:classes["tag-wrapper"],children:[_jsx(Tag,{name:tags[0].name,value:tags[0].value,icon:tags[0].icon,onClick:onClick}),tagsLength>1&&_jsx("div",{className:classes.count,children:_jsxs(Popover,{onOpen:()=>setTooltipText("Hide remaining tags"),onClose:()=>setTooltipText("Show remaining tags"),children:[_jsx(Popover.Target,{children:_jsx("div",{children:_jsx(Tooltip,{label:t(tooltipText),children:_jsx(Badge,{color:EThemeColors.NeutralLight,className:classes["count-badge"],children:_jsxs("div",{children:["+",tagsLength-1]})})})})}),_jsx(Popover.Dropdown,{p:"0.5em",children:_jsx("div",{className:classes["listed-tags-container"],children:[...tags].slice(1).map(tag=>_jsx(Tag,{name:tag.name,value:tag.value,icon:tag.icon,className:classes["listed-tag"]},`${tag.name}:${tag.value}`))})})]})})]})};export{TagsCollapsed};
|
|
2
2
|
//# sourceMappingURL=TagsCollapsed.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, ReactNode, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype TTagValue = {\n name: string\n value: string\n icon?: ReactNode\n}\n\nexport type TTagsCollapsedProps = {\n onClick?: MouseEventHandler\n tags: Array<TTagValue>\n}\n\nconst TagsCollapsed: FC<TTagsCollapsedProps> = ({ onClick, tags }) => {\n const { t } = useTranslation()\n const [tooltipText, setTooltipText] = useState(\"Show remaining tags\")\n const tagsLength = tags.length\n\n if (tagsLength < 1) {\n return null\n }\n\n return (\n <div className={classes[\"tag-wrapper\"]}>\n <Tag name={tags[0].name} value={tags[0].value} icon={tags[0].icon} onClick={onClick} />\n\n {tagsLength > 1 && (\n <div className={classes.count}>\n <Popover\n onOpen={() => setTooltipText(\"Hide remaining tags\")}\n onClose={() => setTooltipText(\"Show remaining tags\")}\n >\n <Popover.Target>\n <div>\n <Tooltip label={t(tooltipText)}>\n <Badge color={EThemeColors.NeutralLight} className={classes[\"count-badge\"]}>\n <div>+{tagsLength - 1}</div>\n </Badge>\n </Tooltip>\n </div>\n </Popover.Target>\n\n <Popover.Dropdown p=\"0.5em\">\n <div className={classes[\"listed-tags-container\"]}>\n {[...tags].slice(1).map((tag) => (\n <Tag\n key={`${tag.name}:${tag.value}`}\n name={tag.name}\n value={tag.value}\n icon={tag.icon}\n className={classes[\"listed-tag\"]}\n />\n ))}\n </div>\n </Popover.Dropdown>\n </Popover>\n </div>\n )}\n </div>\n )\n}\n\nexport { TagsCollapsed }\n"],"names":["useState","Popover","Badge","Tooltip","EThemeColors","useTranslation","Tag","classes","TagsCollapsed","onClick","tags","t","tooltipText","setTooltipText","tagsLength","length","div","className","name","value","icon","count","onOpen","onClose","Target","label","color","NeutralLight","Dropdown","p","slice","map","tag"],"mappings":"wDAIA,QAA2CA,QAAQ,KAAQ,OAAO,AAClE,QAASC,OAAO,KAAQ,eAAe,AACvC,QAASC,KAAK,KAAQ,UAAU,AAChC,QAASC,OAAO,KAAQ,YAAY,AACpC,QAASC,YAAY,KAAQ,aAAa,AAC1C,QAASC,cAAc,KAAQ,eAAe,AAC9C,QAASC,GAAG,KAAQ,OAAO,AAC3B,QAAOC,YAAa,4BAA4B,CAahD,MAAMC,cAAyC,CAAC,CAAEC,OAAO,CAAEC,IAAI,CAAE,IAC/D,KAAM,CAAEC,CAAC,CAAE,CAAGN,iBACd,KAAM,CAACO,YAAaC,eAAe,CAAGb,SAAS,uBAC/C,MAAMc,WAAaJ,KAAKK,MAAM,CAE9B,GAAID,WAAa,EAAG,CAClB,OAAO,IACT,CAEA,OACE,MAACE,OAAIC,UAAWV,OAAO,CAAC,cAAc,WACpC,KAACD,KAAIY,KAAMR,IAAI,CAAC,EAAE,CAACQ,IAAI,CAAEC,MAAOT,IAAI,CAAC,EAAE,CAACS,KAAK,CAAEC,KAAMV,IAAI,CAAC,EAAE,CAACU,IAAI,CAAEX,QAASA,UAE3EK,WAAa,GACZ,KAACE,OAAIC,UAAWV,QAAQc,KAAK,UAC3B,MAACpB,SACCqB,OAAQ,IAAMT,eAAe,uBAC7BU,QAAS,IAAMV,eAAe,iCAE9B,KAACZ,QAAQuB,MAAM,WACb,KAACR,gBACC,KAACb,SAAQsB,MAAOd,EAAEC,sBAChB,KAACV,OAAMwB,MAAOtB,aAAauB,YAAY,CAAEV,UAAWV,OAAO,CAAC,cAAc,UACxE,MAACS,iBAAI,IAAEF,WAAa,aAM5B,KAACb,QAAQ2B,QAAQ,EAACC,EAAE,iBAClB,KAACb,OAAIC,UAAWV,OAAO,CAAC,wBAAwB,UAC7C,IAAIG,KAAK,CAACoB,KAAK,CAAC,GAAGC,GAAG,CAAC,AAACC,KACvB,KAAC1B,KAECY,KAAMc,IAAId,IAAI,CACdC,MAAOa,IAAIb,KAAK,CAChBC,KAAMY,IAAIZ,IAAI,CACdH,UAAWV,OAAO,CAAC,aAAa,EAJ3B,CAAC,EAAEyB,IAAId,IAAI,CAAC,CAAC,EAAEc,IAAIb,KAAK,CAAC,CAAC,cAcnD,CAEA,QAASX,aAAa,CAAE"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { FC } from "react";
|
|
1
|
+
import { FC, ReactNode } from "react";
|
|
2
2
|
import { TBadgeProps } from "../Badge";
|
|
3
3
|
export type TTagProps = Partial<TBadgeProps> & {
|
|
4
4
|
name: string;
|
|
5
5
|
value: string;
|
|
6
|
+
icon?: ReactNode;
|
|
6
7
|
};
|
|
7
8
|
export declare const Tag: FC<TTagProps>;
|
|
8
9
|
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAS,WAAW,EAAE,MAAM,UAAU,CAAA;AAK7C,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG;IAC7C,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AACD,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,SAAS,CAqB7B,CAAA"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { FC, MouseEventHandler } from "react";
|
|
2
|
-
type
|
|
1
|
+
import { FC, MouseEventHandler, ReactNode } from "react";
|
|
2
|
+
type TTagValue = {
|
|
3
3
|
name: string;
|
|
4
4
|
value: string;
|
|
5
|
+
icon?: ReactNode;
|
|
5
6
|
};
|
|
6
7
|
export type TTagsCollapsedProps = {
|
|
7
8
|
onClick?: MouseEventHandler;
|
|
8
|
-
tags: Array<
|
|
9
|
+
tags: Array<TTagValue>;
|
|
9
10
|
};
|
|
10
11
|
declare const TagsCollapsed: FC<TTagsCollapsedProps>;
|
|
11
12
|
export { TagsCollapsed };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagsCollapsed.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TagsCollapsed.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AASlE,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACvB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,mBAAmB,CA+C1C,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
|