├── .github └── FUNDING.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── demo ├── code-example │ ├── code-example-dark.css │ └── code-example.ts ├── demo-ct-bottom-sheet.ts ├── demo-ct-button.ts ├── demo-ct-checkbox.ts ├── demo-ct-date.ts ├── demo-ct-dialog.ts ├── demo-ct-icon.ts ├── demo-ct-input.ts ├── demo-ct-radio.ts ├── demo-ct-select.ts ├── demo-ct-tooltip.ts ├── demo-main.ts ├── index.story.ts ├── render-item.ts └── styles │ └── shared-styles.ts ├── images ├── check-green.png ├── chrome.png ├── edge.png ├── firefox.png ├── ie.png ├── orange-check.png ├── packages │ ├── ct-input.png │ └── ct-spinner.png ├── safari.png └── vscode-intellisense.png ├── index.html ├── lerna.json ├── package.json ├── packages-test └── ct-bottom-sheet │ ├── LICENSE │ ├── README.md │ ├── packagex.json │ ├── src │ ├── ct-bottom-sheet.ts │ └── styles.ts │ └── tsconfig.json ├── packages ├── ct-button │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-button-helpers.ts │ │ ├── ct-button-menu.ts │ │ ├── ct-button-split.ts │ │ └── ct-button.ts │ └── tsconfig.json ├── ct-card │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-card.ts │ └── tsconfig.json ├── ct-chartjs │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-chartjs.ts │ └── tsconfig.json ├── ct-checkbox │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-checkbox.ts │ └── tsconfig.json ├── ct-collapse │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-collapse.ts │ └── tsconfig.json ├── ct-date │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-date.ts │ └── tsconfig.json ├── ct-dialog │ ├── .gitignore │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-card-dialog.ts │ │ ├── ct-confirm.ts │ │ ├── ct-dialog-builder.ts │ │ ├── ct-dialog.ts │ │ ├── ct-loading.ts │ │ └── ct-promp.ts │ └── tsconfig.json ├── ct-helpers │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-helpers.ts │ └── tsconfig.json ├── ct-icon │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-icon-button.ts │ │ ├── ct-icon.ts │ │ └── icon-list.ts │ └── tsconfig.json ├── ct-img │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-img.ts │ └── tsconfig.json ├── ct-input │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-autocomplete-suggestions.ts │ │ ├── ct-input-autocomplete.ts │ │ ├── ct-input-container.ts │ │ ├── ct-input-open.ts │ │ ├── ct-input-phone.ts │ │ ├── ct-input-wrapper.ts │ │ ├── ct-input.ts │ │ ├── ct-textarea-autogrow.ts │ │ └── ct-textarea.ts │ └── tsconfig.json ├── ct-list │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-list-item.ts │ └── tsconfig.json ├── ct-lit │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── result.md │ ├── src │ │ └── ct-lit.ts │ └── tsconfig.json ├── ct-loading-bar │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-loading-bar.ts │ └── tsconfig.json ├── ct-loading-placeholder │ ├── .gitignore │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── demo │ │ └── ct-loading-placeholder.gif │ ├── package.json │ ├── src │ │ └── ct-loading-placeholder.ts │ └── tsconfig.json ├── ct-menu │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-menu.ts │ └── tsconfig.json ├── ct-phone-input │ ├── .npmignore │ ├── LICENSE │ ├── package.json │ ├── src │ │ └── ct-phone-input.ts │ └── tsconfig.json ├── ct-qr-tools │ ├── LICENSE │ ├── package.json │ ├── src │ │ └── ct-qr-tools.ts │ └── tsconfig.json ├── ct-radio │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-radio.ts │ └── tsconfig.json ├── ct-router │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-router.ts │ │ └── path_to_regexp.ts │ └── tsconfig.json ├── ct-scroll-threshold │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-scroll-threshold.ts │ │ └── index.ts │ └── tsconfig.json ├── ct-select │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-select-dialog.ts │ │ ├── ct-select-item.ts │ │ └── ct-select.ts │ └── tsconfig.json ├── ct-snackbar │ ├── package.json │ ├── src │ │ └── ct-snackbar.ts │ └── tsconfig.json ├── ct-spinner │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── ct-spinner.ts │ └── tsconfig.json ├── ct-tabs │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ct-tab.ts │ │ └── ct-tabs.ts │ └── tsconfig.json ├── ct-tooltip │ ├── LICENSE │ ├── package.json │ ├── src │ │ └── ct-tooltip.ts │ └── tsconfig.json └── lit-if │ ├── LICENSE │ ├── package.json │ ├── src │ └── lit-if.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── stories ├── ct-button.stories.ts ├── ct-checkbox.stories.ts ├── index.ts └── types.ts ├── tsconfig.json └── vite.config.ts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [herberthobregon] 4 | ko_fi: herberthobregon 5 | custom: ["https://paypal.me/herberthx"] -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .cache 3 | .git 4 | build 5 | dist 6 | node_modules 7 | .DS_Store 8 | .history 9 | .firebase 10 | *.log 11 | *.map 12 | *.d.ts 13 | *.js -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | link-workspace-packages = true -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 200, 3 | "bracketSpacing": true, 4 | "htmlWhitespaceSensitivity": "css", 5 | "insertPragma": false, 6 | "jsxBracketSameLine": true, 7 | "jsxSingleQuote": false, 8 | "proseWrap": "preserve", 9 | "arrowParens": "avoid", 10 | "quoteProps": "as-needed", 11 | "requirePragma": false, 12 | "semi": true, 13 | "singleQuote": false, 14 | "tabWidth": 4, 15 | "trailingComma": "none", 16 | "useTabs": true, 17 | "plugins": [ 18 | "@snelx/prettier-plugin-import-sort" 19 | ] 20 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "typescript.tsdk": "node_modules/typescript/lib" 4 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /demo/code-example/code-example-dark.css: -------------------------------------------------------------------------------- 1 | @import "prismjs/themes/prism-okaidia.css"; 2 | -------------------------------------------------------------------------------- /demo/demo-ct-bottom-sheet.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-button"; 2 | 3 | import "./render-item.js"; 4 | 5 | import { CtBottomSheet } from "@conectate/ct-bottom-sheet"; 6 | import { css, CtLit, customElement, html, query } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-bottom-sheet") 9 | export class DemoCtBottomSheet extends CtLit { 10 | static styles = [ 11 | css` 12 | :host { 13 | display: block; 14 | } 15 | 16 | ct-bottom-sheet { 17 | left: 0; 18 | right: 0; 19 | --bottom-sheet-max-width: 500px; 20 | margin: auto; 21 | } 22 | ` 23 | ]; 24 | 25 | @query("ct-bottom-sheet") botton!: CtBottomSheet; 26 | render() { 27 | return html` this.botton.open()} raised>Open 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | `; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /demo/demo-ct-checkbox.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-checkbox"; 2 | 3 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 4 | 5 | @customElement("demo-ct-checkbox") 6 | export class DemoCtCheckbox extends CtLit { 7 | static styles = [ 8 | css` 9 | :host { 10 | display: block; 11 | --ct-checkbox-box-size: 18px; 12 | } 13 | ` 14 | ]; 15 | 16 | render() { 17 | return html`Vas Vas 18 | Vas Vas`; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo/demo-ct-date.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-date"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-date") 9 | export class DemoCtDate extends CtLit { 10 | static styles = [ 11 | css` 12 | :host { 13 | display: block; 14 | max-width: 800px; 15 | margin: 0 auto; 16 | } 17 | header > h1 { 18 | margin-bottom: 0; 19 | font-family: monospace; 20 | } 21 | `, 22 | css` 23 | .group { 24 | display: inline-flex; 25 | padding: 8px; 26 | border: 1px solid #88888867; 27 | border-radius: var(--border-radius, 16px); 28 | } 29 | ` 30 | ]; 31 | name = "ct-date"; 32 | render() { 33 | return html` 34 |
35 |

</${this.name}>

36 |
37 |
${this.example()}
38 | `; 39 | } 40 | example() { 41 | return html` 42 | ${``.replaceAll("\t", " ")} 43 |
44 | 45 | 46 |
47 | `; 48 | } 49 | 50 | changeDate(e: CustomEvent) { 51 | console.log(e.detail); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /demo/demo-ct-dialog.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-dialog/ct-loading.js"; 2 | 3 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 4 | 5 | @customElement("demo-ct-dialog") 6 | export class DemoCtDialog extends CtLit { 7 | static styles = [ 8 | css` 9 | :host { 10 | display: block; 11 | } 12 | ` 13 | ]; 14 | 15 | render() { 16 | return html`
17 |

Demo ct-dialog

18 |
`; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo/demo-ct-icon.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-icon/ct-icon-button.js"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-icon") 9 | export class DemoCtIcon extends CtLit { 10 | static styles = [ 11 | css` 12 | :host { 13 | display: block; 14 | max-width: 800px; 15 | margin: 0 auto; 16 | } 17 | .mini { 18 | --ct-icon-size: 16px; 19 | } 20 | header > h1 { 21 | margin-bottom: 0; 22 | font-family: monospace; 23 | } 24 | `, 25 | css` 26 | .group { 27 | display: inline-flex; 28 | padding: 8px; 29 | border: 1px solid #88888867; 30 | border-radius: var(--border-radius, 16px); 31 | } 32 | ` 33 | ]; 34 | name = "ct-icon"; 35 | render() { 36 | return html` 37 |
38 |

</${this.name}>

39 |
40 |
${this.example()}
41 | `; 42 | } 43 | example() { 44 | return html` 45 | ${` 46 | 47 | `.replaceAll("\t", " ")} 48 |
49 | 50 | 51 |
52 | `; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /demo/demo-ct-input.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-dialog/ct-promp.js"; 2 | import "@conectate/ct-input"; 3 | import "@conectate/ct-input/ct-textarea.js"; 4 | 5 | import { CtLit, css, customElement, html, query, state } from "@conectate/ct-lit"; 6 | 7 | @customElement("demo-ct-input") 8 | export class DemoCtInput extends CtLit { 9 | static styles = [ 10 | css` 11 | :host { 12 | display: block; 13 | margin: 0 auto; 14 | padding: 16px; 15 | border: 1px solid #ccc; 16 | border-radius: 4px; 17 | max-width: 600px; 18 | } 19 | ct-input { 20 | display: flex; 21 | } 22 | ` 23 | ]; 24 | @state() macs = ["00-00-00-00-00-00", "BC-A9-93-73-74-A7", "AA-AC-AE-73-00-01"]; 25 | @query('#i1') i1?: HTMLElementTagNameMap["ct-input"]; 26 | connectedCallback() { 27 | super.connectedCallback(); 28 | // @ts-ignore 29 | window.test = this; 30 | } 31 | 32 | render() { 33 | return html`${this.macs.map( 34 | (m, i) => 35 | html`) => (this.macs[i] = e.detail.value)}> 36 | this.deleteItem(i)}>DEL 37 | ` 38 | )} 39 | this.addItem()}>ADD 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | `; 49 | } 50 | firstUpdated() { 51 | setTimeout(() => { 52 | this.i1!.value = "Attach"; 53 | }, 1000); 54 | } 55 | addItem() { 56 | this.macs.push(""); 57 | this.macs = [...this.macs]; 58 | } 59 | deleteItem(i: number) { 60 | this.macs.splice(i, 1); 61 | this.macs = [...this.macs]; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /demo/demo-ct-radio.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-radio"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { css, CtLit, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-radio") 9 | export class DemoCtRadio extends CtLit { 10 | static styles = [ 11 | css` 12 | :host { 13 | display: block; 14 | max-width: 800px; 15 | margin: 0 auto; 16 | } 17 | header > h1 { 18 | margin-bottom: 0; 19 | font-family: monospace; 20 | } 21 | `, 22 | css` 23 | .group { 24 | display: inline-flex; 25 | padding: 8px; 26 | border: 1px solid #88888867; 27 | border-radius: var(--border-radius, 16px); 28 | } 29 | ` 30 | ]; 31 | name = "ct-radio"; 32 | render() { 33 | return html` 34 |
35 |

</${this.name}>

36 |
37 |
${this.example()}
38 | `; 39 | } 40 | example() { 41 | return html` 42 | ${` 43 | Normal 44 | Checked 45 | 46 |
47 | Form 1 - Option 1 48 | Form 1 - Option 2 49 |
`.replaceAll("\t", " ")} 50 |
51 | Normal 52 | Checked 53 | 54 |
55 | Form 1 - Option 1 56 | Form 1 - Option 2 57 |
58 |
59 | `; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /demo/demo-ct-select.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-select"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { css, CtLit, customElement, html, query } from "@conectate/ct-lit"; 7 | import { CtSelect } from "@conectate/ct-select"; 8 | import { html as stripIndent } from "common-tags"; 9 | 10 | @customElement("demo-ct-select") 11 | export class DemoCtSelect extends CtLit { 12 | static styles = [ 13 | css` 14 | :host { 15 | display: block; 16 | max-width: 800px; 17 | margin: 0 auto; 18 | } 19 | header > h1 { 20 | margin-bottom: 0; 21 | font-family: monospace; 22 | } 23 | ` 24 | ]; 25 | name = "ct-select"; 26 | render() { 27 | return html` 28 |
29 |

</${this.name}>

30 |
31 |
${this.example()}
32 | `; 33 | } 34 | 35 | @query("#ct-select") ctSelect!: CtSelect; 36 | example() { 37 | let code = stripIndent` 38 | 39 | 40 | 41 | 42 | \`}" 53 | >`.replaceAll("\t", " "); 54 | 55 | return html` 56 | 57 |
58 | 59 | 60 | 61 | 67 | html``} 73 | > 74 |
75 | 76 | `; 77 | } 78 | 79 | getItems() { 80 | let items: { text: string; value: number }[] = []; 81 | for (let i = 0; i < 5; i++) { 82 | items.push({ text: "Item " + i, value: i }); 83 | } 84 | return items; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /demo/demo-ct-tooltip.ts: -------------------------------------------------------------------------------- 1 | import { css, CtLit, customElement, html } from "@conectate/ct-lit"; 2 | import '@conectate/ct-tooltip'; 3 | @customElement("demo-ct-tooltip") 4 | export class DemoCtTooltip extends CtLit { 5 | static styles = [ 6 | css` 7 | :host { 8 | display: block; 9 | max-width: 800px; 10 | margin: 0 auto; 11 | } 12 | header > h1 { 13 | margin-bottom: 0; 14 | font-family: monospace; 15 | } 16 | `, 17 | css` 18 | .group { 19 | display: inline-flex; 20 | padding: 8px; 21 | border: 1px solid #88888867; 22 | border-radius: var(--border-radius, 16px); 23 | } 24 | ` 25 | ]; 26 | name = "ct-radio"; 27 | render() { 28 | return html` 29 |
30 |

</${this.name}>

31 |
32 |
${this.example()}
33 | `; 34 | } 35 | example() { 36 | return html` 37 | ${` 38 | Normal 39 | Checked 40 | 41 |
42 | Form 1 - Option 1 43 | Form 1 - Option 2 44 |
`.replaceAll("\t", " ")} 45 | 46 |

Tooltip

47 | Este es un texto de ayuda 48 | 49 | `; 50 | } 51 | } 52 | 53 | declare global { 54 | interface HTMLElementTagNameMap { 55 | "demo-ct-tooltip": DemoCtTooltip; 56 | } 57 | } -------------------------------------------------------------------------------- /demo/demo-main.ts: -------------------------------------------------------------------------------- 1 | import "./demo-ct-bottom-sheet.js"; 2 | import "./demo-ct-button.js"; 3 | import "./demo-ct-checkbox.js"; 4 | import "./demo-ct-date.js"; 5 | import "./demo-ct-dialog.js"; 6 | import "./demo-ct-icon.js"; 7 | import "./demo-ct-input.js"; 8 | import "./demo-ct-radio.js"; 9 | import "./demo-ct-select.js"; 10 | import "./demo-ct-tooltip.js"; 11 | 12 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 13 | 14 | import { applyTheme } from "./styles/shared-styles.js"; 15 | 16 | @customElement("demo-main") 17 | export class DemoMain extends CtLit { 18 | constructor() { 19 | super(); 20 | applyTheme(); 21 | } 22 | 23 | static styles = [ 24 | css` 25 | :host { 26 | display: block; 27 | font-family: "Roboto", "Ubuntu", sans-serif; 28 | padding-bottom: 128px; 29 | } 30 | ` 31 | ]; 32 | 33 | render() { 34 | return html` 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | `; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /demo/index.story.ts: -------------------------------------------------------------------------------- 1 | import * as s from "../stories.js"; 2 | 3 | console.log(s); 4 | -------------------------------------------------------------------------------- /demo/render-item.ts: -------------------------------------------------------------------------------- 1 | import { CtLit, css, customElement, html, property, query } from "@conectate/ct-lit"; 2 | 3 | @customElement("render-item") 4 | export class RenderItem extends CtLit { 5 | static styles = [ 6 | css` 7 | :host { 8 | display: block; 9 | cursor: pointer; 10 | background-color: #fff; 11 | transition: background-color 0.2s ease-in-out; 12 | } 13 | :host(:hover) { 14 | background-color: #85858516; 15 | } 16 | 17 | :host([selected]) { 18 | background-color: #80000021; 19 | } 20 | .b { 21 | padding: 8px; 22 | } 23 | ` 24 | ]; 25 | @property({ type: String }) text = ""; 26 | @property({ type: String }) subtext = ""; 27 | @property({ type: Number }) value = 0; 28 | @property({ type: Boolean, reflect: true }) selected = false; 29 | 30 | render() { 31 | return html`
32 |
${this.text}
33 | ${this.subtext} 34 |
`; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /demo/styles/shared-styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "lit"; 2 | 3 | export let defaultTheme = css` 4 | :root { 5 | --color-primary: #2cb5e8; 6 | --color-primary-medium: #2cb5e8b0; 7 | --color-primary-light: #2cb5e82b; 8 | --color-primary-hover: #19ace1; 9 | --color-primary-active: #169aca; 10 | --color-on-primary: #fff; 11 | 12 | --color-secondary: #0fb8ad; 13 | /* Color de objeto en cima de color de acento */ 14 | --color-on-secondary: #fff; 15 | 16 | /* Fondos */ 17 | --color-background: #f9f9f9; 18 | /* Fondos Textos que aparecen en los fondos */ 19 | --color-on-background: #535353; /* Gris */ 20 | 21 | /* Fondos que estan en cima de los fondos (ct-cards) */ 22 | --color-surface: #ffffff; 23 | /* Fondos Textos que aparecen en los ct-cards */ 24 | --color-on-surface: #535353; /* Gris */ 25 | 26 | /* Color de objeto en cima de error */ 27 | --color-error: #b10808; 28 | --color-on-error: #fff; 29 | 30 | --high-emphasis: #000000de; 31 | --medium-emphasis: #00000099; 32 | --color-disable: #00000047; 33 | 34 | /* Blur */ 35 | --color-blur: rgba(255, 255, 255, 0.7); 36 | --color-blur-surface: rgba(255, 255, 255, 0.6); 37 | --color-on-surface-opaque: #8e8e8e; /* Texto sencundarios */ 38 | --color-outline: #7c7c7c30; /* divisores */ 39 | --color-app: linear-gradient(90deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); 40 | --dark-primary-color: #218cb3; 41 | } 42 | @media (prefers-color-scheme: dark) { 43 | :root { 44 | --color-primary: #2cb5e8; 45 | --color-primary-medium: #2cb5e8b0; 46 | --color-primary-light: #2cb5e82b; 47 | --color-on-primary: #fff; 48 | 49 | --color-secondary: #0fb8ad; 50 | --color-on-secondary: #fff; 51 | 52 | /* Fondos */ 53 | --color-background: #111e23; 54 | /* Fondos Textos que aparecen en los fondos */ 55 | --color-on-background: #fff; 56 | 57 | /* Fondos que estan en cima de los fondos (ct-cards) */ 58 | --color-surface: #1a2c34; 59 | /* Fondos Textos que aparecen en los ct-cards */ 60 | --color-on-surface: #fff; 61 | 62 | --color-error: #cf6679; 63 | --color-on-error: #fff; 64 | 65 | --high-emphasis: #ffffffde; 66 | --medium-emphasis: #ffffff99; 67 | --color-disable: #ffffff61; 68 | 69 | --color-on-surface-opaque: #8e8e8e; /* Texto sencundarios */ 70 | --color-outline: #bbbbbb24; /* divisores */ 71 | --color-blur: rgba(35, 35, 37, 0.7); 72 | --color-blur-surface: #1a2c34b3; 73 | --color-app: linear-gradient(90deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); 74 | --dark-primary-color: #218cb3; 75 | } 76 | } 77 | 78 | html { 79 | height: 100%; 80 | width: 100%; 81 | max-height: 100%; 82 | max-width: 100%; 83 | } 84 | 85 | body { 86 | position: relative; 87 | margin: 0; 88 | padding: 0; 89 | font-size: 14px; 90 | background: var(--color-background); 91 | color: var(--color-on-background); 92 | height: 100%; 93 | font-family: "Roboto", sans-serif !important; 94 | transition: all 0.2s; 95 | } 96 | 97 | @media print { 98 | @page { 99 | size: letter; 100 | margin: 0.6cm; 101 | } 102 | body, 103 | html { 104 | -webkit-print-color-adjust: exact !important; 105 | height: auto !important; 106 | max-height: none !important; 107 | background: #fff; 108 | } 109 | } 110 | `; 111 | export function addCSS(src: string) { 112 | const link = document.createElement("link"); 113 | link.rel = "stylesheet"; 114 | link.type = "text/css"; 115 | link.href = src; 116 | document.head.appendChild(link); 117 | } 118 | export function addFont(family: string) { 119 | const link = document.createElement("link"); 120 | link.rel = "stylesheet"; 121 | link.type = "text/css"; 122 | link.href = `https://fonts.googleapis.com/css?family=${family}&display=swap`; 123 | document.head.appendChild(link); 124 | } 125 | 126 | export function applyTheme() { 127 | addFont(`Ubuntu:400,500,700`); 128 | addFont(`Roboto:400,500,700`); 129 | addCSS(`https://unpkg.com/intro.js/minified/introjs.min.css`); 130 | // addFont(`Material+Icons+Round`); 131 | // addFont(`Google+Sans:400,500,700`); 132 | // addFont(`Product+Sans:400,500,700`); 133 | const style = document.createElement("style"); 134 | style.id = "ctStyles"; 135 | style.innerHTML = defaultTheme.toString(); 136 | document.head.appendChild(style); 137 | } 138 | -------------------------------------------------------------------------------- /images/check-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/check-green.png -------------------------------------------------------------------------------- /images/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/chrome.png -------------------------------------------------------------------------------- /images/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/edge.png -------------------------------------------------------------------------------- /images/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/firefox.png -------------------------------------------------------------------------------- /images/ie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/ie.png -------------------------------------------------------------------------------- /images/orange-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/orange-check.png -------------------------------------------------------------------------------- /images/packages/ct-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/packages/ct-input.png -------------------------------------------------------------------------------- /images/packages/ct-spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/packages/ct-spinner.png -------------------------------------------------------------------------------- /images/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/safari.png -------------------------------------------------------------------------------- /images/vscode-intellisense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/images/vscode-intellisense.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "command": { 4 | "bootstrap": { 5 | "hoist": true, 6 | "npmClientArgs": ["--no-package-lock"] 7 | } 8 | }, 9 | "version": "4.4.13" 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "conectate-elements", 3 | "version": "3.0.0", 4 | "license": "BSD-3-Clause", 5 | "type": "module", 6 | "dependencies": { 7 | "@conectate/ct-button": "workspace:^", 8 | "@conectate/ct-card": "workspace:^", 9 | "@conectate/ct-chartjs": "workspace:^", 10 | "@conectate/ct-checkbox": "workspace:^", 11 | "@conectate/ct-collapse": "workspace:^", 12 | "@conectate/ct-date": "workspace:^", 13 | "@conectate/ct-dialog": "workspace:^", 14 | "@conectate/ct-helpers": "workspace:^", 15 | "@conectate/ct-icon": "workspace:^", 16 | "@conectate/ct-img": "workspace:^", 17 | "@conectate/ct-input": "workspace:^", 18 | "@conectate/ct-list": "workspace:^", 19 | "@conectate/ct-lit": "workspace:^", 20 | "@conectate/ct-loading-bar": "workspace:^", 21 | "@conectate/ct-loading-placeholder": "workspace:^", 22 | "@conectate/ct-menu": "workspace:^", 23 | "@conectate/ct-phone-input": "workspace:^", 24 | "@conectate/ct-radio": "workspace:^", 25 | "@conectate/ct-router": "workspace:^", 26 | "@conectate/ct-select": "workspace:^", 27 | "@conectate/ct-snackbar": "workspace:^", 28 | "@conectate/ct-spinner": "workspace:^", 29 | "@conectate/ct-tabs": "workspace:^", 30 | "@conectate/ct-tooltip": "workspace:^", 31 | "@conectate/lit-if": "workspace:^", 32 | "chart.js": "^4.3.1", 33 | "common-tags": "^1.8.2", 34 | "lit": "^3.2.1", 35 | "prismjs": "^1.29.0" 36 | }, 37 | "devDependencies": { 38 | "@snelx/prettier-plugin-import-sort": "^1.0.0", 39 | "@types/chart.js": "^2.9.37", 40 | "@types/common-tags": "^1.8.1", 41 | "@types/node": "^20.5.8", 42 | "@types/prismjs": "^1.26.0", 43 | "import-sort-style-module": "^6.0.0", 44 | "lerna": "^7.4.2", 45 | "prettier": "^3.5.3", 46 | "prettier-plugin-import-sort": "^0.0.7", 47 | "tslib": "^2.6.2", 48 | "typescript": "^5.4.3", 49 | "vite": "^5.2.8" 50 | }, 51 | "scripts": { 52 | "xlink": "yarn link packages/ct-lit", 53 | "demo": "vite", 54 | "pub": "lerna publish", 55 | "bootstrap": "lerna bootstrap", 56 | "new-ver": "lerna version --conventional-commits --yes", 57 | "clean": "lerna clean -y; find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +; find . -name 'yarn.lock' -type f -prune -exec rm -rf '{}' +; find . -name 'package-lock.json' -type f -prune -exec rm -rf '{}' +", 58 | "build": "lerna run prepare", 59 | "format": "prettier --write --ignore-unknown packages" 60 | }, 61 | "private": true, 62 | "exports": { 63 | ".": { 64 | "development": "./src/ct-input.ts", 65 | "default": "./ct-input.js" 66 | }, 67 | "./*": { 68 | "development": "./src/*", 69 | "default": "./*" 70 | } 71 | }, 72 | "importSort": { 73 | ".js, .jsx, .ts, .tsx": { 74 | "style": "module", 75 | "parser": "typescript" 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /packages-test/ct-bottom-sheet/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages-test/ct-bottom-sheet/README.md: -------------------------------------------------------------------------------- 1 |

@conectate/ct-bottom-sheet

2 | 3 |

4 | Downloads per month 5 | NPM Version 6 | Contributors 7 |

8 | 9 | The `` module contains extensions to turn modal dialogs into bottom sheets, among other functionality like showing a grid of items. 10 | 11 | ## Basic Example 12 | 13 | ```typescript 14 | import { CtBottomSheet } from "@conectate/ct-bottom-sheet"; 15 | // import { ... } from 'lit'; 16 | // @conectate/ct-lit is a base class wrapper of lit 17 | import { CtLit, css, customElement, html, property } from "@conectate/ct-lit"; 18 | 19 | @customElement("demo-ct-bottom-sheet") 20 | export class DemoCtBottomSheet extends CtLit { 21 | static styles = [ 22 | css` 23 | :host { 24 | display: block; 25 | } 26 | 27 | ct-bottom-sheet { 28 | left: 0; 29 | right: 0; 30 | --bottom-sheet-max-width: 500px; 31 | margin: auto; 32 | } 33 | ` 34 | ]; 35 | 36 | @query("ct-bottom-sheet") botton!: CtBottomSheet; 37 | 38 | render() { 39 | return html` this.botton.open()} raised>Open 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | `; 61 | } 62 | } 63 | ``` 64 | -------------------------------------------------------------------------------- /packages-test/ct-bottom-sheet/packagex.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-bottom-sheet", 3 | "version": "3.5.0", 4 | "description": "Bottom sheets slide up from the bottom of the screen to reveal more content. Made with Lit 🔥", 5 | "main": "ct-bottom-sheet.js", 6 | "types": "ct-bottom-sheet.d.ts", 7 | "module": "ct-bottom-sheet.js", 8 | "keywords": [ 9 | "ct-elements" 10 | ], 11 | "dependencies": { 12 | "lit": "^3.2.1" 13 | }, 14 | "scripts": { 15 | "prepare": "rm -rf *.map *.js *.ts;tsc", 16 | "gen:wc": "wca analyze \"*.js\" --outFile custom-elements.json" 17 | }, 18 | "type": "module", 19 | "license": "BSD-3-Clause", 20 | "homepage": "https://github.com/conectate/ct-elements", 21 | "author": "Herberth Obregón ", 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/conectate/ct-elements" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/conectate/ct-elements/issues" 28 | }, 29 | "publishConfig": { 30 | "access": "public" 31 | }, 32 | "exports": { 33 | ".": { 34 | "dev": "./src/ct-bottom-sheet.ts", 35 | "default": "./ct-bottom-sheet.js" 36 | }, 37 | "./*": { 38 | "dev": "./src/*", 39 | "default": "./*" 40 | } 41 | }, 42 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 43 | } -------------------------------------------------------------------------------- /packages-test/ct-bottom-sheet/src/styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "lit"; 2 | 3 | export default css` 4 | :host { 5 | display: block; 6 | position: fixed; 7 | background-color: var(--bottom-sheet-background-color, #fff); 8 | color: var(--bottom-sheet-color, #323232); 9 | min-height: 48px; 10 | min-width: 288px; 11 | bottom: 0px; 12 | left: 0px; 13 | box-sizing: border-box; 14 | box-shadow: var(--bottom-sheet-box-shadow, 0 2px 5px 0 rgba(0, 0, 0, 0.26)); 15 | border-radius: 16px 16px 0 0; 16 | margin: 0 12px; 17 | font-size: 14px; 18 | cursor: default; 19 | -webkit-transition: 20 | -webkit-transform 0.3s, 21 | opacity 0.3s; 22 | transition: 23 | transform 0.3s, 24 | opacity 0.3s; 25 | opacity: 0; 26 | -webkit-transform: translateY(100px); 27 | transform: translateY(100px); 28 | max-width: var(--bottom-sheet-max-width); 29 | max-height: var(--bottom-sheet-max-height); 30 | } 31 | 32 | :host(.fit-bottom) { 33 | width: 100%; 34 | min-width: 0; 35 | border-radius: 0; 36 | margin: 0; 37 | } 38 | 39 | :host(.center-bottom) { 40 | left: initial; 41 | } 42 | 43 | :host(.bottom-sheet-open) { 44 | opacity: 1; 45 | -webkit-transform: translateY(0px); 46 | transform: translateY(0px); 47 | } 48 | .draggable { 49 | margin: 12px auto; 50 | max-width: 48px; 51 | cursor: move; 52 | border-radius: var(--border-radius, 16px); 53 | height: 4px; 54 | background: var(--bottom-sheet-draggable-background-color, #9292922d); 55 | } 56 | button { 57 | color: var(--color-on-surface, #535353); 58 | margin: 0; 59 | height: 38px; 60 | width: 100%; 61 | background: none; 62 | outline: none; 63 | border: none; 64 | cursor: pointer; 65 | border-top: 1px solid var(--bottom-sheet-border-color, #8181811c); 66 | } 67 | 68 | label { 69 | white-space: var(--arc-font-nowrap-white-space); 70 | overflow: var(--arc-font-nowrap-overflow); 71 | text-overflow: var(--arc-font-nowrap-text-overflow); 72 | font-size: var(--arc-font-caption-font-size); 73 | font-weight: var(--arc-font-caption-font-weight); 74 | line-height: var(--arc-font-caption-line-height); 75 | letter-spacing: var(--arc-font-caption-letter-spacing); 76 | 77 | color: var(--bottom-sheet-label-color, rgba(0, 0, 0, 0.54)); 78 | display: block; 79 | font-size: 15px; 80 | font-weight: bold; 81 | display: flex; 82 | flex-direction: row; 83 | align-items: center; 84 | padding: 0 24px 12px; 85 | } 86 | 87 | [hidden] { 88 | display: none !important; 89 | } 90 | 91 | .scrollable { 92 | padding: 0 24px 24px; 93 | max-height: calc(100vh - 116px); 94 | -webkit-overflow-scrolling: touch; 95 | overflow: auto; 96 | max-width: 600px !important; 97 | } 98 | 99 | :host([no-padding]) .scrollable { 100 | padding: 0; 101 | } 102 | `; 103 | -------------------------------------------------------------------------------- /packages-test/ct-bottom-sheet/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-button/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/ct-button/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-button/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [1.3.0] 9 | 10 | ### Changed 11 | 12 | - Update mwc version 13 | 14 | ## [1.2.0] 15 | 16 | ### Changed 17 | 18 | - CSS vars name 19 | 20 | ## [1.1.0] 21 | 22 | ### Added 23 | 24 | - Demo 25 | 26 | ## [1.1.0] 27 | 28 | ### Added 29 | 30 | - CHANGELOG.md 31 | - dist/ for JS support 32 | 33 | ### Fixed 34 | 35 | - package.json 36 | 37 | ## [1.0.0] 38 | 39 | ### Added 40 | 41 | - Initial Release 42 | -------------------------------------------------------------------------------- /packages/ct-button/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-button", 3 | "version": "4.4.12", 4 | "description": "HTML Button made with Web Components and Lit", 5 | "main": "ct-button.js", 6 | "types": "ct-button.d.ts", 7 | "module": "ct-button.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-icon": "^4.4.12", 18 | "lit": "^3.2.1", 19 | "tslib": "^2.6.3" 20 | }, 21 | "scripts": { 22 | "prepare": "rm -rf *.map *.js *.ts;tsc" 23 | }, 24 | "type": "module", 25 | "license": "BSD-3-Clause", 26 | "homepage": "https://github.com/conectate/ct-elements", 27 | "author": "Herberth Obregón ", 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/conectate/ct-elements" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/conectate/ct-elements/issues" 34 | }, 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "exports": { 39 | ".": { 40 | "dev": "./src/ct-button.ts", 41 | "default": "./ct-button.js" 42 | }, 43 | "./*": { 44 | "dev": "./src/*", 45 | "default": "./*" 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/ct-button/src/ct-button-helpers.ts: -------------------------------------------------------------------------------- 1 | interface RoverOptions { 2 | targets: NodeListOf | HTMLElement[]; 3 | active: HTMLElement; 4 | index: number; 5 | } 6 | const state = new Map(); 7 | 8 | export const rovingIndex = ({ element: rover, target: selector, targets }: { element: HTMLElement; target?: string; targets?: NodeListOf | HTMLElement[] }) => { 9 | // this api allows empty or a query string 10 | const target_query = selector || ":scope *"; 11 | targets = targets || rover.querySelectorAll(target_query); 12 | const startingPoint = targets[0]; 13 | 14 | // take container out of the focus flow 15 | rover.tabIndex = -1; 16 | // and all the children 17 | targets.forEach(a => (a.tabIndex = -1)); 18 | // except the first target, that accepts focus 19 | startingPoint.tabIndex = 0; 20 | 21 | // with the roving container as the key 22 | // save some state and handy references 23 | state.set(rover, { 24 | targets, 25 | active: startingPoint, 26 | index: 0 27 | }); 28 | 29 | // when container or children get focus 30 | const onFocusin = () => { 31 | if (state.get("last_rover") == rover) return; 32 | 33 | activate(rover, (state.get(rover) as RoverOptions).active); 34 | state.set("last_rover", rover); 35 | }; 36 | rover.addEventListener("focusin", onFocusin); 37 | 38 | // watch for arrow keys 39 | const onKeydown = (e: KeyboardEvent) => { 40 | switch (e.code) { 41 | case "ArrowRight": 42 | case "ArrowDown": 43 | e.preventDefault(); 44 | focusNextItem(rover); 45 | break; 46 | case "ArrowLeft": 47 | case "ArrowUp": 48 | e.preventDefault(); 49 | focusPreviousItem(rover); 50 | break; 51 | } 52 | }; 53 | rover.addEventListener("keydown", onKeydown); 54 | 55 | const cleanup = () => { 56 | rover.removeEventListener("focusin", onFocusin); 57 | rover.removeEventListener("keydown", onKeydown); 58 | rover.removeEventListener("DOMNodeRemoved", cleanup); 59 | 60 | state.delete(rover); 61 | targets!.forEach(a => (a.tabIndex = -1)); 62 | }; 63 | 64 | rover.addEventListener("DOMNodeRemovedFromDocument", cleanup); 65 | }; 66 | 67 | const focusNextItem = (rover: HTMLElement) => { 68 | const rx = state.get(rover) as RoverOptions; 69 | 70 | // increment state index 71 | rx.index += 1; 72 | 73 | // clamp navigation to target bounds 74 | if (rx.index > rx.targets.length - 1) rx.index = rx.targets.length - 1; 75 | 76 | // use rover index state to find next 77 | let next = rx.targets[rx.index]; 78 | 79 | // found something, activate it 80 | next && activate(rover, next); 81 | }; 82 | 83 | const focusPreviousItem = (rover: HTMLElement) => { 84 | const rx = state.get(rover) as RoverOptions; 85 | 86 | // decrement from the state index 87 | rx.index -= 1; 88 | 89 | // clamp to 0 and above only 90 | if (rx.index < 1) rx.index = 0; 91 | 92 | // use rover index state to find next 93 | let prev = rx.targets[rx.index]; 94 | 95 | // found something, activate it 96 | prev && activate(rover, prev); 97 | }; 98 | 99 | const activate = (rover: HTMLElement, item: HTMLElement) => { 100 | const rx = state.get(rover) as RoverOptions; 101 | 102 | // remove old tab index item 103 | rx.active.tabIndex = -1; 104 | 105 | // set new active item and focus it 106 | rx.active = item; 107 | rx.active.tabIndex = 0; 108 | rx.active.focus(); 109 | }; 110 | -------------------------------------------------------------------------------- /packages/ct-button/src/ct-button-split.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from "lit"; 2 | import { customElement, property } from "lit/decorators.js"; 3 | 4 | import { CtButton } from "./ct-button.js"; 5 | 6 | /** 7 | * @element ct-button-split 8 | */ 9 | @customElement("ct-button-split") 10 | export class CtButtonSplit extends LitElement { 11 | static CtButtonStyle = css` 12 | ct-button-split ct-button { 13 | border: none; 14 | background: transparent; 15 | color: inherit; 16 | --color-primary-hover: transparent; 17 | --color-primary-active: transparent; 18 | --color-on-primary: transparent; 19 | --ct-button-padding: 0.4em 0.5em 0.4em 1em; 20 | --ct-button-radius: 26px 4px 4px 26px; 21 | } 22 | `; 23 | static styles = [ 24 | CtButton.styles, 25 | css` 26 | :host { 27 | display: inline-flex; 28 | padding: 0; 29 | } 30 | ::slotted(ct-button) { 31 | border: none; 32 | padding-right: 6px; 33 | background: transparent; 34 | border-radius: var(--radius) 0 0 var(--radius); 35 | } 36 | ::slotted(ct-button-menu) { 37 | border-left: 1px solid #80808076; 38 | margin-right: 6px; 39 | } 40 | ::slotted(ct-list-item) { 41 | min-width: 152px; 42 | } 43 | ` 44 | ]; 45 | 46 | @property({ type: Boolean, reflect: true }) raised = false; 47 | @property({ type: Boolean, reflect: true }) shadow = false; 48 | @property({ type: Boolean, reflect: true }) flat = false; 49 | @property({ type: Boolean, reflect: true }) light = false; 50 | 51 | render() { 52 | return html``; 53 | } 54 | } 55 | 56 | declare global { 57 | interface HTMLElementTagNameMap { 58 | "ct-button-split": CtButtonSplit; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/ct-button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-card/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-card/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-card", 3 | "version": "4.4.9", 4 | "description": "HTML card made with Web Components and Lit", 5 | "main": "ct-card.js", 6 | "types": "ct-card.d.ts", 7 | "module": "ct-card.js", 8 | "dependencies": { 9 | "lit": "^3.2.1", 10 | "tslib": "^2.6.3" 11 | }, 12 | "scripts": { 13 | "prepare": "rm -rf *.map *.js *.ts;tsc" 14 | }, 15 | "type": "module", 16 | "license": "BSD-3-Clause", 17 | "homepage": "https://github.com/conectate/ct-elements", 18 | "author": "Herberth Obregón ", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/conectate/ct-elements" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/conectate/ct-elements/issues" 25 | }, 26 | "publishConfig": { 27 | "access": "public" 28 | }, 29 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 30 | } 31 | -------------------------------------------------------------------------------- /packages/ct-card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./" 5 | }, 6 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 7 | "exclude": [] 8 | } 9 | -------------------------------------------------------------------------------- /packages/ct-chartjs/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-chartjs/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-chartjs/README.md: -------------------------------------------------------------------------------- 1 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://github.com/conectate/ct-router) 2 | 3 | # ct-chartjs 4 | 5 | It's a simple wrapper of [chart.js](https://www.chartjs.org/) for LitElement 6 | 7 | ## Installation 8 | 9 | To include this, type: 10 | 11 | ```sh 12 | $ pnpm i @conectate/ct-chartjs 13 | # or 14 | $ npm i @conectate/ct-chartjs 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```typescript 20 | import '@conectate/ct-chartjs' 21 | 22 | export class xElement extends LitElement { 23 | render(){ 24 | return html`` 30 | } 31 | } 32 | ``` 33 | 34 | ## Follow me 35 | 36 | [![Herberth Obregón](https://user-images.githubusercontent.com/6503845/74269077-8bc2e100-4cce-11ea-8a6f-1ba34b8b5cf2.jpg)](https://x.com/herberthobregon) 37 | 38 | [https://x.com/herberthobregon](https://x.com/herberthobregon) 39 | 40 | [https://dev.to/herberthobregon](https://dev.to/herberthobregon) 41 | 42 | ## Contributing 43 | 44 | 1. Fork it! 45 | 2. Create your feature branch: `git checkout -b my-new-feature` 46 | 3. Commit your changes: `git commit -m 'Add some feature'` 47 | 4. Push to the branch: `git push origin my-new-feature` 48 | 5. Submit a pull request :D 49 | 50 | ## History 51 | 52 | - v0.1.0 Initial Release 53 | 54 | ## License 55 | 56 | See [LICENSE](/LICENSE) 57 | -------------------------------------------------------------------------------- /packages/ct-chartjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-chartjs", 3 | "version": "4.4.9", 4 | "description": "HTML5 Chartjs made with Web Components and Lit", 5 | "main": "ct-chartjs.js", 6 | "types": "ct-chartjs.d.ts", 7 | "module": "ct-chartjs.js", 8 | "dependencies": { 9 | "lit": "^3.2.1", 10 | "tslib": "^2.6.3" 11 | }, 12 | "scripts": { 13 | "prepare": "rm -rf *.map *.js *.ts;tsc" 14 | }, 15 | "type": "module", 16 | "license": "BSD-3-Clause", 17 | "homepage": "https://github.com/conectate/ct-elements", 18 | "author": "Herberth Obregón ", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/conectate/ct-elements" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/conectate/ct-elements/issues" 25 | }, 26 | "publishConfig": { 27 | "access": "public" 28 | }, 29 | "exports": { 30 | ".": { 31 | "dev": "./src/ct-chartjs.ts", 32 | "default": "./ct-chartjs.js" 33 | }, 34 | "./*": { 35 | "dev": "./src/*", 36 | "default": "./*" 37 | } 38 | }, 39 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 40 | } 41 | -------------------------------------------------------------------------------- /packages/ct-chartjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./" 5 | }, 6 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 7 | "exclude": [] 8 | } 9 | -------------------------------------------------------------------------------- /packages/ct-checkbox/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-checkbox/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-checkbox", 3 | "version": "4.4.12", 4 | "description": "HTML checkbox web component based on Material design", 5 | "main": "ct-checkbox.js", 6 | "types": "ct-checkbox.d.ts", 7 | "module": "ct-checkbox.js", 8 | "keywords": [ 9 | "litElement", 10 | "Web Components" 11 | ], 12 | "dependencies": { 13 | "@conectate/ct-icon": "^4.4.12", 14 | "@conectate/ct-lit": "^4.4.9", 15 | "lit": "^3.2.1", 16 | "tslib": "^2.6.3" 17 | }, 18 | "scripts": { 19 | "prepare": "rm -rf *.map *.js *.ts;tsc" 20 | }, 21 | "type": "module", 22 | "license": "BSD-3-Clause", 23 | "homepage": "https://github.com/conectate/ct-elements", 24 | "author": "Herberth Obregón ", 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/conectate/ct-elements" 28 | }, 29 | "bugs": { 30 | "url": "https://github.com/conectate/ct-elements/issues" 31 | }, 32 | "publishConfig": { 33 | "access": "public" 34 | }, 35 | "exports": { 36 | ".": { 37 | "dev": "./src/ct-checkbox.ts", 38 | "default": "./ct-checkbox.js" 39 | }, 40 | "./*": { 41 | "dev": "./src/*", 42 | "default": "./*" 43 | } 44 | }, 45 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 46 | } 47 | -------------------------------------------------------------------------------- /packages/ct-checkbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-collapse/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-collapse/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-collapse/README.md: -------------------------------------------------------------------------------- 1 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://github.com/conectate/ct-collapse) 2 | 3 | # ct-collapse 4 | 5 | A collapsible content component that can smoothly expand and collapse with animation. 6 | 7 | ## Installation 8 | 9 | ```sh 10 | # npm 11 | npm i @conectate/ct-collapse 12 | 13 | # yarn 14 | yarn add @conectate/ct-collapse 15 | 16 | # pnpm 17 | pnpm i @conectate/ct-collapse 18 | ``` 19 | 20 | ## Usage 21 | 22 | ### Basic Usage 23 | 24 | ```javascript 25 | import '@conectate/ct-collapse'; 26 | 27 | // Then use in your HTML 28 | 29 |
This content can be expanded or collapsed
30 | 31 | ``` 32 | 33 | ### Examples 34 | 35 | ```html 36 | 37 | 38 |
This content is collapsed by default
39 | 40 | 41 | 42 | 43 |
This content is expanded by default
44 | 45 | 46 | 47 | 48 |
49 |

Collapsed Section Title

50 |

First paragraph

51 |

Second paragraph

52 |
53 | 54 | ``` 55 | 56 | ### Controlling from JavaScript 57 | 58 | ```javascript 59 | // Get reference to the element 60 | const collapse = document.querySelector('ct-collapse'); 61 | 62 | // Toggle the collapse state 63 | collapse.toggle(); 64 | 65 | // Or set directly 66 | collapse.opened = true; // expand 67 | collapse.opened = false; // collapse 68 | ``` 69 | 70 | ## API 71 | 72 | ### Properties 73 | 74 | | Property | Attribute | Type | Default | Description | 75 | | -------- | --------- | --------- | ------- | ------------------------------------------------- | 76 | | `opened` | `opened` | `boolean` | `false` | Controls whether content is expanded or collapsed | 77 | 78 | ### Methods 79 | 80 | | Name | Description | 81 | | ---------- | -------------------------------------------- | 82 | | `toggle()` | Toggles between expanded and collapsed state | 83 | 84 | ### Events 85 | 86 | This component doesn't emit any custom events. 87 | 88 | ### Slots 89 | 90 | | Name | Description | 91 | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | 92 | | `(default)` | Content to be collapsed/expanded. Only one direct child element is supported. To include multiple elements, wrap them in a container element. | 93 | 94 | ## Styling 95 | 96 | ### CSS Custom Properties 97 | 98 | The component uses internal styling but can be customized by wrapping in a container or styling the content within. 99 | 100 | ### Internal styles 101 | 102 | The collapse animation is handled automatically. The component: 103 | 104 | - Uses a 250ms transition for all properties 105 | - Calculates the appropriate height for the content 106 | - Manages overflow properties during transition 107 | 108 | ## Notes 109 | 110 | - 🔔 Only **ONE** direct child element is supported. If you need to collapse multiple elements, wrap them in a container. 111 | - The component automatically calculates required heights for smooth animations. 112 | - The transition duration is fixed at 250ms. 113 | 114 | ## Follow me 115 | 116 | [![Herberth Obregón](https://user-images.githubusercontent.com/6503845/74269077-8bc2e100-4cce-11ea-8a6f-1ba34b8b5cf2.jpg)](https://x.com/herberthobregon) 117 | 118 | [https://x.com/herberthobregon](https://x.com/herberthobregon) 119 | 120 | [https://dev.to/herberthobregon](https://dev.to/herberthobregon) 121 | 122 | ## Contributing 123 | 124 | 1. Fork it! 125 | 2. Create your feature branch: `git checkout -b my-new-feature` 126 | 3. Commit your changes: `git commit -m 'Add some feature'` 127 | 4. Push to the branch: `git push origin my-new-feature` 128 | 5. Submit a pull request :D 129 | 130 | ## History 131 | 132 | - v1.0.0 Initial Release 133 | 134 | ## License 135 | 136 | See [LICENSE](/LICENSE) 137 | -------------------------------------------------------------------------------- /packages/ct-collapse/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-collapse", 3 | "version": "4.4.9", 4 | "description": "HTML webcomponent collapse", 5 | "main": "ct-collapse.js", 6 | "types": "ct-collapse.d.ts", 7 | "module": "ct-collapse.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-helpers": "^4.4.9", 18 | "@conectate/ct-lit": "^4.4.9" 19 | }, 20 | "scripts": { 21 | "prepare": "rm -rf *.map *.js *.ts;tsc" 22 | }, 23 | "type": "module", 24 | "license": "BSD-3-Clause", 25 | "homepage": "https://github.com/conectate/ct-elements", 26 | "author": "Herberth Obregón ", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/conectate/ct-elements" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/conectate/ct-elements/issues" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | }, 37 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 38 | } 39 | -------------------------------------------------------------------------------- /packages/ct-collapse/src/ct-collapse.ts: -------------------------------------------------------------------------------- 1 | import { sleep } from "@conectate/ct-helpers"; 2 | import { CtLit, css, customElement, html, property, query } from "@conectate/ct-lit"; 3 | 4 | /** 5 | * ## `ct-collapse` 6 | * A collapsible content component that can smoothly expand and collapse with animation. 7 | * 8 | * ### Usage 9 | * ```html 10 | * 11 | *
This content can be expanded or collapsed
12 | * 13 | * ``` 14 | * 15 | * ### Events 16 | * - None specific to this component 17 | * 18 | * ### Notes 19 | * - Only one child element is supported. If multiple elements are needed, wrap them in a container. 20 | * - The component automatically calculates required heights for smooth animations. 21 | * 22 | * @group ct-elements 23 | * @element ct-collapse 24 | */ 25 | @customElement("ct-collapse") 26 | export class CtCollapse extends CtLit { 27 | /** 28 | * Controls whether the content is expanded (true) or collapsed (false) 29 | */ 30 | @property({ type: Boolean }) opened = false; 31 | 32 | /** 33 | * Reference to the content slot element 34 | */ 35 | @query("#content") $content!: HTMLSlotElement; 36 | 37 | /** 38 | * Stores the main content element 39 | * @private 40 | */ 41 | content: any; 42 | 43 | /** 44 | * Stores assigned elements 45 | * @private 46 | */ 47 | elems: any[] = []; 48 | 49 | static styles: any = [ 50 | css` 51 | :host { 52 | display: block; 53 | transition: all 250ms; 54 | overflow: hidden; 55 | } 56 | 57 | :host(:not(.open)) { 58 | max-height: 0 !important; 59 | } 60 | ` 61 | ]; 62 | 63 | /** 64 | * Renders the collapse component with a slot for content 65 | * @returns {TemplateResult} The rendered template 66 | */ 67 | render(): any { 68 | return html` `; 69 | } 70 | 71 | /** 72 | * Lifecycle callback when the component is first updated 73 | * Gets the assigned nodes and performs initial setup 74 | */ 75 | firstUpdated() { 76 | let elems = (this.$content.assignedNodes() as HTMLElement[]).filter(elem => elem.nodeType == Node.ELEMENT_NODE); 77 | this.content = elems[0]; 78 | if (elems.length > 1) { 79 | console.warn("`ct-collapse` can have a ONE child, you can wrap him in a
"); 80 | } 81 | } 82 | 83 | /** 84 | * Handles property updates and triggers height calculation when opened state changes 85 | * @param {Map} map - Map of changed properties 86 | */ 87 | update(map: Map) { 88 | super.update(map); 89 | if (map.has("opened")) { 90 | this.calcMaxHeight(this.opened); 91 | } 92 | } 93 | 94 | /** 95 | * Toggles the opened state of the collapse component 96 | */ 97 | toggle() { 98 | this.opened = !this.opened; 99 | } 100 | 101 | /** 102 | * Calculates and sets the max height for smooth animation 103 | * @param {boolean} opened - Whether the collapse should be opened 104 | * @private 105 | */ 106 | async calcMaxHeight(opened: boolean) { 107 | if (this.content) { 108 | this.style.maxHeight = `${this.content.offsetHeight}px`; 109 | if (!opened) { 110 | this.style.overflow = "hidden!important"; 111 | } 112 | await sleep(50); 113 | this.classList.toggle("open", opened); 114 | await sleep(250); 115 | this.style.maxHeight = ``; 116 | if (opened) { 117 | this.style.overflow = "visible!important"; 118 | } 119 | } else if (opened) { 120 | await sleep(50); 121 | this.calcMaxHeight(opened); 122 | } 123 | } 124 | } 125 | 126 | declare global { 127 | interface HTMLElementTagNameMap { 128 | "ct-collapse": CtCollapse; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /packages/ct-collapse/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-date/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-date/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-date/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-date", 3 | "version": "4.4.13", 4 | "description": "HTML input date type made with Web Components", 5 | "main": "ct-date.js", 6 | "types": "ct-date.d.ts", 7 | "module": "ct-date.js", 8 | "type": "module", 9 | "keywords": [ 10 | "LitElement", 11 | "React", 12 | "Vue", 13 | "Angular", 14 | "Web Components", 15 | "Polymer" 16 | ], 17 | "files": [ 18 | "**/*.ts", 19 | "**/*.d.ts", 20 | "**/*.js", 21 | "**/*.js.map", 22 | "custom-elements.json", 23 | "!stories/", 24 | "!test/" 25 | ], 26 | "scripts": { 27 | "prepare": "rm -rf *.map *.js *.ts;tsc" 28 | }, 29 | "dependencies": { 30 | "@conectate/ct-input": "^4.4.13", 31 | "@conectate/ct-lit": "^4.4.9", 32 | "@conectate/lit-if": "^4.3.0", 33 | "tslib": "^2.6.3" 34 | }, 35 | "exports": { 36 | ".": { 37 | "dev": "./src/ct-date.ts", 38 | "default": "./ct-date.js" 39 | }, 40 | "./*": { 41 | "dev": "./src/*", 42 | "default": "./*" 43 | } 44 | }, 45 | "license": "BSD-3-Clause", 46 | "homepage": "https://github.com/conectate/ct-elements", 47 | "author": "Herberth Obregón ", 48 | "repository": { 49 | "type": "git", 50 | "url": "https://github.com/conectate/ct-elements" 51 | }, 52 | "bugs": { 53 | "url": "https://github.com/conectate/ct-elements/issues" 54 | }, 55 | "publishConfig": { 56 | "access": "public" 57 | }, 58 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 59 | } 60 | -------------------------------------------------------------------------------- /packages/ct-date/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-dialog/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/ct-dialog/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-dialog/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-dialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-dialog", 3 | "version": "4.4.13", 4 | "description": "HTML dialog made with Web Components", 5 | "main": "ct-dialog.js", 6 | "types": "ct-dialog.d.ts", 7 | "module": "ct-dialog.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-button": "^4.4.12", 18 | "@conectate/ct-card": "^4.4.9", 19 | "@conectate/ct-helpers": "^4.4.9", 20 | "@conectate/ct-input": "^4.4.13", 21 | "@conectate/ct-lit": "^4.4.9", 22 | "@conectate/ct-spinner": "^4.4.9", 23 | "lit": "^3.2.1" 24 | }, 25 | "scripts": { 26 | "prepare": "rm -rf *.map *.js *.ts;tsc" 27 | }, 28 | "type": "module", 29 | "license": "BSD-3-Clause", 30 | "homepage": "https://github.com/conectate/ct-elements", 31 | "author": "Herberth Obregón ", 32 | "repository": { 33 | "type": "git", 34 | "url": "https://github.com/conectate/ct-elements" 35 | }, 36 | "exports": { 37 | ".": { 38 | "dev": "./src/ct-dialog.js", 39 | "default": "./ct-dialog.js" 40 | }, 41 | "./*": { 42 | "dev": "./src/*", 43 | "default": "./*" 44 | } 45 | }, 46 | "bugs": { 47 | "url": "https://github.com/conectate/ct-elements/issues" 48 | }, 49 | "publishConfig": { 50 | "access": "public" 51 | }, 52 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 53 | } 54 | -------------------------------------------------------------------------------- /packages/ct-dialog/src/ct-card-dialog.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card/ct-card"; 2 | 3 | import { CtLit, customElement, html } from "@conectate/ct-lit"; 4 | 5 | import { ConectateHistory, CtDialog, showCtDialog } from "./ct-dialog.js"; 6 | 7 | /** 8 | * Creates and displays a card-styled dialog with the specified content 9 | * 10 | * @param {HTMLElement} el - The HTML element to display within the card dialog 11 | * @param {string} [id] - Optional identifier for the dialog 12 | * @param {ConectateHistory} [history] - Optional history object for browser history integration 13 | * @returns {CtDialog} The created dialog instance 14 | */ 15 | export function showCtCardDialog(el: HTMLElement, id?: string, history?: ConectateHistory) { 16 | let cardDialog = document.createElement("ct-card-dialog") as CtCardDialog; 17 | cardDialog.el = el; 18 | cardDialog.dialog = showCtDialog(cardDialog, id, history); 19 | return cardDialog.dialog; 20 | } 21 | // @ts-ignore 22 | window.showCtCardDialog = showCtCardDialog; 23 | 24 | /** 25 | * ## `ct-card-dialog` 26 | * A card-styled dialog component that presents content in a card format. 27 | * 28 | * ### Usage 29 | * ```javascript 30 | * import { showCtCardDialog } from '@conectate/ct-dialog'; 31 | * 32 | * // Create content for the card dialog 33 | * const content = document.createElement('div'); 34 | * content.innerHTML = ` 35 | *

Card Title

36 | *

This is card content with nice styling.

37 | * 38 | * `; 39 | * 40 | * // Show the card dialog 41 | * const dialog = showCtCardDialog(content); 42 | * 43 | * // Close dialog when needed 44 | * dialog.close(); 45 | * ``` 46 | * 47 | * @group ct-elements 48 | * @element ct-card-dialog 49 | */ 50 | @customElement("ct-card-dialog") 51 | export class CtCardDialog extends CtLit { 52 | /** 53 | * The HTML element to display within the card dialog 54 | */ 55 | el!: any; 56 | 57 | /** 58 | * Reference to the internal dialog instance 59 | */ 60 | dialog!: CtDialog; 61 | 62 | static get properties() { 63 | return { 64 | el: { type: Object } 65 | }; 66 | } 67 | 68 | render() { 69 | return html` 70 | 98 | ${this.el} 99 | `; 100 | } 101 | } 102 | declare global { 103 | interface HTMLElementTagNameMap { 104 | "ct-card-dialog": CtCardDialog; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /packages/ct-dialog/src/ct-loading.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-spinner"; 3 | import "@conectate/lit-if"; 4 | 5 | import { CtLit, customElement, html } from "@conectate/ct-lit"; 6 | 7 | import { CtDialog, showCtDialog } from "./ct-dialog.js"; 8 | 9 | /** 10 | * ## `ct-loading` 11 | * A dialog component that displays a loading spinner with customizable text. 12 | * 13 | * ### Usage 14 | * ```javascript 15 | * import { showCtLoading } from '@conectate/ct-dialog'; 16 | * 17 | * // Show a loading dialog 18 | * const loadingDialog = showCtLoading(); 19 | * 20 | * // Show a loading dialog with custom text 21 | * const customLoadingDialog = showCtLoading(undefined, 'Processing'); 22 | * 23 | * // Close the dialog when operation completes 24 | * loadingDialog.close(); 25 | * ``` 26 | * 27 | * @group ct-elements 28 | * @element ct-loading 29 | */ 30 | @customElement("ct-loading") 31 | export class CtLoading extends CtLit { 32 | /** 33 | * Text to display next to the spinner 34 | */ 35 | ttl: string = "Loading"; 36 | 37 | /** 38 | * Reference to the internal dialog instance 39 | */ 40 | dialog!: CtDialog; 41 | 42 | render() { 43 | return html` 44 | 58 | 59 |
60 | ${this.ttl}... 61 |
62 | 63 | `; 64 | } 65 | 66 | static get properties() { 67 | return { 68 | ttl: { type: String } 69 | }; 70 | } 71 | } 72 | declare global { 73 | interface HTMLElementTagNameMap { 74 | "ct-loading": CtLoading; 75 | } 76 | } 77 | 78 | /** 79 | * Displays a loading dialog with a spinner and optional custom text 80 | * 81 | * @param {string} [id] - Optional identifier for the dialog 82 | * @param {string} [str] - Optional custom text to display (default: "Loading") 83 | * @returns {CtDialog} The created dialog instance 84 | * 85 | * @example 86 | * ```javascript 87 | * // Display a loading dialog 88 | * const dialog = showCtLoading(); 89 | * 90 | * // Do some async operation 91 | * await someAsyncOperation(); 92 | * 93 | * // Close the loading dialog when complete 94 | * dialog.close(); 95 | * ``` 96 | */ 97 | export function showCtLoading(id?: string, str?: string): CtDialog { 98 | let ctConfirm = document.createElement("ct-loading") as CtLoading; 99 | if (str) ctConfirm.ttl = str; 100 | ctConfirm.dialog = showCtDialog(ctConfirm, id); 101 | return ctConfirm.dialog; 102 | } 103 | 104 | /** 105 | * Displays a loading dialog and returns the CtLoading instance 106 | * 107 | * @param {string} [id] - Optional identifier for the dialog 108 | * @param {string} [str] - Optional custom text to display (default: "Loading") 109 | * @returns {CtLoading} The created CtLoading instance 110 | */ 111 | export function showCtLoading2(id?: string, str?: string): CtLoading { 112 | let ctConfirm = document.createElement("ct-loading") as CtLoading; 113 | if (str) ctConfirm.ttl = str; 114 | ctConfirm.dialog = showCtDialog(ctConfirm, id); 115 | return ctConfirm; 116 | } 117 | export { CtDialog }; 118 | // @ts-ignore 119 | window.showCtLoading = showCtLoading; 120 | -------------------------------------------------------------------------------- /packages/ct-dialog/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-helpers/.gitignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /packages/ct-helpers/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-helpers/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [1.0.0] 9 | 10 | ### Added 11 | 12 | - Initial Release 13 | -------------------------------------------------------------------------------- /packages/ct-helpers/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-helpers/README.md: -------------------------------------------------------------------------------- 1 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://github.com/conectate/ct-helpers) 2 | 3 | # ct-helpers 4 | 5 | It's a simple wrapper for LitElement 6 | 7 | ## Installation 8 | 9 | To include this, type: 10 | 11 | ```sh 12 | $ pnpm i @conectate/ct-helpers 13 | ``` 14 | 15 | or 16 | 17 | ```sh 18 | $ npm i @conectate/ct-helpers 19 | ``` 20 | 21 | ## Usage 22 | 23 | ```typescript 24 | // Typescript 25 | import { PushID, browserCapabilities, getClient, getGeoLocation, sleep } from "@conectate/ct-helpers"; 26 | let ua = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36"; 27 | async function main() { 28 | console.log(browserCapabilities(ua)); 29 | // Set(4) { 'es2015', 'es2016', 'es2017', 'push' } 30 | console.log(getClient(ua)); 31 | // { 32 | // browser: 'edge', 33 | // browserVersion: 44.18363, 34 | // isMobile: false, 35 | // os: 'windows', 36 | // osVersion: 10 37 | // } 38 | console.log(await getGeoLocation()); 39 | await sleep(1000); 40 | let pid = new PushID(); 41 | let randomID_20length: string = pid.next(20); 42 | } 43 | main(); 44 | ``` 45 | 46 | ## Follow me 47 | 48 | [![Herberth Obregón](https://user-images.githubusercontent.com/6503845/74269077-8bc2e100-4cce-11ea-8a6f-1ba34b8b5cf2.jpg)](https://x.com/herberthobregon) 49 | 50 | [https://x.com/herberthobregon](https://x.com/herberthobregon) 51 | 52 | [https://dev.to/herberthobregon](https://dev.to/herberthobregon) 53 | 54 | ## Contributing 55 | 56 | 1. Fork it! 57 | 2. Create your feature branch: `git checkout -b my-new-feature` 58 | 3. Commit your changes: `git commit -m 'Add some feature'` 59 | 4. Push to the branch: `git push origin my-new-feature` 60 | 5. Submit a pull request 61 | 62 | ## License 63 | 64 | See [LICENSE](/LICENSE) 65 | -------------------------------------------------------------------------------- /packages/ct-helpers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-helpers", 3 | "version": "4.4.9", 4 | "description": "Simple helpers for web developers", 5 | "main": "ct-helpers.js", 6 | "module": "ct-helpers.js", 7 | "types": "ct-helpers.d.ts", 8 | "keywords": [ 9 | "Get Client", 10 | "User Agent", 11 | "Web", 12 | "Geolocation", 13 | "Generate ID" 14 | ], 15 | "scripts": { 16 | "prepare": "rm -rf *.map *.js *.ts;tsc" 17 | }, 18 | "type": "module", 19 | "license": "BSD-3-Clause", 20 | "homepage": "https://github.com/conectate/ct-elements", 21 | "author": "Herberth Obregón ", 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/conectate/ct-elements" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/conectate/ct-elements/issues" 28 | }, 29 | "publishConfig": { 30 | "access": "public" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/ct-helpers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./" 5 | }, 6 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 7 | "exclude": [] 8 | } 9 | -------------------------------------------------------------------------------- /packages/ct-icon/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-icon/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-icon", 3 | "version": "4.4.12", 4 | "description": "HTML Material Design icon made with Web Components and Lit", 5 | "main": "ct-icon.js", 6 | "types": "ct-icon.d.ts", 7 | "module": "ct-icon.js", 8 | "scripts": { 9 | "prepare": "rm -rf *.map *.js *.ts;tsc" 10 | }, 11 | "dependencies": { 12 | "lit": "^3.2.1", 13 | "tslib": "^2.6.3" 14 | }, 15 | "type": "module", 16 | "license": "BSD-3-Clause", 17 | "homepage": "https://github.com/conectate/ct-elements", 18 | "author": "Herberth Obregón ", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/conectate/ct-elements" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/conectate/ct-elements/issues" 25 | }, 26 | "publishConfig": { 27 | "access": "public" 28 | }, 29 | "exports": { 30 | ".": { 31 | "dev": "./src/ct-icon.ts", 32 | "default": "./ct-icon.js" 33 | }, 34 | "./*": { 35 | "dev": "./src/*", 36 | "default": "./*" 37 | } 38 | }, 39 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 40 | } 41 | -------------------------------------------------------------------------------- /packages/ct-icon/src/ct-icon-button.ts: -------------------------------------------------------------------------------- 1 | import "./ct-icon.js"; 2 | 3 | import { LitElement, css, html } from "lit"; 4 | import { customElement, property } from "lit/decorators.js"; 5 | import { ifDefined } from "lit/directives/if-defined.js"; 6 | 7 | import { icon } from "./icon-list.js"; 8 | 9 | /** 10 | * A circular button component that displays a Material Icon or custom SVG. 11 | * 12 | * This component builds upon the `ct-icon` component and provides button 13 | * functionality with hover and active states. It's perfect for creating 14 | * icon-based action buttons in your application. 15 | * 16 | * @element ct-icon-button 17 | * 18 | * @example 19 | * ```html 20 | * 21 | * 22 | * 23 | * 24 | * 25 | * 26 | * 27 | * 28 | * 29 | * 30 | * 31 | * ``` 32 | * 33 | * @csspart button - The button element 34 | * @csspart icon - The icon element (forwarded from ct-icon) 35 | * 36 | * @cssproperty --ct-icon-size - Size of the icon (default: 24px) 37 | * @cssproperty --ct-icon-button-padding - Padding around the icon (calculated based on icon size) 38 | */ 39 | @customElement("ct-icon-button") 40 | export class CtIconButton extends LitElement { 41 | static styles = css` 42 | :host { 43 | display: inline-flex; 44 | border-radius: 50%; 45 | outline: none; 46 | -webkit-tap-highlight-color: transparent; 47 | } 48 | :host(:hover) { 49 | background: #7c7c7c0d; 50 | } 51 | :host(:active) { 52 | background: #7c7c7c2a; 53 | } 54 | 55 | :host([disabled]) { 56 | pointer-events: none; 57 | opacity: 0.5; 58 | } 59 | button { 60 | line-height: 0px; 61 | vertical-align: top; 62 | display: inline-flex; 63 | position: relative; 64 | box-sizing: border-box; 65 | border: none; 66 | outline: none; 67 | background-color: transparent; 68 | fill: currentcolor; 69 | color: inherit; 70 | text-decoration: none; 71 | cursor: pointer; 72 | user-select: none; 73 | padding: calc((var(--ct-icon-size, 24px) * 2 - var(--ct-icon-size, 24px)) / 2); 74 | } 75 | `; 76 | 77 | /** 78 | * Whether the button is disabled 79 | */ 80 | @property({ type: Boolean, reflect: true }) disabled = false; 81 | 82 | /** 83 | * The name of the Material Icon to display 84 | * @see https://fonts.google.com/icons 85 | */ 86 | @property({ type: String }) icon?: icon; 87 | 88 | /** 89 | * Custom SVG content if the icon is not available in Google Fonts 90 | */ 91 | @property({ type: String }) svg?: string; 92 | 93 | /** 94 | * Accessible label for the button 95 | * If not provided, the icon name will be used as the aria-label 96 | */ 97 | @property({ type: String, attribute: "aria-label" }) 98 | ariaLabel: string = ""; 99 | 100 | /** 101 | * Renders the icon button with proper accessibility attributes 102 | */ 103 | render() { 104 | return html``; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /packages/ct-icon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-img/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-img/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-img/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-img", 3 | "version": "4.4.9", 4 | "description": "Lazy load images in web with Web Components and lit", 5 | "module": "ct-img.js", 6 | "main": "ct-img.js", 7 | "types": "ct-img.d.ts", 8 | "keywords": [ 9 | "lit", 10 | "Web Components", 11 | "Lazy load images" 12 | ], 13 | "scripts": { 14 | "prepare": "rm -rf *.map *.js *.ts;tsc" 15 | }, 16 | "dependencies": { 17 | "@conectate/ct-lit": "^4.4.9", 18 | "tslib": "^2.6.3" 19 | }, 20 | "type": "module", 21 | "license": "BSD-3-Clause", 22 | "homepage": "https://github.com/conectate/ct-elements", 23 | "author": "Herberth Obregón ", 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/conectate/ct-elements" 27 | }, 28 | "bugs": { 29 | "url": "https://github.com/conectate/ct-elements/issues" 30 | }, 31 | "publishConfig": { 32 | "access": "public" 33 | }, 34 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 35 | } 36 | -------------------------------------------------------------------------------- /packages/ct-img/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-input/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-input/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-input", 3 | "version": "4.4.13", 4 | "description": "HTML input made with Web Components", 5 | "main": "ct-input.js", 6 | "types": "ct-input.d.ts", 7 | "module": "ct-input.js", 8 | "keywords": [ 9 | "Lit", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-helpers": "^4.4.9", 18 | "@conectate/ct-lit": "^4.4.9", 19 | "tslib": "^2.6.3" 20 | }, 21 | "scripts": { 22 | "prepare": "rm -rf *.map *.js *.ts;tsc" 23 | }, 24 | "type": "module", 25 | "license": "BSD-3-Clause", 26 | "homepage": "https://github.com/conectate/ct-elements", 27 | "author": "Herberth Obregón ", 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/conectate/ct-elements" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/conectate/ct-elements/issues" 34 | }, 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "exports": { 39 | ".": { 40 | "dev": "./src/ct-input.js", 41 | "default": "./ct-input.js" 42 | }, 43 | "./*": { 44 | "dev": "./src/*", 45 | "default": "./*" 46 | } 47 | }, 48 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 49 | } 50 | -------------------------------------------------------------------------------- /packages/ct-input/src/ct-input-autocomplete.ts: -------------------------------------------------------------------------------- 1 | import "./ct-autocomplete-suggestions.js"; 2 | import "./ct-input.js"; 3 | 4 | import { sleep } from "@conectate/ct-helpers"; 5 | import { CtLit, customElement, property, query, state } from "@conectate/ct-lit"; 6 | import { html } from "lit"; 7 | 8 | /** 9 | * # `ct-input-autocomplete` 10 | * 11 | * @group ct-elements 12 | * @element ct-input-autocomplete 13 | */ 14 | @customElement("ct-input-autocomplete") 15 | export class CtInputAutocomplete extends CtLit { 16 | render() { 17 | return html` 18 | 34 | 35 |
36 | 46 | 47 | 48 | 49 |
50 | 51 | 52 | 53 | `; 54 | } 55 | @query("#autocompleteInput") $autocompleteInput!: HTMLInputElement; 56 | @query("#autocompleteSuggestions") $autocompleteSuggestions!: any; 57 | @property({ type: String }) label = ""; 58 | @property({ type: String }) placeholder = ""; 59 | @property({ type: String }) errorMessage = ""; 60 | @property({ type: Boolean }) required = false; 61 | @property({ type: Boolean }) compute = false; 62 | @property({ type: Boolean }) remote = false; 63 | @property({ type: Number }) maxlength!: number; 64 | @property({ type: Array }) source: any[] = []; 65 | @property({ type: String }) textProperty = "text"; 66 | @property({ type: String }) valueProperty = "value"; 67 | @property({ type: Object }) renderItem = (item: any, index: number) => html``; 68 | @state() _text: string = ""; 69 | @state() _value?: any = undefined; 70 | 71 | async onBlur() { 72 | await sleep(500); 73 | this.$autocompleteSuggestions.hiddeSugg(); 74 | } 75 | 76 | get value() { 77 | return this._value; 78 | } 79 | 80 | set value(val) { 81 | if (this._value != val) { 82 | let old = this._value; 83 | this._value = val; 84 | this.requestUpdate("value", old); 85 | this.dispatchEvent(new CustomEvent("value", { detail: { value: val } })); 86 | // Si seteo un valor y este existe en el source entonces 87 | for (let i = 0; this.compute && this.source && i < this.source.length; i++) { 88 | let el = this.source[i]; 89 | if (val == el.value) { 90 | this.text = el.text; 91 | return; 92 | } 93 | } 94 | } 95 | } 96 | 97 | get text() { 98 | return this._text; 99 | } 100 | 101 | set text(text) { 102 | if (this._text != text) { 103 | let old = this._text; 104 | this._text = text; 105 | this.requestUpdate("text", old); 106 | this.dispatchEvent(new CustomEvent("text", { detail: { value: text } })); 107 | for (let i = 0; this.compute && this.source && i < this.source.length; i++) { 108 | let el = this.source[i]; 109 | if (text == el.text) { 110 | this.value = el.value; 111 | return; 112 | } 113 | } 114 | } 115 | } 116 | 117 | validate() { 118 | return true; 119 | } 120 | } 121 | declare global { 122 | interface HTMLElementTagNameMap { 123 | "ct-input-autocomplete": CtInputAutocomplete; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /packages/ct-input/src/ct-input-open.ts: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2020 Herberth Obregón. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | https://open.grupoconectate.com/LICENSE.txt The complete set of authors may be found at 6 | https://open.grupoconectate.com/AUTHORS.txt The complete set of contributors may be 7 | found at https://open.grupoconectate.com/CONTRIBUTORS.txt Code distributed by Herberth Obregón as 8 | part of the Conectate Open Source Project is also subject to an additional IP rights grant 9 | found at https://open.grupoconectate.com/PATENTS.txt 10 | */ 11 | 12 | import { customElement, unsafeHTML } from "@conectate/ct-lit"; 13 | import { html } from "lit"; 14 | 15 | import { CtInput } from "./ct-input.js"; 16 | 17 | /** 18 | * # `ct-input-open` 19 | * 20 | * @group ct-elements 21 | * @element ct-input-open 22 | */ 23 | @customElement("ct-input-open") 24 | export class CtInputOpen extends CtInput { 25 | render() { 26 | return html`${unsafeHTML(``)}${super.render()}`; 27 | } 28 | createRenderRoot() { 29 | return this; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/ct-input/src/ct-input-phone.ts: -------------------------------------------------------------------------------- 1 | import "./ct-input-container.js"; 2 | 3 | import { CtLit, customElement, property, query } from "@conectate/ct-lit"; 4 | import { css, html } from "lit"; 5 | 6 | /** 7 | * @element ct-input-phone 8 | */ 9 | @customElement("ct-input-phone") 10 | export class CtInputPhone extends CtLit { 11 | code?: number = 502; 12 | phone?: string = ""; 13 | invalid: boolean = false; 14 | label: string = ""; 15 | errorMessage: string = ""; 16 | required: boolean = false; 17 | @property({ type: String }) autocomplete: AutoFill = "off"; 18 | @query("#cd") $cd!: HTMLInputElement; 19 | @query("#phone") $phone!: HTMLInputElement; 20 | 21 | static styles = [ 22 | css` 23 | :host { 24 | display: inline-flex; 25 | color: var(--color-on-surface, #535353); 26 | } 27 | 28 | *:focus { 29 | outline: 0; 30 | } 31 | ct-input-container { 32 | flex: 1; 33 | } 34 | 35 | input { 36 | display: inline-block; 37 | font: inherit; 38 | outline: none; 39 | box-shadow: none; 40 | border: none; 41 | width: auto; 42 | height: var(--ct-input-height, 3.3em); 43 | line-height: var(--ct-input-height, 3.3em); 44 | color: var(--color-on-surface, #535353); 45 | background: transparent; 46 | } 47 | 48 | #cd { 49 | min-width: 36px; 50 | text-align: center; 51 | } 52 | #phone { 53 | min-width: 140px; 54 | text-align: left; 55 | width: 100%; 56 | } 57 | .sep { 58 | font-size: 1.1em; 59 | min-width: 20px; 60 | } 61 | .horiz { 62 | display: flex; 63 | flex-direction: row; 64 | align-items: center; 65 | } 66 | ` 67 | ]; 68 | $!: { 69 | cd: HTMLInputElement; 70 | phone: HTMLInputElement; 71 | }; 72 | render() { 73 | return html` 74 | 75 | 76 | ( + 77 | 88 | ) 89 | 101 | 102 | 103 | `; 104 | } 105 | 106 | updated(cp: Map) { 107 | super.update(cp); 108 | if (cp.has("code")) this.focusPhone(this.code); 109 | } 110 | 111 | static get properties() { 112 | return { 113 | required: { type: Boolean }, 114 | label: { type: String }, 115 | code: { type: Number }, 116 | phone: { type: String }, 117 | invalid: { type: Boolean } 118 | }; 119 | } 120 | 121 | focusPhone(code?: number) { 122 | if (code && `${code}`.length == 3) { 123 | this.$phone.focus(); 124 | } 125 | } 126 | 127 | validate() { 128 | let code = this.code || 0, 129 | phone = this.phone || ""; 130 | if (code > 0 && phone.trim().length > 4) { 131 | this.invalid = false; 132 | } else { 133 | this.invalid = true; 134 | } 135 | return !this.invalid; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /packages/ct-input/src/ct-input-wrapper.ts: -------------------------------------------------------------------------------- 1 | import { CtLit, customElement, property, query } from "@conectate/ct-lit"; 2 | import { html } from "lit"; 3 | 4 | /** 5 | * # `ct-input-wrapper` 6 | * 7 | * @group ct-elements 8 | * @element ct-input-wrapper 9 | */ 10 | @customElement("ct-input-wrapper") 11 | export class CtInputWrapper extends CtLit { 12 | @property({ type: String }) type: 13 | | "hidden" 14 | | "text" 15 | | "search" 16 | | "tel" 17 | | "url" 18 | | "email" 19 | | "password" 20 | | "datetime" 21 | | "date" 22 | | "month" 23 | | "week" 24 | | "time" 25 | | "datetime-local" 26 | | "number" 27 | | "range" 28 | | "color" 29 | | "checkbox" 30 | | "radio" 31 | | "file" 32 | | "submit" 33 | | "image" 34 | | "reset" 35 | | "button" = "file"; 36 | @property({ type: String }) accept = "text"; 37 | @property({ type: Boolean }) multiple = false; 38 | @query("#inputElement") $inputElement!: HTMLInputElement; 39 | 40 | render() { 41 | return html` 60 | 61 | `; 62 | } 63 | 64 | callOnChange(e: any) { 65 | const files = (this.$inputElement as HTMLInputElement).files; 66 | if (files && files.length > 0) { 67 | this.dispatchEvent( 68 | new CustomEvent("files", { 69 | detail: { files: files } 70 | }) 71 | ); 72 | } 73 | } 74 | 75 | clear() { 76 | this.$inputElement.value = ""; 77 | } 78 | } 79 | declare global { 80 | interface HTMLElementTagNameMap { 81 | "ct-input-wrapper": CtInputWrapper; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /packages/ct-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-list/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-list/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-list", 3 | "version": "4.4.13", 4 | "description": "Wrapper from LitElement", 5 | "main": "ct-list.js", 6 | "module": "ct-list.js", 7 | "license": "BSD-3-Clause", 8 | "author": "Herberth Obregón ", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/conectate/ct-elements" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/conectate/ct-elements/issues" 15 | }, 16 | "homepage": "https://github.com/conectate/ct-elements", 17 | "scripts": { 18 | "prepare": "rm -rf *.map *.js *.ts;tsc" 19 | }, 20 | "keywords": [ 21 | "litElement", 22 | "wrapper", 23 | "Web Components" 24 | ], 25 | "dependencies": { 26 | "@conectate/ct-icon": "^4.4.12", 27 | "@conectate/ct-lit": "^4.4.9" 28 | }, 29 | "publishConfig": { 30 | "access": "public" 31 | }, 32 | "exports": { 33 | ".": { 34 | "dev": "./src/ct-list-item.ts", 35 | "default": "./ct-list-item.js" 36 | }, 37 | "./*": { 38 | "dev": "./src/*", 39 | "default": "./*" 40 | } 41 | }, 42 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 43 | } 44 | -------------------------------------------------------------------------------- /packages/ct-list/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-lit/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-lit/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [1.1.0] 9 | 10 | ### Added 11 | 12 | - CHANGELOG.md 13 | - dist/ for JS support 14 | 15 | ### Fixed 16 | 17 | - package.json 18 | 19 | ## [1.0.0] 20 | 21 | ### Added 22 | 23 | - Initial Release 24 | -------------------------------------------------------------------------------- /packages/ct-lit/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-lit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-lit", 3 | "version": "4.4.9", 4 | "description": "Super class wrapper for lit", 5 | "main": "ct-lit.js", 6 | "types": "ct-lit.d.ts", 7 | "module": "ct-lit.js", 8 | "keywords": [ 9 | "Lit", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "lit": "^3.2.1", 18 | "tslib": "^2.6.3" 19 | }, 20 | "scripts": { 21 | "prepare": "rm -rf *.map *.js *.ts;tsc" 22 | }, 23 | "type": "module", 24 | "license": "BSD-3-Clause", 25 | "homepage": "https://github.com/conectate/ct-elements", 26 | "author": "Herberth Obregón ", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/conectate/ct-elements" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/conectate/ct-elements/issues" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | }, 37 | "exports": { 38 | ".": { 39 | "dev": "./src/ct-lit.ts", 40 | "default": "./ct-lit.js" 41 | }, 42 | "./*": { 43 | "dev": "./src/*", 44 | "default": "./*" 45 | } 46 | }, 47 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 48 | } 49 | -------------------------------------------------------------------------------- /packages/ct-lit/result.md: -------------------------------------------------------------------------------- 1 | ## Summary 2 | 3 | | Files analyzed | Files with problems | Problems | Errors | Warnings | 4 | | -------------- | ------------------- | -------- | ------ | -------- | 5 | | 1 | 0 | 0 | 0 | 0 | 6 | -------------------------------------------------------------------------------- /packages/ct-lit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-loading-bar/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-loading-bar/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-loading-bar/README.md: -------------------------------------------------------------------------------- 1 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@conectate/ct-loading-placeholder) 2 | [![NPM](https://badge.fury.io/js/%40conectate%2Fct-loading-placeholder.svg)](https://badge.fury.io/js/%40conectate%2Fct-loading-placeholder.svg) 3 | [![GitHub version](https://badge.fury.io/gh/conectate%2Fct-loading-placeholder.svg)](https://badge.fury.io/gh/conectate%2Fct-loading-placeholder) 4 | [![Known Vulnerabilities](https://snyk.io/test/github/conectate/ct-loading-placeholder/badge.svg?targetFile=package.json)](https://snyk.io/test/github/conectate/ct-loading-placeholder?targetFile=package.json) 5 | 6 | # ct-loading-placeholder 7 | 8 | `ct-loading-placeholder` is a simple element to use skeleton loading such as Facebook. 9 | 10 | ## Installation 11 | 12 | To include this, type: 13 | 14 | ```sh 15 | $ yarn add @conectate/ct-loading-placeholder 16 | ``` 17 | 18 | or 19 | 20 | ```sh 21 | $ npm i @conectate/ct-loading-placeholder 22 | ``` 23 | 24 | ## Usage 25 | 26 | ### Import lib 27 | 28 | ```javascript 29 | import '@conectate/ct-loading-placeholder/ct-loading-placeholder'; 30 | ``` 31 | 32 | ### Use in your HTML 33 | 34 | ```html 35 | 36 | ``` 37 | 38 | ### Styling 39 | 40 | | Custom property | Description | Default | 41 | | ------------------------------- | ----------------------------- | --------- | 42 | | `--loading-placeholder-color-1` | Primary color for animation | `#E0E0E0` | 43 | | `--loading-placeholder-color-2` | Secondary color for animation | `#C0C0C0` | 44 | 45 | ## Demo 46 | 47 | [![Demo](https://raw.githubusercontent.com/Conectate/ct-loading-placeholder/master/demo/ct-loading-placeholder.gif)](https://raw.githubusercontent.com/Conectate/ct-loading-placeholder/master/demo/ct-loading-placeholder.gif) 48 | 49 | ## Follow me 50 | 51 | [![Herberth Obregón](https://user-images.githubusercontent.com/6503845/74269077-8bc2e100-4cce-11ea-8a6f-1ba34b8b5cf2.jpg)](https://twitter.com/herberthobregon) 52 | 53 | [https://twitter.com/herberthobregon](https://twitter.com/herberthobregon) 54 | 55 | [https://www.conectate.today/herberthobregon](https://www.conectate.today/herberthobregon) 56 | 57 | ## Contributing 58 | 59 | 1. Fork it! 60 | 2. Create your feature branch: `git checkout -b my-new-feature` 61 | 3. Commit your changes: `git commit -m 'Add some feature'` 62 | 4. Push to the branch: `git push origin my-new-feature` 63 | 5. Submit a pull request :D 64 | 65 | ## History 66 | 67 | - v0.2.1 CHANGE keys to gruops in custom regex 68 | - v0.2.0 ADD href method 69 | - v0.1.8 You can use a html`` or string to define template 70 | - v0.1.0 Initial Release 71 | 72 | ## License 73 | 74 | See [LICENSE](/LICENSE) 75 | -------------------------------------------------------------------------------- /packages/ct-loading-bar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-loading-bar", 3 | "version": "4.4.9", 4 | "description": "HTML indeterminate progress bar for lit", 5 | "main": "ct-loading-bar.js", 6 | "types": "ct-loading-bar.d.ts", 7 | "module": "ct-loading-bar.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-lit": "^4.4.9", 18 | "tslib": "^2.6.3" 19 | }, 20 | "scripts": { 21 | "prepare": "rm -rf *.map *.js *.ts;tsc" 22 | }, 23 | "type": "module", 24 | "license": "BSD-3-Clause", 25 | "homepage": "https://github.com/conectate/ct-elements", 26 | "author": "Herberth Obregón ", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/conectate/ct-elements" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/conectate/ct-elements/issues" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | }, 37 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 38 | } 39 | -------------------------------------------------------------------------------- /packages/ct-loading-bar/src/ct-loading-bar.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import { customElement } from "lit/decorators.js"; 3 | /** 4 | 5 | ## ct-loading-bar 6 | 7 | The progress bars are for situations where the percentage completed can be 8 | determined. They give users a quick sense of how much longer an operation 9 | will take. 10 | Example: 11 | ```html 12 | 13 | ``` 14 | 15 | 16 | The following mixins are available for styling: 17 | 18 | 19 | Custom property | Description | Default 20 | ----------------|-------------|--------- 21 | `--ct-loading-bar-c1` | Color of the container | `#4998ff` 22 | `--ct-loading-bar-c2` | Color of the container | `#fff` 23 | `--ct-loading-bar-c3` | Color of the container | `#4998ff` 24 | 25 | @element ct-loading-bar 26 | */ 27 | @customElement("ct-loading-bar") 28 | export class CtLoadingBar extends LitElement { 29 | render() { 30 | return html` 31 | 89 |
90 |
91 |
92 |
93 |
94 | `; 95 | } 96 | } 97 | 98 | declare global { 99 | interface HTMLElementTagNameMap { 100 | "ct-loading-bar": CtLoadingBar; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /packages/ct-loading-bar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/README.md: -------------------------------------------------------------------------------- 1 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@conectate/ct-loading-placeholder) 2 | [![NPM](https://badge.fury.io/js/%40conectate%2Fct-loading-placeholder.svg)](https://badge.fury.io/js/%40conectate%2Fct-loading-placeholder.svg) 3 | [![GitHub version](https://badge.fury.io/gh/conectate%2Fct-loading-placeholder.svg)](https://badge.fury.io/gh/conectate%2Fct-loading-placeholder) 4 | [![Known Vulnerabilities](https://snyk.io/test/github/conectate/ct-loading-placeholder/badge.svg?targetFile=package.json)](https://snyk.io/test/github/conectate/ct-loading-placeholder?targetFile=package.json) 5 | 6 | # ct-loading-placeholder 7 | 8 | `ct-loading-placeholder` is a simple element to use skeleton loading such as Facebook. 9 | 10 | ## Installation 11 | 12 | To include this, type: 13 | 14 | ```sh 15 | $ pnpm i @conectate/ct-loading-placeholder 16 | ``` 17 | 18 | or 19 | 20 | ```sh 21 | $ npm i @conectate/ct-loading-placeholder 22 | ``` 23 | 24 | ## Usage 25 | 26 | ### Import lib 27 | 28 | ```javascript 29 | import '@conectate/ct-loading-placeholder/ct-loading-placeholder'; 30 | ``` 31 | 32 | ### Use in your HTML 33 | 34 | ```html 35 | 36 | ``` 37 | 38 | ### Styling 39 | 40 | | Custom property | Description | Default | 41 | | ------------------------------- | ----------------------------- | --------- | 42 | | `--loading-placeholder-color-1` | Primary color for animation | `#E0E0E0` | 43 | | `--loading-placeholder-color-2` | Secondary color for animation | `#C0C0C0` | 44 | 45 | ## Demo 46 | 47 | [![Demo](https://raw.githubusercontent.com/Conectate/ct-loading-placeholder/master/demo/ct-loading-placeholder.gif)](https://raw.githubusercontent.com/Conectate/ct-loading-placeholder/master/demo/ct-loading-placeholder.gif) 48 | 49 | ## Follow me 50 | 51 | [![Herberth Obregón](https://user-images.githubusercontent.com/6503845/74269077-8bc2e100-4cce-11ea-8a6f-1ba34b8b5cf2.jpg)](https://x.com/herberthobregon) 52 | 53 | [https://x.com/herberthobregon](https://x.com/herberthobregon) 54 | 55 | [https://dev.to/herberthobregon](https://dev.to/herberthobregon) 56 | 57 | ## Contributing 58 | 59 | 1. Fork it! 60 | 2. Create your feature branch: `git checkout -b my-new-feature` 61 | 3. Commit your changes: `git commit -m 'Add some feature'` 62 | 4. Push to the branch: `git push origin my-new-feature` 63 | 5. Submit a pull request :D 64 | 65 | ## History 66 | 67 | - v0.2.1 CHANGE keys to gruops in custom regex 68 | - v0.2.0 ADD href method 69 | - v0.1.8 You can use a html`` or string to define template 70 | - v0.1.0 Initial Release 71 | 72 | ## License 73 | 74 | See [LICENSE](/LICENSE) 75 | -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/demo/ct-loading-placeholder.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/84da6173eb45365a5ae5e4a3b3c463fc09d65acd/packages/ct-loading-placeholder/demo/ct-loading-placeholder.gif -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-loading-placeholder", 3 | "version": "4.4.9", 4 | "description": "Is a simple element to use skeleton loading such as Facebook.", 5 | "main": "ct-loading-placeholder.js", 6 | "types": "ct-loading-placeholder.d.ts", 7 | "module": "ct-loading-placeholder.js", 8 | "license": "BSD-3-Clause", 9 | "author": "Herberth Obregón ", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/conectate/ct-elements" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/conectate/ct-elements/issues" 16 | }, 17 | "homepage": "https://github.com/conectate/ct-elements", 18 | "scripts": { 19 | "prepare": "rm -rf *.map *.js *.ts;tsc" 20 | }, 21 | "keywords": [ 22 | "LitElement", 23 | "React", 24 | "Vue", 25 | "Angular", 26 | "Web Components", 27 | "Polymer", 28 | "loading", 29 | "placeholder" 30 | ], 31 | "dependencies": { 32 | "@conectate/ct-lit": "^4.4.9", 33 | "lit": "^3.2.1", 34 | "tslib": "^2.6.3" 35 | }, 36 | "publishConfig": { 37 | "access": "public" 38 | }, 39 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 40 | } 41 | -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/src/ct-loading-placeholder.ts: -------------------------------------------------------------------------------- 1 | import { CtLit, css, customElement, property } from "@conectate/ct-lit"; 2 | import { html } from "lit"; 3 | 4 | /** 5 | `loading-placeholder` is a simple element to use skeleton loading such as Facebook. 6 | 7 | ### Example 8 | 9 | 10 | 11 | 12 | ### Styling 13 | 14 | Custom property | Description | Default 15 | ----------------|-------------|--------- 16 | `--loading-placeholder-color-1` | Primary color for animation | `#E0E0E0` 17 | `--loading-placeholder-color-2` | Secondary color for animation | `#C0C0C0` 18 | 19 | * @element ct-loading-placeholder 20 | */ 21 | @customElement("ct-loading-placeholder") 22 | export class CtLoadingPlaceholder extends CtLit { 23 | static styles = css` 24 | :host { 25 | display: flex; 26 | width: 100%; 27 | height: 100%; 28 | animation-duration: 1s; 29 | animation-fill-mode: forwards; 30 | animation-iteration-count: infinite; 31 | animation-name: placeHolderShimmer; 32 | animation-timing-function: linear; 33 | background: var(--loading-placeholder-color-1, #e0e0e0); 34 | background: linear-gradient( 35 | to right, 36 | var(--loading-placeholder-color-1, #e0e0e0) 8%, 37 | var(--loading-placeholder-color-2, #c0c0c0) 18%, 38 | var(--loading-placeholder-color-1, #e0e0e0) 33% 39 | ); 40 | background-size: 1400px 140px; 41 | } 42 | :host([buffering]) { 43 | -webkit-animation: b 2s linear infinite; 44 | animation: b 2s linear infinite; 45 | background: -webkit-linear-gradient( 46 | 135deg, 47 | hsla(0, 0%, 100%, 0.4) 25%, 48 | transparent 0, 49 | transparent 50%, 50 | hsla(0, 0%, 100%, 0.4) 0, 51 | hsla(0, 0%, 100%, 0.4) 75%, 52 | transparent 0, 53 | transparent 54 | ); 55 | background: linear-gradient( 56 | -45deg, 57 | hsla(0, 0%, 100%, 0.4) 25%, 58 | transparent 0, 59 | transparent 50%, 60 | hsla(0, 0%, 100%, 0.4) 0, 61 | hsla(0, 0%, 100%, 0.4) 75%, 62 | transparent 0, 63 | transparent 64 | ); 65 | background-size: 15px 15px; 66 | width: 100%; 67 | } 68 | 69 | @keyframes placeHolderShimmer { 70 | 0% { 71 | background-position: -700px 0; 72 | } 73 | 100% { 74 | background-position: +700px 0; 75 | } 76 | } 77 | `; 78 | @property({ type: Boolean, reflect: true }) buffering = false; 79 | render() { 80 | return html``; 81 | } 82 | } 83 | 84 | declare global { 85 | interface HTMLElementTagNameMap { 86 | "ct-loading-placeholder": CtLoadingPlaceholder; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-menu/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-menu/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [1.4.1] 9 | 10 | ### Added 11 | 12 | - Fix JSDoc 13 | 14 | ## [1.0.0] 15 | 16 | ### Added 17 | 18 | - Initial Release 19 | -------------------------------------------------------------------------------- /packages/ct-menu/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-menu", 3 | "version": "4.4.9", 4 | "description": "Menu web component for lit", 5 | "main": "ct-menu.js", 6 | "types": "ct-menu.d.ts", 7 | "module": "ct-menu.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Menu" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-lit": "^4.4.9", 18 | "lit": "^3.2.1", 19 | "tslib": "^2.6.3" 20 | }, 21 | "scripts": { 22 | "prepare": "rm -rf *.map *.js *.ts;tsc" 23 | }, 24 | "type": "module", 25 | "license": "BSD-3-Clause", 26 | "homepage": "https://github.com/conectate/ct-elements", 27 | "author": "Herberth Obregón ", 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/conectate/ct-elements" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/conectate/ct-elements/issues" 34 | }, 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "exports": { 39 | ".": { 40 | "dev": "./src/ct-menu.ts", 41 | "default": "./ct-menu.js" 42 | }, 43 | "./*": { 44 | "dev": "./src/*", 45 | "default": "./*" 46 | } 47 | }, 48 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 49 | } 50 | -------------------------------------------------------------------------------- /packages/ct-menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-phone-input/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-phone-input/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-phone-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-phone-input", 3 | "version": "4.4.13", 4 | "description": "HTML Web component phone input", 5 | "main": "ct-phone-input.js", 6 | "types": "ct-phone-input.d.ts", 7 | "module": "ct-phone-input.js", 8 | "license": "BSD-3-Clause", 9 | "author": "Herberth Obregón ", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/conectate/ct-elements" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/conectate/ct-elements/issues" 16 | }, 17 | "homepage": "https://github.com/conectate/ct-elements", 18 | "dependencies": { 19 | "@conectate/ct-input": "^4.4.13", 20 | "@conectate/ct-lit": "^4.4.9", 21 | "tslib": "^2.6.3" 22 | }, 23 | "scripts": { 24 | "prepare": "rm -rf *.map *.js *.ts;tsc" 25 | }, 26 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 27 | } 28 | -------------------------------------------------------------------------------- /packages/ct-phone-input/src/ct-phone-input.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-input/ct-input-container"; 2 | 3 | import { CtLit, html, query } from "@conectate/ct-lit"; 4 | 5 | class CtPhoneInput extends CtLit { 6 | code: string = "502"; 7 | phone: string = ""; 8 | invalid: boolean = false; 9 | label: string = ""; 10 | errorMessage: string = ""; 11 | required: boolean = false; 12 | value!: string | null; 13 | @query("#cd") $cd!: HTMLInputElement; 14 | @query("#phoneInput") $phoneInput!: HTMLInputElement; 15 | 16 | render() { 17 | return html` 18 | 66 | 67 | 68 | ( + 69 | 79 | ) 80 | 90 | 91 | 92 | `; 93 | } 94 | 95 | updated(cp: Map) { 96 | super.update(cp); 97 | if (cp.has("value")) this.value && this.updateValue(this.value); 98 | if (cp.has("code")) this.focusPhone(this.code); 99 | if (cp.has("code") || cp.has("phone")) this._computeValue(this.code, this.phone); 100 | } 101 | 102 | static get properties() { 103 | return { 104 | required: { type: Boolean }, 105 | label: { type: String }, 106 | value: { type: String }, 107 | code: { type: String }, 108 | phone: { type: String }, 109 | invalid: { type: Boolean } 110 | }; 111 | } 112 | 113 | updateValue(phone: string) { 114 | if (phone && phone.split(",").length == 2) { 115 | let arr = phone.split(","); 116 | this.code = arr[0]; 117 | this.phone = arr[1]; 118 | } else { 119 | this.value = null; 120 | this.phone = ""; 121 | } 122 | } 123 | 124 | focusPhone(code: string) { 125 | if (code.length == 3) { 126 | this.$phoneInput.focus(); 127 | } 128 | } 129 | 130 | _computeValue(code: string, phone: string) { 131 | if (code.trim().length > 0 && phone.trim().length > 0) { 132 | this.value = code.trim().replace(/,/g, "") + "," + phone.trim().replace(/,/g, ""); 133 | this.dispatchEvent(new CustomEvent("value", { detail: { value: this.value } })); 134 | } 135 | } 136 | 137 | validate() { 138 | if (this.code.trim().length > 0 && this.phone.trim().length > 4) { 139 | this.invalid = false; 140 | } else { 141 | this.invalid = true; 142 | } 143 | return !this.invalid; 144 | } 145 | } 146 | 147 | window.customElements.define("ct-phone-input", CtPhoneInput); 148 | -------------------------------------------------------------------------------- /packages/ct-phone-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-qr-tools/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-qr-tools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-qr-tools", 3 | "version": "4.0.0", 4 | "description": "Ct Elements", 5 | "main": "ct-qr-tools.js", 6 | "types": "ct-qr-tools.d.ts", 7 | "module": "ct-qr-tools.js", 8 | "license": "BSD-3-Clause", 9 | "author": "Herberth Obregón ", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/conectate/ct-elements" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/conectate/ct-elements/issues" 16 | }, 17 | "homepage": "https://github.com/conectate/ct-elements", 18 | "scripts": { 19 | "prepare": "rm -rf *.map *.js *.ts;tsc" 20 | }, 21 | "keywords": [ 22 | "ct-elements" 23 | ], 24 | "dependencies": { 25 | "@types/qrcode": "^1.5.5", 26 | "jsqr": "^1.4.0", 27 | "qrcode": "^1.5.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/ct-qr-tools/src/ct-qr-tools.ts: -------------------------------------------------------------------------------- 1 | export async function writeQR() { 2 | let module = await import("qrcode"); 3 | return module; 4 | } 5 | 6 | export async function readQR() { 7 | let module = await import("jsqr"); 8 | return module.default; 9 | } 10 | -------------------------------------------------------------------------------- /packages/ct-qr-tools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2020", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-radio/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-radio/README.md: -------------------------------------------------------------------------------- 1 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://github.com/conectate/ct-card) 2 | 3 | # ct-card 4 | 5 | It's a simple wrapper for LitElement 6 | 7 | ## Installation 8 | 9 | To include this, type: 10 | 11 | ```sh 12 | $ pnpm i @conectate/ct-card 13 | ``` 14 | 15 | or 16 | 17 | ```sh 18 | $ npm i @conectate/ct-card 19 | ``` 20 | 21 | ## Usage 22 | 23 | ### Step 1️⃣ 24 | 25 | Class 26 | 27 | ```typescript 28 | 29 | ``` 30 | 31 | ## Follow me 32 | 33 | [![Herberth Obregón](https://user-images.githubusercontent.com/6503845/74269077-8bc2e100-4cce-11ea-8a6f-1ba34b8b5cf2.jpg)](https://x.com/herberthobregon) 34 | 35 | [https://x.com/herberthobregon](https://x.com/herberthobregon) 36 | 37 | [https://dev.to/herberthobregon](https://dev.to/herberthobregon) 38 | 39 | ## Contributing 40 | 41 | 1. Fork it! 42 | 2. Create your feature branch: `git checkout -b my-new-feature` 43 | 3. Commit your changes: `git commit -m 'Add some feature'` 44 | 4. Push to the branch: `git push origin my-new-feature` 45 | 5. Submit a pull request :D 46 | 47 | ## History 48 | 49 | - v1.0.1 Initial Release 50 | 51 | ## License 52 | 53 | See [LICENSE](/LICENSE) 54 | -------------------------------------------------------------------------------- /packages/ct-radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-radio", 3 | "version": "4.4.9", 4 | "description": "HTML Radio web component based on Material design", 5 | "main": "ct-radio.js", 6 | "types": "ct-radio.d.ts", 7 | "module": "ct-radio.js", 8 | "license": "BSD-3-Clause", 9 | "author": "Herberth Obregón ", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/conectate/ct-elements" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/conectate/ct-elements/issues" 16 | }, 17 | "homepage": "https://github.com/conectate/ct-elements", 18 | "scripts": { 19 | "prepare": "rm -rf *.map *.js *.ts;tsc" 20 | }, 21 | "keywords": [ 22 | "litElement", 23 | "wrapper", 24 | "Web Components" 25 | ], 26 | "dependencies": { 27 | "@conectate/ct-lit": "^4.4.9", 28 | "tslib": "^2.6.3" 29 | }, 30 | "publishConfig": { 31 | "access": "public" 32 | }, 33 | "exports": { 34 | ".": { 35 | "dev": "./src/ct-radio.ts", 36 | "default": "./ct-radio.js" 37 | }, 38 | "./*": { 39 | "dev": "./src/*", 40 | "default": "./*" 41 | } 42 | }, 43 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 44 | } 45 | -------------------------------------------------------------------------------- /packages/ct-radio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-router/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-router/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [2.4.1] - 2021-03-19 9 | 10 | ### Added 11 | 12 | - Update @decorators 13 | - Add private props 14 | - add static styles with css`` 15 | 16 | ## [2.4.0] - 2021-03-16 17 | 18 | ### Added 19 | 20 | - Add `beforeunload` listener 21 | 22 | ## [2.2.0] - 2020-10-12 23 | 24 | ### Added 25 | 26 | - Add Typescript types 27 | - getQuery(): URLSearchParams 28 | - add interface LocationChanged 29 | 30 | ### Removed 31 | 32 | - deprecated getQueryParams 33 | 34 | ## [2.1.0] 35 | 36 | ### Added 37 | 38 | - tslib for code reuse 39 | - Change tsconfig.json, add "importHelpers": true 40 | - declare global interface HTMLElementTagNameMap for WC 41 | 42 | ## [2.0.4] 43 | 44 | ### Added 45 | 46 | - CHANGELOG.md 47 | - Change tsconfig.json 48 | 49 | ### Fixed 50 | 51 | - package.json 52 | 53 | ## [1.0.0] 54 | 55 | ### Added 56 | 57 | - Initial Release 58 | -------------------------------------------------------------------------------- /packages/ct-router/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-router", 3 | "version": "4.4.9", 4 | "description": "It's a simple routing system that changes the viewport depending on the route given", 5 | "main": "ct-router.js", 6 | "types": "ct-router.d.ts", 7 | "module": "ct-router.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-lit": "^4.4.9", 18 | "pwa-helpers": "^0.9.1", 19 | "tslib": "^2.6.3" 20 | }, 21 | "scripts": { 22 | "prepare": "rm -rf *.map *.js *.ts; tsc" 23 | }, 24 | "exports": { 25 | ".": { 26 | "dev": "./src/ct-router.ts", 27 | "default": "./ct-router.js" 28 | }, 29 | "./*": { 30 | "dev": "./src/*", 31 | "default": "./*" 32 | } 33 | }, 34 | "type": "module", 35 | "license": "BSD-3-Clause", 36 | "homepage": "https://github.com/conectate/ct-elements", 37 | "author": "Herberth Obregón ", 38 | "repository": { 39 | "type": "git", 40 | "url": "https://github.com/conectate/ct-elements" 41 | }, 42 | "bugs": { 43 | "url": "https://github.com/conectate/ct-elements/issues" 44 | }, 45 | "publishConfig": { 46 | "access": "public" 47 | }, 48 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 49 | } 50 | -------------------------------------------------------------------------------- /packages/ct-router/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-scroll-threshold/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-scroll-threshold/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-scroll-threshold", 3 | "version": "4.4.9", 4 | "description": "Ct Elements", 5 | "main": "ct-scroll-threshold.js", 6 | "types": "ct-scroll-threshold.d.ts", 7 | "module": "ct-scroll-threshold.js", 8 | "keywords": [ 9 | "ct-elements" 10 | ], 11 | "dependencies": { 12 | "lit": "^3.2.1" 13 | }, 14 | "scripts": { 15 | "prepare": "rm -rf *.map *.js *.ts;tsc" 16 | }, 17 | "type": "module", 18 | "license": "BSD-3-Clause", 19 | "homepage": "https://github.com/conectate/ct-elements", 20 | "author": "Herberth Obregón ", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/conectate/ct-elements" 24 | }, 25 | "bugs": { 26 | "url": "https://github.com/conectate/ct-elements/issues" 27 | }, 28 | "publishConfig": { 29 | "access": "public" 30 | }, 31 | "exports": { 32 | ".": { 33 | "dev": "./src/ct-scroll-threshold.ts", 34 | "default": "./ct-scroll-threshold.js" 35 | }, 36 | "./*": { 37 | "dev": "./src/*", 38 | "default": "./*" 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/ct-scroll-threshold/src/ct-scroll-threshold.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, css, html } from "lit"; 2 | import { customElement, property, query } from "lit/decorators.js"; 3 | 4 | /** 5 | * @element ct-scroll-threshold 6 | */ 7 | @customElement("ct-scroll-threshold") 8 | export class CtScrollThreshold extends LitElement { 9 | static styles = [ 10 | css` 11 | :host { 12 | display: block; 13 | } 14 | ` 15 | ]; 16 | @property({ type: Number }) threshold = 0.9; 17 | @property({ type: Object }) scrollTarget = document.body; 18 | observer?: IntersectionObserver & { POLL_INTERVAL?: number }; 19 | @query("#threshold") $threshold!: HTMLDivElement; 20 | render() { 21 | return html` 22 |
`; 23 | } 24 | 25 | firstUpdated() { 26 | this.#observe(); 27 | } 28 | 29 | #observe(polyfilled: boolean = false) { 30 | if (window.IntersectionObserver) { 31 | this.observer = new window.IntersectionObserver( 32 | entries => { 33 | entries.forEach(entry => { 34 | if (entry.isIntersecting) { 35 | this.observer?.unobserve(this.$threshold); 36 | this.dispatchEvent(new CustomEvent("lower-threshold", { detail: {} })); 37 | } 38 | }); 39 | }, 40 | { threshold: this.threshold, root: this.scrollTarget } 41 | ); 42 | if (polyfilled) { 43 | // issue 23 - Edge does not reliably dispatch scroll events 44 | // issue 36 - Safari iOS does not reliably get scroll events with iron-scroll-target 45 | // - At this point all pollyfilled browsers need polling :( 46 | this.observer.POLL_INTERVAL = 120; 47 | } 48 | // observe this element 49 | this.observer.observe(this.$threshold); 50 | } else { 51 | let polyfillScript = document.getElementById("polyfill-IntersectionObserver") as HTMLScriptElement; 52 | if (!polyfillScript) { 53 | // load the intersection-observer polyfill script 54 | polyfillScript = document.createElement("script"); 55 | polyfillScript.id = "polyfill-IntersectionObserver"; 56 | // The current version, 0.3.0, supports Safari which now has 57 | // native shadow DOM. The version currently served by polyfill.io 58 | // does not support native shadow dom. 59 | // 60 | // Until the polyfill is updated to 0.3.0 or greater on polyfill.io 61 | // we will use version 0.3.0 and include it with the element. 62 | // 63 | polyfillScript.src = "https://unpkg.com/intersection-observer@0.12.0/intersection-observer.js"; 64 | polyfillScript.async = true; 65 | document.head.appendChild(polyfillScript); 66 | } 67 | // listen for the polyfill to finish loading 68 | // then retry the initLazyLoad process 69 | polyfillScript.addEventListener("load", () => this.#observe(true)); 70 | } 71 | } 72 | 73 | toggleScrollListener(enable: boolean) { 74 | if (enable) { 75 | this.observer?.observe(this.$threshold); 76 | } else { 77 | this.observer?.unobserve(this.$threshold); 78 | } 79 | } 80 | 81 | clearTriggers() { 82 | this.observer?.observe(this.$threshold); 83 | } 84 | 85 | disconnectedCallback() { 86 | super.disconnectedCallback(); 87 | this.observer?.disconnect(); 88 | } 89 | } 90 | 91 | declare global { 92 | interface HTMLElementTagNameMap { 93 | "ct-scroll-threshold": CtScrollThreshold; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /packages/ct-scroll-threshold/src/index.ts: -------------------------------------------------------------------------------- 1 | export { CtScrollThreshold } from "./ct-scroll-threshold.js"; 2 | -------------------------------------------------------------------------------- /packages/ct-scroll-threshold/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-select/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/ct-select/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-select/README.md: -------------------------------------------------------------------------------- 1 | # `ct-select` 2 | 3 | ## Basic Example 4 | 5 | ```typescript 6 | // import { ... } from 'lit'; 7 | 8 | // @conectate/ct-lit is a base class wrapper of lit 9 | import { CtLit, css, customElement, html, property } from "@conectate/ct-lit"; 10 | 11 | @customElement("my-select") 12 | export class MySelect extends CtLit { 13 | items: { text: string; value: any }[] = [ 14 | { text: "Item 1", value: 1 }, 15 | { text: "Item 2", value: 2 }, 16 | { text: "Item 3", value: 3 } 17 | ]; 18 | render() { 19 | return html` `; 20 | } 21 | 22 | firstUpdated() { 23 | this.mapIDs(); // map ID's in this.$ = { ... } 24 | } 25 | 26 | onSelectItem(e: CustomEvent<{ value: any }>) { 27 | console.log(this.$.select.value); 28 | // or 29 | console.log(e.detail.value); 30 | } 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /packages/ct-select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-select", 3 | "version": "4.4.13", 4 | "description": "Ct Elements", 5 | "main": "ct-select.js", 6 | "types": "ct-select.d.ts", 7 | "module": "ct-select.js", 8 | "keywords": [ 9 | "ct-elements" 10 | ], 11 | "dependencies": { 12 | "@conectate/ct-button": "^4.4.12", 13 | "@conectate/ct-card": "^4.4.9", 14 | "@conectate/ct-dialog": "^4.4.13", 15 | "@conectate/ct-helpers": "^4.4.9", 16 | "@conectate/ct-icon": "^4.4.12", 17 | "@conectate/ct-input": "^4.4.13", 18 | "@conectate/ct-lit": "^4.4.9" 19 | }, 20 | "scripts": { 21 | "prepare": "rm -rf *.map *.js *.ts;tsc" 22 | }, 23 | "type": "module", 24 | "license": "BSD-3-Clause", 25 | "homepage": "https://github.com/conectate/ct-elements", 26 | "author": "Herberth Obregón ", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/conectate/ct-elements" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/conectate/ct-elements/issues" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | }, 37 | "exports": { 38 | ".": { 39 | "dev": "./src/ct-select.js", 40 | "default": "./ct-select.js" 41 | }, 42 | "./*": { 43 | "dev": "./src/*.js", 44 | "default": "./*.js" 45 | } 46 | }, 47 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 48 | } 49 | -------------------------------------------------------------------------------- /packages/ct-select/src/ct-select-item.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-icon"; 2 | 3 | import { CtLit, customElement, property } from "@conectate/ct-lit"; 4 | import { css, html } from "lit"; 5 | 6 | @customElement("ct-select-item") 7 | export class CtSelectItem extends CtLit { 8 | static styles = [ 9 | css` 10 | :host { 11 | display: flex; 12 | align-items: center; 13 | cursor: pointer; 14 | background-color: var(--color-surface, #fff); 15 | transition: background-color 0.2s ease-in-out; 16 | padding: 8px; 17 | border-bottom: 1px solid var(--color-outline, #89898936); 18 | } 19 | button { 20 | min-width: 170px; 21 | color: var(--color-on-surface, #535353); 22 | margin: 0; 23 | height: 38px; 24 | width: 100%; 25 | background: none; 26 | outline: none; 27 | border: none; 28 | text-align: initial; 29 | cursor: pointer; 30 | transition: all 0.15s ease; 31 | } 32 | :host(:hover) { 33 | background-color: #85858516; 34 | } 35 | 36 | :host([selected]) { 37 | background-color: #85858508; 38 | } 39 | .cicle { 40 | display: flex; 41 | align-items: center; 42 | justify-content: center; 43 | width: 24px; 44 | min-width: 24px; 45 | height: 24px; 46 | min-height: 24px; 47 | border-radius: 50%; 48 | background-color: var(--color-primary-light, #2cb5e82b); 49 | color: var(--color-primary, #2cb5e8); 50 | margin-right: 16px; 51 | transition: all 0.15s ease; 52 | } 53 | :host([selected]) .cicle { 54 | background-color: var(--color-primary, #2cb5e8); 55 | color: var(--color-on-primary, #fff); 56 | } 57 | ct-icon { 58 | font-size: 16px; 59 | } 60 | 61 | [hidden] { 62 | display: none; 63 | } 64 | ` 65 | ]; 66 | @property({ type: Number }) value = 0; 67 | @property({ type: Boolean, reflect: true }) multi = false; 68 | @property({ type: Boolean, reflect: true }) selected = false; 69 | 70 | render() { 71 | return html`
72 | `; 75 | } 76 | } 77 | 78 | declare global { 79 | interface HTMLElementTagNameMap { 80 | "ct-select-item": CtSelectItem; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /packages/ct-select/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-snackbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-snackbar", 3 | "version": "4.4.9", 4 | "description": "Super class for snackbar-element", 5 | "main": "ct-snackbar.js", 6 | "types": "ct-snackbar.d.ts", 7 | "module": "ct-snackbar.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-helpers": "^4.4.9", 18 | "@conectate/ct-lit": "^4.4.9", 19 | "tslib": "^2.6.3" 20 | }, 21 | "scripts": { 22 | "prepare": "rm -rf *.map *.js *.ts;tsc" 23 | }, 24 | "type": "module", 25 | "license": "BSD-3-Clause", 26 | "homepage": "https://github.com/conectate/ct-elements", 27 | "author": "Herberth Obregón ", 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/conectate/ct-elements" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/conectate/ct-elements/issues" 34 | }, 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 39 | } 40 | -------------------------------------------------------------------------------- /packages/ct-snackbar/src/ct-snackbar.ts: -------------------------------------------------------------------------------- 1 | import { sleep } from "@conectate/ct-helpers"; 2 | import { CtLit, customElement, property } from "@conectate/ct-lit"; 3 | import { css, html } from "lit"; 4 | 5 | export function showSnackBar(msg: string) { 6 | // @ts-ignore 7 | let _networkSnackbar: CtSnackbar | undefined = document.querySelector("ct-snackbar") as CtSnackbar; 8 | if (!_networkSnackbar) { 9 | _networkSnackbar = new CtSnackbar(); 10 | // @ts-ignore 11 | document.body.appendChild(_networkSnackbar); 12 | } 13 | setTimeout(() => { 14 | _networkSnackbar?.open(msg); 15 | }, 250); 16 | } 17 | // @ts-ignore 18 | window.showSnackBar = showSnackBar; 19 | 20 | /** 21 | * @element ct-snackbar 22 | */ 23 | @customElement("ct-snackbar") 24 | export class CtSnackbar extends CtLit { 25 | static styles = [ 26 | css` 27 | :host { 28 | display: block; 29 | position: fixed; 30 | left: calc(50% - 160px); 31 | right: calc(50% - 160px); 32 | width: 320px; 33 | bottom: 0; 34 | background: var(--color-on-background, #3c3f41); 35 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 36 | color: var(--color-background, #e9e9e9); 37 | padding: 12px; 38 | visibility: hidden; 39 | border-radius: 16px 16px 0 0; 40 | text-align: center; 41 | will-change: transform; 42 | -webkit-transform: translate3d(0, 100%, 0); 43 | transform: translate3d(0, 100%, 0); 44 | transition-property: visibility, transform, opacity; 45 | transition-duration: 0.2s; 46 | font-weight: bold; 47 | cursor: pointer; 48 | z-index: 150; 49 | } 50 | 51 | :host(.opened) { 52 | visibility: visible; 53 | -webkit-transform: translate3d(0, 0, 0); 54 | transform: translate3d(0, 0, 0); 55 | } 56 | 57 | @media (max-width: 1001px) { 58 | :host { 59 | left: 0; 60 | right: 0; 61 | width: auto; 62 | } 63 | 64 | :host(.opened) { 65 | -webkit-transform: translate3d(0, -113%, 0); 66 | transform: translate3d(0, -40px, 0); 67 | } 68 | } 69 | @media print { 70 | :host { 71 | display: none; 72 | } 73 | } 74 | ` 75 | ]; 76 | [x: string]: any; 77 | render() { 78 | return html` ${this.msg} `; 79 | } 80 | 81 | arr: string[] = []; 82 | alwaysVisible = false; 83 | alwaysMsg = ""; 84 | @property({ type: String }) msg = ""; 85 | 86 | async open(msg?: string) { 87 | // Si esta Abierto 88 | if (!msg) { 89 | return; 90 | } 91 | if (this.classList.length != 1) { 92 | this.msg = msg; 93 | } else { 94 | // Si no entonces lo agrego a la cola 95 | this.arr.push(msg); 96 | //y cierro el snack 97 | this.close(); 98 | return null; 99 | } 100 | this.classList.add("opened"); 101 | await sleep(4000); 102 | if (this.alwaysMsg != this.msg) { 103 | this.close(); 104 | } 105 | } 106 | 107 | async close() { 108 | this.classList.remove("opened"); 109 | if (this.arr.length != 0) { 110 | await sleep(200); 111 | this.open(this.arr.shift()); 112 | } else if (this.alwaysVisible) { 113 | await sleep(200); 114 | this.msg = this.alwaysMsg; 115 | this.classList.add("opened"); 116 | } 117 | } 118 | 119 | closePersist() { 120 | this.alwaysVisible = false; 121 | this.close(); 122 | } 123 | } 124 | 125 | declare global { 126 | interface HTMLElementTagNameMap { 127 | "ct-snackbar": CtSnackbar; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /packages/ct-snackbar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-spinner/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-spinner/README.md: -------------------------------------------------------------------------------- 1 |

@conectate/ct-spinner

2 | 3 |

4 | Downloads per month 5 | NPM Version 6 | Contributors 7 | Published on webcomponents.org 8 | 9 |

10 | 11 | ## `ct-spinner` 12 | 13 | Spinner web component 14 | 15 | ## Install 16 | 17 | ```bash 18 | pnpm i @conectate/ct-spinner 19 | #or 20 | npm i @conectate/ct-spinner 21 | ``` 22 | 23 | ## Usage 24 | 25 | On HTML 26 | 27 | ```html 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | On `LitElement` with typescript 35 | 36 | ```typescript 37 | import { LitElement, css, customElement, html, property } from "lit"; 38 | 39 | @customElement("ct-main") 40 | export class CtMain extends LitElement { 41 | @property({ type: Boolean, reflect: true }) active = true; 42 | 43 | static styles = css` 44 | :host { 45 | display: block; 46 | } 47 | `; 48 | 49 | render() { 50 | return html``; 51 | } 52 | } 53 | ``` 54 | 55 | ### DEMO 56 | 57 | 58 | 59 | 71 | 72 | ```html 73 | 74 | ``` 75 | 76 | ## Properties 77 | 78 | | Property | Attribute | Type | Default | 79 | | -------- | --------- | --------- | ------- | 80 | | `active` | `active` | `boolean` | true | 81 | 82 | ## CSS Custom Properties 83 | 84 | | Property | Description | 85 | | ---------------- | --------------- | 86 | | `--ct-spinner-1` | Spinner Color 1 | 87 | | `--ct-spinner-2` | Spinner Color 2 | 88 | -------------------------------------------------------------------------------- /packages/ct-spinner/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-spinner", 3 | "version": "4.4.9", 4 | "description": "Spinner web component", 5 | "main": "ct-spinner.js", 6 | "types": "ct-spinner.d.ts", 7 | "module": "ct-spinner.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-lit": "^4.4.9", 18 | "lit": "^3.2.1", 19 | "tslib": "^2.6.3" 20 | }, 21 | "scripts": { 22 | "prepare": "rm -rf *.map *.js *.ts;tsc" 23 | }, 24 | "type": "module", 25 | "license": "BSD-3-Clause", 26 | "homepage": "https://github.com/conectate/ct-elements", 27 | "author": "Herberth Obregón ", 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/conectate/ct-elements" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/conectate/ct-elements/issues" 34 | }, 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 39 | } 40 | -------------------------------------------------------------------------------- /packages/ct-spinner/src/ct-spinner.ts: -------------------------------------------------------------------------------- 1 | import { CtLit, customElement, property } from "@conectate/ct-lit"; 2 | import { css, html } from "lit"; 3 | /** 4 | * ## `ct-spinner` 5 | * Spinner web Component 6 | * @group ct-elements 7 | * @element ct-spinner 8 | * @cssProp --ct-spinner-1 - Spinner Color 1 9 | * @cssProp --ct-spinner-2 - Spinner Color 2 10 | */ 11 | @customElement("ct-spinner") 12 | export class CtSpinner extends CtLit { 13 | @property({ type: Boolean, reflect: true }) active: boolean = true; 14 | static styles = css` 15 | :host([active]) { 16 | display: inline-flex; 17 | border: 4px solid #7e7e7e1c; 18 | width: 36px; 19 | height: 36px; 20 | border-radius: 50%; 21 | border-left-color: var(--ct-spinner-1, var(--color-primary, #2cb5e8)); 22 | animation: spin 1s ease infinite; 23 | } 24 | @keyframes spin { 25 | 0% { 26 | transform: rotate(0); 27 | border-left-color: var(--ct-spinner-1, var(--color-primary, #2cb5e8)); 28 | } 29 | 50% { 30 | transform: rotate(180deg); 31 | border-left-color: var(--ct-spinner-2, var(--color-secondary, #0fb8ad)); 32 | } 33 | 100% { 34 | transform: rotate(360deg); 35 | border-left-color: var(--ct-spinner-1, var(--color-primary, #2cb5e8)); 36 | } 37 | } 38 | `; 39 | 40 | render() { 41 | return html``; 42 | } 43 | } 44 | 45 | declare global { 46 | interface HTMLElementTagNameMap { 47 | "ct-spinner": CtSpinner; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/ct-spinner/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-tabs/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-tabs/README.md: -------------------------------------------------------------------------------- 1 | # Ct-tabs 2 | 3 | ```html 4 | 5 | (this.pageSelected = 1)}>Tab 1 6 | (this.pageSelected = 2)}>Tab 1 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /packages/ct-tabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-tabs", 3 | "version": "4.4.9", 4 | "description": "Tabs HTMLElement", 5 | "main": "ct-tabs.js", 6 | "types": "ct-tabs.d.ts", 7 | "module": "ct-tabs.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-lit": "^4.4.9", 18 | "lit": "^3.2.1", 19 | "tslib": "^2.6.3" 20 | }, 21 | "scripts": { 22 | "prepare": "rm -rf *.map *.js *.ts;tsc" 23 | }, 24 | "type": "module", 25 | "license": "BSD-3-Clause", 26 | "homepage": "https://github.com/conectate/ct-elements", 27 | "author": "Herberth Obregón ", 28 | "repository": { 29 | "type": "git", 30 | "url": "https://github.com/conectate/ct-elements" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/conectate/ct-elements/issues" 34 | }, 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "gitHead": "8d3071caa3798622e9a6cbf763d2f686a5b3774a" 39 | } 40 | -------------------------------------------------------------------------------- /packages/ct-tabs/src/ct-tab.ts: -------------------------------------------------------------------------------- 1 | import { CtLit, customElement, property } from "@conectate/ct-lit"; 2 | import { html } from "lit"; 3 | /** 4 | * # `ct-tab` 5 | * 6 | * @element ct-tab 7 | */ 8 | @customElement("ct-tab") 9 | export class CtTab extends CtLit { 10 | @property({ type: Boolean, reflect: true }) selected = false; 11 | 12 | render() { 13 | return html` 14 | 56 | 57 | `; 58 | } 59 | } 60 | 61 | declare global { 62 | interface HTMLElementTagNameMap { 63 | "ct-tab": CtTab; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/ct-tabs/src/ct-tabs.ts: -------------------------------------------------------------------------------- 1 | import { CtLit, customElement, query } from "@conectate/ct-lit"; 2 | import { css, html } from "lit"; 3 | 4 | import { CtTab } from "./ct-tab.js"; 5 | 6 | /** 7 | * 8 | * @element ct-tabs 9 | * @cssProp --ct-tabs-background - can be used to document css custom properties. 10 | * @cssProp --ct-tabs-box-shadow - can be used to document css custom properties. 11 | * @cssProp --ct-tabs-border-color - can be used to document css custom properties. 12 | */ 13 | @customElement("ct-tabs") 14 | export class CtTabs extends CtLit { 15 | static get styles() { 16 | return css` 17 | :host { 18 | display: block; 19 | z-index: 10; 20 | } 21 | 22 | .tabs-container { 23 | background: var(--ct-tabs-background); 24 | box-shadow: var(--ct-tabs-box-shadow); 25 | padding: 0 8px; 26 | position: relative; 27 | } 28 | 29 | #container { 30 | width: 100%; 31 | overflow-x: auto; 32 | overflow-y: hidden; 33 | } 34 | #container::-webkit-scrollbar { 35 | width: 0.5em; 36 | height: 0.5em; 37 | } 38 | 39 | #container::-webkit-scrollbar-thumb { 40 | background-color: #cbd5e0; 41 | border-radius: 1rem; 42 | } 43 | 44 | #container::-webkit-scrollbar-track { 45 | background-color: #e2e8f0; 46 | border-radius: 1rem; 47 | } 48 | 49 | .tabs { 50 | font-family: "Google Sans", "Google Sans", "Ubuntu", arial, sans-serif; 51 | display: flex; 52 | max-width: 900px; 53 | margin: 0 auto; 54 | font-weight: normal; 55 | z-index: 2; 56 | font-size: 0.94em; 57 | text-align: center; 58 | border-bottom: 1px solid rgba(129, 129, 129, 0.27); 59 | padding: 0; 60 | } 61 | 62 | .grad { 63 | position: absolute; 64 | top: 0; 65 | bottom: 0; 66 | right: 0; 67 | width: 35px; 68 | background: linear-gradient(-90deg, #94949465, transparent); 69 | } 70 | `; 71 | } 72 | render() { 73 | return html` 74 |
75 | 78 |
79 | `; 80 | } 81 | @query("#container") $container!: HTMLElement; 82 | @query("#content") $content!: HTMLSlotElement; 83 | 84 | _selected!: string; 85 | tabs: CtTab[] = []; 86 | handletabs = false; 87 | overflow = false; 88 | 89 | set selected(val) { 90 | if (val != this._selected) { 91 | let old = this._selected; 92 | this._selected = val; 93 | this.setTab(val); 94 | this.dispatchEvent(new CustomEvent("selected", { detail: { value: val } })); 95 | this.requestUpdate("selected", old); 96 | } 97 | } 98 | 99 | get selected() { 100 | return this._selected; 101 | } 102 | 103 | static get properties() { 104 | return { 105 | selected: { type: String }, 106 | handletabs: { type: Boolean }, 107 | overflow: { type: Boolean }, 108 | tabs: { type: Array } 109 | }; 110 | } 111 | 112 | firstUpdated() { 113 | this.setTab(this.selected); 114 | // this.tabs = this.$content.assignedNodes().filter((elem) => elem.nodeType == Node.ELEMENT_NODE && elem.tagName == 'CT-TAB'); 115 | // @ts-ignore 116 | this.tabs = [...this.querySelectorAll("ct-tab")]; 117 | if (this.handletabs) { 118 | this.tabs.forEach((item, index) => { 119 | item.addEventListener("click", () => { 120 | this.selected = `${index}`; 121 | }); 122 | }); 123 | this.selected = this.selected ?? "0"; 124 | } 125 | setTimeout(() => (this.overflow = this.isOverflown()), 500); 126 | } 127 | 128 | setTab(selected: string) { 129 | // this.tabs = this.$content?.assignedNodes().filter((elem: { nodeType: number }) => elem.nodeType == Node.ELEMENT_NODE); 130 | // @ts-ignore 131 | this.tabs = [...this.querySelectorAll("ct-tab")]; 132 | if (this.selected != undefined) { 133 | this.tabs?.forEach((tab, index) => { 134 | if (`${index}` == selected) { 135 | tab.selected = true; 136 | } else { 137 | tab.selected = false; 138 | } 139 | }); 140 | } 141 | } 142 | 143 | isOverflown() { 144 | return this.$container.scrollHeight > this.$container.clientHeight || this.$container.scrollWidth > this.$container.clientWidth; 145 | } 146 | } 147 | declare global { 148 | interface HTMLElementTagNameMap { 149 | "ct-tabs": CtTabs; 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /packages/ct-tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ct-tooltip/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/ct-tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-tooltip", 3 | "version": "4.4.9", 4 | "description": "Tooltip styles for lit", 5 | "main": "ct-tooltip.js", 6 | "types": "ct-tooltip.d.ts", 7 | "module": "ct-tooltip.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "@conectate/ct-lit": "^4.4.9", 18 | "lit": "^3.2.1" 19 | }, 20 | "scripts": { 21 | "prepare": "rm -rf *.map *.js *.ts;tsc" 22 | }, 23 | "type": "module", 24 | "license": "BSD-3-Clause", 25 | "homepage": "https://github.com/conectate/ct-elements", 26 | "author": "Herberth Obregón ", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/conectate/ct-elements" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/conectate/ct-elements/issues" 33 | }, 34 | "exports": { 35 | ".": { 36 | "dev": "./src/ct-tooltip.ts", 37 | "default": "./ct-tooltip.js" 38 | }, 39 | "./*": { 40 | "dev": "./src/*", 41 | "default": "./*" 42 | } 43 | }, 44 | "publishConfig": { 45 | "access": "public" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/ct-tooltip/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /packages/lit-if/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019-2021, Herberth Obregón Espino 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | - Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | - Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | - Neither the name of Herberth Obregón Espino nor the names of its contributors may 15 | be used to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /packages/lit-if/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/lit-if", 3 | "version": "4.3.0", 4 | "description": "HTML if DOM style with Web Components", 5 | "main": "lit-if.js", 6 | "types": "lit-if.d.ts", 7 | "module": "lit-if.js", 8 | "keywords": [ 9 | "LitElement", 10 | "React", 11 | "Vue", 12 | "Angular", 13 | "Web Components", 14 | "Polymer" 15 | ], 16 | "dependencies": { 17 | "lit": "^3.2.1", 18 | "tslib": "^2.6.3" 19 | }, 20 | "scripts": { 21 | "prepare": "rm -rf *.map *.js *.ts;tsc" 22 | }, 23 | "type": "module", 24 | "license": "BSD-3-Clause", 25 | "homepage": "https://github.com/conectate/ct-elements", 26 | "author": "Herberth Obregón ", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/conectate/ct-elements" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/conectate/ct-elements/issues" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/lit-if/src/lit-if.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import { customElement, property } from "lit/decorators.js"; 3 | /** 4 | * Lit-IF 5 | * @prop {Boolean} if - condition to show content 6 | */ 7 | @customElement("lit-if") 8 | export class LitIf extends LitElement { 9 | @property({ type: Boolean }) if = false; 10 | render() { 11 | return html`${this.if ? html`` : ""}`; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/lit-if/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "useDefineForClassFields": false, 7 | "lib": ["dom"], 8 | "declaration": true, 9 | "noUnusedLocals": true, 10 | "outDir": "./", 11 | // Only necessary because @types/uglify-js can't find types for source-map 12 | "skipLibCheck": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true 15 | }, 16 | "include": ["custom_typings/**/*.ts", "src/**/*.ts"], 17 | "exclude": [] 18 | } 19 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | # all packages in subdirs of packages/ and components/ 3 | - "packages/*" 4 | -------------------------------------------------------------------------------- /stories/ct-button.stories.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-button"; 2 | 3 | import { html } from "lit"; 4 | 5 | import { LitStory } from "./types.js"; 6 | 7 | export default { 8 | title: "ct-elements/ct-button", 9 | component: "ct-button", 10 | argTypes: { 11 | primaryColor: { 12 | control: "color", 13 | defaultValue: "#00aeff", 14 | description: "demo description" 15 | } 16 | } 17 | }; 18 | export const Normal: LitStory = { 19 | story: args => html` ${args.txt}`, 20 | args: { 21 | txt: "Hello!", 22 | items: ["Hello!", "World!"], 23 | primaryColor: "#00aeff" 24 | } 25 | }; 26 | 27 | export const Raised: LitStory = { 28 | story: args => html` ${args.txt}`, 29 | args: Normal.args 30 | }; 31 | 32 | export const Shadow: LitStory = { 33 | story: args => html` ${args.txt}`, 34 | args: Normal.args 35 | }; 36 | 37 | export const Flat: LitStory = { 38 | story: args => html` ${args.txt}`, 39 | args: Normal.args 40 | }; 41 | export const Light: LitStory = { 42 | story: args => html` ${args.txt}`, 43 | args: Normal.args 44 | }; 45 | -------------------------------------------------------------------------------- /stories/ct-checkbox.stories.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-button"; 2 | 3 | import { html } from "lit"; 4 | 5 | import { LitStory } from "./types.js"; 6 | 7 | export default { 8 | title: "ct-elements/ct-button", 9 | component: "ct-button", 10 | argTypes: { 11 | primaryColor: { 12 | control: "color", 13 | defaultValue: "#00aeff", 14 | description: "demo description" 15 | } 16 | } 17 | }; 18 | export const Normal: LitStory = { 19 | story: args => html` ${args.txt}`, 20 | args: { 21 | txt: "Hello!", 22 | items: ["Hello!", "World!"], 23 | primaryColor: "#00aeff" 24 | } 25 | }; 26 | 27 | export const Raised: LitStory = { 28 | story: args => html` ${args.txt}`, 29 | args: Normal.args 30 | }; 31 | 32 | export const Shadow: LitStory = { 33 | story: args => html` ${args.txt}`, 34 | args: Normal.args 35 | }; 36 | 37 | export const Flat: LitStory = { 38 | story: args => html` ${args.txt}`, 39 | args: Normal.args 40 | }; 41 | export const Light: LitStory = { 42 | story: args => html` ${args.txt}`, 43 | args: Normal.args 44 | }; 45 | -------------------------------------------------------------------------------- /stories/index.ts: -------------------------------------------------------------------------------- 1 | export * as CtButton from "./ct-button.stories.js"; 2 | export * as CtCheckbox from "./ct-checkbox.stories.js"; 3 | -------------------------------------------------------------------------------- /stories/types.ts: -------------------------------------------------------------------------------- 1 | import { TemplateResult } from "lit"; 2 | 3 | export type LitStory = { args: WC; story: (args: WC) => TemplateResult; source?: string; storyName?: string }; 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2020", 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "lib": [ 7 | "esnext.array", 8 | "esnext", 9 | "es2020", 10 | "dom" 11 | ], 12 | "declaration": true, 13 | "declarationMap": true, 14 | "sourceMap": true, 15 | "inlineSources": true, 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | // "outDir": "./dist", 19 | "outDir": "./ds", 20 | "baseUrl": "./packages", 21 | // Only necessary because @types/uglify-js can't find types for source-map 22 | "skipLibCheck": true, 23 | "experimentalDecorators": true, 24 | "importHelpers": true, 25 | "typeRoots": [ 26 | "./demo/src/xconfig/typings" 27 | ], 28 | "allowSyntheticDefaultImports": true 29 | }, 30 | "exclude": [] 31 | } -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { Plugin, defineConfig } from "vite"; 2 | 3 | function LitCSSLoader(): Plugin { 4 | return { 5 | name: "vite-css-plg", 6 | transform: function (code: string, id: string) { 7 | if (id.endsWith(".css")) { 8 | return `import {css} from 'lit'; console.log('cssloader!!');export const style = css\`${code}\`\n;export default style`; 9 | } 10 | return code; 11 | } 12 | }; 13 | } 14 | 15 | // https://vitejs.dev/config/ 16 | export default (opts: any) => { 17 | let development = process.env.NODE_ENV != "production"; 18 | return defineConfig({ 19 | server: { 20 | port: 3080, 21 | host: "0.0.0.0" 22 | }, 23 | // plugins: [LitCSSLoader()], 24 | resolve: { 25 | conditions: ["dev"] 26 | }, 27 | define: { 28 | "process.env.NODE_ENV": JSON.stringify(development ? "development" : "production") 29 | } 30 | }); 31 | }; 32 | --------------------------------------------------------------------------------