├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .npmrc
├── .nx
    └── cache
    │   ├── 18.3.3-nx.darwin-arm64.node
    │   └── d
    │       └── daemon.log
├── LICENSE
├── README.md
├── apps
    ├── demo
    │   ├── .eslintrc.json
    │   ├── project.json
    │   ├── src
    │   │   ├── app
    │   │   │   ├── app.component.html
    │   │   │   └── app.component.ts
    │   │   ├── assets
    │   │   │   └── .gitkeep
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── styles.scss
    │   ├── tsconfig.app.json
    │   ├── tsconfig.editor.json
    │   ├── tsconfig.json
    │   └── tsconfig.spec.json
    └── git-page
    │   ├── .eslintrc.json
    │   ├── project.json
    │   ├── src
    │       ├── app
    │       │   ├── app-routes-path.ts
    │       │   ├── app.component.html
    │       │   ├── app.component.scss
    │       │   ├── app.component.ts
    │       │   ├── app.module.ts
    │       │   ├── app.routes.ts
    │       │   ├── components
    │       │   │   ├── api-checkbox-will-change
    │       │   │   │   ├── api-checkbox-will-change.component.html
    │       │   │   │   └── api-checkbox-will-change.component.ts
    │       │   │   ├── api-checkbox
    │       │   │   │   ├── api-checkbox.component.html
    │       │   │   │   └── api-checkbox.component.ts
    │       │   │   ├── api-enums
    │       │   │   │   ├── api-enums.component.html
    │       │   │   │   └── api-enums.component.ts
    │       │   │   ├── api-hover-will-change
    │       │   │   │   ├── api-hover-will-change.component.html
    │       │   │   │   └── api-hover-will-change.component.ts
    │       │   │   ├── api-hover
    │       │   │   │   ├── api-hover.component.html
    │       │   │   │   └── api-hover.component.ts
    │       │   │   ├── api-icon
    │       │   │   │   ├── api-icon.component.html
    │       │   │   │   └── api-icon.component.ts
    │       │   │   ├── api-image
    │       │   │   │   ├── api-image.component.html
    │       │   │   │   └── api-image.component.ts
    │       │   │   ├── api-indeterminate-will-change
    │       │   │   │   ├── api-indeterminate-will-change.component.html
    │       │   │   │   └── api-indeterminate-will-change.component.ts
    │       │   │   ├── api-indeterminate
    │       │   │   │   ├── api-indeterminate.component.html
    │       │   │   │   └── api-indeterminate.component.ts
    │       │   │   ├── api-interfaces
    │       │   │   │   ├── api-interfaces.component.html
    │       │   │   │   └── api-interfaces.component.ts
    │       │   │   ├── api-radio-group
    │       │   │   │   ├── api-radio-group.component.html
    │       │   │   │   └── api-radio-group.component.ts
    │       │   │   ├── api-radio-will-change
    │       │   │   │   ├── api-radio-will-change.component.html
    │       │   │   │   └── api-radio-will-change.component.ts
    │       │   │   ├── api-radio
    │       │   │   │   ├── api-radio.component.html
    │       │   │   │   └── api-radio.component.ts
    │       │   │   ├── api-svg
    │       │   │   │   ├── api-svg.component.html
    │       │   │   │   └── api-svg.component.ts
    │       │   │   ├── api-toggle-will-change
    │       │   │   │   ├── api-toggle-will-change.component.html
    │       │   │   │   └── api-toggle-will-change.component.ts
    │       │   │   ├── api-toggle
    │       │   │   │   ├── api-toggle.component.html
    │       │   │   │   └── api-toggle.component.ts
    │       │   │   ├── card
    │       │   │   │   ├── card.component.html
    │       │   │   │   └── card.component.ts
    │       │   │   ├── code
    │       │   │   │   ├── code.component.html
    │       │   │   │   └── code.component.ts
    │       │   │   ├── content-set-indeterminate
    │       │   │   │   ├── content-set-indeterminate.component.html
    │       │   │   │   └── content-set-indeterminate.component.ts
    │       │   │   ├── demo-checkbox-all
    │       │   │   │   ├── demo-checkbox-all.component.html
    │       │   │   │   └── demo-checkbox-all.component.ts
    │       │   │   ├── demo-checkbox-animation-jelly
    │       │   │   │   ├── demo-checkbox-animation-jelly.component.html
    │       │   │   │   └── demo-checkbox-animation-jelly.component.ts
    │       │   │   ├── demo-checkbox-animation-pulse
    │       │   │   │   ├── demo-checkbox-animation-pulse.component.html
    │       │   │   │   └── demo-checkbox-animation-pulse.component.ts
    │       │   │   ├── demo-checkbox-animation-rotate
    │       │   │   │   ├── demo-checkbox-animation-rotate.component.html
    │       │   │   │   └── demo-checkbox-animation-rotate.component.ts
    │       │   │   ├── demo-checkbox-animation-smooth
    │       │   │   │   ├── demo-checkbox-animation-smooth.component.html
    │       │   │   │   └── demo-checkbox-animation-smooth.component.ts
    │       │   │   ├── demo-checkbox-animation-tada
    │       │   │   │   ├── demo-checkbox-animation-tada.component.html
    │       │   │   │   └── demo-checkbox-animation-tada.component.ts
    │       │   │   ├── demo-checkbox-animation
    │       │   │   │   ├── demo-checkbox-animation.component.html
    │       │   │   │   └── demo-checkbox-animation.component.ts
    │       │   │   ├── demo-checkbox-basic
    │       │   │   │   ├── demo-checkbox-basic.component.html
    │       │   │   │   └── demo-checkbox-basic.component.ts
    │       │   │   ├── demo-checkbox-color
    │       │   │   │   ├── demo-checkbox-color.component.html
    │       │   │   │   └── demo-checkbox-color.component.ts
    │       │   │   ├── demo-checkbox-disable
    │       │   │   │   ├── demo-checkbox-disable.component.html
    │       │   │   │   └── demo-checkbox-disable.component.ts
    │       │   │   ├── demo-checkbox-font-icon
    │       │   │   │   ├── demo-checkbox-font-icon.component.html
    │       │   │   │   └── demo-checkbox-font-icon.component.ts
    │       │   │   ├── demo-checkbox-image
    │       │   │   │   ├── demo-checkbox-image.component.html
    │       │   │   │   └── demo-checkbox-image.component.ts
    │       │   │   ├── demo-checkbox-lock
    │       │   │   │   ├── demo-checkbox-lock.component.html
    │       │   │   │   └── demo-checkbox-lock.component.ts
    │       │   │   ├── demo-checkbox-mixed-color
    │       │   │   │   ├── demo-checkbox-mixed-color.component.html
    │       │   │   │   └── demo-checkbox-mixed-color.component.ts
    │       │   │   ├── demo-checkbox-mixed-curve-fill
    │       │   │   │   ├── demo-checkbox-mixed-curve-fill.component.html
    │       │   │   │   └── demo-checkbox-mixed-curve-fill.component.ts
    │       │   │   ├── demo-checkbox-mixed-curve-outline
    │       │   │   │   ├── demo-checkbox-mixed-curve-outline.component.html
    │       │   │   │   └── demo-checkbox-mixed-curve-outline.component.ts
    │       │   │   ├── demo-checkbox-mixed-curve-thick
    │       │   │   │   ├── demo-checkbox-mixed-curve-thick.component.html
    │       │   │   │   └── demo-checkbox-mixed-curve-thick.component.ts
    │       │   │   ├── demo-checkbox-mixed-curve
    │       │   │   │   ├── demo-checkbox-mixed-curve.component.html
    │       │   │   │   └── demo-checkbox-mixed-curve.component.ts
    │       │   │   ├── demo-checkbox-mixed-outline
    │       │   │   │   ├── demo-checkbox-mixed-outline.component.html
    │       │   │   │   └── demo-checkbox-mixed-outline.component.ts
    │       │   │   ├── demo-checkbox-mixed-round-fill
    │       │   │   │   ├── demo-checkbox-mixed-round-fill.component.html
    │       │   │   │   └── demo-checkbox-mixed-round-fill.component.ts
    │       │   │   ├── demo-checkbox-mixed-round-thick
    │       │   │   │   ├── demo-checkbox-mixed-round-thick.component.html
    │       │   │   │   └── demo-checkbox-mixed-round-thick.component.ts
    │       │   │   ├── demo-checkbox-mixed-round
    │       │   │   │   ├── demo-checkbox-mixed-round.component.html
    │       │   │   │   └── demo-checkbox-mixed-round.component.ts
    │       │   │   ├── demo-checkbox-mixed-square-fill-outline
    │       │   │   │   ├── demo-checkbox-mixed-square-fill-outline.component.html
    │       │   │   │   └── demo-checkbox-mixed-square-fill-outline.component.ts
    │       │   │   ├── demo-checkbox-mixed-square-fill
    │       │   │   │   ├── demo-checkbox-mixed-square-fill.component.html
    │       │   │   │   └── demo-checkbox-mixed-square-fill.component.ts
    │       │   │   ├── demo-checkbox-mixed-square-thick-outline
    │       │   │   │   ├── demo-checkbox-mixed-square-thick-outline.component.html
    │       │   │   │   └── demo-checkbox-mixed-square-thick-outline.component.ts
    │       │   │   ├── demo-checkbox-mixed-square-thick
    │       │   │   │   ├── demo-checkbox-mixed-square-thick.component.html
    │       │   │   │   └── demo-checkbox-mixed-square-thick.component.ts
    │       │   │   ├── demo-checkbox-mixed-switch
    │       │   │   │   ├── demo-checkbox-mixed-switch.component.html
    │       │   │   │   └── demo-checkbox-mixed-switch.component.ts
    │       │   │   ├── demo-checkbox-plain
    │       │   │   │   ├── demo-checkbox-plain.component.html
    │       │   │   │   └── demo-checkbox-plain.component.ts
    │       │   │   ├── demo-checkbox-scalability
    │       │   │   │   ├── demo-checkbox-scalability.component.html
    │       │   │   │   └── demo-checkbox-scalability.component.ts
    │       │   │   ├── demo-checkbox-size
    │       │   │   │   ├── demo-checkbox-size.component.html
    │       │   │   │   └── demo-checkbox-size.component.ts
    │       │   │   ├── demo-checkbox-states
    │       │   │   │   ├── demo-checkbox-states.component.html
    │       │   │   │   └── demo-checkbox-states.component.ts
    │       │   │   ├── demo-checkbox-svg
    │       │   │   │   ├── demo-checkbox-svg.component.html
    │       │   │   │   └── demo-checkbox-svg.component.ts
    │       │   │   ├── demo-checkbox-switch
    │       │   │   │   ├── demo-checkbox-switch.component.html
    │       │   │   │   └── demo-checkbox-switch.component.ts
    │       │   │   ├── demo-checkbox-toggle
    │       │   │   │   ├── demo-checkbox-toggle.component.html
    │       │   │   │   └── demo-checkbox-toggle.component.ts
    │       │   │   ├── demo-radio-button-all
    │       │   │   │   ├── demo-radio-button-all.component.html
    │       │   │   │   └── demo-radio-button-all.component.ts
    │       │   │   ├── demo-radio-button-animation
    │       │   │   │   ├── demo-radio-button-animation.component.html
    │       │   │   │   └── demo-radio-button-animation.component.ts
    │       │   │   ├── demo-radio-button-color-icon
    │       │   │   │   ├── demo-radio-button-color-icon.component.html
    │       │   │   │   └── demo-radio-button-color-icon.component.ts
    │       │   │   ├── demo-radio-button-color-outline-icon
    │       │   │   │   ├── demo-radio-button-color-outline-icon.component.html
    │       │   │   │   └── demo-radio-button-color-outline-icon.component.ts
    │       │   │   ├── demo-radio-button-color
    │       │   │   │   ├── demo-radio-button-color.component.html
    │       │   │   │   └── demo-radio-button-color.component.ts
    │       │   │   ├── demo-radio-button-plain
    │       │   │   │   ├── demo-radio-button-plain.component.html
    │       │   │   │   └── demo-radio-button-plain.component.ts
    │       │   │   ├── demo-radio-button-switch
    │       │   │   │   ├── demo-radio-button-switch.component.html
    │       │   │   │   └── demo-radio-button-switch.component.ts
    │       │   │   ├── demo-radio-button
    │       │   │   │   ├── demo-radio-button.component.html
    │       │   │   │   └── demo-radio-button.component.ts
    │       │   │   ├── demos-checkbox
    │       │   │   │   ├── demos-checkbox.component.html
    │       │   │   │   └── demos-checkbox.component.ts
    │       │   │   ├── demos-radio-button
    │       │   │   │   ├── demos-radio-button.component.html
    │       │   │   │   └── demos-radio-button.component.ts
    │       │   │   ├── home
    │       │   │   │   ├── home.component.html
    │       │   │   │   └── home.component.ts
    │       │   │   ├── install-lib
    │       │   │   │   ├── install-lib.component.html
    │       │   │   │   └── install-lib.component.ts
    │       │   │   └── install-scss-customize
    │       │   │   │   ├── install-scss-customize.component.html
    │       │   │   │   └── install-scss-customize.component.ts
    │       │   ├── enums.ts
    │       │   └── navigation.service.ts
    │       ├── assets
    │       │   ├── .gitkeep
    │       │   ├── logo.gif
    │       │   └── preview.gif
    │       ├── favicon.ico
    │       ├── index.html
    │       ├── main.ts
    │       └── styles.scss
    │   ├── tsconfig.app.json
    │   ├── tsconfig.editor.json
    │   ├── tsconfig.json
    │   └── tsconfig.spec.json
├── libs
    └── ngx-pretty-checkbox
    │   ├── .eslintrc.json
    │   ├── jest.config.ts
    │   ├── ng-package.json
    │   ├── package.json
    │   ├── project.json
    │   ├── src
    │       ├── index.ts
    │       └── lib
    │       │   ├── components
    │       │       ├── ngx-pretty-Indeterminate-will-change.component.ts
    │       │       ├── ngx-pretty-Indeterminate.component.ts
    │       │       ├── ngx-pretty-checkbox-will-change.component.ts
    │       │       ├── ngx-pretty-checkbox.component.ts
    │       │       ├── ngx-pretty-hover-will-change.component.ts
    │       │       ├── ngx-pretty-hover.component.ts
    │       │       ├── ngx-pretty-radio-will-change.component.ts
    │       │       ├── ngx-pretty-radio.component.ts
    │       │       ├── ngx-pretty-toggle-will-change.component.ts
    │       │       └── ngx-pretty-toggle.component.ts
    │       │   ├── directives
    │       │       ├── ngx-pretty-icon.directive.ts
    │       │       ├── ngx-pretty-image.directive.ts
    │       │       ├── ngx-pretty-radio-group.directive.ts
    │       │       └── ngx-pretty-svg.directive.ts
    │       │   ├── model.ts
    │       │   ├── ngx-pretty-checkbox.module.ts
    │       │   └── utils.ts
    │   ├── tsconfig.json
    │   ├── tsconfig.lib.json
    │   └── tsconfig.lib.prod.json
├── logo.gif
├── migrations.json
├── nx.json
├── package.json
├── preview.gif
├── tools
    └── publish
    │   ├── main.ts
    │   ├── package.json
    │   ├── print-process.model.ts
    │   ├── print-process.ts
    │   ├── print.ts
    │   ├── semantic-version.ts
    │   ├── terminal-exec.ts
    │   ├── terminal-interaction.ts
    │   └── tsconfig.json
└── tsconfig.base.json


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "ignorePatterns": [
 4 |     "**/*"
 5 |   ],
 6 |   "plugins": [
 7 |     "@nx"
 8 |   ],
 9 |   "overrides": [
10 |     {
11 |       "files": [
12 |         "*.ts",
13 |         "*.tsx",
14 |         "*.js",
15 |         "*.jsx"
16 |       ],
17 |       "rules": {
18 |         "@nx/enforce-module-boundaries": [
19 |           "error",
20 |           {
21 |             "enforceBuildableLibDependency": true,
22 |             "allow": [],
23 |             "depConstraints": [
24 |               {
25 |                 "sourceTag": "*",
26 |                 "onlyDependOnLibsWithTags": [
27 |                   "*"
28 |                 ]
29 |               }
30 |             ]
31 |           }
32 |         ]
33 |       }
34 |     },
35 |     {
36 |       "files": [
37 |         "*.ts",
38 |         "*.tsx"
39 |       ],
40 |       "extends": [
41 |         "plugin:@nx/typescript"
42 |       ],
43 |       "rules": {
44 |         "@typescript-eslint/no-extra-semi": "error",
45 |         "no-extra-semi": "off"
46 |       }
47 |     },
48 |     {
49 |       "files": [
50 |         "*.js",
51 |         "*.jsx"
52 |       ],
53 |       "extends": [
54 |         "plugin:@nx/javascript"
55 |       ],
56 |       "rules": {
57 |         "@typescript-eslint/no-extra-semi": "error",
58 |         "no-extra-semi": "off"
59 |       }
60 |     },
61 |     {
62 |       "files": [
63 |         "*.spec.ts",
64 |         "*.spec.tsx",
65 |         "*.spec.js",
66 |         "*.spec.jsx"
67 |       ],
68 |       "env": {
69 |         "jest": true
70 |       },
71 |       "rules": {}
72 |     }
73 |   ]
74 | }
75 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | dist
 5 | 
 6 | # dependencies
 7 | node_modules
 8 | 
 9 | # IDEs and editors
10 | /.idea
11 | .project
12 | .classpath
13 | .c9/
14 | *.launch
15 | .settings/
16 | *.sublime-workspace
17 | 
18 | # IDE - VSCode
19 | .vscode/*
20 | !.vscode/settings.json
21 | !.vscode/tasks.json
22 | !.vscode/launch.json
23 | !.vscode/extensions.json
24 | 
25 | # misc
26 | /.sass-cache
27 | /connect.lock
28 | /coverage
29 | /libpeerconnection.log
30 | npm-debug.log
31 | yarn-error.log
32 | testem.log
33 | /typings
34 | 
35 | # System Files
36 | .DS_Store
37 | Thumbs.db
38 | 
39 | .angular
40 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true


--------------------------------------------------------------------------------
/.nx/cache/18.3.3-nx.darwin-arm64.node:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/.nx/cache/18.3.3-nx.darwin-arm64.node


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Milad Faghihi (miladfm@gmail.com)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/apps/demo/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "../../.eslintrc.json"
 4 |   ],
 5 |   "ignorePatterns": [
 6 |     "!**/*"
 7 |   ],
 8 |   "overrides": [
 9 |     {
10 |       "files": [
11 |         "*.ts"
12 |       ],
13 |       "rules": {
14 |         "@angular-eslint/directive-selector": [
15 |           "error",
16 |           {
17 |             "type": "attribute",
18 |             "prefix": "app",
19 |             "style": "camelCase"
20 |           }
21 |         ],
22 |         "@angular-eslint/component-selector": [
23 |           "error",
24 |           {
25 |             "type": "element",
26 |             "prefix": "app",
27 |             "style": "kebab-case"
28 |           }
29 |         ]
30 |       },
31 |       "extends": [
32 |         "plugin:@nx/angular",
33 |         "plugin:@angular-eslint/template/process-inline-templates"
34 |       ]
35 |     },
36 |     {
37 |       "files": [
38 |         "*.html"
39 |       ],
40 |       "extends": [
41 |         "plugin:@nx/angular-template"
42 |       ],
43 |       "rules": {}
44 |     }
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/apps/demo/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <h1>Checkbox Demo</h1>
 2 | 
 3 | <!------------------------------- STATELESS ------------------------------->
 4 | <h3> Stateless</h3>
 5 | <div class="row row--column">
 6 |     <p-checkbox [stateless]="true" [checked]="statelessValue" (change)="onStatelessInputChange($event)">Default</p-checkbox>
 7 |     <p-checkbox will-change [stateless]="true" [checked]="statelessValue" (change)="onStatelessInputChange($event)">Default</p-checkbox>
 8 |     <p>CHECKED: {{statelessValue}}</p>
 9 |     <button (click)="statelessValue = !statelessValue">TOGGLE</button>
10 | </div>
11 | 
12 | <!------------------------------- BASIC ------------------------------->
13 | <h3> Basic</h3>
14 | <div class="row">
15 | 
16 |     <p-checkbox>Default</p-checkbox>
17 |     <p-checkbox stroke="fill">Fill</p-checkbox>
18 |     <p-checkbox stroke="thick">Thick</p-checkbox>
19 | 
20 | </div>
21 | 
22 | 
23 | <!------------------------------- BASIC DYNAMIC ------------------------------->
24 | <h3> Basic Runtime</h3>
25 | <div class="row">
26 | 
27 |     <select [(ngModel)]="stroke1_2">
28 |         <option>Default</option>
29 |         <option value="fill">Fill</option>
30 |         <option value="thick">Thick</option>
31 |         <option value="slim">Slim</option>
32 |     </select>
33 | 
34 |     <p-checkbox will-change [stroke]="stroke1_2">Label</p-checkbox>
35 | 
36 | </div>
37 | 
38 | 
39 | <!------------------------------- SWITCH ------------------------------->
40 | <h3> Switch</h3>
41 | <div class="row">
42 | 
43 |     <p-checkbox isSwitch="true">Default</p-checkbox>
44 |     <p-checkbox isSwitch="true" stroke="fill">Fill</p-checkbox>
45 |     <p-checkbox isSwitch="true" stroke="slim">Slim</p-checkbox>
46 | 
47 | </div>
48 | 
49 | 
50 | <!------------------------------- SWITCH DYNAMIC ------------------------------->
51 | <h3> Switch Runtime</h3>
52 | <div class="row">
53 | 
54 |     <div>
55 |         <input id="id-is-switch2_2" type="checkbox" [(ngModel)]="isSwitch2_2" />
56 |         <label for="id-is-switch2_2">Is Switch</label>
57 |     </div>
58 | 
59 |     <select [(ngModel)]="stroke2_2">
60 |         <option>Default - Outline</option>
61 |         <option value="fill">Fill</option>
62 |         <option value="slim">Slim</option>
63 |     </select>
64 | 
65 |     <p-checkbox will-change [isSwitch]="isSwitch2_2" [stroke]="stroke2_2">Label</p-checkbox>
66 | 
67 | </div>
68 | 
69 | 
70 | <!------------------------------- Mixed (Color) ------------------------------->
71 | <h3> Mixed (Color)</h3>
72 | <div class="row">
73 | 
74 |     <p-checkbox isSwitch="true" color="primary">Default</p-checkbox>
75 |     <p-checkbox isSwitch="true" color="success" stroke="fill">Fill</p-checkbox>
76 |     <p-checkbox isSwitch="true" color="warning" stroke="slim">Slim</p-checkbox>
77 | 
78 | </div>
79 | 


--------------------------------------------------------------------------------
/apps/demo/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {ChangeDetectorRef, Component, inject} from '@angular/core';
 2 | import {
 3 |   NgxPrettyCheckboxModule,
 4 |   NgxPrettyCheckboxComponent,
 5 |   NgxPrettyCheckboxWillChangeComponent,
 6 |   NgxPrettyHoverComponent,
 7 |   NgxPrettyHoverWillChangeComponent,
 8 |   NgxPrettyIconDirective,
 9 |   NgxPrettyImageDirective,
10 |   NgxPrettyIndeterminateComponent,
11 |   NgxPrettyIndeterminateWillChangeComponent,
12 |   NgxPrettyRadioComponent,
13 |   NgxPrettyRadioGroupDirective,
14 |   NgxPrettyRadioWillChangeComponent,
15 |   NgxPrettySvgDirective,
16 |   NgxPrettyToggleComponent,
17 |   NgxPrettyToggleWillChangeComponent,
18 |   PrettyCheckboxStroke, PrettyCheckBoxChange
19 | } from '@lib/ngx-pretty-checkbox';
20 | import {FormsModule} from "@angular/forms";
21 | 
22 | @Component({
23 |   standalone: true,
24 |   imports: [
25 |     FormsModule,
26 |     NgxPrettyCheckboxModule
27 |     // NgxPrettyCheckboxComponent,
28 |     // NgxPrettyCheckboxWillChangeComponent,
29 |     // NgxPrettyHoverComponent,
30 |     // NgxPrettyHoverWillChangeComponent,
31 |     // NgxPrettyIndeterminateComponent,
32 |     // NgxPrettyIndeterminateWillChangeComponent,
33 |     // NgxPrettyRadioComponent,
34 |     // NgxPrettyRadioWillChangeComponent,
35 |     // NgxPrettyToggleComponent,
36 |     // NgxPrettyToggleWillChangeComponent,
37 |     // NgxPrettyIconDirective,
38 |     // NgxPrettyImageDirective,
39 |     // NgxPrettyRadioGroupDirective,
40 |     // NgxPrettySvgDirective
41 |   ],
42 |   selector: 'app-root',
43 |   templateUrl: './app.component.html',
44 |   styles: [`
45 |     .row {
46 |       display: flex;
47 |       align-items: center;
48 |       flex-wrap: wrap;
49 | 
50 |       margin: 30px;
51 |       padding-bottom: 30px;
52 |       border-bottom: 1px solid #ccc;
53 |     }
54 | 
55 |     .row--column {
56 |       flex-direction: column;
57 |       align-items: flex-start;
58 |     }
59 | 
60 |     .row > * {
61 |       margin-right: 30px;
62 |     }
63 |   `]
64 | })
65 | export class AppComponent {
66 |   stroke1_2: PrettyCheckboxStroke;
67 | 
68 |   stroke2_2: PrettyCheckboxStroke;
69 |   isSwitch2_2 = true;
70 | 
71 |   statelessValue = true;
72 | 
73 | 
74 |   private cd = inject(ChangeDetectorRef);
75 | 
76 | 
77 |   onStatelessInputChange(change: PrettyCheckBoxChange) {
78 |     console.log('STATELESS VALUE CHANGES', change);
79 |     setTimeout(_ => {
80 |       this.statelessValue = change.checked;
81 |       this.cd.detectChanges();
82 |     })
83 |     console.log('statelessValue CHANGED', this.statelessValue);
84 | 
85 |   }
86 | }


--------------------------------------------------------------------------------
/apps/demo/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/apps/demo/src/assets/.gitkeep


--------------------------------------------------------------------------------
/apps/demo/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/apps/demo/src/favicon.ico


--------------------------------------------------------------------------------
/apps/demo/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Demo</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/apps/demo/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';;
2 | import { AppComponent } from './app/app.component';
3 | 
4 | 
5 | bootstrapApplication(AppComponent).catch((err) => console.error(err));


--------------------------------------------------------------------------------
/apps/demo/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/apps/demo/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../dist/out-tsc",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts"
 9 |   ],
10 |   "include": [
11 |     "src/**/*.d.ts"
12 |   ],
13 |   "exclude": [
14 |     "jest.config.ts",
15 |     "src/**/*.test.ts",
16 |     "src/**/*.spec.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/apps/demo/tsconfig.editor.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "include": [
 4 |     "src/**/*.ts"
 5 |   ],
 6 |   "compilerOptions": {
 7 |     "types": [
 8 |       "jest",
 9 |       "node"
10 |     ]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/demo/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.base.json",
 3 |   "files": [],
 4 |   "include": [],
 5 |   "references": [
 6 |     {
 7 |       "path": "./tsconfig.app.json"
 8 |     },
 9 |     {
10 |       "path": "./tsconfig.spec.json"
11 |     },
12 |     {
13 |       "path": "./tsconfig.editor.json"
14 |     }
15 |   ],
16 |   "compilerOptions": {
17 |     "target": "es2022",
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/demo/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../dist/out-tsc",
 5 |     "module": "commonjs",
 6 |     "types": ["jest", "node"]
 7 |   },
 8 |   "files": ["src/test-setup.ts"],
 9 |   "include": [
10 |     "jest.config.ts",
11 |     "src/**/*.test.ts",
12 |     "src/**/*.spec.ts",
13 |     "src/**/*.d.ts"
14 | ]
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "../../.eslintrc.json"
 4 |   ],
 5 |   "ignorePatterns": [
 6 |     "!**/*"
 7 |   ],
 8 |   "overrides": [
 9 |     {
10 |       "files": [
11 |         "*.ts"
12 |       ],
13 |       "rules": {
14 |         "@angular-eslint/directive-selector": [
15 |           "error",
16 |           {
17 |             "type": "attribute",
18 |             "prefix": "app",
19 |             "style": "camelCase"
20 |           }
21 |         ],
22 |         "@angular-eslint/component-selector": [
23 |           "error",
24 |           {
25 |             "type": "element",
26 |             "prefix": "app",
27 |             "style": "kebab-case"
28 |           }
29 |         ]
30 |       },
31 |       "extends": [
32 |         "plugin:@nx/angular",
33 |         "plugin:@angular-eslint/template/process-inline-templates"
34 |       ]
35 |     },
36 |     {
37 |       "files": [
38 |         "*.html"
39 |       ],
40 |       "extends": [
41 |         "plugin:@nx/angular-template"
42 |       ],
43 |       "rules": {}
44 |     }
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/app.component.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | :host {
  3 |   width: 100%;
  4 |   height: 100%;
  5 |   display: flex;
  6 |   flex-direction: column;
  7 | }
  8 | 
  9 | .header {
 10 |   width: 100%;
 11 |   height: 50px;
 12 | 
 13 |   padding: 0px 24px;
 14 | 
 15 |   z-index: 1;
 16 | 
 17 |   display: flex;
 18 |   align-items: center;
 19 |   text-align: center;
 20 | 
 21 |   font-size: 1.4rem;
 22 |   font-weight: 500;
 23 | 
 24 |   background-color: #039BE5;
 25 |   color: #fafafa;
 26 |   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
 27 | }
 28 | 
 29 | .github-button {
 30 |   width: 24px;
 31 |   height: 24px;
 32 |   fill: #fff;
 33 |   margin-left: auto;
 34 | }
 35 | 
 36 | .content {
 37 |   flex: 1;
 38 |   width: 100%;
 39 |   height: 1px;
 40 | 
 41 |   display: flex;
 42 | }
 43 | 
 44 | .side-nav {
 45 |   width: 200px;
 46 |   height: 100%;
 47 | 
 48 |   display: flex;
 49 |   flex-direction: column;
 50 | 
 51 |   background-color: #f7f7f7;
 52 |   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
 53 | }
 54 | 
 55 | .side-nav__scroll {
 56 |   overflow: auto;
 57 |   padding-top: 30px;
 58 | }
 59 | 
 60 | .side-nav__header {
 61 |   display: flex;
 62 |   align-items: center;
 63 | 
 64 |   height: 50px;
 65 | 
 66 |   padding: 15px 0px 10px 15px;
 67 | 
 68 |   font-weight: 600;
 69 |   font-size: 0.95rem;
 70 | }
 71 | .side-nav__header--item {
 72 |   cursor: pointer;
 73 | }
 74 | .side-nav__header--item:hover {
 75 |   background-color: #e0e0e0;
 76 | }
 77 | 
 78 | .side-nav__header:not(:first-child) {
 79 |   border-top: 1px solid #ccc;
 80 | }
 81 | 
 82 | .side-nav__item, .side-nav__sub-item  {
 83 |   display: flex;
 84 |   height: 50px;
 85 |   align-items: center;
 86 |   transition: background-color 0.3s;
 87 |   cursor: pointer;
 88 | }
 89 | .active-link  {
 90 |   border-left: 5px solid rgba(3, 155, 299, 0.8);
 91 |   background-color: rgba(3, 155, 299, 0.15);
 92 | }
 93 | 
 94 | .side-nav__item:not(.active-link):hover, .side-nav__sub-item:not(.active-link):hover {
 95 |   background-color: #e0e0e0;
 96 | }
 97 | .side-nav__item {
 98 |   padding: 12px 12px 12px 30px;
 99 | }
100 | .side-nav__sub-item {
101 |   padding: 12px 12px 12px 60px;
102 |   font-size: 0.9em;
103 | }
104 | 
105 | .side-nav__accordion {
106 |   /* height: 0px; */
107 |   /* max-height: 0px; */
108 |   overflow: hidden;
109 |   transition: height 0.3s, maxHeight 0.3s;
110 | }
111 | 
112 | .side-nav__accordion-icon {
113 |   margin-left: auto;
114 |   color: #777;
115 | }
116 | 
117 | .container {
118 |   flex: 1;
119 |   overflow: auto;
120 | }
121 | 
122 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-checkbox-will-change/api-checkbox-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-checkbox-will-change',
 5 |   templateUrl: './api-checkbox-will-change.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiCheckboxWillChangeComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-checkbox/api-checkbox.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-checkbox',
 5 |   templateUrl: './api-checkbox.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiCheckboxComponent {
 9 | 
10 |   constructor() { }
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-enums/api-enums.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-enums',
 5 |   templateUrl: './api-enums.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiEnumsComponent {
 9 | 
10 |   constructor() { }
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-hover-will-change/api-hover-will-change.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Hover will-change</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyHoverWillChangeComponent</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">ngx-p-hover[will-change], p-hover[will-change]</span></span>
 8 |     <!-- <span class="content__text">exportAs: <span class="code__highlight">ngxPrettyCheckbox</span></span> -->
 9 |     
10 |     <span class="content__text--header">Properties</span>
11 | 
12 |     <table class="content__table">
13 |       <tr>
14 |         <th>Name</th>
15 |         <th>Description</th>
16 |       </tr>
17 | 
18 | 
19 |       <!-- COLOR -->
20 |       <tr>
21 |         <td>
22 |           <p class="table__text">@Input()</p>
23 |           <p class="table__text">color: PrettyCheckboxColor</p>
24 |         </td>
25 | 
26 |         <td>
27 |             <p class="table__description">
28 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
29 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
30 |             </p>
31 |         </td>
32 |       </tr>
33 |       
34 | 
35 |       <!-- OUTLINE -->
36 |       <tr>
37 |         <td>
38 |           <p class="table__text">@Input()</p>
39 |           <p class="table__text">outline: boolean</p>
40 |         </td>
41 | 
42 |         <td>
43 |             <p class="table__description">
44 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
45 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
46 |             </p>
47 |             <p class="table__description">
48 |               Default value: <span class="table__text--code">false</span>
49 |             <p>
50 |         </td>
51 |       </tr>
52 | 
53 | 
54 |     </table>
55 | 
56 |     
57 |   </div>
58 | </div>
59 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-hover-will-change/api-hover-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-hover-will-change',
 5 |   templateUrl: './api-hover-will-change.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiHoverWillChangeComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-hover/api-hover.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Hover</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyHoverComponent</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">ngx-p-hover:not([will-change]), p-hover:not([will-change])</span></span>
 8 |     <!-- <span class="content__text">exportAs: <span class="code__highlight">ngxPrettyCheckbox</span></span> -->
 9 |     
10 |     <span class="content__text--header">Properties</span>
11 | 
12 |     <table class="content__table">
13 |       <tr>
14 |         <th>Name</th>
15 |         <th>Description</th>
16 |       </tr>
17 | 
18 | 
19 |       <!-- COLOR -->
20 |       <tr>
21 |         <td>
22 |           <p class="table__text">@Attribute('color')</p>
23 |           <p class="table__text">private _color: PrettyCheckboxColor</p>
24 |         </td>
25 | 
26 |         <td>
27 |             <p class="table__description">
28 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
29 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
30 |             </p>
31 |         </td>
32 |       </tr>
33 |       
34 | 
35 |       <!-- OUTLINE -->
36 |       <tr>
37 |         <td>
38 |           <p class="table__text">@Attribute('outline')</p>
39 |           <p class="table__text">private _outline: boolean</p>
40 |         </td>
41 | 
42 |         <td>
43 |             <p class="table__description">
44 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
45 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
46 |             </p>
47 |             <p class="table__description">
48 |               Default value: <span class="table__text--code">false</span>
49 |             <p>
50 |         </td>
51 |       </tr>
52 | 
53 | 
54 |     </table>
55 | 
56 |     
57 |   </div>
58 | </div>
59 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-hover/api-hover.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-hover',
 5 |   templateUrl: './api-hover.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiHoverComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-icon/api-icon.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Icon</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyIconDirective</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">[pIcon], [p-icon]</span></span>
 8 | 
 9 |     
10 |   </div>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-icon/api-icon.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-icon',
 5 |   templateUrl: './api-icon.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiIconComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-image/api-image.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Image</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyImageDirective</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">[pImage], [p-image]</span></span>
 8 |     <!-- <span class="content__text">exportAs: <span class="code__highlight">ngxPrettyCheckbox</span></span> -->
 9 | 
10 |     
11 |   </div>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-image/api-image.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-image',
 5 |   templateUrl: './api-image.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiImageComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-indeterminate-will-change/api-indeterminate-will-change.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Indeterminate will-change</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyIndeterminateWillChangeComponent</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">ngx-p-indeterminate[will-change], p-indeterminate[will-change]</span></span>
 8 | 
 9 |     <span class="content__text--header">Properties</span>
10 | 
11 |     <table class="content__table">
12 |       <tr>
13 |         <th>Name</th>
14 |         <th>Description</th>
15 |       </tr>
16 | 
17 | 
18 |       <!-- COLOR -->
19 |       <tr>
20 |         <td>
21 |           <p class="table__text">@Input()</p>
22 |           <p class="table__text">color: PrettyCheckboxColor</p>
23 |         </td>
24 | 
25 |         <td>
26 |             <p class="table__description">
27 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
28 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
29 |             </p>
30 |         </td>
31 |       </tr>
32 |       
33 | 
34 |       <!-- OUTLINE -->
35 |       <tr>
36 |         <td>
37 |           <p class="table__text">@Input()</p>
38 |           <p class="table__text">outline: boolean</p>
39 |         </td>
40 | 
41 |         <td>
42 |             <p class="table__description">
43 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
44 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
45 |             </p>
46 |             <p class="table__description">
47 |               Default value: <span class="table__text--code">false</span>
48 |             <p>
49 |         </td>
50 |       </tr>
51 | 
52 | 
53 |     </table>
54 | 
55 |     
56 |   </div>
57 | </div>
58 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-indeterminate-will-change/api-indeterminate-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-indeterminate-will-change',
 5 |   templateUrl: './api-indeterminate-will-change.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiIndeterminateWillChangeComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-indeterminate/api-indeterminate.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Indeterminate</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyIndeterminateComponent</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">ngx-p-indeterminate:not([will-change]), p-indeterminate:not([will-change])</span></span>
 8 |     <!-- <span class="content__text">exportAs: <span class="code__highlight">ngxPrettyCheckbox</span></span> -->
 9 |     
10 |     <span class="content__text--header">Properties</span>
11 | 
12 |     <table class="content__table">
13 |       <tr>
14 |         <th>Name</th>
15 |         <th>Description</th>
16 |       </tr>
17 | 
18 |       <!-- COLOR -->
19 |       <tr>
20 |         <td>
21 |           <p class="table__text">@Attribute('color')</p>
22 |           <p class="table__text">private _color: PrettyCheckboxColor</p>
23 |         </td>
24 | 
25 |         <td>
26 |             <p class="table__description">
27 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
28 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
29 |             </p>
30 |         </td>
31 |       </tr>
32 |       
33 | 
34 |       <!-- OUTLINE -->
35 |       <tr>
36 |         <td>
37 |           <p class="table__text">@Attribute('outline')</p>
38 |           <p class="table__text">private _outline: boolean</p>
39 |         </td>
40 | 
41 |         <td>
42 |             <p class="table__description">
43 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
44 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
45 |             </p>
46 |             <p class="table__description">
47 |               Default value: <span class="table__text--code">false</span>
48 |             <p>
49 |         </td>
50 |       </tr>
51 | 
52 | 
53 |     </table>
54 | 
55 |     
56 |   </div>
57 | </div>
58 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-indeterminate/api-indeterminate.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-indeterminate',
 5 |   templateUrl: './api-indeterminate.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiIndeterminateComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-interfaces/api-interfaces.component.html:
--------------------------------------------------------------------------------
  1 | <h4 class="content__header">API - Interfaces</h4>
  2 | 
  3 | <div class="content__body">
  4 | 
  5 | 
  6 |   <!-- PrettyCheckBoxChange -->
  7 |   <div class="content__row flex__column">
  8 |     <h5 class="content__sub-header">PrettyCheckBoxChange</h5>
  9 |     <span class="content__text">Description Description Description Description Description Description</span>
 10 |     
 11 |     <span class="content__text--header">Properties</span>
 12 | 
 13 |     <table class="content__table">
 14 |       <tr>
 15 |         <th>Name</th>
 16 |         <th>Description</th>
 17 |       </tr>
 18 | 
 19 |       <!-- checked -->
 20 |       <tr>
 21 |         <td>
 22 |           <p class="table__text">checked: boolean</p>
 23 |         </td>
 24 | 
 25 |         <td>
 26 |             <p class="table__description">
 27 |               fill Description
 28 |             </p>
 29 |         </td>
 30 |       </tr>
 31 | 
 32 | 
 33 |       <!-- value -->
 34 |       <tr>
 35 |         <td>
 36 |           <p class="table__text">value: string</p>
 37 |         </td>
 38 | 
 39 |         <td>
 40 |             <p class="table__description">
 41 |               Thick Description
 42 |             </p>
 43 |         </td>
 44 |       </tr>
 45 | 
 46 | 
 47 |       <!-- event -->
 48 |       <tr>
 49 |         <td>
 50 |           <p class="table__text">event</p>
 51 |         </td>
 52 | 
 53 |         <td>
 54 |             <p class="table__description">
 55 |               Slim Description
 56 |             </p>
 57 |         </td>
 58 |       </tr>
 59 | 
 60 |     </table>
 61 |     
 62 |   </div>
 63 | 
 64 | 
 65 | 
 66 | 
 67 |   <!-- PrettyRadioChange -->
 68 |   <div class="content__row flex__column">
 69 |     <h5 class="content__sub-header">PrettyRadioChange</h5>
 70 |     <span class="content__text">Description Description Description Description Description Description</span>
 71 |     
 72 |     <span class="content__text--header">Properties</span>
 73 | 
 74 |     <table class="content__table">
 75 |       <tr>
 76 |         <th>Name</th>
 77 |         <th>Description</th>
 78 |       </tr>
 79 | 
 80 |       <!-- checked -->
 81 |       <tr>
 82 |         <td>
 83 |           <p class="table__text">checked: boolean</p>
 84 |         </td>
 85 | 
 86 |         <td>
 87 |             <p class="table__description">
 88 |               Curve Description
 89 |             </p>
 90 |         </td>
 91 |       </tr>
 92 | 
 93 | 
 94 |       <!-- value -->
 95 |       <tr>
 96 |         <td>
 97 |           <p class="table__text">value: string</p>
 98 |         </td>
 99 | 
100 |         <td>
101 |             <p class="table__description">
102 |               Round Description
103 |             </p>
104 |         </td>
105 |       </tr>
106 | 
107 | 
108 |       <!-- event -->
109 |       <tr>
110 |         <td>
111 |           <p class="table__text">event: Event</p>
112 |         </td>
113 | 
114 |         <td>
115 |             <p class="table__description">
116 |               event Description
117 |             </p>
118 |         </td>
119 |       </tr>
120 | 
121 |     </table>
122 |     
123 |   </div>
124 | 
125 | 
126 | </div>
127 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-interfaces/api-interfaces.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-interfaces',
 5 |   templateUrl: './api-interfaces.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiInterfacesComponent {
 9 | 
10 |   constructor() { }
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-radio-group/api-radio-group.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Radio group</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyRadioGroupDirective</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">ngx-pretty-radio-group, p-radio-group</span></span>
 8 |     <span class="content__text">exportAs: <span class="code__highlight">ngxRadioGroup</span></span>
 9 |     
10 |     <span class="content__text--header">Properties</span>
11 | 
12 |     <table class="content__table">
13 |       <tr>
14 |         <th>Name</th>
15 |         <th>Description</th>
16 |       </tr>
17 | 
18 |       <!-- CHANGE -->
19 |       <tr>
20 |         <td>
21 |           <p class="table__text">@Output()</p>
22 |           <p class="table__text">change: EventEmitter&lt;PrettyRadioChange&gt;</p>
23 |         </td>
24 | 
25 |         <td>
26 |             <p class="table__description">
27 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
28 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
29 |             </p>
30 |         </td>
31 |       </tr>
32 | 
33 | 
34 | 
35 | 
36 |     </table>
37 |     
38 |   </div>
39 | </div>
40 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-radio-group/api-radio-group.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-radio-group',
 5 |   templateUrl: './api-radio-group.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiRadioGroupComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-radio-will-change/api-radio-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-radio-will-change',
 5 |   templateUrl: './api-radio-will-change.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class RadioWillChangeApiComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-radio/api-radio.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-radio',
 5 |   templateUrl: './api-radio.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiRadioComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-svg/api-svg.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Svg</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettySvgDirective</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">[pSvg], [p-svg]</span></span>
 8 |     <!-- <span class="content__text">exportAs: <span class="code__highlight">ngxPrettyCheckbox</span></span> -->
 9 | 
10 |     
11 |   </div>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-svg/api-svg.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-svg',
 5 |   templateUrl: './api-svg.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiSvgComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-toggle-will-change/api-toggle-will-change.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Toggle will-change</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyToggleWillChangeComponent</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">ngx-p-toggle[will-change], p-toggle[will-change]</span></span>
 8 |     <!-- <span class="content__text">exportAs: <span class="code__highlight">ngxPrettyCheckbox</span></span> -->
 9 |     
10 |     <span class="content__text--header">Properties</span>
11 | 
12 |     <table class="content__table">
13 |       <tr>
14 |         <th>Name</th>
15 |         <th>Description</th>
16 |       </tr>
17 | 
18 | 
19 |       <!-- TYPE -->
20 |       <tr>
21 |         <td>
22 |           <p class="table__text">@Input()</p>
23 |           <p class="table__text">type: PrettyCheckBoxToggleType</p>
24 |         </td>
25 | 
26 |         <td>
27 |             <p class="table__description">
28 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
29 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
30 |             </p>
31 |         </td>
32 |       </tr>
33 | 
34 | 
35 |       <!-- COLOR -->
36 |       <tr>
37 |         <td>
38 |           <p class="table__text">@Input()</p>
39 |           <p class="table__text">color: PrettyCheckboxColor</p>
40 |         </td>
41 | 
42 |         <td>
43 |             <p class="table__description">
44 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
45 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
46 |             </p>
47 |         </td>
48 |       </tr>
49 |       
50 | 
51 |       <!-- OUTLINE -->
52 |       <tr>
53 |         <td>
54 |           <p class="table__text">@Input()</p>
55 |           <p class="table__text">outline: boolean</p>
56 |         </td>
57 | 
58 |         <td>
59 |             <p class="table__description">
60 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
61 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
62 |             </p>
63 |             <p class="table__description">
64 |               Default value: <span class="table__text--code">false</span>
65 |             <p>
66 |         </td>
67 |       </tr>
68 | 
69 | 
70 |     </table>
71 | 
72 |     
73 |   </div>
74 | </div>
75 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-toggle-will-change/api-toggle-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-toggle-will-change',
 5 |   templateUrl: './api-toggle-will-change.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiToggleWillChangeComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-toggle/api-toggle.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">API - Toggle</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <div class="content__row flex__column">
 6 |     <h5 class="content__sub-header">NgxPrettyToggleComponent</h5>
 7 |     <span class="content__text">selector: <span class="code__highlight">ngx-p-toggle:not([will-change]), p-toggle:not([will-change])</span></span>
 8 |     <!-- <span class="content__text">exportAs: <span class="code__highlight">ngxPrettyCheckbox</span></span> -->
 9 |     
10 |     <span class="content__text--header">Properties</span>
11 | 
12 |     <table class="content__table">
13 |       <tr>
14 |         <th>Name</th>
15 |         <th>Description</th>
16 |       </tr>
17 | 
18 | 
19 |       <!-- TYPE -->
20 |       <tr>
21 |         <td>
22 |           <p class="table__text">@Attribute('type')</p>
23 |           <p class="table__text">private _type: PrettyCheckBoxToggleType</p>
24 |         </td>
25 | 
26 |         <td>
27 |             <p class="table__description">
28 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
29 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
30 |             </p>
31 |         </td>
32 |       </tr>
33 | 
34 | 
35 |       <!-- COLOR -->
36 |       <tr>
37 |         <td>
38 |           <p class="table__text">@Attribute('color')</p>
39 |           <p class="table__text">private _color: PrettyCheckboxColor</p>
40 |         </td>
41 | 
42 |         <td>
43 |             <p class="table__description">
44 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
45 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
46 |             </p>
47 |         </td>
48 |       </tr>
49 |       
50 | 
51 |       <!-- OUTLINE -->
52 |       <tr>
53 |         <td>
54 |           <p class="table__text">@Attribute('outline')</p>
55 |           <p class="table__text">private _outline: boolean</p>
56 |         </td>
57 | 
58 |         <td>
59 |             <p class="table__description">
60 |               <!-- Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the
61 |               <span class="table__text--code">MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</span> token. -->
62 |             </p>
63 |             <p class="table__description">
64 |               Default value: <span class="table__text--code">false</span>
65 |             <p>
66 |         </td>
67 |       </tr>
68 | 
69 | 
70 |     </table>
71 | 
72 |     
73 |   </div>
74 | </div>
75 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/api-toggle/api-toggle.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-api-toggle',
 5 |   templateUrl: './api-toggle.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ApiToggleComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/card/card.component.html:
--------------------------------------------------------------------------------
 1 | <div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-button mdl-js-button">
 2 |       
 3 |     <div *ngIf="title" class="mdl-card__title">
 4 |       <h2 class="mdl-card__title-text">{{title}}</h2>
 5 |     </div>
 6 |       
 7 |     <div class="mdl-card__supporting-text">
 8 |         <ng-content></ng-content>
 9 |     </div>
10 |       
11 |   </div>


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/card/card.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-card',
 5 |   templateUrl: './card.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 25px;
 9 |     }
10 |     .demo-card-wide.mdl-card {
11 |       width: 250px;
12 |       min-height: initial;
13 |       height: auto;
14 |       text-transform: none;
15 |       text-align: left;
16 |       padding: 16px;
17 |     }
18 | 
19 |     .mdl-card__supporting-text {
20 |       padding: 0px;
21 |     }
22 | 
23 |     .mdl-card__title {
24 |       padding: 0px;
25 |     }
26 | 
27 |     .mdl-card__title-text {
28 |       font-size: 20px;
29 |       font-weight: 500;
30 |       margin-bottom: 8px;
31 |     }
32 |   `],
33 |   changeDetection: ChangeDetectionStrategy.OnPush
34 | })
35 | export class CardComponent implements OnInit {
36 | 
37 |   @Input() title: string;
38 | 
39 |   constructor() { }
40 | 
41 |   ngOnInit() {
42 |   }
43 | 
44 | }
45 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/code/code.component.html:
--------------------------------------------------------------------------------
1 | <pre>
2 |   <code [class]="type">
3 |       <ng-content></ng-content>
4 |   </code
5 | ></pre>


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/code/code.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, AfterViewInit, Input, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-code',
 5 |   templateUrl: './code.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class CodeComponent implements AfterViewInit {
 9 | 
10 |   @Input() type = 'html';
11 | 
12 |   constructor() { }
13 | 
14 |   ngAfterViewInit() {
15 | 
16 |   }
17 | 
18 | }
19 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/content-set-indeterminate/content-set-indeterminate.component.html:
--------------------------------------------------------------------------------
 1 | <div class="content__method">
 2 |   <div class="content__method--header">setIndeterminate</div>
 3 |   <div class="content__method--description">
 4 |       In addition to the checked and unchecked states,
 5 |       there is a third state a checkbox can be in:
 6 |       <span class="table__text--code">indeterminate</span>.
 7 |       This is a state in which it's impossible to say whether the item is toggled on or off.
 8 |       This is set using the HTMLInputElement object's indeterminate property via JavaScript (it cannot be set using an HTML attribute)
 9 |   </div>
10 | </div>


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/content-set-indeterminate/content-set-indeterminate.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-content-set-indeterminate',
 5 |   templateUrl: './content-set-indeterminate.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class ContentSetIndeterminateComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-all/demo-checkbox-all.component.html:
--------------------------------------------------------------------------------
1 | <h4 class="content__header">Checkbox : All Features</h4>
2 | 
3 | <iframe src="https://stackblitz.com/edit/ngx-pretty-checkbox?ctl=1&embed=1&file=src/app/app.component.html&hideExplorer=1&hideNavigation=1&view=preview" frameborder="0"></iframe>
4 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-all/demo-checkbox-all.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-all',
 5 |   templateUrl: './demo-checkbox-all.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class DemoCheckboxAllComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-jelly/demo-checkbox-animation-jelly.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Animation (Jelly)</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 | 
 6 |   <!-- Interested -->
 7 |   <div class="content__row">
 8 | 
 9 |       <div class="content__demo">
10 |         <p-checkbox shape="round" color="info" animation="jelly">
11 |           <i p-icon class="material-icons">done</i>
12 |           Interested
13 |         </p-checkbox>
14 |       </div>
15 | 
16 |       <div class="content__code">
17 |         <textarea highlight-js [options]="{}" lang="html">
18 | <p-checkbox shape="round" color="info" animation="jelly">
19 |   <i p-icon class="material-icons">done</i>
20 |   Interested
21 | </p-checkbox>
22 |             </textarea>
23 |       </div>
24 | 
25 |     </div>
26 | 
27 | 
28 |   <!-- All -->
29 |   <div class="content__row">
30 | 
31 |     <div class="content__demo">
32 |       <p-checkbox animation="jelly">
33 |         <i p-icon class="material-icons">done_all</i>
34 |         All
35 |       </p-checkbox>
36 |     </div>
37 | 
38 |     <div class="content__code">
39 |       <textarea highlight-js [options]="{}" lang="html">
40 | <p-checkbox animation="jelly">
41 |   <i p-icon class="material-icons">done_all</i>
42 |   All
43 | </p-checkbox>
44 |             </textarea>
45 |     </div>
46 | 
47 |   </div>
48 | 
49 | 
50 |   <!-- Bug -->
51 |   <div class="content__row">
52 | 
53 |       <div class="content__demo">
54 |         <p-checkbox shape="curve" color="danger" animation="jelly">
55 |           <i p-icon class="material-icons">bug_report</i>
56 |           Bug
57 |         </p-checkbox>
58 |       </div>
59 | 
60 |       <div class="content__code">
61 |         <textarea highlight-js [options]="{}" lang="html">
62 | <p-checkbox shape="curve" color="danger" animation="jelly">
63 |   <i p-icon class="material-icons">bug_report</i>
64 |   Bug
65 | </p-checkbox>
66 |               </textarea>
67 |       </div>
68 | 
69 |     </div>
70 | 
71 | 
72 | </div>
73 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-jelly/demo-checkbox-animation-jelly.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-animation-jelly',
 5 |   templateUrl: './demo-checkbox-animation-jelly.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxAnimationJellyComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 
23 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-pulse/demo-checkbox-animation-pulse.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Animation (Pulse)</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 | 
 6 |   <!-- Allow -->
 7 |   <div class="content__row">
 8 | 
 9 |     <div class="content__demo">
10 |       <p-checkbox shape="round" color="success" animation="pulse">
11 |         <i p-icon class="material-icons">done</i>
12 |         Allow
13 |       </p-checkbox>
14 |     </div>
15 | 
16 |     <div class="content__code">
17 |       <textarea highlight-js [options]="{}" lang="html">
18 | <p-checkbox shape="round" color="success" animation="pulse">
19 |   <i p-icon class="material-icons">done</i>
20 |   Allow
21 | </p-checkbox>
22 |             </textarea>
23 |     </div>
24 | 
25 |   </div>
26 | 
27 | 
28 |   <!-- Occasionally -->
29 |   <div class="content__row">
30 | 
31 |     <div class="content__demo">
32 |       <p-checkbox stroke="thick" outline="true" color="warning" animation="pulse">
33 |         Occasionally
34 |       </p-checkbox>
35 |     </div>
36 | 
37 |     <div class="content__code">
38 |       <textarea highlight-js [options]="{}" lang="html">
39 | <p-checkbox stroke="thick" outline="true" color="warning" animation="pulse">
40 |   Occasionally
41 | </p-checkbox>
42 |             </textarea>
43 |     </div>
44 | 
45 |   </div>
46 | 
47 | 
48 | </div>
49 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-pulse/demo-checkbox-animation-pulse.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-animation-pulse',
 5 |   templateUrl: './demo-checkbox-animation-pulse.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoAnimationCheckboxPulseComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-rotate/demo-checkbox-animation-rotate.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Animation (Rotate)</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 | 
 6 |   <!-- Good -->
 7 |   <div class="content__row">
 8 | 
 9 |       <div class="content__demo">
10 |         <p-checkbox shape="curve" color="success" animation="rotate">
11 |           <i p-icon class="material-icons">done</i>
12 |           Good
13 |         </p-checkbox>
14 |       </div>
15 | 
16 |       <div class="content__code">
17 |         <textarea highlight-js [options]="{}" lang="html">
18 | <p-checkbox shape="curve" color="success" animation="rotate">
19 |   <i p-icon class="material-icons">done</i>
20 |   Good
21 | </p-checkbox>
22 |             </textarea>
23 |       </div>
24 | 
25 |     </div>
26 | 
27 | 
28 |   <!-- Cancel -->
29 |   <div class="content__row">
30 | 
31 |     <div class="content__demo">
32 |       <p-checkbox color="danger" outline="true" animation="rotate">
33 |         <i p-icon class="material-icons">clear</i>
34 |         Cancel
35 |       </p-checkbox>
36 |     </div>
37 | 
38 |     <div class="content__code">
39 |       <textarea highlight-js [options]="{}" lang="html">
40 | <p-checkbox color="danger" outline="true" animation="rotate">
41 |   <i p-icon class="material-icons">clear</i>
42 |   Cancel
43 | </p-checkbox>
44 |             </textarea>
45 |     </div>
46 | 
47 |   </div>
48 | 
49 | 
50 | 
51 | </div>
52 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-rotate/demo-checkbox-animation-rotate.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-animation-rotate',
 5 |   templateUrl: './demo-checkbox-animation-rotate.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxAnimationRotateComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-smooth/demo-checkbox-animation-smooth.component.html:
--------------------------------------------------------------------------------
  1 | <h4 class="content__header">Checkbox : Animation (Smooth)</h4>
  2 | 
  3 | <div class="content__body">
  4 | 
  5 |   <!-- Monday -->
  6 |   <div class="content__row">
  7 | 
  8 |     <div class="content__demo">
  9 |       <p-checkbox shape="round" color="primary" animation="smooth">
 10 |         Monday
 11 |       </p-checkbox>
 12 |     </div>
 13 | 
 14 |     <div class="content__code">
 15 |       <textarea highlight-js [options]="{}" lang="html">
 16 | <p-checkbox shape="round" color="primary" animation="smooth">
 17 |     Monday
 18 | </p-checkbox>
 19 |             </textarea>
 20 |     </div>
 21 | 
 22 |   </div>
 23 | 
 24 | 
 25 |   <!-- Tuesday -->
 26 |   <div class="content__row">
 27 | 
 28 |     <div class="content__demo">
 29 |       <p-checkbox shape="round" color="success" animation="smooth">
 30 |         <i p-icon class="material-icons">done</i>
 31 |         Tuesday
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |       <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox shape="round" color="success" animation="smooth">
 38 |   <i p-icon class="material-icons">done</i>
 39 |   Tuesday
 40 | </p-checkbox>
 41 |           </textarea>
 42 |     </div>
 43 | 
 44 |   </div>
 45 | 
 46 | 
 47 |   <!-- Wednesday -->
 48 |   <div class="content__row">
 49 | 
 50 |     <div class="content__demo">
 51 |       <p-checkbox color="danger" outline="true" animation="smooth">
 52 |         <i p-icon class="material-icons">clear</i>
 53 |         Wednesday
 54 |       </p-checkbox>
 55 |     </div>
 56 | 
 57 |     <div class="content__code">
 58 |       <textarea highlight-js [options]="{}" lang="html">
 59 | <p-checkbox color="danger" outline="true" animation="smooth">
 60 |   <i p-icon class="material-icons">clear</i>
 61 |   Wednesday
 62 | </p-checkbox>
 63 |               </textarea>
 64 |     </div>
 65 | 
 66 |   </div>
 67 | 
 68 | 
 69 |   <!-- Thursday -->
 70 |   <div class="content__row">
 71 | 
 72 |     <div class="content__demo">
 73 |       <p-checkbox shape="curve" color="warning" animation="smooth">
 74 |           Thursday
 75 |       </p-checkbox>
 76 |     </div>
 77 | 
 78 |     <div class="content__code">
 79 |       <textarea highlight-js [options]="{}" lang="html">
 80 | <p-checkbox shape="curve" color="warning" animation="smooth">
 81 |   Thursday
 82 | </p-checkbox>
 83 |       </textarea>
 84 |     </div>
 85 | 
 86 |   </div>
 87 | 
 88 | 
 89 |   <!-- Friday -->
 90 |   <div class="content__row">
 91 | 
 92 |     <div class="content__demo">
 93 |       <p-checkbox shape="curve" color="danger" outline="true" animation="smooth">
 94 |         Friday
 95 |       </p-checkbox>
 96 |     </div>
 97 | 
 98 |     <div class="content__code">
 99 |       <textarea highlight-js [options]="{}" lang="html">
100 | <p-checkbox shape="curve" color="danger" outline="true" animation="smooth">
101 |   Friday
102 | </p-checkbox>
103 |       </textarea>
104 |     </div>
105 | 
106 |   </div>
107 | 
108 | </div>
109 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-smooth/demo-checkbox-animation-smooth.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-animation-smooth',
 5 |   templateUrl: './demo-checkbox-animation-smooth.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxAnimationSmoothComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-tada/demo-checkbox-animation-tada.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Animation (Tada)</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 | 
 6 |   <!-- Good -->
 7 |   <div class="content__row">
 8 | 
 9 |       <div class="content__demo">
10 |         <p-checkbox shape="round" color="info" outline="true" animation="tada">
11 |           <i p-icon class="material-icons">favorite</i>
12 |           Good
13 |         </p-checkbox>
14 |       </div>
15 | 
16 |       <div class="content__code">
17 |         <textarea highlight-js [options]="{}" lang="html">
18 | <p-checkbox shape="round" color="info" outline="true" animation="tada">
19 |   <i p-icon class="material-icons">favorite</i>
20 |   Good
21 | </p-checkbox>
22 |             </textarea>
23 |       </div>
24 | 
25 |     </div>
26 | 
27 | 
28 |   <!-- Money -->
29 |   <div class="content__row">
30 | 
31 |     <div class="content__demo">
32 |       <p-checkbox animation="tada" plain="true">
33 |         <i p-icon class="material-icons">attach_money</i>
34 |         Money
35 |       </p-checkbox>
36 |     </div>
37 | 
38 |     <div class="content__code">
39 |       <textarea highlight-js [options]="{}" lang="html">
40 | <p-checkbox animation="tada" plain="true">
41 |   <i p-icon class="material-icons">attach_money</i>
42 |   Money
43 | </p-checkbox>
44 |             </textarea>
45 |     </div>
46 | 
47 |   </div>
48 | 
49 | 
50 |   <!-- Lock -->
51 |   <div class="content__row">
52 | 
53 |       <div class="content__demo">
54 |         <p-checkbox shape="curve" color="danger" animation="tada">
55 |           <i p-icon class="material-icons">https</i>
56 |           Lock
57 |         </p-checkbox>
58 |       </div>
59 | 
60 |       <div class="content__code">
61 |         <textarea highlight-js [options]="{}" lang="html">
62 | <p-checkbox shape="curve" color="danger" animation="tada">
63 |   <i p-icon class="material-icons">https</i>
64 |   Lock
65 | </p-checkbox>
66 |               </textarea>
67 |       </div>
68 | 
69 |     </div>
70 | 
71 | 
72 | </div>
73 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation-tada/demo-checkbox-animation-tada.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-animation-tada',
 5 |   templateUrl: './demo-checkbox-animation-tada.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxAnimationTadaComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-animation/demo-checkbox-animation.component.ts:
--------------------------------------------------------------------------------
 1 | import { OnInit, ChangeDetectionStrategy, Component } from '@angular/core';
 2 | import { PrettyCheckboxAnimation } from '@lib/ngx-pretty-checkbox';
 3 | 
 4 | @Component({
 5 |   selector: 'app-demo-checkbox-animation',
 6 |   templateUrl: './demo-checkbox-animation.component.html',
 7 |   styles: [`
 8 |     :host {
 9 |       margin: 20px;
10 |       display: block;
11 |     }
12 |   `],
13 |   changeDetection: ChangeDetectionStrategy.OnPush
14 | })
15 | export class DemoCheckboxAnimationComponent implements OnInit {
16 | 
17 |   animation: PrettyCheckboxAnimation;
18 |   constructor() { }
19 | 
20 |   ngOnInit() {
21 |   }
22 | 
23 | }
24 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-basic/demo-checkbox-basic.component.html:
--------------------------------------------------------------------------------
  1 | <h4 class="content__header">Checkbox : Basic</h4>
  2 | 
  3 | <div class="content__body">
  4 | 
  5 |   <!-- Default -->
  6 |   <div class="content__row">
  7 | 
  8 |     <div class="content__demo">
  9 |       <p-checkbox>
 10 |           Default
 11 |       </p-checkbox>
 12 |     </div>
 13 | 
 14 |     <div class="content__code">
 15 |         <textarea highlight-js [options]="{}" lang="html">
 16 | <p-checkbox>
 17 |   Default
 18 | </p-checkbox>
 19 |           </textarea>
 20 |     </div>
 21 | 
 22 |   </div>
 23 | 
 24 | 
 25 |   <!-- Fill -->
 26 |   <div class="content__row">
 27 | 
 28 |     <div class="content__demo">
 29 |       <p-checkbox stroke="fill">
 30 |           Fill
 31 |       </p-checkbox>
 32 |     </div>
 33 | 
 34 |     <div class="content__code">
 35 |         <textarea highlight-js [options]="{}" lang="html">
 36 | <p-checkbox stroke="fill">
 37 |   Fill
 38 | </p-checkbox>
 39 |           </textarea>
 40 |     </div>
 41 | 
 42 |   </div>
 43 | 
 44 | 
 45 |   <!-- Thick -->
 46 |   <div class="content__row">
 47 | 
 48 |     <div class="content__demo">
 49 |         <p-checkbox stroke="thick">
 50 |             Thick
 51 |         </p-checkbox>
 52 |     </div>
 53 | 
 54 |     <div class="content__code">
 55 |         <textarea highlight-js [options]="{}" lang="html">
 56 | <p-checkbox stroke="thick">
 57 |   Thick
 58 | </p-checkbox>
 59 |           </textarea>
 60 |     </div>
 61 | 
 62 |   </div>
 63 | 
 64 | 
 65 | </div>
 66 | 
 67 | 
 68 | 
 69 | <h5 class="content__header--secondary">Run-Time change</h5>
 70 | 
 71 | <div class="content__body">
 72 | 
 73 |   <!-- run-time -->
 74 |   <div class="content__row">
 75 | 
 76 |     <div class="content__demo flex__column">
 77 | 
 78 |       <div class="content__demo--action">
 79 |         <span class="content__demo--action-text">Stroke:</span>
 80 |         <select [(ngModel)]="stroke">
 81 |           <option>Default</option>
 82 |           <option value="fill">Fill</option>
 83 |           <option value="thick">Thick</option>
 84 |           <option value="slim">Slim</option>
 85 |         </select>
 86 |       </div>
 87 | 
 88 |       <p-checkbox will-change [stroke]="stroke">
 89 |           Run-time changeable
 90 |       </p-checkbox>
 91 | 
 92 |     </div>
 93 | 
 94 |     <div class="content__code">
 95 |         <textarea highlight-js [options]="{}" lang="html">
 96 | <p-checkbox will-change [stroke]="stroke">
 97 |     Label text
 98 | </p-checkbox>
 99 |           </textarea>
100 | 
101 |           <textarea highlight-js [options]="{}" lang="typescript">
102 | @Component({ ... })
103 | export class ... {
104 |   stroke: PrettyCheckboxStroke;
105 | }
106 |           </textarea>
107 |     </div>
108 | 
109 |   </div>
110 | 
111 | </div>
112 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-basic/demo-checkbox-basic.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | import { PrettyCheckboxStroke } from '@lib/ngx-pretty-checkbox';
 3 | 
 4 | @Component({
 5 |   selector: 'app-demo-checkbox-basic',
 6 |   templateUrl: './demo-checkbox-basic.component.html',
 7 |   styles: [`
 8 |     :host {
 9 |       margin: 20px;
10 |       display: block;
11 |     }
12 |   `],
13 |   changeDetection: ChangeDetectionStrategy.OnPush
14 | })
15 | export class DemoCheckboxBasicComponent implements OnInit {
16 | 
17 |   stroke: PrettyCheckboxStroke;
18 | 
19 |   constructor() { }
20 | 
21 |   ngOnInit() {
22 |   }
23 | 
24 | }
25 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-color/demo-checkbox-color.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | import { PrettyCheckboxColor } from '@lib/ngx-pretty-checkbox';
 3 | 
 4 | @Component({
 5 |   selector: 'app-demo-checkbox-color',
 6 |   templateUrl: './demo-checkbox-color.component.html',
 7 |   styles: [`
 8 |     :host {
 9 |       margin: 20px;
10 |       display: block;
11 |     }
12 |   `],
13 |   changeDetection: ChangeDetectionStrategy.OnPush
14 | })
15 | export class DemoCheckboxColorComponent implements OnInit {
16 | 
17 |   color: PrettyCheckboxColor;
18 | 
19 |   constructor() { }
20 | 
21 |   ngOnInit() {
22 |   }
23 | 
24 | }
25 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-disable/demo-checkbox-disable.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Disable</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Checked -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo">
 9 |       <p-checkbox shape="round" color="success" checked="true" disabled="true">
10 |         <i p-icon class="material-icons">done</i>
11 |         Checked
12 |       </p-checkbox>
13 |     </div>
14 | 
15 |     <div class="content__code">
16 |       <textarea highlight-js [options]="{}" lang="html">
17 | <p-checkbox shape="round" color="success" checked="true" disabled="true">
18 |   <i p-icon class="material-icons">done</i>
19 |   Checked
20 | </p-checkbox>
21 |           </textarea>
22 |     </div>
23 | 
24 |   </div>
25 | 
26 | 
27 |   <!-- Not Checked -->
28 |   <div class="content__row">
29 | 
30 |     <div class="content__demo">
31 |       <p-checkbox shape="round" disabled="true">
32 |         Not Checked
33 |       </p-checkbox>
34 |     </div>
35 | 
36 |     <div class="content__code">
37 |       <textarea highlight-js [options]="{}" lang="html">
38 | <p-checkbox shape="round" disabled="true">
39 |     Not Checked
40 | </p-checkbox>
41 |           </textarea>
42 |     </div>
43 | 
44 |   </div>
45 | 
46 | 
47 | </div>
48 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-disable/demo-checkbox-disable.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-disable',
 5 |   templateUrl: './demo-checkbox-disable.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxDisableComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-font-icon/demo-checkbox-font-icon.component.html:
--------------------------------------------------------------------------------
  1 | <h4 class="content__header">Checkbox : Font Icon</h4>
  2 | 
  3 | <div class="content__body">
  4 | 
  5 |   <!-- PAY BILLS -->
  6 |   <div class="content__row">
  7 | 
  8 |     <div class="content__demo">
  9 |       <p-checkbox shape="round">
 10 |         <i p-icon class="material-icons">done</i>
 11 |         Pay Bills
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox shape="round">
 18 |   <i p-icon class="material-icons">done</i>
 19 |   Pay Bills
 20 | </p-checkbox>
 21 |           </textarea>
 22 |     </div>
 23 | 
 24 |   </div>
 25 | 
 26 | 
 27 |   <!-- FUEL REFILL -->
 28 |   <div class="content__row">
 29 | 
 30 |     <div class="content__demo">
 31 |       <p-checkbox shape="curve">
 32 |         <i p-icon class="material-icons">clear</i>
 33 |         Fuel refill
 34 |       </p-checkbox>
 35 |     </div>
 36 | 
 37 |     <div class="content__code">
 38 |         <textarea highlight-js [options]="{}" lang="html">
 39 | <p-checkbox shape="curve">
 40 |   <i p-icon class="material-icons">clear</i>
 41 |   Fuel refill
 42 | </p-checkbox>
 43 |         </textarea>
 44 |     </div>
 45 | 
 46 |   </div>
 47 | 
 48 | 
 49 |   <!-- BUY GROCERIES -->
 50 |   <div class="content__row">
 51 | 
 52 |     <div class="content__demo">
 53 |         <p-checkbox>
 54 |             <i p-icon class="material-icons">done_outline</i>
 55 |             Buy groceries
 56 |         </p-checkbox>
 57 |     </div>
 58 | 
 59 |     <div class="content__code">
 60 |         <textarea highlight-js [options]="{}" lang="html">
 61 | <p-checkbox>
 62 |   <i p-icon class="material-icons">done_outline</i>
 63 |   Buy groceries
 64 | </p-checkbox>
 65 |           </textarea>
 66 |     </div>
 67 | 
 68 |   </div>
 69 | 
 70 | 
 71 | </div>
 72 | 
 73 | 
 74 | <!--
 75 | <h5 class="content__header--secondary">Run-Time change</h5>
 76 | 
 77 | <div class="content__body">
 78 | 
 79 |   <div class="content__row">
 80 | 
 81 |     <div class="content__demo flex__column">
 82 | 
 83 |       <div class="content__demo--action">
 84 |         <span class="content__demo--action-text">Stroke:</span>
 85 |         <select [(ngModel)]="stroke">
 86 |           <option>Default</option>
 87 |           <option value="fill">Fill</option>
 88 |           <option value="thick">Thick</option>
 89 |           <option value="slim">Slim</option>
 90 |         </select>
 91 |       </div>
 92 | 
 93 |       <p-checkbox will-change [stroke]="stroke">
 94 |           Run-time changeable
 95 |       </p-checkbox>
 96 | 
 97 |     </div>
 98 | 
 99 |     <div class="content__code">
100 |         <textarea highlight-js [options]="{}" lang="html">
101 | <p-checkbox will-change [stroke]="stroke">
102 |     Label text
103 | </p-checkbox>
104 |           </textarea>
105 | 
106 |           <textarea highlight-js [options]="{}" lang="typescript">
107 | @Component({ ... })
108 | export class ... {
109 |   stroke: PrettyCheckboxStroke;
110 | }
111 |           </textarea>
112 |     </div>
113 | 
114 |   </div>
115 | 
116 | </div> -->
117 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-font-icon/demo-checkbox-font-icon.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-font-icon',
 5 |   templateUrl: './demo-checkbox-font-icon.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxFontIconComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-image/demo-checkbox-image.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Image</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Agree -->
 6 |   <div class="content__row">
 7 |     <div class="content__demo">
 8 |       <p-checkbox plain="true">
 9 |         <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/001.png" p-image>
10 |         Agree
11 |       </p-checkbox>
12 |     </div>
13 | 
14 |     <div class="content__code">
15 |         <textarea highlight-js [options]="{}" lang="html">
16 | <p-checkbox plain="true">
17 |   <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/001.png" p-image>
18 |   Agree
19 | </p-checkbox>
20 |           </textarea>
21 |     </div>
22 | 
23 |   </div>
24 | 
25 | 
26 |   <!-- Subscribe -->
27 |   <div class="content__row">
28 | 
29 |     <div class="content__demo">
30 |       <p-checkbox plain="true">
31 |         <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/002.png" p-image>
32 |         Subscribe
33 |       </p-checkbox>
34 |     </div>
35 | 
36 |     <div class="content__code">
37 |         <textarea highlight-js [options]="{}" lang="html">
38 | <p-checkbox plain="true">
39 |   <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/002.png" p-image>
40 |   Subscribe
41 | </p-checkbox>
42 |         </textarea>
43 |     </div>
44 | 
45 |   </div>
46 | 
47 | 
48 |   <!-- Cancel -->
49 |   <div class="content__row">
50 | 
51 |     <div class="content__demo">
52 |         <p-checkbox plain="true">
53 |           <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/003.png" p-image>
54 |             Cancel
55 |         </p-checkbox>
56 |     </div>
57 | 
58 |     <div class="content__code">
59 |         <textarea highlight-js [options]="{}" lang="html">
60 | <p-checkbox plain="true">
61 |   <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/003.png" p-image>
62 |   Cancel
63 | </p-checkbox>
64 |           </textarea>
65 |     </div>
66 | 
67 |   </div>
68 | 
69 | 
70 |   <!-- Yes -->
71 |   <div class="content__row">
72 | 
73 |     <div class="content__demo">
74 |         <p-checkbox plain="true">
75 |           <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/004.png" p-image>
76 |           Yes
77 |         </p-checkbox>
78 |     </div>
79 | 
80 |     <div class="content__code">
81 |         <textarea highlight-js [options]="{}" lang="html">
82 | <p-checkbox plain="true">
83 |   <img src="https://lokesh-coder.github.io/pretty-checkbox/img/checked/004.png" p-image>
84 |   Yes
85 | </p-checkbox>
86 |           </textarea>
87 |     </div>
88 | 
89 |   </div>
90 | 
91 | 
92 | </div>
93 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-image/demo-checkbox-image.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-image',
 5 |   templateUrl: './demo-checkbox-image.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxImageComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-lock/demo-checkbox-lock.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Lock</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Checked -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo">
 9 |       <p-checkbox shape="round" color="success" checked="true" lock="true">
10 |         <i p-icon class="material-icons">done</i>
11 |         Checked
12 |       </p-checkbox>
13 |     </div>
14 | 
15 |     <div class="content__code">
16 |       <textarea highlight-js [options]="{}" lang="html">
17 | <p-checkbox shape="round" color="success" checked="true" lock="true">
18 |   <i p-icon class="material-icons">done</i>
19 |   Checked
20 | </p-checkbox>
21 |           </textarea>
22 |     </div>
23 | 
24 |   </div>
25 | 
26 | 
27 |   <!-- Not Checked -->
28 |   <div class="content__row">
29 | 
30 |     <div class="content__demo">
31 |       <p-checkbox shape="round" lock="true">
32 |         Not Checked
33 |       </p-checkbox>
34 |     </div>
35 | 
36 |     <div class="content__code">
37 |       <textarea highlight-js [options]="{}" lang="html">
38 | <p-checkbox shape="round" lock="true">
39 |     Not Checked
40 | </p-checkbox>
41 |           </textarea>
42 |     </div>
43 | 
44 |   </div>
45 | 
46 | 
47 | </div>
48 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-lock/demo-checkbox-lock.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-lock',
 5 |   templateUrl: './demo-checkbox-lock.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxLockComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-color/demo-checkbox-mixed-color.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Color)</h5>
  2 | 
  3 | <div class="content__body">
  4 | 
  5 |   <!-- Primary and Fill -->
  6 |   <div class="content__row">
  7 | 
  8 |     <div class="content__demo">
  9 |       <p-checkbox color="primary" stroke="fill">
 10 |         Fill
 11 |       </p-checkbox>
 12 |     </div>
 13 | 
 14 |     <div class="content__code">
 15 |         <textarea highlight-js [options]="{}" lang="html">
 16 | <p-checkbox color="primary" stroke="fill">
 17 |   Fill
 18 | </p-checkbox>
 19 |           </textarea>
 20 |     </div>
 21 | 
 22 |   </div>
 23 | 
 24 | 
 25 |   <!-- Success and Thick -->
 26 |   <div class="content__row">
 27 | 
 28 |     <div class="content__demo">
 29 |       <p-checkbox color="success" stroke="thick">
 30 |         Thick
 31 |       </p-checkbox>
 32 |     </div>
 33 | 
 34 |     <div class="content__code">
 35 |         <textarea highlight-js [options]="{}" lang="html">
 36 | <p-checkbox color="success" stroke="thick">
 37 |   Thick
 38 | </p-checkbox>
 39 |           </textarea>
 40 |     </div>
 41 | 
 42 |   </div>
 43 | 
 44 | 
 45 |   <!-- Info and Curve -->
 46 |   <div class="content__row">
 47 | 
 48 |     <div class="content__demo">
 49 |         <p-checkbox color="info" shape="curve">
 50 |           Curve
 51 |         </p-checkbox>
 52 |     </div>
 53 | 
 54 |     <div class="content__code">
 55 |         <textarea highlight-js [options]="{}" lang="html">
 56 | <p-checkbox color="info" shape="curve">
 57 |   Curve
 58 | </p-checkbox>
 59 |           </textarea>
 60 |     </div>
 61 | 
 62 |   </div>
 63 | 
 64 | 
 65 |   <!-- Warning and Round -->
 66 |   <div class="content__row">
 67 | 
 68 |     <div class="content__demo">
 69 |         <p-checkbox color="warning" shape="round">
 70 |           Round
 71 |         </p-checkbox>
 72 |     </div>
 73 | 
 74 |     <div class="content__code">
 75 |         <textarea highlight-js [options]="{}" lang="html">
 76 | <p-checkbox color="warning" shape="round">
 77 |   Round
 78 | </p-checkbox>
 79 |           </textarea>
 80 |     </div>
 81 | 
 82 |   </div>
 83 | 
 84 | 
 85 |   <!-- Danger and Round and Fill -->
 86 |   <div class="content__row">
 87 | 
 88 |     <div class="content__demo">
 89 |         <p-checkbox color="danger" shape="round" stroke="fill">
 90 |           Round and fill
 91 |         </p-checkbox>
 92 |     </div>
 93 | 
 94 |     <div class="content__code">
 95 |         <textarea highlight-js [options]="{}" lang="html">
 96 | <p-checkbox color="danger" shape="round" stroke="fill">
 97 |   Round and fill
 98 | </p-checkbox>
 99 |           </textarea>
100 |     </div>
101 | 
102 |   </div>
103 | 
104 | 
105 | </div>
106 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-color/demo-checkbox-mixed-color.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-color',
 5 |   templateUrl: './demo-checkbox-mixed-color.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxColorComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve-fill/demo-checkbox-mixed-curve-fill.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Curve, Fill)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox stroke="fill" shape="curve" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox stroke="fill" shape="curve" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox stroke="fill" shape="curve" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox stroke="fill" shape="curve" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox stroke="fill" shape="curve" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox stroke="fill" shape="curve" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox stroke="fill" shape="curve" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox stroke="fill" shape="curve" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox stroke="fill" shape="curve" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox stroke="fill" shape="curve" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve-fill/demo-checkbox-mixed-curve-fill.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-curve-fill',
 5 |   templateUrl: './demo-checkbox-mixed-curve-fill.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxCurveFillComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve-outline/demo-checkbox-mixed-curve-outline.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Curve, Outline)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox outline="true" shape="curve" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox outline="true" shape="curve" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox outline="true" shape="curve" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox outline="true" shape="curve" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox outline="true" shape="curve" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox outline="true" shape="curve" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox outline="true" shape="curve" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox outline="true" shape="curve" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox outline="true" shape="curve" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox outline="true" shape="curve" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve-outline/demo-checkbox-mixed-curve-outline.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-curve-outline',
 5 |   templateUrl: './demo-checkbox-mixed-curve-outline.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxCurveOutlineComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve-thick/demo-checkbox-mixed-curve-thick.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Curve, Thick)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox stroke="thick" shape="curve" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox stroke="thick" shape="curve" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox stroke="thick" shape="curve" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox stroke="thick" shape="curve" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox stroke="thick" shape="curve" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox stroke="thick" shape="curve" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox stroke="thick" shape="curve" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox stroke="thick" shape="curve" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox stroke="thick" shape="curve" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox stroke="thick" shape="curve" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve-thick/demo-checkbox-mixed-curve-thick.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-curve-thick',
 5 |   templateUrl: './demo-checkbox-mixed-curve-thick.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxCurveThickComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve/demo-checkbox-mixed-curve.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Curve)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox  shape="curve" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox  shape="curve" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox  shape="curve" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox  shape="curve" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox  shape="curve" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox  shape="curve" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox  shape="curve" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox  shape="curve" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox  shape="curve" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox  shape="curve" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-curve/demo-checkbox-mixed-curve.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-curve',
 5 |   templateUrl: './demo-checkbox-mixed-curve.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxCurveComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-outline/demo-checkbox-mixed-outline.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Outline)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox outline="true" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox outline="true" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox outline="true" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox outline="true" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox outline="true" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox outline="true" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox outline="true" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox outline="true" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox outline="true" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox outline="true" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-outline/demo-checkbox-mixed-outline.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-outline',
 5 |   templateUrl: './demo-checkbox-mixed-outline.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxOutlineComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-round-fill/demo-checkbox-mixed-round-fill.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Round, Fill)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox stroke="fill" shape="round" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox stroke="fill" shape="round" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox stroke="fill" shape="round" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox stroke="fill" shape="round" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox stroke="fill" shape="round" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox stroke="fill" shape="round" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox stroke="fill" shape="round" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox stroke="fill" shape="round" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox stroke="fill" shape="round" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox stroke="fill" shape="round" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-round-fill/demo-checkbox-mixed-round-fill.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-round-fill',
 5 |   templateUrl: './demo-checkbox-mixed-round-fill.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxRoundFillComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-round-thick/demo-checkbox-mixed-round-thick.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Round, Thick)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox stroke="thick" shape="round" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox stroke="thick" shape="round" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox stroke="thick" shape="round" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox stroke="thick" shape="round" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox stroke="thick" shape="round" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox stroke="thick" shape="round" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox stroke="thick" shape="round" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox stroke="thick" shape="round" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox stroke="thick" shape="round" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox stroke="thick" shape="round" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-round-thick/demo-checkbox-mixed-round-thick.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-round-thick',
 5 |   templateUrl: './demo-checkbox-mixed-round-thick.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxRoundThickComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-round/demo-checkbox-mixed-round.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Round)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox  shape="round" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox  shape="round" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox  shape="round" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox  shape="round" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox  shape="round" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox  shape="round" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox  shape="round" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox  shape="round" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox  shape="round" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox  shape="round" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-round/demo-checkbox-mixed-round.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-round',
 5 |   templateUrl: './demo-checkbox-mixed-round.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxRoundComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-fill-outline/demo-checkbox-mixed-square-fill-outline.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Square, Fill, Outline)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox outline="true" stroke="fill" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox outline="true" stroke="fill" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox outline="true" stroke="fill" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox outline="true" stroke="fill" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox outline="true" stroke="fill" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox outline="true" stroke="fill" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox outline="true" stroke="fill" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox outline="true" stroke="fill" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox outline="true" stroke="fill" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox outline="true" stroke="fill" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-fill-outline/demo-checkbox-mixed-square-fill-outline.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-square-fill-outline',
 5 |   templateUrl: './demo-checkbox-mixed-square-fill-outline.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxSquareFillOutlineComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 
17 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-fill/demo-checkbox-mixed-square-fill.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Square, Fill)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox stroke="fill" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox stroke="fill" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox stroke="fill" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox stroke="fill" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox stroke="fill" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox stroke="fill" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox stroke="fill" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox stroke="fill" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox stroke="fill" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox stroke="fill" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-fill/demo-checkbox-mixed-square-fill.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-square-fill',
 5 |   templateUrl: './demo-checkbox-mixed-square-fill.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxSquareFillComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-thick-outline/demo-checkbox-mixed-square-thick-outline.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Square, Thick, Outline)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox outline="true" stroke="thick" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox outline="true" stroke="thick" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox outline="true" stroke="thick" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox outline="true" stroke="thick" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox outline="true" stroke="thick" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox outline="true" stroke="thick" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox outline="true" stroke="thick" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox outline="true" stroke="thick" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox outline="true" stroke="thick" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox outline="true" stroke="thick" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-thick-outline/demo-checkbox-mixed-square-thick-outline.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-square-thick-outline',
 5 |   templateUrl: './demo-checkbox-mixed-square-thick-outline.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxSquareThickOutlineComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-thick/demo-checkbox-mixed-square-thick.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Square, Thick)</h5>
  2 | 
  3 | 
  4 | <div class="content__body">
  5 | 
  6 |   <!-- Primary -->
  7 |   <div class="content__row">
  8 | 
  9 |     <div class="content__demo">
 10 |       <p-checkbox stroke="thick" color="primary">
 11 |         Primary
 12 |       </p-checkbox>
 13 |     </div>
 14 | 
 15 |     <div class="content__code">
 16 |         <textarea highlight-js [options]="{}" lang="html">
 17 | <p-checkbox stroke="thick" color="primary">
 18 |   Primary
 19 | </p-checkbox>
 20 |           </textarea>
 21 |     </div>
 22 | 
 23 |   </div>
 24 | 
 25 | 
 26 |   <!-- Success -->
 27 |   <div class="content__row">
 28 | 
 29 |     <div class="content__demo">
 30 |       <p-checkbox stroke="thick" color="success">
 31 |         Success
 32 |       </p-checkbox>
 33 |     </div>
 34 | 
 35 |     <div class="content__code">
 36 |         <textarea highlight-js [options]="{}" lang="html">
 37 | <p-checkbox stroke="thick" color="success">
 38 |   Success
 39 | </p-checkbox>
 40 |           </textarea>
 41 |     </div>
 42 | 
 43 |   </div>
 44 | 
 45 | 
 46 |   <!-- Info -->
 47 |   <div class="content__row">
 48 | 
 49 |     <div class="content__demo">
 50 |         <p-checkbox stroke="thick" color="info">
 51 |           Info
 52 |         </p-checkbox>
 53 |     </div>
 54 | 
 55 |     <div class="content__code">
 56 |         <textarea highlight-js [options]="{}" lang="html">
 57 | <p-checkbox stroke="thick" color="info">
 58 |   Info
 59 | </p-checkbox>
 60 |           </textarea>
 61 |     </div>
 62 | 
 63 |   </div>
 64 | 
 65 | 
 66 |   <!-- Warning -->
 67 |   <div class="content__row">
 68 | 
 69 |     <div class="content__demo">
 70 |         <p-checkbox stroke="thick" color="warning">
 71 |           Warning
 72 |         </p-checkbox>
 73 |     </div>
 74 | 
 75 |     <div class="content__code">
 76 |         <textarea highlight-js [options]="{}" lang="html">
 77 | <p-checkbox stroke="thick" color="warning">
 78 |   Warning
 79 | </p-checkbox>
 80 |           </textarea>
 81 |     </div>
 82 | 
 83 |   </div>
 84 | 
 85 | 
 86 |   <!-- Danger -->
 87 |   <div class="content__row">
 88 | 
 89 |     <div class="content__demo">
 90 |         <p-checkbox stroke="thick" color="danger">
 91 |           Danger
 92 |         </p-checkbox>
 93 |     </div>
 94 | 
 95 |     <div class="content__code">
 96 |         <textarea highlight-js [options]="{}" lang="html">
 97 | <p-checkbox stroke="thick" color="danger">
 98 |   Danger
 99 | </p-checkbox>
100 |           </textarea>
101 |     </div>
102 | 
103 |   </div>
104 | 
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-square-thick/demo-checkbox-mixed-square-thick.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-square-thick',
 5 |   templateUrl: './demo-checkbox-mixed-square-thick.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxSquareThickComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-switch/demo-checkbox-mixed-switch.component.html:
--------------------------------------------------------------------------------
  1 | <h5 class="content__header--secondary">Checkbox : Mixed (Switch)</h5>
  2 | 
  3 | <div class="content__body">
  4 | 
  5 |   <!-- default -->
  6 |   <div class="content__row">
  7 | 
  8 |     <div class="content__demo">
  9 |       <p-checkbox isSwitch="true" color="primary">
 10 |         Default
 11 |       </p-checkbox>
 12 |     </div>
 13 | 
 14 |     <div class="content__code">
 15 |         <textarea highlight-js [options]="{}" lang="html">
 16 | <p-checkbox isSwitch="true" color="primary">
 17 |   Default
 18 | </p-checkbox>
 19 |           </textarea>
 20 |     </div>
 21 | 
 22 |   </div>
 23 | 
 24 | 
 25 |   <!-- fill -->
 26 |   <div class="content__row">
 27 | 
 28 |     <div class="content__demo">
 29 |       <p-checkbox isSwitch="true"  color="success" stroke="fill">
 30 |         fill
 31 |       </p-checkbox>
 32 |     </div>
 33 | 
 34 |     <div class="content__code">
 35 |         <textarea highlight-js [options]="{}" lang="html">
 36 | <p-checkbox isSwitch="true" color="success" stroke="fill">
 37 |   fill
 38 | </p-checkbox>
 39 |           </textarea>
 40 |     </div>
 41 | 
 42 |   </div>
 43 | 
 44 | 
 45 |   <!-- fill -->
 46 |   <div class="content__row">
 47 | 
 48 |     <div class="content__demo">
 49 |       <p-checkbox isSwitch="true"  color="info" stroke="fill">
 50 |         fill
 51 |       </p-checkbox>
 52 |     </div>
 53 | 
 54 |     <div class="content__code">
 55 |         <textarea highlight-js [options]="{}" lang="html">
 56 | <p-checkbox isSwitch="true" color="info" stroke="fill">
 57 |   fill
 58 | </p-checkbox>
 59 |           </textarea>
 60 |     </div>
 61 | 
 62 |   </div>
 63 | 
 64 | 
 65 |   <!-- slim -->
 66 |   <div class="content__row">
 67 | 
 68 |     <div class="content__demo">
 69 |         <p-checkbox isSwitch="true" color="warning" stroke="slim">
 70 |           slim
 71 |         </p-checkbox>
 72 |     </div>
 73 | 
 74 |     <div class="content__code">
 75 |         <textarea highlight-js [options]="{}" lang="html">
 76 | <p-checkbox isSwitch="true" color="warning" stroke="slim">
 77 |   slim
 78 | </p-checkbox>
 79 |           </textarea>
 80 |     </div>
 81 | 
 82 |   </div>
 83 | 
 84 | 
 85 |   <!-- slim -->
 86 |   <div class="content__row">
 87 | 
 88 |     <div class="content__demo">
 89 |         <p-checkbox isSwitch="true" color="danger" stroke="slim">
 90 |           slim
 91 |         </p-checkbox>
 92 |     </div>
 93 | 
 94 |     <div class="content__code">
 95 |         <textarea highlight-js [options]="{}" lang="html">
 96 | <p-checkbox isSwitch="true" color="danger" stroke="slim">
 97 |   slim
 98 | </p-checkbox>
 99 |           </textarea>
100 |     </div>
101 | 
102 |   </div>
103 | 
104 | </div>
105 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-mixed-switch/demo-checkbox-mixed-switch.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-mixed-switch',
 5 |   templateUrl: './demo-checkbox-mixed-switch.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class MixedCheckboxSwitchComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-plain/demo-checkbox-plain.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Plain</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Favorite -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo">
 9 |       <p-checkbox shape="round" color="warning" outline="true" plain="true" animation="smooth">
10 |         <i p-icon class="material-icons">star_rate</i>
11 |         Favorite
12 |       </p-checkbox>
13 |     </div>
14 | 
15 |     <div class="content__code">
16 |       <textarea highlight-js [options]="{}" lang="html">
17 | <p-checkbox shape="round" color="warning" outline="true" plain="true" animation="smooth">
18 |   <i p-icon class="material-icons">star_rate</i>
19 |   Favorite
20 | </p-checkbox>
21 |           </textarea>
22 |     </div>
23 | 
24 |   </div>
25 | 
26 | 
27 |   <!-- Add -->
28 |   <div class="content__row">
29 | 
30 |     <div class="content__demo">
31 |       <p-checkbox shape="round" color="success" outline="true" plain="true" animation="smooth">
32 |         Add
33 |       </p-checkbox>
34 |     </div>
35 | 
36 |     <div class="content__code">
37 |       <textarea highlight-js [options]="{}" lang="html">
38 | <p-checkbox shape="round" color="success" outline="true" plain="true" animation="smooth">
39 |     Add
40 | </p-checkbox>
41 |           </textarea>
42 |     </div>
43 | 
44 |   </div>
45 | 
46 | </div>
47 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-plain/demo-checkbox-plain.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-plain',
 5 |   templateUrl: './demo-checkbox-plain.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxPlainComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-scalability/demo-checkbox-scalability.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Scalability</h4>
 2 | 
 3 | 
 4 | <div class="content__body">
 5 | 
 6 | 
 7 |     <div class="content__row">
 8 | 
 9 |         <div class="content__demo">
10 |             <input class="slider" type="range" value="14" min="14" max="100" step="1" #slider (input)="0">
11 | 
12 |             <br>
13 | 
14 |             <p-checkbox [style.fontSize.px]="slider.value"></p-checkbox>
15 |             <p-checkbox [style.fontSize.px]="slider.value" shape="round"></p-checkbox>
16 |             <p-checkbox [style.fontSize.px]="slider.value" shape="curve"></p-checkbox>
17 |         </div>
18 | 
19 |         <div class="content__code">
20 |             <textarea highlight-js [options]="{}" lang="html">
21 | 
22 | <input class="slider" type="range" value="14" min="14" max="100" step="1" #slider (input)="0">
23 | 
24 | <p-checkbox [style.fontSize.px]="slider.value"></p-checkbox>
25 | <p-checkbox [style.fontSize.px]="slider.value" shape="round"></p-checkbox>
26 | <p-checkbox [style.fontSize.px]="slider.value" shape="curve"></p-checkbox>
27 | 
28 |             </textarea>
29 |         </div>
30 | 
31 |     </div>
32 | 
33 | </div>
34 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-scalability/demo-checkbox-scalability.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-scalability',
 5 |   templateUrl: './demo-checkbox-scalability.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 |     .content__body p-checkbox {
13 |       margin-top: 10px;
14 |       margin-bottom: 10px;
15 |     }
16 |   `],
17 |   changeDetection: ChangeDetectionStrategy.OnPush
18 | })
19 | export class DemoCheckboxScalabilityComponent implements OnInit {
20 | 
21 |   constructor() { }
22 | 
23 |   ngOnInit() {
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-size/demo-checkbox-size.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Size</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Done -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo">
 9 |       <p-checkbox shape="round" color="info" animation="jelly" bigger="true">
10 |         <i p-icon class="material-icons">done</i>
11 |         Done
12 |       </p-checkbox>
13 |     </div>
14 | 
15 |     <div class="content__code">
16 |       <textarea highlight-js [options]="{}" lang="html">
17 | <p-checkbox shape="round" color="info" animation="jelly" bigger="true">
18 |   <i p-icon class="material-icons">done</i>
19 |   Done
20 | </p-checkbox>
21 |           </textarea>
22 |     </div>
23 | 
24 |   </div>
25 | 
26 | 
27 |   <!-- Clear -->
28 |   <div class="content__row">
29 | 
30 |     <div class="content__demo">
31 |       <p-checkbox color="danger" animation="smooth" bigger="true">
32 |           Clear
33 |       </p-checkbox>
34 |     </div>
35 | 
36 |     <div class="content__code">
37 |       <textarea highlight-js [options]="{}" lang="html">
38 | <p-checkbox color="danger" animation="smooth" bigger="true">
39 |     Clear
40 | </p-checkbox>
41 |           </textarea>
42 |     </div>
43 | 
44 |   </div>
45 | 
46 | 
47 | </div>
48 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-size/demo-checkbox-size.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-size',
 5 |   templateUrl: './demo-checkbox-size.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxSizeComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-states/demo-checkbox-states.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : State</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Hover -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo">
 9 |         <p-checkbox shape="curve" color="success">
10 |             <p-hover>After Hover</p-hover>
11 |             Hover
12 |         </p-checkbox>
13 |     </div>
14 | 
15 |     <div class="content__code">
16 |         <textarea highlight-js [options]="{}" lang="html">
17 | <p-checkbox shape="curve" color="success">
18 |     <p-hover>After Hover</p-hover>
19 |     Hover
20 | </p-checkbox>
21 |           </textarea>
22 |     </div>
23 | 
24 |   </div>
25 | 
26 | 
27 |   <!-- Focus -->
28 |   <div class="content__row">
29 | 
30 |     <div class="content__demo">
31 |       <p-checkbox enableFocus="true">
32 |             Focus
33 |       </p-checkbox>
34 |     </div>
35 | 
36 |     <div class="content__code">
37 |         <textarea highlight-js [options]="{}" lang="html">
38 | <p-checkbox enableFocus="true">
39 |     Focus
40 | </p-checkbox>
41 |           </textarea>
42 |     </div>
43 | 
44 |   </div>
45 | 
46 | 
47 |   <!-- Indeterminate -->
48 |   <div class="content__row">
49 | 
50 |     <div class="content__demo">
51 |         <p-checkbox shape="curve" #prettyCheckboxComponent="ngxPrettyCheckbox">
52 |             <i p-icon class="material-icons">done</i>
53 |             <p-indeterminate>
54 |                 <i p-icon class="material-icons">remove</i>
55 |                 Changed
56 |             </p-indeterminate>
57 |             Indeterminate
58 |         </p-checkbox>
59 |         <br>
60 |         <button (click)="setIndeterminate(prettyCheckboxComponent)">Apply</button>
61 |     </div>
62 | 
63 |     <div class="content__code">
64 |         <textarea highlight-js [options]="{}" lang="html">
65 | <p-checkbox shape="curve" #prettyCheckboxComponent="ngxPrettyCheckbox">
66 |     <i p-icon class="material-icons">done</i>
67 |     <p-indeterminate>
68 |         <i p-icon class="material-icons">remove</i>
69 |         Changed
70 |     </p-indeterminate>
71 |     Indeterminate
72 | </p-checkbox>
73 | 
74 | <button (click)="setIndeterminate(prettyCheckboxComponent)">Apply</button>
75 |         </textarea>
76 | 
77 |         <textarea highlight-js [options]="{}" lang="typescript">
78 | import { NgxPrettyCheckboxComponent } from 'ngx-pretty-checkbox';
79 | 
80 | @Component({ ... })
81 | export class ... {
82 |     setIndeterminate( prettyCheckbox: NgxPrettyCheckboxComponent) {
83 |         prettyCheckbox.setIndeterminate();
84 |     }
85 | }
86 |         </textarea>
87 |     </div>
88 | 
89 |   </div>
90 | 
91 | 
92 | </div>
93 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-states/demo-checkbox-states.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | import { NgxPrettyCheckboxComponent } from '@lib/ngx-pretty-checkbox';
 3 | 
 4 | @Component({
 5 |   selector: 'app-demo-checkbox-states',
 6 |   templateUrl: './demo-checkbox-states.component.html',
 7 |   styles: [`
 8 |     :host {
 9 |       margin: 20px;
10 |       display: block;
11 |     }
12 |   `],
13 |   changeDetection: ChangeDetectionStrategy.OnPush
14 | })
15 | export class DemoCheckboxStatesComponent implements OnInit {
16 | 
17 |   constructor() { }
18 | 
19 |   ngOnInit() {
20 |   }
21 | 
22 |   setIndeterminate( prettyCheckbox: NgxPrettyCheckboxComponent) {
23 |     prettyCheckbox.setIndeterminate();
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-svg/demo-checkbox-svg.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Checkbox : Svg</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- RECURRING -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo">
 9 | 
10 |       <p-checkbox shape="curve" color="success">
11 |         <svg p-svg class="svg-icon-green" viewBox="0 0 20 20">
12 |             <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" style="stroke: white;fill:white;"></path>
13 |         </svg>
14 |         Recurring
15 |       </p-checkbox>
16 | 
17 |     </div>
18 | 
19 |     <div class="content__code">
20 | 
21 |         <textarea highlight-js [options]="{}" lang="html">
22 | <p-checkbox shape="curve" color="success">
23 |   <svg p-svg class="svg-icon-green" viewBox="0 0 20 20">
24 |       <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" style="stroke: white;fill:white;"></path>
25 |   </svg>
26 |   Recurring
27 | </p-checkbox>
28 |           </textarea>
29 |     </div>
30 | 
31 |   </div>
32 | 
33 | 
34 |   <!-- DONE -->
35 |   <div class="content__row">
36 | 
37 |     <div class="content__demo">
38 | 
39 |       <p-checkbox shape="curve" plain="true">
40 |         <img p-svg src="https://lokesh-coder.github.io/pretty-checkbox/svg/open-iconic/task.svg">
41 |         Done
42 |       </p-checkbox>
43 | 
44 |     </div>
45 | 
46 |     <div class="content__code">
47 | 
48 |         <textarea highlight-js [options]="{}" lang="html">
49 | <p-checkbox shape="curve" plain="true">
50 |   <img p-svg src="https://lokesh-coder.github.io/pretty-checkbox/svg/open-iconic/task.svg">
51 |   Done
52 | </p-checkbox>
53 |         </textarea>
54 |     </div>
55 | 
56 |   </div>
57 | 
58 | 
59 |   <!-- LOCK -->
60 |   <div class="content__row">
61 | 
62 |     <div class="content__demo">
63 |         <p-checkbox plain="true">
64 |           <svg p-svg viewBox="0 0 8 8" style="fill: #65bbd2;"><path xmlns="http://www.w3.org/2000/svg" d="M4 0c-1.099 0-2 .901-2 2v1h-1v4h6v-4h-1v-1c0-1.099-.901-2-2-2zm0 1c.561 0 1 .439 1 1v1h-2v-1c0-.561.439-1 1-1z" id="lock-locked"/></svg>
65 |           Lock
66 |         </p-checkbox>
67 |     </div>
68 | 
69 |     <div class="content__code">
70 |         <textarea highlight-js [options]="{}" lang="html">
71 | <p-checkbox plain="true">
72 |   <svg p-svg viewBox="0 0 8 8" style="fill: #65bbd2;"><path xmlns="http://www.w3.org/2000/svg" d="M4 0c-1.099 0-2 .901-2 2v1h-1v4h6v-4h-1v-1c0-1.099-.901-2-2-2zm0 1c.561 0 1 .439 1 1v1h-2v-1c0-.561.439-1 1-1z" id="lock-locked"/></svg>
73 |   Lock
74 | </p-checkbox>
75 |           </textarea>
76 |     </div>
77 | 
78 |   </div>
79 | 
80 | 
81 | </div>
82 | 
83 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-svg/demo-checkbox-svg.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-svg',
 5 |   templateUrl: './demo-checkbox-svg.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxSvgComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-switch/demo-checkbox-switch.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | import { PrettyCheckboxStroke } from '@lib/ngx-pretty-checkbox';
 3 | 
 4 | @Component({
 5 |   selector: 'app-demo-checkbox-switch',
 6 |   templateUrl: './demo-checkbox-switch.component.html',
 7 |   styles: [`
 8 |     :host {
 9 |       margin: 20px;
10 |       display: block;
11 |     }
12 |   `],
13 |   changeDetection: ChangeDetectionStrategy.OnPush
14 | })
15 | export class DemoCheckboxSwitchComponent implements OnInit {
16 | 
17 |   stroke: PrettyCheckboxStroke;
18 |   isSwitch = true;
19 | 
20 |   constructor() { }
21 | 
22 |   ngOnInit() {
23 |   }
24 | 
25 | }
26 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-checkbox-toggle/demo-checkbox-toggle.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-checkbox-toggle',
 5 |   templateUrl: './demo-checkbox-toggle.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 |   `],
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class DemoCheckboxToggleComponent implements OnInit {
15 | 
16 |   constructor() { }
17 | 
18 |   ngOnInit() {
19 |   }
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-all/demo-radio-button-all.component.html:
--------------------------------------------------------------------------------
1 | <h4 class="content__header">Radio : All Features</h4>
2 | 
3 | <iframe src="https://stackblitz.com/edit/ngx-pretty-checkbox-radio?ctl=1&embed=1&file=src/app/app.component.ts&hideExplorer=1&hideNavigation=1&view=preview" frameborder="0"></iframe>
4 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-all/demo-radio-button-all.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button-all',
 5 |   templateUrl: './demo-radio-button-all.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class DemoRadioButtonAllComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-animation/demo-radio-button-animation.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button-animation',
 5 |   templateUrl: './demo-radio-button-animation.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 | 
13 |     .content__demo p-radio{
14 |       margin: 10px 0;
15 |     }
16 |   `],
17 |   changeDetection: ChangeDetectionStrategy.OnPush
18 | })
19 | export class DemoRadioButtonAnimationComponent implements OnInit {
20 | 
21 |   constructor() { }
22 | 
23 |   ngOnInit() {
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-color-icon/demo-radio-button-color-icon.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button-color-icon',
 5 |   templateUrl: './demo-radio-button-color-icon.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 | 
13 |     .content__demo p-radio{
14 |       margin: 10px 0;
15 |     }
16 |   `],
17 |   changeDetection: ChangeDetectionStrategy.OnPush
18 | })
19 | export class DemoRadioButtonColorIconComponent implements OnInit {
20 | 
21 |   constructor() { }
22 | 
23 |   ngOnInit() {
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-color-outline-icon/demo-radio-button-color-outline-icon.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button-color-outline-icon',
 5 |   templateUrl: './demo-radio-button-color-outline-icon.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 | 
13 |     .content__demo p-radio{
14 |       margin: 10px 0;
15 |     }
16 |   `],
17 |   changeDetection: ChangeDetectionStrategy.OnPush
18 | })
19 | export class DemoRadioButtonColorOutlineIconComponent implements OnInit {
20 | 
21 |   constructor() { }
22 | 
23 |   ngOnInit() {
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-color/demo-radio-button-color.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Radio : Colors</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Color -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo content__demo--justify-start">
 9 | 
10 |           <p-radio class="content__demo--radio" name="color" shape="curve" color="primary">Primary</p-radio>
11 |           <p-radio class="content__demo--radio" name="color" shape="curve" color="success">Success</p-radio>
12 |           <p-radio class="content__demo--radio" name="color" shape="curve" color="info">Info</p-radio>
13 |           <p-radio class="content__demo--radio" name="color" shape="curve" color="warning">Warning</p-radio>
14 |           <p-radio class="content__demo--radio" name="color" shape="curve" color="danger">Danger</p-radio>
15 |     </div>
16 | 
17 |     <div class="content__code">
18 |       <textarea highlight-js [options]="{}" lang="html">
19 | 
20 | <p-radio name="color" shape="curve" color="primary">Primary</p-radio>
21 | 
22 | <p-radio name="color" shape="curve" color="success">Success</p-radio>
23 | 
24 | <p-radio name="color" shape="curve" color="info">Info</p-radio>
25 | 
26 | <p-radio name="color" shape="curve" color="warning">Warning</p-radio>
27 | 
28 | <p-radio name="color" shape="curve" color="danger">Danger</p-radio>
29 | 
30 |       </textarea>
31 |       <p>
32 |         Or :
33 |       </p>
34 |       <textarea highlight-js [options]="{}" lang="html">
35 | 
36 | <p-radio-group>
37 | 
38 |   <p-radio name="color" shape="curve" color="primary">Primary</p-radio>
39 | 
40 |   <p-radio name="color" shape="curve" color="success">Success</p-radio>
41 | 
42 |   <p-radio name="color" shape="curve" color="info">Info</p-radio>
43 | 
44 |   <p-radio name="color" shape="curve" color="warning">Warning</p-radio>
45 | 
46 |   <p-radio name="color" shape="curve" color="danger">Danger</p-radio>
47 | 
48 | </p-radio-group>
49 | 
50 |       </textarea>
51 |     </div>
52 | 
53 |   </div>
54 | 
55 | </div>
56 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-color/demo-radio-button-color.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button-color',
 5 |   templateUrl: './demo-radio-button-color.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 | 
13 |     .content__demo p-radio{
14 |       margin: 10px 0;
15 |     }
16 |   `],
17 |   changeDetection: ChangeDetectionStrategy.OnPush
18 | })
19 | export class DemoRadioButtonColorComponent implements OnInit {
20 | 
21 |   constructor() { }
22 | 
23 |   ngOnInit() {
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-plain/demo-radio-button-plain.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Radio : Plain</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Color -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo content__demo--justify-start">
 9 | 
10 |           <p-radio class="content__demo--radio" name="plain" plain="true" outline="true" animation="smooth" shape="round" color="primary">
11 |             <i p-icon class="material-icons">accessibility_new</i>
12 |             Single
13 |           </p-radio>
14 | 
15 |           <p-radio class="content__demo--radio" name="plain" plain="true" outline="true" animation="smooth" shape="round" color="success">
16 |             <i p-icon class="material-icons">wc</i>
17 |             Married
18 |           </p-radio>
19 | 
20 |           <p-radio class="content__demo--radio" name="plain" plain="true" outline="true" animation="smooth" shape="round" color="danger">
21 |             <i p-icon class="material-icons">favorite</i>
22 |             In relationship
23 |           </p-radio>
24 | 
25 |     </div>
26 | 
27 |     <div class="content__code">
28 |       <textarea highlight-js [options]="{}" lang="html">
29 | 
30 | <p-radio name="plain" plain="true" outline="true" animation="smooth" shape="round" color="primary">
31 |     <i p-icon class="material-icons">accessibility_new</i>
32 |     Single
33 | </p-radio>
34 | 
35 | <p-radio name="plain" plain="true" outline="true" animation="smooth" shape="round" color="success">
36 |   <i p-icon class="material-icons">wc</i>
37 |   Married
38 | </p-radio>
39 | 
40 | <p-radio name="plain" plain="true" outline="true" animation="smooth" shape="round" color="danger">
41 |   <i p-icon class="material-icons">favorite</i>
42 |   In relationship
43 | </p-radio>
44 | 
45 |       </textarea>
46 |       <p>
47 |         Or :
48 |       </p>
49 |       <textarea highlight-js [options]="{}" lang="html">
50 | 
51 | <p-radio-group>
52 | 
53 |   <p-radio name="plain" plain="true" outline="true" animation="smooth" shape="round" color="primary">
54 |       <i p-icon class="material-icons">accessibility_new</i>
55 |       Single
56 |   </p-radio>
57 | 
58 |   <p-radio name="plain" plain="true" outline="true" animation="smooth" shape="round" color="success">
59 |     <i p-icon class="material-icons">wc</i>
60 |     Married
61 |   </p-radio>
62 | 
63 |   <p-radio name="plain" plain="true" outline="true" animation="smooth" shape="round" color="danger">
64 |     <i p-icon class="material-icons">favorite</i>
65 |     In relationship
66 |   </p-radio>
67 | 
68 | </p-radio-group>
69 | 
70 |       </textarea>
71 |     </div>
72 | 
73 |   </div>
74 | 
75 | </div>
76 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-plain/demo-radio-button-plain.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button-plain',
 5 |   templateUrl: './demo-radio-button-plain.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 | 
13 |     .content__demo p-radio{
14 |       margin: 10px 0;
15 |     }
16 |   `],
17 |   changeDetection: ChangeDetectionStrategy.OnPush
18 | })
19 | export class DemoRadioButtonPlainComponent implements OnInit {
20 | 
21 |   constructor() { }
22 | 
23 |   ngOnInit() {
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-switch/demo-radio-button-switch.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Radio : Switch</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Color -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo content__demo--justify-start">
 9 | 
10 |           <p-radio class="content__demo--radio" isSwitch="true" name="switch" color="primary">Summer</p-radio>
11 |           <p-radio class="content__demo--radio" isSwitch="true" name="switch" stroke="fill" color="success">Winter</p-radio>
12 |           <p-radio class="content__demo--radio" isSwitch="true" name="switch" stroke="slim" color="info">Fall</p-radio>
13 | 
14 |     </div>
15 | 
16 |     <div class="content__code">
17 |       <textarea highlight-js [options]="{}" lang="html">
18 | 
19 | <p-radio isSwitch="true" name="switch" color="primary">Summer</p-radio>
20 | 
21 | <p-radio isSwitch="true" name="switch" stroke="fill" color="success">Winter</p-radio>
22 | 
23 | <p-radio isSwitch="true" name="switch" stroke="slim" color="info">Fall</p-radio>
24 | 
25 |       </textarea>
26 |       <p>
27 |         Or :
28 |       </p>
29 |       <textarea highlight-js [options]="{}" lang="html">
30 | 
31 | <p-radio-group>
32 | 
33 |   <p-radio isSwitch="true" name="switch" color="primary">Summer</p-radio>
34 | 
35 |   <p-radio isSwitch="true" name="switch" stroke="fill" color="success">Winter</p-radio>
36 | 
37 |   <p-radio isSwitch="true" name="switch" stroke="slim" color="info">Fall</p-radio>
38 | 
39 | </p-radio-group>
40 | 
41 |       </textarea>
42 |     </div>
43 | 
44 |   </div>
45 | 
46 | </div>
47 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button-switch/demo-radio-button-switch.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button-switch',
 5 |   templateUrl: './demo-radio-button-switch.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 | 
13 |     .content__demo p-radio{
14 |       margin-top:20px;
15 |     }
16 |   `],
17 |   changeDetection: ChangeDetectionStrategy.OnPush
18 | })
19 | export class DemoRadioButtonSwitchComponent implements OnInit {
20 | 
21 |   constructor() { }
22 | 
23 |   ngOnInit() {
24 |   }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button/demo-radio-button.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">Radio : Basic</h4>
 2 | 
 3 | <div class="content__body">
 4 | 
 5 |   <!-- Default -->
 6 |   <div class="content__row">
 7 | 
 8 |     <div class="content__demo content__demo--justify-start">
 9 | 
10 |           <p-radio class="content__demo--radio" name="basic">Male</p-radio>
11 | 
12 |           <p-radio class="content__demo--radio" name="basic">Female</p-radio>
13 | 
14 |           <p-radio class="content__demo--radio" name="basic">Special</p-radio>
15 | 
16 |     </div>
17 | 
18 |     <div class="content__code">
19 |       <textarea highlight-js [options]="{}" lang="html">
20 | 
21 | <p-radio name="basic">Male</p-radio>
22 | 
23 | <p-radio name="basic">Female</p-radio>
24 | 
25 | <p-radio name="basic">Special</p-radio>
26 | 
27 |       </textarea>
28 |       <p>
29 |         Or :
30 |       </p>
31 |       <textarea highlight-js [options]="{}" lang="html">
32 | 
33 | <p-radio-group>
34 | 
35 |   <p-radio>Male</p-radio>
36 | 
37 |   <p-radio>Female</p-radio>
38 | 
39 |   <p-radio>Special</p-radio>
40 | 
41 | </p-radio-group>
42 | 
43 |       </textarea>
44 |     </div>
45 | 
46 |   </div>
47 | 
48 | </div>
49 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demo-radio-button/demo-radio-button.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-demo-radio-button',
 5 |   templateUrl: './demo-radio-button.component.html',
 6 |   styles: [`
 7 |     :host {
 8 |       margin: 20px;
 9 |       display: block;
10 |     }
11 | 
12 | 
13 |     .content__demo p-radio{
14 |       margin: 10px 0;
15 |     }
16 | 
17 |   `],
18 |   changeDetection: ChangeDetectionStrategy.OnPush
19 | })
20 | export class DemoRadioButtonComponent implements OnInit {
21 | 
22 |   constructor() { }
23 | 
24 |   ngOnInit() {
25 |   }
26 | 
27 | }
28 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demos-checkbox/demos-checkbox.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | import { PrettyCheckBoxChange } from '@lib/ngx-pretty-checkbox';
 3 | import { DemoCheckboxesRouteName } from '../../enums';
 4 | import { NavigationService } from '../../navigation.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-demos-checkbox',
 8 |   templateUrl: './demos-checkbox.component.html',
 9 |   styles: [`
10 |     :host {
11 |       display: flex;
12 |       flex-wrap: wrap;
13 |       justify-content: center;
14 |       align-items: center;
15 |     }
16 | 
17 |     .color-preview {
18 |       display: inline-block;
19 |       width: 1em;
20 |       height: 1em;
21 |       background-color: #bdc3c7;
22 |       border-radius: 100%;
23 |       margin: 10px 2px 0px 2px;
24 |     }
25 | 
26 |     .color-preview.primary {
27 |       background-color: #428bca;
28 |     }
29 | 
30 |     .color-preview.success {
31 |       background-color: #5cb85c;
32 |     }
33 | 
34 |     span.color-preview.warning {
35 |       background-color: #f0ad4e;
36 |     }
37 | 
38 |     span.color-preview.info {
39 |       background-color: #5bc0de;
40 |     }
41 | 
42 |     span.color-preview.danger {
43 |       background-color: #d9534f;
44 |     }
45 | 
46 |   `]
47 | })
48 | export class DemosCheckboxComponent implements OnInit {
49 | 
50 |   public readonly DemoCheckboxesRouteName = DemoCheckboxesRouteName;
51 | 
52 |   constructor(private navigation: NavigationService) { }
53 | 
54 |   ngOnInit() {
55 |   }
56 | 
57 |   onChange(event: PrettyCheckBoxChange) {
58 |   }
59 | 
60 |   goToDemoCheckbox(page?: DemoCheckboxesRouteName) {
61 |     this.navigation.goToDemoCheckbox(page);
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demos-radio-button/demos-radio-button.component.html:
--------------------------------------------------------------------------------
 1 | <!-- All Feature -->
 2 | <app-card title="All Feature" (click)="goToDemoCheckbox(DemoRadioRouteName.All)">
 3 |   All feature together and change it run time
 4 | </app-card>
 5 | 
 6 | <!-- Basic -->
 7 | <app-card title="Basic" (click)="goToDemoCheckbox(DemoRadioRouteName.Basic)">
 8 |   These are simple radio button with three shape
 9 | </app-card>
10 | 
11 | <!-- Switch -->
12 | <app-card title="Switch" (click)="goToDemoCheckbox(DemoRadioRouteName.Switch)">
13 |   IOS style
14 | </app-card>
15 | 
16 | <!-- Animations -->
17 | <app-card title="Animations" (click)="goToDemoCheckbox(DemoRadioRouteName.Animations)">
18 |   There are five pure css animation
19 | </app-card>
20 | 
21 | <!-- Color -->
22 | <app-card title="Color" (click)="goToDemoCheckbox(DemoRadioRouteName.Color)">
23 |   There are five colors
24 |     <br>
25 |     <span class="color-preview primary"></span>
26 |     <span class="color-preview success"></span>
27 |     <span class="color-preview warning"></span>
28 |     <span class="color-preview info"></span>
29 |     <span class="color-preview danger"></span>
30 | </app-card>
31 | 
32 | <!-- Color Outline Icon -->
33 | <app-card title="Color Outline Icon" (click)="goToDemoCheckbox(DemoRadioRouteName.ColorOutlineIcon)">
34 |   Mixed radio config: color with icon and outline
35 | </app-card>
36 | 
37 | <!-- Color Icon -->
38 | <app-card title="Color Icon" (click)="goToDemoCheckbox(DemoRadioRouteName.ColorIcon)">
39 |   Mixed radio config: color with icon
40 | </app-card>
41 | 
42 | <!-- Plain -->
43 | <app-card title="Plain" (click)="goToDemoCheckbox(DemoRadioRouteName.Plain)">
44 |   To remove the border (when checkbox is checked)
45 | </app-card>
46 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/demos-radio-button/demos-radio-button.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | import { PrettyCheckBoxChange } from '@lib/ngx-pretty-checkbox';
 3 | import { DemoRadioRouteName } from '../../enums';
 4 | import { NavigationService } from '../../navigation.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-demos-radio-button',
 8 |   templateUrl: './demos-radio-button.component.html',
 9 |   styles: [`
10 |     :host {
11 |       display: flex;
12 |       flex-wrap: wrap;
13 |       justify-content: center;
14 |       align-items: center;
15 |     }
16 | 
17 |     .color-preview {
18 |       display: inline-block;
19 |       width: 1em;
20 |       height: 1em;
21 |       background-color: #bdc3c7;
22 |       border-radius: 100%;
23 |       margin: 10px 2px 0px 2px;
24 |     }
25 | 
26 |     .color-preview.primary {
27 |       background-color: #428bca;
28 |     }
29 | 
30 |     .color-preview.success {
31 |       background-color: #5cb85c;
32 |     }
33 | 
34 |     span.color-preview.warning {
35 |       background-color: #f0ad4e;
36 |     }
37 | 
38 |     span.color-preview.info {
39 |       background-color: #5bc0de;
40 |     }
41 | 
42 |     span.color-preview.danger {
43 |       background-color: #d9534f;
44 |     }
45 | 
46 |   `]
47 | })
48 | export class DemosRadioButtonComponent implements OnInit {
49 | 
50 |   public readonly DemoRadioRouteName = DemoRadioRouteName;
51 | 
52 |   constructor(private navigation: NavigationService) { }
53 | 
54 |   ngOnInit() {
55 |   }
56 | 
57 |   onChange(event: PrettyCheckBoxChange) {
58 |     console.log('event', event);
59 |   }
60 | 
61 |   goToDemoCheckbox(page?: DemoRadioRouteName) {
62 |     this.navigation.goToDemoRadio(page);
63 |   }
64 | 
65 | }
66 | 
67 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/home/home.component.html:
--------------------------------------------------------------------------------
 1 | <h3 align="center">
 2 |     <br>
 3 |     <img src="assets/logo.gif" alt="Pretty checkbox angular" width="100" style="max-width:100%;">
 4 |     <br>
 5 |     <br>
 6 |     NgxPrettyCheckbox
 7 |     <br>
 8 | </h3>
 9 | 
10 | <br>
11 | <br>
12 | <p align="center">
13 |     Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Angular
14 | </p>
15 | 
16 | <br>
17 | <br>
18 | <br>
19 | <br>
20 | <div align="center">
21 |     <img src="assets/preview.gif" alt="Pretty checkbox preview" style="max-width:100%;"/>
22 | </div>


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'app-home',
 5 |     templateUrl: './home.component.html'
 6 | })
 7 | export class HomeComponent implements OnInit {
 8 | 
 9 |     constructor() { }
10 | 
11 |     ngOnInit(): void {
12 |     }
13 | 
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/install-lib/install-lib.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-install-lib',
 5 |   templateUrl: './install-lib.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class InstallLibComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/install-scss-customize/install-scss-customize.component.html:
--------------------------------------------------------------------------------
 1 | <h4 class="content__header">SCSS Customize</h4>
 2 | 
 3 | <div class="install__step">
 4 |   <b>Settings:</b>
 5 |   <br>
 6 | 
 7 |   <div>If you felt the name is not-so-pretty, you can always change!</div>
 8 |   <textarea highlight-js [options]="{}" lang="scss">
 9 | $pretty--class-name: pretty;
10 |   </textarea>
11 | 
12 |   <div>Are you sure, you wanna change my handpicked awesome super duper colors?</div>
13 | 
14 |   <textarea highlight-js [options]="{}" lang="scss">
15 | $pretty--color-default: #bdc3c7;
16 | $pretty--color-primary: #428bca;
17 | $pretty--color-info: #5bc0de;
18 | $pretty--color-success: #5cb85c;
19 | $pretty--color-warning: #f0ad4e;
20 | $pretty--color-danger: #d9534f;
21 | $pretty--color-dark: #5a656b;
22 |   </textarea>
23 | 
24 |   <div>UH, boring z-index stuff, who cares.</div>
25 | 
26 |   <textarea highlight-js [options]="{}" lang="scss">
27 | $pretty--z-index-back: 0;
28 | $pretty--z-index-between: 1;
29 | $pretty--z-index-front: 2;
30 |   </textarea>
31 |   
32 |   <div>Nobody will change this.</div>
33 |   
34 |   <textarea highlight-js [options]="{}" lang="scss">
35 | $pretty--debug: false;
36 | $pretty--dev-err: 'Invalid input type!';
37 |   </textarea>
38 | </div>
39 | 
40 | 
41 | <div class="install__step">
42 |     <b>Import:</b>
43 |     <br>
44 | 
45 |     <div>REQUIRED </div>
46 |     <textarea highlight-js [options]="{}" lang="scss">
47 | @import '~pretty-checkbox/scss/variables';
48 | @import '~pretty-checkbox/scss/core';
49 |     </textarea>
50 |     
51 |     <div>OPTIONALS  </div>
52 |     <textarea highlight-js [options]="{}" lang="scss">
53 | @import '~pretty-checkbox/scss/elements/default/fill';
54 | @import '~pretty-checkbox/scss/elements/default/outline';
55 | @import '~pretty-checkbox/scss/elements/default/thick';
56 | 
57 | @import '~pretty-checkbox/scss/elements/font-icon/general';
58 | 
59 | @import '~pretty-checkbox/scss/elements/svg/general';
60 | 
61 | @import '~pretty-checkbox/scss/elements/image/general';
62 | 
63 | @import '~pretty-checkbox/scss/elements/switch/general';
64 | @import '~pretty-checkbox/scss/elements/switch/fill';
65 | @import '~pretty-checkbox/scss/elements/switch/slim';
66 | 
67 | @import '~pretty-checkbox/scss/extras/toggle';
68 | @import '~pretty-checkbox/scss/extras/plain';
69 | @import '~pretty-checkbox/scss/extras/round';
70 | @import '~pretty-checkbox/scss/extras/curve';
71 | @import '~pretty-checkbox/scss/extras/animation';
72 | @import '~pretty-checkbox/scss/extras/disabled';
73 | @import '~pretty-checkbox/scss/extras/locked';
74 | @import '~pretty-checkbox/scss/extras/colors';
75 | @import '~pretty-checkbox/scss/extras/print';
76 | 
77 | @import '~pretty-checkbox/scss/states/hover';
78 | @import '~pretty-checkbox/scss/states/focus';
79 | @import '~pretty-checkbox/scss/states/indeterminate';
80 |     </textarea>
81 | </div>


--------------------------------------------------------------------------------
/apps/git-page/src/app/components/install-scss-customize/install-scss-customize.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-install-scss-customize',
 5 |   templateUrl: './install-scss-customize.component.html',
 6 |   changeDetection: ChangeDetectionStrategy.OnPush
 7 | })
 8 | export class InstallScssCustomizeComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/enums.ts:
--------------------------------------------------------------------------------
 1 | export enum MainRouteName {
 2 |   Home = 'home',
 3 |   DemoCheckbox = 'demo-checkbox',
 4 |   DemoRadio = 'demo-radio',
 5 |   API = 'api',
 6 |   Install = 'install'
 7 | }
 8 | 
 9 | export enum InstallRouteName {
10 |   Lib = 'lib',
11 |   ScssCustomize = 'scss-customize'
12 | }
13 | 
14 | export enum DemoRadioRouteName {
15 |   All = 'all',
16 |   Basic = 'basic',
17 |   Animations = 'animations',
18 |   Color = 'color',
19 |   ColorOutlineIcon = 'color-outline-icon',
20 |   ColorIcon = 'color-icon',
21 |   Plain = 'plain',
22 |   Switch = 'switch',
23 | }
24 | 
25 | export enum DemoCheckboxesRouteName {
26 |   Basic = 'basic',
27 |   Switch = 'switch',
28 |   Colors = 'colors',
29 | 
30 |   MixedColor = 'mixed-color',
31 |   MixedOutline = 'mixed-outline',
32 |   MixedSquareFill = 'mixed-square-fill',
33 |   MixedSquareThick = 'mixed-square-thick',
34 |   MixedSquareThickOutline = 'mixed-square-thick-outline',
35 |   MixedCurve = 'mixed-curve',
36 |   MixedCurveOutline = 'mixed-curve-outline',
37 |   MixedCurveFill = 'mixed-curve-fill',
38 |   MixedCurveThick = 'mixed-curve-thick',
39 |   MixedRound = 'mixed-round',
40 |   MixedRoundFill = 'mixed-round-fill',
41 |   MixedRoundThick = 'mixed-round-thick',
42 |   MixedSwitch = 'mixed-switch',
43 | 
44 |   FontIcons = 'font-icons',
45 |   Svg = 'svg',
46 |   Image = 'image',
47 | 
48 |   Animations = 'animations',
49 |   AnimationSmooth = 'animation-smooth',
50 |   AnimationJelly = 'animation-jelly',
51 |   AnimationTada = 'animation-tada',
52 |   AnimationRotate = 'animation-rotate',
53 |   AnimationPulse = 'animation-pulse',
54 | 
55 |   Toggle = 'toggle',
56 |   Scalability = 'scalability',
57 |   States = 'states',
58 |   All = 'all',
59 | 
60 |   Plain = 'plain',
61 |   Disable = 'disable',
62 |   Lock = 'lock',
63 |   Size = 'size',
64 | }
65 | 
66 | export enum ApiRouteName {
67 |   Checkbox = 'checkbox',
68 |   CheckboxWillChange = 'checkbox-will-change',
69 |   RadioGroup = 'radio-group',
70 |   Radio = 'radio',
71 |   RadioWillChange = 'radio-will-change',
72 |   Interfaces = 'interfaces',
73 |   Enums = 'enums',
74 |   Toggle = 'toggle',
75 | 
76 |   ToggleWillChange = 'toggle-will-change',
77 |   Hover = 'hover',
78 |   HoverWillChange = 'hover-will-change',
79 |   Indeterminate = 'indeterminate',
80 |   IndeterminateWillChange = 'indeterminate-will-change',
81 |   Icon = 'icon',
82 |   Svg = 'svg',
83 |   Image = 'image'
84 | }
85 | 


--------------------------------------------------------------------------------
/apps/git-page/src/app/navigation.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | import { DemoCheckboxesRouteName, MainRouteName, ApiRouteName, InstallRouteName, DemoRadioRouteName } from './enums';
 4 | 
 5 | @Injectable({
 6 |   providedIn: 'root'
 7 | })
 8 | export class NavigationService {
 9 | 
10 |   constructor(private route: Router) { }
11 | 
12 |   goToDemoCheckbox(page?: DemoCheckboxesRouteName) {
13 |     if (page) {
14 |       this.route.navigate([MainRouteName.DemoCheckbox, page]);
15 | 
16 |     } else {
17 |       this.route.navigate([MainRouteName.DemoCheckbox]);
18 |     }
19 |   }
20 | 
21 |   goToDemoRadio(page?: DemoRadioRouteName) {
22 |     if (page) {
23 |       this.route.navigate([MainRouteName.DemoRadio, page]);
24 | 
25 |     } else {
26 |       this.route.navigate([MainRouteName.DemoRadio]);
27 |     }
28 |   }
29 | 
30 |   goToApi(page?: ApiRouteName) {
31 |     if (page) {
32 |       this.route.navigate([MainRouteName.API, page]);
33 | 
34 |     } else {
35 |       this.route.navigate([MainRouteName.API]);
36 |     }
37 |   }
38 | 
39 |   goToInstall(page?: InstallRouteName) {
40 |     if (page) {
41 |       this.route.navigate([MainRouteName.Install, page]);
42 | 
43 |     } else {
44 |       this.route.navigate([MainRouteName.Install]);
45 |     }
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/apps/git-page/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/apps/git-page/src/assets/.gitkeep


--------------------------------------------------------------------------------
/apps/git-page/src/assets/logo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/apps/git-page/src/assets/logo.gif


--------------------------------------------------------------------------------
/apps/git-page/src/assets/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/apps/git-page/src/assets/preview.gif


--------------------------------------------------------------------------------
/apps/git-page/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/apps/git-page/src/favicon.ico


--------------------------------------------------------------------------------
/apps/git-page/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>GitPage</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | 
13 |   <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
14 | 
15 |   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-30764414-2"></script>
16 |   <script>
17 |     window.dataLayer = window.dataLayer || [];
18 |     function gtag() { dataLayer.push(arguments); }
19 |     gtag('js', new Date());
20 |     gtag('config', 'UA-30764414-2');
21 | 
22 |   </script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/apps/git-page/src/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
2 | import { AppModule } from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule)
5 |     .catch(err => console.error(err));


--------------------------------------------------------------------------------
/apps/git-page/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../dist/out-tsc",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts"
 9 |   ],
10 |   "include": [
11 |     "src/**/*.d.ts"
12 |   ],
13 |   "exclude": [
14 |     "jest.config.ts",
15 |     "src/**/*.test.ts",
16 |     "src/**/*.spec.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/apps/git-page/tsconfig.editor.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "include": [
 4 |     "src/**/*.ts"
 5 |   ],
 6 |   "compilerOptions": {
 7 |     "types": [
 8 |       "jest",
 9 |       "node"
10 |     ]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/git-page/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.base.json",
 3 |   "files": [],
 4 |   "include": [],
 5 |   "references": [
 6 |     {
 7 |       "path": "./tsconfig.app.json"
 8 |     },
 9 |     {
10 |       "path": "./tsconfig.spec.json"
11 |     },
12 |     {
13 |       "path": "./tsconfig.editor.json"
14 |     }
15 |   ],
16 |   "compilerOptions": {
17 |     "target": "es2022",
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/git-page/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../dist/out-tsc",
 5 |     "module": "commonjs",
 6 |     "types": ["jest", "node"]
 7 |   },
 8 |   "files": ["src/test-setup.ts"],
 9 |   "include": [
10 |     "jest.config.ts",
11 |     "src/**/*.test.ts",
12 |     "src/**/*.spec.ts",
13 |     "src/**/*.d.ts"
14 | ]
15 | }
16 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "../../.eslintrc.json"
 4 |   ],
 5 |   "ignorePatterns": [
 6 |     "!**/*"
 7 |   ],
 8 |   "overrides": [
 9 |     {
10 |       "files": [
11 |         "*.ts"
12 |       ],
13 |       "rules": {
14 |         "@angular-eslint/directive-selector": [
15 |           "error",
16 |           {
17 |             "type": "attribute",
18 |             "prefix": "app",
19 |             "style": "camelCase"
20 |           }
21 |         ],
22 |         "@angular-eslint/component-selector": [
23 |           "error",
24 |           {
25 |             "type": "element",
26 |             "prefix": "app",
27 |             "style": "kebab-case"
28 |           }
29 |         ]
30 |       },
31 |       "extends": [
32 |         "plugin:@nx/angular",
33 |         "plugin:@angular-eslint/template/process-inline-templates"
34 |       ]
35 |     },
36 |     {
37 |       "files": [
38 |         "*.html"
39 |       ],
40 |       "extends": [
41 |         "plugin:@nx/angular-template"
42 |       ],
43 |       "rules": {}
44 |     }
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/jest.config.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | export default {
 3 |   displayName: 'libs-ngx-pretty-checkbox',
 4 |   preset: '../../jest.preset.js',
 5 |   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
 6 |   coverageDirectory: '../../coverage/libs/ngx-pretty-checkbox',
 7 |   transform: {
 8 |     '^.+\\.(ts|mjs|js|html)$': [
 9 |       'jest-preset-angular',
10 |       {
11 |         tsconfig: '<rootDir>/tsconfig.spec.json',
12 |         stringifyContentPathRegex: '\\.(html|svg)$',
13 |       },
14 |     ],
15 |   },
16 |   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
17 |   snapshotSerializers: [
18 |     'jest-preset-angular/build/serializers/no-ng-attributes',
19 |     'jest-preset-angular/build/serializers/ng-snapshot',
20 |     'jest-preset-angular/build/serializers/html-comment',
21 |   ]
22 | };
23 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 |   "dest": "../../dist/libs/ngx-pretty-checkbox",
4 |   "lib": {
5 |     "entryFile": "src/index.ts"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-pretty-checkbox",
 3 |   "version": "18.0.0",
 4 |   "peerDependencies": {
 5 |     "@angular/common": "^18.0.0",
 6 |     "@angular/core": "^18.0.0",
 7 |     "pretty-checkbox": "^3.0.3"
 8 |   },
 9 |   "dependencies": {
10 |     "tslib": "^2.3.0"
11 |   },
12 |   "bugs": {
13 |     "url": "https://github.com/miladfm/ngx-pretty-checkbox/issues"
14 |   },
15 |   "author": {
16 |     "name": "Milad Faghihi"
17 |   },
18 |   "description": "Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Angular",
19 |   "homepage": "https://miladfm.github.io/ngx-pretty-checkbox",
20 |   "keywords": [
21 |     "checkbox",
22 |     "radio",
23 |     "bootstrap",
24 |     "fonticon",
25 |     "icon",
26 |     "svg",
27 |     "switch",
28 |     "toggle",
29 |     "sass",
30 |     "css3",
31 |     "animation",
32 |     "pretty",
33 |     "check",
34 |     "colors",
35 |     "angular",
36 |     "ivy"
37 |   ],
38 |   "license": "MIT",
39 |   "repository": {
40 |     "type": "git",
41 |     "url": "git+https://github.com/miladfm/ngx-pretty-checkbox.git",
42 |     "link": "https://github.com/miladfm/ngx-pretty-checkbox"
43 |   },
44 |   "main": "bundles/ngx-pretty-checkbox.umd.js",
45 |   "module": "fesm2015/ngx-pretty-checkbox.js",
46 |   "es2015": "fesm2015/ngx-pretty-checkbox.js",
47 |   "esm2015": "esm2015/ngx-pretty-checkbox.js",
48 |   "fesm2015": "fesm2015/ngx-pretty-checkbox.js",
49 |   "typings": "ngx-pretty-checkbox.d.ts",
50 |   "metadata": "ngx-pretty-checkbox.metadata.json",
51 |   "sideEffects": false
52 | }


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/project.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "libs-ngx-pretty-checkbox",
 3 |   "$schema": "../../node_modules/nx/schemas/project-schema.json",
 4 |   "projectType": "library",
 5 |   "sourceRoot": "libs/ngx-pretty-checkbox/src",
 6 |   "prefix": "app",
 7 |   "targets": {
 8 |     "build": {
 9 |       "executor": "@nx/angular:package",
10 |       "outputs": [
11 |         "{workspaceRoot}/dist/{projectRoot}"
12 |       ],
13 |       "options": {
14 |         "project": "libs/ngx-pretty-checkbox/ng-package.json"
15 |       },
16 |       "configurations": {
17 |         "production": {
18 |           "tsConfig": "libs/ngx-pretty-checkbox/tsconfig.lib.prod.json"
19 |         },
20 |         "development": {
21 |           "tsConfig": "libs/ngx-pretty-checkbox/tsconfig.lib.json"
22 |         }
23 |       },
24 |       "defaultConfiguration": "production"
25 |     },
26 |     "test": {
27 |       "executor": "@nx/jest:jest",
28 |       "outputs": [
29 |         "{workspaceRoot}/coverage/{projectRoot}"
30 |       ],
31 |       "options": {
32 |         "jestConfig": "libs/ngx-pretty-checkbox/jest.config.ts",
33 |         "passWithNoTests": true
34 |       },
35 |       "configurations": {
36 |         "ci": {
37 |           "ci": true,
38 |           "codeCoverage": true
39 |         }
40 |       }
41 |     },
42 |     "lint": {
43 |       "executor": "@nx/linter:eslint",
44 |       "outputs": [
45 |         "{options.outputFile}"
46 |       ],
47 |       "options": {
48 |         "lintFilePatterns": [
49 |           "libs/ngx-pretty-checkbox/**/*.ts",
50 |           "libs/ngx-pretty-checkbox/**/*.html"
51 |         ]
52 |       }
53 |     }
54 |   },
55 |   "tags": []
56 | }
57 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/index.ts:
--------------------------------------------------------------------------------
 1 | export * from "./lib/components/ngx-pretty-checkbox.component";
 2 | export * from "./lib/components/ngx-pretty-checkbox-will-change.component";
 3 | export * from "./lib/components/ngx-pretty-hover.component";
 4 | export * from "./lib/components/ngx-pretty-hover-will-change.component";
 5 | export * from "./lib/components/ngx-pretty-Indeterminate.component";
 6 | export * from "./lib/components/ngx-pretty-Indeterminate-will-change.component";
 7 | export * from "./lib/components/ngx-pretty-radio.component";
 8 | export * from "./lib/components/ngx-pretty-radio-will-change.component";
 9 | export * from "./lib/components/ngx-pretty-toggle.component";
10 | export * from "./lib/components/ngx-pretty-toggle-will-change.component";
11 | export * from "./lib/directives/ngx-pretty-icon.directive";
12 | export * from "./lib/directives/ngx-pretty-image.directive";
13 | export * from "./lib/directives/ngx-pretty-radio-group.directive";
14 | export * from "./lib/directives/ngx-pretty-svg.directive";
15 | export * from "./lib/model";
16 | export * from "./lib/ngx-pretty-checkbox.module";
17 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/components/ngx-pretty-Indeterminate-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Component,
 3 |   Input,
 4 |   ElementRef,
 5 |   Renderer2,
 6 |   SimpleChanges,
 7 |   OnChanges,
 8 |   ChangeDetectionStrategy,
 9 |   ViewEncapsulation
10 | } from '@angular/core';
11 | import { getColorClassName } from '../utils';
12 | import { PrettyCheckboxColor } from '../model';
13 | import {CommonModule} from "@angular/common";
14 | 
15 | @Component({
16 |   selector: 'ngx-p-indeterminate[will-change], p-indeterminate[will-change]',
17 |   standalone: true,
18 |   imports: [CommonModule],
19 |   encapsulation: ViewEncapsulation.None,
20 |   changeDetection: ChangeDetectionStrategy.OnPush,
21 |   host: {
22 |     class: `state p-is-indeterminate`
23 |   },
24 |   template: `
25 |     <ng-content select="[pIcon], [p-icon], [pSvg], [p-svg], [pImage], [p-image]"></ng-content>
26 |     <label><ng-content></ng-content></label>
27 |   `,
28 |   styles: []
29 | })
30 | export class NgxPrettyIndeterminateWillChangeComponent implements OnChanges {
31 | 
32 |   @Input() color: PrettyCheckboxColor;
33 |   @Input() outline = false;
34 | 
35 |   constructor(private el: ElementRef, private renderer: Renderer2) { }
36 | 
37 |   ngOnChanges(changes: SimpleChanges) {
38 |     if (changes.color || changes.outline) {
39 | 
40 |       const oldClass =
41 |         getColorClassName(
42 |           changes.color ? changes.color.previousValue : this.color,
43 |           changes.outline ? changes.outline.previousValue : null
44 |         );
45 | 
46 |       const newClass =
47 |         getColorClassName(
48 |           changes.color ? changes.color.currentValue : this.color,
49 |           changes.outline ? changes.outline.currentValue : null
50 |         );
51 | 
52 |       this.renderer.removeClass(this.el.nativeElement, oldClass);
53 |       this.renderer.addClass(this.el.nativeElement, newClass);
54 |     }
55 |   }
56 | 
57 | }
58 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/components/ngx-pretty-Indeterminate.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Component,
 3 |   Input,
 4 |   ElementRef,
 5 |   Renderer2,
 6 |   AfterViewInit,
 7 |   ChangeDetectionStrategy,
 8 |   Attribute,
 9 |   ViewEncapsulation
10 | } from '@angular/core';
11 | import { PrettyCheckboxColor } from '../model';
12 | import {CommonModule} from "@angular/common";
13 | 
14 | @Component({
15 |   selector: 'ngx-p-indeterminate:not([will-change]), p-indeterminate:not([will-change])',
16 |   standalone: true,
17 |   imports: [CommonModule],
18 |   encapsulation: ViewEncapsulation.None,
19 |   changeDetection: ChangeDetectionStrategy.OnPush,
20 |   host: {
21 |     class: `state p-is-indeterminate`
22 |   },
23 |   template: `
24 |     <ng-content select="[pIcon], [p-icon], [pSvg], [p-svg], [pImage], [p-image]"></ng-content>
25 |     <label><ng-content></ng-content></label>
26 |   `,
27 |   styles: []
28 | })
29 | export class NgxPrettyIndeterminateComponent implements AfterViewInit {
30 | 
31 |   constructor(
32 |     private el: ElementRef,
33 |     private renderer: Renderer2,
34 |     @Attribute('outline') private _outline = false,
35 |     @Attribute('color')   private _color: PrettyCheckboxColor,
36 |   ) { }
37 | 
38 |   ngAfterViewInit() {
39 |     if (this._color) {
40 |       this.renderer.addClass(this.el.nativeElement,
41 |         `p-${this._color}${this._outline ? '-o' : ''}`
42 |       );
43 |     }
44 |   }
45 | 
46 | 
47 | }
48 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/components/ngx-pretty-hover-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Component,
 3 |   Input,
 4 |   ElementRef,
 5 |   Renderer2,
 6 |   SimpleChanges,
 7 |   OnChanges,
 8 |   ChangeDetectionStrategy,
 9 |   ViewEncapsulation
10 | } from '@angular/core';
11 | import { PrettyCheckboxColor } from '../model';
12 | import { getColorClassName } from '../utils';
13 | import {CommonModule} from "@angular/common";
14 | 
15 | 
16 | @Component({
17 |   selector: 'ngx-p-hover[will-change], p-hover[will-change]',
18 |   standalone: true,
19 |   imports: [CommonModule],
20 |   encapsulation: ViewEncapsulation.None,
21 |   changeDetection: ChangeDetectionStrategy.OnPush,
22 |   host: {
23 |     class: `state p-is-hover`
24 |   },
25 |   template: `
26 |     <ng-content select="[pIcon], [p-icon], [pSvg], [p-svg], [pImage], [p-image]"></ng-content>
27 |     <label><ng-content></ng-content></label>
28 |   `,
29 |   styles: []
30 | })
31 | export class NgxPrettyHoverWillChangeComponent implements OnChanges {
32 | 
33 |   @Input() color: PrettyCheckboxColor;
34 |   @Input() outline = false;
35 | 
36 |   constructor(
37 |     private el: ElementRef,
38 |     private renderer: Renderer2
39 |   ) { }
40 | 
41 |   ngOnChanges(changes: SimpleChanges) {
42 |     if (changes.color || changes.outline) {
43 | 
44 |       const oldClass =
45 |         getColorClassName(
46 |           changes.color ? changes.color.previousValue : this.color,
47 |           changes.outline ? changes.outline.previousValue : null
48 |         );
49 | 
50 |       const newClass =
51 |         getColorClassName(
52 |           changes.color ? changes.color.currentValue : this.color,
53 |           changes.outline ? changes.outline.currentValue : null
54 |         );
55 | 
56 |       this.renderer.removeClass(this.el.nativeElement, oldClass);
57 |       this.renderer.addClass(this.el.nativeElement, newClass);
58 |     }
59 |   }
60 | 
61 | }
62 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/components/ngx-pretty-hover.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Component,
 3 |   ElementRef,
 4 |   Renderer2,
 5 |   AfterViewInit,
 6 |   ChangeDetectionStrategy,
 7 |   Attribute,
 8 |   ViewEncapsulation
 9 | } from '@angular/core';
10 | import { PrettyCheckboxColor } from '../model';
11 | import {CommonModule} from "@angular/common";
12 | 
13 | @Component({
14 |   selector: 'ngx-p-hover:not([will-change]), p-hover:not([will-change])',
15 |   standalone: true,
16 |   imports: [CommonModule],
17 |   encapsulation: ViewEncapsulation.None,
18 |   changeDetection: ChangeDetectionStrategy.OnPush,
19 |   host: {
20 |     class: `state p-is-hover`
21 |   },
22 |   template: `
23 |     <ng-content select="[pIcon], [p-icon], [pSvg], [p-svg], [pImage], [p-image]"></ng-content>
24 |     <label><ng-content></ng-content></label>
25 |   `,
26 |   styles: []
27 | })
28 | export class NgxPrettyHoverComponent implements AfterViewInit {
29 | 
30 |   constructor(
31 |     private el: ElementRef,
32 |     private renderer: Renderer2,
33 |     @Attribute('outline') private _outline = false,
34 |     @Attribute('color')   private _color: PrettyCheckboxColor,
35 |   ) { }
36 | 
37 |   ngAfterViewInit() {
38 |     if (this._color) {
39 |       this.renderer.addClass(this.el.nativeElement,
40 |         `p-${this._color}${this._outline ? '-o' : ''}`
41 |       );
42 |     }
43 |   }
44 | 
45 | 
46 | }
47 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/components/ngx-pretty-toggle-will-change.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Input,
 3 |   ElementRef,
 4 |   Component,
 5 |   SimpleChanges,
 6 |   OnChanges,
 7 |   Renderer2,
 8 |   ChangeDetectionStrategy,
 9 |   ViewEncapsulation
10 | } from '@angular/core';
11 | import { PrettyCheckboxColor, PrettyCheckBoxToggleType } from '../model';
12 | import { getColorClassName } from '../utils';
13 | import {CommonModule} from "@angular/common";
14 | 
15 | @Component({
16 |   selector: 'ngx-p-toggle[will-change], p-toggle[will-change]',
17 |   standalone: true,
18 |   imports: [CommonModule],
19 |   encapsulation: ViewEncapsulation.None,
20 |   changeDetection: ChangeDetectionStrategy.OnPush,
21 |   host: {
22 |     'class': 'state',
23 |     '[class.p-on]': 'isToggleOn',
24 |     '[class.p-off]': 'isToggleOff',
25 |   },
26 |   template: `
27 |     <ng-content select="[pIcon], [p-icon], [pSvg], [p-svg], [pImage], [p-image]"></ng-content>
28 |     <label><ng-content></ng-content></label>
29 |   `,
30 |   styles: []
31 | })
32 | export class NgxPrettyToggleWillChangeComponent implements OnChanges {
33 | 
34 |   @Input() type: PrettyCheckBoxToggleType;
35 | 
36 |   get isToggleOn() { return this.type === PrettyCheckBoxToggleType.On; }
37 |   get isToggleOff() { return this.type === PrettyCheckBoxToggleType.Off; }
38 | 
39 |   @Input() color: PrettyCheckboxColor;
40 |   @Input() outline = false;
41 | 
42 |   constructor(private el: ElementRef, private renderer: Renderer2) { }
43 | 
44 |   ngOnChanges(changes: SimpleChanges) {
45 |     if (changes.color || changes.outline) {
46 | 
47 |       const oldClass =
48 |         getColorClassName(
49 |           changes.color ? changes.color.previousValue : this.color,
50 |           changes.outline ? changes.outline.previousValue : null
51 |         );
52 | 
53 |       const newClass =
54 |         getColorClassName(
55 |           changes.color ? changes.color.currentValue : this.color,
56 |           changes.outline ? changes.outline.currentValue : null
57 |         );
58 | 
59 |       this.renderer.removeClass(this.el.nativeElement, oldClass);
60 |       this.renderer.addClass(this.el.nativeElement, newClass);
61 |     }
62 |   }
63 | 
64 | }
65 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/components/ngx-pretty-toggle.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ElementRef,
 3 |   Component,
 4 |   AfterViewInit,
 5 |   Renderer2,
 6 |   ChangeDetectionStrategy,
 7 |   Attribute,
 8 |   ViewEncapsulation
 9 | } from '@angular/core';
10 | import { PrettyCheckboxColor, PrettyCheckBoxToggleType } from '../model';
11 | import {CommonModule} from "@angular/common";
12 | 
13 | @Component({
14 |   selector: 'ngx-p-toggle:not([will-change]), p-toggle:not([will-change])',
15 |   standalone: true,
16 |   imports: [CommonModule],
17 |   encapsulation: ViewEncapsulation.None,
18 |   changeDetection: ChangeDetectionStrategy.OnPush,
19 |   host: {
20 |     class: 'state'
21 |   },
22 |   template: `
23 |     <ng-content select="[pIcon], [p-icon], [pSvg], [p-svg], [pImage], [p-image]"></ng-content>
24 |     <label><ng-content></ng-content></label>
25 |   `,
26 |   styles: []
27 | })
28 | export class NgxPrettyToggleComponent implements AfterViewInit {
29 | 
30 |   constructor(
31 |     private el: ElementRef,
32 |     private renderer: Renderer2,
33 |     @Attribute('outline') private _outline = false,
34 |     @Attribute('color')   private _color: PrettyCheckboxColor,
35 |     @Attribute('type')   private _type: PrettyCheckBoxToggleType,
36 |   ) { }
37 | 
38 |   ngAfterViewInit() {
39 |     if (this._color) {
40 |       this.renderer.addClass(this.el.nativeElement,
41 |         `p-${this._color}${this._outline ? '-o' : ''}`
42 |       );
43 |     }
44 | 
45 |     this.renderer.addClass(this.el.nativeElement, `p-${this._type}`);
46 |   }
47 | 
48 | }
49 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/directives/ngx-pretty-icon.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[pIcon], [p-icon]',
 5 |   standalone: true
 6 | })
 7 | export class NgxPrettyIconDirective {
 8 | 
 9 |   constructor(private elemRef: ElementRef) {
10 |     this.elemRef.nativeElement.classList.add('icon');
11 |   }
12 | 
13 | }
14 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/directives/ngx-pretty-image.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[pImage], [p-image]',
 5 |   standalone: true
 6 | })
 7 | export class NgxPrettyImageDirective {
 8 | 
 9 |   constructor(private elemRef: ElementRef) {
10 |     this.elemRef.nativeElement.classList.add('image');
11 |   }
12 | 
13 | }
14 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/directives/ngx-pretty-radio-group.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, Output, EventEmitter } from '@angular/core';
 2 | import { PrettyRadioChange } from '../model';
 3 | 
 4 | let nextId = 1;
 5 | 
 6 | @Directive({
 7 |   selector: 'ngx-pretty-radio-group, p-radio-group',
 8 |   standalone: true,
 9 |   exportAs: 'ngxRadioGroup'
10 | })
11 | export class NgxPrettyRadioGroupDirective {
12 | 
13 |   public name = 'p-radio' + nextId++;
14 | 
15 |   @Output() change = new EventEmitter<PrettyRadioChange>();
16 | 
17 |   constructor() {}
18 | 
19 |   public _emitChange(event: PrettyRadioChange) {
20 |     this.change.emit(event);
21 |   }
22 | 
23 | }
24 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/directives/ngx-pretty-svg.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, AfterViewInit, ElementRef } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[pSvg], [p-svg]',
 5 |   standalone: true
 6 | })
 7 | export class NgxPrettySvgDirective implements AfterViewInit {
 8 | 
 9 |   constructor(private elemRef: ElementRef) { }
10 | 
11 |   ngAfterViewInit(): void {
12 |     this.elemRef.nativeElement.classList.add('svg');
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/model.ts:
--------------------------------------------------------------------------------
 1 | export enum PrettyCheckBoxToggleType {
 2 |   On = 'on',
 3 |   Off = 'off'
 4 | }
 5 | export enum PrettyCheckboxStroke {
 6 |   // Accept Null
 7 |   Fill = 'fill',   // Square and Switch
 8 |   Thick = 'thick', // Square
 9 |   Slim = 'slim' // Switch
10 | }
11 | 
12 | export enum PrettyCheckboxShape {
13 |   // Accept Null
14 |   Curve = 'curve',
15 |   Round = 'round',
16 | }
17 | 
18 | 
19 | export enum PrettyCheckboxColor {
20 |   Primary = 'primary',
21 |   Success = 'success',
22 |   Info = 'info',
23 |   Warning = 'warning',
24 |   Danger = 'danger',
25 | }
26 | 
27 | export enum PrettyCheckboxAnimation {
28 |   Smooth = 'smooth',
29 |   Jelly = 'jelly',
30 |   Tada = 'tada',
31 |   Rotate = 'rotate',
32 |   Pulse = 'pulse',
33 | }
34 | 
35 | export interface PrettyCheckBoxChange {
36 |   checked: boolean;
37 |   value: string;
38 |   event: Event;
39 | }
40 | 
41 | export interface PrettyRadioChange {
42 |   checked: boolean;
43 |   value: string;
44 |   event: Event;
45 | }
46 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/ngx-pretty-checkbox.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { NgxPrettyIconDirective } from './directives/ngx-pretty-icon.directive';
 3 | import { NgxPrettyImageDirective } from './directives/ngx-pretty-image.directive';
 4 | import { NgxPrettyRadioGroupDirective } from './directives/ngx-pretty-radio-group.directive';
 5 | import { NgxPrettySvgDirective } from './directives/ngx-pretty-svg.directive';
 6 | import { NgxPrettyCheckboxComponent } from './components/ngx-pretty-checkbox.component';
 7 | import { NgxPrettyCheckboxWillChangeComponent } from './components/ngx-pretty-checkbox-will-change.component';
 8 | import { NgxPrettyToggleComponent } from './components/ngx-pretty-toggle.component';
 9 | import { NgxPrettyToggleWillChangeComponent } from './components/ngx-pretty-toggle-will-change.component';
10 | import { NgxPrettyHoverComponent } from './components/ngx-pretty-hover.component';
11 | import { NgxPrettyHoverWillChangeComponent } from './components/ngx-pretty-hover-will-change.component';
12 | import { NgxPrettyIndeterminateComponent } from './components/ngx-pretty-Indeterminate.component';
13 | import { NgxPrettyIndeterminateWillChangeComponent } from './components/ngx-pretty-Indeterminate-will-change.component';
14 | import { NgxPrettyRadioComponent } from './components/ngx-pretty-radio.component';
15 | import { NgxPrettyRadioWillChangeComponent } from './components/ngx-pretty-radio-will-change.component';
16 | 
17 | const DECLARATIONS = [
18 |     NgxPrettyCheckboxComponent,
19 |     NgxPrettyCheckboxWillChangeComponent,
20 | 
21 |     NgxPrettyIconDirective,
22 |     NgxPrettySvgDirective,
23 |     NgxPrettyImageDirective,
24 | 
25 |     NgxPrettyToggleComponent,
26 |     NgxPrettyToggleWillChangeComponent,
27 | 
28 |     NgxPrettyHoverComponent,
29 |     NgxPrettyHoverWillChangeComponent,
30 | 
31 |     NgxPrettyIndeterminateComponent,
32 |     NgxPrettyIndeterminateWillChangeComponent,
33 | 
34 |     NgxPrettyRadioGroupDirective,
35 |     NgxPrettyRadioComponent,
36 |     NgxPrettyRadioWillChangeComponent
37 | ];
38 | 
39 | 
40 | @NgModule({
41 |     imports: [ DECLARATIONS ],
42 |     exports: [ DECLARATIONS ]
43 | })
44 | export class NgxPrettyCheckboxModule { }
45 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { PrettyCheckboxColor } from './model';
 2 | 
 3 | export function getColorClassName(color: PrettyCheckboxColor, outline?: boolean) {
 4 |     if (!color) { return null; }
 5 |     return 'p-' + color + (outline ? '-o' : '');
 6 | }
 7 | 
 8 | export function strToBoolean(str: string | boolean = ''): boolean {
 9 |     if (typeof str === 'boolean') {
10 |         return str;
11 |     }
12 | 
13 |     const regex = /^\s*(true|1|on|enable)\s*$/i;
14 |     return regex.test(str);
15 | }
16 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.base.json",
 3 |   "files": [],
 4 |   "include": [],
 5 |   "references": [
 6 |     {
 7 |       "path": "./tsconfig.lib.json"
 8 |     }
 9 |   ],
10 |   "compilerOptions": {
11 |     "target": "es2020"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../dist/out-tsc",
 5 |     "target": "ES2022",
 6 |     "declaration": true,
 7 |     "declarationMap": true,
 8 |     "inlineSources": true,
 9 |     "types": [],
10 |     "lib": ["dom", "es2018"],
11 |     "useDefineForClassFields": false
12 |   },
13 |   "angularCompilerOptions": {
14 |     "skipTemplateCodegen": true,
15 |     "strictMetadataEmit": true,
16 |     "enableResourceInlining": true
17 |   },
18 |   "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
19 |   "include": ["src/**/*.ts"]
20 | }
21 | 


--------------------------------------------------------------------------------
/libs/ngx-pretty-checkbox/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.lib.json",
 3 |   "compilerOptions": {
 4 |     "declarationMap": false,
 5 |     "target": "ES2022",
 6 |     "useDefineForClassFields": false,
 7 |     "declaration": true,
 8 |     "sourceMap": true
 9 |   },
10 |   "angularCompilerOptions": {
11 |     "compilationMode": "partial"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/logo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/logo.gif


--------------------------------------------------------------------------------
/migrations.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "migrations": [
 3 |     {
 4 |       "cli": "nx",
 5 |       "version": "19.2.0-beta.2",
 6 |       "description": "Updates the default workspace data directory to .nx/workspace-data",
 7 |       "implementation": "./src/migrations/update-19-2-0/move-workspace-data-directory",
 8 |       "package": "nx",
 9 |       "name": "19-2-0-move-graph-cache-directory"
10 |     },
11 |     {
12 |       "cli": "nx",
13 |       "version": "19.2.2-beta.0",
14 |       "description": "Updates the nx wrapper.",
15 |       "implementation": "./src/migrations/update-17-3-0/update-nxw",
16 |       "package": "nx",
17 |       "name": "19-2-2-update-nx-wrapper"
18 |     },
19 |     {
20 |       "version": "19.2.4-beta.0",
21 |       "description": "Set project name in nx.json explicitly",
22 |       "implementation": "./src/migrations/update-19-2-4/set-project-name",
23 |       "x-repair-skip": true,
24 |       "package": "nx",
25 |       "name": "19-2-4-set-project-name"
26 |     },
27 |     {
28 |       "cli": "nx",
29 |       "version": "19.1.0-beta.6",
30 |       "description": "Migrate no-extra-semi rules into user config, out of nx extendable configs",
31 |       "implementation": "./src/migrations/update-19-1-0-migrate-no-extra-semi/migrate-no-extra-semi",
32 |       "package": "@nx/eslint-plugin",
33 |       "name": "update-19-1-0-rename-no-extra-semi"
34 |     },
35 |     {
36 |       "cli": "nx",
37 |       "version": "19.1.0-beta.2",
38 |       "requires": {
39 |         "@angular/core": ">=18.0.0"
40 |       },
41 |       "description": "Update the @angular/cli package version to ~18.0.0.",
42 |       "factory": "./src/migrations/update-19-1-0/update-angular-cli",
43 |       "package": "@nx/angular",
44 |       "name": "update-angular-cli-version-18-0-0"
45 |     },
46 |     {
47 |       "cli": "nx",
48 |       "version": "19.2.1-beta.0",
49 |       "requires": {
50 |         "@angular-eslint/eslint-plugin": ">=18.0.0"
51 |       },
52 |       "description": "Installs the '@typescript-eslint/utils' package when having installed '@angular-eslint/eslint-plugin' or '@angular-eslint/eslint-plugin-template' with version >=18.0.0.",
53 |       "factory": "./src/migrations/update-19-2-1/add-typescript-eslint-utils",
54 |       "package": "@nx/angular",
55 |       "name": "add-typescript-eslint-utils"
56 |     },
57 |     {
58 |       "version": "18.0.0",
59 |       "description": "Updates two-way bindings that have an invalid expression to use the longform expression instead.",
60 |       "factory": "./migrations/invalid-two-way-bindings/bundle",
61 |       "package": "@angular/core",
62 |       "name": "invalid-two-way-bindings"
63 |     },
64 |     {
65 |       "version": "18.0.0",
66 |       "description": "Replace deprecated HTTP related modules with provider functions",
67 |       "factory": "./migrations/http-providers/bundle",
68 |       "package": "@angular/core",
69 |       "name": "migration-http-providers"
70 |     }
71 |   ]
72 | }


--------------------------------------------------------------------------------
/nx.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tasksRunnerOptions": {
 3 |     "default": {
 4 |       "runner": "nx-cloud",
 5 |       "options": {
 6 |         "cacheableOperations": [],
 7 |         "accessToken": "NzVlNGFjNDAtMjljMi00YjM1LTk5M2ItY2FkNTU2MzRmYjk0fHJlYWQtd3JpdGU="
 8 |       }
 9 |     }
10 |   },
11 |   "defaultBase": "master",
12 |   "generators": {
13 |     "@nx/angular:application": {
14 |       "style": "scss",
15 |       "linter": "eslint",
16 |       "unitTestRunner": "jest",
17 |       "e2eTestRunner": "cypress"
18 |     },
19 |     "@nx/angular:library": {
20 |       "linter": "eslint",
21 |       "unitTestRunner": "jest"
22 |     },
23 |     "@nx/angular:component": {
24 |       "style": "scss"
25 |     }
26 |   },
27 |   "targetDefaults": {
28 |     "lint": {
29 |       "inputs": [
30 |         "default",
31 |         "{workspaceRoot}/.eslintrc.json",
32 |         "{workspaceRoot}/.eslintignore"
33 |       ]
34 |     },
35 |     "test": {
36 |       "inputs": [
37 |         "default",
38 |         "^default",
39 |         "{workspaceRoot}/jest.preset.js",
40 |         "{workspaceRoot}/jest.preset.js",
41 |         "{workspaceRoot}/jest.preset.js"
42 |       ]
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-pretty-checkbox",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "start:demo": "nx run demo:serve",
 6 |     "start:git-page": "nx run git-page:serve",
 7 |     "build:lib": "nx run libs-ngx-pretty-checkbox:build:production",
 8 |     "publish": "npx tsx tools/publish/main.ts"
 9 |   },
10 |   "private": true,
11 |   "dependencies": {
12 |     "@angular/animations": "18.0.4",
13 |     "@angular/common": "18.0.4",
14 |     "@angular/compiler": "18.0.4",
15 |     "@angular/core": "18.0.4",
16 |     "@angular/forms": "18.0.4",
17 |     "@angular/platform-browser": "18.0.4",
18 |     "@angular/platform-browser-dynamic": "18.0.4",
19 |     "@angular/router": "18.0.4",
20 |     "@nx/angular": "19.3.0",
21 |     "cpx": "^1.5.0",
22 |     "material-design-icons": "^3.0.1",
23 |     "material-design-lite": "^1.3.0",
24 |     "ngx-highlight-js": "^15.0.0",
25 |     "pretty-checkbox": "^3.0.3",
26 |     "rxjs": "~6.5.5",
27 |     "tslib": "^2.3.0",
28 |     "zone.js": "0.14.4"
29 |   },
30 |   "devDependencies": {
31 |     "@angular-devkit/build-angular": "18.0.5",
32 |     "@angular-devkit/core": "18.0.5",
33 |     "@angular-devkit/schematics": "18.0.5",
34 |     "@angular-eslint/eslint-plugin": "18.0.1",
35 |     "@angular-eslint/eslint-plugin-template": "18.0.1",
36 |     "@angular-eslint/template-parser": "18.0.1",
37 |     "@angular/cli": "~18.0.0",
38 |     "@angular/compiler-cli": "18.0.4",
39 |     "@angular/language-service": "18.0.4",
40 |     "@nx/cypress": "19.3.0",
41 |     "@nx/eslint-plugin": "19.3.0",
42 |     "@nx/jest": "19.3.0",
43 |     "@nx/js": "19.3.0",
44 |     "@nx/linter": "19.3.0",
45 |     "@schematics/angular": "18.0.5",
46 |     "@types/cpx": "^1.5.2",
47 |     "@types/jasmine": "~3.6.0",
48 |     "@types/jasminewd2": "~2.0.3",
49 |     "@types/jest": "^29.4.0",
50 |     "@types/node": "18.19.31",
51 |     "@typescript-eslint/eslint-plugin": "7.7.1",
52 |     "@typescript-eslint/parser": "7.7.1",
53 |     "@typescript-eslint/utils": "^8.0.0-alpha.28",
54 |     "codelyzer": "^6.0.0",
55 |     "cypress": "12.17.4",
56 |     "eslint": "8.57.0",
57 |     "eslint-config-prettier": "9.1.0",
58 |     "eslint-plugin-cypress": "2.14.0",
59 |     "jasmine-spec-reporter": "~5.0.0",
60 |     "jest": "^29.4.1",
61 |     "jest-environment-jsdom": "^29.4.1",
62 |     "jest-preset-angular": "14.1.1",
63 |     "ng-packagr": "18.0.0",
64 |     "nx": "19.3.0",
65 |     "nx-cloud": "19.0.0",
66 |     "postcss": "^8.4.5",
67 |     "postcss-import": "~14.1.0",
68 |     "postcss-preset-env": "~7.5.0",
69 |     "postcss-url": "~10.1.3",
70 |     "protractor": "~7.0.0",
71 |     "ts-jest": "29.1.1",
72 |     "ts-node": "10.9.1",
73 |     "tslint": "~6.1.0",
74 |     "typescript": "5.4.5"
75 |   },
76 |   "nx": {
77 |     "targets": {}
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/miladfm/ngx-pretty-checkbox/492c22f17d8b03e5717568515f85dcdf14514c37/preview.gif


--------------------------------------------------------------------------------
/tools/publish/main.ts:
--------------------------------------------------------------------------------
 1 | import { PrintProcess } from "./print-process";
 2 | import { PrintProcessStepState } from "./print-process.model";
 3 | import { execSync } from "./terminal-exec";
 4 | import * as cpx from "cpx";
 5 | import fs from 'fs';
 6 | import {terminalConfirm} from "./terminal-interaction";
 7 | 
 8 | const libPackageJson = JSON.parse(fs.readFileSync('libs/ngx-pretty-checkbox/package.json', 'utf-8'))
 9 | 
10 | enum PublishPackageStep {
11 |   BuildLib,
12 |   CopyAssetsFolder,
13 |   PublishNpm,
14 |   GitTag
15 | }
16 | 
17 | let printProcess: PrintProcess;
18 | 
19 | function onErrorExec(step: PublishPackageStep) {
20 |     return () => {
21 |       printProcess.updateState(step, PrintProcessStepState.Error);
22 |     };
23 |   }
24 | 
25 | 
26 | async function run() {
27 |   // const versionString = await getNewSemanticVersion(libPackageJson.version);
28 |   const confirmedPublish = await terminalConfirm(`Are you sure to publish this version (${libPackageJson.version}?)`, false);
29 | 
30 |   if (!confirmedPublish) {
31 |     return;
32 |   }
33 | 
34 |   printProcess = new PrintProcess([
35 |     { id: PublishPackageStep.BuildLib, state: PrintProcessStepState.Default, text: 'Build release library' },
36 |     { id: PublishPackageStep.CopyAssetsFolder, state: PrintProcessStepState.Default, text: 'Copy assets file library dist folder' },
37 |     { id: PublishPackageStep.PublishNpm, state: PrintProcessStepState.Default, text: 'Publish to npm' },
38 | 
39 |     { id: PublishPackageStep.GitTag, state: PrintProcessStepState.Default, text: 'Git tag' },
40 |   ], {
41 |     header: `Publish new version of ngx-pretty-checkbox to npm (${libPackageJson.version})`,
42 |   });
43 | 
44 | 
45 |   // 1- Build Lib
46 |   printProcess.updateState(PublishPackageStep.BuildLib, PrintProcessStepState.Pending);
47 |   execSync(`nx run libs-ngx-pretty-checkbox:build:production`, onErrorExec(PublishPackageStep.BuildLib));
48 |   printProcess.updateState(PublishPackageStep.BuildLib, PrintProcessStepState.Done);
49 | 
50 |   // 2- Copy assets file library dist folder
51 |   printProcess.updateState(PublishPackageStep.CopyAssetsFolder, PrintProcessStepState.Pending);
52 |   cpx.copySync('logo.gif', 'dist/libs/ngx-pretty-checkbox');
53 |   cpx.copySync('preview.gif', 'dist/libs/ngx-pretty-checkbox');
54 |   cpx.copySync('README.md', 'dist/libs/ngx-pretty-checkbox');
55 |   printProcess.updateState(PublishPackageStep.CopyAssetsFolder, PrintProcessStepState.Done);
56 | 
57 |   // 3- Publish to npm
58 |   printProcess.updateState(PublishPackageStep.PublishNpm, PrintProcessStepState.Pending);
59 |   execSync(`cd dist/libs/ngx-pretty-checkbox && npm publish`, onErrorExec(PublishPackageStep.PublishNpm));
60 |   printProcess.updateState(PublishPackageStep.PublishNpm, PrintProcessStepState.Done);
61 | 
62 |   // 4- Github Versioning
63 |   printProcess.updateState(PublishPackageStep.GitTag, PrintProcessStepState.Pending);
64 |   execSync(`git tag v${libPackageJson.version} -f`, onErrorExec(PublishPackageStep.GitTag));
65 |   execSync(`git push --tags`, onErrorExec(PublishPackageStep.GitTag));
66 |   printProcess.updateState(PublishPackageStep.GitTag, PrintProcessStepState.Done);
67 | }
68 | 
69 | run();


--------------------------------------------------------------------------------
/tools/publish/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "tools-publish",
3 |   "type": "module",
4 |   "version": "0.0.1",
5 |   "sideEffects": false
6 | }
7 | 


--------------------------------------------------------------------------------
/tools/publish/print-process.model.ts:
--------------------------------------------------------------------------------
 1 | export type PrintProcessStepId = string | number;
 2 | 
 3 | export enum PrintProcessStepState {
 4 |     Default,
 5 |     Pending,
 6 |     Done,
 7 |     Error
 8 | }
 9 | 
10 | export interface PrintProcessStep {
11 |     id: PrintProcessStepId;
12 |     state: PrintProcessStepState,
13 |     text: string
14 | }
15 | 
16 | export interface PrintProcessConfig {
17 |     autoPrint: boolean;
18 |     header?: string;
19 |     dividerSize?: number; // Default is length of header.
20 |     dividerPadding: number;
21 | }
22 | 
23 | export const DEFAULT_CONFIG: PrintProcessConfig = {
24 |     autoPrint: true,
25 |     dividerPadding: 1
26 | }


--------------------------------------------------------------------------------
/tools/publish/print.ts:
--------------------------------------------------------------------------------
 1 | import chalk from 'chalk';
 2 | 
 3 | // Global
 4 | export const print = console.log;
 5 | 
 6 | // Header
 7 | export const header = chalk.keyword('orange');
 8 | export const printHeader = (message: string) => print(header(message));
 9 | 
10 | // Info
11 | export const info = chalk.keyword('green');
12 | export const printInfo = (message: string) => print(info(message));
13 | 
14 | // Error
15 | export const error = chalk.keyword('red');
16 | export const printError = (message: string) => print(error(message));
17 | 
18 | // Divider
19 | export const divider = (length: number) => "-".repeat(length);
20 | export const printDivider = (length: number) => print(divider(length));
21 | 
22 | 
23 | // Remove Line
24 | export function removeLinesInTerminal(lineToRemove: number) {
25 |     for (let index = 0; index < lineToRemove; index++) {
26 |         process.stdout.moveCursor(0, -1) // up one line
27 |         process.stdout.clearLine(1) // from cursor to end
28 |     }
29 | }


--------------------------------------------------------------------------------
/tools/publish/semantic-version.ts:
--------------------------------------------------------------------------------
 1 | import { terminalConfirm, terminalInput, terminalListSelection } from "./terminal-interaction";
 2 | 
 3 | function stringVersionToNumber(version: string) {
 4 |     return version.split('.').map(v => parseInt(v));
 5 | }
 6 | 
 7 | 
 8 | function validateStringVersion(versionString: string) {
 9 |     const version = stringVersionToNumber(versionString);
10 |     return version.length === 3 && version.every(v => !isNaN(v))
11 | }
12 | 
13 | 
14 | function getVersionFromSuggestions(currentStringVersion: string): Promise<string | 'Custom'> {
15 | 
16 |     const currentVersion = stringVersionToNumber(currentStringVersion);
17 | 
18 |     const newVersionSuggestions = {
19 |         patch: `${currentVersion[0]}.${currentVersion[1]}.${currentVersion[2] + 1}`,
20 |         minor: `${currentVersion[0]}.${currentVersion[1] + 1}.0`,
21 |         major: `${currentVersion[0] + 1}.0.0`,
22 |     }
23 | 
24 |     return terminalListSelection(
25 |         `Select the new version (Current version is ${currentStringVersion})`,
26 |         [
27 |             { value: newVersionSuggestions.patch, text: newVersionSuggestions.patch },
28 |             { value: newVersionSuggestions.minor, text: newVersionSuggestions.minor },
29 |             { value: newVersionSuggestions.major, text: newVersionSuggestions.major },
30 |             { value: 'Custom', text: 'Custom' },
31 |         ]
32 |     )
33 | }
34 | 
35 | function getCustomVersion() {
36 | 
37 |     const validator = (newStringVersion: string) => {
38 |         const isVersionValid = validateStringVersion(newStringVersion);
39 |         return isVersionValid ? true : 'Version is invalid (Example: 1.2.4)'
40 |     }
41 | 
42 |     return terminalInput(`Enter the new version`, validator);
43 | }
44 | 
45 | function getConfirmation(newStringVersion: string) {
46 |     return terminalConfirm(`Are you sure to publish version ${newStringVersion}?)`, false);
47 | }
48 | 
49 | export async function getNewSemanticVersion(currentStringVersion: string): Promise<string | undefined> {
50 | 
51 |     let versionString: string | 'Custom' = await getVersionFromSuggestions(currentStringVersion);
52 | 
53 |     if (versionString === 'Custom') {
54 |         versionString = await getCustomVersion();
55 |     }
56 | 
57 |     return getConfirmation(versionString)
58 |         .then(confirmation => {
59 | 
60 |             if (confirmation) {
61 |                 return versionString;
62 |             }
63 |         });
64 | }


--------------------------------------------------------------------------------
/tools/publish/terminal-exec.ts:
--------------------------------------------------------------------------------
 1 | import { ExecSyncOptionsWithBufferEncoding } from "child_process";
 2 | import { execSync as nodeExecSync } from "child_process";
 3 | import { exit } from "process";
 4 | import { printError, print } from "./print";
 5 | 
 6 | 
 7 | export const OPTIONS: ExecSyncOptionsWithBufferEncoding = {
 8 |     stdio: 'pipe'
 9 | }
10 | 
11 | export function execSync(command: string, callbackOnFailed?: (e?: any) => void) {
12 | 
13 |     try {
14 |         return nodeExecSync(command, OPTIONS).toString();
15 | 
16 |     } catch (e) {
17 | 
18 |         if (callbackOnFailed) {
19 |             callbackOnFailed(e);
20 |         }
21 | 
22 |         print('');
23 |         printError(e.message);
24 |         print(e.stdout.toString());
25 |         exit(1);
26 |     }
27 | }


--------------------------------------------------------------------------------
/tools/publish/terminal-interaction.ts:
--------------------------------------------------------------------------------
 1 | import inquirer from 'inquirer';
 2 | 
 3 | // Confirmation
 4 | export function terminalConfirm(message: string, defaultValue: boolean = true): Promise<boolean> {
 5 | 
 6 |     return inquirer
 7 |         .prompt([
 8 |             {
 9 |                 type: 'confirm',
10 |                 name: 'confirm',
11 |                 message: message,
12 |                 default: defaultValue
13 |             }
14 |         ])
15 |         .then(result => result.confirm);
16 | }
17 | 
18 | // List Selection
19 | 
20 | interface TerminalListSelectionOption<T> {
21 |     text: string,
22 |     value: T
23 | }
24 | 
25 | export function terminalListSelection<T>(
26 |     message: string,
27 |     options: TerminalListSelectionOption<T>[]
28 | ): Promise<T> {
29 | 
30 |     return inquirer
31 |         .prompt([
32 |             {
33 |                 type: 'list',
34 |                 name: 'version',
35 |                 message: message,
36 |                 choices: options.map(e => e.text)
37 |             }
38 |         ])
39 |         .then(result =>
40 |             (options.find(option => option.text == result.version) as TerminalListSelectionOption<T>).value
41 |         );
42 | }
43 | 
44 | // Input
45 | export function terminalInput(
46 |     message: string,
47 |     validate: (terminalInput: string) => boolean | string
48 | ): Promise<string> {
49 | 
50 |     return inquirer
51 |         .prompt([
52 |             {
53 |                 type: 'input',
54 |                 name: 'version',
55 |                 message: message,
56 |                 validate: validate
57 |             }
58 |         ])
59 |         .then(result => result.version);
60 | }


--------------------------------------------------------------------------------
/tools/publish/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.base.json",
 3 |   "files": [],
 4 |   "include": ["**/*.ts"],
 5 |   "compilerOptions": {
 6 |     "target": "es2020",
 7 |     "resolveJsonModule": true,
 8 |     "esModuleInterop": true,
 9 |     "allowSyntheticDefaultImports": true
10 |   },
11 |   "ts-node": {
12 |     "esm": true,
13 |     "experimentalSpecifierResolution": "node",
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "rootDir": ".",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": false,
 9 |     "experimentalDecorators": true,
10 |     "importHelpers": true,
11 |     "target": "es2020",
12 |     "module": "esnext",
13 |     "typeRoots": [
14 |       "node_modules/@types"
15 |     ],
16 |     "lib": [
17 |       "esnext",
18 |       "dom"
19 |     ],
20 |     "skipLibCheck": true,
21 |     "skipDefaultLibCheck": true,
22 |     "strictNullChecks": false,
23 |     "strictPropertyInitialization": false,
24 |     "resolveJsonModule": true,
25 |     "allowSyntheticDefaultImports": true,
26 |     "baseUrl": ".",
27 |     "paths": {
28 |       "@lib/ngx-pretty-checkbox": [
29 |         "libs/ngx-pretty-checkbox/src/index.ts"
30 |       ]
31 |     }
32 |   },
33 |   "exclude": [
34 |     "node_modules",
35 |     "tmp"
36 |   ]
37 | }
38 | 


--------------------------------------------------------------------------------