siam-ui-utils 2.1.16 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.1.16",
+  "version": "2.2.1",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/App.jsx

@@ -6,6 +6,7 @@ import {
   AccordionItem,
 } from 'reactstrap';
 import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
+import { CustomInputRadio, CustomInputCheckbox } from './custom-input';
 import './index.css';
 import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
@@ -21,6 +22,14 @@ const App = () => {
     }
   };
 
+  const handleChecked = (item, isSelected) => {
+    console.log('Item checked:', item, 'Selected:', isSelected);
+  };
+
+  const handleChangeRadio = (ID) => {
+    console.log('ID :', ID);
+  };
+
   return (
     <div>
       <Accordion open={open} toggle={toggle}>
@@ -77,6 +86,30 @@ const App = () => {
             />
           </AccordionBody>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="5">Custom Inputs</AccordionHeader>
+          <AccordionBody accordionId="5">
+            <CustomInputCheckbox
+              className="itemCheck m-0"
+              id={1}
+              onChange={(e) => handleChecked(1, e.target.checked)}
+              label={<span className="custom-checkbox">Checkbox 1</span>}
+            />
+            <CustomInputRadio
+              name="radioTest"
+              label="1"
+              id="1"
+              defaultChecked={true}
+              onChange={handleChangeRadio}
+            />
+            <CustomInputRadio
+              name="radioTest"
+              label="2"
+              id="2"
+              onChange={handleChangeRadio}
+            />
+          </AccordionBody>
+        </AccordionItem>
       </Accordion>
     </div>
   );

package/src/assets/css/sass/_gogo.style.scss

@@ -53,55 +53,10 @@ Table of Contents
 /* 00.Variables and Imports */
 //@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700");
 
-@use "sass:color";
-
-$main-menu-item-height: 30px;
-$main-menu-width: 150px;
-$main-menu-width-lg: 150px;
-$main-menu-width-md: 130px;
-$main-menu-width-xs: 130px;
-
-$sub-menu-width: 200px;
-$sub-menu-width-lg: 200px;
-$sub-menu-width-md: 200px;
-$sub-menu-width-xs: 200px;
-
-$navbar-height: 40px;
-$navbar-height-xs: 40px;
-$navbar-height-md: 40px;
-$navbar-height-lg: 40px;
-
-$main-margin: 10px;
-$main-margin-lg: 10px;
-$main-margin-md: 10px;
-$main-margin-xs: 10px;
-
-$app-menu-width: 280px;
-
-$main-menu-item-height-mobile: 30px;
-
-$menu-collapse-time: 300ms;
-$animation-time-long: 1000ms;
-$animation-time-short: 200ms;
-
-$border-radius: 0.1rem;
-$border-radius-rounded: 0.75rem;
-
-$theme-color-purple-monster: #922c88;
-$theme-color-blue-navy: #00365a;
-$theme-color-blue-yale: #145388;
-$theme-color-blue-olympic: #008ecc;
-$theme-color-green-moss: #576a3d;
-$theme-color-green-lime: #6fb327;
-$theme-color-orange-carrot: #ed7117;
-$theme-color-red-ruby: #900604;
-$theme-color-yellow-granola: #c0a145;
-$theme-color-grey-steel: #48494b;
-
-$info-color: #3195a5;
-$success-color: #3e884f;
-$warning-color: #b69329;
-$error-color: #c43d4b;
+@use 'sass:color';
+@use './themes/variables.scss' as *;
+@use './mixins' as *;
+
 
 /* 01.Base */
 html {

package/src/assets/css/sass/_mixins.scss

@@ -1,3 +1,10 @@
+@use './themes/variables.scss' as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+
+
 // Mixin to prefix several properties at once
 // @author Hugo Giraudel
 // @param {Map} $declarations - Declarations to prefix
@@ -31,9 +38,9 @@
 // @return {List}
 
 @function top-shadow($depth) {
-  $primary-offset: nth($shadowOffsetsTop, $depth) * 1px;
-  $blur: nth($shadowBlursTop, $depth) * 4px;
-  $color: rgba(black, nth($shadowOpacitiesTop, $depth));
+  $primary-offset: list.nth($shadowOffsetsTop, $depth) * 1px;
+  $blur: list.nth($shadowBlursTop, $depth) * 4px;
+  $color: rgba(black, list.nth($shadowOpacitiesTop, $depth));
 
   @return 0 $primary-offset $blur $color;
 }
@@ -42,9 +49,9 @@
 // @param {Number} $depth - depth level
 // @return {List}
 @function bottom-shadow($depth) {
-  $primary-offset: nth($shadowOffsetsBottom, $depth) * 1px;
-  $blur: nth($shadowBlursBottom, $depth) * 5px;
-  $color: rgba(black, nth($shadowOpacitiesBottom, $depth));
+  $primary-offset: list.nth($shadowOffsetsBottom, $depth) * 1px;
+  $blur: list.nth($shadowBlursBottom, $depth) * 5px;
+  $color: rgba(black, list.nth($shadowOpacitiesBottom, $depth));
   @return 0 $primary-offset $blur $color;
 }
 
@@ -72,9 +79,9 @@ $breakpoints: (
 
 @mixin respond-above($breakpoint) {
   // If the breakpoint exists in the map.
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
     // Get the breakpoint value.
-    $breakpoint-value: map-get(
+    $breakpoint-value: map.get(
       $breakpoints,
       $breakpoint
     ); // Write the media query.
@@ -91,9 +98,9 @@ $breakpoints: (
 
 @mixin respond-below($breakpoint) {
   // If the breakpoint exists in the map.
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
     // Get the breakpoint value.
-    $breakpoint-value: map-get(
+    $breakpoint-value: map.get(
       $breakpoints,
       $breakpoint
     ); // Write the media query.
@@ -108,9 +115,9 @@ $breakpoints: (
 }
 
 @function encodecolor($string) {
-	@if type-of($string) == 'color' {
-        $hex: str-slice(ie-hex-str($string), 4);
-        $string:unquote("#{$hex}");
+	@if meta.type-of($string) == 'color' {
+        $hex: string.slice(ie-hex-str($string), 4);
+        $string: string.unquote("#{$hex}");
     }
     $string: '%23' + $string;
 	@return $string;

package/src/assets/css/sass/ampf_style.scss

@@ -1,3 +1,6 @@
+
+@use './themes/variables.scss' as *;
+
 .modal-spinner {
   position: absolute;
   top: 15rem;

package/src/assets/css/sass/main.scss

@@ -1,11 +1,11 @@
-@import "./_mixins.scss";
-@import "./_gogo.style.scss";
-@import "./_plugins.scss";
-@import "./ampf_style.scss";
+@use "./mixins" as *;
+@use "./gogo.style" as *;
+@use "./plugins/react-table.scss" as *;
+@use "./ampf_style" as *;
+
 /** your custom css code **/
-/* 
+/*
 html {
     background-color: $theme-color-1 !important;
 }
-*/ 
-
+*/

package/src/assets/css/sass/plugins/react-table.scss

@@ -1,3 +1,6 @@
+@use '../themes/variables.scss' as *;
+@use '../mixins' as *;
+
 /* 19.Datatable */
 .r-table {
     border: initial;
@@ -165,7 +168,7 @@
             }
 
             &.sortable {
-                // padding-left: 25px;
+                padding-left: 25px;
             }
         }
 

package/src/assets/css/sass/themes/gogo.light.redruby.scss

@@ -37,4 +37,5 @@ $logoPath: '';
 // $logoPathMobile: "/assets/img/logo-mobile.svg";
 $logoPathMobile: '';
 
-@import "../main.scss";
+@use "../main" as *;
+

package/src/assets/css/sass/themes/variables.scss

@@ -0,0 +1,86 @@
+$separator-color-light: #e2cdcd;
+$separator-color: #d7d7d7;
+$background-color: white;
+$foreground-color : white;
+$input-background: white;
+
+$dark-btn-background: #131113;
+$light-btn-background: #ececec;
+
+$button-text-color: #fff;
+
+$theme-color-1: #900604;
+$theme-color-2: #e7284a;
+$theme-color-3: #c06b62;
+$theme-color-4: #843a47;
+$theme-color-5: #d8667a;
+$theme-color-6: #f69682;
+
+$primary-color: #3a3a3a;
+$secondary-color: #8f8f8f;
+$muted-color: #909090;
+
+$gradient-color-1 : #992235;
+$gradient-color-2 : #790503;
+$gradient-color-3 : #900604;
+
+$shadowOffsetsTop : 1 3 10 14 19;
+$shadowBlursTop: 1.5 5 10 14 19;
+$shadowOpacitiesTop: 0.04 0.1 0.19 0.25 0.3;
+
+$shadowOffsetsBottom : 1 3 6 10 15;
+$shadowBlursBottom: 3 6 6 5 6;
+$shadowOpacitiesBottom: 0.04 0.1 0.2 0.22 0.22;
+
+// $logoPath: "/assets/img/logo-black.svg";
+$logoPath: '';
+// $logoPathMobile: "/assets/img/logo-mobile.svg";
+$logoPathMobile: '';
+
+$main-menu-item-height: 30px;
+$main-menu-width: 150px;
+$main-menu-width-lg: 150px;
+$main-menu-width-md: 130px;
+$main-menu-width-xs: 130px;
+
+$sub-menu-width: 200px;
+$sub-menu-width-lg: 200px;
+$sub-menu-width-md: 200px;
+$sub-menu-width-xs: 200px;
+
+$navbar-height: 40px;
+$navbar-height-xs: 40px;
+$navbar-height-md: 40px;
+$navbar-height-lg: 40px;
+
+$main-margin: 10px;
+$main-margin-lg: 10px;
+$main-margin-md: 10px;
+$main-margin-xs: 10px;
+
+$app-menu-width: 280px;
+
+$main-menu-item-height-mobile: 30px;
+
+$menu-collapse-time: 300ms;
+$animation-time-long: 1000ms;
+$animation-time-short: 200ms;
+
+$border-radius: 0.1rem;
+$border-radius-rounded: 0.75rem;
+
+$theme-color-purple-monster: #922c88;
+$theme-color-blue-navy: #00365a;
+$theme-color-blue-yale: #145388;
+$theme-color-blue-olympic: #008ecc;
+$theme-color-green-moss: #576a3d;
+$theme-color-green-lime: #6fb327;
+$theme-color-orange-carrot: #ed7117;
+$theme-color-red-ruby: #900604;
+$theme-color-yellow-granola: #c0a145;
+$theme-color-grey-steel: #48494b;
+
+$info-color: #3195a5;
+$success-color: #3e884f;
+$warning-color: #b69329;
+$error-color: #c43d4b;

package/src/custom-input/CustomInputCheckbox.jsx

@@ -0,0 +1,33 @@
+import { FormGroup, Label, Input } from 'reactstrap';
+import "./index.css";
+
+export const CustomInputCheckbox = ({
+  className,
+  id,
+  checked,
+  children,
+  defaultChecked,
+  disabled,
+  key,
+  label,
+  onChange,
+}) => {
+  return (
+    <FormGroup check key={key} className="custom-checkbox">
+      <Input
+        type="checkbox"
+        id={`check_${id}`}
+        className={className}
+        checked={checked}
+        onChange={onChange}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+      />
+      <Label check htmlFor={`check_${id}`}>
+        {label}
+      </Label>
+      {children}
+    </FormGroup>
+  );
+};
+export default CustomInputCheckbox;

package/src/custom-input/CustomInputRadio.jsx

@@ -0,0 +1,39 @@
+import { FormGroup, Label, Input } from 'reactstrap';
+import './index.css';
+
+export const CustomInputRadio = ({
+  className,
+  customClassName,
+  defaultChecked,
+  disabled,
+  id,
+  inline,
+  key,
+  label,
+  name,
+  onChange,
+}) => {
+  return (
+    <FormGroup
+      check
+      key={key}
+      inline={inline}
+      className={`custom-radio ${customClassName}`}
+    >
+      <Input
+        id={id}
+        type="radio"
+        name={name}
+        defaultChecked={defaultChecked}
+        onChange={onChange}
+        disabled={disabled}
+        className={className}
+      />
+      <Label check htmlFor={id}>
+        {label}
+      </Label>
+    </FormGroup>
+  );
+};
+
+export default CustomInputRadio;

package/src/custom-input/index.css

@@ -0,0 +1,168 @@
+/* Estilos para los checkbox personalizados */
+.custom-checkbox input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+}
+
+.custom-checkbox input[type="checkbox"] + label {
+  position: relative;
+  padding-left: 2rem;
+  cursor: pointer;
+  line-height:0px !important;
+}
+
+.custom-checkbox input[type="checkbox"] + label::before {
+  content: '';
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  background-color: white;
+  position: absolute;
+  left: 0;
+  top: -11px;
+  transition: background-color 0.2s, border-color 0.2s;
+  
+}
+
+.custom-checkbox input[type="checkbox"]:checked + label::before {
+  background-color: #900604;
+  border-color: #900604;
+  
+  
+}
+
+.custom-checkbox input[type="checkbox"]:checked + label::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 0.3rem;
+  width: 0.5rem;
+  height: 0.6rem;
+  border: solid white;
+  border-width: 0 0.2rem 0.2rem 0;
+  transform: rotate(45deg);
+  
+  
+}
+
+/* Estilos específicos para CheckMultiSelect */
+.check-multi-select .custom-checkbox input[type="checkbox"]:not(:checked) + label::before {
+  background-color: #900604; /* Fondo rojo en CheckMultiSelect para desmarcados */
+  border-color: #900604;
+}
+
+.check-multi-select .custom-checkbox input[type="checkbox"]:not(:checked) + label::after {
+  content: '';
+  position: absolute;
+  top: -0.29rem; /* Ajusta la posición del tilde */
+  left: 0.25rem;
+  width: 0.5rem;
+  height: 0.1rem;
+  background-color: white;
+}
+
+
+/* Estilos para checkboxes deshabilitados */
+.custom-checkbox input[type="checkbox"]:disabled + label {
+  cursor: not-allowed; /* Cambia el cursor */
+  color: #6c757d;
+  line-height:0px !important;
+}
+
+
+.custom-checkbox input[type="checkbox"]:disabled + label::before {
+  background-color: #e9ecef; 
+  border-color: #ced4da;
+
+}
+
+.custom-checkbox input[type="checkbox"]:disabled:checked + label::before {
+  background-color: #adb5bd; 
+  border-color: #adb5bd;
+}
+
+/* Estilos para los radio buttons personalizados */
+.custom-radio input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+}
+
+.custom-radio label {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.custom-radio label::before {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #ced4da;
+  background-color: white;
+  margin-right: 10px;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.custom-radio input[type="radio"]:checked + label::before {
+  background-color: #900604;  
+  border-color: #900604;
+}
+
+.custom-radio input[type="radio"]:checked + label::after {
+  content: '';
+  position: absolute;
+  left: 26px;
+  top: 44%;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 0.45rem;
+  background-color: white !important;
+  border-radius: 50%;
+}
+
+/* Estilos específicos para radio buttons deshabilitados */
+.custom-radio input[type="radio"]:disabled + label {
+  cursor: not-allowed; /* Cambia el cursor */
+  color: #6c757d; /* Color gris */
+}
+
+.custom-radio input[type="radio"]:disabled + label::before {
+  background-color: #e9ecef; /* Fondo gris claro */
+  border-color: #ced4da; /* Borde gris claro */
+}
+
+.custom-radio input[type="radio"]:disabled:checked + label::before {
+  background-color: #adb5bd; /* Fondo gris más oscuro para el estado checked */
+  border-color: #adb5bd; /* Borde gris más oscuro */
+}
+
+/* Estilos para el custom file */
+.custom-file {
+  height: calc(2.5rem + 2px);
+}
+
+.custom-file-label:focus,
+.custom-file-input:focus {
+  border-color: #900604;
+}
+
+.custom-file-label::after {
+  height: calc(2.5rem + 2px - 2px);
+  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+  background: #900604;
+  color: white; /* Ajustado para contraste */
+  border-color: #900604;
+}
+
+.custom-file-input:focus ~ .custom-file-label {
+  border-color: rgba(144, 6, 4, 0.6); 
+}
+
+.custom-file-input {
+  box-shadow: initial !important;
+}

package/src/custom-input/index.js

@@ -0,0 +1,2 @@
+export * from "./CustomInputCheckbox"
+export * from "./CustomInputRadio";

package/src/index.js

@@ -2,7 +2,9 @@ export * from './archivos-adjuntos';
 export * from './archivos-adjuntos/dropzone-uploader-dni-digital';
 export * from './bridges';
 export * from './CustomBootstrap';
+export * from './custom-input';
 export * from './CustomSelectInput';
 export * from './tomar-foto';
 export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
+