├── src ├── assets │ ├── .gitkeep │ ├── images │ │ ├── figma.png │ │ ├── github.png │ │ ├── card-bg.jpg │ │ ├── rxjs-white.png │ │ ├── Rx_Logo-512-512.png │ │ ├── flickr-14202459710.jpg │ │ ├── layout-component.svg │ │ ├── tabs-component.svg │ │ ├── colors.svg │ │ ├── button-component.svg │ │ ├── list.svg │ │ ├── exclamation-mark.svg │ │ ├── table.svg │ │ ├── card-component.svg │ │ ├── pallete.svg │ │ ├── icon-component.svg │ │ ├── activity.svg │ │ ├── tabs-icon.svg │ │ ├── menu.svg │ │ ├── plus.svg │ │ ├── github-circle-white-transparent.svg │ │ ├── layout-icon.svg │ │ ├── material │ │ │ ├── layout.svg │ │ │ ├── button.svg │ │ │ ├── reactive.svg │ │ │ └── pallette.svg │ │ ├── button-icon.svg │ │ ├── markdown.svg │ │ └── angular.svg │ └── fonts │ │ ├── Graphik-Bold.ttf │ │ ├── AdelleSans-Bold.ttf │ │ ├── Graphik-Regular.ttf │ │ ├── AdelleSans-Regular.ttf │ │ ├── AdelleSans-SemiBold.ttf │ │ ├── Graphik-BoldItalic.ttf │ │ └── Graphik-MediumItalic.ttf ├── app │ ├── feature │ │ ├── reactive │ │ │ ├── reactive.component.css │ │ │ ├── reactive.component.ts │ │ │ └── reactive.component.html │ │ ├── home │ │ │ ├── home.component.html │ │ │ └── home.component.ts │ │ ├── components │ │ │ └── components.component.ts │ │ ├── theming │ │ │ └── theming.component.css │ │ ├── landing │ │ │ ├── landing.component.ts │ │ │ └── landing.component.scss │ │ ├── icon │ │ │ └── icon.component.ts │ │ └── get-started │ │ │ └── get-started.component.ts │ ├── components │ │ ├── tooltip │ │ │ ├── tooltip.component.ts │ │ │ └── tooltip.component.html │ │ ├── layout │ │ │ └── layout.component.scss │ │ ├── list │ │ │ ├── list.component.scss │ │ │ ├── list.component.html │ │ │ └── list.component.ts │ │ ├── button │ │ │ ├── button.component.scss │ │ │ ├── button.component.html │ │ │ └── button.component.ts │ │ ├── css-examples │ │ │ ├── css-examples.component.scss │ │ │ ├── css-examples.component.html │ │ │ └── css-examples.component.ts │ │ ├── table │ │ │ └── table.component.css │ │ ├── markdown │ │ │ ├── markdown.component.html │ │ │ └── markdown.component.ts │ │ └── card │ │ │ └── card.component.ts │ ├── component │ │ └── color-display │ │ │ ├── color-display.component.html │ │ │ ├── color-display.component.scss │ │ │ └── color-display.component.ts │ ├── utilities │ │ └── utilities.component.ts │ ├── app.component.scss │ ├── services │ │ └── copy-paste.service.ts │ └── variables │ │ └── variables.component.ts ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── tslint.json ├── tsconfig.app.json ├── tsconfig.spec.json ├── main.ts ├── browserslist ├── index.html ├── test.ts └── karma.conf.js ├── .vscode ├── settings.json └── launch.json ├── projects └── eamode │ └── eang │ ├── themes │ ├── material │ │ ├── input.css │ │ ├── icon │ │ │ ├── menu.svg │ │ │ ├── check.svg │ │ │ ├── chevrons-left.svg │ │ │ ├── chevrons-right.svg │ │ │ ├── bookmark.svg │ │ │ ├── filter.svg │ │ │ ├── bluetooth.svg │ │ │ ├── code.svg │ │ │ ├── terminal.svg │ │ │ ├── arrow-down.svg │ │ │ ├── arrow-left.svg │ │ │ ├── bell.svg │ │ │ ├── arrow-down-left.svg │ │ │ ├── arrow-down-right.svg │ │ │ ├── at-sign.svg │ │ │ ├── toggle-left.svg │ │ │ ├── toggle-right.svg │ │ │ ├── volume-1.svg │ │ │ ├── check-circle.svg │ │ │ ├── check-square.svg │ │ │ ├── bar-chart.svg │ │ │ ├── link-2.svg │ │ │ ├── paperclip.svg │ │ │ ├── plus-circle.svg │ │ │ ├── zoom-out.svg │ │ │ ├── alert-circle.svg │ │ │ ├── volume-2.svg │ │ │ ├── archive.svg │ │ │ ├── help-circle.svg │ │ │ ├── layers.svg │ │ │ ├── share.svg │ │ │ ├── upload.svg │ │ │ ├── arrow-down-circle.svg │ │ │ ├── arrow-left-circle.svg │ │ │ ├── link.svg │ │ │ ├── volume-x.svg │ │ │ ├── bell-off.svg │ │ │ ├── database.svg │ │ │ ├── download-cloud.svg │ │ │ ├── external-link.svg │ │ │ ├── wifi.svg │ │ │ ├── align-left.svg │ │ │ ├── align-right.svg │ │ │ ├── grid.svg │ │ │ ├── zoom-in.svg │ │ │ ├── align-center.svg │ │ │ ├── align-justify.svg │ │ │ ├── inbox.svg │ │ │ ├── refresh-cw.svg │ │ │ ├── calendar.svg │ │ │ ├── folder-plus.svg │ │ │ ├── printer.svg │ │ │ ├── alert-octagon.svg │ │ │ ├── alert-triangle.svg │ │ │ ├── crosshair.svg │ │ │ ├── trash-2.svg │ │ │ ├── x.svg │ │ │ ├── chevron-down-neg.svg │ │ │ ├── palette.svg │ │ │ ├── wifi-off.svg │ │ │ ├── chevron.svg │ │ │ ├── close.svg │ │ │ ├── chevron-down.svg │ │ │ ├── left-chevron.svg │ │ │ ├── right-chevron.svg │ │ │ ├── right-chevron-hover.svg │ │ │ ├── edit.svg │ │ │ ├── sign-in.svg │ │ │ ├── menu-close.svg │ │ │ ├── save.svg │ │ │ ├── vertical-menu.svg │ │ │ ├── vertical-menu-dark.svg │ │ │ ├── layout-icon.svg │ │ │ ├── download.svg │ │ │ ├── maximized-2.svg │ │ │ ├── minimized.svg │ │ │ ├── add-file.svg │ │ │ └── disconnected.svg │ │ ├── text-elements.css │ │ ├── themepicker.css │ │ ├── autocomplete.css │ │ ├── table.css │ │ ├── variables.css │ │ └── panel.css │ ├── all.css │ ├── mode │ │ ├── icon │ │ │ ├── menu.svg │ │ │ ├── check.svg │ │ │ ├── chevrons-left.svg │ │ │ ├── chevrons-right.svg │ │ │ ├── bookmark.svg │ │ │ ├── filter.svg │ │ │ ├── bluetooth.svg │ │ │ ├── power.svg │ │ │ ├── clock.svg │ │ │ ├── code.svg │ │ │ ├── arrow-left.svg │ │ │ ├── bell.svg │ │ │ ├── message-square.svg │ │ │ ├── terminal.svg │ │ │ ├── arrow-down.svg │ │ │ ├── arrow-down-left.svg │ │ │ ├── at-sign.svg │ │ │ ├── award.svg │ │ │ ├── arrow-down-right.svg │ │ │ ├── toggle-left.svg │ │ │ ├── toggle-right.svg │ │ │ ├── volume-1.svg │ │ │ ├── check-circle.svg │ │ │ ├── check-square.svg │ │ │ ├── bar-chart.svg │ │ │ ├── link-2.svg │ │ │ ├── paperclip.svg │ │ │ ├── plus-circle.svg │ │ │ ├── zoom-out.svg │ │ │ ├── alert-circle.svg │ │ │ ├── volume-2.svg │ │ │ ├── layers.svg │ │ │ ├── share.svg │ │ │ ├── upload.svg │ │ │ ├── archive.svg │ │ │ ├── arrow-down-circle.svg │ │ │ ├── arrow-left-circle.svg │ │ │ ├── help-circle.svg │ │ │ ├── link.svg │ │ │ ├── color.svg │ │ │ ├── database.svg │ │ │ ├── volume-x.svg │ │ │ ├── bell-off.svg │ │ │ ├── download-cloud.svg │ │ │ ├── external-link.svg │ │ │ ├── wifi.svg │ │ │ ├── align-left.svg │ │ │ ├── users.svg │ │ │ ├── zoom-in.svg │ │ │ ├── align-center.svg │ │ │ ├── align-justify.svg │ │ │ ├── align-right.svg │ │ │ ├── grid.svg │ │ │ ├── inbox.svg │ │ │ ├── refresh-cw.svg │ │ │ ├── folder-plus.svg │ │ │ ├── printer.svg │ │ │ ├── calendar.svg │ │ │ ├── alert-octagon.svg │ │ │ ├── alert-triangle.svg │ │ │ ├── crosshair.svg │ │ │ ├── trash-2.svg │ │ │ ├── gift.svg │ │ │ ├── x.svg │ │ │ ├── chevron-down-neg.svg │ │ │ ├── palette.svg │ │ │ ├── pallete.svg │ │ │ ├── wifi-off.svg │ │ │ ├── loader.svg │ │ │ ├── chevron.svg │ │ │ ├── close.svg │ │ │ ├── chevron-down.svg │ │ │ ├── tabs-icon.svg │ │ │ ├── up-chevron.svg │ │ │ ├── left-chevron.svg │ │ │ ├── right-chevron.svg │ │ │ ├── right-chevron-hover.svg │ │ │ ├── activity.svg │ │ │ ├── edit.svg │ │ │ ├── button.svg │ │ │ ├── sign-in.svg │ │ │ ├── menu-close.svg │ │ │ ├── save.svg │ │ │ ├── vertical-menu.svg │ │ │ ├── vertical-menu-dark.svg │ │ │ ├── adjustment.svg │ │ │ ├── layout-icon.svg │ │ │ ├── tab.svg │ │ │ ├── download.svg │ │ │ ├── maximized-2.svg │ │ │ ├── minimized.svg │ │ │ ├── add-file.svg │ │ │ ├── disconnected.svg │ │ │ └── patient.svg │ │ ├── list.css │ │ ├── tooltip.css │ │ ├── themepicker.css │ │ ├── table.css │ │ ├── panel.css │ │ └── utilities.css │ ├── _base.css │ ├── fluent │ │ ├── icon │ │ │ └── palette.svg │ │ ├── variables.css │ │ └── button.css │ ├── fluentdark.css │ └── material.css │ ├── tsconfig.lib.prod.json │ ├── tslint.json │ ├── tsconfig.spec.json │ ├── src │ ├── components │ │ ├── main.ts │ │ ├── footer.ts │ │ ├── body.ts │ │ ├── toolbar.ts │ │ ├── drawer.ts │ │ └── themepicker.ts │ ├── modules │ │ ├── menu.module.ts │ │ ├── panel.module.ts │ │ ├── markdown.module.ts │ │ ├── themepicker.module.ts │ │ ├── autocomplete.module.ts │ │ ├── tabs.module.ts │ │ └── layout.module.ts │ ├── public_api.ts │ ├── core.ts │ ├── test.ts │ └── services │ │ └── logging.service.ts │ ├── ng-package.json │ ├── package.json │ ├── tsconfig.lib.json │ └── karma.conf.js ├── .gitattributes ├── e2e ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── tsconfig.e2e.json └── protractor.conf.js ├── stylelint.config.js ├── .editorconfig ├── .travis.yml ├── postcss.config.js ├── tsconfig.json └── .gitignore /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/input.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/feature/reactive/reactive.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | package*.json text eol=lf 3 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/images/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/images/figma.png -------------------------------------------------------------------------------- /src/assets/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/images/github.png -------------------------------------------------------------------------------- /src/assets/images/card-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/images/card-bg.jpg -------------------------------------------------------------------------------- /projects/eamode/eang/themes/all.css: -------------------------------------------------------------------------------- 1 | @import 'mode.css'; 2 | @import 'material.css'; 3 | @import 'fluentdark.css'; 4 | -------------------------------------------------------------------------------- /src/assets/fonts/Graphik-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/fonts/Graphik-Bold.ttf -------------------------------------------------------------------------------- /src/assets/images/rxjs-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/images/rxjs-white.png -------------------------------------------------------------------------------- /src/assets/fonts/AdelleSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/fonts/AdelleSans-Bold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Graphik-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/fonts/Graphik-Regular.ttf -------------------------------------------------------------------------------- /src/assets/images/Rx_Logo-512-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/images/Rx_Logo-512-512.png -------------------------------------------------------------------------------- /src/assets/fonts/AdelleSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/fonts/AdelleSans-Regular.ttf -------------------------------------------------------------------------------- /src/assets/fonts/AdelleSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/fonts/AdelleSans-SemiBold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Graphik-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/fonts/Graphik-BoldItalic.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Graphik-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/fonts/Graphik-MediumItalic.ttf -------------------------------------------------------------------------------- /src/assets/images/flickr-14202459710.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAmode/eang_old/HEAD/src/assets/images/flickr-14202459710.jpg -------------------------------------------------------------------------------- /projects/eamode/eang/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "angularCompilerOptions": { 4 | "enableIvy": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "eangio", "camelCase"], 5 | "component-selector": [true, "element", "eangio", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/eamode/eang/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "ea", "camelCase"], 5 | "component-selector": [true, "element", "ea", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": ["main.ts", "polyfills.ts"], 8 | "include": ["src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /src/app/feature/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/feature/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-home', 5 | templateUrl: './home.component.html', 6 | styles: [] 7 | }) 8 | export class HomeComponent { 9 | constructor() {} 10 | } 11 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor' 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/') 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('eangio-root h1')).getText() 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["test.ts", "polyfills.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /src/app/components/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-tooltip', 5 | templateUrl: './tooltip.component.html', 6 | styles: [] 7 | }) 8 | export class TooltipComponent { 9 | constructor() {} 10 | } 11 | -------------------------------------------------------------------------------- /projects/eamode/eang/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/feature/components/components.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-components', 5 | templateUrl: './components.component.html', 6 | styles: [] 7 | }) 8 | export class ComponentsComponent { 9 | constructor() {} 10 | } 11 | -------------------------------------------------------------------------------- /src/assets/images/layout-component.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: 'stylelint-config-recommended', 3 | rules: { 4 | 'selector-nested-pattern': '(&|>)', 5 | 'selector-type-no-unknown': [ 6 | true, 7 | { 8 | ignoreTypes: ['/^ea-/', '/^eangio-/'] 9 | } 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/_base.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --ea-sizer: 1; 3 | --ea-spacer: 1; 4 | font-size: 16px; 5 | box-sizing: border-box; 6 | } 7 | 8 | *, 9 | *:before, 10 | *:after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | -webkit-overflow-scrolling: touch; 17 | } 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://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 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: 3 | directories: 4 | - ~/.npm 5 | notifications: 6 | email: false 7 | node_js: 8 | - '10' 9 | script: 10 | - npm run build 11 | after_success: 12 | - npm run travis-deploy-once "npm run semantic-release" 13 | branches: 14 | except: 15 | - /^v\d+\.\d+\.\d+$/ 16 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/chevrons-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/chevrons-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/chevrons-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/chevrons-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/component/color-display/color-display.component.html: -------------------------------------------------------------------------------- 1 |
2 |
7 |
8 |

{{ color }}

9 |

{{ colorValue }}

10 |
11 |
12 | -------------------------------------------------------------------------------- /src/app/components/layout/layout.component.scss: -------------------------------------------------------------------------------- 1 | .ea-card-content { 2 | justify-content: space-evenly; 3 | } 4 | 5 | #example1 { 6 | --ea-sizer: 0.6; 7 | --ea-footer-background: red; 8 | height: 100%; 9 | } 10 | 11 | #example2 { 12 | --ea-sizer: 0.6; 13 | --ea-footer-background: red; 14 | height: 100%; 15 | } 16 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/components/main.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'ea-main', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ` 7 | 8 | ` 9 | }) 10 | export class Main { 11 | constructor() {} 12 | } 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/component/color-display/color-display.component.scss: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | font-size: 1em; 4 | font-weight: 400; 5 | text-align: center; 6 | } 7 | .example-color { 8 | height: 6em; 9 | width: 6em; 10 | border-radius: 50%; 11 | border: solid black; 12 | } 13 | .ea-card-footer { 14 | margin-top: 0.7em; 15 | } 16 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/components/footer.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'ea-footer', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ` 7 | 8 | ` 9 | }) 10 | export class Footer { 11 | constructor() {} 12 | } 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/bluetooth.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/power.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/bluetooth.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/clock.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/code.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/code.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/terminal.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/bell.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/message-square.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/terminal.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/images/tabs-component.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/bell.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = ctx => ({ 2 | map: ctx.options.map, 3 | plugins: [ 4 | require('postcss-import')(), 5 | require('postcss-mixins')(), 6 | require('postcss-nested')(), 7 | require('postcss-assets')({ 8 | basePath: 'projects/eamode/eang/themes', 9 | relative: 'projects/eamode/eang/themes' 10 | }) 11 | ] 12 | }) 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/arrow-down-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/at-sign.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/award.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/components/list/list.component.scss: -------------------------------------------------------------------------------- 1 | ea-markdown, 2 | div[role_list_example] { 3 | margin: 1.5em; 4 | } 5 | 6 | #customized { 7 | --ea-list-max-height: 15em; 8 | --ea-list-background-color: #d4d6c8; 9 | & li:hover { 10 | background-color: #52524e; 11 | } 12 | 13 | & li:hover:not(:active) { 14 | background-color: #9a9b94; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/arrow-down-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/arrow-down-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/at-sign.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/arrow-down-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/toggle-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/toggle-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/volume-1.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/components/button/button.component.scss: -------------------------------------------------------------------------------- 1 | #customized { 2 | --ea-button-border-radius: 1rem; 3 | & button.ea-button[success] { 4 | --ea-button-background: var(--ea-color-success); 5 | --ea-button-border: 0.1em solid var(--ea-color-success-dark); 6 | &:hover { 7 | --ea-button-background: var(--ea-color-success-dark); 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po' 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage 5 | 6 | beforeEach(() => { 7 | page = new AppPage() 8 | }) 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo() 12 | expect(page.getParagraphText()).toEqual('Welcome to eang-io!') 13 | }) 14 | }) 15 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/toggle-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/toggle-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/volume-1.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/modules/menu.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core' 2 | import { CommonModule } from '@angular/common' 3 | import { MenuComponent } from '../components/menu' 4 | export * from '../components/menu' 5 | 6 | @NgModule({ 7 | declarations: [MenuComponent], 8 | exports: [MenuComponent], 9 | imports: [CommonModule] 10 | }) 11 | export class MenuModule {} 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/check-square.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/check-square.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/bar-chart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/link-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/paperclip.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/plus-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/images/colors.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/modules/panel.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core' 2 | import { CommonModule } from '@angular/common' 3 | import { PanelComponent } from '../components/panel' 4 | export * from '../components/panel' 5 | 6 | @NgModule({ 7 | declarations: [PanelComponent], 8 | exports: [PanelComponent], 9 | imports: [CommonModule] 10 | }) 11 | export class PanelModule {} 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/bar-chart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/link-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/paperclip.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/plus-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/alert-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/volume-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/components/body.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'ea-body', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ` 7 | 8 | 9 | ` 10 | }) 11 | export class Body { 12 | constructor() {} 13 | } 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/alert-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/volume-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/layers.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/share.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/archive.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/help-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/layers.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/share.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/archive.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/arrow-down-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/arrow-left-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/help-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/link.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/images/button-component.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/arrow-down-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/arrow-left-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/link.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/volume-x.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/color.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/database.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/volume-x.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/modules/markdown.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core' 2 | import { CommonModule } from '@angular/common' 3 | import { MarkdownComponent } from '../components/markdown' 4 | export * from '../components/markdown' 5 | 6 | @NgModule({ 7 | declarations: [MarkdownComponent], 8 | exports: [MarkdownComponent], 9 | imports: [CommonModule] 10 | }) 11 | export class MarkdownModule {} 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/bell-off.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/database.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/bell-off.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/components/css-examples/css-examples.component.scss: -------------------------------------------------------------------------------- 1 | .my-banner { 2 | --ea-color: white; 3 | display: flex; 4 | width: 100%; 5 | align-items: center; 6 | justify-content: space-between; 7 | background: var(--ea-color-1); 8 | padding: calc(var(--ea-spacer) * 2.1em) calc(var(--ea-spacer) * 2em); 9 | margin-bottom: calc(var(--ea-spacer) * 1.5em); 10 | font-weight: calc(var(--ea-sizer) * 800); 11 | } 12 | -------------------------------------------------------------------------------- /src/app/feature/theming/theming.component.css: -------------------------------------------------------------------------------- 1 | #input-examples { 2 | padding: 1em; 3 | } 4 | 5 | label li { 6 | list-style:none; 7 | } 8 | 9 | .copy-markdown-box { 10 | box-shadow: var(--ea-box-shadow); 11 | box-shadow: 0 calc(var(--ea-sizer) * 0.3em) calc(var(--ea-sizer) * 0.4em) rgba(0, 0, 0, 0.25) 12 | } 13 | 14 | .copy-markdown-box-icon-margin { 15 | margin: calc(var(--ea-spacer) * 0.03em); 16 | } -------------------------------------------------------------------------------- /projects/eamode/eang/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export * from './core' 2 | export * from './modules/autocomplete.module' 3 | export * from './modules/layout.module' 4 | export * from './modules/markdown.module' 5 | export * from './modules/panel.module' 6 | export * from './modules/menu.module' 7 | export * from './modules/tabs.module' 8 | export * from './modules/themepicker.module' 9 | 10 | export * from './services/logging.service' 11 | -------------------------------------------------------------------------------- /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() 12 | .bootstrapModule(AppModule) 13 | .catch(err => console.log(err)) 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/download-cloud.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/external-link.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/wifi.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/eamode/eang", 4 | "whitelistedNonPeerDependencies": ["."], 5 | "deleteDestPath": false, 6 | "lib": { 7 | "entryFile": "src/public_api.ts", 8 | "umdModuleIds": { 9 | "markdown-it": "MarkdownIt", 10 | "prismjs": "Prism", 11 | "lodash": "_" 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/modules/themepicker.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core' 2 | import { CommonModule } from '@angular/common' 3 | import { ThemePickerComponent } from '../components/themepicker' 4 | export * from '../components/themepicker' 5 | 6 | @NgModule({ 7 | declarations: [ThemePickerComponent], 8 | exports: [ThemePickerComponent], 9 | imports: [CommonModule] 10 | }) 11 | export class ThemePickerModule {} 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/download-cloud.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/external-link.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/wifi.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/users.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/zoom-in.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/images/list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/align-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/zoom-in.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/align-center.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/align-justify.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/align-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/inbox.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/refresh-cw.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/images/exclamation-mark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/align-center.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/align-justify.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/inbox.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/refresh-cw.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/folder-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/printer.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/folder-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/printer.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/core.ts: -------------------------------------------------------------------------------- 1 | export interface EangElement { 2 | id?: any 3 | name: string 4 | readonly?: boolean 5 | icon?: string 6 | iconStyle?: string 7 | horizontal?: boolean 8 | closeable?: boolean 9 | isHidden?: boolean 10 | isActive?: boolean 11 | isOpen?: boolean 12 | toggleRight?: boolean 13 | hasChildren?: boolean 14 | parent?: EangElement 15 | dropdown?: boolean 16 | children?: EangElement[] 17 | data?: any 18 | } 19 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/alert-octagon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/alert-octagon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/alert-triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/alert-triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/crosshair.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/crosshair.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/trash-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | eang - Angular Enterprise Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/trash-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/components/table/table.component.css: -------------------------------------------------------------------------------- 1 | .markdown-table-wrapper { 2 | flex-direction: row; 3 | justify-content: space-around; 4 | display: flex; 5 | } 6 | 7 | .markdown-table-wrapper > div { 8 | flex-basis: 48%; 9 | margin: auto; 10 | } 11 | 12 | .table-right-position { 13 | padding: inherit; 14 | margin: auto; 15 | } 16 | 17 | .table-styling-header { 18 | margin: 1em; 19 | } 20 | 21 | .h2-table-caption { 22 | margin-top: 1em; 23 | } 24 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/components/toolbar.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'ea-toolbar', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | template: ` 7 | 8 | 9 | 10 | 11 | `, 12 | styles: [] 13 | }) 14 | export class Toolbar { 15 | constructor() {} 16 | } 17 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/gift.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/modules/autocomplete.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core' 2 | import { CommonModule } from '@angular/common' 3 | import { AutocompleteComponent } from '../components/autocomplete' 4 | import { ReactiveFormsModule } from '@angular/forms' 5 | export * from '../components/autocomplete' 6 | 7 | @NgModule({ 8 | declarations: [AutocompleteComponent], 9 | exports: [AutocompleteComponent], 10 | imports: [CommonModule, ReactiveFormsModule] 11 | }) 12 | export class AutoCompleteModule {} 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/table.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/chevron-down-neg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/chevron-down-neg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:4204", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/components/drawer.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | Input, 4 | ChangeDetectionStrategy, 5 | HostBinding 6 | } from '@angular/core' 7 | 8 | @Component({ 9 | selector: 'ea-drawer', 10 | changeDetection: ChangeDetectionStrategy.OnPush, 11 | template: ` 12 | 13 | 14 | 15 | `, 16 | styles: [] 17 | }) 18 | export class Drawer { 19 | @HostBinding('attr.state') 20 | @Input() 21 | state: string 22 | 23 | constructor() {} 24 | } 25 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/palette.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/palette.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/app/utilities/utilities.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-utilities', 5 | templateUrl: './utilities.component.html', 6 | styles: [] 7 | }) 8 | export class UtilitiesComponent { 9 | center = ` 10 | ~~~html 11 |
12 |
13 | ~~~ 14 | ` 15 | 16 | multi_col = ` 17 | ~~~html 18 |
19 |
testing
20 |
testing
21 |
22 | ~~~ 23 | ` 24 | constructor() {} 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/images/card-component.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/pallete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/app/components/tooltip/tooltip.component.html: -------------------------------------------------------------------------------- 1 | 4 |
5 |

Tooltips

6 |
7 |
8 | 9 | 10 | 11 |
12 |
13 | 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/fluent/icon/palette.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/pallete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/wifi-off.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/wifi-off.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/images/icon-component.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/components/css-examples/css-examples.component.html: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |

Banner

8 |
9 | 13 |
14 | 15 |
16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "exclude": ["dist"], 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "sourceMap": true, 8 | "declaration": false, 9 | "module": "esnext", 10 | "moduleResolution": "node", 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "target": "es5", 14 | "typeRoots": ["node_modules/@types"], 15 | "lib": ["es2017", "dom"], 16 | "paths": { 17 | "@eamode/eang": ["projects/eamode/eang/src/public_api"], 18 | "@eamode/eang/*": ["dist/eamode/eang/*"] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/loader.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/eamode/eang/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@eamode/eang", 3 | "version": "3.2.3", 4 | "description": "eang - reactive angular framework", 5 | "author": "Sebastian Kropp", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/EAmode/eang.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/EAmode/eang/issues" 12 | }, 13 | "license": "MIT", 14 | "peerDependencies": { 15 | "@angular/common": ">= 6", 16 | "@angular/core": ">= 6", 17 | "rxjs": ">= 6" 18 | }, 19 | "dependencies": { 20 | "markdown-it": "^8.4.2", 21 | "prismjs": "^1.15.0", 22 | "@angular/cdk": "^7.0.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | ea-footer { 2 | & span { 3 | display: flex; 4 | align-items: center; 5 | & p { 6 | margin: 0; 7 | margin-right: 0.5em; 8 | } 9 | & a { 10 | margin-right: 0.5em; 11 | @media only screen and (max-width: 625px) { 12 | margin-bottom: 0.5em; 13 | } 14 | } 15 | } 16 | } 17 | 18 | ea-toolbar { 19 | 20 | & header { 21 | height: 100%; 22 | & .logo { 23 | height: 100%; 24 | width:100%; 25 | display: flex; 26 | padding: 0.375em 0; 27 | 28 | } 29 | } 30 | } 31 | 32 | ea-drawer { 33 | --ea-drawer-background: hsl(0, 0%, 20%); 34 | } 35 | 36 | -------------------------------------------------------------------------------- /.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 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.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 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /src/assets/images/activity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/images/tabs-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/tabs-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/up-chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/left-chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/left-chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/right-chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/right-chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/right-chevron-hover.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/right-chevron-hover.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/activity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /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/zone-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: any 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ) 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/) 19 | // And load the modules. 20 | context.keys().map(context) 21 | -------------------------------------------------------------------------------- /src/assets/images/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/feature/landing/landing.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | import { BehaviorSubject, timer } from 'rxjs' 3 | import { map, share } from 'rxjs/operators' 4 | @Component({ 5 | selector: 'eangio-landing', 6 | templateUrl: './landing.component.html', 7 | styleUrls: ['./landing.component.scss'] 8 | }) 9 | export class LandingComponent { 10 | panelState = new BehaviorSubject('maximized') 11 | orientations = ['top', 'right', 'bottom', 'left'] 12 | panelOrientation = timer(0, 1500).pipe( 13 | map(i => this.orientations[i % this.orientations.length]), 14 | share() 15 | ) 16 | constructor() {} 17 | 18 | onChange(evt): void { 19 | this.panelState.next(evt.value) 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` 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/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/sign-in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/sign-in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/images/github-circle-white-transparent.svg: -------------------------------------------------------------------------------- 1 | github-circle-white-transparent -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/menu-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/fluentdark.css: -------------------------------------------------------------------------------- 1 | @import '_base.css'; 2 | 3 | @import 'fluent/variables.css'; 4 | @import 'mode/fonts.css'; 5 | @import 'mode/markdown.css'; 6 | @import 'mode/autocomplete.css'; 7 | @import 'mode/panel.css'; 8 | @import 'mode/themepicker.css'; 9 | @import 'mode/card.css'; 10 | @import 'mode/icons.css'; 11 | @import 'mode/layout.css'; 12 | @import 'mode/table.css'; 13 | @import 'mode/menu.css'; 14 | @import 'mode/button.css'; 15 | @import 'fluent/button.css'; 16 | 17 | .fluent { 18 | @mixin autocomplete-mode; 19 | @mixin button-mode; 20 | @mixin button-fluent; 21 | @mixin card-mode; 22 | @mixin layout-mode; 23 | @mixin markdown-mode; 24 | @mixin panel-mode; 25 | @mixin themepicker; 26 | @mixin table-mode; 27 | @mixin menu; 28 | } 29 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/menu-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/component/color-display/color-display.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, ElementRef } from '@angular/core' 2 | 3 | @Component({ 4 | // changeDetection: ChangeDetectionStrategy.OnPush, 5 | selector: 'eangio-color-display', 6 | templateUrl: './color-display.component.html', 7 | styleUrls: ['./color-display.component.scss'] 8 | }) 9 | export class ColorDisplayComponent implements OnInit { 10 | @Input() color: string 11 | colorValue: string 12 | 13 | constructor(public element: ElementRef) {} 14 | 15 | ngOnInit() { 16 | this.colorValue = getComputedStyle( 17 | this.element.nativeElement 18 | ).getPropertyValue(this.color) 19 | } 20 | 21 | changeBackground(): any { 22 | return { background: `var(${this.color})` } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/eamode/eang/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": ["dom", "es2015"] 16 | }, 17 | "angularCompilerOptions": { 18 | "skipTemplateCodegen": true, 19 | "strictMetadataEmit": true, 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true, 22 | "enableResourceInlining": true 23 | }, 24 | "exclude": ["src/test.ts", "**/*.spec.ts"] 25 | } 26 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect' 4 | import 'zone.js/dist/zone' 5 | import 'zone.js/dist/zone-testing' 6 | import { getTestBed } from '@angular/core/testing' 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing' 11 | 12 | declare const require: any 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ) 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/) 21 | // And load the modules. 22 | context.keys().map(context) 23 | -------------------------------------------------------------------------------- /src/assets/images/layout-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/modules/tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core' 2 | import { CommonModule } from '@angular/common' 3 | 4 | import { 5 | TabListComponent, 6 | TabpanelComponent, 7 | TabpanelGroupComponent, 8 | TabComponent, 9 | TabsComponent 10 | } from '../components/tabs' 11 | import { MenuModule } from './menu.module' 12 | 13 | export * from '../components/tabs' 14 | 15 | @NgModule({ 16 | declarations: [ 17 | TabListComponent, 18 | TabpanelComponent, 19 | TabpanelGroupComponent, 20 | TabComponent, 21 | TabsComponent 22 | ], 23 | exports: [ 24 | TabListComponent, 25 | TabpanelComponent, 26 | TabpanelGroupComponent, 27 | TabComponent, 28 | TabsComponent 29 | ], 30 | imports: [CommonModule, MenuModule] 31 | }) 32 | export class TabsModule {} 33 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/vertical-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/vertical-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/vertical-menu-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/vertical-menu-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/layout-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/adjustment.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 8 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/layout-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/images/material/layout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/images/button-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /e2e/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 | './src/**/*.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: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/maximized-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/minimized.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/maximized-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/minimized.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/feature/icon/icon.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-icon', 5 | templateUrl: './icon.component.html', 6 | styles: [] 7 | }) 8 | export class IconComponent { 9 | constructor() {} 10 | 11 | icon = ` 12 | ~~~html 13 | 14 | 15 | ~~~ 16 | ` 17 | 18 | iconset = [ 19 | { 20 | name: 'x', 21 | title: 'close', 22 | className: 'ea-' 23 | }, 24 | , 25 | { 26 | name: 'chevron', 27 | title: 'close', 28 | className: 'ea-' 29 | }, 30 | , 31 | { 32 | name: 'x', 33 | title: 'close', 34 | className: 'ea-' 35 | }, 36 | , 37 | { 38 | name: 'x', 39 | title: 'close', 40 | className: 'ea-' 41 | }, 42 | , 43 | { 44 | name: 'x', 45 | title: 'close' 46 | } 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/images/markdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/modules/layout.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core' 2 | import { CommonModule } from '@angular/common' 3 | 4 | import { LayoutComponent } from '../components/layout' 5 | import { Toolbar } from '../components/toolbar' 6 | import { Body } from '../components/body' 7 | import { Drawer } from '../components/drawer' 8 | import { Footer } from '../components/footer' 9 | import { Main } from '../components/main' 10 | 11 | export * from '../components/layout' 12 | export * from '../components/toolbar' 13 | export * from '../components/body' 14 | export * from '../components/drawer' 15 | export * from '../components/footer' 16 | export * from '../components/main' 17 | 18 | @NgModule({ 19 | declarations: [LayoutComponent, Toolbar, Main, Drawer, Footer, Body], 20 | exports: [LayoutComponent, Toolbar, Main, Drawer, Footer, Body], 21 | imports: [CommonModule] 22 | }) 23 | export class LayoutModule {} 24 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material.css: -------------------------------------------------------------------------------- 1 | @import '_base.css'; 2 | 3 | @import 'material/autocomplete.css'; 4 | @import 'material/text-elements.css'; 5 | @import 'material/layout.css'; 6 | @import 'material/variables.css'; 7 | @import 'material/markdown.css'; 8 | @import 'material/icons.css'; 9 | @import 'material/card.css'; 10 | 11 | @import 'mode/menu.css'; 12 | @import 'mode/tabs.css'; 13 | @import 'mode/fonts.css'; 14 | @import 'mode/panel.css'; 15 | @import 'mode/themepicker.css'; 16 | @import 'mode/table.css'; 17 | @import 'mode/button.css'; 18 | @import 'mode/utilities.css'; 19 | 20 | .material { 21 | @mixin autocomplete-material; 22 | @mixin layout-material; 23 | @mixin menu; 24 | @mixin markdown-material; 25 | @mixin button-mode; 26 | @mixin card-material; 27 | @mixin panel-mode; 28 | @mixin themepicker; 29 | @mixin table-mode; 30 | @mixin tabs; 31 | @mixin utilities; 32 | @mixin icon-material; 33 | } 34 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/add-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/add-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/text-elements.css: -------------------------------------------------------------------------------- 1 | @define-mixin typography { 2 | & h1 { 3 | font-size: 2.6rem; 4 | font-weight: 500; 5 | margin-bottom: 0.6em; 6 | font-family: var(--ea-font-1); 7 | } 8 | & h2 { 9 | font-size: 1.8rem; /* min-size, max-size */ 10 | font-weight: 500; 11 | margin-bottom: 0.4em; 12 | } 13 | & h3 { 14 | font-size: 1.8rem; 15 | font-weight: 500; 16 | margin: 0.2rem 0 0.1rem 0; 17 | } 18 | & h4 { 19 | font-size: 1.2rem; 20 | } 21 | & h5 { 22 | font-size: 1.1rem; 23 | } 24 | & p { 25 | font-size: 1.25rem; /* min-size, max-size */ 26 | line-height: 1.8rem; 27 | } 28 | & p::selection { 29 | background: var(--ea-color-accent-2); 30 | color: white; 31 | } 32 | & a { 33 | font-size: 1.25rem; 34 | color: var(--ea-color-2); 35 | text-decoration: underline; 36 | &:hover { 37 | color: var(--ea-background-hover); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/themepicker.css: -------------------------------------------------------------------------------- 1 | .material { 2 | & ea-themepicker { 3 | cursor: pointer; 4 | & .ea-themepicker-dropdown { 5 | position: absolute; 6 | } 7 | & .ea-themepicker-dropdown-list { 8 | position: relative; 9 | display: inline-block; 10 | list-style-type: none; 11 | padding: 0; 12 | margin: 0; 13 | } 14 | & .ea-themepicker-list-item { 15 | color: black; 16 | text-emphasis: none; 17 | text-decoration: none; 18 | position: relative; 19 | background-color: #f9f9f9; 20 | min-width: 60px; 21 | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 22 | z-index: 1; 23 | padding: 5px; 24 | height: 30px; 25 | text-align: center; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | } 30 | & .ea-themepicker-list-item:hover { 31 | background-color: #f1f1f1; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/services/copy-paste.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core' 2 | import { MarkdownComponent } from '@eamode/eang' 3 | import { BehaviorSubject, timer } from 'rxjs' 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class CopyPasteService { 9 | public showSuccessfullyCopied = new BehaviorSubject(false) 10 | 11 | constructor() {} 12 | 13 | copyCode(code) { 14 | this.showSuccessfullyCopied.next(true) 15 | timer(2000).subscribe(() => { 16 | this.showSuccessfullyCopied.next(false) 17 | }) 18 | 19 | const el = document.createElement('textarea') 20 | code = code.replace('~~~html', '') 21 | code = code.replace('~~~css', '') 22 | code = code.replace('~~~scss', '') 23 | code = code.replace('~~~ts', '') 24 | code = code.replace('~~~', '') 25 | el.value = code 26 | document.body.appendChild(el) 27 | el.select() 28 | document.execCommand('copy') 29 | document.body.removeChild(el) 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/assets/images/material/button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/list.css: -------------------------------------------------------------------------------- 1 | @define-mixin list-mode { 2 | ul, 3 | ol { 4 | &.ea-list { 5 | width: 100%; 6 | background-color: var(--ea-list-background-color, --ea-color-3); 7 | box-shadow: inset 0px 3px 12px rgba(0, 0, 0, 0.08); 8 | color: var(--ea-text-color); 9 | overflow-y: auto; 10 | list-style: none; 11 | padding: 0; 12 | display: inline-block; 13 | & li { 14 | border: calc(var(--ea-spacer) * 0.02em) solid rgba(0, 0, 0, 0); 15 | cursor: pointer; 16 | margin: calc(var(--ea-spacer) * 0.07em); 17 | padding: calc(var(--ea-spacer) * 0.6em); 18 | } 19 | & li:active { 20 | background: var(--ea-background-color-active); 21 | color: var(--ea-color-3); 22 | } 23 | 24 | & li:hover:not(:active) { 25 | background: var(--ea-background-color-hover); 26 | box-shadow: none; 27 | border: calc(var(--ea-sizer) * 0.02em) transparent solid; 28 | color: var(--ea-color-3); 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/disconnected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/tooltip.css: -------------------------------------------------------------------------------- 1 | @define-mixin tooltip { 2 | * > [aria-labelledby] { 3 | position: relative; 4 | } 5 | 6 | --ea-tooltip-color: var(--ea-color-3); 7 | --ea-tooltip-font-size: 1em; 8 | --ea-tooltip-background: rgba(0, 0, 0, 0.5); 9 | --ea-tooltip-string: attr(aria-label); 10 | 11 | & [aria-labelledby]:hover > [role='tooltip'], 12 | [aria-labelledby]:focus > [role='tooltip'] { 13 | &::after { 14 | position: absolute; 15 | bottom: var(--ea-tooltip-bottom, auto); 16 | top: var(--ea-tooltip-top, auto); 17 | left: var(--ea-tooltip-left, auto); 18 | right: var(--ea-tooltip-right, auto); 19 | content: var(--ea-tooltip-string); 20 | color: var(--ea-tooltip-color); 21 | font-size: var(--ea-tooltip-font-size); 22 | background: var(--ea-tooltip-background); 23 | display: flex; 24 | padding: calc(var(--ea-spacer) * 0.5em) calc(var(--ea-spacer) * 1em); 25 | border-radius: calc(var(--ea-sizer) * 0.25em); 26 | white-space: nowrap; 27 | min-width: 2em; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/icon/disconnected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/icon/patient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/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-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }) 31 | } 32 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/themepicker.css: -------------------------------------------------------------------------------- 1 | @define-mixin themepicker { 2 | & ea-themepicker { 3 | cursor: pointer; 4 | outline: none; 5 | & .ea-themepicker-dropdown { 6 | position: absolute; 7 | } 8 | & .ea-themepicker-dropdown-list { 9 | position: relative; 10 | display: inline-block; 11 | list-style-type: none; 12 | padding: 0; 13 | margin: 0; 14 | } 15 | & .ea-themepicker-list-item { 16 | color: black; 17 | text-emphasis: none; 18 | text-decoration: none; 19 | position: relative; 20 | background-color: var(--ea-color-3); 21 | min-width: calc(var(--ea-sizer) * 1em); 22 | box-shadow: 0.01em 1em 2em 0.1em rgba(0, 0, 0, 0.2); 23 | z-index: 1; 24 | padding: calc(var(--ea-spacer) * 0.3em); 25 | height: calc(var(--ea-spacer) * 1.75em); 26 | text-align: center; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | & .ea-themepicker-list-item:hover { 32 | background-color: var(--ea-color-3-dark); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /projects/eamode/eang/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-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }) 31 | } 32 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/autocomplete.css: -------------------------------------------------------------------------------- 1 | @define-mixin autocomplete-material { 2 | & ea-autocomplete { 3 | & ul { 4 | list-style: none; 5 | padding: 20; 6 | margin: 0; 7 | border-radius: 0; 8 | background: var(--ea-color-3); 9 | } 10 | & li { 11 | color: var(--ea-color2); 12 | height: 3rem; 13 | cursor: pointer; 14 | display: flex; 15 | align-items: center; 16 | padding: 0 1rem; 17 | } 18 | & li:hover, 19 | & li[selected] { 20 | background-color: var(--ea-color-background-2); 21 | & .matched { 22 | color: var(--ea-color-3); 23 | } 24 | & span { 25 | & mark { 26 | background-color: none; 27 | font-weight: 700; 28 | } 29 | } 30 | } 31 | & input { 32 | /* background: var(--ea-color-background-2); */ 33 | border: none; 34 | border-radius: 0; 35 | border-bottom: 1px solid var(--ea-color-accent-1); 36 | color: var(--ea-color-1); 37 | outline: none; 38 | padding-left: 1rem; 39 | box-shadow: none; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/app/components/button/button.component.html: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |

8 | Standard button examples. Add ea-button class to a 9 | <button>. 10 |

11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 |

Customized button examples.

22 |
23 | 24 | 25 |
26 | 27 |
28 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/table.css: -------------------------------------------------------------------------------- 1 | .material { 2 | table, 3 | th, 4 | td { 5 | border: none; 6 | } 7 | 8 | table { 9 | width: 100%; 10 | display: table; 11 | border-collapse: collapse; 12 | border-spacing: 0; 13 | } 14 | 15 | table.striped tr { 16 | border-bottom: none; 17 | } 18 | 19 | table.striped > tbody > tr:nth-child(odd) { 20 | background-color: rgba(242, 242, 242, 0.5); 21 | } 22 | 23 | table.striped > tbody > tr > td { 24 | border-radius: 0; 25 | } 26 | 27 | table.highlight > tbody > tr { 28 | -webkit-transition: background-color 0.25s ease; 29 | transition: background-color 0.25s ease; 30 | } 31 | 32 | table.highlight > tbody > tr:hover { 33 | background-color: rgba(242, 242, 242, 0.5); 34 | } 35 | 36 | table.centered thead tr th, 37 | table.centered tbody tr td { 38 | text-align: center; 39 | } 40 | 41 | tr { 42 | border-bottom: 1px solid rgba(0, 0, 0, 0.12); 43 | } 44 | 45 | td, 46 | th { 47 | padding: 15px 5px; 48 | display: table-cell; 49 | text-align: left; 50 | vertical-align: middle; 51 | border-radius: 2px; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/app/components/list/list.component.html: -------------------------------------------------------------------------------- 1 | 5 |
6 |
7 |

Default list

8 | 9 |
10 |
    11 |
  • Angular
    • 12 |
  • Express
    • 13 |
  • Polymer
    • 14 |
15 |
16 |
17 | 18 |

Customzied list

19 | 20 | 21 | 22 |
23 |
24 |
    25 |
  • Angular
    • 26 |
  • Express
    • 27 |
  • Polymer
    • 28 |
  • Aurelia
    • 29 |
  • Vue.js
    • 30 |
  • React
    • 31 |
  • Meteor
    • 32 |
  • Ember.js
    • 33 |
  • Riot.js
    • 34 |
35 |
36 |
37 | 38 |
39 | -------------------------------------------------------------------------------- /src/assets/images/material/reactive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/feature/landing/landing.component.scss: -------------------------------------------------------------------------------- 1 | .framework-description { 2 | font-size: calc(var(--ea-sizer) * 1rem); 3 | background-color: var(--ea-color-1); 4 | background-image: url('/assets/images/triangles.svg'); 5 | background-position: center; 6 | background-repeat: no-repeat; 7 | background-size: cover; 8 | position: relative; 9 | --ea-color: white; 10 | } 11 | 12 | .shim { 13 | background-image: linear-gradient( 14 | to bottom, 15 | rgba(66, 91, 154, 0.4), 16 | var(--ea-color-1) 17 | ); 18 | height: 101%; 19 | width: 100%; 20 | } 21 | .framework-description h1 { 22 | z-index: 1; 23 | } 24 | .framework-description .logo { 25 | height: 9em; 26 | width: 10em; 27 | z-index: 1; 28 | } 29 | .framework-description button { 30 | z-index: 1; 31 | } 32 | .framework-description h2, 33 | .framework-description p { 34 | text-align: center; 35 | z-index: 1; 36 | } 37 | .v-prop { 38 | --ea-grid-col-min-width: 15em; 39 | } 40 | footer { 41 | --ea-grid-col-min-width: 8.9em; 42 | } 43 | #why-eang { 44 | margin-top: 4.8em; 45 | div { 46 | margin: 0 1em; 47 | } 48 | } 49 | 50 | .symbol { 51 | font-size: calc(var(--ea-sizer) * 1rem); 52 | height: 3.5em; 53 | margin-bottom: 1em; 54 | } 55 | 56 | .symbol-lg { 57 | height: calc(var(--ea-sizer) * 8rem); 58 | margin-bottom: 1em; 59 | } 60 | -------------------------------------------------------------------------------- /src/assets/images/material/pallette.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Created with Sketch. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/components/list/list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-list', 5 | templateUrl: './list.component.html', 6 | styleUrls: ['./list.component.scss'] 7 | }) 8 | export class ListComponent { 9 | role_list = ` 10 | ~~~html 11 | 16 | ~~~ 17 | ` 18 | list_html = ` 19 | ~~~html 20 | 35 | 36 | 47 | ~~~ 48 | ` 49 | 50 | list_css = ` 51 | ~~~css 52 | #customized { 53 | --ea-list-max-height: 15em; 54 | // if not defined --ea-color-3 will be used 55 | --ea-list-background-color: #d4d6c8; 56 | 57 | & li:hover { 58 | background-color: #52524e; 59 | } 60 | 61 | & li:hover:not(:active) { 62 | background-color: #9a9b94; 63 | } 64 | } 65 | } 66 | ` 67 | constructor() {} 68 | } 69 | -------------------------------------------------------------------------------- /src/assets/images/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/fluent/variables.css: -------------------------------------------------------------------------------- 1 | .fluent { 2 | --ea-color-1: #757575; 3 | --ea-color-2: #000000; 4 | --ea-color-3: #ffffffd8; 5 | 6 | --ea-color-accent-1: #6a9c45; 7 | --ea-color-accent-2: #0078d4; 8 | 9 | --ea-color-background-1: #ffffff; 10 | --ea-color-background-2: #525252; 11 | --ea-color-background-3: #0078d4; 12 | --ea-color-background-4: #333333; 13 | --ea-color-background-5: #7c7c7c; 14 | --ea-color-background-6: #bdbdbd; 15 | --ea-color-background-7: #252525; 16 | 17 | --ea-color-success: #5bb95b; 18 | --ea-color-info: #5ac1de; 19 | --ea-color-warning: #f1ae4e; 20 | --ea-color-danger: #d9534f; 21 | --ea-color-error: #d9534f; 22 | --ea-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09); 23 | 24 | --ea-font-1-family: 'Open Sans'; 25 | --ea-font-1-style: normal; 26 | --ea-font-1-weight: 400; 27 | --ea-font-1-size: 16px; 28 | /* 29 | 12 / 16 = 0.75rem 30 | 14 / 16 = 0.875rem 31 | 16 / 16 = 1rem 32 | 18 / 16 = 1.125rem 33 | 20 / 16 = 1.25rem 34 | 24 / 16 = 1.5rem 35 | 30 / 16 = 1.875rem 36 | 36 / 16 = 2.25rem 37 | 48 / 16 = 3rem */ 38 | 39 | --panel-border-radius: 0.25rem; 40 | 41 | --min-font-size: 1rem; 42 | --max-font-size: 3rem; 43 | 44 | --ea-padding: 4rem; 45 | --ea-scale-factor: 0.5; 46 | --ea-toolbar-height: 4rem; 47 | 48 | font-family: var(--ea-font-1-family); 49 | font-style: var(--ea-font-1-style); 50 | font-weight: var(--ea-font-1-weight); 51 | /* font-size: var(--ea-font-1-size); */ 52 | } 53 | -------------------------------------------------------------------------------- /src/app/components/markdown/markdown.component.html: -------------------------------------------------------------------------------- 1 | 5 |
6 |

7 | ea-markdown allows you to render a Markdown from a string to 8 | HTML - input can be a string or an observable. 9 |

10 |
11 | 12 |
13 |
14 |

Result markdown view.

15 |
16 | 24 | 25 | 26 |
27 |
28 |
29 | 30 |
31 |
32 |
33 | 34 |

Using an observable and context

35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /src/app/components/css-examples/css-examples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-banner', 5 | templateUrl: './css-examples.component.html', 6 | styleUrls: ['./css-examples.component.scss'] 7 | }) 8 | export class CssExamplesComponent { 9 | banner_div = ` 10 | ~~~html 11 | 24 | 28 | ~~~ 29 | ` 30 | 31 | role_banner_table = ` 32 | | CSS Variables | Description | Default | 33 | |---|---|----| 34 | | \`--ea-banner-height\` | Sets the height of the banner | 6em | 35 | | \`--ea-banner-font-weight\` | Sets the weight of the banner font | 700 | 36 | | \`--ea-banner-font-size\` | Sets the font size of the main Banner text | 3em | 37 | | \`--ea-banner-background\` | Sets the background of the banner | var(--ea-color-1) | 38 | | \`--ea-banner-color\` | Sets the color of the banner font | var(--ea-color-3) | 39 | ` 40 | constructor() {} 41 | } 42 | -------------------------------------------------------------------------------- /src/app/feature/reactive/reactive.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | import { BehaviorSubject, timer } from 'rxjs' 3 | import { map, share } from 'rxjs/operators' 4 | 5 | @Component({ 6 | selector: 'eangio-feature-reactive', 7 | templateUrl: './reactive.component.html' 8 | }) 9 | export class ReactiveComponent { 10 | panelState = new BehaviorSubject('maximized') 11 | orientations = ['top', 'right', 'bottom', 'left'] 12 | panelOrientation = timer(0, 1500).pipe( 13 | map(i => this.orientations[i % this.orientations.length]), 14 | share() 15 | ) 16 | 17 | md = ` 18 | *reactive-panel.component.html* 19 | ~~~html 20 | 21 | panel ({{panelOrientation | async}}) 22 | 23 | ~~~ 24 | *reactive-panel.component.ts* 25 | ~~~ts 26 | import { Component } from '@angular/core' 27 | import { BehaviorSubject, timer } from 'rxjs' 28 | import { map, share } from 'rxjs/operators' 29 | @Component({ 30 | selector: 'reactive-panel', 31 | templateUrl: './reactive-panel.component.html' 32 | }) 33 | export class ReactivePanelComponent { 34 | panelState = new BehaviorSubject('maximized') 35 | orientations = ['top', 'right', 'bottom', 'left'] 36 | panelOrientation = timer(0, 1500).pipe( 37 | map(i => this.orientations[i % this.orientations.length]), 38 | share() 39 | ) 40 | onChange(evt): void { 41 | this.panelState.next(evt.value) 42 | } 43 | } 44 | ~~~ 45 | ` 46 | 47 | onChange(evt): void { 48 | this.panelState.next(evt.value) 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/app/variables/variables.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-variables', 5 | templateUrl: './variables.component.html', 6 | styles: [] 7 | }) 8 | export class VariablesComponent { 9 | constructor() {} 10 | 11 | isActive = false 12 | textIsActive = false 13 | 14 | variables = ` 15 | | Title | Custom Property | Description | hsl( ) | 16 | |---|---|---|---| 17 | | Base Color | \` --ea-color-1 \` | Main theme color for components | hsl(223, 40%,43%) | 18 | | Base Color High | \` --ea-color-1-light \` | 10% increase from --ea-color-1 in lightness for states|hsl(223, 40%, 53%)| 19 | | Alt Base Color | \` --ea-color-2 \` | Secondary color for components |hsl(0, 0%, 20%)| 20 | | Background Color Hover | \` --ea-background-color-hover \` |Background color for all hover state components|\`var(--ea-color-1)\`| 21 | |Background Color Active|\` --ea-background-color-active \`|Background color for all active state components|\`var(--ea-color-1-light)\`| 22 | ` 23 | 24 | text_variables = ` 25 | | Title | Custom Property | Description | rgba | 26 | |---|---|---|---| 27 | | Text Color Dark | \` --ea-text-color-2 \` |Light color text for the theme|hsl(0, 0%, 96%)| 28 | | Text Color Light | \`--ea-text-color-1 \` |Dark color text for the theme|hsl(0, 0%, 20%)| 29 | | Text Color Hover | \` --ea-text-color-hover \` |Text color for all hover state components| \`var(--ea-text-color-2)\` | 30 | | Text Color Active | \` --ea-text-color-active \` |Text color for all active state components| \` --ea-text-color-2\`| 31 | ` 32 | } 33 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/table.css: -------------------------------------------------------------------------------- 1 | @define-mixin table-default { 2 | font-size: calc(var(--ea-sizer) * 0.9em); 3 | border-collapse: collapse; 4 | border-spacing: 0; 5 | width: 100%; 6 | text-align: center; 7 | 8 | & [text-direction='left'] { 9 | text-align: start; 10 | } 11 | 12 | & [text-direction='right'] { 13 | text-align: end; 14 | } 15 | 16 | & caption { 17 | font-size: calc(var(--ea-sizer) * 0.9em); 18 | padding: calc(var(--ea-spacer) * 0.7em); 19 | caption-side: bottom; 20 | } 21 | 22 | & td, 23 | th { 24 | border-bottom: calc(var(--ea-sizer) * 0.1em) solid 25 | var(--ea-color-2, transparent); 26 | padding: calc(var(--ea-spacer) * 0.5em); 27 | } 28 | 29 | & thead { 30 | border-bottom: calc(var(--ea-sizer) * 0.2em) solid 31 | var(--ea-color-2, transparent); 32 | & th { 33 | color: var(--ea-text-color-1, var(--ea-color-2)); 34 | /* background-color: var(--ea-color-grey); */ 35 | border-color: var(--ea-color-2); 36 | text-align: center; 37 | } 38 | } 39 | 40 | & [striped] { 41 | & tr:nth-of-type(odd) { 42 | background-color: var(--ea-color-striped); 43 | } 44 | } 45 | 46 | /* Do not move [table hover] before [striped] */ 47 | & [table-hover] { 48 | & tr { 49 | &:hover { 50 | background-color: var(--ea-background-color-hover) !important; 51 | cursor: pointer; 52 | color: var(--ea-text-color-2); 53 | } 54 | } 55 | } 56 | 57 | & [selected='true'] { 58 | background-color: var(--ea-color-1-light) !important; 59 | } 60 | } 61 | 62 | @define-mixin table-mode { 63 | .ea-table { 64 | @mixin table-default; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/app/components/markdown/markdown.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core' 2 | import { interval } from 'rxjs' 3 | import { Content } from '@angular/compiler/src/render3/r3_ast' 4 | 5 | @Component({ 6 | selector: 'eangio-markdown', 7 | templateUrl: 'markdown.component.html', 8 | styles: [] 9 | }) 10 | export class MarkdownComponent implements OnInit { 11 | observableAndContext$ = interval(1000) 12 | menu: any 13 | editing: false 14 | test: any 15 | changesTab = { visible: false } 16 | 17 | constructor() {} 18 | 19 | ngOnInit() { 20 | this.test = this.content[0].body 21 | } 22 | 23 | closeNode() {} 24 | 25 | content: any = [ 26 | { 27 | name: 'Current', 28 | body: `# This is a title 29 | ## This is an h2 30 | `, 31 | showEditor: false 32 | } 33 | ] 34 | 35 | otherTabs = [ 36 | { name: 'other Tab 1', content: 'Content of Other tab 1', visible: true }, 37 | { name: 'other Tab 2', content: 'Content of Other tab 2', visible: true }, 38 | { name: 'other Tab 3', content: 'Content of Other tab 3', visible: true }, 39 | { name: 'other Tab 4', content: 'Content of Other tab 4', visible: true } 40 | ] 41 | toggleTab() { 42 | this.changesTab.visible = !this.changesTab.visible 43 | } 44 | 45 | addTab() { 46 | const newTab = { 47 | name: 'other New Tab', 48 | content: 'new content other', 49 | visible: true 50 | } 51 | this.otherTabs.push(newTab) 52 | console.log(this.otherTabs) 53 | } 54 | 55 | ea_menu = ` 56 | ~~~html 57 | 59 | 60 | ~~~ 61 | ` 62 | 63 | observableAndContext = ` 64 | ~~~ts 65 | doc$ = 66 | ~~~ 67 | ` 68 | } 69 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/services/logging.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Optional } from '@angular/core' 2 | 3 | export enum LogLevel { 4 | error = 0, 5 | warn = 1, 6 | info = 2, 7 | verbose = 3, 8 | debug = 4, 9 | silly = 5 10 | } 11 | 12 | export class LoggingConfig { 13 | logLevel: LogLevel 14 | } 15 | 16 | @Injectable() 17 | export class LoggingService { 18 | private _logLevel = LogLevel.silly 19 | 20 | constructor(@Optional() config?: LoggingConfig) { 21 | if (config) { 22 | this._logLevel = config.logLevel ? config.logLevel : LogLevel.silly 23 | } 24 | } 25 | private _format = (level, msg) => { 26 | return `[${LogLevel[level]}]: ${msg}` 27 | } 28 | 29 | error(message, ...params) { 30 | if (this._logLevel >= LogLevel.error) { 31 | console.error(this._format(LogLevel.error, message), ...params) 32 | } 33 | } 34 | 35 | warn(message, ...params) { 36 | if (this._logLevel >= LogLevel.warn) { 37 | console.log(this._format(LogLevel.warn, message), ...params) 38 | } 39 | } 40 | 41 | info(message, ...params) { 42 | if (this._logLevel >= LogLevel.info) { 43 | console.log(this._format(LogLevel.info, message), ...params) 44 | } 45 | } 46 | 47 | verbose(message, ...params) { 48 | if (this._logLevel >= LogLevel.verbose) { 49 | console.log(this._format(LogLevel.verbose, message), ...params) 50 | } 51 | } 52 | 53 | debug(message, ...params) { 54 | if (this._logLevel >= LogLevel.debug) { 55 | console.log(this._format(LogLevel.debug, message), ...params) 56 | } 57 | } 58 | 59 | silly(message, ...params) { 60 | if (this._logLevel >= LogLevel.silly) { 61 | console.log(this._format(LogLevel.silly, message), ...params) 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/variables.css: -------------------------------------------------------------------------------- 1 | .material { 2 | --ea-color-accent-1: #6102ef; 3 | --ea-color-accent-2: #398bf7; 4 | 5 | --ea-color-background-1: #ffffff; 6 | --ea-color-background-2: #0d355d; 7 | --ea-color-background-3: #e1effd; 8 | --ea-color-background-4: hsl(0, 0%, 96%); 9 | --ea-color-background-5: #0c0e0f; 10 | --ea-color-background-6: #00152b; 11 | 12 | --ea-color-success: #5bb95b; 13 | --ea-color-info: #5ac1de; 14 | --ea-color-warning: #f1ae4e; 15 | --ea-color-danger: #d9534f; 16 | --ea-color-error: #d9534f; 17 | 18 | --ea-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 19 | 0 6px 20px 0 rgba(0, 0, 0, 0.19); 20 | 21 | --ea-font-1: 'Roboto'; 22 | font-family: 'Roboto'; 23 | font-style: normal; 24 | font-weight: 400; 25 | --ea-padding: 4rem; 26 | --ea-toolbar-height: 4rem; 27 | 28 | /* Fonts & Typography */ 29 | --ea-font-1-family: 'Roboto'; 30 | --ea-font-1-style: normal; 31 | --ea-font-1-weight: 400; 32 | 33 | --ea-background-color: 66, 91, 154; 34 | 35 | --ea-background-color-1: rgba(var(--ea-background-color), 1); 36 | --ea-background-color-light: rgba(var(--ea-background-color), 0.8); 37 | 38 | --ea-color-1: hsl(210, 75%, 21%); 39 | --ea-color-1-light: hsl(210, 75%, 31%); 40 | 41 | --ea-color-2: hsl(0, 0%, 98%); 42 | --ea-color-light: hsl(0, 0%, 100%); 43 | 44 | --ea-text-color: var(--ea-text-color-1); 45 | --ea-text-color-1: #333; 46 | --ea-text-color-2: #f6f6f6; 47 | 48 | --ea-background-hover: var(--ea-color-1); 49 | /* --ea-background-hover: red; */ 50 | --ea-background-active: var(--ea-color-1-light); 51 | /* --ea-background-active: purple; */ 52 | --ea-background-active-shadow: inset 1.5px 2px 5px rgba(0, 0, 0, 0.2); 53 | --ea-menu-color-active: #3f51b5; 54 | --ea-menu-color-hover: #3f51b5; 55 | } 56 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/material/panel.css: -------------------------------------------------------------------------------- 1 | .material { 2 | & ea-panel { 3 | --ea-panel-color: var(--ea-color-1); 4 | --ea-panel-background: var(--ea-color-background-2); 5 | 6 | --ea-panel-height: var(--ea-panel-height, initial); 7 | --ea-panel-width: var(--ea-panel-width, initial); 8 | --ea-panel-max-height: var(--ea-panel-max-height, 100%); 9 | --ea-panel-max-width: var(--ea-panel-max-width, 100%); 10 | --ea-panel-min-size-ratio: 0.5; 11 | 12 | display: block; 13 | color: var(--ea-panel-color); 14 | background: var(--ea-panel-background); 15 | height: var(--ea-panel-height); 16 | width: var(--ea-panel-width); 17 | } 18 | 19 | & ea-panel[orientation='top'] { 20 | --ea-panel-width: var(--ea-panel-max-width) !important; 21 | } 22 | 23 | & ea-panel[orientation='left'] { 24 | --ea-panel-height: var(--ea-panel-max-height) !important; 25 | float: left; 26 | } 27 | 28 | & ea-panel[orientation='right'] { 29 | --ea-panel-height: var(--ea-panel-max-height) !important; 30 | float: right; 31 | } 32 | 33 | & ea-panel[orientation='bottom'] { 34 | --ea-panel-width: var(--ea-panel-max-width) !important; 35 | position: absolute; 36 | bottom: 0; 37 | } 38 | 39 | & .ea-panel-host-element[ea-panel-host-orientation='bottom'] { 40 | position: relative; 41 | } 42 | 43 | & ea-panel[state='maximized'] { 44 | --ea-panel-height: var(--ea-panel-max-height); 45 | --ea-panel-width: var(--ea-panel-max-width); 46 | } 47 | 48 | & ea-panel[state='minimized'] { 49 | --ea-panel-height: calc( 50 | var(--ea-panel-max-height) * var(--ea-panel-min-size-ratio) 51 | ); 52 | --ea-panel-width: calc( 53 | var(--ea-panel-max-width) * var(--ea-panel-min-size-ratio) 54 | ); 55 | } 56 | 57 | & ea-panel[state='closed'] { 58 | width: 0; 59 | display: none !important; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/panel.css: -------------------------------------------------------------------------------- 1 | @define-mixin panel-mode { 2 | & ea-panel { 3 | color: var(--ea-panel-color, var(--ea-text-color)); 4 | background: var(--ea-panel-background-color, white); 5 | height: var(--ea-panel-height, initial); 6 | width: var(--ea-panel-width, initial); 7 | display: var(--ea-panel-display, block); 8 | --ea-panel-min-size-ratio: 0.5; 9 | --ea-panel-sm-size-ratio: 0.5; 10 | --ea-panel-md-size-ratio: 1.5; 11 | --ea-panel-lg-size-ratio: 2.5; 12 | --ea-panel-display: flex; 13 | } 14 | 15 | & ea-panel[orientation='top'] { 16 | --ea-panel-width: var(--ea-panel-max-width, 100%) !important; 17 | } 18 | 19 | & ea-panel[orientation='left'] { 20 | --ea-panel-height: var(--ea-panel-max-height, 100%) !important; 21 | float: left; 22 | } 23 | 24 | & ea-panel[orientation='right'] { 25 | --ea-panel-height: var(--ea-panel-max-height, 100%) !important; 26 | float: right; 27 | } 28 | 29 | & ea-panel[orientation='bottom'] { 30 | --ea-panel-width: var(--ea-panel-max-width, 100%) !important; 31 | position: absolute; 32 | bottom: 0; 33 | } 34 | 35 | & .ea-panel-host-element[ea-panel-host-orientation='bottom'] { 36 | position: relative; 37 | } 38 | 39 | & .ea-panel-host-element[ea-panel-host-state='flex-center'] { 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | 45 | & ea-panel[state='maximized'] { 46 | --ea-panel-height: var(--ea-panel-max-height); 47 | --ea-panel-width: var(--ea-panel-max-width); 48 | } 49 | 50 | & ea-panel[state='minimized'] { 51 | --ea-panel-height: calc( 52 | var(--ea-panel-max-height) * var(--ea-panel-min-size-ratio) 53 | ); 54 | --ea-panel-width: calc( 55 | var(--ea-panel-max-width) * var(--ea-panel-min-size-ratio) 56 | ); 57 | } 58 | 59 | & ea-panel[state='closed'] { 60 | width: 0; 61 | display: none !important; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/app/components/button/button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-button', 5 | templateUrl: './button.component.html', 6 | styleUrls: ['./button.component.scss'] 7 | }) 8 | export class ButtonComponent { 9 | button = ` 10 | ~~~html 11 | 12 | 13 | 14 | 15 | 16 | 17 | ~~~ 18 | ` 19 | 20 | tags = ` 21 | ~~~html 22 | 32 |
33 | 34 | 35 |
36 | ~~~ 37 | ` 38 | 39 | button_sizing = ` 40 | ~~~html 41 | 42 | 43 | 44 | 45 | 46 | ~~~ 47 | ` 48 | 49 | icons = ` 50 | *app-component.html* 51 | ~~~html 52 | 56 | ~~~ 57 | 58 | ` 59 | constructor() {} 60 | } 61 | -------------------------------------------------------------------------------- /src/app/components/card/card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-card', 5 | templateUrl: './card.component.html', 6 | styles: [] 7 | }) 8 | export class CardComponent { 9 | constructor() {} 10 | 11 | sizing = ` 12 | | Class | Description | 13 | |---|---| 14 | | .ea-card | the container for the card, where the box-shadow is set | 15 | | .ea-card-header | container for holding the title and navigation elements of the card at the top | 16 | | .ea-card-content | meant for holding the main content of the card | 17 | | .ea-card-footer | located at the bottom of the card and meant for holding action buttons and error messages | 18 | ` 19 | 20 | card = ` 21 | ~~~html 22 |
23 |
24 |

ea-card-header

25 |
26 | 29 | 32 |
33 | 36 |
37 |
38 |

ea-card-content

39 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat purus ac ultrices maximus. 40 | Maecenas lacinia ipsum id est suscipit, non sollicitudin odio imperdiet.

41 |
42 |
43 | 44 | 1/2 45 | 46 |
47 |
48 | ~~~ 49 | ` 50 | 51 | ea_card_content_grid = ` 52 | *card.css* 53 | ~~~css 54 | .ea-card-content { 55 | . 56 | . 57 | &[grid]{ 58 | --ea-card-content-grid: var(--ea-card-content-grid, repeat(1 , 1fr)); 59 | 60 | display: grid; 61 | grid-template-columns: var(--ea-card-content-grid); 62 | } 63 | . 64 | . 65 | } 66 | ~~~ 67 | ` 68 | } 69 | -------------------------------------------------------------------------------- /projects/eamode/eang/src/components/themepicker.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'ea-themepicker', 5 | template: ` 6 | 15 |
16 |
    17 |
  • 22 | {{ theme }} 23 |
    • 24 |
25 |
26 | `, 27 | styles: [ 28 | ` 29 | li:first-child { 30 | border-top-left-radius: calc(var(--ea-sizer) * 0.15em); 31 | border-top-right-radius: calc(var(--ea-sizer) * 0.15em); 32 | } 33 | 34 | li:last-child { 35 | border-bottom-left-radius: calc(var(--ea-sizer) * 0.15em); 36 | border-bottom-right-radius: calc(var(--ea-sizer) * 0.15em); 37 | } 38 | ` 39 | ] 40 | }) 41 | export class ThemePickerComponent implements OnInit { 42 | @Input() themes 43 | @Input() select 44 | 45 | @Output() readonly focus = new EventEmitter() 46 | @Output() readonly blur = new EventEmitter() 47 | 48 | themeMatch = [] 49 | showThemes = false 50 | 51 | ngOnInit() { 52 | this.themes.forEach(element => { 53 | this.themeMatch.push(element) 54 | }) 55 | } 56 | 57 | selectTheme(theme) { 58 | const themedElements = document.querySelectorAll(this.select) 59 | Array.from(themedElements).forEach((element: HTMLElement) => { 60 | this.themeMatch.forEach(match => { 61 | if (element.classList.contains(match)) { 62 | element.classList.remove(match) 63 | } 64 | }) 65 | element.classList.add(theme) 66 | }) 67 | this.showThemes = false 68 | } 69 | 70 | toggleThemes() { 71 | this.showThemes = !this.showThemes 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/app/feature/reactive/reactive.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Reactive

3 | 4 |

5 | Status changes in enterprise applications need to be updated in real-time. 6 | The API design of eang is conducive to reactive functional programming and 7 | event streams. Eang components support both push and pull based models. 8 |

9 |

10 | The following example shows the ea-panel component reacting to two event 11 | stream observables, panel state and orientation. 12 |

13 | 14 |
15 |
16 |

<ea-panel>

17 |
18 |
19 |
20 |
21 |

22 | ({{ panelOrientation | async }}, {{ panelState | async }}) 23 |

24 |
25 | 27 | ea-panel 28 | 29 |
30 |
31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 | 42 | 43 |
44 |
45 |
46 | 47 |

48 | These UI components interact with each other through composable event 49 | streams. This allows developers to implement more rapidly and reach a higher 50 | level of interaction complexity in their applications. 51 |

52 | 53 | 54 |
55 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/fluent/button.css: -------------------------------------------------------------------------------- 1 | @define-mixin button-fluent { 2 | & button { 3 | --ea-button-color: var(--ea-color-2); 4 | --ea-button-background-color: var(--ea-color-background-2); 5 | --ea-button-border: var(--ea-color-background-4); 6 | --ea-button-border-outline: 0em; 7 | --ea-button-font-size: 1rem; 8 | --ea-button-border-radius: 0em; 9 | --ea-button-padding: 1.5em 1.5em; 10 | --ea-button-margin: 0; 11 | 12 | /* font-size: var(--ea-button-font-size); 13 | padding: var(--ea-button-padding); 14 | background-color: var(--ea-button-background-color); 15 | color: var(--ea-color-3); 16 | border: var(--ea-button-background-color) solid 0.1em; 17 | margin: var(--ea-button-margin); 18 | cursor: pointer; 19 | display: flex; 20 | align-items: center; 21 | outline: none; 22 | transition: all 0.25s ease 0s; */ 23 | /* } 24 | & [small] { 25 | font-size: calc(var(--ea-button-font-size) * 0.8); 26 | } 27 | & [medium] { 28 | font-size: calc(var(--ea-button-font-size) * 1.2); 29 | } 30 | & [large] { 31 | font-size: calc(var(--ea-button-font-size) * 1.5); 32 | } 33 | & [custom] { 34 | border: none; 35 | background: none; 36 | padding: 0; 37 | outline: none; 38 | } 39 | 40 | & [custom]:hover { 41 | background-color: none; 42 | border: none; 43 | } 44 | 45 | & [custom]:active { 46 | background-color: transparent; 47 | } 48 | 49 | &[primary] { 50 | color: var(--ea-color-1); 51 | background-color: var(--ea-color-accent-1); 52 | } 53 | &[secondary] { 54 | color: var(--ea-color-1); 55 | background-color: var(--ea-color-accent-2); 56 | } 57 | &[success] { 58 | color: var(--ea-color-1); 59 | background-color: var(--ea-color-success); 60 | } 61 | &[info] { 62 | color: var(--ea-color-1); 63 | background-color: var(--ea-color-info); 64 | } 65 | &[warning] { 66 | color: var(--ea-color-1); 67 | background-color: var(--ea-color-warning); 68 | } 69 | &[danger] { 70 | color: var(--ea-color-1); 71 | background-color: var(--ea-color-danger); 72 | } 73 | & button[disabled] { 74 | opacity: 0.65; 75 | cursor: not-allowed; 76 | border: var(--ea-color-background-6) solid 0.1em; 77 | } 78 | & button:hover { 79 | border: var(--ea-color-background-6) solid 0.1em; 80 | } 81 | 82 | & button:active { 83 | background-color: var(--ea-color-background-5); 84 | } */ 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/app/feature/get-started/get-started.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core' 2 | 3 | @Component({ 4 | selector: 'eangio-get-started', 5 | templateUrl: './get-started.component.html', 6 | styles: [ 7 | ` 8 | h5 { 9 | font-weight: 500; 10 | display: -ms-inline-flexbox; 11 | } 12 | ` 13 | ] 14 | }) 15 | export class GetStartedComponent { 16 | ngnew = ` 17 | ~~~ ts 18 | ng new [project name] 19 | ~~~ 20 | ` 21 | 22 | npminstall = ` 23 | ~~~ ts 24 | npm install -S @eamode/eang 25 | ~~~ 26 | ` 27 | 28 | import = ` 29 | *app.module.ts* 30 | ~~~ts 31 | import { PanelModule, AutoCompleteModule, LayoutModule, ... } from '@eamode/eang'; 32 | ~~~ 33 | ` 34 | ngmodel = ` 35 | *app.module.ts* 36 | ~~~ts 37 | @NgModule({ 38 | ... 39 | imports: [..., PanelModule, AutoCompleteModule, LayoutModule, ...], 40 | ... 41 | }) 42 | ~~~ 43 | ` 44 | style = ` 45 | *style.scss* 46 | ~~~css 47 | @import '~@eamode/eang/css/all.css'; 48 | ~~~ 49 | ` 50 | body = ` 51 | *index.html* 52 | ~~~html 53 | 54 | 55 | 56 | ... 57 | 58 | 59 | 60 | 61 | 62 | ~~~ 63 | ` 64 | mode = ` 65 | ~~~ css 66 | .mode { 67 | background: navy; 68 | } 69 | ~~~ 70 | ` 71 | eadrawertag = ` 72 | ~~~ css 73 | ea-drawer { 74 | --ea-drawer-width: 12em; 75 | } 76 | ~~~ 77 | ` 78 | 79 | layout = ` 80 | *component.html* 81 | ~~~html 82 | 83 | 84 |

Logo here

85 | 86 | 87 | Link in Drawer 88 | 89 | 90 | 91 |

Body

92 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget mollis nisi. Vivamus vel enim turpis.

93 | 94 | 95 |

your company here TM

96 | 97 | 98 | 99 | ~~~ 100 | ` 101 | ea_layout_attrs = ` 102 | *layout.component.html* 103 | ~~~html 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | ~~~ 120 | ` 121 | } 122 | -------------------------------------------------------------------------------- /projects/eamode/eang/themes/mode/utilities.css: -------------------------------------------------------------------------------- 1 | @define-mixin utilities { 2 | [sm] { 3 | --ea-sizer: 0.8; 4 | } 5 | [md] { 6 | --ea-sizer: 1.25; 7 | } 8 | [lg] { 9 | --ea-sizer: 1.5; 10 | } 11 | [xl] { 12 | --ea-sizer: 2; 13 | } 14 | [xxl] { 15 | --ea-sizer: 2.5; 16 | } 17 | [avatar] { 18 | display: grid; 19 | grid-template-areas: 20 | 'img header' 21 | 'img text'; 22 | & img { 23 | grid-area: img; 24 | } 25 | & h1, 26 | h2, 27 | h3, 28 | h4, 29 | h5, 30 | h6, 31 | b, 32 | strong { 33 | grid-area: header; 34 | } 35 | & p { 36 | grid-area: text; 37 | } 38 | } 39 | 40 | & [multi-col] { 41 | display: grid; 42 | grid-template-columns: repeat( 43 | auto-fit, 44 | minmax( 45 | var(--ea-grid-col-min-width, 22em), 46 | var(--ea-grid-col-max-width, 1fr) 47 | ) 48 | ); 49 | grid-gap: var(--ea-grid-gap, 1.5em); 50 | &[center] { 51 | align-items: center; 52 | justify-items: center; 53 | } 54 | &[v-center] { 55 | align-items: center; 56 | } 57 | &[h-center] { 58 | justify-items: center; 59 | } 60 | } 61 | & [flex-center] { 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | flex-direction: column; 66 | &[row] { 67 | flex-direction: row; 68 | } 69 | } 70 | & [flex-space-evenly] { 71 | display: flex; 72 | justify-content: space-evenly; 73 | align-items: center; 74 | } 75 | & [p] { 76 | padding: var(--ea-padding-value, 1em); 77 | } 78 | & [max-width] { 79 | width: 100%; 80 | max-width: var(--ea-max-width, 1080px); 81 | } 82 | 83 | .ea-container-horizontal { 84 | width: 100%; 85 | display: flex; 86 | align-items: center; 87 | 88 | padding: var( 89 | --ea-padding, 90 | var( 91 | --ea-container-padding, 92 | calc(var(--ea-spacer) * 0.375em) calc(var(--ea-spacer) * 1em) 93 | ) 94 | ); 95 | 96 | > * { 97 | display: flex; 98 | } 99 | 100 | > :nth-last-child(2) { 101 | flex-grow: 1; 102 | } 103 | } 104 | 105 | .ea-container-vertical { 106 | display: flex; 107 | flex-direction: column; 108 | 109 | padding: var( 110 | --ea-padding, 111 | var( 112 | --ea-container-padding, 113 | calc(var(--ea-spacer) * 1em) calc(var(--ea-spacer) * 0.5em) 114 | ) 115 | ); 116 | 117 | > * { 118 | display: flex; 119 | } 120 | 121 | > :nth-last-child(2) { 122 | flex-grow: 1; 123 | } 124 | } 125 | 126 | } 127 | --------------------------------------------------------------------------------