24 | );
25 | }
26 | }
--------------------------------------------------------------------------------
/angular/src/assets/build/app/0sefzzse.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | const{h,Context}=window.App;class TestDemoFour{handleClick(t,e){t.preventDefault(),this.history.push(e,{blue:"blue"})}render(){return h("div",null,h("a",{href:"/demo3/page1",onClick:t=>this.handleClick(t,"/demo3/page1")},"History push to ","/demo3/page1"),h("pre",null,h("b",null,"this.pages"),":",h("br",null),JSON.stringify(this.pages,null,2)),h("pre",null,h("b",null,"this.match"),":",h("br",null),JSON.stringify(this.match,null,2)),h("pre",null,h("b",null,"this.history.location"),":",h("br",null),JSON.stringify(this.history.location,null,2)))}static get is(){return"test-demo-four"}static get properties(){return{history:{type:"Any"},match:{type:"Any"},pages:{type:"Any"}}}}export{TestDemoFour};
--------------------------------------------------------------------------------
/angular/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/angular/src/assets/build/app/gifh2jkr.es5.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | App.loadComponents(function(e,n,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function e(){}return e.prototype.render=function(){return[n("span",null,"Demo 6 Test Page",n("br",null)),n("stencil-route",{url:"/demo6/",exact:!0,group:"main",routeRender:function(e){return[n("h1",null,"One"),n("stencil-route-link",{url:"/demo6/asdf"},"Next")]}}),n("stencil-route",{url:"/demo6/:any*",group:"main",routeRender:function(e){return[n("h1",null,"Two: ",e.match),n("stencil-route-link",{url:"/demo6/"},"Back")]}})]},Object.defineProperty(e,"is",{get:function(){return"test-demo-six"},enumerable:!0,configurable:!0}),Object.defineProperty(e,"properties",{get:function(){return{history:{type:"Any"},match:{type:"Any"},pages:{type:"Any"}}},enumerable:!0,configurable:!0}),e}();e.TestDemoSix=r},"gifh2jkr");
--------------------------------------------------------------------------------
/stencil/src/components/slider/slider.scss:
--------------------------------------------------------------------------------
1 | fwt-slider {
2 |
3 | .slider-container {
4 | width: 100%;
5 | }
6 |
7 | .slider {
8 | -webkit-appearance: none;
9 | appearance: none;
10 | width: 100%;
11 | height: 15px;
12 | border-radius: 5px;
13 | background: #d3d3d3;
14 | outline: none;
15 | opacity: 0.7;
16 | transition: opacity .2s;
17 |
18 | &:hover {
19 | opacity: 1;
20 | }
21 |
22 | &::-webkit-slider-thumb {
23 | -webkit-appearance: none;
24 | appearance: none;
25 | width: 25px;
26 | height: 25px;
27 | border-radius: 50%;
28 | background: #4CAF50;
29 | cursor: pointer;
30 | }
31 |
32 | &::-moz-range-thumb {
33 | width: 25px;
34 | height: 25px;
35 | border-radius: 50%;
36 | background: #4CAF50;
37 | cursor: pointer;
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/angular/src/assets/build/app/app.global.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | (function(appNamespace,publicPath){"use strict";
3 | (function(publicPath){Context.activeRouter=function(){var n={},t={},o={},e=[];return{set:function(t){n=Object.assign({},n,t),o={},function(){for(var n=e,t=0;t;rel=preload;as=script"
10 | },
11 | {
12 | "name": "Link",
13 | "value": ";rel=preload;as=script"
14 | }
15 | ]
16 | },
17 | {
18 | "include": "/assets/build/app/**",
19 | "headers": [
20 | {
21 | "name": "Cache-Control",
22 | "value": "public, max-age=31536000"
23 | }
24 | ]
25 | },
26 | {
27 | "include": "/sw.js",
28 | "headers": [
29 | {
30 | "name": "Cache-Control",
31 | "value": "no-cache, no-store, must-revalidate"
32 | }
33 | ]
34 | }
35 | ]
36 | }
37 | }
--------------------------------------------------------------------------------
/stencil/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@stencil/starter",
3 | "private": true,
4 | "version": "0.0.1",
5 | "description": "Stencil Starter App",
6 | "files": [
7 | "dist"
8 | ],
9 | "scripts": {
10 | "build": "stencil build --prerender",
11 | "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server\" ",
12 | "serve": "stencil-dev-server",
13 | "start": "npm run dev"
14 | },
15 | "dependencies": {
16 | "@stencil/core": "0.2.3",
17 | "@stencil/router": "0.0.23"
18 | },
19 | "devDependencies": {
20 | "@stencil/dev-server": "0.0.18",
21 | "@stencil/utils": "0.0.4"
22 | },
23 | "repository": {
24 | "type": "git",
25 | "url": "git+https://github.com/ionic-team/stencil-starter.git"
26 | },
27 | "author": "Ionic Team",
28 | "license": "MIT",
29 | "bugs": {
30 | "url": "https://github.com/ionic-team/stencil"
31 | },
32 | "homepage": "https://github.com/ionic-team/stencil"
33 | }
34 |
--------------------------------------------------------------------------------
/angular/src/assets/build/app/app.registry.json:
--------------------------------------------------------------------------------
1 | {
2 | "namespace": "App",
3 | "fsNamespace": "app",
4 | "loader": "../app.js",
5 | "global": "app.global.js",
6 | "core": "app.d9guwbls.js",
7 | "corePolyfilled": "app.pu4pwxws.js",
8 | "components": {
9 | "fwt-slider": {
10 | "$": "zji8cqpi"
11 | },
12 | "stencil-async-content": {
13 | "$": "mfcxg1az"
14 | },
15 | "stencil-route": {
16 | "$": "mfcxg1az"
17 | },
18 | "stencil-route-link": {
19 | "$": "mfcxg1az"
20 | },
21 | "stencil-route-title": {
22 | "$": "mfcxg1az"
23 | },
24 | "stencil-router": {
25 | "$": "mfcxg1az"
26 | },
27 | "stencil-router-redirect": {
28 | "$": "mfcxg1az"
29 | },
30 | "test-app": {
31 | "$": "mh7pqpgg"
32 | },
33 | "test-demo-four": {
34 | "$": "0sefzzse"
35 | },
36 | "test-demo-six": {
37 | "$": "gifh2jkr"
38 | },
39 | "test-demo-three": {
40 | "$": "1yscrcuc"
41 | }
42 | }
43 | }
--------------------------------------------------------------------------------
/angular/src/assets/build/app/0sefzzse.es5.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | App.loadComponents(function(e,t,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function e(){}return e.prototype.handleClick=function(e,t){e.preventDefault(),this.history.push(t,{blue:"blue"})},e.prototype.render=function(){var e=this;return t("div",null,t("a",{href:"/demo3/page1",onClick:function(t){return e.handleClick(t,"/demo3/page1")}},"History push to ","/demo3/page1"),t("pre",null,t("b",null,"this.pages"),":",t("br",null),JSON.stringify(this.pages,null,2)),t("pre",null,t("b",null,"this.match"),":",t("br",null),JSON.stringify(this.match,null,2)),t("pre",null,t("b",null,"this.history.location"),":",t("br",null),JSON.stringify(this.history.location,null,2)))},Object.defineProperty(e,"is",{get:function(){return"test-demo-four"},enumerable:!0,configurable:!0}),Object.defineProperty(e,"properties",{get:function(){return{history:{type:"Any"},match:{type:"Any"},pages:{type:"Any"}}},enumerable:!0,configurable:!0}),e}();e.TestDemoFour=r},"0sefzzse");
--------------------------------------------------------------------------------
/stencil/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Stencil Starter App
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/angular/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/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | reports: [ 'html', 'lcovonly' ],
20 | fixWebpackSourcePaths: true
21 | },
22 | angularCli: {
23 | environment: 'dev'
24 | },
25 | reporters: ['progress', 'kjhtml'],
26 | port: 9876,
27 | colors: true,
28 | logLevel: config.LOG_INFO,
29 | autoWatch: true,
30 | browsers: ['Chrome'],
31 | singleRun: false
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/stencil/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Ionic
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/angular/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | }).compileComponents();
12 | }));
13 |
14 | it('should create the app', async(() => {
15 | const fixture = TestBed.createComponent(AppComponent);
16 | const app = fixture.debugElement.componentInstance;
17 | expect(app).toBeTruthy();
18 | }));
19 |
20 | it(`should have as title 'app'`, async(() => {
21 | const fixture = TestBed.createComponent(AppComponent);
22 | const app = fixture.debugElement.componentInstance;
23 | expect(app.title).toEqual('app');
24 | }));
25 |
26 | it('should render title in a h1 tag', async(() => {
27 | const fixture = TestBed.createComponent(AppComponent);
28 | fixture.detectChanges();
29 | const compiled = fixture.debugElement.nativeElement;
30 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
31 | }));
32 | });
33 |
--------------------------------------------------------------------------------
/angular/src/assets/build/app/zji8cqpi.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | const{h,Context}=window.App;class SliderComponent{valueChangedHandler(e){this.valueChanged.emit(e.target.value)}render(){return h("div",{class:"slider-container"},h("input",{type:"range",min:this.min,max:this.max,value:this.value,class:"slider",onChange:e=>this.valueChangedHandler(e)}))}static get is(){return"fwt-slider"}static get properties(){return{max:{type:Number,attr:"max"},min:{type:Number,attr:"min"},value:{type:Number,attr:"value"}}}static get events(){return[{name:"valueChanged",method:"valueChanged",bubbles:!0,cancelable:!0,composed:!0}]}static get style(){return"fwt-slider .slider-container{width:100%}fwt-slider .slider{-webkit-appearance:none;appearance:none;width:100%;height:15px;border-radius:5px;background:#d3d3d3;outline:0;opacity:.7;transition:opacity .2s}fwt-slider .slider:hover{opacity:1}fwt-slider .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#4caf50;cursor:pointer}fwt-slider .slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#4caf50;cursor:pointer}"}}export{SliderComponent as FwtSlider};
--------------------------------------------------------------------------------
/angular/README.md:
--------------------------------------------------------------------------------
1 | # Angular
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.2.
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. Use the `-prod` flag for a production build.
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 [Protractor](http://www.protractortest.org/).
24 | Before running the tests make sure you are serving the app via `ng serve`.
25 |
26 | ## Further help
27 |
28 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
29 |
--------------------------------------------------------------------------------
/angular/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/dist/long-stack-trace-zone';
4 | import 'zone.js/dist/proxy.js';
5 | import 'zone.js/dist/sync-test';
6 | import 'zone.js/dist/jasmine-patch';
7 | import 'zone.js/dist/async-test';
8 | import 'zone.js/dist/fake-async-test';
9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 |
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 |
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 |
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 | BrowserDynamicTestingModule,
25 | platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | angular/dist
5 | angular/tmp
6 | angular/out-tsc
7 |
8 | # dependencies
9 | angular/node_modules
10 |
11 | # IDEs and editors
12 | angular/.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | angular/.sass-cache
29 | angular/connect.lock
30 | angular/coverage
31 | angular/libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | angular/typings
35 | yarn-error.log
36 |
37 | # e2e
38 | angular/e2e/*.js
39 | angular/e2e/*.map
40 |
41 | # System Files
42 | .DS_Store
43 | Thumbs.db
44 |
45 | stencil/dist/
46 | stencil/www/build
47 | stencil/www/assets/build
48 | stencil/www/index.html
49 |
50 | *~
51 | *.sw[mnpcod]
52 | *.log
53 | *.lock
54 | *.tmp
55 | *.tmp.*
56 | log.txt
57 | *.sublime-project
58 | *.sublime-workspace
59 |
60 | .idea/
61 | .vscode/
62 | .sass-cache/
63 | .versions/
64 | stencil/node_modules/
65 | $RECYCLE.BIN/
66 |
67 | .DS_Store
68 | Thumbs.db
69 | UserInterfaceState.xcuserstate
70 | .env
--------------------------------------------------------------------------------
/stencil/src/components.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This is an autogenerated file created by the Stencil build process.
3 | * It contains typing information for all components that exist in this project
4 | * and imports for stencil collections that might be configured in your stencil.config.js file
5 | */
6 |
7 | import '@stencil/router';
8 |
9 |
10 | import {
11 | SliderComponent as FwtSlider
12 | } from './components/slider/slider';
13 |
14 | declare global {
15 | interface HTMLFwtSliderElement extends FwtSlider, HTMLElement {
16 | }
17 | var HTMLFwtSliderElement: {
18 | prototype: HTMLFwtSliderElement;
19 | new (): HTMLFwtSliderElement;
20 | };
21 | interface HTMLElementTagNameMap {
22 | "fwt-slider": HTMLFwtSliderElement;
23 | }
24 | interface ElementTagNameMap {
25 | "fwt-slider": HTMLFwtSliderElement;
26 | }
27 | namespace JSX {
28 | interface IntrinsicElements {
29 | "fwt-slider": JSXElements.FwtSliderAttributes;
30 | }
31 | }
32 | namespace JSXElements {
33 | export interface FwtSliderAttributes extends HTMLAttributes {
34 | max?: number;
35 | min?: number;
36 | value?: number;
37 | }
38 | }
39 | }
40 |
41 | declare global { namespace JSX { interface StencilJSX {} } }
42 |
--------------------------------------------------------------------------------
/angular/src/assets/build/app/1yscrcuc.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | const{h,Context}=window.App;class TestDemoThree{render(){return[h("span",null,"Demo 3 Test Page",h("br",null)),h("stencil-route",{url:"/demo3/page1",exact:!0,routeRender:e=>[h("a",{href:"#",onClick:e=>{e.preventDefault(),this.history.push("/demo3/page2",{blue:"blue"})}},"History push to /demo3/page2"),h("pre",null,h("b",null,"props.pages"),":",h("br",null),JSON.stringify(this.pages,null,2)),h("pre",null,h("b",null,"props.match"),":",h("br",null),JSON.stringify(this.match,null,2)),h("pre",null,h("b",null,"props.history.location"),":",h("br",null),JSON.stringify(this.history.location,null,2))]}),h("stencil-route",{url:"/demo3/page2",exact:!0,routeRender:e=>[h("a",{href:"#",onClick:e=>{e.preventDefault(),this.history.push("/demo3/page1",{red:"red"})}},"History push to /demo3/page1"),h("pre",null,h("b",null,"props.pages"),":",h("br",null),JSON.stringify(this.pages,null,2)),h("pre",null,h("b",null,"props.match"),":",h("br",null),JSON.stringify(this.match,null,2)),h("pre",null,h("b",null,"props.history.location"),":",h("br",null),JSON.stringify(this.history.location,null,2))]})]}static get is(){return"test-demo-three"}static get properties(){return{history:{type:"Any"},match:{type:"Any"},pages:{type:"Any"}}}}export{TestDemoThree};
--------------------------------------------------------------------------------
/angular/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e"
12 | },
13 | "private": true,
14 | "dependencies": {
15 | "@angular/animations": "5.2.2",
16 | "@angular/common": "5.2.2",
17 | "@angular/compiler": "5.2.2",
18 | "@angular/core": "5.2.2",
19 | "@angular/forms": "5.2.2",
20 | "@angular/http": "5.2.2",
21 | "@angular/platform-browser": "5.2.2",
22 | "@angular/platform-browser-dynamic": "5.2.2",
23 | "@angular/router": "5.2.2",
24 | "core-js": "2.5.3",
25 | "rxjs": "5.5.6",
26 | "zone.js": "0.8.20"
27 | },
28 | "devDependencies": {
29 | "@angular/cli": "^1.6.5",
30 | "@angular/compiler-cli": "5.2.2",
31 | "@angular/language-service": "5.2.2",
32 | "@types/jasmine": "2.8.5",
33 | "@types/jasminewd2": "2.0.3",
34 | "@types/node": "9.3.0",
35 | "codelyzer": "4.1.0",
36 | "jasmine-core": "2.9.1",
37 | "jasmine-spec-reporter": "4.2.1",
38 | "karma": "~1.7.0",
39 | "karma-chrome-launcher": "~2.1.1",
40 | "karma-cli": "~1.0.1",
41 | "karma-coverage-istanbul-reporter": "^1.2.1",
42 | "karma-jasmine": "~1.1.0",
43 | "karma-jasmine-html-reporter": "^0.2.2",
44 | "protractor": "~5.1.2",
45 | "ts-node": "~3.2.0",
46 | "tslint": "~5.3.2",
47 | "typescript": "2.6.2"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/angular/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "project": {
4 | "name": "angular"
5 | },
6 | "apps": [
7 | {
8 | "root": "src",
9 | "outDir": "dist",
10 | "assets": [
11 | "assets",
12 | "favicon.ico"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "polyfills": "polyfills.ts",
17 | "test": "test.ts",
18 | "tsconfig": "tsconfig.app.json",
19 | "testTsconfig": "tsconfig.spec.json",
20 | "prefix": "app",
21 | "styles": [
22 | "styles.css"
23 | ],
24 | "scripts": [],
25 | "environmentSource": "environments/environment.ts",
26 | "environments": {
27 | "dev": "environments/environment.ts",
28 | "prod": "environments/environment.prod.ts"
29 | }
30 | }
31 | ],
32 | "e2e": {
33 | "protractor": {
34 | "config": "./protractor.conf.js"
35 | }
36 | },
37 | "lint": [
38 | {
39 | "project": "src/tsconfig.app.json",
40 | "exclude": "**/node_modules/**"
41 | },
42 | {
43 | "project": "src/tsconfig.spec.json",
44 | "exclude": "**/node_modules/**"
45 | },
46 | {
47 | "project": "e2e/tsconfig.e2e.json",
48 | "exclude": "**/node_modules/**"
49 | }
50 | ],
51 | "test": {
52 | "karma": {
53 | "config": "./karma.conf.js"
54 | }
55 | },
56 | "defaults": {
57 | "styleExt": "css",
58 | "component": {}
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/angular/src/assets/build/app/1yscrcuc.es5.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | App.loadComponents(function(e,n,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var t=function(){function e(){}return e.prototype.render=function(){var e=this;return[n("span",null,"Demo 3 Test Page",n("br",null)),n("stencil-route",{url:"/demo3/page1",exact:!0,routeRender:function(r){return[n("a",{href:"#",onClick:function(n){n.preventDefault(),e.history.push("/demo3/page2",{blue:"blue"})}},"History push to /demo3/page2"),n("pre",null,n("b",null,"props.pages"),":",n("br",null),JSON.stringify(e.pages,null,2)),n("pre",null,n("b",null,"props.match"),":",n("br",null),JSON.stringify(e.match,null,2)),n("pre",null,n("b",null,"props.history.location"),":",n("br",null),JSON.stringify(e.history.location,null,2))]}}),n("stencil-route",{url:"/demo3/page2",exact:!0,routeRender:function(r){return[n("a",{href:"#",onClick:function(n){n.preventDefault(),e.history.push("/demo3/page1",{red:"red"})}},"History push to /demo3/page1"),n("pre",null,n("b",null,"props.pages"),":",n("br",null),JSON.stringify(e.pages,null,2)),n("pre",null,n("b",null,"props.match"),":",n("br",null),JSON.stringify(e.match,null,2)),n("pre",null,n("b",null,"props.history.location"),":",n("br",null),JSON.stringify(e.history.location,null,2))]}})]},Object.defineProperty(e,"is",{get:function(){return"test-demo-three"},enumerable:!0,configurable:!0}),Object.defineProperty(e,"properties",{get:function(){return{history:{type:"Any"},match:{type:"Any"},pages:{type:"Any"}}},enumerable:!0,configurable:!0}),e}();e.TestDemoThree=t},"1yscrcuc");
--------------------------------------------------------------------------------
/angular/src/assets/build/app/zji8cqpi.es5.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | App.loadComponents(function(e,t,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function e(){}return e.prototype.valueChangedHandler=function(e){this.valueChanged.emit(e.target.value)},e.prototype.render=function(){var e=this;return t("div",{class:"slider-container"},t("input",{type:"range",min:this.min,max:this.max,value:this.value,class:"slider",onChange:function(t){return e.valueChangedHandler(t)}}))},Object.defineProperty(e,"is",{get:function(){return"fwt-slider"},enumerable:!0,configurable:!0}),Object.defineProperty(e,"properties",{get:function(){return{max:{type:Number,attr:"max"},min:{type:Number,attr:"min"},value:{type:Number,attr:"value"}}},enumerable:!0,configurable:!0}),Object.defineProperty(e,"events",{get:function(){return[{name:"valueChanged",method:"valueChanged",bubbles:!0,cancelable:!0,composed:!0}]},enumerable:!0,configurable:!0}),Object.defineProperty(e,"style",{get:function(){return"fwt-slider .slider-container{width:100%}fwt-slider .slider{-webkit-appearance:none;appearance:none;width:100%;height:15px;border-radius:5px;background:#d3d3d3;outline:0;opacity:.7;transition:opacity .2s}fwt-slider .slider:hover{opacity:1}fwt-slider .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#4caf50;cursor:pointer}fwt-slider .slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#4caf50;cursor:pointer}"},enumerable:!0,configurable:!0}),e}();e.FwtSlider=r},"zji8cqpi");
--------------------------------------------------------------------------------
/angular/src/assets/build/app/mh7pqpgg.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | const{h,Context}=window.App;class TestApp{render(){return h("stencil-router",{"title-suffix":" - Stencil Router Demos"},h("ul",null,h("li",null,h("stencil-route-link",{url:"/",exact:!0},"Exact Base Link")),h("li",null,h("stencil-route-link",{url:"/"},"Base Link")),h("li",null,h("stencil-route-link",{url:"/demo",urlMatch:["/demo","/demox"],exact:!0},"Demo Link")),h("li",null,h("stencil-route-link",{url:"/demo2"},"Demo2 Link")),h("li",null,h("stencil-route-link",{url:"/demo3"},"Demo3 Link")),h("li",null,h("stencil-route-link",{url:"/demo3/page1"},"Demo3 Page1 Link")),h("li",null,h("stencil-route-link",{url:"/demo3/page2"},"Demo3 Page2 Link")),h("li",null,h("stencil-route-link",{url:"/demo4"},"Demo4 Link")),h("li",null,h("stencil-route-link",{url:"/demo6/"},"Demo6 Link"))),h("stencil-route",{url:"/",exact:!0,routeRender:e=>h("span",null,"rendering /")}),h("stencil-route",{url:["/demo","/demox"],exact:!0,routeRender:e=>[h("stencil-route-title",{title:"DEMO"}),h("span",null,"rendering /demo")]}),h("stencil-route",{url:"/demo2",exact:!0,routeRender:e=>[h("span",null,"rendering /demo2"),h("stencil-router-redirect",{url:"/demo3"})]}),h("stencil-route",{url:"/demo3",exact:!0,routeRender:e=>[h("stencil-route-title",{title:"Demo 3"}),h("span",null,"rendering /demo 3")]}),h("stencil-route",{url:"/demo3",componentProps:{pages:["intro/index.html"]},component:"test-demo-three"}),h("stencil-route",{url:"/demo4",component:"test-demo-four"}),h("stencil-route",{url:"/demo5",component:"async-content",componentProps:{location:"/"}}),h("stencil-route",{url:"/demo6",component:"test-demo-six"}))}static get is(){return"test-app"}}export{TestApp};
--------------------------------------------------------------------------------
/stencil/readme.md:
--------------------------------------------------------------------------------
1 | # Stencil Starter App
2 |
3 | Stencil is a compiler for building fast web apps using Web Components.
4 |
5 | Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
6 |
7 | Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.
8 |
9 | Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).
10 |
11 | ## Getting Started
12 |
13 | To start a new project using Stencil, clone this repo to a new directory:
14 |
15 | ```bash
16 | git clone git@github.com:ionic-team/stencil-starter.git my-app
17 | cd my-app
18 | git remote rm origin
19 | ```
20 |
21 | and run:
22 |
23 | ```bash
24 | npm install
25 | npm start
26 | ```
27 |
28 | To view the build, start an HTTP server inside of the `/www` directory.
29 |
30 | To watch for file changes during develop, run:
31 |
32 | ```bash
33 | npm run dev
34 | ```
35 |
36 | To build the app for production, run:
37 |
38 | ```bash
39 | npm run build
40 | ```
41 |
42 |
--------------------------------------------------------------------------------
/angular/src/assets/build/app/mh7pqpgg.es5.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | App.loadComponents(function(e,n,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var l=function(){function e(){}return e.prototype.render=function(){return n("stencil-router",{"title-suffix":" - Stencil Router Demos"},n("ul",null,n("li",null,n("stencil-route-link",{url:"/",exact:!0},"Exact Base Link")),n("li",null,n("stencil-route-link",{url:"/"},"Base Link")),n("li",null,n("stencil-route-link",{url:"/demo",urlMatch:["/demo","/demox"],exact:!0},"Demo Link")),n("li",null,n("stencil-route-link",{url:"/demo2"},"Demo2 Link")),n("li",null,n("stencil-route-link",{url:"/demo3"},"Demo3 Link")),n("li",null,n("stencil-route-link",{url:"/demo3/page1"},"Demo3 Page1 Link")),n("li",null,n("stencil-route-link",{url:"/demo3/page2"},"Demo3 Page2 Link")),n("li",null,n("stencil-route-link",{url:"/demo4"},"Demo4 Link")),n("li",null,n("stencil-route-link",{url:"/demo6/"},"Demo6 Link"))),n("stencil-route",{url:"/",exact:!0,routeRender:function(e){return n("span",null,"rendering /")}}),n("stencil-route",{url:["/demo","/demox"],exact:!0,routeRender:function(e){return[n("stencil-route-title",{title:"DEMO"}),n("span",null,"rendering /demo")]}}),n("stencil-route",{url:"/demo2",exact:!0,routeRender:function(e){return[n("span",null,"rendering /demo2"),n("stencil-router-redirect",{url:"/demo3"})]}}),n("stencil-route",{url:"/demo3",exact:!0,routeRender:function(e){return[n("stencil-route-title",{title:"Demo 3"}),n("span",null,"rendering /demo 3")]}}),n("stencil-route",{url:"/demo3",componentProps:{pages:["intro/index.html"]},component:"test-demo-three"}),n("stencil-route",{url:"/demo4",component:"test-demo-four"}),n("stencil-route",{url:"/demo5",component:"async-content",componentProps:{location:"/"}}),n("stencil-route",{url:"/demo6",component:"test-demo-six"}))},Object.defineProperty(e,"is",{get:function(){return"test-app"},enumerable:!0,configurable:!0}),e}();e.TestApp=l},"mh7pqpgg");
--------------------------------------------------------------------------------
/angular/src/assets/build/app.js:
--------------------------------------------------------------------------------
1 | /*! Built with http://stenciljs.com */
2 | !function(t,e,i,c,r,n,o,a,s,u){!function(t,e,i,c,r,n,o,a,s,u,l){(t[i]=t[i]||{}).components=s,(l=s.filter(function(t){return t[2]}).map(function(t){return t[0]})).length&&((u=e.createElement("style")).innerHTML=l.join()+"{visibility:hidden}."+a+"{visibility:inherit}",u.setAttribute("data-visibility",""),e.head.insertBefore(u,e.head.firstChild)),(u=e.scripts[e.scripts.length-1])&&u.src&&(r=(l=u.src.split("/").slice(0,-1)).join("/")+(l.length?"/":"")+c+"/"),(u=e.createElement("script")).src=r+(function(t){return t.customElements}(t)&&function(t){if(!("noModule"in t))return!1;try{return new Function('import("")'),!0}catch(t){return!1}}(u)&&function(t){return t.fetch}(t)&&function(t){return t.CSS&&t.CSS.supports&&t.CSS.supports("color","var(--c)")}(t)?n:o),u.setAttribute("data-path",r),u.setAttribute("data-namespace",c),e.head.appendChild(u)}(window,document,"App","app","/assets/build/app/","app.d9guwbls.js","app.pu4pwxws.js","hydrated",[["fwt-slider","zji8cqpi",1,[["max",1,1,4],["min",1,1,4],["value",1,1,4]]],["stencil-async-content","mfcxg1az",0,[["content",5],["documentLocation",1,1,2]]],["stencil-route","mfcxg1az",0,[["activeRouter",3,0,0,"activeRouter"],["component",1,1,2],["componentProps",1,1,1],["exact",1,1,3],["group",1,1,2],["location",3,0,0,"location"],["match",5],["routeRender",1,1,1],["url",1,1,1]]],["stencil-route-link","mfcxg1az",0,[["activeClass",1,1,2],["activeRouter",3,0,0,"activeRouter"],["custom",1,1,3],["exact",1,1,3],["location",3,0,0,"location"],["match",5],["url",1,1,2],["urlMatch",1,1,1]]],["stencil-route-title","mfcxg1az",0,[["activeRouter",3,0,0,"activeRouter"],["title",1,1,2]]],["stencil-router","mfcxg1az",0,[["activeRouter",3,0,0,"activeRouter"],["match",5],["root",1,1,2],["titleSuffix",1,1,2]]],["stencil-router-redirect","mfcxg1az",0,[["activeRouter",3,0,0,"activeRouter"],["url",1,1,2]]],["test-app","mh7pqpgg"],["test-demo-four","0sefzzse",0,[["history",1,1,1],["match",1,1,1],["pages",1,1,1]]],["test-demo-six","gifh2jkr",0,[["history",1,1,1],["match",1,1,1],["pages",1,1,1]]],["test-demo-three","1yscrcuc",0,[["history",1,1,1],["match",1,1,1],["pages",1,1,1]]]],void 0)}();
--------------------------------------------------------------------------------
/angular/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/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** Evergreen browsers require these. **/
41 | import 'core-js/es6/reflect';
42 | import 'core-js/es7/reflect';
43 |
44 |
45 | /**
46 | * Required to support Web Animations `@angular/animation`.
47 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
48 | **/
49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
50 |
51 |
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 |
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
64 | /**
65 | * Date, currency, decimal and percent pipes.
66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 | */
68 | // import 'intl'; // Run `npm install --save intl`.
69 | /**
70 | * Need to import at least one locale-data with intl.
71 | */
72 | // import 'intl/locale-data/jsonp/en';
73 |
--------------------------------------------------------------------------------
/stencil/www/sw.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Welcome to your Workbox-powered service worker!
3 | *
4 | * You'll need to register this file in your web app and you should
5 | * disable HTTP caching for this file too.
6 | * See https://goo.gl/nhQhGp
7 | *
8 | * The rest of the code is auto-generated. Please don't update this file
9 | * directly; instead, make changes to your Workbox build configuration
10 | * and re-run your build process.
11 | * See https://goo.gl/YYPcyY
12 | */
13 |
14 |
15 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.0.0-alpha.3/workbox-sw.js");
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | /**
26 | * The workboxSW.precacheAndRoute() method efficiently caches and responds to
27 | * requests for URLs in the manifest.
28 | * See https://goo.gl/S9QRab
29 | */
30 | self.__precacheManifest = [
31 | {
32 | "url": "assets/build/app.global.js",
33 | "revision": "874fca11d857bb2de14f9b0d097c39c6"
34 | },
35 | {
36 | "url": "assets/build/app.js",
37 | "revision": "99165c3a997d99cddcdcdee585cf4fea"
38 | },
39 | {
40 | "url": "assets/build/app.registry.json",
41 | "revision": "64bde8a0bbfe19a61039044c4a4f96cd"
42 | },
43 | {
44 | "url": "assets/build/app/2tlvz7ue.js",
45 | "revision": "4acc73208963d0c1a8f9eabe17b8cdb6"
46 | },
47 | {
48 | "url": "assets/build/app/app.a11spwg7.js",
49 | "revision": "788ef400097ab5e8e8464746de2599a9"
50 | },
51 | {
52 | "url": "assets/build/app/app.aysob2df.pf.js",
53 | "revision": "096df62626f17d447d0854f778cbaf36"
54 | },
55 | {
56 | "url": "assets/build/app/if0opbrp.js",
57 | "revision": "921a0f2053ba0a1728845286a22d9e61"
58 | },
59 | {
60 | "url": "assets/build/app/imd9xidt.js",
61 | "revision": "2286d47e08db8815a3d1046e6f67975d"
62 | },
63 | {
64 | "url": "assets/build/app/wzflf8ma.css",
65 | "revision": "5c7aa5b95da3e8f5aaf0afe29e300895"
66 | },
67 | {
68 | "url": "assets/icon/favicon.ico",
69 | "revision": "d2f619d796fbe8bed6200da2691aa5b6"
70 | },
71 | {
72 | "url": "assets/img/icon.png",
73 | "revision": "b96ad6e1e0b755c8cd45e6aec40bca25"
74 | },
75 | {
76 | "url": "favicon.ico",
77 | "revision": "d2f619d796fbe8bed6200da2691aa5b6"
78 | },
79 | {
80 | "url": "index.html",
81 | "revision": "c04aa2dc47a5d31d1cb6e83f2869dc3b"
82 | },
83 | {
84 | "url": "manifest.json",
85 | "revision": "7f958ca5432ddd771183989b1c015833"
86 | },
87 | {
88 | "url": "workbox-sw.prod.v2.0.1.js",
89 | "revision": "679d4e73dc756b21e46ee8f1bb52c882"
90 | }
91 | ].concat(self.__precacheManifest || []);
92 |
93 | if (Array.isArray(self.__precacheManifest)) {
94 | workbox.precaching.suppressWarnings();
95 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
96 | }
97 |
--------------------------------------------------------------------------------
/angular/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "eofline": true,
15 | "forin": true,
16 | "import-blacklist": [
17 | true,
18 | "rxjs"
19 | ],
20 | "import-spacing": true,
21 | "indent": [
22 | true,
23 | "spaces"
24 | ],
25 | "interface-over-type-literal": true,
26 | "label-position": true,
27 | "max-line-length": [
28 | true,
29 | 140
30 | ],
31 | "member-access": false,
32 | "member-ordering": [
33 | true,
34 | {
35 | "order": [
36 | "static-field",
37 | "instance-field",
38 | "static-method",
39 | "instance-method"
40 | ]
41 | }
42 | ],
43 | "no-arg": true,
44 | "no-bitwise": true,
45 | "no-console": [
46 | true,
47 | "debug",
48 | "info",
49 | "time",
50 | "timeEnd",
51 | "trace"
52 | ],
53 | "no-construct": true,
54 | "no-debugger": true,
55 | "no-duplicate-super": true,
56 | "no-empty": false,
57 | "no-empty-interface": true,
58 | "no-eval": true,
59 | "no-inferrable-types": [
60 | true,
61 | "ignore-params"
62 | ],
63 | "no-misused-new": true,
64 | "no-non-null-assertion": true,
65 | "no-shadowed-variable": true,
66 | "no-string-literal": false,
67 | "no-string-throw": true,
68 | "no-switch-case-fall-through": true,
69 | "no-trailing-whitespace": true,
70 | "no-unnecessary-initializer": true,
71 | "no-unused-expression": true,
72 | "no-use-before-declare": true,
73 | "no-var-keyword": true,
74 | "object-literal-sort-keys": false,
75 | "one-line": [
76 | true,
77 | "check-open-brace",
78 | "check-catch",
79 | "check-else",
80 | "check-whitespace"
81 | ],
82 | "prefer-const": true,
83 | "quotemark": [
84 | true,
85 | "single"
86 | ],
87 | "radix": true,
88 | "semicolon": [
89 | true,
90 | "always"
91 | ],
92 | "triple-equals": [
93 | true,
94 | "allow-null-check"
95 | ],
96 | "typedef-whitespace": [
97 | true,
98 | {
99 | "call-signature": "nospace",
100 | "index-signature": "nospace",
101 | "parameter": "nospace",
102 | "property-declaration": "nospace",
103 | "variable-declaration": "nospace"
104 | }
105 | ],
106 | "typeof-compare": true,
107 | "unified-signatures": true,
108 | "variable-name": false,
109 | "whitespace": [
110 | true,
111 | "check-branch",
112 | "check-decl",
113 | "check-operator",
114 | "check-separator",
115 | "check-type"
116 | ],
117 | "directive-selector": [
118 | true,
119 | "attribute",
120 | "app",
121 | "camelCase"
122 | ],
123 | "component-selector": [
124 | true,
125 | "element",
126 | "app",
127 | "kebab-case"
128 | ],
129 | "use-input-property-decorator": true,
130 | "use-output-property-decorator": true,
131 | "use-host-property-decorator": true,
132 | "no-input-rename": true,
133 | "no-output-rename": true,
134 | "use-life-cycle-interface": true,
135 | "use-pipe-transform-interface": true,
136 | "component-class-suffix": true,
137 | "directive-class-suffix": true,
138 | "no-access-missing-member": true,
139 | "templates-use-public": true,
140 | "invoke-injectable": true
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-stencil
2 | 
3 |
4 | This project shows a very basic example of how to connect a web component (generated with [Stencil](https://stenciljs.com/)) with a basic angular project.
5 |
6 | The following steps explain what I've done to get this working.
7 |
8 | ## steps
9 |
10 | ### a basic stencil component
11 |
12 | The idea is to have a web component that can be data-bound via properties and return its changes by custom events.
13 | For this example I've picked nothing special but a simple slider component. The following code shows the `@Component` decorator. This decorator adds meta-information to you component like its selector `tag`. Our slider should use the custom element selector tag `fwt-slider` (so we can use `` later in the DOM).
14 |
15 | ```jsx
16 | import { Component } from '@stencil/core';
17 |
18 | @Component({
19 | tag: 'fwt-slider'
20 | })
21 | export class SliderComponent {
22 | ...
23 | }
24 | ```
25 | Stencil components are very similar to react components. They have the same lifecycle methods and of course they also need a `render` function. So let's add one:
26 |
27 | ```jsx
28 | import { Component } from '@stencil/core';
29 |
30 | @Component({
31 | tag: 'fwt-slider'
32 | })
33 | export class SliderComponent {
34 |
35 | render() {
36 | return (
37 |
38 | ...
39 |
40 | )
41 | }
42 | }
43 | ```
44 |
45 | ### add properties
46 |
47 | Our slider will have a min and a max property and an initial value property. Adding a property to a stencil component is very easy. All you have to do is to use the `@Prop` decorator:
48 |
49 | ```jsx
50 | import { Component, Prop } from '@stencil/core';
51 |
52 | @Component({
53 | tag: 'fwt-slider'
54 | })
55 | export class SliderComponent {
56 |
57 | @Prop() min: number;
58 | @Prop() max: number;
59 | @Prop() value: number;
60 |
61 | render() {
62 | return (
63 |
64 |
65 |
66 |
67 | )
68 | }
69 | }
70 | ```
71 |
72 | ### emit data using events
73 |
74 | Ok so far so good.
75 | How about emitting an event when the value has been changed? That's actually a good idea. For this purpose we only have to use another decorator called `@Event`. This decorator is used in combination with the `EventEmitter` interface. This will create a custom event that is called like the event property. You can change the name and other event properties by passing `EventOptions` to the `@Event` decorator but for our example we keep things simple.
76 | In this example I'm listening to changes by the range input and pass the current value via the `EventEmitter` using its `emit` function.
77 | I've also added some style to our slider by setting the `styleUrl` (Stencil supports scss and css) in the `@Component` decorator.
78 |
79 | ### final component
80 | #### final slider.tsx
81 | ```jsx
82 | import { Component, Prop, Event, EventEmitter } from '@stencil/core';
83 |
84 | @Component({
85 | tag: 'fwt-slider',
86 | styleUrl: 'slider.scss'
87 | })
88 | export class SliderComponent {
89 |
90 | @Prop() min: number;
91 | @Prop() max: number;
92 | @Prop() value: number;
93 |
94 | @Event() valueChanged: EventEmitter;
95 |
96 | valueChangedHandler(event: any) {
97 | this.valueChanged.emit(event.target.value);
98 | }
99 |
100 | render() {
101 | return (
102 |