├── .editorconfig ├── .github ├── release.sh └── workflows │ └── build.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── DEVELOPER.md ├── LICENSE ├── README.md ├── angular.json ├── demo ├── app │ ├── app-routing.module.ts │ ├── app.component.spec.ts │ ├── app.module.ts │ ├── components │ │ ├── app │ │ │ ├── app.component.html │ │ │ └── app.component.ts │ │ └── home │ │ │ ├── home.component.html │ │ │ └── home.component.ts │ ├── demos │ │ ├── alert │ │ │ ├── demo.component.html │ │ │ ├── demo.component.scss │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── badge │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── breakpoints │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── busy-indicator │ │ │ ├── demo.component.html │ │ │ ├── demo.component.scss │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── button-group │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── button │ │ │ ├── demo.component.html │ │ │ ├── demo.component.scss │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── calendar │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── checkbox │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── data-list │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ ├── demo.module.ts │ │ │ └── list-add-remove │ │ │ │ ├── create-kitten.component.ts │ │ │ │ ├── data-list-add-remove-demo.component.html │ │ │ │ ├── data-list-add-remove-demo.component.scss │ │ │ │ ├── data-list-add-remove-demo.component.ts │ │ │ │ └── data.ts │ │ ├── date-picker │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── dateadapter │ │ │ └── demo.module.ts │ │ ├── drawer │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── file-input │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── flip-switch │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── form-control-group │ │ │ ├── counter.component.ts │ │ │ ├── demo.component.html │ │ │ ├── demo.component.scss │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── gallery │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── icogram │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── icon │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ ├── demo.module.ts │ │ │ ├── icons.component.html │ │ │ └── icons.component.ts │ │ ├── input │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── jss-form │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ ├── demo.module.ts │ │ │ ├── hero.ts │ │ │ └── jss-form-extended.ts │ │ ├── layer │ │ │ ├── bar.component.html │ │ │ ├── bar.component.ts │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ ├── demo.module.ts │ │ │ ├── nag.component.html │ │ │ └── nag.component.ts │ │ ├── navigation │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── notification │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── notifier │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── off-click │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── panel │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── password-input │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── popover │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── progress-bar │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── radio-button │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── rating │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── select-list │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── select │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── slider │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── spinner │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── tab-nav │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── token │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── tooltip │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ ├── tour │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ │ └── zoom-box │ │ │ ├── demo.component.html │ │ │ ├── demo.component.ts │ │ │ └── demo.module.ts │ └── modules │ │ └── demo │ │ ├── demo.component.html │ │ ├── demo.component.scss │ │ ├── demo.component.ts │ │ └── demo.module.ts ├── assets │ ├── .gitkeep │ ├── android-chrome-192x192.png │ ├── android-chrome-384x384.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── site.webmanifest ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.scss ├── styles │ ├── demo.scss │ ├── md.css │ └── prism.scss ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json ├── tslint.json └── typings.d.ts ├── entrypoint.bash ├── gfx ├── angular_vcl_logo_square.png └── angular_vcl_logo_square.svg ├── lerna.json ├── lib └── ng-vcl │ ├── .npmignore │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── alert │ │ ├── README.md │ │ ├── alert.component.html │ │ ├── alert.component.ts │ │ ├── alert.service.ts │ │ ├── index.ts │ │ ├── input-alert.directive.ts │ │ └── types.ts │ ├── badge │ │ ├── README.md │ │ ├── badge.component.ts │ │ └── index.ts │ ├── breakpoints │ │ ├── README.md │ │ └── index.ts │ ├── busy-indicator │ │ ├── README.md │ │ ├── busy-indicator-cover.component.html │ │ ├── busy-indicator-cover.component.ts │ │ ├── busy-indicator.component.html │ │ ├── busy-indicator.component.scss │ │ ├── busy-indicator.component.ts │ │ └── index.ts │ ├── button-group │ │ ├── README.md │ │ ├── button-group.component.ts │ │ └── index.ts │ ├── button │ │ ├── README.md │ │ ├── button.component.html │ │ ├── button.component.ts │ │ └── index.ts │ ├── calendar │ │ ├── README.md │ │ ├── calendar.component.html │ │ ├── calendar.component.ts │ │ ├── calendar.handlers.ts │ │ ├── index.ts │ │ ├── interfaces.ts │ │ ├── utils.ts │ │ └── views │ │ │ ├── hours.component.html │ │ │ ├── hours.component.ts │ │ │ ├── minutes.component.html │ │ │ ├── minutes.component.ts │ │ │ ├── month.component.html │ │ │ ├── month.component.ts │ │ │ ├── year.component.html │ │ │ ├── year.component.ts │ │ │ ├── years.component.html │ │ │ └── years.component.ts │ ├── checkbox │ │ ├── README.md │ │ ├── checkbox.component.html │ │ ├── checkbox.component.ts │ │ └── index.ts │ ├── core │ │ ├── index.ts │ │ ├── label.ts │ │ ├── projection.ts │ │ └── utils.ts │ ├── data-list │ │ ├── README.md │ │ ├── data-list-item.directive.ts │ │ ├── data-list.component.html │ │ ├── data-list.component.scss │ │ ├── data-list.component.ts │ │ ├── index.ts │ │ └── types.ts │ ├── date-picker │ │ ├── README.md │ │ ├── date-picker-calendar.handlers.ts │ │ ├── date-picker.component.html │ │ ├── date-picker.component.scss │ │ ├── date-picker.component.ts │ │ └── index.ts │ ├── dateadapter │ │ ├── README.md │ │ ├── dateadapter-base.ts │ │ ├── dateadapter.ts │ │ ├── index.ts │ │ ├── interfaces.ts │ │ └── parsers │ │ │ ├── de.ts │ │ │ ├── en-gb.ts │ │ │ ├── en.ts │ │ │ ├── index.ts │ │ │ ├── iso.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ ├── drawer │ │ ├── README.md │ │ ├── drawer-container.component.html │ │ ├── drawer-container.component.scss │ │ ├── drawer-container.component.ts │ │ ├── drawer.component.html │ │ ├── drawer.component.ts │ │ ├── index.ts │ │ └── types.ts │ ├── file-input │ │ ├── README.md │ │ ├── accept.ts │ │ ├── file-input.component.html │ │ ├── file-input.component.ts │ │ └── index.ts │ ├── flip-switch │ │ ├── README.md │ │ ├── flip-switch.component.html │ │ ├── flip-switch.component.scss │ │ ├── flip-switch.component.ts │ │ └── index.ts │ ├── font-awesome │ │ ├── alias-map.ts │ │ ├── icon-resolver.service.ts │ │ └── index.ts │ ├── form-control-group │ │ ├── README.md │ │ ├── error-state-agent.ts │ │ ├── exports.ts │ │ ├── form-control-group.component.html │ │ ├── form-control-group.component.scss │ │ ├── form-control-group.component.ts │ │ ├── form.directive.ts │ │ ├── hint.component.scss │ │ ├── hint.component.ts │ │ ├── index.ts │ │ ├── interfaces.ts │ │ └── required.component.ts │ ├── gallery │ │ ├── README.md │ │ ├── gallery-body.component.html │ │ ├── gallery-body.component.ts │ │ ├── gallery-footer.component.html │ │ ├── gallery-footer.component.ts │ │ ├── gallery-image.component.ts │ │ ├── gallery-thumbnails.component.html │ │ ├── gallery-thumbnails.component.ts │ │ ├── gallery.component.html │ │ ├── gallery.component.ts │ │ └── index.ts │ ├── icogram │ │ ├── README.md │ │ ├── icogram.component.html │ │ ├── icogram.component.ts │ │ └── index.ts │ ├── icon │ │ ├── README.md │ │ ├── host-icon-renderer.service.ts │ │ ├── icon-alias-resolver.service.ts │ │ ├── icon-resolver.service.ts │ │ ├── icon.component.ts │ │ ├── icon.service.ts │ │ └── index.ts │ ├── index.ts │ ├── input │ │ ├── README.md │ │ ├── embedded-label.directive.ts │ │ ├── index.ts │ │ ├── input-field.component.ts │ │ ├── input.directive.ts │ │ └── textarea.directive.ts │ ├── jss-form │ │ ├── README.md │ │ ├── fields │ │ │ ├── array.ts │ │ │ ├── button-group.ts │ │ │ ├── button.ts │ │ │ ├── buttons.ts │ │ │ ├── checkbox.ts │ │ │ ├── date-picker.ts │ │ │ ├── field.ts │ │ │ ├── file-input.ts │ │ │ ├── hidden.ts │ │ │ ├── index.ts │ │ │ ├── input.ts │ │ │ ├── object.ts │ │ │ ├── password-input.ts │ │ │ ├── radio-group.ts │ │ │ ├── rating.ts │ │ │ ├── select-list.ts │ │ │ ├── select.ts │ │ │ ├── slider.ts │ │ │ ├── switch.ts │ │ │ ├── textarea.ts │ │ │ └── token.ts │ │ ├── index.ts │ │ ├── jss-form-hints.component.html │ │ ├── jss-form-hints.component.ts │ │ ├── jss-form-input-wrapper.component.html │ │ ├── jss-form-input-wrapper.component.scss │ │ ├── jss-form-input-wrapper.component.ts │ │ ├── jss-form.component.html │ │ ├── jss-form.component.scss │ │ ├── jss-form.component.ts │ │ ├── schemas.ts │ │ └── types.ts │ ├── layer │ │ ├── README.md │ │ ├── index.ts │ │ ├── layer-ref.ts │ │ ├── layer.directive.ts │ │ ├── layer.service.ts │ │ └── types.ts │ ├── material-design-icons │ │ ├── alias-map.ts │ │ ├── icon-resolver.service.ts │ │ └── index.ts │ ├── navigation │ │ ├── README.md │ │ ├── index.ts │ │ ├── navigation-item.component.html │ │ ├── navigation-item.component.scss │ │ ├── navigation-item.component.ts │ │ ├── navigation.component.html │ │ ├── navigation.component.scss │ │ ├── navigation.component.ts │ │ └── types.ts │ ├── notification │ │ ├── README.md │ │ ├── index.ts │ │ ├── notification.component.html │ │ ├── notification.component.ts │ │ └── types.ts │ ├── notifier │ │ ├── README.md │ │ ├── animations.ts │ │ ├── index.ts │ │ ├── notifier-handler.service.ts │ │ ├── notifier-overlay-ref.ts │ │ ├── notifier.component.html │ │ ├── notifier.component.ts │ │ ├── notifier.directive.ts │ │ ├── notifier.service.ts │ │ ├── portal-injector.ts │ │ └── types.ts │ ├── off-click │ │ ├── README.md │ │ ├── index.ts │ │ └── off-click.directive.ts │ ├── panel │ │ ├── README.md │ │ ├── index.ts │ │ ├── panel.component.html │ │ ├── panel.component.scss │ │ ├── panel.component.ts │ │ └── panel.directive.ts │ ├── password-input │ │ ├── README.md │ │ ├── index.ts │ │ ├── password-input.component.html │ │ └── password-input.component.ts │ ├── popover │ │ ├── README.md │ │ ├── index.ts │ │ └── popover.directive.ts │ ├── progress-bar │ │ ├── README.md │ │ ├── index.ts │ │ ├── progress-bar.component.html │ │ ├── progress-bar.component.scss │ │ └── progress-bar.component.ts │ ├── public_api.ts │ ├── radio-button │ │ ├── README.md │ │ ├── index.ts │ │ ├── interfaces.ts │ │ ├── radio-button.component.html │ │ ├── radio-button.component.ts │ │ └── radio-group.component.ts │ ├── rating │ │ ├── README.md │ │ ├── index.ts │ │ ├── rating-item.component.html │ │ ├── rating-item.component.ts │ │ ├── rating-label.component.ts │ │ ├── rating.component.html │ │ └── rating.component.ts │ ├── select-list │ │ ├── README.md │ │ ├── components │ │ │ ├── select-list-content.component.ts │ │ │ ├── select-list-header.component.html │ │ │ ├── select-list-header.component.ts │ │ │ ├── select-list-item.component.html │ │ │ ├── select-list-item.component.ts │ │ │ ├── select-list-separator.component.html │ │ │ └── select-list-separator.component.ts │ │ ├── index.ts │ │ ├── select-list.component.scss │ │ ├── select-list.component.ts │ │ └── types.ts │ ├── select │ │ ├── README.md │ │ ├── index.ts │ │ ├── select.component.html │ │ ├── select.component.scss │ │ └── select.component.ts │ ├── slider │ │ ├── README.md │ │ ├── index.ts │ │ ├── slider.component.html │ │ ├── slider.component.scss │ │ └── slider.component.ts │ ├── spinner │ │ ├── README.md │ │ ├── index.ts │ │ ├── spinner.component.html │ │ └── spinner.component.ts │ ├── tab-nav │ │ ├── README.md │ │ ├── index.ts │ │ ├── interfaces.ts │ │ ├── tab-nav.component.html │ │ ├── tab-nav.component.scss │ │ ├── tab-nav.component.ts │ │ ├── tab.component.html │ │ └── tab.component.ts │ ├── test.ts │ ├── token │ │ ├── README.md │ │ ├── index.ts │ │ ├── interfaces.ts │ │ ├── token-input.component.html │ │ ├── token-input.component.ts │ │ ├── token-list.component.ts │ │ ├── token.component.html │ │ └── token.component.ts │ ├── tooltip │ │ ├── README.md │ │ ├── index.ts │ │ ├── tooltip.component.html │ │ ├── tooltip.component.ts │ │ ├── tooltip.directive.ts │ │ └── types.ts │ ├── tour │ │ ├── README.md │ │ ├── index.ts │ │ ├── tour-overlay.component.css │ │ ├── tour-overlay.component.html │ │ ├── tour-overlay.component.ts │ │ ├── tour.component.html │ │ ├── tour.component.scss │ │ ├── tour.component.ts │ │ └── tour.service.ts │ └── zoom-box │ │ ├── README.md │ │ ├── index.ts │ │ ├── zoom-box-container.component.ts │ │ ├── zoom-box-magnifier.component.ts │ │ ├── zoom-box.component.html │ │ └── zoom-box.component.ts │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── markdownlint.json ├── package-lock.json ├── package.json ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | insert_final_newline = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | -------------------------------------------------------------------------------- /.github/release.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | if [ -n "$(git status --porcelain)" ]; then 4 | echo "Please commit all of your changes before making a release!" 5 | exit 1 6 | fi 7 | 8 | set -ex 9 | 10 | npm version "$1" --no-commit-hooks --no-git-tag-version 11 | 12 | pushd ./lib/ng-vcl 13 | npm version "$1" --no-commit-hooks --no-git-tag-version 14 | popd 15 | 16 | npm run changelog 17 | npm run build 18 | 19 | git add -A 20 | git commit -m "chore: release" 21 | git tag "v$1" 22 | git push --all 23 | 24 | npm run publish 25 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | on: 3 | push: 4 | branches: 5 | - master 6 | - dev 7 | 8 | jobs: 9 | build: 10 | runs-on: ubuntu-latest 11 | strategy: 12 | matrix: 13 | node-version: [20.x] 14 | 15 | steps: 16 | - uses: actions/checkout@v1 17 | 18 | - name: Extract branch name 19 | shell: bash 20 | run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})" 21 | id: extract_branch 22 | 23 | - name: Cache node modules 24 | uses: actions/cache@v4 25 | with: 26 | path: ~/.npm 27 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 28 | restore-keys: | 29 | ${{ runner.os }}-node- 30 | 31 | - name: Node ${{ matrix.node-version }} 32 | uses: actions/setup-node@v1 33 | with: 34 | node-version: ${{ matrix.node-version }} 35 | 36 | - name: install and build 37 | env: 38 | GIT_BRANCH: ${{ steps.extract_branch.outputs.branch }} 39 | run: | 40 | npm ci --force 41 | npm run docs 42 | 43 | - name: Deploy 44 | uses: JamesIves/github-pages-deploy-action@v4 45 | with: 46 | # ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 47 | # branch: gh-pages 48 | folder: docs 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.angular/cache 2 | *.*~ 3 | *.swp 4 | *.swo 5 | .angular 6 | .cache 7 | .DS_Store 8 | .settings 9 | .project 10 | .vscode 11 | npm-debug.log 12 | node_modules 13 | dist 14 | docs 15 | tmp 16 | .idea/ 17 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "singleQuote": true, 5 | "semi": true, 6 | "bracketSpacing": true, 7 | "arrowParens": "avoid", 8 | "trailingComma": "es5", 9 | "bracketSameLine": true, 10 | "printWidth": 80 11 | } 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) n-fuse GmbH and other contributors. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /demo/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './components/app/app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(waitForAsync(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [RouterTestingModule], 9 | declarations: [AppComponent], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'ng-vcl'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.debugElement.componentInstance; 22 | expect(app.title).toEqual('ng-vcl'); 23 | }); 24 | 25 | it('should render title in a h1 tag', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.debugElement.nativeElement; 29 | expect(compiled.querySelector('h1').textContent).toContain( 30 | 'Welcome to ng-vcl!' 31 | ); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /demo/app/components/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /demo/app/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { DomSanitizer } from '@angular/platform-browser'; 3 | import README from '!raw-loader!../../../../README.md'; 4 | 5 | @Component({ 6 | templateUrl: 'home.component.html', 7 | standalone: false 8 | }) 9 | export class HomeComponent { 10 | constructor(private sanitizer: DomSanitizer) {} 11 | 12 | get readme() { 13 | return README; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo/app/demos/alert/demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | -------------------------------------------------------------------------------- /demo/app/demos/alert/demo.component.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | display: flex; 3 | flex-direction: column; 4 | width: fit-content; 5 | } 6 | -------------------------------------------------------------------------------- /demo/app/demos/badge/demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | default 3 | primary 4 | success 5 | info 6 | warning 7 | error 8 |
9 | 10 |
11 | default 12 | primary 13 | success 14 | info 15 | warning 16 | error 17 |
18 | -------------------------------------------------------------------------------- /demo/app/demos/badge/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLBadgeModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLBadgeModule], 7 | }) 8 | export class BadgeDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/badge/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | import { VCLBadgeModule } from '@vcl/ng-vcl'; 5 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 6 | import { BadgeDemoComponent } from './demo.component'; 7 | import README from '!raw-loader!@vcl/ng-vcl/badge/README.md'; 8 | 9 | export function demo() { 10 | return { 11 | label: 'Badge', 12 | tabs: { 13 | Demo: BadgeDemoComponent, 14 | 'README.md': { 15 | type: 'md', 16 | content: README, 17 | }, 18 | 'demo.component.html': { 19 | type: 'html', 20 | content: require('!raw-loader!./demo.component.html'), 21 | }, 22 | 'demo.component.ts': { 23 | type: 'ts', 24 | content: require('!raw-loader!./demo.component.ts'), 25 | }, 26 | }, 27 | }; 28 | } 29 | 30 | @NgModule({ 31 | imports: [ 32 | RouterModule.forChild([ 33 | { 34 | path: '', 35 | component: DemoComponent, 36 | data: { demo }, 37 | }, 38 | ]), 39 | ], 40 | }) 41 | export class BadgeDemoModule {} 42 | -------------------------------------------------------------------------------- /demo/app/demos/breakpoints/demo.component.html: -------------------------------------------------------------------------------- 1 | 
xs: {{ xs$ | async }}
2 | 
sm: {{ sm$ | async }}
3 | 
md: {{ md$ | async }}
4 | 
lg: {{ lg$ | async }}
5 | 
xl: {{ xl$ | async }}
6 | 
xs_sm: {{ xs_sm$ | async }}
7 | -------------------------------------------------------------------------------- /demo/app/demos/breakpoints/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 5 | import { BreakpointsDemoComponent } from './demo.component'; 6 | import README from '!raw-loader!@vcl/ng-vcl/breakpoints/README.md'; 7 | 8 | export function demo() { 9 | return { 10 | label: 'Breakpoints', 11 | tabs: { 12 | Demo: BreakpointsDemoComponent, 13 | 'README.md': { 14 | type: 'md', 15 | content: README, 16 | }, 17 | 'demo.component.html': { 18 | type: 'html', 19 | content: require('!raw-loader!./demo.component.html'), 20 | }, 21 | 'demo.component.ts': { 22 | type: 'ts', 23 | content: require('!raw-loader!./demo.component.ts'), 24 | }, 25 | }, 26 | }; 27 | } 28 | 29 | @NgModule({ 30 | imports: [ 31 | RouterModule.forChild([ 32 | { 33 | path: '', 34 | component: DemoComponent, 35 | data: { demo }, 36 | }, 37 | ]), 38 | ], 39 | }) 40 | export class BreakpointsDemoModule {} 41 | -------------------------------------------------------------------------------- /demo/app/demos/busy-indicator/demo.component.html: -------------------------------------------------------------------------------- 1 |

Simple busy indicator

2 | Loading... 3 | 4 |

Horizontal busy indicator

5 | Loading... 8 | 9 |

Busy indicator with text

10 | Loading... 11 | 12 |

Indicator using icon font

13 | 16 | 17 |

Indicator using custom image

18 | 19 | Loading... 20 | 21 | 22 |

Busy container

23 |
28 | 29 | 32 |
33 | -------------------------------------------------------------------------------- /demo/app/demos/busy-indicator/demo.component.scss: -------------------------------------------------------------------------------- 1 | vcl-busy-indicator { 2 | .huge img { 3 | width: 5em; 4 | height: 5em; 5 | } 6 | 7 | margin-bottom: 40px; 8 | } 9 | -------------------------------------------------------------------------------- /demo/app/demos/busy-indicator/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation } from '@angular/core'; 2 | import { VCLBusyIndicatorModule, VCLButtonModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | encapsulation: ViewEncapsulation.None, 7 | styleUrls: ['./demo.component.scss'], 8 | imports: [VCLBusyIndicatorModule, VCLButtonModule], 9 | }) 10 | export class BusyDemoComponent { 11 | isBusy = false; 12 | 13 | makeBusy() { 14 | this.isBusy = true; 15 | setTimeout(() => (this.isBusy = false), 3000); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/app/demos/button-group/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLButtonGroupModule, VCLButtonModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLButtonGroupModule, VCLButtonModule], 7 | }) 8 | export class ButtonGroupDemoComponent { 9 | value1 = 2; 10 | value2 = 1; 11 | value3 = []; 12 | } 13 | -------------------------------------------------------------------------------- /demo/app/demos/button-group/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { ButtonGroupDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/button-group/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Button Group', 10 | tabs: { 11 | Demo: ButtonGroupDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class ButtonGroupDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/button/demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 6 | 7 | 10 | 11 | Button (a-tag) 12 | 13 | 16 | 17 | 21 | 22 | 26 | 27 | 32 | 33 | 36 |
37 | -------------------------------------------------------------------------------- /demo/app/demos/button/demo.component.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | display: flex; 3 | flex-direction: column; 4 | width: fit-content; 5 | align-items: start; 6 | } 7 | -------------------------------------------------------------------------------- /demo/app/demos/button/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLButtonModule, VCLIconModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | styleUrls: ['demo.component.scss'], 7 | imports: [VCLButtonModule], 8 | }) 9 | export class ButtonDemoComponent { 10 | someAction(param) { 11 | console.log('Action handler, param:', param); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /demo/app/demos/button/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { ButtonDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/button/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Button', 10 | tabs: { 11 | Demo: ButtonDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.scss': { 21 | type: 'scss', 22 | content: require('raw-loader!./demo.component.scss'), 23 | }, 24 | 'demo.component.ts': { 25 | type: 'ts', 26 | content: require('!raw-loader!./demo.component.ts'), 27 | }, 28 | }, 29 | }; 30 | } 31 | 32 | @NgModule({ 33 | imports: [ 34 | RouterModule.forChild([ 35 | { 36 | path: '', 37 | component: DemoComponent, 38 | data: { demo }, 39 | }, 40 | ]), 41 | ], 42 | }) 43 | export class ButtonDemoModule {} 44 | -------------------------------------------------------------------------------- /demo/app/demos/calendar/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { CalendarDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/calendar/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Calendar', 10 | tabs: { 11 | Demo: CalendarDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class CalendarDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/checkbox/demo.component.html: -------------------------------------------------------------------------------- 1 |

Horizontal

2 | Check 1 3 | Check 2 4 | Check 3 (disabled) 5 | 6 |

Vertical

7 | 8 |
9 | Check 1 10 | Check 2 11 | Check 3 (disabled) 12 |
13 | -------------------------------------------------------------------------------- /demo/app/demos/checkbox/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLCheckboxModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLCheckboxModule], 7 | }) 8 | export class CheckboxDemoComponent { 9 | value1 = false; 10 | value2 = false; 11 | value3 = false; 12 | value4 = false; 13 | value5 = false; 14 | value6 = false; 15 | } 16 | -------------------------------------------------------------------------------- /demo/app/demos/checkbox/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 4 | import { CheckboxDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/checkbox/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Checkbox', 10 | tabs: { 11 | Demo: CheckboxDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class CheckboxDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/data-list/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLBusyIndicatorModule, VCLDataListModule } from '@vcl/ng-vcl'; 3 | import { DataListAddRemoveDemo } from './list-add-remove/data-list-add-remove-demo.component'; 4 | import { NgTemplateOutlet } from '@angular/common'; 5 | 6 | @Component({ 7 | templateUrl: 'demo.component.html', 8 | imports: [ 9 | NgTemplateOutlet, 10 | VCLDataListModule, 11 | VCLBusyIndicatorModule, 12 | DataListAddRemoveDemo, 13 | ], 14 | }) 15 | export class DataListDemoComponent { 16 | value1 = 'gr'; 17 | value2 = ['fr']; 18 | value3 = undefined; 19 | } 20 | -------------------------------------------------------------------------------- /demo/app/demos/data-list/list-add-remove/data-list-add-remove-demo.component.scss: -------------------------------------------------------------------------------- 1 | .country-pane { 2 | position: relative; 3 | } 4 | 5 | .country-pane:hover .delete-button.hide { 6 | display: inline !important; 7 | } 8 | 9 | .delete-button { 10 | position: absolute; 11 | right: 0; 12 | top: 2em; 13 | 14 | .icon { 15 | font-size: 1.5em; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/app/demos/date-picker/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from '../../modules/demo/demo.module'; 4 | import { DatePickerDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/date-picker/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Date Picker', 10 | tabs: { 11 | Demo: DatePickerDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class DatepickerDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/dateadapter/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | import { VCLCalendarModule, VCLButtonModule } from '@vcl/ng-vcl'; 5 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 6 | import README from '!raw-loader!@vcl/ng-vcl/dateadapter/README.md'; 7 | 8 | export function demo() { 9 | return { 10 | label: 'Date Adapter', 11 | tabs: { 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | }, 17 | }; 18 | } 19 | 20 | @NgModule({ 21 | imports: [ 22 | CommonModule, 23 | DemoModule, 24 | VCLButtonModule, 25 | VCLCalendarModule, 26 | RouterModule.forChild([ 27 | { 28 | path: '', 29 | component: DemoComponent, 30 | data: { demo }, 31 | }, 32 | ]), 33 | ], 34 | declarations: [], 35 | }) 36 | export class DateadapterDemoModule {} 37 | -------------------------------------------------------------------------------- /demo/app/demos/drawer/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

6 | 7 | 8 | 9 | Drawer 10 | 11 | Content 12 | 13 | 14 |

15 | 16 | 17 | 18 |

19 | 20 | 21 | 22 | Drawer 23 | 24 | Content 25 | 26 | 27 |

28 | 29 | 30 | 31 |

32 | 33 | 34 | 35 | Drawer 36 | 37 | Content 38 | 39 | 40 |

41 | -------------------------------------------------------------------------------- /demo/app/demos/drawer/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLButtonModule, VCLDrawerModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLButtonModule, VCLDrawerModule], 7 | }) 8 | export class DrawerDemoComponent { 9 | opened = true; 10 | } 11 | -------------------------------------------------------------------------------- /demo/app/demos/drawer/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { DrawerDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/drawer/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Drawer', 10 | tabs: { 11 | Demo: DrawerDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class DrawerDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/file-input/demo.component.html: -------------------------------------------------------------------------------- 1 |

File Input

2 | My File 3 | 4 | 5 |

File Input (Disabled)

6 | My File 7 | 8 |

File Input (multiple)

9 | Many Files 10 | 11 |

File Input (.png only)

12 | An Image 13 | -------------------------------------------------------------------------------- /demo/app/demos/file-input/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLFileInputModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLFileInputModule], 7 | }) 8 | export class FileInputDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/file-input/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { VCLFileInputModule } from '@vcl/ng-vcl'; 6 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 7 | import { FileInputDemoComponent } from './demo.component'; 8 | import README from '!raw-loader!@vcl/ng-vcl/file-input/README.md'; 9 | 10 | export function demo() { 11 | return { 12 | label: 'File Input', 13 | tabs: { 14 | Demo: FileInputDemoComponent, 15 | 'README.md': { 16 | type: 'md', 17 | content: README, 18 | }, 19 | 'demo.component.html': { 20 | type: 'html', 21 | content: require('!raw-loader!./demo.component.html'), 22 | }, 23 | 'demo.component.ts': { 24 | type: 'ts', 25 | content: require('!raw-loader!./demo.component.ts'), 26 | }, 27 | }, 28 | }; 29 | } 30 | 31 | @NgModule({ 32 | imports: [ 33 | RouterModule.forChild([ 34 | { 35 | path: '', 36 | component: DemoComponent, 37 | data: { demo }, 38 | }, 39 | ]), 40 | ], 41 | }) 42 | export class FileInputDemoModule {} 43 | -------------------------------------------------------------------------------- /demo/app/demos/flip-switch/demo.component.html: -------------------------------------------------------------------------------- 1 |

Basic

2 |
3 | Current value: {{value1}} 4 | 5 |

Without labels

6 |
7 | Current value: {{value3}} 8 | 9 |

Round flipswitch

10 |
11 | Current value: {{value3}} 12 | 13 |

With custom labels

14 |
15 | Current value: {{value2}} 16 | 17 |

Disabled

18 |
19 | -------------------------------------------------------------------------------- /demo/app/demos/flip-switch/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLFlipSwitchModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLFlipSwitchModule], 7 | }) 8 | export class FlipSwitchDemoComponent { 9 | value1 = false; 10 | value2 = false; 11 | value3 = true; 12 | value4 = false; 13 | value5 = false; 14 | } 15 | -------------------------------------------------------------------------------- /demo/app/demos/flip-switch/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { VCLFlipSwitchModule } from '@vcl/ng-vcl'; 6 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 7 | import { FlipSwitchDemoComponent } from './demo.component'; 8 | import README from '!raw-loader!@vcl/ng-vcl/flip-switch/README.md'; 9 | 10 | export function demo() { 11 | return { 12 | label: 'Flip Switch', 13 | tabs: { 14 | Demo: FlipSwitchDemoComponent, 15 | 'README.md': { 16 | type: 'md', 17 | content: README, 18 | }, 19 | 'demo.component.html': { 20 | type: 'html', 21 | content: require('!raw-loader!./demo.component.html'), 22 | }, 23 | 'demo.component.ts': { 24 | type: 'ts', 25 | content: require('!raw-loader!./demo.component.ts'), 26 | }, 27 | }, 28 | }; 29 | } 30 | 31 | @NgModule({ 32 | imports: [ 33 | RouterModule.forChild([ 34 | { 35 | path: '', 36 | component: DemoComponent, 37 | data: { demo }, 38 | }, 39 | ]), 40 | ], 41 | }) 42 | export class FlipSwitchDemoModule {} 43 | -------------------------------------------------------------------------------- /demo/app/demos/form-control-group/demo.component.scss: -------------------------------------------------------------------------------- 1 | .help-wrapper { 2 | display: flex; 3 | flex-direction: row; 4 | align-items: flex-start; 5 | justify-content: space-between; 6 | 7 | > :first-child { 8 | flex: 0 0 90%; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /demo/app/demos/form-control-group/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { FormControlGroupDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/form-control-group/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Form Control Group', 10 | tabs: { 11 | Demo: FormControlGroupDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.scss': { 21 | type: 'scss', 22 | content: require('raw-loader!./demo.component.scss'), 23 | }, 24 | 'demo.component.ts': { 25 | type: 'ts', 26 | content: require('!raw-loader!./demo.component.ts'), 27 | }, 28 | }, 29 | }; 30 | } 31 | 32 | @NgModule({ 33 | imports: [ 34 | RouterModule.forChild([ 35 | { 36 | path: '', 37 | component: DemoComponent, 38 | data: { demo }, 39 | }, 40 | ]), 41 | ], 42 | }) 43 | export class FormControlGroupDemoModule {} 44 | -------------------------------------------------------------------------------- /demo/app/demos/gallery/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLGalleryModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLGalleryModule], 7 | }) 8 | export class GalleryDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/gallery/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { GalleryDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/gallery/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Gallery', 10 | tabs: { 11 | Demo: GalleryDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class GalleryDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/icogram/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | icogram with accessible link 4 | 5 |

6 | 7 | 8 | 9 |
prep/app icons
10 | 11 | 12 |

13 | 14 | 15 | 16 |
external link with appended icon
17 | 18 |

19 | 20 | 23 | 24 |
Disabled link
25 | 26 |

27 | -------------------------------------------------------------------------------- /demo/app/demos/icogram/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLIcogramModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLIcogramModule], 7 | }) 8 | export class IcogramDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/icogram/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | import { VCLIcogramModule, VCLIconModule } from '@vcl/ng-vcl'; 5 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 6 | import { IcogramDemoComponent } from './demo.component'; 7 | import README from '!raw-loader!@vcl/ng-vcl/icogram/README.md'; 8 | 9 | export function demo() { 10 | return { 11 | label: 'Icogram', 12 | tabs: { 13 | Demo: IcogramDemoComponent, 14 | 'README.md': { 15 | type: 'md', 16 | content: README, 17 | }, 18 | 'demo.component.html': { 19 | type: 'html', 20 | content: require('!raw-loader!./demo.component.html'), 21 | }, 22 | 'demo.component.ts': { 23 | type: 'ts', 24 | content: require('!raw-loader!./demo.component.ts'), 25 | }, 26 | }, 27 | }; 28 | } 29 | 30 | @NgModule({ 31 | imports: [ 32 | RouterModule.forChild([ 33 | { 34 | path: '', 35 | component: DemoComponent, 36 | data: { demo }, 37 | }, 38 | ]), 39 | ], 40 | }) 41 | export class IcogramDemoModule {} 42 | -------------------------------------------------------------------------------- /demo/app/demos/icon/demo.component.html: -------------------------------------------------------------------------------- 1 | Custom icon (from the Font Awesome icon font): 2 | 3 |

4 | 5 | Icon provider based (from the Font Awesome icon font): 6 | 7 | 8 |

9 | 10 | PNG image resource based: 11 | 12 | 13 | 14 | 15 |

16 | 17 | SVG based: 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /demo/app/demos/icon/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLIconModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLIconModule], 7 | }) 8 | export class IconDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/input/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { VCLIconModule, VCLInputModule } from '@vcl/ng-vcl'; 4 | 5 | @Component({ 6 | templateUrl: 'demo.component.html', 7 | imports: [FormsModule, VCLInputModule, VCLIconModule], 8 | }) 9 | export class InputDemoComponent { 10 | data1 = ''; 11 | data2 = ''; 12 | } 13 | -------------------------------------------------------------------------------- /demo/app/demos/input/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { InputDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/input/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Input', 10 | tabs: { 11 | Demo: InputDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class InputDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/jss-form/demo.component.html: -------------------------------------------------------------------------------- 1 |

Disable all inputs

2 | 3 | 4 |

Create a hero

5 | 6 | 13 | 14 | 15 |
16 |

Form

17 | 
{{formState | json}}
18 |
19 | -------------------------------------------------------------------------------- /demo/app/demos/jss-form/jss-form-extended.ts: -------------------------------------------------------------------------------- 1 | import { NgIf } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | import { 5 | FormFieldControl, 6 | VCLFormFieldControlSchema, 7 | Conditional, 8 | VCLFormControlGroupModule, 9 | } from '@vcl/ng-vcl'; 10 | import { CounterComponent } from '../form-control-group/counter.component'; 11 | 12 | @Component({ 13 | template: ` 14 | 15 | {{ field.label }} 16 | 20 | 21 | `, 22 | imports: [ 23 | NgIf, 24 | ReactiveFormsModule, 25 | VCLFormControlGroupModule, 26 | CounterComponent, 27 | ], 28 | }) 29 | export class FormFieldCounterComponent { 30 | constructor(public field: FormFieldControl) {} 31 | } 32 | 33 | export interface CounterSchemaParams { 34 | min?: number; 35 | max?: number; 36 | } 37 | 38 | export interface CounterSchema extends VCLFormFieldControlSchema { 39 | type: 'counter'; 40 | params?: CounterSchemaParams | Conditional; 41 | } 42 | -------------------------------------------------------------------------------- /demo/app/demos/layer/bar.component.html: -------------------------------------------------------------------------------- 1 | 2 | {{title}} 3 | bar layer content 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /demo/app/demos/layer/bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | ComponentLayerRef, 4 | VCLButtonModule, 5 | VCLPanelModule, 6 | } from '@vcl/ng-vcl'; 7 | 8 | @Component({ 9 | templateUrl: 'bar.component.html', 10 | imports: [VCLPanelModule, VCLButtonModule], 11 | }) 12 | export class BarComponent { 13 | constructor(private layer: ComponentLayerRef) {} 14 | 15 | get title() { 16 | return this.layer.data.title; 17 | } 18 | 19 | close(value?: string) { 20 | this.layer.close({ 21 | value, 22 | }); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /demo/app/demos/layer/nag.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Cookies and similar technologies help us deliver our services. By using our services, 4 | you agree to our use of cookies. You can find further information about the 5 | use of Cookies on this website in our privacy policy. 6 |
7 |
8 |
9 | 10 | 11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /demo/app/demos/navigation/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | VCLButtonModule, 4 | VCLIcogramModule, 5 | VCLNavigationModule, 6 | } from '@vcl/ng-vcl'; 7 | 8 | @Component({ 9 | templateUrl: 'demo.component.html', 10 | imports: [VCLButtonModule, VCLNavigationModule, VCLIcogramModule], 11 | }) 12 | export class NavigationDemoComponent { 13 | hoverName?: string; 14 | hoverLastName?: string; 15 | 16 | onNavigate(route) { 17 | console.log('Navigate', route); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo/app/demos/navigation/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { NavigationDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/navigation/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Navigation', 10 | tabs: { 11 | Demo: NavigationDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class NavigationDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/notification/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | An inline message 4 | 5 | 6 | 7 | Success 8 | An inline success message 9 | 10 | 11 | -------------------------------------------------------------------------------- /demo/app/demos/notification/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { VCLNotificationModule } from '@vcl/ng-vcl'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLNotificationModule], 7 | }) 8 | export class NotificationDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/notifier/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from '../../modules/demo/demo.module'; 4 | import { NotifierDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/notifier/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Notifier', 10 | tabs: { 11 | Demo: NotifierDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class NotifierDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/off-click/demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | DIV 1 3 |

4 | Click somewhere outside this box to trigger an offClick 5 |
6 | DIV 2 7 |
8 | This is a sub-element of DIV 1 9 |
10 |
11 |
12 |
offClicks triggered: {{clicks}}
13 |
Click anywhere to trigger an offClick
14 | 15 | -------------------------------------------------------------------------------- /demo/app/demos/off-click/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { NgIf } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { VCLOffClickModule } from '@vcl/ng-vcl'; 4 | 5 | @Component({ 6 | templateUrl: 'demo.component.html', 7 | imports: [NgIf, VCLOffClickModule], 8 | }) 9 | export class OffClickDemoComponent { 10 | clicks = 0; 11 | 12 | offClick() { 13 | this.clicks++; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo/app/demos/off-click/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { OffClickDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/off-click/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Off Click', 10 | tabs: { 11 | Demo: OffClickDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class OffClickDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/panel/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | Panel Title 3 | Panel Content 4 | 5 |
6 | Panel Footer 7 |
8 | 9 | 10 | 11 | 12 | Panel Title 13 |
14 | 15 |
Panel Content
16 |
17 | 20 | 23 | 24 | 25 | 26 | Panel Title 27 |
28 | 29 |
Panel with semantic coloring
30 |
31 | 32 | -------------------------------------------------------------------------------- /demo/app/demos/panel/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation } from '@angular/core'; 2 | import { VCLIconModule, VCLPanelModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | encapsulation: ViewEncapsulation.None, 7 | imports: [VCLPanelModule, VCLIconModule], 8 | }) 9 | export class PanelDemoComponent { 10 | constructor() {} 11 | } 12 | -------------------------------------------------------------------------------- /demo/app/demos/panel/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from '../../modules/demo/demo.module'; 4 | import { PanelDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/panel/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Panel', 10 | tabs: { 11 | Demo: PanelDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class PanelDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/password-input/demo.component.html: -------------------------------------------------------------------------------- 1 |

Password input

2 | 3 | Password 4 | 5 | 6 | 7 | 8 |
9 | Password input value: {{ password }} 10 | 11 |

Password input (disabled)

12 | 13 | Password 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demo/app/demos/password-input/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { 4 | VCLFormControlGroupModule, 5 | VCLInputModule, 6 | VCLPasswordInputModule, 7 | } from '@vcl/ng-vcl'; 8 | 9 | @Component({ 10 | templateUrl: 'demo.component.html', 11 | imports: [ 12 | FormsModule, 13 | VCLFormControlGroupModule, 14 | VCLInputModule, 15 | VCLPasswordInputModule, 16 | ], 17 | }) 18 | export class PasswordInputDemoComponent { 19 | password = 'password'; 20 | } 21 | -------------------------------------------------------------------------------- /demo/app/demos/password-input/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { PasswordInputDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/password-input/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Password Input', 10 | tabs: { 11 | Demo: PasswordInputDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class PasswordInputDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/popover/demo.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | The target 5 |
6 |
7 | 8 | 13 |
14 | Popover is connected to the target 15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 | 33 |
34 | Popover is connected to the target
35 |
36 | 37 | -------------------------------------------------------------------------------- /demo/app/demos/popover/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLButtonModule, VCLPopoverModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLPopoverModule, VCLButtonModule], 7 | }) 8 | export class PopoverDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/popover/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { PopoverDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/popover/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Popover', 10 | tabs: { 11 | Demo: PopoverDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class PopoverDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/progress-bar/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 |
7 | 8 |
9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /demo/app/demos/progress-bar/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { AsyncPipe } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { VCLProgressBarModule } from '@vcl/ng-vcl'; 4 | import { zip, range, interval, animationFrameScheduler } from 'rxjs'; 5 | import { map } from 'rxjs/operators'; 6 | 7 | @Component({ 8 | templateUrl: 'demo.component.html', 9 | imports: [AsyncPipe, VCLProgressBarModule], 10 | }) 11 | export class ProgressBarDemoComponent { 12 | value$ = zip(range(0, 1000), interval(50, animationFrameScheduler)).pipe( 13 | map(([x]) => x) 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /demo/app/demos/progress-bar/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { ProgressBarDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/progress-bar/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Progress-Bar', 10 | tabs: { 11 | Demo: ProgressBarDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class ProgressBarDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/radio-button/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { VCLIcogramModule, VCLRadioButtonModule } from '@vcl/ng-vcl'; 4 | 5 | @Component({ 6 | templateUrl: 'demo.component.html', 7 | imports: [FormsModule, VCLRadioButtonModule, VCLIcogramModule], 8 | }) 9 | export class RadioButtonDemoComponent { 10 | isChecked = false; 11 | 12 | rgValue1 = 'red'; 13 | rgValue2 = 'f'; 14 | rgValue3 = 'g'; 15 | 16 | onChange(value) { 17 | console.log('radio-button onChange fired'); 18 | console.dir(value); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo/app/demos/radio-button/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { VCLRadioButtonModule, VCLIcogramModule } from '@vcl/ng-vcl'; 6 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 7 | import { RadioButtonDemoComponent } from './demo.component'; 8 | import README from '!raw-loader!@vcl/ng-vcl/radio-button/README.md'; 9 | 10 | export function demo() { 11 | return { 12 | label: 'Radio Button', 13 | tabs: { 14 | Demo: RadioButtonDemoComponent, 15 | 'README.md': { 16 | type: 'md', 17 | content: README, 18 | }, 19 | 'demo.component.html': { 20 | type: 'html', 21 | content: require('!raw-loader!./demo.component.html'), 22 | }, 23 | 'demo.component.ts': { 24 | type: 'ts', 25 | content: require('!raw-loader!./demo.component.ts'), 26 | }, 27 | }, 28 | }; 29 | } 30 | 31 | @NgModule({ 32 | imports: [ 33 | RouterModule.forChild([ 34 | { 35 | path: '', 36 | component: DemoComponent, 37 | data: { demo }, 38 | }, 39 | ]), 40 | ], 41 | }) 42 | export class RadioButtonDemoModule {} 43 | -------------------------------------------------------------------------------- /demo/app/demos/rating/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { AsyncPipe } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { VCLRatingModule } from '@vcl/ng-vcl'; 4 | 5 | @Component({ 6 | templateUrl: 'demo.component.html', 7 | imports: [AsyncPipe, VCLRatingModule], 8 | }) 9 | export class RatingDemoComponent { 10 | horizontalValue = 2.5; 11 | verticalValue = 2.5; 12 | customValue = 7.5; 13 | } 14 | -------------------------------------------------------------------------------- /demo/app/demos/rating/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { RatingDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/rating/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Rating', 10 | tabs: { 11 | Demo: RatingDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class RatingDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/select-list/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLIconModule, VCLSelectListModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLSelectListModule, VCLIconModule], 7 | }) 8 | export class SelectListDemoComponent { 9 | value1 = 'gr'; 10 | value2 = []; 11 | value3 = 'gr'; 12 | } 13 | -------------------------------------------------------------------------------- /demo/app/demos/select-list/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { SelectListDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/select-list/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Select List', 10 | tabs: { 11 | Demo: SelectListDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class SelectListDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/select/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | VCLFormControlGroupModule, 4 | VCLIconModule, 5 | VCLSelectModule, 6 | } from '@vcl/ng-vcl'; 7 | 8 | @Component({ 9 | templateUrl: 'demo.component.html', 10 | imports: [VCLSelectModule, VCLIconModule, VCLFormControlGroupModule], 11 | }) 12 | export class SelectDemoComponent { 13 | value1 = undefined; 14 | value2 = []; 15 | value3 = undefined; 16 | value4 = undefined; 17 | search1 = ''; 18 | value5 = undefined; 19 | search2 = ''; 20 | value6 = undefined; 21 | value7 = undefined; 22 | search3 = ''; 23 | value8 = undefined; 24 | } 25 | -------------------------------------------------------------------------------- /demo/app/demos/select/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { SelectDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/select/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Select', 10 | tabs: { 11 | Demo: SelectDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class SelectDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/slider/demo.component.html: -------------------------------------------------------------------------------- 1 |

Basic

2 | 3 | Value: {{value1}} 4 | 5 |

With a scale

6 | 11 | 12 | Value: {{value2}} 13 | 14 |

With value locked to the scale

15 | 21 | 22 | Value: {{value3}} 23 | 24 | 25 |

custom labeled scale

26 | 32 | 33 | Value: {{value4}} 34 | 35 | 36 |

disabled

37 | 38 | 44 | 45 | 46 |

With value outer min/max bounds

47 | 52 | 53 | -------------------------------------------------------------------------------- /demo/app/demos/slider/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLSliderModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLSliderModule], 7 | }) 8 | export class SliderDemoComponent { 9 | value1 = 0; 10 | value2 = 0; 11 | value3 = 0; 12 | value4 = 0; 13 | value5 = 0; 14 | value6 = 0; 15 | } 16 | -------------------------------------------------------------------------------- /demo/app/demos/slider/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { SliderDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/slider/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Slider', 10 | tabs: { 11 | Demo: SliderDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class SliderDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/spinner/demo.component.html: -------------------------------------------------------------------------------- 1 |

Vertical

2 | 3 | 4 | Vertical 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Horizontal

12 | 13 | 14 | Horizontal 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /demo/app/demos/spinner/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { VCLInputModule, VCLSpinnerModule } from '@vcl/ng-vcl'; 4 | 5 | @Component({ 6 | templateUrl: 'demo.component.html', 7 | imports: [FormsModule, VCLInputModule, VCLSpinnerModule], 8 | }) 9 | export class SpinnerDemoComponent { 10 | data1 = 0; 11 | data2 = 0; 12 | } 13 | -------------------------------------------------------------------------------- /demo/app/demos/spinner/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { SpinnerDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/spinner/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Spinner', 10 | tabs: { 11 | Demo: SpinnerDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class SpinnerDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/tab-nav/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLTabNavModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLTabNavModule], 7 | }) 8 | export class TabNavDemoComponent { 9 | tabIndex = 0; 10 | } 11 | -------------------------------------------------------------------------------- /demo/app/demos/tab-nav/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { TabNavDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/tab-nav/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Tab Navigation', 10 | tabs: { 11 | Demo: TabNavDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class TabNavDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/token/demo.component.html: -------------------------------------------------------------------------------- 1 |

single tokens

2 | my token 3 | my selected token 4 | my removable token 5 | my icon token 6 |
7 | 8 |

token-list

9 | 10 | my token 1 11 | my token 2 12 | 13 |
14 | 15 |

selectable and removable tokenlist

16 | 17 | my token 1 18 | my token 2 19 | 20 |
21 | 22 |

token-input

23 | 24 | 25 |

token-input (disabled)

26 | 27 | -------------------------------------------------------------------------------- /demo/app/demos/token/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLTokenModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLTokenModule], 7 | }) 8 | export class TokenDemoComponent { 9 | onRemove(token) { 10 | console.log('onRemove', token); 11 | } 12 | 13 | onListChange(value) { 14 | console.log('onListChange', value); 15 | } 16 | 17 | onInputChange(value) { 18 | console.log('onInputChange', value); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo/app/demos/token/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { TokenDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/token/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Token', 10 | tabs: { 11 | Demo: TokenDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class TokenDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/tooltip/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLTooltipModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: './demo.component.html', 6 | styles: [ 7 | ` 8 | p { 9 | text-align: center; 10 | padding-top: 30px; 11 | } 12 | `, 13 | ], 14 | imports: [VCLTooltipModule], 15 | }) 16 | export class ToolTipDemoComponent {} 17 | -------------------------------------------------------------------------------- /demo/app/demos/tooltip/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { ToolTipDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/tooltip/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Tooltip', 10 | tabs: { 11 | Demo: ToolTipDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class ToolTipDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/tour/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { TourService, VCLTourModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLTourModule], 7 | }) 8 | export class TourDemoComponent { 9 | constructor(public tour: TourService) {} 10 | 11 | public startTour() { 12 | this.tour.initialize(); 13 | this.tour.start(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo/app/demos/tour/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { DemoComponent } from './../../modules/demo/demo.module'; 4 | import { TourDemoComponent } from './demo.component'; 5 | import README from '!raw-loader!@vcl/ng-vcl/tour/README.md'; 6 | 7 | export function demo() { 8 | return { 9 | label: 'Tour', 10 | tabs: { 11 | Demo: TourDemoComponent, 12 | 'README.md': { 13 | type: 'md', 14 | content: README, 15 | }, 16 | 'demo.component.html': { 17 | type: 'html', 18 | content: require('!raw-loader!./demo.component.html'), 19 | }, 20 | 'demo.component.ts': { 21 | type: 'ts', 22 | content: require('!raw-loader!./demo.component.ts'), 23 | }, 24 | }, 25 | }; 26 | } 27 | 28 | @NgModule({ 29 | imports: [ 30 | RouterModule.forChild([ 31 | { 32 | path: '', 33 | component: DemoComponent, 34 | data: { demo }, 35 | }, 36 | ]), 37 | ], 38 | }) 39 | export class TourDemoModule {} 40 | -------------------------------------------------------------------------------- /demo/app/demos/zoom-box/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLZoomBoxModule } from '@vcl/ng-vcl'; 3 | 4 | @Component({ 5 | templateUrl: 'demo.component.html', 6 | imports: [VCLZoomBoxModule], 7 | }) 8 | export class ZoomBoxDemoComponent {} 9 | -------------------------------------------------------------------------------- /demo/app/demos/zoom-box/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | import { VCLZoomBoxModule } from '@vcl/ng-vcl'; 5 | import { DemoModule, DemoComponent } from './../../modules/demo/demo.module'; 6 | import { ZoomBoxDemoComponent } from './demo.component'; 7 | import README from '!raw-loader!@vcl/ng-vcl/zoom-box/README.md'; 8 | 9 | export function demo() { 10 | return { 11 | label: 'Zoom Box', 12 | tabs: { 13 | Demo: ZoomBoxDemoComponent, 14 | 'README.md': { 15 | type: 'md', 16 | content: README, 17 | }, 18 | 'demo.component.html': { 19 | type: 'html', 20 | content: require('!raw-loader!./demo.component.html'), 21 | }, 22 | 'demo.component.ts': { 23 | type: 'ts', 24 | content: require('!raw-loader!./demo.component.ts'), 25 | }, 26 | }, 27 | }; 28 | } 29 | 30 | @NgModule({ 31 | imports: [ 32 | RouterModule.forChild([ 33 | { 34 | path: '', 35 | component: DemoComponent, 36 | data: { demo }, 37 | }, 38 | ]), 39 | ], 40 | }) 41 | export class ZoomBoxDemoModule {} 42 | -------------------------------------------------------------------------------- /demo/app/modules/demo/demo.component.html: -------------------------------------------------------------------------------- 1 |

{{ title }}

2 |
3 | 4 | 5 | {{ tab.name }} 6 |
7 | 8 |
9 |
10 | 
{{ tab.content }}
11 |
12 | 13 | 16 | 19 | 22 | 23 | 24 |
25 | -------------------------------------------------------------------------------- /demo/app/modules/demo/demo.component.scss: -------------------------------------------------------------------------------- 1 | markdown ::ng-deep table { 2 | display: block; 3 | width: 100%; 4 | overflow: auto; 5 | th, 6 | td { 7 | padding: 6px 13px; 8 | border: 1px solid #dfe2e5; 9 | } 10 | tr { 11 | background-color: #fff; 12 | border-top: 1px solid #c6cbd1; 13 | } 14 | tr:nth-child(2n) { 15 | background-color: #f6f8fa; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/app/modules/demo/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { VCLTabNavModule } from '@vcl/ng-vcl'; 4 | import { DemoComponent } from './demo.component'; 5 | import { PortalModule } from '@angular/cdk/portal'; 6 | import { MarkdownModule } from 'ngx-markdown'; 7 | 8 | export { DemoComponent }; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | VCLTabNavModule, 14 | PortalModule, 15 | MarkdownModule.forChild(), 16 | ], 17 | declarations: [DemoComponent], 18 | }) 19 | export class DemoModule {} 20 | -------------------------------------------------------------------------------- /demo/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/demo/assets/.gitkeep -------------------------------------------------------------------------------- /demo/assets/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/demo/assets/android-chrome-192x192.png -------------------------------------------------------------------------------- /demo/assets/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/demo/assets/android-chrome-384x384.png -------------------------------------------------------------------------------- /demo/assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/demo/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /demo/assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/demo/assets/favicon-16x16.png -------------------------------------------------------------------------------- /demo/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/demo/assets/favicon-32x32.png -------------------------------------------------------------------------------- /demo/assets/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-vcl demo", 3 | "short_name": "ng-vcl demo", 4 | "icons": [ 5 | { 6 | "src": "android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "android-chrome-384x384.png", 12 | "sizes": "384x384", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /demo/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /demo/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /demo/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ng-vcl demo 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /demo/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /demo/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode, LOCALE_ID } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule, { 13 | // providers: [{provide: LOCALE_ID, useValue: 'en-gb' }] 14 | }) 15 | .catch(err => console.error(err)); 16 | 17 | Prism.plugins.customClass.prefix('prism-'); 18 | -------------------------------------------------------------------------------- /demo/styles.scss: -------------------------------------------------------------------------------- 1 | @use '@angular/cdk/overlay-prebuilt.css'; 2 | 3 | @use '@vcl/vcl/theme' with ( 4 | $app-area-max-width: 100% 5 | ); 6 | 7 | @use '@vcl/vcl'; 8 | 9 | @use '@fortawesome/fontawesome-free/scss/fontawesome.scss'; 10 | @use '@fortawesome/fontawesome-free/scss/brands.scss' with ( 11 | $fa-font-path: '~@fortawesome/fontawesome-free/webfonts' 12 | ); 13 | @use '@fortawesome/fontawesome-free/scss/solid.scss' with ( 14 | $fa-font-path: '~@fortawesome/fontawesome-free/webfonts' 15 | ); 16 | 17 | @use '@mdi/font/scss/materialdesignicons.scss' with ( 18 | $mdi-font-path: '~@mdi/font/fonts' 19 | ); 20 | 21 | @use './styles/demo.scss'; 22 | @use './styles/md.css'; 23 | @use './styles/prism.scss'; 24 | -------------------------------------------------------------------------------- /demo/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting, 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | // First, initialize the Angular testing environment. 11 | getTestBed().initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting(), 14 | { 15 | teardown: { destroyAfterEach: false }, 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": ["node"] 6 | }, 7 | "files": [ 8 | "./main.ts", 9 | "./polyfills.ts" 10 | ], 11 | "include": [ 12 | "./**/*.d.ts" 13 | ] , 14 | "exclude": [ 15 | "test.ts", 16 | "**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /demo/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /demo/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "demo", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "demo", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.md'; 2 | declare module '!*'; 3 | declare var Prism: any; 4 | -------------------------------------------------------------------------------- /entrypoint.bash: -------------------------------------------------------------------------------- 1 | cd /app 2 | npm install 3 | npm run dev 4 | -------------------------------------------------------------------------------- /gfx/angular_vcl_logo_square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/gfx/angular_vcl_logo_square.png -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "version": "0.0.0" 6 | } 7 | -------------------------------------------------------------------------------- /lib/ng-vcl/.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | -------------------------------------------------------------------------------- /lib/ng-vcl/README.md: -------------------------------------------------------------------------------- 1 | # [ng-vcl](https://ng-vcl.github.io/ng-vcl/) 2 | 3 | A comprehensive library of components for Angular 11+ with [VCL](http://vcl.github.io/) based styling. 4 | 5 | **[Browse master demo](https://ng-vcl.github.io/ng-vcl/master)**
6 | **[Browse dev demo](https://ng-vcl.github.io/ng-vcl/dev)** 7 | 8 | ## Installation 9 | 10 | ```sh 11 | npm install @vcl/ng-vcl --save 12 | ``` 13 | 14 | ## Usage 15 | 16 | ```js 17 | import { VCLIconModule, VCLLayerModule } from '@vcl/ng-vcl'; 18 | 19 | @NgModule({ 20 | imports: [ 21 | VCLIconModule, 22 | ... 23 | ] 24 | }) 25 | export class AppModule { } 26 | ``` 27 | -------------------------------------------------------------------------------- /lib/ng-vcl/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /lib/ng-vcl/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ng-vcl", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /lib/ng-vcl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vcl/ng-vcl", 3 | "version": "3.2.1", 4 | "description": "A comprehensive library of components for Angular with VCL based styling", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/ng-vcl/ng-vcl.git" 8 | }, 9 | "author": "The ng-vcl authors", 10 | "license": "MIT", 11 | "peerDependencies": { 12 | "@angular/cdk": "^18.2.5", 13 | "@angular/common": "^18.2.5", 14 | "@angular/animations": "^18.2.5", 15 | "@angular/core": "^18.2.5", 16 | "@angular/forms": "^18.2.5", 17 | "@angular/router": "^18.2.5", 18 | "rxjs": "^7.8.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/alert/index.ts: -------------------------------------------------------------------------------- 1 | import { FormsModule } from '@angular/forms'; 2 | import { NgModule } from '@angular/core'; 3 | import { CommonModule } from '@angular/common'; 4 | import { VCLIcogramModule } from './../icogram/index'; 5 | import { VCLButtonModule } from './../button/index'; 6 | import { VCLLayerModule } from './../layer/index'; 7 | import { VCLInputModule } from './../input/index'; 8 | import { VCLIconModule } from '../icon/index'; 9 | import { VCLBusyIndicatorModule } from '../busy-indicator/index'; 10 | import { AlertComponent } from './alert.component'; 11 | import { AlertInputDirective } from './input-alert.directive'; 12 | import { AlertService } from './alert.service'; 13 | import { AlertType, AlertInput, AlertAlignment, AlertResult } from './types'; 14 | import { VCLFormControlGroupModule } from '../radio-button/index'; 15 | 16 | export { AlertService, AlertType, AlertInput, AlertAlignment, AlertResult }; 17 | 18 | @NgModule({ 19 | imports: [], 20 | exports: [], 21 | providers: [AlertService], 22 | }) 23 | export class VCLAlertModule {} 24 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/badge/badge.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Input, 3 | HostBinding, 4 | Component, 5 | ChangeDetectionStrategy, 6 | Directive, 7 | } from '@angular/core'; 8 | 9 | @Component({ 10 | selector: 'vcl-badge', 11 | template: '', 12 | changeDetection: ChangeDetectionStrategy.OnPush, 13 | }) 14 | export class BadgeComponent { 15 | @Input() 16 | type: 'primary' | 'success' | 'info' | 'warning' | 'error' | undefined; 17 | 18 | @HostBinding('class.badge') 19 | classVCLBadge = true; 20 | 21 | @HostBinding('class.primary') 22 | get vclPrimary() { 23 | return this.type === 'primary'; 24 | } 25 | @HostBinding('class.success') 26 | get vclSuccess() { 27 | return this.type === 'success'; 28 | } 29 | @HostBinding('class.info') 30 | get vclInfo() { 31 | return this.type === 'info'; 32 | } 33 | @HostBinding('class.warning') 34 | get vclWarning() { 35 | return this.type === 'warning'; 36 | } 37 | @HostBinding('class.error') 38 | get vclError() { 39 | return this.type === 'error'; 40 | } 41 | } 42 | 43 | @Directive({ 44 | selector: 'vcl-badge[vclRounded]', 45 | }) 46 | export class BadgeRoundedDirective { 47 | @HostBinding('class.rounded') 48 | rounded = true; 49 | } 50 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/badge/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BadgeComponent, BadgeRoundedDirective } from './badge.component'; 3 | 4 | export { BadgeComponent, BadgeRoundedDirective }; 5 | @NgModule({ 6 | imports: [BadgeComponent, BadgeRoundedDirective], 7 | exports: [BadgeComponent, BadgeRoundedDirective], 8 | }) 9 | export class VCLBadgeModule {} 10 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/breakpoints/README.md: -------------------------------------------------------------------------------- 1 | # Breakpoints 2 | 3 | VCL Breakpoint queries to be used with `@angular/cdk`'s BreakpointObserver or `window.matchMedia()` 4 | 5 | ### Usage 6 | 7 | ```ts 8 | import { VCLBreakpoints } from '@vcl/ng-vcl'; 9 | import { BreakpointObserver } from '@angular/cdk/layout'; 10 | 11 | export class MyComponent implements OnInit { 12 | constructor( 13 | private breakpointObserver: BreakpointObserver, 14 | ) {} 15 | 16 | xs_sm$: Observable; 17 | 18 | ngOnInit(): void { 19 | this.xs_sm$ = this.breakpointObserver.observe([VCLBreakpoints.xs, VCLBreakpoints.sm]).pipe( 20 | map(state => state.matches) 21 | ); 22 | } 23 | } 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/breakpoints/index.ts: -------------------------------------------------------------------------------- 1 | export const VCLBreakpoints = { 2 | xs: '(min-width: 0px) and (max-width: 599px)', 3 | sm: '(min-width: 600px) and (max-width: 1023px)', 4 | md: '(min-width: 1024px) and (max-width: 1439px)', 5 | lg: '(min-width: 1440px) and (max-width: 1919px)', 6 | xl: '(min-width: 1920px)', 7 | }; 8 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/busy-indicator/busy-indicator-cover.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 |
7 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/busy-indicator/busy-indicator-cover.component.ts: -------------------------------------------------------------------------------- 1 | import { NgIf } from '@angular/common'; 2 | import { 3 | Component, 4 | Input, 5 | HostBinding, 6 | ChangeDetectionStrategy, 7 | } from '@angular/core'; 8 | 9 | @Component({ 10 | // tslint:disable-next-line:component-selector 11 | selector: '[vcl-busy-indicator-cover]', 12 | templateUrl: 'busy-indicator-cover.component.html', 13 | changeDetection: ChangeDetectionStrategy.OnPush, 14 | imports: [NgIf], 15 | }) 16 | export class BusyIndicatorCoverComponent { 17 | // tslint:disable-next-line:no-input-rename 18 | @Input('vcl-busy-indicator-cover') 19 | @HostBinding('class.loading-layer-container') 20 | busy = false; 21 | } 22 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/busy-indicator/busy-indicator.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/busy-indicator/busy-indicator.component.scss: -------------------------------------------------------------------------------- 1 | vcl-busy-indicator { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/busy-indicator/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BusyIndicatorComponent } from './busy-indicator.component'; 3 | import { BusyIndicatorCoverComponent } from './busy-indicator-cover.component'; 4 | 5 | export { BusyIndicatorCoverComponent, BusyIndicatorComponent }; 6 | 7 | @NgModule({ 8 | imports: [BusyIndicatorCoverComponent, BusyIndicatorComponent], 9 | exports: [BusyIndicatorCoverComponent, BusyIndicatorComponent], 10 | }) 11 | export class VCLBusyIndicatorModule {} 12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/button-group/README.md: -------------------------------------------------------------------------------- 1 | # vcl-button-group 2 | 3 | A button group which distributes space for each button equally to occupy 100% horizontal space. 4 | 5 | ## Usage 6 | 7 | ```js 8 | import { VCLButtonGroupModule } from '@vcl/ng-vcl'; 9 | 10 | @NgModule({ 11 | imports: [ VCLButtonGroupModule ], 12 | ... 13 | }) 14 | export class AppComponent {} 15 | ``` 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | 23 | ``` 24 | 25 | ### API 26 | 27 | #### Attributes 28 | 29 | | Name | Type | Default | Description 30 | | --------------------- | ---------------------- | -------- |-------------- 31 | | `value` | any | any[] | | Index of the selected button(s) 32 | | `selectionMode` | `single` \| `multiple` | `single` | Select only one or multiple buttons 33 | 34 | #### Events 35 | 36 | | Name | Type | Description 37 | | - | - | - 38 | | `valueChange` | event (any | any[]) | Triggers when selected buttons change 39 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/button-group/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ButtonGroupComponent } from './button-group.component'; 3 | 4 | export { ButtonGroupComponent }; 5 | 6 | @NgModule({ 7 | imports: [ButtonGroupComponent], 8 | exports: [ButtonGroupComponent], 9 | }) 10 | export class VCLButtonGroupModule {} 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/button/button.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/button/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLIcogramModule } from '../icogram/index'; 3 | import { VCLIconModule } from '../icon/index'; 4 | import { 5 | ButtonComponent, 6 | ButtonHost, 7 | BUTTON_HOST_TOKEN, 8 | } from './button.component'; 9 | 10 | export { ButtonComponent, ButtonHost, BUTTON_HOST_TOKEN }; 11 | 12 | @NgModule({ 13 | imports: [ButtonComponent], 14 | exports: [VCLIconModule, VCLIcogramModule, ButtonComponent], 15 | }) 16 | export class VCLButtonModule {} 17 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/calendar/utils.ts: -------------------------------------------------------------------------------- 1 | import { DateAdapterBase, VCLDateRange } from '../dateadapter/index'; 2 | import { VCLCalendarSelection } from './interfaces'; 3 | 4 | export function compare( 5 | adapter: DateAdapterBase, 6 | date1: VCLDate | VCLDate[] | VCLDateRange, 7 | date2: VCLDate, 8 | compareFn: (date1: VCLDate, date2: VCLDate) => number 9 | ): VCLCalendarSelection { 10 | if (adapter.isRange(date1) && !(compareFn(date1.start, date1.end) === 0)) { 11 | if (compareFn(date2, date1.start) > 0 && compareFn(date2, date1.end) < 0) { 12 | return 'range'; 13 | } else if (compareFn(date1.start, date2) === 0) { 14 | return 'range-start'; 15 | } else if (compareFn(date1.end, date2) === 0) { 16 | return 'range-end'; 17 | } 18 | } else if (adapter.isRange(date1)) { 19 | return compareFn(date1.start, date2) === 0 ? 'range-start-end' : false; 20 | } else if (adapter.isPartialRange(date1)) { 21 | return compareFn(date1.start, date2) === 0 ? 'range-partial' : false; 22 | } else if (adapter.isDateArray(date1)) { 23 | return date1.some(d => compareFn(d, date2) === 0); 24 | } else if (adapter.isDate(date1)) { 25 | return compareFn(date1, date2) === 0; 26 | } else { 27 | return false; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/calendar/views/minutes.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 16 |
17 |
18 | 19 | @for (minutesRow of calendar.minutes; track $index) { 20 |
21 | @for (m of minutesRow; track $index) { 22 |
30 | :{{ m.label }} 31 |
32 | } 33 |
34 | } 35 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/checkbox/README.md: -------------------------------------------------------------------------------- 1 | # vcl-checkbox 2 | 3 | A Checkbox utilizing `vcl-icon` 4 | 5 | ## Usage 6 | 7 | ```js 8 | import { VCLCheckboxModule } from '@vcl/ng-vcl'; 9 | 10 | @NgModule({ 11 | imports: [ VCLCheckboxModule ], 12 | ... 13 | }) 14 | export class AppComponent {} 15 | ``` 16 | 17 | ```html 18 | Check! 19 | ``` 20 | 21 | ### API 22 | 23 | #### Attributes 24 | 25 | | Name | Type | Default | Description 26 | | ------------ | ----------- | ------------------ |-------------- 27 | | `checked` | boolean | false | State of checkbox 28 | | `tabindex` | number | 0 | The tabindex of the checkbox 29 | | `disabled` | boolean | false | Disables checkbox if true 30 | 31 | ### Events 32 | 33 | Name | Type | Description 34 | ---------- | ------- | -------------------------------------- 35 | `checkedChange` | any | Fired when the checked state has changed 36 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/checkbox/checkbox.component.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CheckboxComponent } from './checkbox.component'; 3 | // import { CheckboxInputGroupComponent } from './checkbox-input-group.component'; 4 | // import { CheckboxLabelDirective } from './checkbox-label.directive'; 5 | 6 | export { CheckboxComponent }; 7 | 8 | @NgModule({ 9 | imports: [CheckboxComponent], 10 | exports: [CheckboxComponent], 11 | }) 12 | export class VCLCheckboxModule {} 13 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from './projection'; 2 | export * from './label'; 3 | export * from './utils'; 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/core/label.ts: -------------------------------------------------------------------------------- 1 | // import { Input, HostBinding, HostListener, Inject, Optional, ElementRef, Directive, ChangeDetectorRef, InjectionToken, OnInit, OnDestroy, NgModule, Injectable } from '@angular/core'; 2 | // import { Observable, Subscription } from 'rxjs'; 3 | 4 | import { NgModule, Directive, ElementRef, Input } from '@angular/core'; 5 | 6 | @Directive({ 7 | selector: 'vcl-label, [vclLabel]', 8 | }) 9 | export class LabelDirective { 10 | constructor(protected elementRef: ElementRef) {} 11 | 12 | @Input('label') 13 | _label?: string; 14 | 15 | get label() { 16 | return this._label || this.elementRef.nativeElement.innerText; 17 | } 18 | } 19 | 20 | @Directive({ 21 | selector: 'vcl-sub-label, [vclSubLabel]', 22 | }) 23 | export class SubLabelDirective extends LabelDirective { 24 | constructor(elementRef: ElementRef) { 25 | super(elementRef); 26 | } 27 | } 28 | @NgModule({ 29 | imports: [LabelDirective, SubLabelDirective], 30 | exports: [LabelDirective, SubLabelDirective], 31 | }) 32 | export class VCLCoreLabelModule {} 33 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/core/projection.ts: -------------------------------------------------------------------------------- 1 | import { Directive, NgModule } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[vclPrepend]', 5 | }) 6 | export class PrependDirective { 7 | constructor() {} 8 | } 9 | 10 | @Directive({ 11 | selector: '[vclAppend]', 12 | }) 13 | export class AppendDirective { 14 | constructor() {} 15 | } 16 | 17 | @NgModule({ 18 | imports: [PrependDirective, AppendDirective], 19 | exports: [PrependDirective, AppendDirective], 20 | }) 21 | export class VCLCoreContentProjectionModule {} 22 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/core/utils.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef } from '@angular/core'; 2 | 3 | export function hasProjectedContent( 4 | element: ElementRef | HTMLElement 5 | ) { 6 | if (!element) { 7 | return false; 8 | } 9 | 10 | element = element instanceof ElementRef ? element.nativeElement : element; 11 | 12 | const projectedContent = element.childNodes; 13 | for (let i = 0; i < projectedContent.length; i++) { 14 | if (projectedContent.item(i).nodeType !== 8) { 15 | // nodeType: 8 == comment 16 | return true; 17 | } 18 | } 19 | return false; 20 | } 21 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/data-list/data-list.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/data-list/data-list.component.scss: -------------------------------------------------------------------------------- 1 | vcl-data-list, 2 | vcl-data-list-header, 3 | vcl-data-list-footer, 4 | vcl-data-list-item { 5 | display: block; 6 | } 7 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/data-list/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLCoreContentProjectionModule } from '../core/index'; 3 | 4 | import { 5 | DataListComponent, 6 | DataListFooterDirective, 7 | DataListHeaderDirective, 8 | } from './data-list.component'; 9 | import { DataListItemDirective } from './data-list-item.directive'; 10 | import { 11 | DATA_LIST_TOKEN, 12 | DataList, 13 | DataListItem, 14 | DATA_LIST_ITEM_TOKEN, 15 | } from './types'; 16 | 17 | export { 18 | DataListComponent, 19 | DataListItemDirective, 20 | DATA_LIST_TOKEN, 21 | DataList, 22 | DataListItem, 23 | DATA_LIST_ITEM_TOKEN, 24 | DataListFooterDirective, 25 | DataListHeaderDirective, 26 | }; 27 | 28 | @NgModule({ 29 | imports: [ 30 | VCLCoreContentProjectionModule, 31 | DataListComponent, 32 | DataListItemDirective, 33 | DataListFooterDirective, 34 | DataListHeaderDirective, 35 | ], 36 | exports: [ 37 | DataListComponent, 38 | DataListItemDirective, 39 | VCLCoreContentProjectionModule, 40 | DataListFooterDirective, 41 | DataListHeaderDirective, 42 | ], 43 | }) 44 | export class VCLDataListModule {} 45 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/data-list/types.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | export interface DataListItem { 5 | value: any; 6 | isFocused: boolean; 7 | } 8 | 9 | export type DataListMode = 'single' | 'multiple' | 'none'; 10 | 11 | export interface DataList { 12 | readonly stateChange: Observable; 13 | readonly isDisabled: boolean; 14 | readonly selectionMode: DataListMode; 15 | isItemSelected(item: DataListItem): boolean; 16 | selectItem(item: DataListItem): void; 17 | onItemFocus(item: DataListItem): void; 18 | onItemBlur(item: DataListItem): void; 19 | } 20 | export const DATA_LIST_TOKEN = new InjectionToken('data-list'); 21 | 22 | export const DATA_LIST_ITEM_TOKEN = new InjectionToken('data-list-content'); 23 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/date-picker/date-picker.component.html: -------------------------------------------------------------------------------- 1 | 11 | 23 | 24 | 25 | 26 | 34 | 35 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/date-picker/date-picker.component.scss: -------------------------------------------------------------------------------- 1 | vcl-date-picker { 2 | display: block; 3 | } 4 | 5 | .date-picker > .calendar { 6 | width: 100%; 7 | } 8 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLCalendarModule, VCLCalendarHandler } from '../calendar/index'; 3 | import { VCLInputModule } from '../input/index'; 4 | import { VCLFormControlGroupModule } from '../form-control-group/index'; 5 | import { DatepickerComponent, DatepickerPick } from './date-picker.component'; 6 | import { DatepickerTimeHandler } from './date-picker-calendar.handlers'; 7 | 8 | export { DatepickerComponent, DatepickerPick, DatepickerTimeHandler }; 9 | 10 | @NgModule({ 11 | imports: [DatepickerComponent], 12 | exports: [ 13 | DatepickerComponent, 14 | VCLCalendarModule, 15 | VCLInputModule, 16 | VCLFormControlGroupModule, 17 | ], 18 | providers: [ 19 | { 20 | provide: VCLCalendarHandler, 21 | useClass: DatepickerTimeHandler, 22 | multi: true, 23 | }, 24 | ], 25 | }) 26 | export class VCLDatePickerModule {} 27 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/dateadapter/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface VCLDateRange { 2 | start: VCLDate; 3 | end: VCLDate; 4 | } 5 | 6 | export type DateAdapterBaseParseFormats = 'date' | 'time' | 'month'; 7 | export type DateAdapterBaseDisplayFormats = 8 | | 'date' 9 | | 'time' 10 | | 'month' 11 | | 'yearMonth' 12 | | 'yearMonthLong' 13 | | 'day' 14 | | 'weekday' 15 | | 'month' 16 | | 'year' 17 | | 'minute' 18 | | 'hour'; 19 | export type DateAdapterBasePattern = 'date' | 'time' | 'month'; 20 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/dateadapter/parsers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './types'; 2 | export * from './iso'; 3 | export * from './en'; 4 | export * from './en-gb'; 5 | export * from './de'; 6 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/dateadapter/parsers/types.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | import { 3 | DateAdapterBaseParseFormats, 4 | DateAdapterBaseDisplayFormats, 5 | DateAdapterBasePattern, 6 | } from '../interfaces'; 7 | 8 | export interface DateAdapterParser { 9 | readonly supportedLocales: ReadonlyArray; 10 | parse(date: string, format: DateAdapterBaseParseFormats): Date | undefined; 11 | format(date: Date, format: DateAdapterBaseDisplayFormats): string; 12 | pattern(format: DateAdapterBasePattern): string; 13 | } 14 | 15 | export const VCL_DATE_ADAPTER_PARSER = new InjectionToken( 16 | 'VCL_DATE_ADAPTER_PARSER' 17 | ); 18 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/drawer/drawer-container.component.html: -------------------------------------------------------------------------------- 1 |
7 | 8 | 9 | 10 |
15 | 16 |
17 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/drawer/drawer-container.component.scss: -------------------------------------------------------------------------------- 1 | vcl-drawer-container, 2 | vcl-drawer { 3 | display: block; 4 | } 5 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/drawer/drawer.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/drawer/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | import { NgModule } from '@angular/core'; 10 | import { DrawerContainerComponent } from './drawer-container.component'; 11 | import { DrawerComponent } from './drawer.component'; 12 | 13 | export { DrawerComponent, DrawerContainerComponent }; 14 | 15 | @NgModule({ 16 | imports: [DrawerComponent, DrawerContainerComponent], 17 | exports: [DrawerComponent, DrawerContainerComponent], 18 | declarations: [], 19 | }) 20 | export class VCLDrawerModule {} 21 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/drawer/types.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | export type VclDrawerMode = 'open' | 'close'; 5 | 6 | export const DRAWER_CONTAINER_HOST = new InjectionToken( 7 | 'DRAWER_CONTAINER_HOST' 8 | ); 9 | 10 | export interface Drawer { 11 | readonly opened: boolean; 12 | } 13 | 14 | export interface DrawerContainer { 15 | updateContentMargins(): void; 16 | notifyDrawerStateChange(drawer: Drawer, action: 'check' | 'toggle'): void; 17 | } 18 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/file-input/README.md: -------------------------------------------------------------------------------- 1 | # vcl-file-input 2 | 3 | Enhanced file input 4 | 5 | ## Usage 6 | 7 | ```html 8 | My Files 9 | ``` 10 | 11 | ### API 12 | 13 | #### Attributes 14 | 15 | Name | Type | Default | Description 16 | ------------- | ------- | ------------ | --------------------------------------------------- 17 | `accept` | string | | like html5 file-input 18 | `disabled` | boolean | false | 19 | `multiple` | boolean | false | if true, more than 1 file can be selected 20 | 21 | #### Events 22 | 23 | | Name | Type | Description 24 | | --------------------- | --------------- | - 25 | | `valueChange` | any | any[] | emits the new value when files have changed 26 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/file-input/accept.ts: -------------------------------------------------------------------------------- 1 | export function accept(file: File, acceptedFiles: string | string[]) { 2 | if (file && acceptedFiles) { 3 | const acceptedFilesArray = Array.isArray(acceptedFiles) 4 | ? acceptedFiles 5 | : acceptedFiles.split(','); 6 | 7 | const fileName = file.name || ''; 8 | const mimeType = file.type || ''; 9 | const baseMimeType = mimeType.replace(/\/.*$/, ''); 10 | 11 | return acceptedFilesArray.some(type => { 12 | const validType = type.trim(); 13 | if (validType.charAt(0) === '.') { 14 | return fileName.toLowerCase().endsWith(validType.toLowerCase()); 15 | } else if (/\/\*$/.test(validType)) { 16 | // This is something like a image/* mime type 17 | return baseMimeType === validType.replace(/\/.*$/, ''); 18 | } 19 | return mimeType === validType; 20 | }); 21 | } 22 | return true; 23 | } 24 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/file-input/file-input.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | {{ filename }} 5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/file-input/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FileInputComponent } from './file-input.component'; 3 | 4 | export { FileInputComponent }; 5 | 6 | @NgModule({ 7 | imports: [FileInputComponent], 8 | exports: [FileInputComponent], 9 | }) 10 | export class VCLFileInputModule {} 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/flip-switch/README.md: -------------------------------------------------------------------------------- 1 | # vcl-flip-switch 2 | 3 | ## Usage 4 | 5 | ```html 6 | 7 | ``` 8 | 9 | ### API 10 | 11 | #### Attributes 12 | 13 | Name | Type | Default | Description 14 | ------------- | ------- | ------- | ------------------------------- 15 | `value` | boolean | false | set the value 16 | `onLabel` | string | 'On' | The label for "on" 17 | `offLabel` | string | 'Off' | The label for "off" 18 | `rounded` | boolean | false | Round version of the flipswitch 19 | 20 | #### Events 21 | 22 | | Name | Type | Description 23 | | --------------------- | --------------- | - 24 | | `valueChange` | any | any[] | emits the new value after a change 25 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/flip-switch/flip-switch.component.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/flip-switch/flip-switch.component.scss: -------------------------------------------------------------------------------- 1 | vcl-flip-switch { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/flip-switch/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FlipSwitchComponent } from './flip-switch.component'; 3 | 4 | @NgModule({ 5 | imports: [FlipSwitchComponent], 6 | exports: [FlipSwitchComponent], 7 | providers: [], 8 | }) 9 | export class VCLFlipSwitchModule {} 10 | 11 | export { FlipSwitchComponent }; 12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/font-awesome/icon-resolver.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { 3 | IconResolverService, 4 | IconAliasResolverServiceBase, 5 | } from '../icon/index'; 6 | import { ALIAS_MAP } from './alias-map'; 7 | 8 | // The font-awesome name resolver following the CSS class name conventions of 9 | // the well-known Font Awesome icon font. Basically it translates 10 | // `fas:user` into `fas fa-user` 11 | @Injectable() 12 | export class FontAwesomeIconResolverService extends IconResolverService { 13 | private FA_REGEX = /^(fa[bsrl]):([a-z0-9-_]+)$/; 14 | 15 | resolve(icon: string) { 16 | const result = this.FA_REGEX.exec(icon); 17 | if (result) { 18 | const [, prefix, value] = result; 19 | return `${prefix} fa-${value}`; 20 | } 21 | return undefined; 22 | } 23 | } 24 | 25 | @Injectable() 26 | export class FontAwesomeVCLIconAliasResolverService extends IconAliasResolverServiceBase { 27 | constructor() { 28 | super('vcl', ALIAS_MAP as any); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/font-awesome/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IconResolverService } from '../icon/index'; 3 | import { 4 | FontAwesomeIconResolverService, 5 | FontAwesomeVCLIconAliasResolverService, 6 | } from './icon-resolver.service'; 7 | 8 | export { 9 | FontAwesomeIconResolverService, 10 | FontAwesomeVCLIconAliasResolverService, 11 | }; 12 | 13 | @NgModule({ 14 | providers: [ 15 | FontAwesomeIconResolverService, 16 | { 17 | provide: IconResolverService, 18 | useExisting: FontAwesomeIconResolverService, 19 | multi: true, 20 | }, 21 | { 22 | provide: IconResolverService, 23 | useClass: FontAwesomeVCLIconAliasResolverService, 24 | multi: true, 25 | }, 26 | ], 27 | }) 28 | export class VCLFontAwesomeModule {} 29 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/README.md: -------------------------------------------------------------------------------- 1 | # vcl-form-control-group 2 | 3 | Form control group to handle the error-state of form controls 4 | 5 | ## Usage 6 | 7 | ```js 8 | import { VCLFormControlGroupModule } from '@vcl/ng-vcl'; 9 | 10 | @NgModule({ 11 | imports: [ VCLFormControlGroupModule ], 12 | ... 13 | }) 14 | export class AppComponent {} 15 | ``` 16 | 17 | ```html 18 |
19 | 20 | Name 21 | 22 | 23 | 24 | Name is required 25 | Name must have a length of at least 2 characters 26 | 27 |
28 | ``` 29 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/error-state-agent.ts: -------------------------------------------------------------------------------- 1 | import { FormControlGroupForm } from './interfaces'; 2 | import { NgControl } from '@angular/forms'; 3 | 4 | export const defaultFormControlErrorStateAgent = ( 5 | form?: FormControlGroupForm, 6 | ngControl?: NgControl 7 | ) => { 8 | return form && ngControl 9 | ? ngControl && ngControl.invalid && (ngControl.touched || form.submitted) 10 | : false; 11 | }; 12 | 13 | export const dirtyFormControlErrorStateAgent = ( 14 | form?: FormControlGroupForm, 15 | ngControl?: NgControl 16 | ) => { 17 | return form && ngControl 18 | ? ngControl && ngControl.invalid && (ngControl.dirty || form.submitted) 19 | : false; 20 | }; 21 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/exports.ts: -------------------------------------------------------------------------------- 1 | import { 2 | FormControlGroupInputState, 3 | FormControlErrorStateAgent, 4 | FORM_CONTROL_GROUP_INPUT_STATE, 5 | FORM_CONTROL_GROUP_STATE, 6 | FormControlGroupState, 7 | FORM_CONTROL_GROUP_FORM, 8 | FormControlGroupForm, 9 | } from './interfaces'; 10 | import { FormDirective } from './form.directive'; 11 | import { FormControlGroupComponent } from './form-control-group.component'; 12 | import { 13 | FormControlHintComponent, 14 | FormControlHintErrorComponent, 15 | } from './hint.component'; 16 | import { FormControlRequiredComponent } from './required.component'; 17 | import { 18 | defaultFormControlErrorStateAgent, 19 | dirtyFormControlErrorStateAgent, 20 | } from './error-state-agent'; 21 | 22 | export { 23 | defaultFormControlErrorStateAgent, 24 | dirtyFormControlErrorStateAgent, 25 | FORM_CONTROL_GROUP_FORM, 26 | FORM_CONTROL_GROUP_INPUT_STATE, 27 | FORM_CONTROL_GROUP_STATE, 28 | FormControlGroupComponent, 29 | FormControlHintComponent, 30 | FormControlHintErrorComponent, 31 | FormControlGroupInputState, 32 | FormControlGroupState, 33 | FormControlErrorStateAgent, 34 | FormControlRequiredComponent, 35 | FormDirective, 36 | FormControlGroupForm, 37 | }; 38 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/form-control-group.component.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/form-control-group.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vcl/ng-vcl/4c0bd472c4fc2b0de2736c246a0d0b23c67f3e3a/lib/ng-vcl/src/form-control-group/form-control-group.component.scss -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/hint.component.scss: -------------------------------------------------------------------------------- 1 | vcl-hint, vcl-hint-warning, vcl-hint-success { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLCoreLabelModule } from '../core/index'; 3 | import { FormDirective } from './form.directive'; 4 | import { FormControlGroupComponent } from './form-control-group.component'; 5 | import { 6 | FormControlHintComponent, 7 | FormControlHintErrorComponent, 8 | } from './hint.component'; 9 | import { FormControlRequiredComponent } from './required.component'; 10 | 11 | export * from './exports'; 12 | 13 | @NgModule({ 14 | imports: [ 15 | VCLCoreLabelModule, 16 | FormControlGroupComponent, 17 | FormControlHintComponent, 18 | FormControlHintErrorComponent, 19 | FormControlRequiredComponent, 20 | FormDirective, 21 | ], 22 | exports: [ 23 | FormControlGroupComponent, 24 | FormControlHintComponent, 25 | FormControlHintErrorComponent, 26 | FormControlRequiredComponent, 27 | VCLCoreLabelModule, 28 | FormDirective, 29 | ], 30 | }) 31 | export class VCLFormControlGroupModule {} 32 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/form-control-group/required.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | Input, 4 | HostBinding, 5 | ChangeDetectionStrategy, 6 | Inject, 7 | } from '@angular/core'; 8 | import { FORM_CONTROL_GROUP_REQUIRED_INDICATOR } from './interfaces'; 9 | 10 | @Component({ 11 | selector: 'vcl-required', 12 | template: `{{ indicator }}`, 13 | changeDetection: ChangeDetectionStrategy.OnPush, 14 | }) 15 | export class FormControlRequiredComponent { 16 | constructor( 17 | @Inject(FORM_CONTROL_GROUP_REQUIRED_INDICATOR) 18 | private _indicator?: string 19 | ) {} 20 | 21 | @Input() 22 | indicator = this._indicator ?? '•'; 23 | 24 | @HostBinding('attr.aria-hidden') 25 | attrAriaHidden = true; 26 | 27 | @HostBinding('class.required-indicator') 28 | classVclRequiredIndicator = true; 29 | } 30 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/gallery/gallery-footer.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ target.selectedImage + 1 }} / {{ target.images ? target.images.length : 0 }} 3 |
4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/gallery/gallery-footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Optional } from '@angular/core'; 2 | import { GalleryComponent } from './gallery.component'; 3 | 4 | @Component({ 5 | selector: 'vcl-gallery-footer', 6 | templateUrl: 'gallery-footer.component.html', 7 | }) 8 | export class GalleryFooterComponent { 9 | @Input() 10 | target: GalleryComponent; 11 | 12 | constructor(@Optional() parent: GalleryComponent) { 13 | if (this.target == null) { 14 | this.target = parent; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/gallery/gallery-image.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'vcl-gallery-image', 5 | template: '', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | }) 8 | export class GalleryImageComponent { 9 | @Input({ required: true }) 10 | image: string; 11 | 12 | @Input() 13 | thumbnail = ''; 14 | 15 | @Input() 16 | alt = ''; 17 | } 18 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/gallery/gallery-thumbnails.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | @for (image of target.images; track $index; let idx = $index) { 4 |
8 | 15 |
16 | } 17 |
18 |
19 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/gallery/gallery-thumbnails.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, Input, Optional } from '@angular/core'; 2 | import { GalleryComponent } from './gallery.component'; 3 | import { CommonModule, NgOptimizedImage } from '@angular/common'; 4 | 5 | @Component({ 6 | selector: 'vcl-gallery-thumbnails', 7 | templateUrl: 'gallery-thumbnails.component.html', 8 | host: { class: 'gallery-thumbnails-host' }, 9 | imports: [NgOptimizedImage], 10 | }) 11 | export class GalleryThumbnailsComponent { 12 | @Input() 13 | galleryTitle: string; 14 | @Input() 15 | target: GalleryComponent; 16 | 17 | constructor( 18 | @Optional() parent: GalleryComponent, 19 | public elem: ElementRef 20 | ) { 21 | if (this.target == null) { 22 | this.target = parent; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/gallery/gallery.component.html: -------------------------------------------------------------------------------- 1 |
7 | 8 |
9 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/gallery/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { 3 | GalleryComponent, 4 | GalleryAnimationConfig, 5 | GALLERY_ANIMATIONS, 6 | } from './gallery.component'; 7 | import { GalleryImageComponent } from './gallery-image.component'; 8 | import { GalleryBodyComponent } from './gallery-body.component'; 9 | import { GalleryFooterComponent } from './gallery-footer.component'; 10 | import { GalleryThumbnailsComponent } from './gallery-thumbnails.component'; 11 | 12 | export { 13 | GalleryAnimationConfig, 14 | GALLERY_ANIMATIONS, 15 | GalleryComponent, 16 | GalleryImageComponent, 17 | GalleryBodyComponent, 18 | GalleryFooterComponent, 19 | GalleryThumbnailsComponent, 20 | }; 21 | 22 | @NgModule({ 23 | imports: [ 24 | GalleryComponent, 25 | GalleryImageComponent, 26 | GalleryBodyComponent, 27 | GalleryFooterComponent, 28 | GalleryThumbnailsComponent, 29 | ], 30 | exports: [ 31 | GalleryComponent, 32 | GalleryImageComponent, 33 | GalleryBodyComponent, 34 | GalleryFooterComponent, 35 | GalleryThumbnailsComponent, 36 | ], 37 | }) 38 | export class VCLGalleryModule {} 39 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icogram/README.md: -------------------------------------------------------------------------------- 1 | # vcl-icogram 2 | 3 | Combination of icon and text. 4 | Icons can be prepended or appended to a textual label and can be sourced from icon 5 | fonts. 6 | Also supports the anchor tag 7 | 8 | ## Usage 9 | 10 | ```html 11 | 12 | 13 | Label 14 | 15 | 16 | 17 | 20 | 21 | Link 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icogram/icogram.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icogram/icogram.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | Input, 4 | ChangeDetectionStrategy, 5 | HostBinding, 6 | } from '@angular/core'; 7 | 8 | @Component({ 9 | selector: 'vcl-icogram, [vcl-icogram]', 10 | templateUrl: 'icogram.component.html', 11 | changeDetection: ChangeDetectionStrategy.OnPush, 12 | }) 13 | export class IcogramComponent { 14 | @HostBinding('class.icogram') 15 | hostClasses = true; 16 | } 17 | 18 | @Component({ 19 | selector: '[vcl-a-icogram]', 20 | templateUrl: 'icogram.component.html', 21 | changeDetection: ChangeDetectionStrategy.OnPush, 22 | }) 23 | export class IcogramLinkComponent extends IcogramComponent { 24 | @HostBinding('class.content-link') 25 | clsContentLink = true; 26 | 27 | @HostBinding('attr.title') 28 | @HostBinding('attr.aria-label') 29 | @Input() 30 | title: string | undefined; 31 | 32 | @HostBinding('class.disabled') 33 | @Input() 34 | disabled = false; 35 | 36 | @HostBinding('style.cursor') 37 | get styleCursor() { 38 | return this.disabled ? 'not-allowed' : 'pointer'; 39 | } 40 | 41 | @Input() 42 | href: string | undefined; 43 | 44 | @HostBinding('attr.href') 45 | get attrHref() { 46 | return this.disabled ? undefined : this.href; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icogram/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLIconModule } from '../icon/index'; 3 | import { IcogramComponent, IcogramLinkComponent } from './icogram.component'; 4 | 5 | export { IcogramComponent, IcogramLinkComponent }; 6 | 7 | @NgModule({ 8 | imports: [VCLIconModule, IcogramComponent, IcogramLinkComponent], 9 | exports: [IcogramComponent, IcogramLinkComponent, VCLIconModule], 10 | }) 11 | export class VCLIcogramModule {} 12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icon/README.md: -------------------------------------------------------------------------------- 1 | # vcl-icon 2 | 3 | Icon which can be based on glyphs from icon fonts, inline svg and bitmaps. 4 | 5 | ## Usage 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | With image resource 12 | 13 | ```html 14 | 15 | 16 | 17 | ``` 18 | 19 | With SVG 20 | 21 | ```html 22 | 23 | 24 | 25 | ``` 26 | 27 | ### API 28 | 29 | #### Attributes 30 | 31 | | Name | Type | Default | Description 32 | | ------------ | ----------- | -------- |-------------- 33 | | `icon` | string | | Icon generator lookup via icon class provider 34 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icon/host-icon-renderer.service.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef, Renderer2, Injectable } from '@angular/core'; 2 | import { IconService } from './icon.service'; 3 | 4 | @Injectable() 5 | export class HostIconRendererService { 6 | constructor(private renderer: Renderer2, private iconService: IconService) {} 7 | 8 | private _currentFontIconClasses: string[] = []; 9 | 10 | // Remove old and set new icon classes on host 11 | setIcon(elementRef: ElementRef, icon: string) { 12 | const fontIconClass = (icon ? this.iconService.resolve(icon) : '') || ''; 13 | 14 | this._currentFontIconClasses.forEach(cls => { 15 | this.renderer.removeClass(elementRef.nativeElement, cls); 16 | }); 17 | 18 | this._currentFontIconClasses = fontIconClass 19 | .replace(/\s\s+/g, ' ') 20 | .split(' ') 21 | .filter(cls => !!cls); 22 | 23 | this._currentFontIconClasses.forEach(cls => { 24 | this.renderer.addClass(elementRef.nativeElement, cls); 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icon/icon-resolver.service.ts: -------------------------------------------------------------------------------- 1 | export abstract class IconResolverService { 2 | abstract resolve(icon: string): string | undefined; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icon/icon.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | Input, 4 | HostBinding, 5 | SimpleChanges, 6 | OnChanges, 7 | ChangeDetectionStrategy, 8 | ElementRef, 9 | AfterViewInit, 10 | } from '@angular/core'; 11 | import { HostIconRendererService } from './host-icon-renderer.service'; 12 | 13 | @Component({ 14 | selector: 'vcl-icon', 15 | providers: [HostIconRendererService], 16 | template: '', 17 | changeDetection: ChangeDetectionStrategy.OnPush, 18 | }) 19 | export class IconComponent implements OnChanges, AfterViewInit { 20 | constructor( 21 | private hostIcon: HostIconRendererService, 22 | private elementRef: ElementRef 23 | ) {} 24 | 25 | @Input() 26 | role?: string; 27 | 28 | @HostBinding('class.icon') 29 | vclIcon = true; 30 | 31 | @HostBinding('attr.role') 32 | get attrRole() { 33 | return this.role || 'img'; 34 | } 35 | 36 | @Input() 37 | icon?: string; 38 | 39 | ngOnChanges(changes: SimpleChanges): void { 40 | if (changes.icon && !changes.icon.isFirstChange()) { 41 | this.hostIcon.setIcon(this.elementRef, changes.icon.currentValue); 42 | } 43 | } 44 | 45 | ngAfterViewInit() { 46 | if (this.icon) { 47 | this.hostIcon.setIcon(this.elementRef, this.icon); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icon/icon.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Optional, Inject } from '@angular/core'; 2 | import { IconResolverService } from './icon-resolver.service'; 3 | 4 | @Injectable() 5 | export class IconService extends IconResolverService { 6 | private iconResolvers: IconResolverService[]; 7 | 8 | constructor( 9 | @Optional() 10 | @Inject(IconResolverService) 11 | iconResolvers: IconResolverService[] 12 | ) { 13 | super(); 14 | // Prioritize resolvers added the later 15 | this.iconResolvers = iconResolvers ? [...iconResolvers].reverse() : []; 16 | } 17 | 18 | resolve(icon: string): string | undefined { 19 | // Resolve first match 20 | for (const resolver of this.iconResolvers) { 21 | const result = resolver.resolve(icon); 22 | if (result !== undefined) { 23 | return result; 24 | } 25 | } 26 | return icon; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/icon/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IconComponent } from './icon.component'; 3 | import { IconResolverService } from './icon-resolver.service'; 4 | import { IconService } from './icon.service'; 5 | import { HostIconRendererService } from './host-icon-renderer.service'; 6 | import { 7 | IconAliasResolverServiceBase, 8 | VCLIconAliasMap, 9 | } from './icon-alias-resolver.service'; 10 | 11 | export { 12 | IconComponent, 13 | HostIconRendererService, 14 | IconAliasResolverServiceBase, 15 | VCLIconAliasMap, 16 | IconResolverService, 17 | IconService, 18 | }; 19 | 20 | @NgModule({ 21 | imports: [IconComponent], 22 | exports: [IconComponent], 23 | providers: [IconService], 24 | }) 25 | export class VCLIconModule {} 26 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/input/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLFormControlGroupModule } from '../form-control-group/index'; 3 | import { InputDirective } from './input.directive'; 4 | import { TextareaDirective } from './textarea.directive'; 5 | import { InputFieldComponent } from './input-field.component'; 6 | import { 7 | EmbeddedInputFieldLabelDirective, 8 | FORM_CONTROL_EMBEDDED_LABEL_INPUT, 9 | EmbeddedInputFieldLabelInput, 10 | } from './embedded-label.directive'; 11 | 12 | export { 13 | InputDirective, 14 | InputFieldComponent, 15 | FORM_CONTROL_EMBEDDED_LABEL_INPUT, 16 | EmbeddedInputFieldLabelInput, 17 | EmbeddedInputFieldLabelDirective, 18 | TextareaDirective, 19 | }; 20 | 21 | @NgModule({ 22 | imports: [ 23 | InputDirective, 24 | TextareaDirective, 25 | InputFieldComponent, 26 | EmbeddedInputFieldLabelDirective, 27 | ], 28 | exports: [ 29 | InputDirective, 30 | TextareaDirective, 31 | InputFieldComponent, 32 | VCLFormControlGroupModule, 33 | EmbeddedInputFieldLabelDirective, 34 | ], 35 | }) 36 | export class VCLInputModule {} 37 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/fields/checkbox.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | VCLFormFieldSchemaCheckbox, 4 | VCLFormFieldSchemaCheckboxParams, 5 | } from '../schemas'; 6 | import { FormFieldControl } from './field'; 7 | 8 | export class FormFieldCheckbox extends FormFieldControl< 9 | VCLFormFieldSchemaCheckbox, 10 | VCLFormFieldSchemaCheckboxParams 11 | > { 12 | get iconPosition() { 13 | return this.params.iconPosition || 'right'; 14 | } 15 | protected createDefaultValue() { 16 | return false; 17 | } 18 | } 19 | 20 | @Component({ 21 | selector: 'vcl-jss-form-checkbox', 22 | template: ` 23 | 26 | 27 | {{ 28 | field.label 29 | }} 30 | 31 | 32 | 33 | `, 34 | standalone: false 35 | }) 36 | export class FormFieldCheckboxComponent { 37 | constructor(public field: FormFieldCheckbox) {} 38 | } 39 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/fields/hidden.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLFormFieldSchemaHidden } from '../schemas'; 3 | import { FormFieldControl } from './field'; 4 | 5 | export class FormFieldHidden extends FormFieldControl< 6 | VCLFormFieldSchemaHidden, 7 | {} 8 | > {} 9 | 10 | @Component({ 11 | selector: 'vcl-jss-form-hidden', 12 | template: ``, 13 | standalone: false 14 | }) 15 | export class FormFieldHiddenComponent { 16 | constructor(public field: FormFieldHidden) {} 17 | } 18 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/fields/switch.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | VCLFormFieldSchemaSwitch, 4 | VCLFormFieldSchemaSwitchParams, 5 | } from '../schemas'; 6 | import { FormFieldControl } from './field'; 7 | 8 | export class FormFieldSwitch extends FormFieldControl< 9 | VCLFormFieldSchemaSwitch, 10 | VCLFormFieldSchemaSwitchParams 11 | > { 12 | get onLabel() { 13 | return this.params.onLabel; 14 | } 15 | get offLabel() { 16 | return this.params.onLabel; 17 | } 18 | protected createDefaultValue() { 19 | return false; 20 | } 21 | } 22 | 23 | @Component({ 24 | selector: 'vcl-jss-form-switch', 25 | template: ` 26 | 29 | {{ field.label }} 30 | 31 | 32 | 33 | 34 | 35 | `, 36 | standalone: false 37 | }) 38 | export class FormFieldSwitchComponent { 39 | constructor(public field: FormFieldSwitch) {} 40 | } 41 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/fields/token.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { VCLFormFieldSchemaToken } from '../schemas'; 3 | import { FormFieldControl } from './field'; 4 | 5 | export class FormFieldToken extends FormFieldControl< 6 | VCLFormFieldSchemaToken, 7 | {} 8 | > { 9 | protected createDefaultValue() { 10 | return []; 11 | } 12 | } 13 | 14 | @Component({ 15 | selector: 'vcl-jss-form-token', 16 | template: ` 17 | 20 | {{ field.label }} 21 | 22 | 23 | 24 | 25 | 26 | `, 27 | standalone: false 28 | }) 29 | export class FormFieldTokenComponent { 30 | constructor(public field: FormFieldToken) {} 31 | } 32 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/jss-form-hints.component.html: -------------------------------------------------------------------------------- 1 | 2 | {{ hint.message }} 3 | {{ hint.message }} 4 | {{ hint.message }} 5 | 6 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/jss-form-input-wrapper.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{title}} 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 14 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/jss-form-input-wrapper.component.scss: -------------------------------------------------------------------------------- 1 | :host ::ng-deep { 2 | display: flex; 3 | flex-direction: row; 4 | align-items: flex-start; 5 | justify-content: space-between; 6 | 7 | > .spacer { 8 | flex: 1 1 10%; 9 | } 10 | > .spacer:last-child { 11 | flex: 0 0 0%; 12 | } 13 | 14 | // > :only-child { 15 | // flex: 0 0 100%; 16 | // } 17 | } 18 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/jss-form.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/jss-form/jss-form.component.scss: -------------------------------------------------------------------------------- 1 | vcl-jss-form, 2 | vcl-jss-form-hints, 3 | vcl-jss-form-array, 4 | vcl-jss-form-button-group, 5 | vcl-jss-form-button, 6 | vcl-jss-form-buttons, 7 | vcl-jss-form-checkbox, 8 | vcl-jss-form-date-picker, 9 | vcl-jss-form-file-input, 10 | vcl-jss-form-hidden, 11 | vcl-jss-form-input, 12 | vcl-jss-form-object, 13 | vcl-jss-form-password-input, 14 | vcl-jss-form-radio-group, 15 | vcl-jss-form-rating, 16 | vcl-jss-form-select-list, 17 | vcl-jss-form-select, 18 | vcl-jss-form-slider, 19 | vcl-jss-form-switch, 20 | vcl-jss-form-textarea, 21 | vcl-jss-form-token { 22 | display: block; 23 | } 24 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/layer/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { OverlayModule } from '@angular/cdk/overlay'; 4 | import { BidiModule } from '@angular/cdk/bidi'; 5 | import { PortalModule } from '@angular/cdk/portal'; 6 | 7 | import { LayerDirective } from './layer.directive'; 8 | import { LayerService } from './layer.service'; 9 | import { 10 | LayerRef, 11 | TemplateLayerRef, 12 | ComponentLayerRef, 13 | DynamicLayerParams, 14 | } from './layer-ref'; 15 | import { LayerConfig, Layer } from './types'; 16 | 17 | export { 18 | Layer, 19 | LayerDirective, 20 | LayerRef, 21 | TemplateLayerRef, 22 | ComponentLayerRef, 23 | DynamicLayerParams, 24 | LayerService, 25 | LayerConfig, 26 | }; 27 | 28 | @NgModule({ 29 | imports: [LayerDirective], 30 | exports: [LayerDirective, OverlayModule, BidiModule, PortalModule], 31 | providers: [LayerService], 32 | }) 33 | export class VCLLayerModule {} 34 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/layer/types.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs'; 2 | import { OverlayConfig } from '@angular/cdk/overlay'; 3 | 4 | export interface LayerData { 5 | [key: string]: any; 6 | } 7 | 8 | export class LayerConfig< 9 | TLayerData extends LayerData = any 10 | > extends OverlayConfig { 11 | constructor(config: LayerConfig) { 12 | super(config); 13 | this.data = config.data; 14 | this.closeOnBackdropClick = config.closeOnBackdropClick; 15 | this.closeOnEscape = config.closeOnEscape; 16 | this.backdropClass = 'layer-cover'; // Set to corresponding .layer-cover in vcl class 17 | this.positionStrategy = config.positionStrategy; 18 | } 19 | data?: TLayerData; 20 | closeOnBackdropClick?: boolean; 21 | closeOnEscape?: boolean; 22 | } 23 | 24 | export interface Layer { 25 | readonly afterClose: Observable; 26 | readonly isVisible: boolean; 27 | readonly data: LayerData; 28 | toggle(): void; 29 | open(config?: LayerConfig): void; 30 | close(result?: any): void; 31 | destroy(): void; 32 | } 33 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/material-design-icons/icon-resolver.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { 3 | IconResolverService, 4 | IconAliasResolverServiceBase, 5 | } from '../icon/index'; 6 | import { ALIAS_MAP } from './alias-map'; 7 | 8 | // The mdi name resolver following the CSS class name conventions of 9 | // the well-known Font Awesome icon font. Basically it translates 10 | // `mdi:user` into `mdi mdi-user` 11 | @Injectable() 12 | export class MaterialDesignIconResolverService extends IconResolverService { 13 | private MDI_REGEX = /^(mdi):([a-z0-9-_]+)$/; 14 | 15 | resolve(icon: string) { 16 | const result = this.MDI_REGEX.exec(icon); 17 | if (result) { 18 | const [, prefix, value] = result; 19 | return `${prefix} mdi-${value}`; 20 | } 21 | return undefined; 22 | } 23 | } 24 | 25 | @Injectable() 26 | export class MaterialDesignVCLIconAliasResolverService extends IconAliasResolverServiceBase { 27 | constructor() { 28 | super('vcl', ALIAS_MAP as any); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/material-design-icons/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IconResolverService } from '../icon/index'; 3 | import { 4 | MaterialDesignIconResolverService, 5 | MaterialDesignVCLIconAliasResolverService, 6 | } from './icon-resolver.service'; 7 | 8 | export { 9 | MaterialDesignIconResolverService, 10 | MaterialDesignVCLIconAliasResolverService, 11 | }; 12 | 13 | @NgModule({ 14 | providers: [ 15 | MaterialDesignIconResolverService, 16 | { 17 | provide: IconResolverService, 18 | useExisting: MaterialDesignIconResolverService, 19 | multi: true, 20 | }, 21 | { 22 | provide: IconResolverService, 23 | useClass: MaterialDesignVCLIconAliasResolverService, 24 | multi: true, 25 | }, 26 | ], 27 | }) 28 | export class VCLMaterialDesignModule {} 29 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/navigation/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { NavigationComponent } from './navigation.component'; 3 | import { 4 | NavigationItemComponent, 5 | NavigationLabelComponent, 6 | } from './navigation-item.component'; 7 | 8 | export { 9 | NavigationComponent, 10 | NavigationItemComponent, 11 | NavigationLabelComponent, 12 | }; 13 | 14 | @NgModule({ 15 | imports: [ 16 | NavigationComponent, 17 | NavigationItemComponent, 18 | NavigationLabelComponent, 19 | ], 20 | exports: [ 21 | NavigationComponent, 22 | NavigationItemComponent, 23 | NavigationLabelComponent, 24 | ], 25 | }) 26 | export class VCLNavigationModule {} 27 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/navigation/navigation-item.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/navigation/navigation-item.component.scss: -------------------------------------------------------------------------------- 1 | vcl-navigation-item { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/navigation/navigation.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/navigation/navigation.component.scss: -------------------------------------------------------------------------------- 1 | vcl-navigation { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/navigation/types.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export interface Navigation { 4 | deselectAll(): void; 5 | } 6 | 7 | export const NAVIGATION_TOKEN = new InjectionToken( 8 | 'vcl-navigation' 9 | ); 10 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/notification/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { 3 | NotificationComponent, 4 | NotificationFooterDirective, 5 | NotificationHeaderDirective, 6 | NotificationTitleDirective, 7 | } from './notification.component'; 8 | import { NotificationType, NOTIFICATION_TYPE_CLASS_MAP } from './types'; 9 | 10 | export { 11 | NotificationComponent, 12 | NotificationType, 13 | NOTIFICATION_TYPE_CLASS_MAP, 14 | NotificationTitleDirective, 15 | NotificationHeaderDirective, 16 | NotificationFooterDirective, 17 | }; 18 | 19 | @NgModule({ 20 | imports: [ 21 | NotificationComponent, 22 | NotificationFooterDirective, 23 | NotificationHeaderDirective, 24 | NotificationTitleDirective, 25 | ], 26 | exports: [ 27 | NotificationComponent, 28 | NotificationFooterDirective, 29 | NotificationHeaderDirective, 30 | NotificationTitleDirective, 31 | ], 32 | }) 33 | export class VCLNotificationModule {} 34 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/notification/notification.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 8 |
9 |
10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/notification/types.ts: -------------------------------------------------------------------------------- 1 | export enum NotificationType { 2 | None = 'none', 3 | Info = 'info', 4 | Success = 'success', 5 | Warning = 'warning', 6 | Error = 'error', 7 | } 8 | 9 | export const NOTIFICATION_TYPE_CLASS_MAP: { 10 | [key: string]: { class: string; icon: string }; 11 | } = { 12 | [NotificationType.None]: { 13 | class: undefined, 14 | icon: undefined, 15 | }, 16 | [NotificationType.Info]: { 17 | class: 'info', 18 | icon: 'vcl:info', 19 | }, 20 | [NotificationType.Success]: { 21 | class: 'success', 22 | icon: 'vcl:success', 23 | }, 24 | [NotificationType.Warning]: { 25 | class: 'warning', 26 | icon: 'vcl:warning', 27 | }, 28 | [NotificationType.Error]: { 29 | class: 'error', 30 | icon: 'vcl:error', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/notifier/animations.ts: -------------------------------------------------------------------------------- 1 | import { animation, style, animate } from '@angular/animations'; 2 | 3 | export const stateVoidOpenAnimation = animation([ 4 | style({ opacity: 0 }), 5 | animate('{{openClosingTime}}ms', style({ opacity: 1 })), 6 | ]); 7 | 8 | export const stateOpenClosingAnimation = animation([ 9 | style({ opacity: 1 }), 10 | animate('{{voidOpenTime}}ms', style({ opacity: 0 })), 11 | ]); 12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/notifier/notifier.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{notifierOverlayRef.title}} 4 |
5 |
6 | 9 |
10 |
11 | 12 |
13 |
14 |
15 |
{{notifierOverlayRef.content}}
16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/notifier/portal-injector.ts: -------------------------------------------------------------------------------- 1 | import { Injector } from '@angular/core'; 2 | 3 | export class PortalInjector implements Injector { 4 | constructor( 5 | private _parentInjector: Injector, 6 | private _customTokens: WeakMap 7 | ) {} 8 | 9 | get(token: any, notFoundValue?: any): any { 10 | const value = this._customTokens.get(token); 11 | 12 | if (typeof value !== 'undefined') { 13 | return value; 14 | } 15 | 16 | return this._parentInjector.get(token, notFoundValue); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/off-click/README.md: -------------------------------------------------------------------------------- 1 | # offClick directive 2 | 3 | The offClick event fires when a click event is handled and its source is not(!) the element or any of its subelements. 4 | 5 | ## Usage 6 | 7 | ```js 8 | import { VCLOffClickModule } from '@vcl/ng-vcl'; 9 | 10 | @NgModule({ 11 | imports: [ VCLOffClickModule ], 12 | ... 13 | }) 14 | export class AppComponent {} 15 | ``` 16 | 17 | offClick() is called when the click`s source is not DIV1 or DIV2 18 | 19 | ```html 20 |
21 | DIV1 22 |
23 | DIV2 24 |
25 |
26 | ``` 27 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/off-click/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { OffClickDirective, createOffClickStream } from './off-click.directive'; 3 | 4 | export { createOffClickStream, OffClickDirective }; 5 | 6 | @NgModule({ 7 | imports: [OffClickDirective], 8 | exports: [OffClickDirective], 9 | }) 10 | export class VCLOffClickModule {} 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/panel/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLButtonModule } from '../button/index'; 3 | import { VCLIconModule } from '../icon/index'; 4 | import { 5 | PanelFooterDirective, 6 | PanelHeaderDirective, 7 | PanelTitleDirective, 8 | PanelFooterButtonDirective, 9 | PanelDialogDirective, 10 | } from './panel.directive'; 11 | import { PanelComponent } from './panel.component'; 12 | 13 | export { 14 | PanelComponent, 15 | PanelDialogDirective, 16 | PanelTitleDirective, 17 | PanelFooterButtonDirective, 18 | PanelHeaderDirective, 19 | PanelFooterDirective, 20 | }; 21 | 22 | @NgModule({ 23 | imports: [ 24 | PanelComponent, 25 | PanelFooterDirective, 26 | PanelHeaderDirective, 27 | PanelTitleDirective, 28 | PanelFooterButtonDirective, 29 | PanelDialogDirective, 30 | ], 31 | exports: [ 32 | VCLButtonModule, 33 | VCLIconModule, 34 | PanelComponent, 35 | PanelFooterDirective, 36 | PanelHeaderDirective, 37 | PanelTitleDirective, 38 | PanelFooterButtonDirective, 39 | PanelDialogDirective, 40 | ], 41 | }) 42 | export class VCLPanelModule {} 43 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/panel/panel.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | 8 |
9 |
10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/panel/panel.component.scss: -------------------------------------------------------------------------------- 1 | vcl-panel, vcl-panel-dialog, vcl-panel-footer, vcl-panel-header { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/panel/panel.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostBinding } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'vcl-panel-dialog', 5 | }) 6 | export class PanelDialogDirective { 7 | @HostBinding('class.panel-dialog') 8 | hostClasses = true; 9 | } 10 | 11 | @Directive({ 12 | selector: 'vcl-panel-title', 13 | }) 14 | export class PanelTitleDirective { 15 | @HostBinding('class.panel-title') 16 | @HostBinding('class.flex') 17 | @HostBinding('class.mx-3') 18 | hostClasses = true; 19 | } 20 | 21 | @Directive({ 22 | selector: 'button[vclPanelFooterButton]', 23 | }) 24 | export class PanelFooterButtonDirective { 25 | hostClasses = true; 26 | } 27 | 28 | @Directive({ 29 | selector: 'vcl-panel-header', 30 | }) 31 | export class PanelHeaderDirective { 32 | @HostBinding('class.panel-header') 33 | hostClasses = true; 34 | } 35 | 36 | @Directive({ 37 | selector: 'vcl-panel-footer', 38 | }) 39 | export class PanelFooterDirective { 40 | @HostBinding('class.panel-footer') 41 | hostClasses = true; 42 | } 43 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/password-input/README.md: -------------------------------------------------------------------------------- 1 | # vcl-password-input 2 | 3 | A container for the vcl-input which offers a button to toggle visibility of the input value. 4 | 5 | ## Usage 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | 13 | ### API 14 | 15 | #### Attributes 16 | 17 | Name | Type | Default | Description 18 | --------------- | ------- | ------- | ----------------------------------------------- 19 | `visible` | boolean | false | Input is visible by default when true 20 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/password-input/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { VCLInputModule } from '../input/index'; 4 | import { VCLButtonModule } from '../button/index'; 5 | import { PasswordInputComponent } from './password-input.component'; 6 | import { VCLIconModule } from '../icon/index'; 7 | import { VCLFormControlGroupModule } from '../form-control-group/index'; 8 | 9 | export { PasswordInputComponent }; 10 | 11 | @NgModule({ 12 | imports: [PasswordInputComponent], 13 | exports: [PasswordInputComponent], 14 | }) 15 | export class VCLPasswordInputModule {} 16 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/password-input/password-input.component.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/popover/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PopoverDirective } from './popover.directive'; 3 | 4 | export { PopoverDirective }; 5 | 6 | @NgModule({ 7 | imports: [PopoverDirective], 8 | exports: [PopoverDirective], 9 | }) 10 | export class VCLPopoverModule {} 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/progress-bar/README.md: -------------------------------------------------------------------------------- 1 | # vcl-progress-bar 2 | 3 | The progress is reflected as horizontal bar which is shown within a container. 4 | There are two overlaying bars to represent a primary and an optional secondary progress. 5 | In indeterminate mode, an animation is shown to indicate an ongoing process whose progress cannot be determined. 6 | 7 | ## Usage 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | ### API 14 | 15 | #### Attributes 16 | 17 | | Name | Type | Default | Description 18 | | ------------ | ----------- | ------------------ |-------------- 19 | | `value` | number | | the current primary progress value 20 | | `secondaryValue` | number | | the current secondary progress value. hidden unless this value is specified 21 | | `minValue` | number | | the minimum value of the progress 22 | | `maxValue` | number | | the maximum value of the progress 23 | | `indeterminate` | boolean | false | show an animiation if the value is not set or invalid 24 | | `speed` | number | 1 | set custom animation duration/speed in seconds 25 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/progress-bar/index.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { ProgressBarComponent } from './progress-bar.component'; 4 | 5 | export { ProgressBarComponent }; 6 | @NgModule({ 7 | imports: [ProgressBarComponent], 8 | exports: [ProgressBarComponent], 9 | }) 10 | export class VCLProgressBarModule {} 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/progress-bar/progress-bar.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/progress-bar/progress-bar.component.scss: -------------------------------------------------------------------------------- 1 | vcl-progress-bar { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/radio-button/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RadioButtonComponent } from './radio-button.component'; 3 | import { RadioGroupComponent } from './radio-group.component'; 4 | import { VCLFormControlGroupModule } from '../form-control-group/index'; 5 | 6 | export { RadioButtonComponent, RadioGroupComponent, VCLFormControlGroupModule }; 7 | 8 | @NgModule({ 9 | imports: [RadioButtonComponent, RadioGroupComponent], 10 | exports: [RadioButtonComponent, RadioGroupComponent], 11 | }) 12 | export class VCLRadioButtonModule {} 13 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/radio-button/interfaces.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export interface RadioButton { 4 | readonly isDisabled: boolean; 5 | readonly isFocused: boolean; 6 | readonly value: any; 7 | setDisabled(disabled: boolean): void; 8 | setChecked(checked: boolean): void; 9 | } 10 | 11 | export interface RadioButtonGroup { 12 | notifyRadioButtonChecked(rb: RadioButton): void; 13 | notifyRadioButtonFocus(rb: RadioButton): void; 14 | notifyRadioButtonBlur(rb: RadioButton): void; 15 | } 16 | 17 | export const RADIO_BUTTON_GROUP_TOKEN = new InjectionToken( 18 | 'vcl_radio_button_group' 19 | ); 20 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/radio-button/radio-button.component.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/rating/README.md: -------------------------------------------------------------------------------- 1 | # vcl-rating 2 | 3 | ## Usage 4 | 5 | ```html 6 | 7 | ``` 8 | 9 | ### API 10 | 11 | #### Attributes 12 | 13 | Name | Type | Default | Description 14 | ------------- | --------------------------------- | ---------------------- | ----------------------------------------- 15 | `value` _(1)_ | number | 0 | set the value 16 | `type` | 'horizontal', 'vertical', 'small' | 'horizontal' | Rating type. 17 | `fullStar` | string | 'vcl:star' | Full star icon 18 | `halfStar` | string | 'vcl:star-half' | Half star icon 19 | `emptyStar` | string | 'vcl:star-empty' | Empty star icon 20 | `starCount` | number | 5 | Max rating 21 | `readonly` | boolean | false | Whether the stars can be clicked 22 | 23 | #### Events 24 | 25 | Name | Type | Description 26 | --------------------- | --------------- | - 27 | `valueChange` | number | emits when the value changes 28 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/rating/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RatingComponent } from './rating.component'; 3 | import { RatingItemComponent } from './rating-item.component'; 4 | import { RatingItemLabelComponent } from './rating-label.component'; 5 | 6 | export { RatingComponent, RatingItemComponent, RatingItemLabelComponent }; 7 | @NgModule({ 8 | imports: [RatingComponent, RatingItemComponent, RatingItemLabelComponent], 9 | exports: [RatingComponent, RatingItemComponent, RatingItemLabelComponent], 10 | }) 11 | export class VCLRatingModule {} 12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/rating/rating-item.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |
7 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/rating/rating.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/components/select-list-content.component.ts: -------------------------------------------------------------------------------- 1 | import { forwardRef, Component } from '@angular/core'; 2 | import { SELECT_LIST_CONTENT_TOKEN } from '../types'; 3 | 4 | @Component({ 5 | selector: 'vcl-select-list-content', 6 | template: '', 7 | exportAs: 'vclSelectListContent', 8 | providers: [ 9 | { 10 | provide: SELECT_LIST_CONTENT_TOKEN, 11 | useExisting: forwardRef(() => SelectListContentComponent), 12 | }, 13 | ], 14 | }) 15 | export class SelectListContentComponent {} 16 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/components/select-list-header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/components/select-list-header.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | HostBinding, 4 | ChangeDetectionStrategy, 5 | forwardRef, 6 | } from '@angular/core'; 7 | import { SELECT_LIST_CONTENT_TOKEN } from '../types'; 8 | 9 | @Component({ 10 | selector: 'vcl-select-list-header', 11 | exportAs: 'vclSelectListHeader', 12 | templateUrl: 'select-list-header.component.html', 13 | changeDetection: ChangeDetectionStrategy.OnPush, 14 | providers: [ 15 | { 16 | provide: SELECT_LIST_CONTENT_TOKEN, 17 | useExisting: forwardRef(() => SelectListHeaderComponent), 18 | }, 19 | ], 20 | styles: [ 21 | ` 22 | :host { 23 | display: block; 24 | } 25 | `, 26 | ], 27 | }) 28 | export class SelectListHeaderComponent { 29 | @HostBinding('class.select-list-item-group-header') 30 | _hostClasses = true; 31 | } 32 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/components/select-list-item.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/components/select-list-separator.component.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/components/select-list-separator.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | HostBinding, 4 | ChangeDetectionStrategy, 5 | forwardRef, 6 | } from '@angular/core'; 7 | import { SELECT_LIST_CONTENT_TOKEN } from '../types'; 8 | 9 | @Component({ 10 | selector: 'vcl-select-list-separator', 11 | exportAs: 'vclSelectListSeparator', 12 | templateUrl: 'select-list-separator.component.html', 13 | changeDetection: ChangeDetectionStrategy.OnPush, 14 | providers: [ 15 | { 16 | provide: SELECT_LIST_CONTENT_TOKEN, 17 | useExisting: forwardRef(() => SelectListSeparatorComponent), 18 | }, 19 | ], 20 | }) 21 | export class SelectListSeparatorComponent { 22 | @HostBinding('attr.role') 23 | attrRole = 'separator'; 24 | } 25 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/select-list.component.scss: -------------------------------------------------------------------------------- 1 | vcl-select-list, 2 | vcl-select-list-item, 3 | vcl-select-list-label, 4 | vcl-select-list-header, 5 | vcl-select-list-content, 6 | vcl-select-list-seperator { 7 | display: block; 8 | } 9 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select-list/types.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export interface SelectListItem { 4 | value: any; 5 | searchValue?: string; 6 | label: string; 7 | subLabel: string; 8 | isFocused: boolean; 9 | scrollIntoView(): void; 10 | } 11 | 12 | export interface SelectList { 13 | readonly isDisabled: boolean; 14 | isItemHighlighted(item: SelectListItem): boolean; 15 | isItemSelected(item: SelectListItem): boolean; 16 | isItemHidden(item: SelectListItem): boolean; 17 | selectItem(item: SelectListItem): void; 18 | onItemFocus(item: SelectListItem): void; 19 | onItemBlur(item: SelectListItem): void; 20 | } 21 | export const SELECT_LIST_TOKEN = new InjectionToken('select-list'); 22 | 23 | export const SELECT_LIST_CONTENT_TOKEN = new InjectionToken( 24 | 'select-list-content' 25 | ); 26 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select/README.md: -------------------------------------------------------------------------------- 1 | # vcl-select 2 | 3 | A select control. Wraps the vcl-select-list to render a list of selectable items in a dropdown. 4 | 5 | ## Usage 6 | 7 | ```html 8 | 9 | Select item 10 | 11 | 12 | 13 | [Clear selection] 14 | 15 | 16 | Item 1 17 | 18 | 19 | Item 2 20 | 21 | 22 | Item 3 23 | 24 | 25 | 26 | 27 | ``` 28 | 29 | ### API 30 | 31 | #### vcl-select attributes 32 | 33 | Name | Type | Default | Description 34 | --------------------- |----------|---------| -------------------------------------------------------------------------------- 35 | `placeholder` | string | | 36 | `tabindex` | number | 0 | The tabindex of the select 37 | `search` | booolean | false | Enable search capability 38 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { VCLSelectListModule } from '../select-list/index'; 4 | import { SelectComponent } from './select.component'; 5 | 6 | export { SelectComponent }; 7 | 8 | @NgModule({ 9 | imports: [SelectComponent, VCLSelectListModule], 10 | exports: [SelectComponent, VCLSelectListModule], 11 | }) 12 | export class VCLSelectModule {} 13 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/select/select.component.scss: -------------------------------------------------------------------------------- 1 | .pop-over { 2 | padding: 0; 3 | } 4 | 5 | .select-list { 6 | border: 0; 7 | margin-bottom: 0; 8 | max-height: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/slider/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SliderComponent, ScalePoint } from './slider.component'; 3 | 4 | export { SliderComponent, ScalePoint }; 5 | 6 | @NgModule({ 7 | imports: [SliderComponent], 8 | exports: [SliderComponent], 9 | }) 10 | export class VCLSliderModule {} 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/slider/slider.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
{{point.label}}
11 |
12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/slider/slider.component.scss: -------------------------------------------------------------------------------- 1 | vcl-slider { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/spinner/README.md: -------------------------------------------------------------------------------- 1 | # vcl-spinner 2 | 3 | `vcl-spinner` is a simple spinner element with 2 buttons where one increments the provided value, the other decrements. 4 | 5 | ## Usage 6 | 7 | ```js 8 | import { VCLSpinnerModule } from '@vcl/ng-vcl'; 9 | 10 | @Component({ 11 | ... 12 | imports: [VCLSpinnerModule], 13 | }) 14 | export class AppComponent { 15 | } 16 | ``` 17 | 18 | ### Basic spinner 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | ### Spinner inside input 25 | 26 | ```html 27 | 28 | Sample 29 | 30 | 31 | 32 | 33 | 34 | ``` 35 | 36 | ### API 37 | 38 | #### vcl-spinner square attributes 39 | 40 | | Name | Type | Default | Description | 41 | | ------------- | -------------------------- | ---------- | ------------------------------------- | 42 | | `orientation` | 'horizontal' \| 'vertical' | 'vertical' | Orientation the buttons are placed in | 43 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/spinner/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { SpinnerComponent } from './spinner.component'; 3 | 4 | export { SpinnerComponent }; 5 | 6 | @NgModule({ 7 | imports: [SpinnerComponent], 8 | exports: [SpinnerComponent], 9 | }) 10 | export class VCLSpinnerModule {} 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/spinner/spinner.component.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tab-nav/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLCoreLabelModule } from '../core/index'; 3 | import { TabNavComponent } from './tab-nav.component'; 4 | import { TabComponent, TabLabelDirective } from './tab.component'; 5 | 6 | export { TabComponent, TabLabelDirective, TabNavComponent }; 7 | 8 | @NgModule({ 9 | imports: [ 10 | VCLCoreLabelModule, 11 | TabComponent, 12 | TabLabelDirective, 13 | TabNavComponent, 14 | ], 15 | exports: [ 16 | TabComponent, 17 | TabLabelDirective, 18 | TabNavComponent, 19 | VCLCoreLabelModule, 20 | ], 21 | }) 22 | export class VCLTabNavModule {} 23 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tab-nav/interfaces.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken, TemplateRef } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | export interface Tab { 5 | // portal?: TemplatePortal; 6 | contentTemplate?: TemplateRef; 7 | } 8 | 9 | export interface TabNav { 10 | currentTab$: Observable; 11 | currentTab: Tab | undefined; 12 | selectTab(tab?: Tab): void; 13 | } 14 | 15 | export const TAB_NAV_TOKEN = new InjectionToken('vcl_tab_nav'); 16 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tab-nav/tab-nav.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 |
6 | 7 | 8 |
9 |
10 | 11 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tab-nav/tab-nav.component.scss: -------------------------------------------------------------------------------- 1 | vcl-tab-nav, 2 | vcl-tab { 3 | display: block; 4 | } 5 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tab-nav/tab.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting, 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting(), 16 | { 17 | teardown: { destroyAfterEach: false }, 18 | } 19 | ); 20 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/token/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { VCLInputModule } from '../input/index'; 5 | import { VCLIconModule } from '../icon/index'; 6 | import { VCLButtonModule } from '../button/index'; 7 | import { VCLIcogramModule } from '../icogram/index'; 8 | 9 | import { TokenComponent } from './token.component'; 10 | import { TokenInputContainerComponent } from './token-input.component'; 11 | import { TokenListComponent } from './token-list.component'; 12 | import { Token } from './interfaces'; 13 | 14 | export { 15 | TokenComponent, 16 | TokenInputContainerComponent, 17 | TokenListComponent, 18 | Token, 19 | }; 20 | 21 | @NgModule({ 22 | imports: [ 23 | CommonModule, 24 | VCLInputModule, 25 | VCLButtonModule, 26 | FormsModule, 27 | VCLIconModule, 28 | VCLIcogramModule, 29 | TokenComponent, 30 | TokenListComponent, 31 | TokenInputContainerComponent, 32 | ], 33 | exports: [ 34 | TokenComponent, 35 | TokenListComponent, 36 | TokenInputContainerComponent, 37 | VCLInputModule, 38 | ], 39 | }) 40 | export class VCLTokenModule {} 41 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/token/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface Token { 2 | label: string; 3 | value: any; 4 | selected?: boolean; 5 | } 6 | 7 | export interface TokenObserver { 8 | notifyTokenSelect(token: Token): void; 9 | notifyTokenRemove(token: Token): void; 10 | notifyTokenBlur(token: Token): void; 11 | } 12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/token/token-input.component.html: -------------------------------------------------------------------------------- 1 |
2 | 10 | {{token.label}} 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/token/token.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { OverlayModule } from '@angular/cdk/overlay'; 4 | import { PortalModule } from '@angular/cdk/portal'; 5 | import { TooltipComponent } from './tooltip.component'; 6 | import { TooltipDirective } from './tooltip.directive'; 7 | 8 | export { TooltipComponent, TooltipDirective }; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | OverlayModule, 14 | PortalModule, 15 | TooltipComponent, 16 | TooltipDirective, 17 | ], 18 | exports: [TooltipComponent, TooltipDirective, PortalModule], 19 | }) 20 | export class VCLTooltipModule {} 21 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tooltip/tooltip.component.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | ChangeDetectionStrategy, 4 | Optional, 5 | Inject, 6 | ChangeDetectorRef, 7 | } from '@angular/core'; 8 | import { TOOLTIP_TOKEN, Tooltip } from './types'; 9 | import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal'; 10 | import { NgIf } from '@angular/common'; 11 | 12 | @Component({ 13 | selector: 'vcl-tooltip', 14 | templateUrl: './tooltip.component.html', 15 | changeDetection: ChangeDetectionStrategy.OnPush, 16 | imports: [NgIf, CdkPortalOutlet], 17 | }) 18 | export class TooltipComponent { 19 | constructor( 20 | @Optional() 21 | @Inject(TOOLTIP_TOKEN) 22 | public tooltip: Tooltip, 23 | private cdRef: ChangeDetectorRef 24 | ) { 25 | tooltip.stateChanged.subscribe(() => { 26 | this.cdRef.markForCheck(); 27 | this.cdRef.detectChanges(); 28 | }); 29 | } 30 | 31 | get isString() { 32 | return typeof this.tooltip.value === 'string'; 33 | } 34 | get isTemplatePortal() { 35 | return this.tooltip.value instanceof TemplatePortal; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tooltip/types.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { Portal } from '@angular/cdk/portal'; 4 | 5 | export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'; 6 | export type TooltipPositions = TooltipPosition | [TooltipPosition]; 7 | 8 | export interface Tooltip { 9 | arrowPosition?: TooltipPosition; 10 | arrowPointer: boolean; 11 | value?: string | Portal; 12 | stateChanged: Observable; 13 | } 14 | 15 | export const TOOLTIP_TOKEN = new InjectionToken('vcl_tooltip'); 16 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tour/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { VCLButtonModule } from '../button/index'; 4 | import { VCLPopoverModule } from '../popover/index'; 5 | import { VCLIcogramModule } from '../icogram/index'; 6 | import { VCLIconModule } from '../icon/index'; 7 | import { TourOverlayComponent } from './tour-overlay.component'; 8 | import { TourService, TourOptions } from './tour.service'; 9 | import { TourComponent } from './tour.component'; 10 | 11 | export { TourService, TourOptions, TourComponent, TourOverlayComponent }; 12 | 13 | @NgModule({ 14 | imports: [ 15 | CommonModule, 16 | VCLPopoverModule, 17 | VCLButtonModule, 18 | VCLIcogramModule, 19 | VCLIconModule, 20 | TourComponent, 21 | TourOverlayComponent, 22 | ], 23 | exports: [TourComponent, TourOverlayComponent], 24 | providers: [TourService], 25 | }) 26 | export class VCLTourModule {} 27 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tour/tour-overlay.component.css: -------------------------------------------------------------------------------- 1 | 2 | .tour-overlay { 3 | position: fixed !important ; 4 | width: 100%; 5 | height: 100%; 6 | background: rgba(0, 0, 0, .5); 7 | z-index: 20; 8 | top: 0; 9 | left: 0; 10 | } -------------------------------------------------------------------------------- /lib/ng-vcl/src/tour/tour-overlay.component.html: -------------------------------------------------------------------------------- 1 |
5 |
6 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tour/tour-overlay.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { TourService } from './tour.service'; 3 | 4 | @Component({ 5 | selector: 'vcl-tour-overlay', 6 | templateUrl: './tour-overlay.component.html', 7 | styleUrls: ['./tour-overlay.component.css'], 8 | }) 9 | export class TourOverlayComponent { 10 | constructor(public readonly tour: TourService) {} 11 | } 12 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/tour/tour.component.scss: -------------------------------------------------------------------------------- 1 | .tour-container { 2 | background-color: #fff; 3 | text-align: center; 4 | font-size: 14px; 5 | color: #000; 6 | border-radius: 5px; 7 | -webkit-box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5); 8 | box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5); 9 | } 10 | 11 | .tour-container .tour-container-header { 12 | padding: 10px; 13 | border-bottom: 1px solid #ccc; 14 | background-color: #ddd; 15 | border-radius: 5px; 16 | -webkit-box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5); 17 | box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5); 18 | } 19 | 20 | .tour-container .tour-container-content { 21 | padding: 10px; 22 | } 23 | 24 | .tour-container .tour-container-footer { 25 | padding: 10px; 26 | } 27 | 28 | .tour-container .button:first { 29 | margin-left: 0; 30 | } 31 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/zoom-box/index.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { ZoomBoxComponent } from './zoom-box.component'; 4 | import { ZoomBoxMagnifierComponent } from './zoom-box-magnifier.component'; 5 | import { ZoomBoxContainerComponent } from './zoom-box-container.component'; 6 | 7 | export { 8 | ZoomBoxComponent, 9 | ZoomBoxMagnifierComponent, 10 | ZoomBoxContainerComponent, 11 | }; 12 | 13 | @NgModule({ 14 | imports: [ 15 | ZoomBoxComponent, 16 | ZoomBoxMagnifierComponent, 17 | ZoomBoxContainerComponent, 18 | ], 19 | exports: [ 20 | ZoomBoxComponent, 21 | ZoomBoxMagnifierComponent, 22 | ZoomBoxContainerComponent, 23 | ], 24 | }) 25 | export class VCLZoomBoxModule {} 26 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/zoom-box/zoom-box-magnifier.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, Renderer2 } from '@angular/core'; 2 | import { ZoomBoxContainerComponent } from './zoom-box-container.component'; 3 | 4 | @Component({ 5 | selector: 'vcl-zoom-box-magnifier', 6 | template: '', 7 | }) 8 | export class ZoomBoxMagnifierComponent { 9 | parent: ZoomBoxContainerComponent; 10 | 11 | constructor( 12 | private element: ElementRef, 13 | private renderer: Renderer2 14 | ) { 15 | renderer.addClass(element.nativeElement, 'zoom-box-magnifier'); 16 | } 17 | 18 | update(): void { 19 | const styles = { 20 | top: this.parent.y + 'px', 21 | left: this.parent.x + 'px', 22 | width: this.parent.width + 'px', 23 | height: this.parent.height + 'px', 24 | display: !this.parent.hiding && !this.parent.invisible ? 'block' : 'none', 25 | 'pointer-events': 'none', 26 | }; 27 | Object.keys(styles).forEach(style => { 28 | this.renderer.setStyle(this.element.nativeElement, style, styles[style]); 29 | }); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /lib/ng-vcl/src/zoom-box/zoom-box.component.html: -------------------------------------------------------------------------------- 1 |
8 | 9 | -------------------------------------------------------------------------------- /lib/ng-vcl/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "moduleResolution": "node", 6 | "declaration": true, 7 | "sourceMap": true, 8 | "inlineSources": true, 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "importHelpers": true, 12 | "types": [], 13 | "lib": [ 14 | "dom", 15 | "es2018" 16 | ] 17 | }, 18 | "angularCompilerOptions": { 19 | "annotateForClosureCompiler": true, 20 | "compilationMode": "partial", 21 | "skipTemplateCodegen": true, 22 | "strictMetadataEmit": true, 23 | "fullTemplateTypeCheck": true, 24 | "strictInjectionParameters": true, 25 | "enableResourceInlining": true 26 | }, 27 | "files": [ 28 | "src/public_api.ts" 29 | ], 30 | "exclude": [ 31 | "src/test.ts", 32 | "**/*.spec.ts" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /lib/ng-vcl/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /lib/ng-vcl/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "vcl", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | ["element", "attribute"], 13 | "vcl", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "line-length": false, 3 | "no-emphasis-as-heading": false 4 | } 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "ES2022", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom", 20 | "esnext.asynciterable" 21 | ], 22 | "paths": { 23 | "@vcl/ng-vcl": [ 24 | "lib/ng-vcl/src" 25 | ], 26 | "@vcl/ng-vcl/*": [ 27 | "lib/ng-vcl/src/*" 28 | ] 29 | }, 30 | "useDefineForClassFields": false 31 | } 32 | } 33 | --------------------------------------------------------------------------------