siam-ui-utils 3.0.32 → 3.1.0

package/dist/select/multi-select/index.js

@@ -1,62 +1,171 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { MultiSelect as je } from "../../node_modules/react-multi-select-component/dist/esm/index.js";
-import { Row, Col } from "reactstrap";
-import BadgeLabelMultiSelect from "./badge-label-multi-select.js";
-import { BadgeWrapper, ClickableBadge } from "./styled-component.js";
-import "./index.css";
-const CustomMultiSelect = ({
-  lista = [],
-  onListaUpdate = () => {
-  },
-  value = [],
-  styles = {}
-}) => {
-  const [selected, setSelected] = useState([]);
-  const overrideStringsCustom = {
-    selectSomeItems: "Seleccionar Estado/s",
-    allItemsAreSelected: "Todos Seleccionados",
-    search: "Buscar...",
-    selectAll: "SELECCIONAR TODOS"
-  };
-  useEffect(() => {
-    if (value.length) {
-      setSelected(value);
-    }
-  }, [value]);
-  const handleCheckChange = (selectedOptions) => {
-    if (selectedOptions) {
-      setSelected(selectedOptions);
-      onListaUpdate(selectedOptions);
-    }
-  };
-  const handleRemoveBadge = (valueToRemove) => {
-    const updated = selected.filter((item) => item.value !== valueToRemove);
-    setSelected(updated);
-    onListaUpdate(updated);
-  };
-  return /* @__PURE__ */ jsxs(Row, { className: "align-items-center", children: [
-    /* @__PURE__ */ jsx(Col, { xs: 6, style: { ...styles }, children: /* @__PURE__ */ jsx(
-      je,
-      {
-        options: lista,
-        value: selected,
-        onChange: handleCheckChange,
-        labelledBy: "Seleccionar",
-        className: "custom-multiselect",
-        overrideStrings: overrideStringsCustom
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Col, { xs: 6, style: { marginTop: "0.5rem" }, children: selected.length > 0 && /* @__PURE__ */ jsx(BadgeWrapper, { children: selected.length === lista.length ? /* @__PURE__ */ jsx(ClickableBadge, { color: "info", pill: true, children: "Todos" }) : /* @__PURE__ */ jsx(
-      BadgeLabelMultiSelect,
-      {
-        descripcionLabel: selected,
-        onRemove: handleRemoveBadge
-      }
-    ) }) })
-  ] });
-};
-export {
-  CustomMultiSelect
-};
-//# sourceMappingURL=index.js.map
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import Select, { components } from "react-select";
+import { Row, Col } from "reactstrap";
+import { CustomInputCheckbox } from "../../custom-input/CustomInputCheckbox.js";
+import BadgeLabelMultiSelect from "./badge-label-multi-select.js";
+import { BadgeWrapper, ClickableBadge } from "./styled-component.js";
+import "./index.css";
+const SELECT_ALL_VALUE = "__select_all__";
+const SELECT_ALL_OPTION = {
+  value: SELECT_ALL_VALUE,
+  label: "SELECCIONAR TODOS"
+};
+function CheckboxOption({
+  data,
+  isSelected,
+  isFocused,
+  innerRef,
+  selectProps
+}) {
+  const isSelectAll = data.value === SELECT_ALL_VALUE;
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isSelectAll) {
+      selectProps.onSelectAll?.();
+    } else {
+      selectProps.onOptionClick?.(data);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: innerRef,
+      onMouseDown: handleMouseDown,
+      onTouchEnd: handleMouseDown,
+      className: "multiselect-checkbox-option",
+      style: {
+        backgroundColor: isFocused ? "#f8e1e1" : "white",
+        borderBottom: isSelectAll ? "1px solid #ccc" : "none",
+        padding: "6px 12px",
+        cursor: "pointer"
+      },
+      children: /* @__PURE__ */ jsx(
+        CustomInputCheckbox,
+        {
+          id: `opt_${data.value}`,
+          checked: isSelected,
+          onChange: () => {
+          },
+          label: /* @__PURE__ */ jsx("span", { style: { fontWeight: isSelectAll ? "bold" : "normal" }, children: data.label })
+        }
+      )
+    }
+  );
+}
+function CustomValueContainer({ children, getValue, ...props }) {
+  const selected = getValue();
+  const totalOptions = props.selectProps.options.length - 1;
+  const count = selected.length;
+  const isAll = count > 0 && count === totalOptions;
+  const text = isAll ? "Todos Seleccionados" : count > 0 ? selected.map((s) => s.label).join(", ") : null;
+  console.log("selected", selected, text);
+  return /* @__PURE__ */ jsxs(components.ValueContainer, { ...props, getValue, children: [
+    text ? /* @__PURE__ */ jsx("span", { style: { color: "#333" }, children: text }) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          color: count ? "transparent" : "#999",
+          position: "absolute"
+        },
+        children: props.selectProps.placeholder
+      }
+    ),
+    children[children.length - 1]
+  ] });
+}
+const CUSTOM_COMPONENTS = {
+  Option: CheckboxOption,
+  ValueContainer: CustomValueContainer
+};
+const CustomMultiSelect = ({
+  lista = [],
+  onListaUpdate = () => {
+  },
+  value = [],
+  styles = {}
+}) => {
+  const [selected, setSelected] = useState(value);
+  const isInternalChange = useRef(false);
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    setSelected(value);
+  }, [JSON.stringify(value)]);
+  const update = useCallback(
+    (newSelected) => {
+      isInternalChange.current = true;
+      setSelected(newSelected);
+      onListaUpdate(newSelected);
+    },
+    [onListaUpdate]
+  );
+  const handleOptionClick = useCallback(
+    (data) => {
+      setSelected((prev) => {
+        const isAlreadySelected = prev.some((s) => s.value === data.value);
+        const next = isAlreadySelected ? prev.filter((s) => s.value !== data.value) : [...prev, data];
+        isInternalChange.current = true;
+        onListaUpdate(next);
+        return next;
+      });
+    },
+    [onListaUpdate]
+  );
+  const handleSelectAll = useCallback(() => {
+    setSelected((prev) => {
+      const next = prev.length === lista.length ? [] : [...lista];
+      isInternalChange.current = true;
+      onListaUpdate(next);
+      return next;
+    });
+  }, [lista, onListaUpdate]);
+  const handleRemoveBadge = useCallback(
+    (valueToRemove) => {
+      update(selected.filter((item) => item.value !== valueToRemove));
+    },
+    [selected, update]
+  );
+  const allSelected = lista.length > 0 && selected.length === lista.length;
+  const optionsWithSelectAll = [SELECT_ALL_OPTION, ...lista];
+  const isOptionSelected = useCallback(
+    (option) => option.value === SELECT_ALL_VALUE ? allSelected : selected.some((s) => s.value === option.value),
+    [allSelected, selected]
+  );
+  return /* @__PURE__ */ jsxs(Row, { className: "align-items-center", children: [
+    /* @__PURE__ */ jsx(Col, { xs: 6, style: styles, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        options: optionsWithSelectAll,
+        value: selected,
+        onChange: update,
+        isMulti: true,
+        placeholder: "Seleccione",
+        noOptionsMessage: () => "Sin opciones",
+        className: "custom-multiselect",
+        classNamePrefix: "custom-multiselect",
+        components: CUSTOM_COMPONENTS,
+        closeMenuOnSelect: false,
+        hideSelectedOptions: false,
+        isSearchable: false,
+        onSelectAll: handleSelectAll,
+        onOptionClick: handleOptionClick,
+        isOptionSelected
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Col, { xs: 6, children: selected.length > 0 && /* @__PURE__ */ jsx(BadgeWrapper, { children: allSelected ? /* @__PURE__ */ jsx(ClickableBadge, { color: "info", pill: true, children: "Todos" }) : /* @__PURE__ */ jsx(
+      BadgeLabelMultiSelect,
+      {
+        descripcionLabel: selected,
+        onRemove: handleRemoveBadge
+      }
+    ) }) })
+  ] });
+};
+export {
+  CustomMultiSelect
+};
+//# sourceMappingURL=index.js.map

package/dist/select/multi-select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/select/multi-select/index.jsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { MultiSelect } from 'react-multi-select-component';\r\nimport { Col, Row } from 'reactstrap';\r\nimport BadgeLabelMultiSelect from './badge-label-multi-select';\r\nimport { BadgeWrapper, ClickableBadge } from './styled-component';\r\nimport './index.scss';\r\n\r\nexport const CustomMultiSelect = ({\r\n  lista = [],\r\n  onListaUpdate = () => { },\r\n  value = [],\r\n  styles = {},\r\n}) => {\r\n  const [selected, setSelected] = useState([]);\r\n  const overrideStringsCustom = {\r\n    selectSomeItems: 'Seleccionar Estado/s',\r\n    allItemsAreSelected: 'Todos Seleccionados',\r\n    search: 'Buscar...',\r\n    selectAll: 'SELECCIONAR TODOS',\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (value.length) {\r\n      setSelected(value);\r\n    }\r\n  }, [value]);\r\n\r\n  const handleCheckChange = (selectedOptions) => {\r\n    if (selectedOptions) {\r\n      setSelected(selectedOptions);\r\n      onListaUpdate(selectedOptions);\r\n    }\r\n  };\r\n\r\n  const handleRemoveBadge = (valueToRemove) => {\r\n    const updated = selected.filter((item) => item.value !== valueToRemove);\r\n    setSelected(updated);\r\n    onListaUpdate(updated);\r\n  };\r\n\r\n  return (\r\n    <Row className=\"align-items-center\" >\r\n      <Col xs={6} style={{ ...styles }}>\r\n        <MultiSelect\r\n          options={lista}\r\n          value={selected}\r\n          onChange={handleCheckChange}\r\n          labelledBy=\"Seleccionar\"\r\n          className=\"custom-multiselect\"\r\n          overrideStrings={overrideStringsCustom}\r\n        />\r\n      </Col>\r\n      <Col xs={6} style={{ marginTop: '0.5rem' }}>\r\n        {selected.length > 0 && (\r\n          <BadgeWrapper>\r\n            {selected.length === lista.length ? (\r\n              <ClickableBadge color=\"info\" pill>\r\n                Todos\r\n              </ClickableBadge>\r\n            ) : (\r\n              <BadgeLabelMultiSelect\r\n                descripcionLabel={selected}\r\n                onRemove={handleRemoveBadge}\r\n              />\r\n            )}\r\n          </BadgeWrapper>\r\n        )}\r\n      </Col>\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default CustomMultiSelect;\r\n"],"names":["MultiSelect"],"mappings":";;;;;;;AAOO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAQ,CAAA;AAAA,EACR,gBAAgB,MAAM;AAAA,EAAE;AAAA,EACxB,QAAQ,CAAA;AAAA,EACR,SAAS,CAAA;AACX,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAA,CAAE;AAC3C,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAGb,YAAU,MAAM;AACd,QAAI,MAAM,QAAQ;AAChB,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAoB,CAAC,oBAAoB;AAC7C,QAAI,iBAAiB;AACnB,kBAAY,eAAe;AAC3B,oBAAc,eAAe;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,oBAAoB,CAAC,kBAAkB;AAC3C,UAAM,UAAU,SAAS,OAAO,CAAC,SAAS,KAAK,UAAU,aAAa;AACtE,gBAAY,OAAO;AACnB,kBAAc,OAAO;AAAA,EACvB;AAEA,SACE,qBAAC,KAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,oBAAC,OAAI,IAAI,GAAG,OAAO,EAAE,GAAG,UACtB,UAAA;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,iBAAiB;AAAA,MAAA;AAAA,IAAA,GAErB;AAAA,IACA,oBAAC,KAAA,EAAI,IAAI,GAAG,OAAO,EAAE,WAAW,SAAA,GAC7B,UAAA,SAAS,SAAS,yBAChB,cAAA,EACE,UAAA,SAAS,WAAW,MAAM,SACzB,oBAAC,gBAAA,EAAe,OAAM,QAAO,MAAI,MAAC,UAAA,QAAA,CAElC,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,UAAU;AAAA,MAAA;AAAA,IAAA,GAGhB,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/select/multi-select/index.jsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\r\nimport Select, { components } from 'react-select';\r\nimport { Col, Row } from 'reactstrap';\r\nimport { CustomInputCheckbox } from '../../custom-input/CustomInputCheckbox';\r\nimport BadgeLabelMultiSelect from './badge-label-multi-select';\r\nimport { BadgeWrapper, ClickableBadge } from './styled-component';\r\nimport './index.scss';\r\n\r\nconst SELECT_ALL_VALUE = '__select_all__';\r\nconst SELECT_ALL_OPTION = {\r\n  value: SELECT_ALL_VALUE,\r\n  label: 'SELECCIONAR TODOS',\r\n};\r\n\r\nfunction CheckboxOption({\r\n  data,\r\n  isSelected,\r\n  isFocused,\r\n  innerRef,\r\n  selectProps,\r\n}) {\r\n  const isSelectAll = data.value === SELECT_ALL_VALUE;\r\n\r\n  const handleMouseDown = (e) => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    if (isSelectAll) {\r\n      selectProps.onSelectAll?.();\r\n    } else {\r\n      selectProps.onOptionClick?.(data);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      ref={innerRef}\r\n      onMouseDown={handleMouseDown}\r\n      onTouchEnd={handleMouseDown}\r\n      className=\"multiselect-checkbox-option\"\r\n      style={{\r\n        backgroundColor: isFocused ? '#f8e1e1' : 'white',\r\n        borderBottom: isSelectAll ? '1px solid #ccc' : 'none',\r\n        padding: '6px 12px',\r\n        cursor: 'pointer',\r\n      }}\r\n    >\r\n      <CustomInputCheckbox\r\n        id={`opt_${data.value}`}\r\n        checked={isSelected}\r\n        onChange={() => {}}\r\n        label={\r\n          <span style={{ fontWeight: isSelectAll ? 'bold' : 'normal' }}>\r\n            {data.label}\r\n          </span>\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CustomValueContainer({ children, getValue, ...props }) {\r\n  const selected = getValue();\r\n  const totalOptions = props.selectProps.options.length - 1;\r\n  const count = selected.length;\r\n  const isAll = count > 0 && count === totalOptions;\r\n\r\n  const text = isAll\r\n    ? 'Todos Seleccionados'\r\n    : count > 0\r\n    ? selected.map((s) => s.label).join(', ')\r\n    : null;\r\n  console.log('selected', selected, text);\r\n\r\n  return (\r\n    <components.ValueContainer {...props} getValue={getValue}>\r\n      {text ? (\r\n        <span style={{ color: '#333' }}>{text}</span>\r\n      ) : (\r\n        <span\r\n          style={{\r\n            color: count ? 'transparent' : '#999',\r\n            position: 'absolute',\r\n          }}\r\n        >\r\n          {props.selectProps.placeholder}\r\n        </span>\r\n      )}\r\n      {children[children.length - 1]}\r\n    </components.ValueContainer>\r\n  );\r\n}\r\n\r\nconst CUSTOM_COMPONENTS = {\r\n  Option: CheckboxOption,\r\n  ValueContainer: CustomValueContainer,\r\n};\r\n\r\nexport const CustomMultiSelect = ({\r\n  lista = [],\r\n  onListaUpdate = () => {},\r\n  value = [],\r\n  styles = {},\r\n}) => {\r\n  const [selected, setSelected] = useState(value);\r\n  const isInternalChange = useRef(false);\r\n\r\n  useEffect(() => {\r\n    if (isInternalChange.current) {\r\n      isInternalChange.current = false;\r\n      return;\r\n    }\r\n    setSelected(value);\r\n  }, [JSON.stringify(value)]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  const update = useCallback(\r\n    (newSelected) => {\r\n      isInternalChange.current = true;\r\n      setSelected(newSelected);\r\n      onListaUpdate(newSelected);\r\n    },\r\n    [onListaUpdate]\r\n  );\r\n\r\n  const handleOptionClick = useCallback(\r\n    (data) => {\r\n      setSelected((prev) => {\r\n        const isAlreadySelected = prev.some((s) => s.value === data.value);\r\n        const next = isAlreadySelected\r\n          ? prev.filter((s) => s.value !== data.value)\r\n          : [...prev, data];\r\n        isInternalChange.current = true;\r\n        onListaUpdate(next);\r\n        return next;\r\n      });\r\n    },\r\n    [onListaUpdate]\r\n  );\r\n\r\n  const handleSelectAll = useCallback(() => {\r\n    setSelected((prev) => {\r\n      const next = prev.length === lista.length ? [] : [...lista];\r\n      isInternalChange.current = true;\r\n      onListaUpdate(next);\r\n      return next;\r\n    });\r\n  }, [lista, onListaUpdate]);\r\n\r\n  const handleRemoveBadge = useCallback(\r\n    (valueToRemove) => {\r\n      update(selected.filter((item) => item.value !== valueToRemove));\r\n    },\r\n    [selected, update]\r\n  );\r\n\r\n  const allSelected = lista.length > 0 && selected.length === lista.length;\r\n  const optionsWithSelectAll = [SELECT_ALL_OPTION, ...lista];\r\n\r\n  const isOptionSelected = useCallback(\r\n    (option) =>\r\n      option.value === SELECT_ALL_VALUE\r\n        ? allSelected\r\n        : selected.some((s) => s.value === option.value),\r\n    [allSelected, selected]\r\n  );\r\n\r\n  return (\r\n    <Row className=\"align-items-center\">\r\n      <Col xs={6} style={styles}>\r\n        <Select\r\n          options={optionsWithSelectAll}\r\n          value={selected}\r\n          onChange={update}\r\n          isMulti\r\n          placeholder=\"Seleccione\"\r\n          noOptionsMessage={() => 'Sin opciones'}\r\n          className=\"custom-multiselect\"\r\n          classNamePrefix=\"custom-multiselect\"\r\n          components={CUSTOM_COMPONENTS}\r\n          closeMenuOnSelect={false}\r\n          hideSelectedOptions={false}\r\n          isSearchable={false}\r\n          onSelectAll={handleSelectAll}\r\n          onOptionClick={handleOptionClick}\r\n          isOptionSelected={isOptionSelected}\r\n        />\r\n      </Col>\r\n      <Col xs={6}>\r\n        {selected.length > 0 && (\r\n          <BadgeWrapper>\r\n            {allSelected ? (\r\n              <ClickableBadge color=\"info\" pill>\r\n                Todos\r\n              </ClickableBadge>\r\n            ) : (\r\n              <BadgeLabelMultiSelect\r\n                descripcionLabel={selected}\r\n                onRemove={handleRemoveBadge}\r\n              />\r\n            )}\r\n          </BadgeWrapper>\r\n        )}\r\n      </Col>\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default CustomMultiSelect;\r\n"],"names":[],"mappings":"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"}

package/dist/select/multi-select/styled-component.js

@@ -1,24 +1,23 @@
-import { Badge } from "reactstrap";
-import styled from "styled-components";
-const ClickableBadge = styled(Badge)`
-  cursor: pointer;
-  width: fit-content;
-  white-space: nowrap;
-`;
-const BadgeWrapper = styled.div`
-  display: inline-flex;
-  flex-wrap: nowrap;
-  gap: 10px;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  background-color: #f1f1f1;
-  border: 1px solid #ccc;
-  margin-top: 2.8rem;
-  max-width: 120%;
-  overflow-x: auto;
-`;
-export {
-  BadgeWrapper,
-  ClickableBadge
-};
-//# sourceMappingURL=styled-component.js.map
+import { Badge } from "reactstrap";
+import styled from "styled-components";
+const ClickableBadge = styled(Badge)`
+  cursor: pointer;
+  width: fit-content;
+  white-space: nowrap;
+`;
+const BadgeWrapper = styled.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  max-width: 100%;
+  overflow-x: auto;
+`;
+export {
+  BadgeWrapper,
+  ClickableBadge
+};
+//# sourceMappingURL=styled-component.js.map

package/dist/select/multi-select/styled-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-component.js","sources":["../../../src/select/multi-select/styled-component.js"],"sourcesContent":["import { Badge } from 'reactstrap';\r\nimport styled from 'styled-components';\r\n\r\nexport const ClickableBadge = styled(Badge)`\r\n  cursor: pointer;\r\n  width: fit-content;\r\n  white-space: nowrap;\r\n`;\r\n\r\nexport const BadgeWrapper = styled.div`\r\n  display: inline-flex;\r\n  flex-wrap: nowrap;\r\n  gap: 10px;\r\n  padding: 0.5rem;\r\n  border-radius: 0.5rem;\r\n  background-color: #f1f1f1;\r\n  border: 1px solid #ccc;\r\n  margin-top: 2.8rem;\r\n  max-width: 120%;\r\n  overflow-x: auto;\r\n`;\r\n"],"names":[],"mappings":";;AAGY,MAAC,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAC,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styled-component.js","sources":["../../../src/select/multi-select/styled-component.js"],"sourcesContent":["import { Badge } from 'reactstrap';\r\nimport styled from 'styled-components';\r\n\r\nexport const ClickableBadge = styled(Badge)`\r\n  cursor: pointer;\r\n  width: fit-content;\r\n  white-space: nowrap;\r\n`;\r\n\r\nexport const BadgeWrapper = styled.div`\r\n  display: inline-flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n  padding: 0.5rem;\r\n  border-radius: 0.5rem;\r\n  background-color: #f1f1f1;\r\n  border: 1px solid #ccc;\r\n  max-width: 100%;\r\n  overflow-x: auto;\r\n`;\r\n"],"names":[],"mappings":";;AAGY,MAAC,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAC,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/timer/index.js

@@ -1,60 +1,60 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import "./styles.css";
-const formatTiempo = (ms) => {
-  if (ms == null) return "--:--";
-  const absMs = Math.abs(ms);
-  const totalSec = Math.floor(absMs / 1e3);
-  const min = Math.floor(totalSec / 60);
-  const sec = totalSec % 60;
-  const formatted = `${min.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
-  return ms < 0 ? `-${formatted}` : formatted;
-};
-const getTimerColorClass = (ms, maxTime) => {
-  if (!maxTime) return "";
-  const percent = ms / maxTime;
-  if (percent > 0.33) return "timer-green";
-  if (percent > 0.15) return "timer-yellow";
-  if (percent > 0) return "timer-red";
-  if (ms === 0) return "timer-out";
-  if (ms < 0) return "timer-over";
-  return "";
-};
-const Timer = ({
-  initialMinutes = 0,
-  icon = true,
-  className = "",
-  active = true,
-  style = {}
-}) => {
-  const initialMs = initialMinutes * 60 * 1e3;
-  const [ms, setMs] = useState(initialMs);
-  const intervalRef = useRef();
-  useEffect(() => {
-    if (!active) return;
-    intervalRef.current = setInterval(() => {
-      setMs((prev) => prev - 1e3);
-    }, 1e3);
-    return () => clearInterval(intervalRef.current);
-  }, [active]);
-  useEffect(() => {
-    setMs(initialMs);
-  }, [initialMs]);
-  const timerColorClass = getTimerColorClass(ms, initialMs);
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: `av-video-timer timer ${timerColorClass} ${className}`,
-      style,
-      children: [
-        icon && /* @__PURE__ */ jsx("i", { className: "icon-clock timer" }),
-        formatTiempo(ms)
-      ]
-    }
-  );
-};
-export {
-  Timer,
-  formatTiempo
-};
-//# sourceMappingURL=index.js.map
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import "./styles.css";
+const formatTiempo = (ms) => {
+  if (ms == null) return "--:--";
+  const absMs = Math.abs(ms);
+  const totalSec = Math.floor(absMs / 1e3);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  const formatted = `${min.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
+  return ms < 0 ? `-${formatted}` : formatted;
+};
+const getTimerColorClass = (ms, maxTime) => {
+  if (!maxTime) return "";
+  const percent = ms / maxTime;
+  if (percent > 0.33) return "timer-green";
+  if (percent > 0.15) return "timer-yellow";
+  if (percent > 0) return "timer-red";
+  if (ms === 0) return "timer-out";
+  if (ms < 0) return "timer-over";
+  return "";
+};
+const Timer = ({
+  initialMinutes = 0,
+  icon = true,
+  className = "",
+  active = true,
+  style = {}
+}) => {
+  const initialMs = initialMinutes * 60 * 1e3;
+  const [ms, setMs] = useState(initialMs);
+  const intervalRef = useRef();
+  useEffect(() => {
+    if (!active) return;
+    intervalRef.current = setInterval(() => {
+      setMs((prev) => prev - 1e3);
+    }, 1e3);
+    return () => clearInterval(intervalRef.current);
+  }, [active]);
+  useEffect(() => {
+    setMs(initialMs);
+  }, [initialMs]);
+  const timerColorClass = getTimerColorClass(ms, initialMs);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `av-video-timer timer ${timerColorClass} ${className}`,
+      style,
+      children: [
+        icon && /* @__PURE__ */ jsx("i", { className: "icon-clock timer" }),
+        formatTiempo(ms)
+      ]
+    }
+  );
+};
+export {
+  Timer,
+  formatTiempo
+};
+//# sourceMappingURL=index.js.map

package/dist/timer/styles.css

@@ -1,59 +1,59 @@
-.av-video-timer {
-  color: inherit;
-  margin: 0 12px;
-  flex: 1;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  font-weight: bold;
-  align-items: center;
-  font-size: 1.3em;
-  width: 100%;
-  margin: 8px 0;
-}
-
-.timer {
-  font-size: clamp(5px, 2vw, 20px);
-  margin-right: 4px;
-}
-
-.timer-green {
-  color: #28a745;
-}
-
-.timer-yellow {
-  color: #ffc107;
-}
-
-.timer-red {
-  color: #bd0300;
-}
-
-@keyframes vibrate {
-  0% {
-    transform: translateX(0);
-  }
-  20% {
-    transform: translateX(-3px);
-  }
-  40% {
-    transform: translateX(3px);
-  }
-  60% {
-    transform: translateX(-3px);
-  }
-  80% {
-    transform: translateX(3px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-.timer-out {
-  color: #000000;
-  animation: vibrate 0.3s linear infinite;
-}
-
-.timer-over {
-  color: #c00805;
+.av-video-timer {
+  color: inherit;
+  margin: 0 12px;
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+  align-items: center;
+  font-size: 1.3em;
+  width: 100%;
+  margin: 8px 0;
+}
+
+.timer {
+  font-size: clamp(5px, 2vw, 20px);
+  margin-right: 4px;
+}
+
+.timer-green {
+  color: #28a745;
+}
+
+.timer-yellow {
+  color: #ffc107;
+}
+
+.timer-red {
+  color: #bd0300;
+}
+
+@keyframes vibrate {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-3px);
+  }
+  40% {
+    transform: translateX(3px);
+  }
+  60% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.timer-out {
+  color: #000000;
+  animation: vibrate 0.3s linear infinite;
+}
+
+.timer-over {
+  color: #c00805;
 }