@hbuesing/ui-library 4.1.0 → 5.0.0-beta.3

package/dist/components/button/customButton.d.ts

@@ -6,5 +6,19 @@ interface ICustomButton extends ComponentPropsWithoutRef<'button'> {
     small?: boolean;
     theme?: HEXColor | 'success' | 'warning' | 'error';
 }
+/**
+ * @example
+ * ```jsx
+ * <CustomButton
+ *  label={'Click Me!'}
+ *  disabled={false}
+ *  small={true}
+ *  theme={'success'}
+ *  onClick={() => {ClickFunction()}}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/button)
+ */
 export declare function CustomButton(props: ICustomButton): React.JSX.Element;
 export {};

package/dist/components/checkbox/customCheckbox.d.ts

@@ -6,5 +6,17 @@ interface ICustomCheckbox extends ComponentPropsWithoutRef<'input'> {
     children?: ReactNode;
     label?: string;
 }
+/**
+ * @example
+ * ```jsx
+ * <CustomCheckbox
+ *  checked={...}
+ *  toggleCheck={...}
+ *  label={"Check this checkbox"}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/checkbox).
+ */
 export declare function CustomCheckbox(props: ICustomCheckbox): React.JSX.Element;
 export {};

package/dist/components/images/svgIcon.d.ts

@@ -5,5 +5,13 @@ interface ISvgIcon extends ComponentPropsWithoutRef<'svg'> {
     height?: number;
     width?: number;
 }
+/**
+ * @example
+ * ```jsx
+ * <SVG src={"foo/bar.png"} />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/images).
+ */
 export declare function SVG(props: ISvgIcon): React.JSX.Element;
 export {};

package/dist/components/input/customInput.d.ts

@@ -5,4 +5,16 @@ export interface ICustomInput extends IBaseInput {
     tooltipIcon?: string;
     tooltipText?: string;
 }
+/**
+ * @example
+ * ```jsx
+ * <PasswordInput
+ *  value={...}
+ *  valueChanged={...}
+ *  label={"..."}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/input).
+ */
 export declare function CustomInput(props: ICustomInput): React.JSX.Element;

package/dist/components/input/passwordInput.d.ts

@@ -7,11 +7,39 @@ interface IPasswordInput extends ICustomInput {
     capsLockWarning?: string;
     setFailedRules?: (value: PasswordRule[]) => void;
 }
+/**
+ * Password rule
+ * @example
+ * ```js
+ * const rule = {
+ *  label: "minimum password length",
+ *  count: 5
+ *  type: "minLength"
+ * }
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/passwordInput).
+ */
 export interface PasswordRule {
     label: string;
     count?: number;
     type?: 'minLength' | 'maxLength' | 'letters' | 'numbers' | 'special' | 'upper';
     pattern?: string;
 }
+/**
+ * @example
+ * ```jsx
+ * <PasswordInput
+ *  ruleChecked={"/foo/bar.svg"}
+ *  ruleUnchecked={"/foo/bar.svg"}
+ *  rules={[...]}
+ *  value={...}
+ *  valueChanged={...}
+ *  label={"..."}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/passwordInput).
+ */
 export declare function PasswordInput(props: IPasswordInput): React.JSX.Element;
 export {};

package/dist/components/modal/notifyModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface INotifyModal {
+interface INotifyModal {
     close: () => void;
     closeLabel: string;
     modalType: 'success' | 'warning' | 'error';
@@ -8,4 +8,19 @@ export interface INotifyModal {
     callback?: (() => void) | undefined;
     timeout?: number;
 }
+/**
+ * @example
+ * ```jsx
+ * <NotifyModal
+ *  close={...}
+ *  closeLabel={"..."}
+ *  modalType={"success"}
+ *  title={"..."}
+ *  message={"..."}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/modal).
+ */
 export declare function NotifyModal(props: INotifyModal): React.JSX.Element;
+export {};

package/dist/components/modal/questionModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface IQuestionModal {
+interface IQuestionModal {
     cancel: () => void;
     cancelLabel: string;
     confirm: () => void;
@@ -7,4 +7,20 @@ export interface IQuestionModal {
     message: string | string[];
     title: string;
 }
+/**
+ * @example
+ * ```jsx
+ * <QuestionModal
+ *  cancel={...}
+ *  cancelLabel={"..."}
+ *  confirm={...}
+ *  confirmLabel={"..."}
+ *  title={"..."}
+ *  message={"..."}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/questionModal).
+ */
 export declare function QuestionModal(props: IQuestionModal): React.JSX.Element;
+export {};

package/dist/components/radio/customRadio.d.ts

@@ -7,11 +7,35 @@ interface ICustomRadio {
     disabled?: boolean;
     label?: string;
 }
+/**
+ * @example
+ * ```js
+ * const option = {
+ *  label: "foo",
+ *  value: "foo",
+ * }
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/radio).
+ */
 export interface RadioOption {
     label: string;
     value: string;
     checked?: boolean;
     disabled?: boolean;
 }
+/**
+ * @example
+ * ```jsx
+ * <CustomRadio
+ *  value={...}
+ *  valueChanged={...}
+ *  label={"..."}
+ *  options={[...]}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/radio).
+ */
 export declare function CustomRadio(props: ICustomRadio): React.JSX.Element;
 export {};

package/dist/hooks/clickOutside.d.ts

@@ -1 +1 @@
-export declare function useClickOutsideRef<T extends HTMLElement>(callback: () => void): import("react").RefObject<T>;
+export declare function useClickOutsideRef<T extends HTMLElement>(callback: () => void): import("react").MutableRefObject<T>;

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export { CustomCheckbox } from './components/checkbox/index';
 export { CustomButton } from './components/button/index';
 export { SVG } from './components/images/index';
 export { useClickOutsideRef, useGetColor } from './hooks/index';
+import './utils/styles.scss';

package/dist/index.js

@@ -0,0 +1 @@
+import f,{useState as F}from"react";import w from"react";import N from"react";function h(r){let{color:i,height:e,src:t,width:o}=r;if(!t.includes(".svg"))throw new Error("Provided src is not an svg image");return N.createElement("div",{className:"uil-svg-wrapper"},N.createElement("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:i,height:e,width:o}},N.createElement("use",{href:t})))}function E(r){let{iconColor:i,iconSrc:e,inputColor:t,label:o,toggle:s,valueChanged:c,...u}=r;return w.createElement("label",{className:"uil-input-wrapper",htmlFor:u.id},w.createElement("input",{className:"uil-input uil-font-base",onChange:a=>{c(a.target.value)},placeholder:o,style:{color:t},...u}),e&&w.createElement("div",{className:"uil-icon",onClick:s},w.createElement(h,{src:e,width:24,height:24,color:i})),w.createElement("span",{className:"uil-label uil-font-base",style:{color:t}},o))}import{useEffect as B,useRef as T}from"react";function P(r){let i=T(null);return B(()=>{if(!i.current)return;function e(t){i.current&&!i.current.contains(t.target)&&r()}return document.addEventListener("click",e),document.addEventListener("touchend",e),()=>{document.removeEventListener("click",e),document.removeEventListener("touchend",e)}},[r]),i}function L(r){let{tooltipClose:i,tooltipIcon:e,tooltipText:t,...o}=r,[s,c]=F(!1),u=P(a);function a(){c(!1)}return f.createElement(f.Fragment,null,e?f.createElement("div",{className:"uil-tooltip-wrapper",ref:u},s&&f.createElement("div",{className:"uil-tooltip"},i&&f.createElement("button",{className:"uil-tooltip-button uil-fit",onClick:a},i),f.createElement("span",null,t)),f.createElement("div",{className:"uil-tooltip-icon uil-fit",onClick:()=>{c(!s)}},f.createElement(h,{src:e,height:16,width:16})),f.createElement(E,{...o})):f.createElement(E,{...o}))}import v,{useEffect as $,useState as A}from"react";function b(r){let i=String(Date.now().toString(32)+Math.random().toString(16)).replace(/\./g,"");return`${r}-${i}`}function W(r){let{capsLockWarning:i,rules:e,ruleChecked:t,ruleUnchecked:o,setFailedRules:s,...c}=r,[u,a]=A(!1);$(()=>{n()},[r.value]),$(()=>{if(!i)return;function l(d){a(d.getModifierState("CapsLock"))}return document.addEventListener("keydown",l),()=>{document.removeEventListener("keydown",l)}},[]);function n(){let l=[];e.forEach(d=>{m(d)||l.push(d)}),s?.(l)}function m(l){let d;if(l.type){if(!l.count)throw new Error("count must not be empty if a type is provided");switch(l.type){case"minLength":d=`[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${l.count},}`;break;case"maxLength":d=`^[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{0,${l.count}}$`;break;case"letters":d=`[a-zA-Z\xDF\xC4\xE4\xD6\xF6\xDC\xFC]{${l.count},}`;break;case"numbers":d=`[0-9]{${l.count},}`;break;case"special":d=`[._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${l.count},}`;break;case"upper":d=`[A-Z\xC4\xD6\xDC]{${l.count},}`;break;default:throw new Error("unrecognized rule type provided")}}else{if(!l.pattern)throw new Error("pattern must not be an empty string");d=l.pattern}return new RegExp(d).test(r.value.toString())}return v.createElement("div",null,v.createElement(L,{...c}),v.createElement("div",{className:"uil-password-rules"},u&&v.createElement("div",{className:"uil-password-rule"},i),e.map((l,d)=>v.createElement("div",{key:b(d),className:"uil-password-rule"},v.createElement(h,{src:m(l)?t:o,height:12,width:12}),v.createElement("span",null,l.label)))))}import q from"react";import p,{useEffect as O}from"react";import G from"react";function k(r){if(r.length!==7)throw new Error("provided hex color must be 7 characters (including #) long");r=r.substring(1,7);let e=[parseInt(r.substring(0,2),16)/255,parseInt(r.substring(2,4),16)/255,parseInt(r.substring(4,6),16)/255].map(o=>o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4));return .2126*e[0]+.7152*e[1]+.0722*e[2]>.179?"#000000":"#ffffff"}function y(r){let{disabled:i=!1,label:e,small:t=!1,theme:o,...s}=r;function c(){if(!(i||!o)){if(o.includes("#"))return{color:k(o),backgroundColor:o,border:"transparent"};switch(o){case"success":return{color:k("#006A4E"),backgroundColor:"#006A4E",border:"transparent"};case"warning":return{color:"#000000",backgroundColor:"#FFD700",border:"transparent"};case"error":return{color:k("#800020"),backgroundColor:"#800020",border:"transparent"};default:throw new Error("invalid theme provided")}}}function u(){let a="uil-button uil-fit";return i?t?`${a} uil-disabled uil-small`:`${a} uil-font-base uil-disabled`:t?`${a} uil-small`:`${a} uil-font-base`}return G.createElement("button",{className:u(),style:c(),disabled:i,...s},e)}function I(r){let{callback:i,cancelLabel:e="",close:t,closeLabel:o,confirm:s,confirmLabel:c="",message:u,timeout:a,title:n,type:m}=r,l;O(()=>{if(a)return l=setTimeout(()=>i?i():t(),a),()=>{clearTimeout(l)}},[]);function d(){let x="uil-header";switch(m){case"error":return`${x} uil-error`;case"success":return`${x} uil-success`;case"warning":return`${x} uil-warning`;default:return x}}function S(){return clearTimeout(l),a&&i?i():t()}return p.createElement("div",{className:"uil-modal-wrapper"},p.createElement("div",{className:"uil-modal"},p.createElement("div",{className:d()},n),a&&p.createElement("div",{className:"uil-progress-wrapper"},p.createElement("div",{className:"uil-progress-bar",style:{animationDuration:`${a/1e3+.5}s`}})),p.createElement("div",{className:"uil-content"},p.createElement("div",null,Array.isArray(u)?u.map((x,M)=>p.createElement("p",{key:b(M),className:"uil-modal-text"},x)):p.createElement("p",{className:"uil-modal-text"},u)),p.createElement("div",{className:`uil-button-wrapper ${m!=="question"?"uil-single":""}`},m!=="question"&&p.createElement(y,{label:o??"",onClick:S,type:"button"}),m=="question"&&r.confirm&&p.createElement(p.Fragment,null,p.createElement(y,{label:c,theme:"#00416A",onClick:s,type:"button"}),p.createElement(y,{label:e,onClick:t,type:"button"}))))))}function V(r){let{modalType:i,...e}=r;return q.createElement(I,{type:i,...e})}import j from"react";function K(r){let{cancel:i,...e}=r;return j.createElement(I,{type:"question",close:i,...e})}import g,{useEffect as D}from"react";function H(r){let{checkColor:i,disabled:e,label:t,options:o,value:s,valueChanged:c}=r,u=b("radio");D(()=>{o.forEach(n=>{n.checked&&a(n)})},[]);function a(n){s===n.value||n.disabled||e||c(n.value)}return g.createElement("div",null,t&&g.createElement("div",{className:"uil-radio-title"},t),g.createElement("div",{className:"uil-radio-wrapper"},o.map((n,m)=>g.createElement("div",{key:b(m),className:"uil-radio-option"},g.createElement("div",{className:"uil-radio uil-check",onClick:()=>{a(n)}},g.createElement("input",{id:`${m}-${u}`,name:n.label,type:"radio",value:n.value,checked:s===n.value||s===""&&n.checked,onChange:()=>{a(n)},disabled:e||n.disabled}),g.createElement("div",{className:"uil-checkmark uil-radio-check",style:{backgroundColor:i}})),g.createElement("label",{htmlFor:`${m}-${u}`,className:"uil-font-base"},n.label)))))}import C from"react";function _(r){let{checkColor:i,checked:e,children:t,toggleCheck:o,label:s,...c}=r,u=b("check");return C.createElement("div",{className:"uil-check-wrapper"},C.createElement("div",{className:"uil-checkbox uil-check",onClick:()=>{o(!e)}},C.createElement("input",{type:"checkbox",checked:e,onChange:()=>{o(!e)},...c,id:u}),C.createElement("div",{className:"uil-checkmark",style:{backgroundColor:i}})),C.createElement("label",{htmlFor:u,className:"uil-check-label"},t||s))}function z(r){if(typeof document<"u"){var i=document.createElement("style"),e=document.createTextNode(r);i.appendChild(e),document.head.appendChild(i)}}z(":root{--uil-black: #000000;--uil-black-alt: #222222;--uil-white: #ffffff;--uil-grey: #f3f3f3;--uil-grey-alt: #cfcfcf;--uil-grey-dark: #878787;--uil-outline-focus: #1E90FFFF;--uil-outline-disabled: #8B0000FF;--uil-success: #006A4E;--uil-error: #800020;--uil-question: #00416A;--uil-warning: #FFD700;--uil-xxxs: .125rem;--uil-xxs: .25rem;--uil-xs: .5rem;--uil-s: .75rem;--uil-m: 1rem;--uil-l: 1.25rem;--uil-xl: 1.5rem;--uil-xxl: 1.75rem;--uil-xxxl: 2rem;--uil-font-base: var(--uil-l);--uil-font-small: var(--uil-m)}.uil-button{letter-spacing:1px;color:var(--uil-black);background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:2px;cursor:pointer;padding:.375rem var(--uil-xxs);-webkit-box-shadow:0 0 3px 0 var(--uil-black-alt);box-shadow:0 0 3px 0 var(--uil-black-alt)}@media (min-width: 760px){.uil-button{padding:var(--uil-xs) var(--uil-s)}}.uil-button.uil-disabled{background-color:var(--uil-grey-dark);color:var(--uil-grey);border:transparent}.uil-button.uil-small{font-size:var(--uil-font-small);line-height:var(--uil-font-small);padding:var(--uil-xxs) var(--uil-xs)}.uil-check-wrapper{display:flex;align-items:center;gap:var(--uil-s);font-size:var(--uil-font-base);line-height:var(--uil-font-base)}.uil-check-wrapper .uil-checkbox{border-radius:2px}.uil-check-wrapper .uil-check-label{cursor:pointer;user-select:none}.uil-svg-wrapper{display:flex;height:fit-content;width:fit-content}.uil-svg-wrapper .uil-svg{height:var(--uil-xxxl);width:var(--uil-xxxl)}.uil-input-wrapper{position:relative;display:block}.uil-input-wrapper .uil-label{position:absolute;top:25%;left:var(--uil-xxs);cursor:text;font-weight:700;color:var(--uil-black);background:linear-gradient(0deg,var(--uil-white) 9px,rgba(0,0,0,0) 0%);opacity:.6;padding:0 var(--uil-xxxs);transition:top .25s ease-in-out}.uil-input-wrapper .uil-input{box-sizing:border-box;width:100%;color:var(--uil-black);background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:0;padding:var(--uil-xs)}.uil-input-wrapper .uil-input::placeholder{color:transparent;width:0;height:0}.uil-input-wrapper .uil-input:focus{outline:1px solid var(--uil-outline-focus)}.uil-input-wrapper .uil-input:disabled{cursor:not-allowed;border:2px solid var(--uil-outline-disabled);background-color:var(--uil-grey);color:var(--uil-grey-dark)}.uil-input-wrapper .uil-input:disabled~.uil-label{cursor:not-allowed;background:transparent;color:var(--uil-grey-dark)}.uil-input-wrapper .uil-input:disabled~.uil-icon{cursor:not-allowed;fill:var(--uil-grey-dark)}.uil-input-wrapper .uil-input:disabled:not(:placeholder-shown)~.uil-label{background:linear-gradient(0deg,var(--uil-grey) 8px,rgba(0,0,0,0) 0%)}.uil-input-wrapper .uil-icon{position:absolute;top:50%;right:var(--uil-xs);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;fill:var(--uil-black);opacity:.5}.uil-input-wrapper .uil-input:focus~.uil-label,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-label{top:-30%;opacity:1}.uil-input-wrapper .uil-input:focus~.uil-icon,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-icon{opacity:1}.uil-tooltip-wrapper{position:relative}.uil-tooltip-wrapper .uil-tooltip-icon{cursor:pointer;fill:var(--uil-black-alt);margin-bottom:var(--uil-xxs)}.uil-tooltip-wrapper .uil-tooltip-icon:has(~.uil-input-wrapper>.uil-input:not(:placeholder-shown),~.uil-input-wrapper:focus-within){opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.uil-tooltip-wrapper .uil-tooltip{position:absolute;top:0;left:0;width:100%;box-sizing:border-box;z-index:1;color:var(--uil-white);background-color:#222222e6;padding:var(--uil-s);border-radius:3px;font-size:var(--uil-font-small);line-height:var(--uil-font-small)}.uil-tooltip-wrapper .uil-tooltip .uil-tooltip-button{display:block;margin-left:auto;margin-bottom:var(--uil-m);color:var(--uil-white);background-color:transparent;border:none;padding:0;border-bottom:1px solid var(--uil-white);cursor:pointer}.uil-password-rules{margin-top:var(--uil-m);display:flex;flex-direction:column;gap:var(--uil-xs);margin-left:var(--uil-xs)}.uil-password-rules .uil-password-rule{display:flex;align-items:center;gap:var(--uil-xxs);font-size:var(--uil-font-small);line-height:var(--uil-font-small)}.uil-modal-wrapper{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#00000080;z-index:99}.uil-modal-wrapper .uil-modal{position:absolute;top:30%;left:50%;transform:translate(-50%);width:95%;-webkit-box-shadow:0 0 6px 0 var(--uil-black);box-shadow:0 0 6px 0 var(--uil-black);border-radius:5px;z-index:999}@media (min-width: 1025px){.uil-modal-wrapper .uil-modal{width:75%}}@media (min-width: 1250px){.uil-modal-wrapper .uil-modal{width:55%}}@media (min-width: 1920px){.uil-modal-wrapper .uil-modal{width:35%}}.uil-modal-wrapper .uil-modal .uil-progress-wrapper{background-color:var(--uil-grey-alt)}.uil-modal-wrapper .uil-modal .uil-progress-wrapper .uil-progress-bar{border:2px solid var(--uil-grey-dark);animation-duration:2s;animation-iteration-count:initial;animation-name:uil-progress}@keyframes uil-progress{0%{width:100%}to{width:0}}.uil-modal-wrapper .uil-modal .uil-header{color:var(--uil-white);background-color:var(--uil-question);display:flex;justify-content:space-between;font-size:var(--uil-xl);line-height:var(--uil-xl);font-weight:700;margin:0;padding:var(--uil-s);border-top-left-radius:3px;border-top-right-radius:3px}@media (min-width: 1025px){.uil-modal-wrapper .uil-modal .uil-header{font-size:var(--uil-xxxl);line-height:var(--uil-xxxl);padding:var(--uil-m)}}.uil-modal-wrapper .uil-modal .uil-header.uil-success{background-color:var(--uil-success)}.uil-modal-wrapper .uil-modal .uil-header.uil-error{background-color:var(--uil-error)}.uil-modal-wrapper .uil-modal .uil-header.uil-warning{color:var(--uil-black);background-color:var(--uil-warning)}.uil-modal-wrapper .uil-modal .uil-content{background-color:var(--uil-white);padding:var(--uil-m);border-bottom-left-radius:3px;border-bottom-right-radius:3px;display:flex;flex-direction:column;gap:var(--uil-m)}@media (min-width: 1025px){.uil-modal-wrapper .uil-modal .uil-content{padding:var(--uil-l);gap:var(--uil-xxxl)}}.uil-modal-wrapper .uil-modal .uil-content .uil-modal-text{font-size:var(--uil-font-base);line-height:var(--uil-font-base);color:var(--uil-black);margin:0}.uil-modal-wrapper .uil-modal .uil-content .uil-button-wrapper{display:flex;justify-content:space-between}.uil-modal-wrapper .uil-modal .uil-content .uil-button-wrapper.uil-single{justify-content:end}.uil-radio-title{display:block;font-size:var(--uil-xl);line-height:var(--uil-xl);margin-bottom:var(--uil-m)}.uil-radio-wrapper{display:flex;flex-direction:column;gap:var(--uil-m)}.uil-radio-wrapper .uil-radio-option{display:flex;align-items:center;gap:.25rem}.uil-radio-wrapper .uil-radio-option .uil-radio,.uil-radio-wrapper .uil-radio-option .uil-radio .uil-radio-check{border-radius:50%}.uil-fit{height:fit-content;width:fit-content}.uil-font-base{font-size:var(--uil-font-base);line-height:var(--uil-font-base)}.uil-check{position:relative;display:block;cursor:pointer;font-size:var(--uil-font-small);line-height:var(--uil-font-small);min-height:var(--uil-l);min-width:var(--uil-l);user-select:none;border:2px solid var(--uil-black-alt);box-sizing:border-box}.uil-check:has(input:disabled){background-color:var(--uil-grey);border-color:var(--uil-grey-dark)}.uil-check input{position:absolute;cursor:pointer;height:0;width:0;opacity:0}.uil-check input:checked~.uil-checkmark{transform:scale(1)}.uil-check input:disabled~.uil-checkmark{background-color:var(--uil-grey-dark)}.uil-check .uil-checkmark{position:absolute;top:25%;left:25%;background-color:var(--uil-black-alt);width:var(--uil-xs);height:var(--uil-xs);transform:scale(0);transition:.1s ease}");export{y as CustomButton,_ as CustomCheckbox,L as CustomInput,H as CustomRadio,V as NotifyModal,W as PasswordInput,K as QuestionModal,h as SVG,P as useClickOutsideRef,k as useGetColor};

package/package.json

@@ -1,12 +1,12 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "4.1.0",
+  "version": "5.0.0-beta.3",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "exports": "./dist/bundle.js",
+  "exports": "./dist/index.js",
   "files": [
     "dist/*"
   ],
@@ -14,7 +14,8 @@
     "clean": "rimraf ./dist && mkdir dist",
     "lint": "eslint src",
     "lint:nw": "eslint src --max-warnings 0",
-    "build": "microbundle build --output ./dist/bundle.js --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
+    "build": "node ./esbuild.js",
+    "postbuild": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "build:uil": "microbundle build --output ../website/src/uil-bundle/bundle.js --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
     "dev": "microbundle -w --output ./dist/bundle.js --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
     "stats": "microbundle build --output ./dist/bundle.js --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline --visualize --raw"
@@ -31,6 +32,9 @@
     "react": "^18.0.0"
   },
   "devDependencies": {
+    "esbuild": "0.24.0",
+    "esbuild-inline-sass": "^0.4.4",
+    "esbuild-sass-plugin": "^3.3.1",
     "microbundle": "^0.15.1",
     "rimraf": "^6.0.1"
   }

package/dist/bundle.js

@@ -1,2 +0,0 @@
-import e,{useEffect as l,useRef as i,useState as r}from"react";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var l=1;l<arguments.length;l++){var i=arguments[l];for(var r in i)({}).hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},t.apply(null,arguments)}function a(e,l){if(null==e)return{};var i={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(l.includes(r))continue;i[r]=e[r]}return i}var o=":root{--uil-black:#000;--uil-black-alt:#222;--uil-white:#fff;--uil-grey:#f3f3f3;--uil-grey-alt:#cfcfcf;--uil-grey-dark:#878787;--uil-outline-focus:#1e90ff;--uil-outline-disabled:#8b0000;--uil-success:#006a4e;--uil-error:#800020;--uil-question:#00416a;--uil-warning:gold;--uil-xxxs:.125rem;--uil-xxs:.25rem;--uil-xs:.5rem;--uil-s:.75rem;--uil-m:1rem;--uil-l:1.25rem;--uil-xl:1.5rem;--uil-xxl:1.75rem;--uil-xxxl:2rem;--uil-font-base:var(--uil-l);--uil-font-small:var(--uil-m)}.uil-button{background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:2px;box-shadow:0 0 3px 0 var(--uil-black-alt);color:var(--uil-black);cursor:pointer;letter-spacing:1px;padding:.375rem var(--uil-xxs)}@media (min-width:760px){.uil-button{padding:var(--uil-xs) var(--uil-s)}}.uil-button.uil-disabled{background-color:var(--uil-grey-dark);border:transparent;color:var(--uil-grey)}.uil-button.uil-small{font-size:var(--uil-font-small);line-height:var(--uil-font-small);padding:var(--uil-xxs) var(--uil-xs)}.uil-check-wrapper{align-items:center;display:flex;font-size:var(--uil-font-base);gap:var(--uil-s);line-height:var(--uil-font-base)}.uil-check-wrapper .uil-checkbox{border-radius:2px}.uil-check-wrapper .uil-check-label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.uil-svg-wrapper{display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.uil-svg-wrapper .uil-svg{height:var(--uil-xxxl);width:var(--uil-xxxl)}.uil-input-wrapper{display:block;position:relative}.uil-input-wrapper .uil-label{background:linear-gradient(0deg,var(--uil-white) 9px,transparent 0);color:var(--uil-black);cursor:text;font-weight:700;left:var(--uil-xxs);opacity:.6;padding:0 var(--uil-xxxs);position:absolute;top:25%;transition:top .25s ease-in-out}.uil-input-wrapper .uil-input{background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:0;box-sizing:border-box;color:var(--uil-black);padding:var(--uil-xs);width:100%}.uil-input-wrapper .uil-input::-moz-placeholder{color:transparent;height:0;width:0}.uil-input-wrapper .uil-input::placeholder{color:transparent;height:0;width:0}.uil-input-wrapper .uil-input:focus{outline:1px solid var(--uil-outline-focus)}.uil-input-wrapper .uil-input:disabled{background-color:var(--uil-grey);border:2px solid var(--uil-outline-disabled);color:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled~.uil-label{background:transparent;color:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled~.uil-icon{fill:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled:not(:-moz-placeholder-shown)~.uil-label{background:linear-gradient(0deg,var(--uil-grey) 8px,transparent 0)}.uil-input-wrapper .uil-input:disabled:not(:placeholder-shown)~.uil-label{background:linear-gradient(0deg,var(--uil-grey) 8px,transparent 0)}.uil-input-wrapper .uil-icon{fill:var(--uil-black);align-items:center;display:flex;justify-content:center;opacity:.5;position:absolute;right:var(--uil-xs);top:50%;transform:translateY(-50%)}.uil-input-wrapper .uil-input:not(:-moz-placeholder-shown)~.uil-label{opacity:1;top:-30%}.uil-input-wrapper .uil-input:focus~.uil-label,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-label{opacity:1;top:-30%}.uil-input-wrapper .uil-input:not(:-moz-placeholder-shown)~.uil-icon{opacity:1}.uil-input-wrapper .uil-input:focus~.uil-icon,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-icon{opacity:1}.uil-tooltip-wrapper{position:relative}.uil-tooltip-wrapper .uil-tooltip-icon{fill:var(--uil-black-alt);cursor:pointer;margin-bottom:var(--uil-xxs)}.uil-tooltip-wrapper .uil-tooltip-icon:has(~.uil-input-wrapper>.uil-input:not(:-moz-placeholder-shown),~.uil-input-wrapper:focus-within){opacity:0;-moz-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.uil-tooltip-wrapper .uil-tooltip-icon:has(~.uil-input-wrapper>.uil-input:not(:placeholder-shown),~.uil-input-wrapper:focus-within){opacity:0;transition:opacity .3s,visibility .3s;visibility:hidden}.uil-tooltip-wrapper .uil-tooltip{background-color:rgba(34,34,34,.9);border-radius:3px;box-sizing:border-box;color:var(--uil-white);font-size:var(--uil-font-small);left:0;line-height:var(--uil-font-small);padding:var(--uil-s);position:absolute;top:0;width:100%;z-index:1}.uil-tooltip-wrapper .uil-tooltip .uil-tooltip-button{background-color:transparent;border:none;border-bottom:1px solid var(--uil-white);color:var(--uil-white);cursor:pointer;display:block;margin-bottom:var(--uil-m);margin-left:auto;padding:0}.uil-password-rules{display:flex;flex-direction:column;gap:var(--uil-xs);margin-left:var(--uil-xs);margin-top:var(--uil-m)}.uil-password-rules .uil-password-rule{align-items:center;display:flex;font-size:var(--uil-font-small);gap:var(--uil-xxs);line-height:var(--uil-font-small)}.uil-modal-wrapper{background-color:rgba(0,0,0,.5);height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}.uil-modal-wrapper .uil-modal{border-radius:5px;box-shadow:0 0 6px 0 var(--uil-black);left:50%;position:absolute;top:30%;transform:translateX(-50%);width:95%;z-index:999}@media (min-width:1025px){.uil-modal-wrapper .uil-modal{width:75%}}@media (min-width:1250px){.uil-modal-wrapper .uil-modal{width:55%}}@media (min-width:1920px){.uil-modal-wrapper .uil-modal{width:35%}}.uil-modal-wrapper .uil-modal .uil-progress-wrapper{background-color:var(--uil-grey-alt)}.uil-modal-wrapper .uil-modal .uil-progress-wrapper .uil-progress-bar{animation-duration:2s;animation-iteration-count:1;animation-name:uil-progress;border:2px solid var(--uil-grey-dark)}@keyframes uil-progress{0%{width:100%}to{width:0}}.uil-modal-wrapper .uil-modal .uil-header{background-color:var(--uil-question);border-top-left-radius:3px;border-top-right-radius:3px;color:var(--uil-white);display:flex;font-size:var(--uil-xl);font-weight:700;justify-content:space-between;line-height:var(--uil-xl);margin:0;padding:var(--uil-s)}@media (min-width:1025px){.uil-modal-wrapper .uil-modal .uil-header{font-size:var(--uil-xxxl);line-height:var(--uil-xxxl);padding:var(--uil-m)}}.uil-modal-wrapper .uil-modal .uil-header.uil-success{background-color:var(--uil-success)}.uil-modal-wrapper .uil-modal .uil-header.uil-error{background-color:var(--uil-error)}.uil-modal-wrapper .uil-modal .uil-header.uil-warning{background-color:var(--uil-warning);color:var(--uil-black)}.uil-modal-wrapper .uil-modal .uil-content{background-color:var(--uil-white);border-bottom-left-radius:3px;border-bottom-right-radius:3px;display:flex;flex-direction:column;gap:var(--uil-m);padding:var(--uil-m)}@media (min-width:1025px){.uil-modal-wrapper .uil-modal .uil-content{gap:var(--uil-xxxl);padding:var(--uil-l)}}.uil-modal-wrapper .uil-modal .uil-content .uil-modal-text{color:var(--uil-black);font-size:var(--uil-font-base);line-height:var(--uil-font-base);margin:0}.uil-modal-wrapper .uil-modal .uil-content .uil-button-wrapper{display:flex;justify-content:space-between}.uil-modal-wrapper .uil-modal .uil-content .uil-button-wrapper.uil-single{justify-content:end}.uil-radio-title{display:block;font-size:var(--uil-xl);line-height:var(--uil-xl);margin-bottom:var(--uil-m)}.uil-radio-wrapper{display:flex;flex-direction:column;gap:var(--uil-m)}.uil-radio-wrapper .uil-radio-option{align-items:center;display:flex;gap:.25rem}.uil-radio-wrapper .uil-radio-option .uil-radio,.uil-radio-wrapper .uil-radio-option .uil-radio .uil-radio-check{border-radius:50%}.uil-fit{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.uil-font-base{font-size:var(--uil-font-base);line-height:var(--uil-font-base)}.uil-check{border:2px solid var(--uil-black-alt);box-sizing:border-box;cursor:pointer;display:block;font-size:var(--uil-font-small);line-height:var(--uil-font-small);min-height:var(--uil-l);min-width:var(--uil-l);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.uil-check:has(input:disabled){background-color:var(--uil-grey);border-color:var(--uil-grey-dark)}.uil-check input{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.uil-check input:checked~.uil-checkmark{transform:scale(1)}.uil-check input:disabled~.uil-checkmark{background-color:var(--uil-grey-dark)}.uil-check .uil-checkmark{background-color:var(--uil-black-alt);height:var(--uil-xs);left:25%;position:absolute;top:25%;transform:scale(0);transition:.1s ease;width:var(--uil-xs)}";const n=[];function u(e){l(()=>{const l=e.current?e.current.ownerDocument:document;if(void 0!==l&&!n.includes(l)){const e=l.createElement("style");e.innerHTML=o,n.push(l),l.head.appendChild(e)}},[])}function c(l){const{color:r,height:t,src:a,width:o}=l;if(!a.includes(".svg"))throw new Error("Provided src is not an svg image");const n={fill:r,height:t,width:o},c=i(null);return u(c),e.createElement("div",{ref:c,className:"uil-svg-wrapper"},e.createElement("svg",{"aria-hidden":!0,className:"uil-svg",style:n},e.createElement("use",{href:a})))}const s=["iconColor","iconSrc","inputColor","label","toggle","valueChanged"];function p(l){const{iconColor:r,iconSrc:o,inputColor:n,label:p,toggle:d,valueChanged:m}=l,h=a(l,s),b=i(null);return u(b),e.createElement("label",{className:"uil-input-wrapper",htmlFor:h.id,ref:b},e.createElement("input",t({className:"uil-input uil-font-base",onChange:e=>{m(e.target.value)},placeholder:p,style:{color:n}},h)),o&&e.createElement("div",{className:"uil-icon",onClick:d},e.createElement(c,{src:o,width:24,height:24,color:r})),e.createElement("span",{className:"uil-label uil-font-base",style:{color:n}},p))}function d(e){const r=i(null);return l(()=>{if(r.current)return document.addEventListener("click",l),document.addEventListener("touchend",l),()=>{document.removeEventListener("click",l),document.removeEventListener("touchend",l)};function l(l){r.current&&!r.current.contains(l.target)&&e()}},[e]),r}const m=["tooltipClose","tooltipIcon","tooltipText"];function h(l){const{tooltipClose:i,tooltipIcon:o,tooltipText:n}=l,u=a(l,m),[s,h]=r(!1),b=d(g);function g(){h(!1)}return e.createElement(e.Fragment,null,o?e.createElement("div",{className:"uil-tooltip-wrapper",ref:b},s&&e.createElement("div",{className:"uil-tooltip"},i&&e.createElement("button",{className:"uil-tooltip-button uil-fit",onClick:g},i),e.createElement("span",null,n)),e.createElement("div",{className:"uil-tooltip-icon uil-fit",onClick:()=>{h(!s)}},e.createElement(c,{src:o,height:16,width:16})),e.createElement(p,t({},u))):e.createElement(p,t({},u)))}function b(e){return`${e}-${String(Date.now().toString(32)+Math.random().toString(16)).replace(/\./g,"")}`}const g=["capsLockWarning","rules","ruleChecked","ruleUnchecked","setFailedRules"];function f(i){const{capsLockWarning:o,rules:n,ruleChecked:u,ruleUnchecked:s,setFailedRules:p}=i,d=a(i,g),[m,f]=r(!1);function v(e){let l;if(e.type){if(!e.count)throw new Error("count must not be empty if a type is provided");switch(e.type){case"minLength":l=`[a-zA-Z0-9ßÄäÖöÜü._!"\`'#%&§,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${e.count},}`;break;case"maxLength":l=`^[a-zA-Z0-9ßÄäÖöÜü._!"\`'#%&,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{0,${e.count}}$`;break;case"letters":l=`[a-zA-ZßÄäÖöÜü]{${e.count},}`;break;case"numbers":l=`[0-9]{${e.count},}`;break;case"special":l=`[._!"\`'#%&§,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${e.count},}`;break;case"upper":l=`[A-ZÄÖÜ]{${e.count},}`;break;default:throw new Error("unrecognized rule type provided")}}else{if(!e.pattern)throw new Error("pattern must not be an empty string");l=e.pattern}return new RegExp(l).test(i.value.toString())}return l(()=>{!function(){const e=[];n.forEach(l=>{v(l)||e.push(l)}),null==p||p(e)}()},[i.value]),l(()=>{if(o)return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)};function e(e){f(e.getModifierState("CapsLock"))}},[]),e.createElement("div",null,e.createElement(h,t({},d)),e.createElement("div",{className:"uil-password-rules"},m&&e.createElement("div",{className:"uil-password-rule"},o),n.map((l,i)=>e.createElement("div",{key:b(i),className:"uil-password-rule"},e.createElement(c,{src:v(l)?u:s,height:12,width:12}),e.createElement("span",null,l.label)))))}function v(e){if(7!==e.length)throw new Error("provided hex color must be 7 characters (including #) long");e=e.substring(1,7);const l=[parseInt(e.substring(0,2),16)/255,parseInt(e.substring(2,4),16)/255,parseInt(e.substring(4,6),16)/255].map(e=>e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*l[0]+.7152*l[1]+.0722*l[2]>.179?"#000000":"#ffffff"}const w=["disabled","label","small","theme"];function k(l){const{disabled:r=!1,label:o,small:n=!1,theme:c}=l,s=a(l,w),p=i(null);return u(p),e.createElement("button",t({className:function(){const e="uil-button uil-fit";return r?n?`${e} uil-disabled uil-small`:`${e} uil-font-base uil-disabled`:n?`${e} uil-small`:`${e} uil-font-base`}(),style:function(){if(!r&&c){if(c.includes("#"))return{color:v(c),backgroundColor:c,border:"transparent"};switch(c){case"success":return{color:v("#006A4E"),backgroundColor:"#006A4E",border:"transparent"};case"warning":return{color:"#000000",backgroundColor:"#FFD700",border:"transparent"};case"error":return{color:v("#800020"),backgroundColor:"#800020",border:"transparent"};default:throw new Error("invalid theme provided")}}}(),disabled:r,ref:p},s),o)}function x(r){const{callback:t,cancelLabel:a="",close:o,closeLabel:n,confirm:c,confirmLabel:s="",message:p,timeout:d,title:m,type:h}=r;let g;const f=i(null);return u(f),l(()=>{if(d)return g=setTimeout(()=>t?t():o(),d),()=>{clearTimeout(g)}},[]),e.createElement("div",{className:"uil-modal-wrapper",ref:f},e.createElement("div",{className:"uil-modal"},e.createElement("div",{className:function(){const e="uil-header";switch(h){case"error":return`${e} uil-error`;case"success":return`${e} uil-success`;case"warning":return`${e} uil-warning`;default:return e}}()},m),d&&e.createElement("div",{className:"uil-progress-wrapper"},e.createElement("div",{className:"uil-progress-bar",style:{animationDuration:d/1e3+.5+"s"}})),e.createElement("div",{className:"uil-content"},e.createElement("div",null,Array.isArray(p)?p.map((l,i)=>e.createElement("p",{key:b(i),className:"uil-modal-text"},l)):e.createElement("p",{className:"uil-modal-text"},p)),e.createElement("div",{className:"uil-button-wrapper "+("question"!==h?"uil-single":"")},"question"!==h&&e.createElement(k,{label:null!=n?n:"",onClick:function(){return clearTimeout(g),d&&t?t():o()},type:"button"}),"question"==h&&r.confirm&&e.createElement(e.Fragment,null,e.createElement(k,{label:s,theme:"#00416A",onClick:c,type:"button"}),e.createElement(k,{label:a,onClick:o,type:"button"}))))))}const y=["modalType"];function E(l){const{modalType:i}=l,r=a(l,y);return e.createElement(x,t({type:i},r))}const C=["cancel"];function N(l){const{cancel:i}=l,r=a(l,C);return e.createElement(x,t({type:"question",close:i},r))}function z(r){const{checkColor:t,disabled:a,label:o,options:n,value:c,valueChanged:s}=r,p=b("radio"),d=i(null);function m(e){c===e.value||e.disabled||a||s(e.value)}return u(d),l(()=>{n.forEach(e=>{e.checked&&m(e)})},[]),e.createElement("div",{ref:d},o&&e.createElement("div",{className:"uil-radio-title"},o),e.createElement("div",{className:"uil-radio-wrapper"},n.map((l,i)=>e.createElement("div",{key:b(i),className:"uil-radio-option"},e.createElement("div",{className:"uil-radio uil-check",onClick:()=>{m(l)}},e.createElement("input",{id:`${i}-${p}`,name:l.label,type:"radio",value:l.value,checked:c===l.value||""===c&&l.checked,onChange:()=>{m(l)},disabled:a||l.disabled}),e.createElement("div",{className:"uil-checkmark uil-radio-check",style:{backgroundColor:t}})),e.createElement("label",{htmlFor:`${i}-${p}`,className:"uil-font-base"},l.label)))))}const $=["checkColor","checked","children","toggleCheck","label"];function L(l){const{checkColor:r,checked:o,children:n,toggleCheck:c,label:s}=l,p=a(l,$),d=b("check"),m=i(null);return u(m),e.createElement("div",{className:"uil-check-wrapper",ref:m},e.createElement("div",{className:"uil-checkbox uil-check",onClick:()=>{c(!o)}},e.createElement("input",t({type:"checkbox",checked:o,onChange:()=>{c(!o)}},p,{id:d})),e.createElement("div",{className:"uil-checkmark",style:{backgroundColor:r}})),e.createElement("label",{htmlFor:d,className:"uil-check-label"},n||s))}export{k as CustomButton,L as CustomCheckbox,h as CustomInput,z as CustomRadio,E as NotifyModal,f as PasswordInput,N as QuestionModal,c as SVG,d as useClickOutsideRef,v as useGetColor};
-//# sourceMappingURL=bundle.js.map

package/dist/bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundle.js","sources":["../src/utils/useInjectStyles.ts","../src/components/images/svgIcon.tsx","../src/components/input/baseInput.tsx","../src/hooks/clickOutside.ts","../src/components/input/customInput.tsx","../src/utils/generateKey.ts","../src/components/input/passwordInput.tsx","../src/hooks/getColor.ts","../src/components/button/customButton.tsx","../src/components/modal/baseModal.tsx","../src/components/modal/notifyModal.tsx","../src/components/modal/questionModal.tsx","../src/components/radio/customRadio.tsx","../src/components/checkbox/customCheckbox.tsx"],"sourcesContent":["import {RefObject, useEffect} from 'react';\nimport styles from './styles.scss';\n\nconst injectedStyles: Document[] = [];\n\nexport default function useInjectStyleSheet(nodeRef: RefObject<HTMLElement>): void {\n  useEffect(() => {\n    const parentDocument = nodeRef.current ? nodeRef.current.ownerDocument : document;\n\n    if (typeof parentDocument !== \"undefined\" && !injectedStyles.includes(parentDocument)) {\n      const styleElement = parentDocument.createElement(\"style\");\n\n      styleElement.innerHTML = styles;\n      injectedStyles.push(parentDocument);\n\n      parentDocument.head.appendChild(styleElement);\n    }\n  }, []);\n}","import React, {ComponentPropsWithoutRef, CSSProperties, useRef} from 'react';\nimport useInjectStyleSheet from 'utils/useInjectStyles';\n\ninterface ISvgIcon extends ComponentPropsWithoutRef<'svg'>{\n  src    : string;\n  color? : string | undefined;\n  height?: number;\n  width? : number;\n}\n\nexport function SVG(props: ISvgIcon) {\n  const {\n    color,\n    height,\n    src,\n    width\n  } = props;\n\n  if (!src.includes('.svg')) {\n    throw new Error('Provided src is not an svg image');\n  }\n\n  const style: CSSProperties = {\n    fill: color,\n    height: height,\n    width: width,\n  }\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  return (\n    <div ref={nodeRef} className={'uil-svg-wrapper'}>\n      <svg aria-hidden={true} className={'uil-svg'} style={style}>\n        <use href={src}/>\n      </svg>\n    </div>\n  );\n}","import React, {ComponentPropsWithoutRef, useRef} from 'react';\nimport {SVG} from 'components/images/svgIcon';\nimport useInjectStyleSheet from 'utils/useInjectStyles';\n\nexport interface IBaseInput extends ComponentPropsWithoutRef<'input'> {\n  label       : string;\n  value       : string | number;\n  valueChanged: (value: string) => void;\n  iconColor?  : string;\n  iconSrc?    : string;\n  inputColor? : string;\n  toggle?     : () => void;\n}\n\nexport function BaseInput(props: IBaseInput) {\n  const {\n    iconColor,\n    iconSrc,\n    inputColor,\n    label,\n    toggle,\n    valueChanged,\n    ...inputProps\n  } = props;\n\n  const nodeRef = useRef<HTMLLabelElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  return (\n    <label className={'uil-input-wrapper'} htmlFor={inputProps.id} ref={nodeRef}>\n      <input\n        className={'uil-input uil-font-base'}\n        onChange={(e) => {valueChanged(e.target.value)}}\n        placeholder={label}\n        style={{color: inputColor}}\n        {...inputProps}\n      />\n\n      {iconSrc &&\n        <div className={'uil-icon'} onClick={toggle}>\n          <SVG src={iconSrc} width={24} height={24} color={iconColor}/>\n        </div>\n      }\n\n      <span className={'uil-label uil-font-base'} style={{color: inputColor}}>{label}</span>\n    </label>\n  );\n}","import {useEffect, useRef} from 'react';\n\nexport function useClickOutsideRef<T extends HTMLElement>(callback: () => void) {\n  const ref = useRef<T>(null);\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    function handleClickOutside (event: MouseEvent | TouchEvent) {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        callback();\n      }\n    }\n\n    document.addEventListener('click', handleClickOutside);\n    document.addEventListener('touchend', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n      document.removeEventListener('touchend', handleClickOutside);\n    };\n  }, [callback]);\n\n  return ref;\n}","import React, {useState} from 'react';\nimport {BaseInput, IBaseInput} from './baseInput';\nimport {SVG} from 'components/images/svgIcon';\nimport {useClickOutsideRef} from 'hooks/clickOutside';\n\nexport interface ICustomInput extends IBaseInput {\n  tooltipClose?: string;\n  tooltipIcon? : string;\n  tooltipText? : string;\n}\n\nexport function CustomInput(props: ICustomInput) {\n  const {\n    tooltipClose,\n    tooltipIcon,\n    tooltipText,\n    ...inputProps\n  } = props;\n\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n  const ref = useClickOutsideRef<HTMLDivElement>(closeTooltip);\n\n  function closeTooltip() {\n    setTooltipVisible(false);\n  }\n\n  return (\n    <>\n      {tooltipIcon ?\n        <div className={'uil-tooltip-wrapper'} ref={ref}>\n          {tooltipVisible &&\n            <div className={'uil-tooltip'}>\n              {tooltipClose &&\n                <button className={'uil-tooltip-button uil-fit'} onClick={closeTooltip}>\n                  {tooltipClose}\n                </button>\n              }\n\n              <span>{tooltipText}</span>\n            </div>\n          }\n\n          <div className={'uil-tooltip-icon uil-fit'} onClick={() => {setTooltipVisible(!tooltipVisible)}}>\n            <SVG src={tooltipIcon} height={16} width={16}/>\n          </div>\n\n          <BaseInput {...inputProps}/>\n        </div> :\n\n        <BaseInput {...inputProps}/>\n      }\n    </>\n  );\n}","export default function generateKey(prefix: string | number) {\n  const id = String(Date.now().toString(32) + Math.random().toString(16)).replace(/\\./g, '');\n\n  return `${prefix}-${id}`;\n}","import React, {useEffect, useState} from 'react';\nimport {CustomInput, ICustomInput} from './customInput';\nimport {SVG} from 'components/images/svgIcon';\nimport generateKey from 'utils/generateKey';\n\ninterface IPasswordInput extends ICustomInput {\n  ruleChecked     : string;\n  rules           : PasswordRule[];\n  ruleUnchecked   : string;\n  capsLockWarning?: string;\n  setFailedRules? : (value: PasswordRule[]) => void;\n}\n\nexport interface PasswordRule {\n  label   : string;\n  count?  : number;\n  type?   : 'minLength' | 'maxLength' | 'letters' | 'numbers' | 'special' | 'upper';\n  pattern?: string;\n}\n\nexport function PasswordInput(props: IPasswordInput) {\n  const {\n    capsLockWarning,\n    rules,\n    ruleChecked,\n    ruleUnchecked,\n    setFailedRules,\n    ...inputProps\n  } = props;\n\n  const [capsLock, setCapsLock] = useState(false);\n\n  useEffect(() => {\n    validateInput();\n  }, [props.value]);\n\n  useEffect(() => {\n    if (!capsLockWarning) return;\n\n    function setCapsLockState(event: globalThis.KeyboardEvent) {\n      setCapsLock(event.getModifierState('CapsLock'));\n    }\n\n    document.addEventListener('keydown', setCapsLockState);\n\n    return () => {document.removeEventListener('keydown', setCapsLockState)};\n  }, []);\n\n  function validateInput() {\n    const failedRules: PasswordRule[] = [];\n\n    rules.forEach(rule => {\n      if (!checkRule(rule)) {\n        failedRules.push(rule);\n      }\n    });\n\n    setFailedRules?.(failedRules);\n  }\n\n  function checkRule(rule: PasswordRule): boolean {\n    let pattern: string;\n\n    if (rule.type) {\n      if (!rule.count) throw new Error('count must not be empty if a type is provided');\n\n      switch (rule.type) {\n        case 'minLength':\n          pattern = `[a-zA-Z0-9ßÄäÖöÜü._!\"\\`'#%&§,:;<>=@{}~\\\\$\\\\(\\\\)\\\\*\\\\+\\\\/\\\\\\\\\\\\?\\\\[\\\\]\\\\^\\\\|\\\\-]{${rule.count},}`;\n          break;\n        case 'maxLength':\n          pattern = `^[a-zA-Z0-9ßÄäÖöÜü._!\"\\`'#%&,:;<>=@{}~\\\\$\\\\(\\\\)\\\\*\\\\+\\\\/\\\\\\\\\\\\?\\\\[\\\\]\\\\^\\\\|\\\\-]{0,${rule.count}}$`;\n          break;\n        case 'letters':\n          pattern = `[a-zA-ZßÄäÖöÜü]{${rule.count},}`;\n          break;\n        case 'numbers':\n          pattern = `[0-9]{${rule.count},}`;\n          break;\n        case 'special':\n          pattern = `[._!\"\\`'#%&§,:;<>=@{}~\\\\$\\\\(\\\\)\\\\*\\\\+\\\\/\\\\\\\\\\\\?\\\\[\\\\]\\\\^\\\\|\\\\-]{${rule.count},}`;\n          break;\n        case 'upper':\n          pattern = `[A-ZÄÖÜ]{${rule.count},}`;\n          break;\n        default:\n          throw new Error('unrecognized rule type provided');\n      }\n    } else {\n      if (!rule.pattern) {\n        throw new Error('pattern must not be an empty string');\n      }\n\n      pattern = rule.pattern;\n    }\n\n    const reg = new RegExp(pattern);\n    return reg.test(props.value.toString());\n  }\n\n  return (\n    <div>\n      <CustomInput {...inputProps}/>\n\n      <div className={'uil-password-rules'}>\n        {capsLock && <div className={'uil-password-rule'}>{capsLockWarning}</div>}\n\n        {rules.map((rule, idx) =>\n          <div key={generateKey(idx)} className={'uil-password-rule'}>\n            <SVG src={checkRule(rule) ? ruleChecked : ruleUnchecked} height={12} width={12}/>\n\n            <span>{rule.label}</span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}","export function useGetColor(backgroundColor: string) {\n  if (backgroundColor.length !== 7) throw new Error('provided hex color must be 7 characters (including #) long');\n\n  backgroundColor = backgroundColor.substring(1, 7);\n  const uiColors = [\n    parseInt(backgroundColor.substring(0, 2), 16) / 255,\n    parseInt(backgroundColor.substring(2, 4), 16) / 255,\n    parseInt(backgroundColor.substring(4, 6), 16) / 255\n  ];\n  const c = uiColors.map(col => {\n    return col <= 0.03928? (col / 12.92) : Math.pow((col + 0.055) / 1.055, 2.4);\n  });\n  const contrast = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);\n\n  return contrast > 0.179 ? '#000000' : '#ffffff';\n}","import React, {ComponentPropsWithoutRef, CSSProperties, useRef} from 'react';\nimport useInjectStyleSheet from 'utils/useInjectStyles';\nimport {useGetColor} from 'hooks/getColor';\n\ntype HEXColor = `#${string}`\n\ninterface ICustomButton extends ComponentPropsWithoutRef<'button'> {\n  label    : string;\n  disabled?: boolean;\n  small?   : boolean;\n  theme?   : HEXColor | 'success' | 'warning' | 'error';\n}\n\nexport function CustomButton(props: ICustomButton) {\n  const {\n    disabled = false,\n    label,\n    small = false,\n    theme,\n    ...buttonProps\n  } = props;\n\n  const nodeRef = useRef<HTMLButtonElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  function getStyle(): CSSProperties | undefined {\n    if (disabled || !theme) return undefined;\n\n    if (theme.includes('#')) {\n      return {\n        color: useGetColor(theme),\n        backgroundColor: theme,\n        border: 'transparent'\n      };\n    }\n\n    switch (theme) {\n      case 'success':\n        return {\n          color: useGetColor('#006A4E'),\n          backgroundColor: '#006A4E',\n          border: 'transparent'\n        };\n      case 'warning':\n        return {\n          color: '#000000',\n          backgroundColor: '#FFD700',\n          border: 'transparent'\n        };\n      case 'error':\n        return {\n          color: useGetColor('#800020'),\n          backgroundColor: '#800020',\n          border: 'transparent'\n        };\n      default:\n        throw new Error('invalid theme provided')\n    }\n  }\n\n  function getClassName(): string {\n    const base = 'uil-button uil-fit'\n\n    if (disabled) {\n      if (small) {\n        return `${base} uil-disabled uil-small`;\n      }\n\n      return `${base} uil-font-base uil-disabled`;\n    }\n\n    if (small) {\n      return `${base} uil-small`;\n    }\n\n    return `${base} uil-font-base`;\n  }\n\n  return (\n    <button className={getClassName()} style={getStyle()} disabled={disabled} ref={nodeRef} {...buttonProps}>\n      {label}\n    </button>\n  );\n}","import React, {useEffect, useRef} from 'react';\nimport {CustomButton} from 'components/button/customButton';\nimport useInjectStyleSheet from 'utils/useInjectStyles';\nimport generateKey from 'utils/generateKey';\n\ninterface IBaseModal {\n  close        : () => void;\n  message      : string | string[];\n  title        : string;\n  type         : 'success' | 'warning' | 'error' | 'question';\n  callback?    : (() => void) | undefined;\n  cancelLabel? : string;\n  closeLabel?  : string;\n  confirm?     : () => void;\n  confirmLabel?: string;\n  timeout?     : number;\n}\n\nexport function BaseModal(props: IBaseModal) {\n  const {\n    callback,\n    cancelLabel = '',\n    close,\n    closeLabel,\n    confirm,\n    confirmLabel = '',\n    message,\n    timeout,\n    title,\n    type\n  } = props;\n\n  let timer: NodeJS.Timeout | undefined = undefined;\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  useEffect(() => {\n    if (!timeout) return;\n\n    timer = setTimeout(() => {\n      return callback ? callback() : close();\n    }, timeout);\n\n    return () => {clearTimeout(timer)};\n  },[]);\n\n  function setHeaderClass() {\n    const base = 'uil-header';\n\n    switch (type) {\n      case 'error':\n        return `${base} uil-error`;\n      case 'success':\n        return `${base} uil-success`;\n      case 'warning':\n        return `${base} uil-warning`;\n      default:\n        return base;\n    }\n  }\n\n  function handleClose() {\n    clearTimeout(timer);\n\n    //run callback if timeout and callback are set, otherwise close\n    if (timeout && callback) {\n      return callback();\n    }\n\n    return close();\n  }\n\n  return (\n    <div className={'uil-modal-wrapper'} ref={nodeRef}>\n      <div className={'uil-modal'}>\n        <div className={setHeaderClass()}>{title}</div>\n\n        {timeout &&\n          <div className={'uil-progress-wrapper'}>\n            <div className={'uil-progress-bar'} style={{animationDuration: `${(timeout / 1000) + .5}s`}}/>\n          </div>\n        }\n\n        <div className={'uil-content'}>\n          <div>\n            {Array.isArray(message) ?\n              message.map((m, idx) => <p key={generateKey(idx)} className={'uil-modal-text'}>{m}</p>)\n              : <p className={'uil-modal-text'}>{message}</p>\n            }\n          </div>\n\n          <div className={`uil-button-wrapper ${type !== 'question' ? 'uil-single' : ''}`}>\n            {type !== 'question' &&\n              <CustomButton label={closeLabel?? ''} onClick={handleClose} type={'button'}/>\n            }\n\n            {type == 'question' && props.confirm &&\n              <>\n                <CustomButton label={confirmLabel} theme={'#00416A'} onClick={confirm} type={'button'}/>\n                <CustomButton label={cancelLabel} onClick={close} type={'button'}/>\n              </>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}","import React from 'react';\nimport {BaseModal} from './baseModal';\n\nexport interface INotifyModal {\n  close     : () => void;\n  closeLabel: string;\n  modalType : 'success' | 'warning' | 'error';\n  message   : string | string[];\n  title     : string;\n  callback? : (() => void) | undefined;\n  timeout?  : number;\n}\n\nexport function NotifyModal(props: INotifyModal) {\n  const {\n    modalType,\n    ...modalProps\n  } = props;\n\n  return (\n    <BaseModal type={modalType} {...modalProps}/>\n  );\n}","import React from 'react';\nimport {BaseModal} from './baseModal';\n\nexport interface IQuestionModal {\n  cancel      : () => void;\n  cancelLabel : string;\n  confirm     : () => void;\n  confirmLabel: string;\n  message     : string | string[];\n  title       : string;\n}\n\nexport function QuestionModal(props: IQuestionModal) {\n  const {\n    cancel,\n    ...modalProps\n  } = props;\n\n  return (\n    <BaseModal type={'question'} close={cancel} {...modalProps}/>\n  );\n}","import React, {useEffect, useRef} from 'react';\nimport generateKey from 'utils/generateKey';\nimport useInjectStyleSheet from 'utils/useInjectStyles';\n\ninterface ICustomRadio {\n  options     : RadioOption[];\n  value       : string;\n  valueChanged: (value: string) => void;\n  checkColor? : string;\n  disabled?   : boolean;\n  label?      : string;\n}\n\nexport interface RadioOption {\n  label    : string;\n  value    : string;\n  checked? : boolean;\n  disabled?: boolean;\n}\n\nexport function CustomRadio(props: ICustomRadio) {\n  const {\n    checkColor,\n    disabled,\n    label,\n    options,\n    value,\n    valueChanged,\n  } = props;\n\n  const id = generateKey('radio');\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  useEffect(() => {\n    // prevents multiple radio options being checked at the same time\n    options.forEach(option => {\n      if (option.checked) handleRadioChange(option);\n    });\n  },[]);\n\n  function handleRadioChange(option: RadioOption) {\n    if (value === option.value || option.disabled || disabled) return;\n\n    valueChanged(option.value);\n  }\n\n  return (\n    <div ref={nodeRef}>\n      {label && <div className={'uil-radio-title'}>{label}</div>}\n\n      <div className={'uil-radio-wrapper'}>\n        {options.map((option, idx) =>\n          <div key={generateKey(idx)} className={'uil-radio-option'}>\n            <div className={'uil-radio uil-check'} onClick={() => {handleRadioChange(option)}}>\n              <input\n                id={`${idx}-${id}`}\n                name={option.label}\n                type={'radio'}\n                value={option.value}\n                checked={value === option.value || value === '' && option.checked}\n                onChange={() => {handleRadioChange(option)}}\n                disabled={disabled? disabled : option.disabled}\n              />\n              <div className={'uil-checkmark uil-radio-check'} style={{backgroundColor: checkColor}}/>\n            </div>\n\n            <label htmlFor={`${idx}-${id}`} className={'uil-font-base'}>{option.label}</label>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}","import React, {ComponentPropsWithoutRef, ReactNode, useRef} from 'react';\nimport useInjectStyleSheet from 'utils/useInjectStyles';\nimport generateKey from 'utils/generateKey';\n\ninterface ICustomCheckbox extends ComponentPropsWithoutRef<'input'> {\n  checked    : boolean;\n  toggleCheck: (value: boolean) => void;\n  checkColor?: string;\n  children?  : ReactNode;\n  label?     : string;\n}\n\nexport function CustomCheckbox(props: ICustomCheckbox) {\n  const {\n    checkColor,\n    checked,\n    children,\n    toggleCheck,\n    label,\n    ...checkProps\n  } = props;\n\n  const id = generateKey('check');\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  return (\n    <div className={'uil-check-wrapper'} ref={nodeRef}>\n      <div className={'uil-checkbox uil-check'} onClick={() => {toggleCheck(!checked)}}>\n        <input type={'checkbox'} checked={checked} onChange={() => {toggleCheck(!checked)}} {...checkProps} id={id}/>\n        <div className={'uil-checkmark'} style={{backgroundColor: checkColor}}/>\n      </div>\n\n      <label htmlFor={id} className={'uil-check-label'}>\n        {children ? children : label}\n      </label>\n    </div>\n  );\n}"],"names":["injectedStyles","useInjectStyleSheet","nodeRef","useEffect","parentDocument","current","ownerDocument","document","includes","styleElement","createElement","innerHTML","styles","push","head","appendChild","SVG","props","color","height","src","width","Error","style","fill","useRef","React","ref","className","href","BaseInput","iconColor","iconSrc","inputColor","label","toggle","valueChanged","inputProps","_objectWithoutPropertiesLoose","_excluded","htmlFor","id","_extends","onChange","e","target","value","placeholder","onClick","useClickOutsideRef","callback","addEventListener","handleClickOutside","removeEventListener","event","contains","CustomInput","tooltipClose","tooltipIcon","tooltipText","tooltipVisible","setTooltipVisible","useState","closeTooltip","Fragment","generateKey","prefix","String","Date","now","toString","Math","random","replace","PasswordInput","capsLockWarning","rules","ruleChecked","ruleUnchecked","setFailedRules","capsLock","setCapsLock","checkRule","rule","pattern","type","count","RegExp","test","failedRules","forEach","validateInput","setCapsLockState","getModifierState","map","idx","key","useGetColor","backgroundColor","length","substring","c","parseInt","col","pow","CustomButton","disabled","small","theme","buttonProps","base","getClassName","border","getStyle","BaseModal","cancelLabel","close","closeLabel","confirm","confirmLabel","message","timeout","title","timer","setTimeout","clearTimeout","setHeaderClass","animationDuration","Array","isArray","m","NotifyModal","modalType","modalProps","QuestionModal","cancel","CustomRadio","checkColor","options","handleRadioChange","option","checked","name","CustomCheckbox","children","toggleCheck","checkProps"],"mappings":"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"}

package/dist/utils/useInjectStyles.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from 'react';
-export default function useInjectStyleSheet(nodeRef: RefObject<HTMLElement>): void;