├── .browserslistrc
├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
├── app
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.ts
│ └── app.module.ts
├── assets
│ ├── .gitkeep
│ └── images
│ │ └── avatar.png
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
└── web-components
│ └── card-user
│ ├── card-user.ts
│ └── user.ts
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.sass-cache
35 | /connect.lock
36 | /coverage
37 | /libpeerconnection.log
38 | npm-debug.log
39 | yarn-error.log
40 | testem.log
41 | /typings
42 |
43 | # System Files
44 | .DS_Store
45 | Thumbs.db
46 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AngularLitWebComponents
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.3.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular-lit-web-components": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:class": {
10 | "skipTests": true
11 | },
12 | "@schematics/angular:component": {
13 | "skipTests": true
14 | },
15 | "@schematics/angular:directive": {
16 | "skipTests": true
17 | },
18 | "@schematics/angular:guard": {
19 | "skipTests": true
20 | },
21 | "@schematics/angular:interceptor": {
22 | "skipTests": true
23 | },
24 | "@schematics/angular:pipe": {
25 | "skipTests": true
26 | },
27 | "@schematics/angular:service": {
28 | "skipTests": true
29 | },
30 | "@schematics/angular:application": {
31 | "strict": true
32 | }
33 | },
34 | "root": "",
35 | "sourceRoot": "src",
36 | "prefix": "corp",
37 | "architect": {
38 | "build": {
39 | "builder": "@angular-devkit/build-angular:browser",
40 | "options": {
41 | "outputPath": "dist/angular-lit-web-components",
42 | "index": "src/index.html",
43 | "main": "src/main.ts",
44 | "polyfills": "src/polyfills.ts",
45 | "tsConfig": "tsconfig.app.json",
46 | "assets": [
47 | "src/favicon.ico",
48 | "src/assets",
49 | {
50 | "glob": "{*loader.js,bundles/*.js}",
51 | "input": "node_modules/@webcomponents/webcomponentsjs",
52 | "output": "node_modules/@webcomponents/webcomponentsjs"
53 | }
54 | ],
55 | "styles": ["src/styles.css"],
56 | "scripts": [
57 | "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
58 | ]
59 | },
60 | "configurations": {
61 | "production": {
62 | "budgets": [
63 | {
64 | "type": "initial",
65 | "maximumWarning": "500kb",
66 | "maximumError": "1mb"
67 | },
68 | {
69 | "type": "anyComponentStyle",
70 | "maximumWarning": "2kb",
71 | "maximumError": "4kb"
72 | }
73 | ],
74 | "fileReplacements": [
75 | {
76 | "replace": "src/environments/environment.ts",
77 | "with": "src/environments/environment.prod.ts"
78 | }
79 | ],
80 | "outputHashing": "all"
81 | },
82 | "development": {
83 | "buildOptimizer": false,
84 | "optimization": false,
85 | "vendorChunk": true,
86 | "extractLicenses": false,
87 | "sourceMap": true,
88 | "namedChunks": true
89 | }
90 | },
91 | "defaultConfiguration": "production"
92 | },
93 | "serve": {
94 | "builder": "@angular-devkit/build-angular:dev-server",
95 | "configurations": {
96 | "production": {
97 | "browserTarget": "angular-lit-web-components:build:production"
98 | },
99 | "development": {
100 | "browserTarget": "angular-lit-web-components:build:development"
101 | }
102 | },
103 | "defaultConfiguration": "development"
104 | },
105 | "extract-i18n": {
106 | "builder": "@angular-devkit/build-angular:extract-i18n",
107 | "options": {
108 | "browserTarget": "angular-lit-web-components:build"
109 | }
110 | },
111 | "test": {
112 | "builder": "@angular-devkit/build-angular:karma",
113 | "options": {
114 | "main": "src/test.ts",
115 | "polyfills": "src/polyfills.ts",
116 | "tsConfig": "tsconfig.spec.json",
117 | "karmaConfig": "karma.conf.js",
118 | "assets": ["src/favicon.ico", "src/assets"],
119 | "styles": ["src/styles.css"],
120 | "scripts": []
121 | }
122 | }
123 | }
124 | }
125 | },
126 | "defaultProject": "angular-lit-web-components"
127 | }
128 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/angular-lit-web-components'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-lit-web-components",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~12.1.0-",
14 | "@angular/common": "~12.1.0-",
15 | "@angular/compiler": "~12.1.0-",
16 | "@angular/core": "~12.1.0-",
17 | "@angular/forms": "~12.1.0-",
18 | "@angular/platform-browser": "~12.1.0-",
19 | "@angular/platform-browser-dynamic": "~12.1.0-",
20 | "@angular/router": "~12.1.0-",
21 | "@webcomponents/webcomponentsjs": "^2.6.0",
22 | "lit": "^2.0.0",
23 | "rxjs": "~6.6.0",
24 | "tslib": "^2.2.0",
25 | "zone.js": "~0.11.4"
26 | },
27 | "devDependencies": {
28 | "@angular-devkit/build-angular": "~12.1.3",
29 | "@angular/cli": "~12.1.3",
30 | "@angular/compiler-cli": "~12.1.0-",
31 | "@types/jasmine": "~3.8.0",
32 | "@types/node": "^12.11.1",
33 | "jasmine-core": "~3.8.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.0.3",
37 | "karma-jasmine": "~4.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "typescript": "~4.3.2"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | const routes: Routes = [];
5 |
6 | @NgModule({
7 | imports: [RouterModule.forRoot(routes)],
8 | exports: [RouterModule]
9 | })
10 | export class AppRoutingModule { }
11 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | gap: 15px;
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { User } from 'src/web-components/card-user/user';
3 |
4 | import '../web-components/card-user/card-user';
5 |
6 | @Component({
7 | selector: 'corp-root',
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.css'],
10 | })
11 | export class AppComponent {
12 | // user: User = {
13 | // id: 2,
14 | // fullName: 'Luis',
15 | // role: 'Software Engineer',
16 | // avatar: 'https://luixaviles.com/images/avatar@2x.png',
17 | // };
18 |
19 | users: User[] = [
20 | {
21 | id: 0,
22 | fullName: 'Luis Aviles',
23 | role: 'Software Engineer',
24 | avatar: 'https://luixaviles.com/images/avatar@2x.png',
25 | },
26 | {
27 | id: 1,
28 | fullName: 'Roperto Perez',
29 | role: 'UX Designer',
30 | },
31 | { id: 2, fullName: 'Maria Gomez', role: 'Data Scientist' },
32 | ];
33 |
34 | edit(event: Event) {
35 | const user = (event as CustomEvent).detail;
36 | console.log('Edit user', user);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | @NgModule({
8 | declarations: [AppComponent],
9 | imports: [BrowserModule, AppRoutingModule],
10 | providers: [],
11 | bootstrap: [AppComponent],
12 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
13 | })
14 | export class AppModule {}
15 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luixaviles/angular-lit-web-components/d4273eda9a67842264559d3080fd1ea95281274b/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/images/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luixaviles/angular-lit-web-components/d4273eda9a67842264559d3080fd1ea95281274b/src/assets/images/avatar.png
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luixaviles/angular-lit-web-components/d4273eda9a67842264559d3080fd1ea95281274b/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular Lit Web Components
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * IE11 requires the following for NgClass support on SVG elements
23 | */
24 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
25 |
26 | /**
27 | * Web Animations `@angular/platform-browser/animations`
28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 | */
31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
32 |
33 | /**
34 | * By default, zone.js will patch all possible macroTask and DomEvents
35 | * user can disable parts of macroTask/DomEvents patch by setting following flags
36 | * because those flags need to be set before `zone.js` being loaded, and webpack
37 | * will put import in the top of bundle, so user need to create a separate file
38 | * in this directory (for example: zone-flags.ts), and put the following flags
39 | * into that file, and then add the following code before importing zone.js.
40 | * import './zone-flags';
41 | *
42 | * The flags allowed in zone-flags.ts are listed here.
43 | *
44 | * The following flags will work for all browsers.
45 | *
46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 | *
50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
52 | *
53 | * (window as any).__Zone_enable_cross_context_check = true;
54 | *
55 | */
56 |
57 | /***************************************************************************************************
58 | * Zone JS is required by default for Angular itself.
59 | */
60 | import 'zone.js'; // Included with Angular CLI.
61 |
62 |
63 | /***************************************************************************************************
64 | * APPLICATION IMPORTS
65 | */
66 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 |
--------------------------------------------------------------------------------
/src/web-components/card-user/card-user.ts:
--------------------------------------------------------------------------------
1 | import { LitElement, html, css } from 'lit';
2 | import { property, customElement } from 'lit/decorators.js';
3 | import { User } from './user';
4 |
5 | @customElement('card-user')
6 | export class CardUser extends LitElement {
7 | static styles = css`
8 | :host {
9 | display: block;
10 | }
11 | .card {
12 | box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);
13 | max-width: 160px;
14 | }
15 | .card-content {
16 | padding: 10px;
17 | }
18 | `;
19 |
20 | @property({ type: Object }) user?: User = {
21 | id: 0,
22 | fullName: 'Luis Aviles',
23 | role: 'Software Engineer',
24 | };
25 |
26 | render() {
27 | if (this.user === undefined) {
28 | return '';
29 | }
30 |
31 | return html`
32 |
33 |
39 |
40 |
${this.user.fullName}
41 |
${this.user.role}
42 |
43 |
44 |