slicejs-cli 2.0.6 → 2.0.7

package/ProjectTemplate/src/Components/Visual/Button/Button.js

@@ -1,70 +0,0 @@
-export default class Button extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$value = this.querySelector('.slice_button_value');
-      this.$button = this.querySelector('.slice_button');
-      if (props.onClickCallback) {
-         this.onClickCallback = props.onClickCallback;
-         this.querySelector('.slice_button_container').addEventListener(
-            'click',
-            async () => await this.onClickCallback()
-         );
-         //revisar esta verga por si habria q deletear o no
-      }
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['value', 'onClickCallback', 'customColor'];
-   }
-
-   async init() {
-      if (this.icon) {
-         this.$icon = await slice.build('Icon', {
-            name: this.icon,
-            size: '25px',
-            color: 'var(--primary-color-contrast)',
-            // iconStyle: this._icon.iconStyle,
-         });
-         this.$button.appendChild(this.$icon);
-      }
-   }
-
-   get icon() {
-      return this._icon;
-   }
-
-   set icon(value) {
-      this._icon = value;
-      if (!this.$icon) return;
-      this.$icon.name = value.name;
-      this.$icon.iconStyle = value.iconStyle;
-   }
-
-   get value() {
-      return this._value;
-   }
-
-   set value(value) {
-      this._value = value;
-      this.$value.textContent = value;
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      if (value.button) {
-         this.style = `--primary-color: ${value.button};`;
-      }
-      if (value.label) {
-         this.$button.style = `--primary-color-contrast: ${value.label};`;
-      }
-   }
-
-   handleButtonClick() {
-      this.onClickCallback();
-   }
-}
-window.customElements.define('slice-button', Button);

package/ProjectTemplate/src/Components/Visual/Card/Card.css

@@ -1,68 +0,0 @@
-.title {
-  font-size: 20px;
-  font-weight: bold;
-  color: var(--font-primary-color);
-  text-align: center;
-}
-
-.slice-card {
-  height: 220px;
-  position: relative;
-  font-family: var(--font-family);
-  background-color: var(--seconday-background-color);
-  border-radius: var(--border-radius-slice);
-  transition: all 300ms;
-}
-
-.slice-card:hover {
-  .card_cover {
-    height: auto;
-    transform: translateY(-70%);
-    box-shadow: 0px 10px 10px #00000050;
-  }
-  .card_info {
-    height: 100%;
-    transform: translateY(20%);
-    box-shadow: 0px -10px 10px #00000050;
-  }
-}
-.card_cover {
-  width: 100%;
-  height: 90%;
-  background: var(--primary-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  z-index: 1;
-  transition: all 400ms ease;
-  border-radius: var(--border-radius-slice);
-}
-
-.card_info {
-  width: 100%;
-  height: 200px;
-  bottom: 0;
-  color: var(--font-secondary-color);
-  background: var(--secondary-background-color);
-  position: absolute;
-  font-size: 20px;
-  transition: all 400ms cubic-bezier(0.5, 0, 0, 1);
-  border-radius: var(--border-radius-slice);
-}
-
-.card_info p {
-  text-align: center;
-  color: var(--font-secondary-color);
-  padding: 0px 20px 20px 20px;
-  font-size: 15px;
-  display: -webkit-box;
-  display: -moz-box;
-  display: box;
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  box-orient: vertical;
-  -webkit-line-clamp: 5;
-  line-clamp: 5;
-  overflow: hidden;
-}

package/ProjectTemplate/src/Components/Visual/Card/Card.html

@@ -1,7 +0,0 @@
-<div class="slice-card">
-  <div class="card_cover"></div>
-  <div class="card_info">
-    <h1 class="title">Slice Card Title</h1>
-    <p class="text">Slice Card text</p>
-  </div>
-</div>

package/ProjectTemplate/src/Components/Visual/Card/Card.js

@@ -1,107 +0,0 @@
-export default class Card extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$card = this.querySelector('.slice-card');
-      this.$title = this.querySelector('.title');
-      this.$text = this.querySelector('.text');
-      this.$cover = this.querySelector('.card_cover');
-      slice.controller.setComponentProps(this, props);
-
-      this.$cover.addEventListener('click', () => {
-         this.isOpen = !this.isOpen;
-      });
-
-      this.$card.addEventListener('mouseover', () => {
-         this.$cover.style.backgroundColor = this.$color.icon;
-         this.$icon.color = this.$color.card;
-      });
-      this.$card.addEventListener('mouseout', () => {
-         this.$cover.style.backgroundColor = this.$color.card;
-         this.$icon.color = this.$color.icon;
-      });
-
-      this.debuggerProps = ['title', 'text', 'icon', 'customColor', 'isOpen'];
-   }
-
-   async init() {
-      if (this.isOpen === undefined) {
-         this.isOpen = false;
-      }
-
-      if (!this.customColor) {
-         this.$color = {
-            icon: 'var(--primary-color-contrast)',
-            card: 'var(--primary-color)',
-         };
-      }
-
-      if (!this._icon) {
-         this.icon = { name: 'sliceJs', iconStyle: 'filled' };
-      }
-
-      this.$icon = await slice.build('Icon', {
-         name: this.icon.name,
-         size: '150px',
-         color: this.$color.icon,
-         iconStyle: this._icon.iconStyle,
-      });
-      this.$cover.appendChild(this.$icon);
-   }
-
-   get title() {
-      return this._title;
-   }
-
-   set title(value) {
-      this._title = value;
-      this.$title.textContent = value;
-   }
-
-   get text() {
-      return this._text;
-   }
-
-   set text(value) {
-      this._text = value;
-      this.$text.textContent = value;
-   }
-
-   get icon() {
-      return this._icon;
-   }
-
-   set icon(value) {
-      this._icon = value;
-      if (!this.$icon) return;
-      this.$icon.name = value.name;
-      this.$icon.iconStyle = value.iconStyle;
-   }
-
-   get isOpen() {
-      return this._isOpen;
-   }
-
-   set isOpen(boolean) {
-      this._isOpen = boolean;
-      if (boolean) {
-         this.$cover.style.zIndex = 0;
-      } else {
-         this.$cover.style.zIndex = 1;
-      }
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      this.$color = value;
-      if (value.card) {
-         this.$cover.style.backgroundColor = value.card;
-      }
-   }
-}
-
-customElements.define('slice-card', Card);

package/ProjectTemplate/src/Components/Visual/Checkbox/Checkbox.css

@@ -1,87 +0,0 @@
-.slice_checkbox input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.slice_checkbox_container {
-  width: fit-content;
-}
-.slice_checkbox {
-  display: flex;
-  align-items: center;
-  user-select: none;
-  margin-top: 25px;
-  margin-bottom: 25px;
-  position: relative;
-  user-select: none;
-}
-.checkbox_label {
-  margin: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-.checkmark {
-  position: relative;
-  top: 0;
-  left: 0;
-  height: 1.3em;
-  width: 1.3em;
-  background-color: var(--secondary-background-color);
-  border: var(--slice-border) solid var(--primary-color);
-  transition: all 0.3s;
-  border-radius: var(--border-radius-slice);
-  cursor: pointer;
-}
-.slice_checkbox input:checked ~ .checkmark {
-  border: var(--slice-border) solid var(--success-color);
-  background-color: var(--success-color);
-  animation: pop 0.5s;
-  animation-direction: alternate;
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.slice_checkbox input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.slice_checkbox .checkmark:after {
-  left: 0.45em;
-  top: 0.25em;
-  width: 0.25em;
-  height: 0.5em;
-  border: solid white;
-  border-width: 0 0.15em 0.15em 0;
-  transform: rotate(45deg);
-}
-.disabled {
-  border-color: var(--disabled-color);
-  background-color: var(--primary-color-shade);
-  color: var(--disabled-color);
-  cursor: not-allowed;
-}
-@keyframes pop {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.9);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-.checkbox_label {
-  margin-left: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}

package/ProjectTemplate/src/Components/Visual/Checkbox/Checkbox.html

@@ -1,8 +0,0 @@
-<div class="slice_checkbox_container">
-  <div class="slice_checkbox">
-    <label>
-      <input type="checkbox" />
-      <div class="checkmark"></div>
-    </label>
-  </div>
-</div>

package/ProjectTemplate/src/Components/Visual/Checkbox/Checkbox.js

@@ -1,86 +0,0 @@
-export default class Checkbox extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$checkbox = this.querySelector('.slice_checkbox');
-      this.$checkmark = this.querySelector('.checkmark');
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['checked', 'disabled', 'customColor', 'labelPlacement'];
-   }
-
-   init() {
-      if (this._checked === undefined) {
-         this.checked = false;
-      }
-
-      if (!this.disabled) {
-         this._disabled = false;
-      }
-   }
-
-   get checked() {
-      return this._checked;
-   }
-
-   set checked(value) {
-      this._checked = value;
-      this.querySelector('input').checked = value;
-   }
-
-   get label() {
-      return this._label;
-   }
-
-   set label(value) {
-      this._label = value;
-      if (this.querySelector('.checkbox_label')) {
-         this.querySelector('.checkbox_label').textContent = value;
-      } else {
-         const label = document.createElement('label');
-         label.classList.add('checkbox_label');
-         label.textContent = value;
-         this.$checkbox.appendChild(label);
-      }
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      this.style = `--success-color: ${value};`;
-   }
-
-   get labelPlacement() {
-      return this._labelPlacement;
-   }
-
-   set labelPlacement(value) {
-      if (value === 'left') {
-         this.$checkbox.style = ` flex-direction: row-reverse;`;
-      }
-      if (value === 'right') {
-         this.$checkbox.style = `flex-direction: row;`;
-      }
-      if (value === 'top') {
-         this.$checkbox.style = `flex-direction: column-reverse;`;
-      }
-      if (value === 'bottom') {
-         this.$checkbox.style = `flex-direction: column;`;
-      }
-   }
-
-   get disabled() {
-      return this._disabled;
-   }
-
-   set disabled(value) {
-      this._disabled = value;
-      this.querySelector('input').disabled = value;
-      this.$checkmark.classList.add('disabled');
-   }
-}
-
-customElements.define('slice-checkbox', Checkbox);

package/ProjectTemplate/src/Components/Visual/Details/Details.css

@@ -1,70 +0,0 @@
-slice-details {
-   font-family: var(--font-family);
-   color: var(--font-primary-color);
-}
-.details_summary {
-   cursor: pointer;
-   display: flex;
-   align-items: center;
-   border-bottom: var(--slice-border) solid var(--primary-color);
-   padding: 10px;
-}
-.details_summary .caret {
-   transform: rotate(-90deg);
-   margin-right: 10px;
-   color: var(--primary-color);
-}
-.details_title {
-   width: 100%;
-   font-weight: bold;
-}
-.details_text {
-   color: var(--font-secondary-color);
-}
-.details_container {
-   padding-left: 5px;
-   padding: 10px;
-   background-color: var(--secondary-background-color);
-   border-radius: var(--border-radius-slice);
-   visibility: hidden;
-   display: block;
-   height: 0; /* Inicia con altura 0 */
-   overflow: hidden;
-   transition:
-      height 0.3s ease,
-      visibility 0.3s ease; /* Agrega transición a height */
-}
-
-.details_open {
-   height: auto; /* Altura se ajustará automáticamente después de la transición */
-   visibility: visible;
-}
-
-.symbol {
-   border-radius: 5px;
-   width: 20px;
-   height: 20px;
-   position: relative;
-   transition: transform 0.3s ease;
-}
-
-.symbol::before,
-.symbol::after {
-   content: '';
-   position: absolute;
-   background-color: var(--primary-color);
-   width: 15px;
-   height: 2px;
-   top: 50%;
-   left: 0;
-   transition: transform 0.5s ease;
-}
-
-.symbol.plus::after {
-   transform: rotate(90deg);
-}
-
-.symbol.minus::before,
-.symbol.minus::after {
-   transform: rotate(360deg);
-}

package/ProjectTemplate/src/Components/Visual/Details/Details.html

@@ -1,9 +0,0 @@
-<div class="details_summary">
-   <div class="symbol plus"></div>
-   <span class="details_title"></span>
-</div>
-<div class="details_container">
-   <div class="full_details">
-      <div class="details_text"></div>
-   </div>
-</div>

package/ProjectTemplate/src/Components/Visual/Details/Details.js

@@ -1,76 +0,0 @@
-export default class Details extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$detailsTitle = this.querySelector('.details_title');
-      this.$detailsText = this.querySelector('.details_text');
-      this.$details = this.querySelector('.full_details');
-      this.$summary = this.querySelector('.details_summary');
-      this.$container = this.querySelector('.details_container'); // Referencia al contenedor
-
-      this.$summary.addEventListener('click', () => {
-         this.toggleDetails();
-      });
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['title', 'text'];
-   }
-
-   toggleDetails() {
-      const isOpen = this.$container.classList.toggle('details_open');
-      const symbol = this.$summary.querySelector('.symbol');
-
-      if (isOpen) {
-         symbol.classList.remove('plus');
-         symbol.classList.add('minus');
-
-         // Obtener la altura total del contenedor
-         const fullHeight = this.$container.scrollHeight + 'px';
-
-         // Establecer la altura para iniciar la animación
-         this.$container.style.height = fullHeight;
-
-         // Después de la transición, ajustar la altura a 'auto'
-         this.$container.addEventListener('transitionend', function onTransitionEnd() {
-            this.style.height = 'auto';
-            this.removeEventListener('transitionend', onTransitionEnd);
-         });
-      } else {
-         symbol.classList.remove('minus');
-         symbol.classList.add('plus');
-
-         // Establecer la altura para iniciar la animación de cierre
-         this.$container.style.height = this.$container.scrollHeight + 'px';
-
-         // Forzar el reflujo para que la transición funcione
-         requestAnimationFrame(() => {
-            this.$container.style.height = '0';
-         });
-      }
-   }
-
-   get title() {
-      return this._title;
-   }
-
-   set title(value) {
-      this._title = value;
-      this.$detailsTitle.textContent = value;
-   }
-
-   get text() {
-      return this._text;
-   }
-
-   set text(value) {
-      this._text = value;
-      this.$detailsText.textContent = value;
-   }
-
-   addDetail(value) {
-      this.$details.appendChild(value);
-   }
-}
-
-customElements.define('slice-details', Details);

package/ProjectTemplate/src/Components/Visual/DropDown/DropDown.css

@@ -1,60 +0,0 @@
-.slice_dropdown_label {
-  cursor: pointer;
-}
-.slice_dropdown {
-  cursor: pointer;
-  user-select: none;
-  display: flex;
-  justify-content: center;
-  display: flex;
-  border-radius: var(--border-radius-slice);
-  border: var(--slice-border) solid var(--primary-color);
-  align-items: center;
-}
-.slice_dropdown .caret {
-  margin-left: 10px;
-  border-top-color: var(--primary-color-contrast);
-}
-.slice_dropbox {
-  display: flex;
-  flex-direction: column;
-  border: var(--slice-border) solid var(--primary-color);
-  list-style: none;
-  font-family: var(--font-family);
-  visibility: hidden;
-  overflow: hidden;
-  position: absolute;
-  opacity: 0;
-  transition: 0s, opacity 0.3s;
-  top: 100%;
-  z-index: 1;
-  background-color: var(--primary-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 0 10px 0 #00000050;
-}
-.slice_dropbox_open {
-  overflow-y: scroll;
-  min-height: min-content;
-  max-height: 200px;
-  visibility: visible;
-  opacity: 1;
-}
-.slice_dropbox_open::-webkit-scrollbar {
-  width: 5px;
-}
-.slice_dropbox_open::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border-radius: var(--border-radius-slice);
-}
-.slice_dropbox {
-  width: 100%;
-}
-.slice_dropbox_open div a {
-  text-decoration: none;
-  color: var(--primary-color-contrast);
-  width: 100%;
-}
-.slice_dropbox_open div {
-  width: 100%;
-  padding: 5px;
-}

package/ProjectTemplate/src/Components/Visual/DropDown/DropDown.html

@@ -1,5 +0,0 @@
-<div class="slice_dropdown">
-  <label class="slice_dropdown_label"></label>
-  <div class="caret"></div>
-</div>
-<div class="slice_dropbox"></div>