@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/design/banners/pageBanner/pageBanners.css

@@ -0,0 +1,322 @@
+/* Popovers */
+@keyframes slideInLeft {
+  0% {
+    margin-left: -100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: 10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+@keyframes slideInRight {
+  0% {
+    margin-left: 100vw;
+    opacity: 0;
+  }
+  80% {
+    margin-left: -10px;
+    opacity: 1;
+  }
+  100% {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+.autoHide_1_none {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover {
+  animation: fadeOut 1s;
+  animation-delay: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_1_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_1_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_1_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_1_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 1s;
+  animation-delay: 0s, 2s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_none {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover {
+  animation: fadeOut 3s;
+  animation-delay: 4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_3_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_3_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_3_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_3_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 3s;
+  animation-delay: 0s, 4s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_none {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover {
+  animation: fadeOut 5s;
+  animation-delay: 6s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_5_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_5_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_5_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_5_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 5s;
+  animation-delay: 0s, 6s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_none {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover {
+  animation: fadeOut 10s;
+  animation-delay: 10s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.autoHide_10_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .autoHide_10_growOnHover:hover {
+    transition: none;
+  }
+}
+.autoHide_10_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+.autoHide_10_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards, fadeOut 10s;
+  animation-delay: 0s, 10s;
+  animation-iteration-count: 1, 1;
+  animation-fill-mode: forwards, forwards;
+}
+
+.noAutoHide_growOnHover:hover {
+  transform: scale(var(--bannerGrowOnHoverScale, 1.005));
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .noAutoHide_growOnHover:hover {
+    transition: none;
+  }
+}
+.noAutoHide_slideInLeft {
+  animation: slideInLeft 0.8s ease-out forwards;
+}
+.noAutoHide_slideInRight {
+  animation: slideInRight 0.8s ease-out forwards;
+}
+
+.pageBanner {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 20px;
+  font-size: 16px;
+  position: relative;
+  border-color: var(--bannerBorderColor, transparent);
+  border-radius: var(--bannerBorderRadius, 5px);
+  min-height: 44px;
+  box-sizing: border-box;
+}
+.pageBanner h3 {
+  margin: 0;
+}
+.pageBanner fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.pageBanner .pageBannerContent {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex: 1;
+}
+.pageBanner .closeBannerButton {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 44px;
+  height: 44px;
+  text-align: right;
+  font-size: 20px;
+  background: none;
+  border: none;
+  color: inherit;
+}
+.pageBanner a {
+  color: currentColor;
+  text-decoration: underline;
+  font-size: inherit;
+}
+.pageBanner .pageBannerMainIcon {
+  width: var(--bannerIconSize, 24px);
+}
+.pageBanner .pageBannerMainIcon .icon {
+  height: var(--bannerIconSize, 24px);
+  text-align: center;
+  font-size: var(--bannerIconSize, 24px);
+}
+.pageBanner {
+  /* Width variants */
+}
+.pageBanner.width_sm {
+  width: var(--bannerWidthSm, 35vw);
+}
+.pageBanner.width_md {
+  width: var(--bannerWidthMd, 50vw);
+}
+.pageBanner.width_lg {
+  width: var(--bannerWidthLg, 85vw);
+}
+.pageBanner {
+  /* Display modes */
+}
+.pageBanner.fixed {
+  position: fixed;
+  z-index: 2000;
+  /* Positions */
+}
+.pageBanner.fixed.topRight {
+  top: var(--bannerStandardOffset, 20px);
+  right: var(--bannerStandardOffset, 20px);
+}
+.pageBanner.fixed.topCentre {
+  top: var(--bannerStandardOffset, 20px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pageBanner.fixed.bottomRight {
+  bottom: var(--bannerStandardOffset, 20px);
+  right: var(--bannerStandardOffset, 20px);
+}
+.pageBanner.fixed.bottomLeft {
+  bottom: var(--bannerStandardOffset, 20px);
+  left: var(--bannerStandardOffset, 20px);
+}
+.pageBanner.inline {
+  position: relative;
+  width: auto;
+}
+.pageBanner {
+  /* Types */
+}
+.pageBanner.alert.backgroundFill_primary {
+  background: var(--bannerAlertBg, #FFDE03);
+  color: var(--bannerAlertFgColor, #000);
+}
+.pageBanner.alert.backgroundFill_secondary {
+  background: var(--bannerAlertBgSecondary, rgb(255, 235.3571428571, 105));
+  color: var(--bannerAlertFgColor, #000);
+  border: 1px solid var(--bannerAlertSecondaryBorder, #FFDE03);
+}
+.pageBanner.info.backgroundFill_primary {
+  background: var(--bannerInfoBg, #094DB3);
+  color: var(--bannerInfoFgColor, #fff);
+}
+.pageBanner.info.backgroundFill_secondary {
+  background: var(--bannerInfoBgSecondary, rgb(94.0904255319, 155.2180851064, 246.9095744681));
+  color: var(--bannerInfoFgSecondaryColor, #000);
+  border: 1px solid var(--bannerInfoSecondaryBorder, #094DB3);
+}
+.pageBanner.warn.backgroundFill_primary {
+  background: var(--bannerWarnBg, #F5A623);
+  color: var(--bannerWarnFgColor, #000);
+}
+.pageBanner.warn.backgroundFill_secondary {
+  background: var(--bannerWarnBgSecondary, rgb(248.3260869565, 195.602173913, 108.1739130435));
+  color: var(--bannerWarnFgColor, #000);
+  border: 1px solid var(--bannerWarnSecondaryBorder, #F5A623);
+}
+.pageBanner.error.backgroundFill_primary {
+  background: var(--bannerErrorBg, #BB0000);
+  color: var(--bannerErrorFgColor, #fff);
+}
+.pageBanner.error.backgroundFill_secondary {
+  background: var(--bannerErrorBgSecondary, #ff5555);
+  color: var(--bannerErrorFgSecondaryColor, #000);
+  border: 1px solid var(--bannerErrorSecondaryBorder, #BB0000);
+}
+.pageBanner.success.backgroundFill_primary {
+  background: var(--bannerSuccessBg, #008243);
+  color: var(--bannerSuccessFgColor, #fff);
+}
+.pageBanner.success.backgroundFill_secondary {
+  background: var(--bannerSuccessBgSecondary, rgb(0, 232, 119.5692307692));
+  color: var(--bannerSuccessFgSecondaryColor, #000);
+  border: 1px solid var(--bannerSuccessSecondaryBorder, #008243);
+}

package/dist/esm/components/design/card/Card.js

@@ -0,0 +1,30 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import './card.css';
+import { CardHeader } from './cardHeader/CardHeader';
+export const Card = ({
+  id,
+  header,
+  children,
+  footer,
+  customCssClass,
+  restrictHeight,
+  size = 's'
+}) => {
+  const cardId = id || `card_${Date.now()}`;
+  const heightCssClass = restrictHeight ? `card_height_${restrictHeight}` : '';
+  const sizeCssClass = `card_${size}`;
+  return /*#__PURE__*/React.createElement("div", {
+    id: cardId,
+    className: `card ${sizeCssClass} ${heightCssClass} ${customCssClass || ''}`
+  }, header && /*#__PURE__*/React.createElement(CardHeader, _extends({}, header, {
+    cardId: cardId
+  })), /*#__PURE__*/React.createElement("section", {
+    className: "cardContent"
+  }, children), footer && /*#__PURE__*/React.createElement("footer", {
+    className: "cardFooter"
+  }, footer));
+};
+//# sourceMappingURL=Card.js.map

package/dist/esm/components/design/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":["_extends","React","CardHeader","Card","id","header","children","footer","customCssClass","restrictHeight","size","cardId","Date","now","heightCssClass","sizeCssClass","createElement","className"],"sources":["../../../../../src/components/design/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport './card.scss';\nimport { CardHeaderProps, CardHeader } from './cardHeader/CardHeader';\n\nexport interface CardProps {\n  id: string;\n  header?: CardHeaderProps;\n  footer?: string | React.ReactElement;\n  customCssClass?: string;\n  restrictHeight?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';\n  children?: React.ReactNode;\n}\n\nexport const Card: React.FC<CardProps> = (\n  {\n    id,\n    header,\n    children,\n    footer,\n    customCssClass,\n    restrictHeight,\n    size = 's'\n  }\n) => {\n  const cardId = id || `card_${ Date.now() }`;\n  const heightCssClass = restrictHeight ? `card_height_${ restrictHeight }` : '';\n  const sizeCssClass = `card_${ size }`;\n\n  return (\n    <div id={ cardId } className={ `card ${ sizeCssClass } ${ heightCssClass } ${ customCssClass || '' }` }>\n      {\n        header && <CardHeader { ...header } cardId={ cardId } />\n      }\n\n      <section className=\"cardContent\">\n        { children }\n      </section>\n      {\n        footer\n        && (\n          <footer className=\"cardFooter\">\n            { footer }\n          </footer>\n        )\n      }\n\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AAEzB,OAAO,aAAa;AACpB,SAA0BC,UAAU,QAAQ,yBAAyB;AAYrE,OAAO,MAAMC,IAAyB,GAAGA,CACvC;EACEC,EAAE;EACFC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNC,cAAc;EACdC,cAAc;EACdC,IAAI,GAAG;AACT,CAAC,KACE;EACH,MAAMC,MAAM,GAAGP,EAAE,IAAI,QAASQ,IAAI,CAACC,GAAG,CAAC,CAAC,EAAG;EAC3C,MAAMC,cAAc,GAAGL,cAAc,GAAG,eAAgBA,cAAc,EAAG,GAAG,EAAE;EAC9E,MAAMM,YAAY,GAAG,QAASL,IAAI,EAAG;EAErC,oBACET,KAAA,CAAAe,aAAA;IAAKZ,EAAE,EAAGO,MAAQ;IAACM,SAAS,EAAG,QAASF,YAAY,IAAMD,cAAc,IAAMN,cAAc,IAAI,EAAE;EAAK,GAEnGH,MAAM,iBAAIJ,KAAA,CAAAe,aAAA,CAACd,UAAU,EAAAF,QAAA,KAAMK,MAAM;IAAGM,MAAM,EAAGA;EAAQ,EAAE,CAAC,eAG1DV,KAAA,CAAAe,aAAA;IAASC,SAAS,EAAC;EAAa,GAC5BX,QACK,CAAC,EAERC,MAAM,iBAEJN,KAAA,CAAAe,aAAA;IAAQC,SAAS,EAAC;EAAY,GAC1BV,MACI,CAIT,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/card/card.css

@@ -0,0 +1,96 @@
+/* Popovers */
+/* BUTTONS */
+.card {
+  min-width: var(--cardMinWidth, 450px);
+  max-width: var(--cardMaxWidth, 450px);
+  border: var(--cardBorder, 1px solid #eef2f4);
+  border-radius: var(--cardBorderRadius, 3px);
+  box-shadow: var(--cardBoxShadow, 0 0 5px 0 #eef2f4);
+  background: var(--cardBg, transparent);
+  margin: var(--cardMargin, 0 0 20px);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+}
+.card.card_xs {
+  min-width: var(--cardMinWidthXSmall, 150px);
+  max-width: var(--cardMaxWidthXSmall, 150px);
+}
+.card.card_s {
+  min-width: var(--cardMinWidthSmall, 300px);
+  max-width: var(--cardMaxWidthSmall, 300px);
+}
+.card.card_m {
+  min-width: var(--cardMinWidthMedium, 450px);
+  max-width: var(--cardMaxWidthMedium, 450px);
+}
+.card.card_l {
+  min-width: var(--cardMinWidthLarge, 600px);
+  max-width: var(--cardMaxWidthLarge, 600px);
+}
+.card.card_xl {
+  min-width: var(--cardMinWidthXLarge, 750px);
+  max-width: var(--cardMaxWidthXLarge, 750px);
+}
+.card.card_auto {
+  min-width: 0;
+  max-width: none;
+}
+.card .cardContent {
+  flex: 1;
+  box-sizing: border-box;
+  padding: var(--cardContentPadding, 20px);
+  max-height: none;
+  opacity: 1;
+  transition: all 1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .card .cardContent {
+    transition: none;
+  }
+}
+.card .cardContent {
+  background: var(--cardContentBg, #fff);
+  color: var(--cardContentFg, #222);
+}
+.card .cardFooter {
+  padding: var(--cardFooterPadding, 10px 20px);
+  background: var(--cardFooterBg, #fff);
+  color: var(--cardFooterFg, #222);
+  box-shadow: var(--cardFooterBoxShadow, 0 -1px 5px 0 #eef2f4);
+  border-radius: var(--cardFooterBorderRadius, 0 0 3px 3px);
+  border-top: var(--cardFooterBorder, 1px solid #d3dee4);
+}
+.card.card_height_xs header.cardHeader button {
+  height: 30px;
+  font-size: 0.7em;
+  padding: 0 8px;
+}
+.card.card_height_xs .cardContent {
+  max-height: 80px;
+  overflow: auto;
+  padding: 8px;
+}
+.card.card_height_s header.cardHeader button {
+  height: 36px;
+  font-size: 0.8em;
+  padding: 0 10px;
+}
+.card.card_height_s .cardContent {
+  max-height: 150px;
+  overflow: auto;
+  padding: 10px;
+}
+.card.card_height_m .cardContent {
+  max-height: 300px;
+  overflow: auto;
+}
+.card.card_height_l .cardContent {
+  max-height: 450px;
+  overflow: auto;
+}
+.card.card_height_xl .cardContent {
+  max-height: 600px;
+  overflow: auto;
+}

package/dist/esm/components/design/card/cardContent/CardContentLine.js

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { Icon } from '../../icons/basicIcon/Icon';
+import { LogoLink } from '../../logos/LogoLink';
+import { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';
+import { StatusLightsBar } from '../../statusIndicators/statusLightsBar/StatusLightsBar';
+import './cardContentLine.css';
+export const CardContentLine = ({
+  id,
+  icon,
+  logo,
+  graphic,
+  owner,
+  title,
+  hideTitle = false,
+  onLineClick = () => {},
+  children,
+  statuses
+}) => {
+  const handleLineClick = () => {
+    onLineClick(id);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "cardContentLine",
+    title: title
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "cardContentLineButton",
+    onClick: handleLineClick
+  }, icon && /*#__PURE__*/React.createElement(Icon, icon), logo && /*#__PURE__*/React.createElement(LogoLink, logo), graphic && /*#__PURE__*/React.createElement("img", {
+    src: graphic.imageUrl,
+    className: "logoImage",
+    alt: `${graphic.label}`
+  }), /*#__PURE__*/React.createElement("span", {
+    className: hideTitle ? 'sr-only' : 'cardContentLineTitle'
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: "cardContentLineContent"
+  }, children), statuses && /*#__PURE__*/React.createElement(StatusLightsBar, statuses), owner && /*#__PURE__*/React.createElement(OwnerDetailsPopup, {
+    owner: owner
+  }));
+};
+//# sourceMappingURL=CardContentLine.js.map

package/dist/esm/components/design/card/cardContent/CardContentLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardContentLine.js","names":["React","Icon","LogoLink","OwnerDetailsPopup","StatusLightsBar","CardContentLine","id","icon","logo","graphic","owner","title","hideTitle","onLineClick","children","statuses","handleLineClick","createElement","className","type","onClick","src","imageUrl","alt","label"],"sources":["../../../../../../src/components/design/card/cardContent/CardContentLine.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  ReactElement,\n  ReactNode\n} from 'react';\nimport { Icon, IconProps } from '../../icons/basicIcon/Icon';\nimport { LogoLink, LogoLinkProps } from '../../logos/LogoLink';\nimport { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';\nimport { GenericFunction } from '../../../../interfaces';\nimport { StatusIndicatorsInterface } from '../../statusIndicators/statusIndicators.interface';\nimport { StatusLightsBar } from '../../statusIndicators/statusLightsBar/StatusLightsBar';\n\nimport './cardContentLine.scss';\n\nexport interface CardContentLineProps {\n  id: string;\n  icon?: IconProps;\n  logo?: LogoLinkProps;\n  graphic?: {\n    imageUrl: string;\n    label: string;\n  },\n  owner?: {\n    name: string;\n    email: string;\n    phone: string;\n  },\n  title: string;\n  hideTitle?: boolean;\n  onLineClick: GenericFunction;\n  children: ReactNode | ReactElement;\n  statuses?: StatusIndicatorsInterface;\n}\n\nexport const CardContentLine: React.FC<CardContentLineProps> = (\n  {\n    id,\n    icon,\n    logo,\n    graphic,\n    owner,\n    title,\n    hideTitle = false,\n    onLineClick = () => {},\n    children,\n    statuses\n  }\n) => {\n  const handleLineClick = () => {\n    onLineClick(id);\n  };\n\n  return (\n    <div id={ id } className=\"cardContentLine\" title={ title }>\n      <button type=\"button\" className=\"cardContentLineButton\" onClick={ handleLineClick }>\n        { icon && <Icon { ...icon } /> }\n\n        { logo && <LogoLink { ...logo } /> }\n\n        { graphic && <img src={ graphic.imageUrl } className=\"logoImage\" alt={ `${ graphic.label }` } /> }\n\n        <span className={ hideTitle ? 'sr-only' : 'cardContentLineTitle' }>{ title }</span>\n      </button>\n\n      <div className=\"cardContentLineContent\">\n        {\n          children\n        }\n      </div>\n\n      {\n        statuses && <StatusLightsBar { ...statuses } />\n      }\n\n      {\n        owner && <OwnerDetailsPopup owner={ owner } />\n      }\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAGL,OAAO;AACd,SAASC,IAAI,QAAmB,4BAA4B;AAC5D,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAG7E,SAASC,eAAe,QAAQ,wDAAwD;AAExF,OAAO,wBAAwB;AAsB/B,OAAO,MAAMC,eAA+C,GAAGA,CAC7D;EACEC,EAAE;EACFC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,QAAQ;EACRC;AACF,CAAC,KACE;EACH,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC5BH,WAAW,CAACP,EAAE,CAAC;EACjB,CAAC;EAED,oBACEN,KAAA,CAAAiB,aAAA;IAAKX,EAAE,EAAGA,EAAI;IAACY,SAAS,EAAC,iBAAiB;IAACP,KAAK,EAAGA;EAAO,gBACxDX,KAAA,CAAAiB,aAAA;IAAQE,IAAI,EAAC,QAAQ;IAACD,SAAS,EAAC,uBAAuB;IAACE,OAAO,EAAGJ;EAAiB,GAC/ET,IAAI,iBAAIP,KAAA,CAAAiB,aAAA,CAAChB,IAAI,EAAMM,IAAQ,CAAC,EAE5BC,IAAI,iBAAIR,KAAA,CAAAiB,aAAA,CAACf,QAAQ,EAAMM,IAAQ,CAAC,EAEhCC,OAAO,iBAAIT,KAAA,CAAAiB,aAAA;IAAKI,GAAG,EAAGZ,OAAO,CAACa,QAAU;IAACJ,SAAS,EAAC,WAAW;IAACK,GAAG,EAAG,GAAId,OAAO,CAACe,KAAK;EAAK,CAAE,CAAC,eAEhGxB,KAAA,CAAAiB,aAAA;IAAMC,SAAS,EAAGN,SAAS,GAAG,SAAS,GAAG;EAAwB,GAAGD,KAAa,CAC5E,CAAC,eAETX,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAwB,GAEnCJ,QAEC,CAAC,EAGJC,QAAQ,iBAAIf,KAAA,CAAAiB,aAAA,CAACb,eAAe,EAAMW,QAAY,CAAC,EAI/CL,KAAK,iBAAIV,KAAA,CAAAiB,aAAA,CAACd,iBAAiB;IAACO,KAAK,EAAGA;EAAO,CAAE,CAE5C,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/card/cardContent/cardContentLine.css

@@ -0,0 +1,30 @@
+/* Popovers */
+/* BUTTONS */
+.cardContentLine {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  border-top: 1px solid #eee;
+  padding: 10px 0;
+  min-height: 65px;
+  box-sizing: border-box;
+}
+.cardContentLine:first-of-type {
+  border-top: none;
+}
+.cardContentLine .cardContentLineContent {
+  flex: 1;
+}
+.cardContentLine .cardContentLineButton {
+  background: none;
+  border: none;
+}
+.cardContentLine .cardContentLineButton > .icon {
+  font-size: 40px;
+}
+.cardContentLine:hover .ownerDetailsPopup {
+  opacity: 1;
+}

package/dist/esm/components/design/card/cardHeader/CardHeader.js

@@ -0,0 +1,15 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { CardHeaderItem } from './CardHeaderItem';
+import './cardHeader.css';
+export const CardHeader = ({
+  cardId,
+  headerItems
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "cardHeader"
+}, headerItems.map((headerItem, index) => /*#__PURE__*/React.createElement(CardHeaderItem, _extends({
+  key: `${cardId}_headerItem_${index}`
+}, headerItem))));
+//# sourceMappingURL=CardHeader.js.map

package/dist/esm/components/design/card/cardHeader/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","names":["_extends","React","CardHeaderItem","CardHeader","cardId","headerItems","createElement","className","map","headerItem","index","key"],"sources":["../../../../../../src/components/design/card/cardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { CardHeaderItemProps, CardHeaderItem } from './CardHeaderItem';\n\nimport './cardHeader.scss';\n\nexport interface CardHeaderProps {\n  cardId?: string;\n  headerItems: CardHeaderItemProps[]\n}\n\nexport const CardHeader: React.FC<CardHeaderProps> = (\n  {\n    cardId,\n    headerItems\n  }\n) => (\n  <div className=\"cardHeader\">\n    {\n      headerItems.map((headerItem, index) => (\n         \n        <CardHeaderItem key={ `${ cardId }_headerItem_${ index }` } { ...headerItem } />\n      ))\n    }\n  </div>\n);\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AACzB,SAA8BC,cAAc,QAAQ,kBAAkB;AAEtE,OAAO,mBAAmB;AAO1B,OAAO,MAAMC,UAAqC,GAAGA,CACnD;EACEC,MAAM;EACNC;AACF,CAAC,kBAEDJ,KAAA,CAAAK,aAAA;EAAKC,SAAS,EAAC;AAAY,GAEvBF,WAAW,CAACG,GAAG,CAAC,CAACC,UAAU,EAAEC,KAAK,kBAEhCT,KAAA,CAAAK,aAAA,CAACJ,cAAc,EAAAF,QAAA;EAACW,GAAG,EAAG,GAAIP,MAAM,eAAiBM,KAAK;AAAK,GAAMD,UAAU,CAAI,CAChF,CAEA,CACN","ignoreList":[]}

package/dist/esm/components/design/card/cardHeader/CardHeaderItem.js

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { Icon } from '../../icons/basicIcon/Icon';
+import { LogoLink } from '../../logos/LogoLink';
+import { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';
+import { SimpleButton } from '../../../form/buttons/SimpleButton';
+export const CardHeaderItem = ({
+  icon,
+  logo,
+  graphic,
+  owner,
+  title,
+  content,
+  hideTitle = false,
+  url,
+  actionButton
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "cardHeaderItem",
+  title: title
+}, url ? /*#__PURE__*/React.createElement("a", {
+  className: "cardHeaderItemLink",
+  href: url
+}, icon && /*#__PURE__*/React.createElement(Icon, icon), logo && /*#__PURE__*/React.createElement(LogoLink, logo), graphic && /*#__PURE__*/React.createElement("img", {
+  src: graphic.imageUrl,
+  className: "logoImage",
+  alt: `${graphic.label}`
+}), /*#__PURE__*/React.createElement("span", {
+  className: hideTitle ? 'sr-only' : 'cardHeaderItemTitle'
+}, content || title)) : content, owner && /*#__PURE__*/React.createElement(OwnerDetailsPopup, {
+  owner: owner
+}), actionButton && /*#__PURE__*/React.createElement(SimpleButton, actionButton));
+//# sourceMappingURL=CardHeaderItem.js.map

package/dist/esm/components/design/card/cardHeader/CardHeaderItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeaderItem.js","names":["React","Icon","LogoLink","OwnerDetailsPopup","SimpleButton","CardHeaderItem","icon","logo","graphic","owner","title","content","hideTitle","url","actionButton","createElement","className","href","src","imageUrl","alt","label"],"sources":["../../../../../../src/components/design/card/cardHeader/CardHeaderItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactElement, ReactNode } from 'react';\nimport { Icon, IconProps } from '../../icons/basicIcon/Icon';\nimport { LogoLink, LogoLinkProps } from '../../logos/LogoLink';\nimport { OwnerDetailsPopup } from '../../ownerDetailsPopup/OwnerDetailsPopup';\nimport { ButtonProps } from '../../../form/buttons/button.interface';\nimport { SimpleButton } from '../../../form/buttons/SimpleButton';\n\nexport interface CardHeaderItemProps {\n  icon?: IconProps;\n  logo?: LogoLinkProps;\n  graphic?: {\n    imageUrl: string;\n    label: string;\n  },\n  owner?: {\n    name: string;\n    email?: string;\n    phone?: string;\n  },\n  title?: string;\n  content?: ReactNode | ReactElement;\n  hideTitle?: boolean;\n  url?: string;\n  actionButton?: ButtonProps;\n}\n\nexport const CardHeaderItem: React.FC<CardHeaderItemProps> = (\n  {\n    icon,\n    logo,\n    graphic,\n    owner,\n    title,\n    content,\n    hideTitle = false,\n    url,\n    actionButton\n  }\n) => (\n  <div className=\"cardHeaderItem\" title={ title }>\n    {\n      url\n        ? (\n          <a className=\"cardHeaderItemLink\" href={ url }>\n            { icon && <Icon { ...icon } /> }\n\n            { logo && <LogoLink { ...logo } /> }\n\n            { graphic && <img src={ graphic.imageUrl } className=\"logoImage\" alt={ `${ graphic.label }` } /> }\n\n            <span className={ hideTitle ? 'sr-only' : 'cardHeaderItemTitle' }>{ content || title }</span>\n          </a>\n        )\n        : content\n    }\n\n    {\n      owner && <OwnerDetailsPopup owner={ owner } />\n    }\n\n    {\n      actionButton && <SimpleButton { ...actionButton } />\n    }\n  </div>\n);\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAmC,OAAO;AACtD,SAASC,IAAI,QAAmB,4BAA4B;AAC5D,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAE7E,SAASC,YAAY,QAAQ,oCAAoC;AAqBjE,OAAO,MAAMC,cAA6C,GAAGA,CAC3D;EACEC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,SAAS,GAAG,KAAK;EACjBC,GAAG;EACHC;AACF,CAAC,kBAEDd,KAAA,CAAAe,aAAA;EAAKC,SAAS,EAAC,gBAAgB;EAACN,KAAK,EAAGA;AAAO,GAE3CG,GAAG,gBAECb,KAAA,CAAAe,aAAA;EAAGC,SAAS,EAAC,oBAAoB;EAACC,IAAI,EAAGJ;AAAK,GAC1CP,IAAI,iBAAIN,KAAA,CAAAe,aAAA,CAACd,IAAI,EAAMK,IAAQ,CAAC,EAE5BC,IAAI,iBAAIP,KAAA,CAAAe,aAAA,CAACb,QAAQ,EAAMK,IAAQ,CAAC,EAEhCC,OAAO,iBAAIR,KAAA,CAAAe,aAAA;EAAKG,GAAG,EAAGV,OAAO,CAACW,QAAU;EAACH,SAAS,EAAC,WAAW;EAACI,GAAG,EAAG,GAAIZ,OAAO,CAACa,KAAK;AAAK,CAAE,CAAC,eAEhGrB,KAAA,CAAAe,aAAA;EAAMC,SAAS,EAAGJ,SAAS,GAAG,SAAS,GAAG;AAAuB,GAAGD,OAAO,IAAID,KAAa,CAC3F,CAAC,GAEJC,OAAO,EAIXF,KAAK,iBAAIT,KAAA,CAAAe,aAAA,CAACZ,iBAAiB;EAACM,KAAK,EAAGA;AAAO,CAAE,CAAC,EAI9CK,YAAY,iBAAId,KAAA,CAAAe,aAAA,CAACX,YAAY,EAAMU,YAAgB,CAElD,CACN","ignoreList":[]}

package/dist/esm/components/design/card/cardHeader/cardHeader.css

@@ -0,0 +1,49 @@
+/* Popovers */
+/* BUTTONS */
+.cardHeader {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: var(--cardHeaderPadding);
+  border-bottom: var(--cardHeaderBorder);
+  box-shadow: var(--cardHeaderBoxShadow);
+  border-radius: var(--cardHeaderBorderRadius);
+  background: var(--cardHeaderBg);
+  color: var(--cardHeaderFg);
+  font-family: var(--cardHeaderFont), "serif";
+  font-size: var(--cardHeaderFontSize);
+}
+.cardHeader .cardHeaderItem {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.cardHeader .cardHeaderItem .cardHeaderItemLink {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  text-decoration: none;
+  color: inherit;
+}
+.cardHeader .cardHeaderItem .cardHeaderItemLink .icon {
+  display: block;
+  font-size: 40px;
+  line-height: 36px;
+  height: 40px;
+  overflow: hidden;
+}
+.cardHeader .cardHeaderItem .cardHeaderItemLink .icon .icon-xgraph-large {
+  font-size: 80px;
+}
+.cardHeader .cardHeaderItem:hover .ownerDetailsPopup {
+  opacity: 1;
+}

package/dist/esm/components/design/chip/Chip.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import './chip.css';
+export const Chip = ({
+  label,
+  size = 'm',
+  color = 'darkgrey',
+  variant = 'solid',
+  customCssClass = '',
+  shape = 'rounded'
+}) => /*#__PURE__*/React.createElement("strong", {
+  className: `chip chip_${size} chip_${color} chip_${variant} chip_${shape} ${customCssClass}`
+}, /*#__PURE__*/React.createElement("small", null, label));
+export default {
+  Chip
+};
+export { Chip as Pill };
+export { Chip as Badge };
+//# sourceMappingURL=Chip.js.map

package/dist/esm/components/design/chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","names":["React","Chip","label","size","color","variant","customCssClass","shape","createElement","className","Pill","Badge"],"sources":["../../../../../src/components/design/chip/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport './chip.scss';\n\nexport interface ChipProps {\n  label: string | React.ReactNode;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl';\n  color?: 'yellow' | 'orange' | 'red' | 'purple' | 'blue' | 'green' | 'white' | 'black' | 'darkgrey' | 'lightgrey';\n  variant?: 'solid' | 'outline' | 'outlineInverse' | 'soft';\n  customCssClass?: string;\n  shape?: 'rounded' | 'square';\n}\n\nexport const Chip: React.FC<ChipProps> = (\n  {\n    label,\n    size = 'm',\n    color = 'darkgrey',\n    variant = 'solid',\n    customCssClass = '',\n    shape = 'rounded',\n  }\n) => (\n  <strong className={ `chip chip_${ size } chip_${ color } chip_${ variant } chip_${ shape } ${ customCssClass }` }>\n    <small>{ label }</small>\n  </strong>\n);\n\nexport default { Chip };\n\nexport { Chip as Pill };\nexport { Chip as Badge };"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,aAAa;AAWpB,OAAO,MAAMC,IAAyB,GAAGA,CACvC;EACEC,KAAK;EACLC,IAAI,GAAG,GAAG;EACVC,KAAK,GAAG,UAAU;EAClBC,OAAO,GAAG,OAAO;EACjBC,cAAc,GAAG,EAAE;EACnBC,KAAK,GAAG;AACV,CAAC,kBAEDP,KAAA,CAAAQ,aAAA;EAAQC,SAAS,EAAG,aAAcN,IAAI,SAAWC,KAAK,SAAWC,OAAO,SAAWE,KAAK,IAAMD,cAAc;AAAK,gBAC/GN,KAAA,CAAAQ,aAAA,gBAASN,KAAc,CACjB,CACT;AAED,eAAe;EAAED;AAAK,CAAC;AAEvB,SAASA,IAAI,IAAIS,IAAI;AACrB,SAAST,IAAI,IAAIU,KAAK","ignoreList":[]}