@genexus/genexus-ide-ui 0.0.9

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,272 @@
+# GeneXus Ide Ui
+
+**GeneXus Ide Ui** la biblioteca de componentes diseñada para el IDE Web de GeneXus.
+
+- [Participantes](#participantes)
+- [Specs. y Status](#specs-status)
+- [Estructura 'src' folder](#estructura-src-folder)
+- [Buenas prácticas](#buenas-practicas)
+- [Gxg-container](#gxg-container)
+- [Grillas](#grillas)
+- [Gemini](#gemini)
+- [Flujo de trabajo](#flujo-de-trabajo)
+- [Consideraciones](#consideraciones)
+- [Readme StencilJs](#readme-stenciljs)
+- [Links de interés](#links-de-interes)
+
+---
+
+## Participantes <a id="participantes"></a>
+
+- **Andrés Laplace** | Lead Product Designer
+- **Bruno Sastre** | Front End Developer
+- **Daniel Mariño** | Code & Quality Reviewer
+- **Diego Scaffo** | (Falta)
+- **Germán Asiz** | GeneXus Web es Engineering Leader
+- **Mauro Canziani** | Head of Design
+- **Natalia Rudomín** | Product Designer
+- **Nicolás Cámera** | Code & Quality Reviewer
+- **Orlando Pantoja** | Front End Developer
+- **Daniel Piad** | Front End Developer
+
+---
+
+## Specs. y Status <a id="specs"></a>
+
+Las specs. de los componentes se encuentran en esta carpeta [doc](https://drive.google.com/drive/u/1/folders/1dngu6QaTojqJn3pYr7eFh2OcCVDuY2Zt). <br>
+El estado de los componentes se encuentra [en esta planilla ](https://docs.google.com/spreadsheets/d/1i_SlSbtceX0oCNuNUSrhiO3UJJbD6u9h36dc4NJEnRs/edit#gid=0)
+
+---
+
+## Estructura 'src' folder <a id="estructura-src-folder"></a>
+
+### 📁 common
+
+Aquí van archivos comunes a todo el proyecto. Pueden agregarse mas si es necesario.
+
+#### `helper-functions.tsx`
+
+Funciones auxiliadoras.
+
+#### `interfaces.ts`
+
+Interfaces. Se solicita usar el prefijo **Gx** : `GxInterfaceName`
+
+#### `locale.ts`
+
+Este archivo se encarga de manejar la lógica relacionada a las traducciones. En principio no debería modificarse.
+
+#### `types.ts`
+
+Definicion de tipos.
+
+### 📁 components
+
+Aquí van los componentes. `_template` es un componente vacío, que solo tiene la estructura básica para comenzar el desarrollo de un componente nuevo. Por favor, duplicar esta carpeta y cambiar los nombres cuando haya que crear un nuevo componente.
+
+### 📁 global
+
+Aquí van las hojas de estilos .scss. Se sugiere ser organizado, y crear una hoja por cada 'asunto'.
+
+### 📁 pages
+
+Aquí van las paginas html para probar y mostrar los componentes. Hay que crear una pagina por cada componente. El nombre de la pagina debe ser `[nombre-del-componente].html` sin el prefijo:
+
+```
+✅ new-kb.html
+❌ gx-ide-new-kb.html
+```
+
+Cuando se vaya a crear una nueva pagina.html para un componente nuevo, hay que duplicar `_template.html` y modificarlo. La razón, es que ya hay una estructura definida, y queremos respetarla.
+
+- Cada pagina tiene un sidebar, con un conjunto de botones que permiten probar funcionalidades comunes a todos los componentes: dark-mode, rtl, validación, etc.
+- Cada pagina tiene asociada una hoja de estilos (`dev-styles.css`) que es necesaria para la correcta visualización de la pagina.
+
+### 📃 index.html
+
+Index.html se abre al ejecutar `npm start`.<br>
+Muestra dos listas de componentes: 'completed' | 'in progress'.<br>
+Para agregar un componente a cualquiera de esas dos listas, solo es necesario agregar el nombre del item (sin el prefijo) al array correspondiente. Ej.:
+
+```
+✅
+const completed = ["new-kb"];
+const inProgress = ["my-new-component"];
+```
+
+```
+❌
+const completed = ["gx-ide-new-kb"];
+const inProgress = ["gx-ide-my-new-component"];
+```
+
+---
+
+## Buenas prácticas <a id="buenas-practicas"></a>
+
+Seguir durante el desarrollo el [documento de buenas prácticas](https://iwiki.genexus.com/wiki.aspx?31673,C%C3%B3mo+hacer+buenos+Web+Components+con+alta+mantenibilidad+y+siguiendo+buenas+pr%C3%A1cticas) (Se requiere acceso a la vpn de Genexus).
+
+1. Intentar desarrollar los Web Components usando Shadow DOM.
+2. Si dan los tiempos y la experiencia, evitar implementar los controles usando una liberaría.
+3. Siempre pensar en la accesibilidad de los componentes.
+4. Aprovechar al máximo posible el componente funcional `<Host>`.
+5. Diseñar el estilizado de los componentes pensando en el soporte para RTL.
+6. Evitar el colisionamiento de nombres de clases lo mejor que se pueda. Escribir nombres de clases bien específicos.
+7. Evitar el colisionamiento de nombres de variables CSS lo mejor que se pueda. Escribir nombres de variables bien específicos.
+8. Escribir los selectores CSS de modo que terminen en un .class siempre que sea posible.
+9. Evitar usar !important en las propiedades CSS.
+10. Evitar estilizar los componentes usando clases predefinidas por otra dependencia.
+11. Documentar siempre las propiedades, eventos y métodos.
+12. Incluir un ejemplo de uso de los componentes y una descripción de la utilidad.
+13. Documentación para las parts y slots de los componentes siempre útil.
+14. Documentación para las variables CSS (custom vars) de los componentes siempre útil.
+15. Ordenar el código siguiendo los patrones recomendados.
+16. Las funciones no deberían hacer muchas cosas.
+17. Definir las variables y funciones con private tanto como sea posible.
+18. Tipar todas las variables y parámetros de funciones siempre que sea posible.
+19. Usar siempre nombres de variables y funciones mnemotécnicos, sin importar el largo de las mismas.
+20. No incluir estilos fijos en el render de los componentes.
+21. Documentar siempre las funciones que sean muy avanzadas.
+22. Evitar los strings y números mágicos.
+23. Crear interfaces para tipar la estructura de objetos sin tipo.
+24. Utilizar template literals y funciones de JavaScript para crear strings complejos.
+25. Utilizar cláusulas guarda para evitar las sentencias if anidadas.
+26. Evitar chequear la existencia de un objeto comprobando con null o undefined.
+27. Evitar ifs de una sola línea (sin brackets).
+28. Evitar implementar los Switch Case funcionales de manera imperativa. Usar objetos con lookups en cambio.
+29. Los comentarios no sobran. Hacen falta.
+30. Agregar tests unitarios para los componentes :)
+
+---
+
+## Gxg-container <a id="gxg-container"></a>
+
+En cualquier componente del ide web, es probable que sea necesario maquetar "cajas" que contengan el contenido. Estas cajas podrán además tener o no un título, y/o un footer. Para mantener la consistencia de estas cajas a lo largo de todos los componentes, se creó el componente auxiliar gxg-container. Por favor, usarlo siempre que sea necesario. Hay una página donde se puede ver el uso del componente con sus diferentes estados, y al final se muestra una tabla con las properties disponibles.
+
+Esa página está disponible en: `http://localhost:3333/pages/gxg-container.html`
+
+---
+
+## Grillas <a id="grillas"></a>
+
+Se sugiere el uso de grillas siempre que sea posible. La configuración de la grilla es distinta en cada caso, por lo que es responsabilidad del desarrollador definirla en cada caso. Sin embargo, toda grilla deberá tener presente la clase auxiliar `grid`, que además de definir al contenedor como `display:grid` ya define el valor del gap. El fin es mantener la consistencia del gap entre todas las grillas de todos los componentes.
+
+---
+
+## Gemini <a id="gemini"></a>
+
+Esta biblioteca va a estar basada en componentes de Gemini. Para ver los componentes disponibles y sus propiedades y eventos hay dos fuentes: El showcase de Storybook, o el repositorio.
+
+#### [Showcase Gemini](https://gx-gemini.netlify.app/?path=/story/other-accordion--classical)
+
+En la pestaña **Notes** se pueden ver las properties
+
+#### [Repositorio Gemini](https://github.com/genexuslabs/gemini)
+
+1. npm install
+2. npm start
+
+Se abrirá la página principal, con un listado de links a todos los componentes disponibles. Cada componente tiene su propia página html. Siéntanse libres de modificar y probar, habiendo hecho previamente una rama para tales fines, para no modificar master.
+
+Si llegaran a necesitar modificar algún componente de Gemini, o precisaran algún componente nuevo que no exsita, por favor avisar a Bruno Sastre.
+
+---
+
+## Flujo de trabajo <a id="flujo-de-trabajo"></a>
+
+Se sugiere el siguiente flujo de trabajo para la creación de un nuevo componente:
+
+#### 1. Crear branch
+
+Parado en master, hacer pull y crear una nueva branch, usando el nombre del componente (sin el prefijo):
+
+```
+✅new-kb
+❌gx-ide-new-kb
+```
+
+#### 2. Duplicar el 'starter template'
+
+`./src/_template`.
+
+#### 3. Renombrar 'template'
+
+Renombrar 'template' en todos los casos donde sea necesario, usando el nombre del nuevo componente. En algunos casos hay que usar el prefijo 'gx-ide-' y en otros no. Por favor, prestar atención.
+
+- carpeta `_template` -> `my-new-component`
+- carpeta `_template/gx-ide-assets/template` -> `my-new-component/gx-ide-assets/my-new-component`
+- archivo `template.tsx` -> `my-new-component`
+- nombre de tag `gx-ide-template` -> `gx-ide-my-new-component`
+- nombre de class `Template` -> `MyNewComponent`
+
+#### 4.A Desarrollo del componente
+
+Desarrollar el componente teniendo en cuenta el documento de **buenas practicas**
+
+#### 4.B Revisar traducciones
+
+Revisar que todos los textos son traducibles.
+
+#### 4.C Tests
+
+Este punto es necesario, pero opcional de momento, ya que en este momento, es mas importante desarrollar que hacer tests. Consultar este punto con **German Azís**.<br>
+**Nota:** Antes de hacer los tests, definir la _base URL_ como '/build'. De lo contrario, van a aparecer errores porque no se van a encontrar los assets"
+
+```
+const page = await newE2EPage();
+const head = await page.find("head");
+head.innerHTML = '<base href="/build/" />';
+```
+
+#### 4.D Revisar lista de buenas prácticas
+
+La lista de buenas prácticas debe tenerse presente durante el desarrollo, pero no esta de mas verificarla luego.
+
+#### 5. Crear una página html
+
+Crear una pagina en `./src/pages` para probar, y eventualmente mostrar el nuevo componente. Para eso, duplicar `./src/pages/template.html` y modificar en ella lo necesario.
+
+#### 6. Netlify
+
+Subir la carpeta `www` a un proyecto en netlify. Si es una rama en la que estan trabajando ustedes, tienen que subirla a una cuenta propia. Luego de subir la rama main a netlify me encargo yo (Bruno).
+
+#### 7. Compartir URL
+
+Compartir con los involucrados del proyecto, la URL de netlify del nuevo componente, y aguardar feedback. Ej.:
+
+```
+https://649414c3255641072f165111--fascinating-cactus-daaa46.netlify.app/pages/my-new-component.html
+```
+
+**Nota:** Se solicita no cambiar la url que netlify provee por defecto. No queremos que sea de fácil acceso.
+
+#### 8. Pull Request
+
+Una vez aprobado hacer un pull request solicitando el review de **Daniel Mariño**
+
+---
+
+## Consideraciones <a id="consideraciones"></a>
+
+- Tratar de nombrar las ramas siguiendo este patrón:
+  **component/new-kb** (para un nuevo componente).
+  **fix/new-kb** (si es para un fix de un componente que ya se paso a main).
+  **feature/new-kb** (si es para una feature de un componente que ya se pasó a main).
+  Usar el nombre que quieran si ninguna de las anteriores aplica. Solo tratar de usar nombres coherentes/descriptivos.
+- Luego de hacer el merge a main, la rama se elimina automáticamente.
+
+---
+
+## Readme StencilJs <a id="readme-stenciljs"></a>
+
+[Leer el readme que viene con StencilJs](https://github.com/genexuslabs/genexus-ide-ui/blob/main/readme-stenciljs.md)
+
+---
+
+## Links de interés <a id="links-de-interes"></a>
+
+- [StencilJs](https://stenciljs.com/): La biblioteca que usamos para el desarrollo de los componentes.
+- [Specs.](https://drive.google.com/drive/u/0/folders/1dngu6QaTojqJn3pYr7eFh2OcCVDuY2Zt): La documentación de las specs. de los componentes.
+- [Estado de los componentes](https://docs.google.com/spreadsheets/d/1i_SlSbtceX0oCNuNUSrhiO3UJJbD6u9h36dc4NJEnRs/edit#gid=0)
+- [StencilJs readme](https://github.com/genexuslabs/genexus-ide-ui/blob/main/readme-stenciljs.md): El readme de StencilJs.
+- [Diseños en Figma](): (Falta)

package/dist/cjs/_commonjsHelpers-4213291f.js

@@ -0,0 +1,22 @@
+'use strict';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+exports.createCommonjsModule = createCommonjsModule;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/dist/cjs/ch-accordion.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93a6a7e0.js');
+
+const accordionCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--chevron:url('data:image/svg+xml,<svg width=\"14\" height=\"8\" viewBox=\"0 0 14 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.645 0.5L7 4.83019L12.355 0.5L14 1.83962L7 7.5L0 1.83962L1.645 0.5Z\" fill=\"%23000\"/></svg>');display:grid;grid-template-rows:min-content min-content;width:100%;height:100%;text-align:start}.header{display:grid;grid-template-columns:1fr min-content;grid-template-rows:1fr;text-align:start;cursor:pointer}.chevron{align-self:center;width:14px;height:8px;-webkit-mask:var(--chevron);background-color:#000;transition:transform 250ms}.chevron--expanded{transform:rotate(180deg)}.expandable{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 250ms}.expanded{visibility:visible;grid-template-rows:1fr}.expandable ::slotted(*){height:100%;overflow:hidden}";
+
+const EXPANDABLE = "expandable";
+const Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.expandedChange = index.createEvent(this, "expandedChange", 7);
+    /**
+     * The description of the entity.
+     */
+    this.accessibleDescription = "";
+    /**
+     * The name of the entity.
+     */
+    this.accessibleName = "";
+    /**
+     * `true` if the accordion is expanded.
+     */
+    this.expanded = false;
+    this.toggleExpanded = () => {
+      const newExpandedValue = !this.expanded;
+      this.expanded = newExpandedValue;
+      this.expandedChange.emit(newExpandedValue);
+    };
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { "aria-controls": EXPANDABLE, "aria-expanded": this.expanded.toString(), "aria-label": this.accessibleName, "aria-description": this.accessibleDescription || undefined, class: "header", part: "accordion__header", type: "button", onClick: this.toggleExpanded }, index.h("slot", { name: "header" }), index.h("div", { "aria-hidden": "true", class: { chevron: true, "chevron--expanded": this.expanded }, part: "accordion__chevron" })), index.h("div", { id: EXPANDABLE, class: { expandable: true, expanded: this.expanded }, part: "accordion__expandable" }, index.h("slot", { name: "content" }))));
+  }
+};
+Accordion.style = accordionCss;
+
+exports.ch_accordion = Accordion;

package/dist/cjs/ch-drag-bar.cjs.entry.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93a6a7e0.js');
+
+const dragBarCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}.container{display:flex;width:100%;height:100%}.bar{position:relative;width:4px;background-color:#323942;cursor:col-resize}.bar-item{position:absolute;inset-block-start:calc(50% - 35px);inset-inline-start:calc(2px - 10px);display:flex;align-items:center;justify-content:center;background-color:#2d333a;border-radius:10px;width:20px;height:70px;padding:7px 4px;touch-action:manipulation;user-select:none}.bar-item-src{display:block;width:100%;height:100%;pointer-events:none}.bar-item-src--rtl{transform:rotateY(180deg)}.start-component{display:flex;width:var(--ch-drag-bar__start-component-width);max-width:calc(100% - 10px - 2px)}.end-component{display:flex;flex:1}";
+
+const START_COMPONENT_MIN_WIDTH = 0; // 0%
+const START_COMPONENT_MAX_WIDTH = 100; // 100%
+const START_COMPONENT_WIDTH = "--ch-drag-bar__start-component-width";
+const DragBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.lastBarRelativePositionX = 0;
+    this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
+    /**
+     * Determine the language direction.
+     */
+    this.isRTLDirection = false;
+    /**
+     * This attribute lets you specify the label for the drag bar.
+     * Important for accessibility.
+     */
+    this.barLabel = "";
+    /**
+     * Specifies the bar item src.
+     * If defined, it will set an image to replace the default bar item.
+     */
+    this.barItemSrc = "";
+    /**
+     * If `true` an item at the middle of the bar will be displayed to give more
+     * context about the resize action
+     */
+    this.showBarItem = true;
+    /**
+     * Specifies the initial width of the start component
+     */
+    this.startComponentInitialWidth = "50%";
+    this.keepValueInBetween = (value) => Math.max(START_COMPONENT_MIN_WIDTH, Math.min(value, START_COMPONENT_MAX_WIDTH));
+    this.handleBarDrag = (event) => {
+      event.preventDefault();
+      this.lastBarRelativePositionX = event.clientX;
+      if (!this.needForRAF) {
+        return;
+      }
+      this.needForRAF = false; // No need to call RAF up until next frame
+      requestAnimationFrame(() => {
+        this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
+        this.lastBarRelativePositionX -=
+          this.mainContainerRef.getBoundingClientRect().left;
+        const containerWidth = this.mainContainerRef.scrollWidth;
+        let startComponentWidth = containerWidth !== 0
+          ? (this.lastBarRelativePositionX / containerWidth) * 100
+          : 0;
+        if (this.isRTLDirection) {
+          startComponentWidth = 100 - startComponentWidth;
+        }
+        this.startComponentRef.style.setProperty(START_COMPONENT_WIDTH, `${this.keepValueInBetween(startComponentWidth)}%`);
+      });
+    };
+  }
+  connectedCallback() {
+    this.rtlWatcher = new MutationObserver(mutations => {
+      this.isRTLDirection = mutations[0].target.dir === "rtl";
+    });
+    // Watch changes in the dir attribute of the html tag
+    this.rtlWatcher.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir"],
+      childList: false,
+      subtree: false
+    });
+    // Initialize the value, since the observer won't do it
+    this.isRTLDirection = document.documentElement.dir === "rtl";
+  }
+  componentDidLoad() {
+    const removeMouseMoveHandler = () => {
+      this.mainContainerRef.removeEventListener("mousemove", this.handleBarDrag, {
+        capture: true
+      });
+    };
+    // Add event on mousedown
+    this.barRef.addEventListener("mousedown", (event) => {
+      // Necessary to prevent selecting the inner image of the bar item when
+      // the mouse is down
+      event.preventDefault();
+      this.mainContainerRef.addEventListener("mousemove", this.handleBarDrag, {
+        capture: true
+      });
+      // Remove mousemove and mouseup handlers when mouseup
+      this.mainContainerRef.addEventListener("mouseup", () => {
+        removeMouseMoveHandler();
+        this.mainContainerRef.removeEventListener("mouseup", removeMouseMoveHandler);
+      }, {
+        capture: true
+      });
+      this.mainContainerRef.addEventListener("mouseleave", () => {
+        removeMouseMoveHandler();
+        this.mainContainerRef.removeEventListener("mouseleave", removeMouseMoveHandler);
+      });
+    }, { capture: true });
+  }
+  disconnectedCallback() {
+    if (this.rtlWatcher) {
+      this.rtlWatcher.disconnect();
+      this.rtlWatcher = null;
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: this.cssClass || undefined, style: { [START_COMPONENT_WIDTH]: this.startComponentInitialWidth } }, index.h("div", { class: "container", ref: el => (this.mainContainerRef = el) }, index.h("div", { class: "start-component", part: "start-component", ref: el => (this.startComponentRef = el) }, index.h("slot", { name: "start-component" })), index.h("div", { "aria-label": this.barLabel, title: this.barLabel, class: "bar", part: "bar", ref: el => (this.barRef = el) }, this.showBarItem && (index.h("div", { class: "bar-item", part: "bar-item" }, this.barItemSrc ? (index.h("img", { "aria-hidden": "true", class: "bar-item-src", part: "bar-item-src", alt: "", src: this.barItemSrc })) : (index.h("svg", { "aria-hidden": "true", class: {
+        "bar-item-src": true,
+        "bar-item-src--rtl": this.isRTLDirection
+      }, part: "bar-item-src", viewBox: "0 0 12 57", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M10.1899 4.59531H3.82598L6.3645 2.0568L4.95028 0.642585L0.000535564 5.59233L4.95028 10.5421L6.3645 9.12787L3.82598 6.58935H10.1899V4.59531Z", fill: "#969BA0" }), index.h("path", { d: "M0 37.1855V34.6141H2V37.1855H0ZM4 37.1855V34.6141H6V37.1855H4ZM8 37.1855V34.6141H10V37.1855H8ZM0 32.0427V29.4713H2V32.0427H0ZM4 32.0427V29.4713H6V32.0427H4ZM8 32.0427V29.4713H10V32.0427H8ZM0 26.8998V24.3284H2V26.8998H0ZM4 26.8998V24.3284H6V26.8998H4ZM8 26.8998V24.3284H10V26.8998H8ZM0 21.757V19.1855H2V21.757H0ZM4 21.757V19.1855H6V21.757H4ZM8 21.757V19.1855H10V21.757H8Z", transform: "translate(1)", fill: "#6E7277" }), index.h("path", { d: "M4.823 47.2443L6.23722 45.8301L11.187 50.7798L6.23722 55.7296L4.823 54.3154L7.36152 51.7769H0.997556V49.7828L7.36152 49.7828L4.823 47.2443Z", fill: "#969BA0" })))))), index.h("div", { class: "end-component", part: "end-component" }, index.h("slot", { name: "end-component" })))));
+  }
+  get element() { return index.getElement(this); }
+};
+DragBar.style = dragBarCss;
+
+exports.ch_drag_bar = DragBar;