├── .npmrc ├── packages ├── ct-helpers │ ├── .gitignore │ ├── .npmignore │ ├── tsconfig.json │ ├── CHANGELOG.md │ ├── package.json │ ├── LICENSE │ └── README.md ├── ct-button │ ├── .gitignore │ ├── .npmignore │ ├── tsconfig.json │ ├── CHANGELOG.md │ ├── package.json │ ├── LICENSE │ └── src │ │ ├── ct-button-split.ts │ │ └── ct-button-helpers.ts ├── ct-dialog │ ├── .gitignore │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ └── src │ │ ├── ct-card-dialog.ts │ │ └── ct-loading.ts ├── ct-select │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ ├── package.json │ ├── LICENSE │ └── src │ │ └── ct-select-item.ts ├── ct-date │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-router │ ├── .npmignore │ ├── tsconfig.json │ ├── CHANGELOG.md │ ├── package.json │ └── LICENSE ├── ct-loading-placeholder │ ├── .gitignore │ ├── .npmignore │ ├── demo │ │ └── ct-loading-placeholder.gif │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ ├── src │ │ └── ct-loading-placeholder.ts │ └── README.md ├── ct-card │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-icon │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ └── src │ │ └── ct-icon-button.ts ├── ct-img │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-input │ ├── .npmignore │ ├── tsconfig.json │ ├── src │ │ ├── ct-input-open.ts │ │ └── ct-input-wrapper.ts │ ├── package.json │ └── LICENSE ├── ct-list │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-lit │ ├── .npmignore │ ├── result.md │ ├── CHANGELOG.md │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-menu │ ├── .npmignore │ ├── CHANGELOG.md │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-chartjs │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ ├── README.md │ └── LICENSE ├── ct-checkbox │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-collapse │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-loading-bar │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ ├── README.md │ └── src │ │ └── ct-loading-bar.ts ├── ct-phone-input │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-qr-tools │ ├── src │ │ └── ct-qr-tools.ts │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-tabs │ ├── README.md │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ └── src │ │ └── ct-tab.ts ├── lit-if │ ├── src │ │ └── lit-if.ts │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-radio │ ├── tsconfig.json │ ├── package.json │ ├── README.md │ └── LICENSE ├── ct-spinner │ ├── tsconfig.json │ ├── package.json │ ├── src │ │ └── ct-spinner.ts │ ├── LICENSE │ └── README.md ├── ct-tooltip │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── ct-snackbar │ ├── tsconfig.json │ ├── package.json │ └── src │ │ └── ct-snackbar.ts └── ct-scroll-threshold │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ └── src │ └── ct-scroll-threshold.ts ├── images ├── ie.png ├── edge.png ├── chrome.png ├── firefox.png ├── safari.png ├── check-green.png ├── orange-check.png ├── packages │ ├── ct-input.png │ └── ct-spinner.png └── vscode-intellisense.png ├── demo ├── code-example │ └── code-example-dark.css ├── index.story.ts ├── demo-ct-checkbox.ts ├── render-item.ts ├── demo-ct-spinner.ts ├── demo-ct-phone-input.ts ├── demo-ct-loading-bar.ts ├── demo-ct-tabs.ts ├── demo-ct-loading-placeholder.ts ├── demo-ct-snackbar.ts ├── demo-ct-menu.ts ├── demo-ct-list.ts ├── demo-ct-date.ts ├── demo-ct-radio.ts ├── demo-ct-img.ts ├── demo-ct-scroll-threshold.ts ├── demo-ct-card.ts ├── demo-ct-tooltip.ts ├── demo-ct-qr-tools.ts ├── demo-ct-collapse.ts ├── demo-ct-bottom-sheet.ts ├── demo-ct-router.ts ├── demo-ct-dialog.ts ├── demo-main.ts ├── demo-ct-icon.ts ├── demo-ct-input.ts ├── demo-ct-select.ts └── demo-ct-chartjs.ts ├── pnpm-workspace.yaml ├── .vscode └── settings.json ├── stories ├── index.ts ├── types.ts ├── ct-button.stories.ts └── ct-checkbox.stories.ts ├── .gitignore ├── .github └── FUNDING.yml ├── lerna.json ├── index.html ├── .prettierrc ├── packages-test └── ct-bottom-sheet │ ├── tsconfig.json │ ├── packagex.json │ ├── LICENSE │ ├── README.md │ └── src │ └── styles.ts ├── tsconfig.json ├── vite.config.ts ├── LICENSE └── package.json /.npmrc: -------------------------------------------------------------------------------- 1 | link-workspace-packages = true -------------------------------------------------------------------------------- /packages/ct-helpers/.gitignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /packages/ct-button/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/ct-dialog/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/ct-select/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/ct-date/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-router/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /images/ie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/ie.png -------------------------------------------------------------------------------- /demo/code-example/code-example-dark.css: -------------------------------------------------------------------------------- 1 | @import "prismjs/themes/prism-okaidia.css"; 2 | -------------------------------------------------------------------------------- /demo/index.story.ts: -------------------------------------------------------------------------------- 1 | import * as s from "../stories.js"; 2 | 3 | console.log(s); 4 | -------------------------------------------------------------------------------- /images/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/edge.png -------------------------------------------------------------------------------- /packages/ct-card/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-icon/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-img/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-input/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-list/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-lit/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-menu/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /images/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/chrome.png -------------------------------------------------------------------------------- /images/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/firefox.png -------------------------------------------------------------------------------- /images/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/safari.png -------------------------------------------------------------------------------- /packages/ct-button/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-chartjs/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-checkbox/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-collapse/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-dialog/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-helpers/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-loading-bar/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /packages/ct-phone-input/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /images/check-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/check-green.png -------------------------------------------------------------------------------- /images/orange-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/orange-check.png -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/.npmignore: -------------------------------------------------------------------------------- 1 | .tsbuildinfo 2 | tsconfig.json 3 | node_modules 4 | src/*.ts -------------------------------------------------------------------------------- /images/packages/ct-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/packages/ct-input.png -------------------------------------------------------------------------------- /images/packages/ct-spinner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/packages/ct-spinner.png -------------------------------------------------------------------------------- /images/vscode-intellisense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/images/vscode-intellisense.png -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | # all packages in subdirs of packages/ and components/ 3 | - "packages/*" 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "typescript.tsdk": "node_modules/typescript/lib" 4 | } -------------------------------------------------------------------------------- /stories/index.ts: -------------------------------------------------------------------------------- 1 | export * as CtButton from "./ct-button.stories.js"; 2 | export * as CtCheckbox from "./ct-checkbox.stories.js"; 3 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [herberthobregon] 4 | ko_fi: herberthobregon 5 | custom: ["https://paypal.me/herberthx"] -------------------------------------------------------------------------------- /packages/ct-loading-placeholder/demo/ct-loading-placeholder.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Conectate/ct-elements/HEAD/packages/ct-loading-placeholder/demo/ct-loading-placeholder.gif -------------------------------------------------------------------------------- /stories/types.ts: -------------------------------------------------------------------------------- 1 | import { TemplateResult } from "lit"; 2 | 3 | export type LitStory = { args: WC; story: (args: WC) => TemplateResult; source?: string; storyName?: string }; 4 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "command": { 4 | "bootstrap": { 5 | "hoist": true, 6 | "npmClientArgs": ["--no-package-lock"] 7 | } 8 | }, 9 | "version": "4.5.11" 10 | } 11 | -------------------------------------------------------------------------------- /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/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-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-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-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-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-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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /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-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-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/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-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/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/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/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/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/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-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/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/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/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/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/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/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-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/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/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/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/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-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-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-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-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 | -------------------------------------------------------------------------------- /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`
Checkbox Example
18 |
Checked Example
19 |
Indeterminate Example
20 |
Disabled Example
`; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-phone-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-phone-input", 3 | "version": "4.5.11", 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.5.11", 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-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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /demo/demo-ct-spinner.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-spinner"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-spinner") 9 | export class DemoCtSpinner 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 | ]; 23 | name = "ct-spinner"; 24 | render() { 25 | return html` 26 |
27 |

</${this.name}>

28 |
29 |
${this.example()}
30 | `; 31 | } 32 | example() { 33 | return html` 34 | 35 |
36 | 37 |
38 | 39 | `; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/ct-img/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-img", 3 | "version": "4.5.0", 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 | -------------------------------------------------------------------------------- /demo/demo-ct-phone-input.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-phone-input"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-phone-input") 9 | export class DemoCtPhoneInput 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 | ]; 23 | name = "ct-phone-input"; 24 | render() { 25 | return html` 26 |
27 |

</${this.name}>

28 |
29 |
${this.example()}
30 | `; 31 | } 32 | example() { 33 | return html` 34 | 35 |
36 | 37 |
38 | 39 | `; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /demo/demo-ct-loading-bar.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-loading-bar"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-loading-bar") 9 | export class DemoCtLoadingBar 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 | ]; 23 | name = "ct-loading-bar"; 24 | render() { 25 | return html` 26 |
27 |

</${this.name}>

28 |
29 |
${this.example()}
30 | `; 31 | } 32 | example() { 33 | return html` 34 | 35 |
36 | 37 | 38 | 39 |
40 | 41 | `; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /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-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-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-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 | -------------------------------------------------------------------------------- /demo/demo-ct-tabs.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-tabs"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-tabs") 9 | export class DemoCtTabs 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 | ]; 23 | name = "ct-tabs"; 24 | render() { 25 | return html` 26 |
27 |

</${this.name}>

28 |
29 |
${this.example()}
30 | `; 31 | } 32 | example() { 33 | return html` 34 | 35 |
36 | 37 | Tab 1 38 | Tab 2 39 | Tab 3 40 | 41 |
42 | 43 | `; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/ct-icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-icon", 3 | "version": "4.5.6", 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-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-scroll-threshold/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-scroll-threshold", 3 | "version": "4.5.0", 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/*.js", 38 | "default": "./*.js" 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/ct-list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-list", 3 | "version": "4.5.6", 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.5.6", 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 | -------------------------------------------------------------------------------- /demo/demo-ct-loading-placeholder.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-loading-placeholder"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-loading-placeholder") 9 | export class DemoCtLoadingPlaceholder 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 | ct-loading-placeholder { 22 | width: 200px; 23 | height: 200px; 24 | } 25 | ` 26 | ]; 27 | name = "ct-loading-placeholder"; 28 | render() { 29 | return html` 30 |
31 |

</${this.name}>

32 |
33 |
${this.example()}
34 | `; 35 | } 36 | example() { 37 | return html` 38 | 39 |
40 | 41 |
42 | 43 | `; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /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-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-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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /demo/demo-ct-snackbar.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-snackbar"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | import { showSnackBar } from "@conectate/ct-snackbar"; 8 | 9 | @customElement("demo-ct-snackbar") 10 | export class DemoCtSnackbar extends CtLit { 11 | static styles = [ 12 | css` 13 | :host { 14 | display: block; 15 | max-width: 800px; 16 | margin: 0 auto; 17 | } 18 | header > h1 { 19 | margin-bottom: 0; 20 | font-family: monospace; 21 | } 22 | ` 23 | ]; 24 | name = "ct-snackbar"; 25 | render() { 26 | return html` 27 |
28 |

</${this.name}>

29 |
30 |
${this.example()}
31 | `; 32 | } 33 | example() { 34 | return html` 35 | 36 |
37 | 38 |
39 | showSnackBar("Hello World")}>Show Snackbar 40 |
41 | 42 |
43 | 44 | `; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/ct-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-button", 3 | "version": "4.5.6", 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.5.6", 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-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-menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-menu", 3 | "version": "4.4.17", 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-checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-checkbox", 3 | "version": "4.5.6", 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.5.6", 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-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-input", 3 | "version": "4.5.11", 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 | -------------------------------------------------------------------------------- /demo/demo-ct-menu.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-icon"; 3 | import "@conectate/ct-list/ct-list-item.js"; 4 | import "@conectate/ct-menu"; 5 | 6 | import "./code-example/code-example.js"; 7 | 8 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 9 | 10 | @customElement("demo-ct-menu") 11 | export class DemoCtMenu 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-menu"; 26 | render() { 27 | return html` 28 |
29 |

</${this.name}>

30 |
31 |
${this.example()}
32 | `; 33 | } 34 | example() { 35 | return html` 36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 | `; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /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/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-select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-select", 3 | "version": "4.5.11", 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.5.6", 13 | "@conectate/ct-card": "^4.4.9", 14 | "@conectate/ct-dialog": "^4.5.11", 15 | "@conectate/ct-helpers": "^4.4.9", 16 | "@conectate/ct-icon": "^4.5.6", 17 | "@conectate/ct-input": "^4.5.11", 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 | -------------------------------------------------------------------------------- /demo/demo-ct-list.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-list/ct-list-item.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-list") 9 | export class DemoCtList 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 | ]; 23 | name = "ct-list"; 24 | render() { 25 | return html` 26 |
27 |

</${this.name}>

28 |
29 |
${this.example()}
30 | `; 31 | } 32 | example() { 33 | return html` 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 🔔 42 | Custom content here 43 | 3 44 | 45 | 46 |
47 | 48 | `; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-dialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-dialog", 3 | "version": "4.5.11", 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.5.6", 18 | "@conectate/ct-card": "^4.4.9", 19 | "@conectate/ct-helpers": "^4.4.9", 20 | "@conectate/ct-input": "^4.5.11", 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 | -------------------------------------------------------------------------------- /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 { CtLit, css, 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 |
50 |
51 | `; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/ct-date/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@conectate/ct-date", 3 | "version": "4.5.11", 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.5.11", 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 | -------------------------------------------------------------------------------- /demo/demo-ct-img.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-img"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-img") 9 | export class DemoCtImg 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 | ct-img { 22 | width: 150px; 23 | height: 150px; 24 | margin: 0.5rem; 25 | } 26 | ` 27 | ]; 28 | name = "ct-img"; 29 | render() { 30 | return html` 31 |
32 |

</${this.name}>

33 |
34 |
${this.example()}
35 | `; 36 | } 37 | example() { 38 | return html` 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 |
47 | 48 | `; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /demo/demo-ct-scroll-threshold.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-scroll-threshold"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html, state } from "@conectate/ct-lit"; 7 | 8 | @customElement("demo-ct-scroll-threshold") 9 | export class DemoCtScrollThreshold 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 | #scroll { 22 | height: 250px; 23 | overflow-y: auto; 24 | } 25 | ` 26 | ]; 27 | name = "ct-scroll-threshold"; 28 | @state() items = Array.from(Array(20).keys()); 29 | render() { 30 | return html` 31 |
32 |

</${this.name}>

33 |
34 |
${this.example()}
35 | `; 36 | } 37 | example() { 38 | return html` 39 | 40 |
41 | 42 |
43 | ${this.items.map(i => html`
Item ${i}
`)} 44 | this.loadMore()} .scrollTarget=${this.shadowRoot?.querySelector("#scroll") as HTMLElement}> 45 |
46 | 47 |
48 | 49 | `; 50 | } 51 | loadMore() { 52 | this.items = [...this.items, ...Array.from(Array(20).keys())]; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /demo/demo-ct-card.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | 3 | import "./code-example/code-example.js"; 4 | 5 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 6 | 7 | @customElement("demo-ct-card") 8 | export class DemoCtCard extends CtLit { 9 | static styles = [ 10 | css` 11 | :host { 12 | display: block; 13 | max-width: 800px; 14 | margin: 0 auto; 15 | } 16 | header > h1 { 17 | margin-bottom: 0; 18 | font-family: monospace; 19 | } 20 | ct-card { 21 | margin-bottom: 1rem; 22 | } 23 | ` 24 | ]; 25 | name = "ct-card"; 26 | render() { 27 | return html` 28 |
29 |

</${this.name}>

30 |
31 |
${this.example()}
32 | `; 33 | } 34 | example() { 35 | return html` 36 | 37 |
38 | Basic card 39 |
Card with decorator
 40 |
Card with border
 41 | Card with padding 42 |
Primary themed card
 43 |
Secondary themed card
 44 |
Tertiary themed card
 45 |
Error themed card
 46 |
47 | 48 | `; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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 | } -------------------------------------------------------------------------------- /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/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-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 | -------------------------------------------------------------------------------- /demo/demo-ct-qr-tools.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | 3 | import "./code-example/code-example.js"; 4 | 5 | import { CtLit, css, customElement, html, state } from "@conectate/ct-lit"; 6 | import { writeQR } from "@conectate/ct-qr-tools"; 7 | 8 | @customElement("demo-ct-qr-tools") 9 | export class DemoCtQrTools 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 | canvas { 22 | width: 256px; 23 | height: 256px; 24 | } 25 | ` 26 | ]; 27 | name = "ct-qr-tools"; 28 | @state() text = "https://google.com"; 29 | render() { 30 | return html` 31 |
32 |

</${this.name}>

33 |
34 |
${this.example()}
35 | `; 36 | } 37 | example() { 38 | return html` 39 | 40 |
41 | 42 |
43 | (this.text = e.detail.value)} label="QR Text"> 44 | 45 |
46 | 47 |
48 | 49 | `; 50 | } 51 | 52 | async updated(changedProperties: Map) { 53 | super.updated(changedProperties); 54 | let qr = await writeQR(); 55 | let canvas = this.shadowRoot?.querySelector("#canvas"); 56 | if (canvas) { 57 | qr.toCanvas(canvas, this.text, err => { 58 | if (err) console.error(err); 59 | }); 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /demo/demo-ct-collapse.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-collapse"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtCollapse } from "@conectate/ct-collapse"; 7 | import { CtLit, css, customElement, html, query } from "@conectate/ct-lit"; 8 | 9 | @customElement("demo-ct-collapse") 10 | export class DemoCtCollapse extends CtLit { 11 | static styles = [ 12 | css` 13 | :host { 14 | display: block; 15 | max-width: 800px; 16 | margin: 0 auto; 17 | } 18 | header > h1 { 19 | margin-bottom: 0; 20 | font-family: monospace; 21 | } 22 | ` 23 | ]; 24 | name = "ct-collapse"; 25 | @query("ct-collapse") $collapse!: CtCollapse; 26 | render() { 27 | return html` 28 |
29 |

</${this.name}>

30 |
31 |
${this.example()}
32 | `; 33 | } 34 | example() { 35 | return html` 36 | 37 |
38 | this.$collapse.toggle()}>Toggle 39 | 40 |
41 |

Hello World

42 |

43 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 44 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 45 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 46 |

47 |
48 | 49 |
50 | 51 | `; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /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-router.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-router"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 7 | import { CtRouter } from "@conectate/ct-router"; 8 | 9 | @customElement("demo-ct-router") 10 | export class DemoCtRouter extends CtLit { 11 | static styles = [ 12 | css` 13 | :host { 14 | display: block; 15 | max-width: 800px; 16 | margin: 0 auto; 17 | } 18 | header > h1 { 19 | margin-bottom: 0; 20 | font-family: monospace; 21 | } 22 | ` 23 | ]; 24 | name = "ct-router"; 25 | render() { 26 | return html` 27 |
28 |

</${this.name}>

29 |
30 |
${this.example()}
31 | `; 32 | } 33 | example() { 34 | let router: CtRouter = new CtRouter(); 35 | router.pages = [ 36 | { path: "/", element: html`

Home

`, auth: false, title: () => "Home" }, 37 | { path: "/profile/:profile", element: html`

Profile

`, auth: false, title: () => "Profile" }, 38 | { path: "/404", element: html`

404

`, auth: false, title: () => "404" } 39 | ]; 40 | return html` 41 | 42 |
43 | 44 |
45 | router.handleRoutes(new URL(location.origin + "/"))}>Home 46 | router.handleRoutes(new URL(location.origin + "/profile/juan"))}>Profile 47 | router.handleRoutes(new URL(location.origin + "/unknown"))}>404 48 |
49 |
${router}
50 | 51 |
52 | 53 | `; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /demo/demo-ct-dialog.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-button"; 2 | import "@conectate/ct-dialog/ct-loading.js"; 3 | 4 | import { showCtDialog } from "@conectate/ct-dialog/ct-dialog.js"; 5 | import { CtLit, css, customElement, html, state } from "@conectate/ct-lit"; 6 | 7 | @customElement("demo-ct-dialog") 8 | export class DemoCtDialog extends CtLit { 9 | static styles = [ 10 | css` 11 | :host { 12 | display: block; 13 | } 14 | ` 15 | ]; 16 | 17 | render() { 18 | return html`
19 |

Demo ct-dialog

20 | this.openDialog()}>Open Dialog 21 |
`; 22 | } 23 | 24 | openDialog() { 25 | let element = new DemoCtDialogElement(); 26 | element.name = "Demo Ct Dialog Element"; 27 | element.dialog = showCtDialog(element); 28 | element.onSuccess = (e: { name: string }) => { 29 | console.log(e.name); 30 | }; 31 | } 32 | } 33 | 34 | @customElement("demo-ct-dialog-element") 35 | class DemoCtDialogElement extends CtLit { 36 | static styles = [ 37 | css` 38 | :host { 39 | display: block; 40 | background-color: #fff; 41 | color: #000; 42 | padding: 16px; 43 | border-radius: 8px; 44 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); 45 | } 46 | header { 47 | font-size: 1.5em; 48 | font-weight: bold; 49 | margin-bottom: 16px; 50 | } 51 | ` 52 | ]; 53 | @state() name = "Demo Ct Dialog Element"; 54 | public dialog!: HTMLElementTagNameMap["ct-dialog"]; 55 | public onSuccess: ((e: { name: string }) => void) | null = null; 56 | 57 | render() { 58 | return html`
${this.name}
59 |
Body
60 |
61 | this.closeDialog()}>Complete 62 |
`; 63 | } 64 | 65 | async closeDialog() { 66 | await this.dialog.close(); 67 | this.onSuccess?.({ name: this.name }); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /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-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` 63 | 64 | `; 65 | } 66 | 67 | callOnChange(e: any) { 68 | const files = (this.$inputElement as HTMLInputElement).files; 69 | if (files && files.length > 0) { 70 | this.dispatchEvent( 71 | new CustomEvent("files", { 72 | detail: { files: files } 73 | }) 74 | ); 75 | } 76 | } 77 | 78 | clear() { 79 | this.$inputElement.value = ""; 80 | } 81 | } 82 | declare global { 83 | interface HTMLElementTagNameMap { 84 | "ct-input-wrapper": CtInputWrapper; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /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: #8585851f; 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 | --ct-icon-size: 16px; 60 | } 61 | 62 | [hidden] { 63 | display: none; 64 | } 65 | ` 66 | ]; 67 | @property({ type: Number }) value = 0; 68 | @property({ type: Boolean, reflect: true }) multi = false; 69 | @property({ type: Boolean, reflect: true }) selected = false; 70 | 71 | render() { 72 | return html`
73 | `; 76 | } 77 | } 78 | 79 | declare global { 80 | interface HTMLElementTagNameMap { 81 | "ct-select-item": CtSelectItem; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /demo/demo-main.ts: -------------------------------------------------------------------------------- 1 | import "./demo-ct-bottom-sheet.js"; 2 | import "./demo-ct-button.js"; 3 | import "./demo-ct-card.js"; 4 | import "./demo-ct-chartjs.js"; 5 | import "./demo-ct-checkbox.js"; 6 | import "./demo-ct-collapse.js"; 7 | import "./demo-ct-date.js"; 8 | import "./demo-ct-dialog.js"; 9 | import "./demo-ct-icon.js"; 10 | import "./demo-ct-img.js"; 11 | import "./demo-ct-input.js"; 12 | import "./demo-ct-list.js"; 13 | import "./demo-ct-loading-bar.js"; 14 | import "./demo-ct-loading-placeholder.js"; 15 | import "./demo-ct-menu.js"; 16 | import "./demo-ct-phone-input.js"; 17 | import "./demo-ct-qr-tools.js"; 18 | import "./demo-ct-radio.js"; 19 | import "./demo-ct-router.js"; 20 | import "./demo-ct-scroll-threshold.js"; 21 | import "./demo-ct-select.js"; 22 | import "./demo-ct-snackbar.js"; 23 | import "./demo-ct-spinner.js"; 24 | import "./demo-ct-tabs.js"; 25 | import "./demo-ct-tooltip.js"; 26 | 27 | import { CtLit, css, customElement, html } from "@conectate/ct-lit"; 28 | 29 | import { applyTheme } from "./styles/shared-styles.js"; 30 | 31 | @customElement("demo-main") 32 | export class DemoMain extends CtLit { 33 | constructor() { 34 | super(); 35 | applyTheme(); 36 | } 37 | 38 | static styles = [ 39 | css` 40 | :host { 41 | display: block; 42 | font-family: "Roboto", "Ubuntu", sans-serif; 43 | padding-bottom: 128px; 44 | } 45 | ` 46 | ]; 47 | 48 | render() { 49 | return html` 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | `; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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 | header > h1 { 18 | margin-bottom: 0; 19 | font-family: monospace; 20 | } 21 | ` 22 | ]; 23 | name = "ct-icon"; 24 | render() { 25 | return html` 26 |
27 |

</${this.name}>

28 |
29 |
${this.example()}
30 | `; 31 | } 32 | example() { 33 | return html` 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 61 | 62 | 63 |
64 | `; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /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 | @state() valueFromEvent = ""; 26 | @state() valueFromEvent2 = ""; 27 | @query("#i1") i1?: HTMLElementTagNameMap["ct-input"]; 28 | connectedCallback() { 29 | super.connectedCallback(); 30 | // @ts-ignore 31 | window.test = this; 32 | } 33 | 34 | render() { 35 | return html`${this.macs.map( 36 | (m, i) => 37 | html`) => (this.macs[i] = e.detail.value)}> 38 | this.deleteItem(i)}>DEL 39 | ` 40 | )} 41 | this.addItem()}>ADD 42 |
43 | 44 | 45 | 46 | 47 | 48 | ${this.valueFromEvent ? html`Value from event: ${this.valueFromEvent}` : html``} 49 | ${this.valueFromEvent2 ? html`Value from event 2: ${this.valueFromEvent2}` : html``} 50 | 51 | 52 | 53 | 54 | Suffix 55 | Prefix 56 | `; 57 | } 58 | firstUpdated() { 59 | setTimeout(() => { 60 | this.i1!.value = "Init value JS"; 61 | }, 1000); 62 | } 63 | handleValue(e: CustomEvent) { 64 | this.valueFromEvent = e.detail; 65 | } 66 | 67 | handleValue2(e: CustomEvent<{ value: string }>) { 68 | this.valueFromEvent2 = e.detail.value; 69 | } 70 | addItem() { 71 | this.macs.push(""); 72 | this.macs = [...this.macs]; 73 | } 74 | deleteItem(i: number) { 75 | this.macs.splice(i, 1); 76 | this.macs = [...this.macs]; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /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/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-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/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 | -------------------------------------------------------------------------------- /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-qr-tools": "workspace:^", 25 | "@conectate/ct-radio": "workspace:^", 26 | "@conectate/ct-router": "workspace:^", 27 | "@conectate/ct-scroll-threshold": "workspace:^", 28 | "@conectate/ct-select": "workspace:^", 29 | "@conectate/ct-snackbar": "workspace:^", 30 | "@conectate/ct-spinner": "workspace:^", 31 | "@conectate/ct-tabs": "workspace:^", 32 | "@conectate/ct-tooltip": "workspace:^", 33 | "@conectate/lit-if": "workspace:^", 34 | "chart.js": "^4.3.1", 35 | "common-tags": "^1.8.2", 36 | "js-beautify": "^1.15.4", 37 | "lit": "^3.2.1", 38 | "prismjs": "^1.29.0" 39 | }, 40 | "devDependencies": { 41 | "@snelx/prettier-plugin-import-sort": "^1.0.0", 42 | "@types/chart.js": "^2.9.37", 43 | "@types/common-tags": "^1.8.1", 44 | "@types/js-beautify": "^1.14.3", 45 | "@types/node": "^20.5.8", 46 | "@types/prismjs": "^1.26.0", 47 | "import-sort-style-module": "^6.0.0", 48 | "lerna": "^7.4.2", 49 | "prettier": "^3.5.3", 50 | "prettier-plugin-import-sort": "^0.0.7", 51 | "tslib": "^2.6.2", 52 | "typescript": "^5.4.3", 53 | "vite": "^5.2.8" 54 | }, 55 | "scripts": { 56 | "xlink": "yarn link packages/ct-lit", 57 | "demo": "vite", 58 | "pub": "lerna publish", 59 | "bootstrap": "lerna bootstrap", 60 | "new-ver": "lerna version --conventional-commits --yes", 61 | "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 '{}' +", 62 | "build": "lerna run prepare", 63 | "format": "prettier --write --ignore-unknown packages" 64 | }, 65 | "private": true, 66 | "exports": { 67 | ".": { 68 | "development": "./src/ct-input.ts", 69 | "default": "./ct-input.js" 70 | }, 71 | "./*": { 72 | "development": "./src/*", 73 | "default": "./*" 74 | } 75 | }, 76 | "importSort": { 77 | ".js, .jsx, .ts, .tsx": { 78 | "style": "module", 79 | "parser": "typescript" 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /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 { CtLit, css, customElement, html, query } from "@conectate/ct-lit"; 7 | import { CtSelect } from "@conectate/ct-select"; 8 | import { stripIndents } 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 = stripIndents(`
38 | 39 | 40 | 41 | 47 | html\`\`} 48 | > 49 |
`); 50 | return html` 51 | 52 |
53 | 54 | 55 | 56 | 57 | 63 | html`` as any} 69 | > 70 |
71 | 72 | `; 73 | } 74 | 75 | getItems() { 76 | let items: { text: string; value: number }[] = []; 77 | for (let i = 0; i < 5; i++) { 78 | items.push({ text: "Item " + i, value: i }); 79 | } 80 | return items; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /demo/demo-ct-chartjs.ts: -------------------------------------------------------------------------------- 1 | import "@conectate/ct-card"; 2 | import "@conectate/ct-chartjs"; 3 | 4 | import "./code-example/code-example.js"; 5 | 6 | import { CtLit, css, customElement, html, state } from "@conectate/ct-lit"; 7 | import { ChartData, ChartType } from "chart.js"; 8 | 9 | @customElement("demo-ct-chartjs") 10 | export class DemoCtChartjs extends CtLit { 11 | static styles = [ 12 | css` 13 | :host { 14 | display: block; 15 | max-width: 800px; 16 | margin: 0 auto; 17 | } 18 | header > h1 { 19 | margin-bottom: 0; 20 | font-family: monospace; 21 | } 22 | ` 23 | ]; 24 | 25 | name = "ct-chartjs"; 26 | @state() type: ChartType = "pie"; 27 | @state() data?: ChartData; 28 | @state() options = {}; 29 | 30 | render() { 31 | if (!this.data) return html`Loading...`; 32 | return html` 33 |
34 |

</${this.name}>

35 |
36 |
${this.example()}
37 | `; 38 | } 39 | example() { 40 | return html` 41 | 42 |
43 | 44 |
45 |
46 | this.setType("pie")}>Pie 47 | this.setType("line")}>Line 48 | this.setType("bar")}>Bar 49 |
50 | 51 | `; 52 | } 53 | 54 | firstUpdated() { 55 | this.setType("pie"); 56 | } 57 | 58 | setType(type: ChartType) { 59 | this.type = type; 60 | if (type == "pie") { 61 | this.data = { 62 | labels: ["January", "February", "March"], 63 | datasets: [ 64 | { 65 | data: [10, 20, 30], 66 | backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)"], 67 | borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)"] 68 | } 69 | ] 70 | }; 71 | } else if (type == "line") { 72 | this.data = { 73 | labels: ["January", "February", "March", "April", "May", "June", "July"], 74 | datasets: [ 75 | { 76 | label: "My First dataset", 77 | backgroundColor: "rgba(255, 99, 132,0.5)", 78 | borderColor: "rgba(255, 99, 132,.3)", 79 | data: [0, 10, 5, 2, 20, 30, 45] 80 | } 81 | ] 82 | }; 83 | } else if (type == "bar") { 84 | this.data = { 85 | labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 86 | datasets: [ 87 | { 88 | label: "# of Votes", 89 | data: [12, 19, 3, 5, 2, 3], 90 | backgroundColor: [ 91 | "rgba(255, 99, 132, 0.2)", 92 | "rgba(54, 162, 235, 0.2)", 93 | "rgba(255, 206, 86, 0.2)", 94 | "rgba(75, 192, 192, 0.2)", 95 | "rgba(153, 102, 255, 0.2)", 96 | "rgba(255, 159, 64, 0.2)" 97 | ], 98 | borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"], 99 | borderWidth: 1 100 | } 101 | ] 102 | }; 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /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 = globalThis?.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-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-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-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-icon/src/ct-icon-button.ts: -------------------------------------------------------------------------------- 1 | import "./ct-icon.js"; 2 | 3 | import { LitElement, css, html, nothing } 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 | --------------------------------------------------------------------------------