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/icon/demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { VCLIconComponent } from '@vcl/ng-vcl';
3 |
4 | @Component({
5 | templateUrl: 'demo.component.html',
6 | imports: [VCLIconComponent],
7 | })
8 | export class IconDemoComponent {}
9 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/busy-indicator/busy-indicator-cover.component.html:
--------------------------------------------------------------------------------
1 |
3 |
7 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/button/button.component.html:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
9 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/data-list/data-list.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 | File Input
2 |File Input (Disabled)
6 |File Input (multiple)
9 |File Input (.png only)
12 |
14 |
16 |
--------------------------------------------------------------------------------
/demo/app/demos/button/demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { VCLButtonComponent, VCLIconComponent } from '@vcl/ng-vcl';
3 |
4 | @Component({
5 | templateUrl: 'demo.component.html',
6 | styleUrls: ['demo.component.scss'],
7 | imports: [VCLButtonComponent, VCLIconComponent],
8 | })
9 | export class ButtonDemoComponent {
10 | someAction(param) {
11 | console.log('Action handler, param:', param);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/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/drawer/demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {
3 | VCLButtonComponent,
4 | VCLDrawerComponent,
5 | VCLDrawerContainerComponent,
6 | } from '@vcl/ng-vcl';
7 |
8 | @Component({
9 | templateUrl: 'demo.component.html',
10 | imports: [
11 | VCLButtonComponent,
12 | VCLDrawerContainerComponent,
13 | VCLDrawerComponent,
14 | ],
15 | })
16 | export class DrawerDemoComponent {
17 | opened = true;
18 | }
19 |
--------------------------------------------------------------------------------
/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: '
4 | {{ filename }}
5 |
9 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/checkbox/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { VCLCheckboxComponent } from './checkbox.component';
3 | // import { CheckboxInputGroupComponent } from './checkbox-input-group.component';
4 | // import { CheckboxLabelDirective } from './checkbox-label.directive';
5 |
6 | export { VCLCheckboxComponent };
7 |
8 | @NgModule({
9 | imports: [VCLCheckboxComponent],
10 | exports: [VCLCheckboxComponent],
11 | })
12 | export class VCLCheckboxModule {}
13 |
--------------------------------------------------------------------------------
/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
6 |
8 |
2 |
4 |
8 |
16 |
--------------------------------------------------------------------------------
/demo/app/demos/jss-form/demo.component.html:
--------------------------------------------------------------------------------
1 |
9 | @if (portal) {
10 |
15 | Disable all inputs
2 |Create a hero
5 | 6 |
16 |
19 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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 | VCLButtonComponent,
6 | ButtonHost,
7 | BUTTON_HOST_TOKEN,
8 | } from './button.component';
9 |
10 | export { VCLButtonComponent, ButtonHost, BUTTON_HOST_TOKEN };
11 |
12 | @NgModule({
13 | imports: [VCLButtonComponent],
14 | exports: [VCLIconModule, VCLIcogramModule, VCLButtonComponent],
15 | })
16 | export class VCLButtonModule {}
17 |
--------------------------------------------------------------------------------
/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/spinner/spinner.component.html:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/busy-indicator/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { VCLBusyIndicatorComponent } from './busy-indicator.component';
3 | import { VCLBusyIndicatorCoverComponent } from './busy-indicator-cover.component';
4 |
5 | export { VCLBusyIndicatorCoverComponent, VCLBusyIndicatorComponent };
6 |
7 | @NgModule({
8 | imports: [VCLBusyIndicatorComponent, VCLBusyIndicatorCoverComponent],
9 | exports: [VCLBusyIndicatorComponent, VCLBusyIndicatorCoverComponent],
10 | })
11 | export class VCLBusyIndicatorModule {}
12 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/core/projection.ts:
--------------------------------------------------------------------------------
1 | import { Directive, NgModule } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[vclPrepend]',
5 | })
6 | export class VCLPrependDirective {
7 | constructor() {}
8 | }
9 |
10 | @Directive({
11 | selector: '[vclAppend]',
12 | })
13 | export class VCLAppendDirective {
14 | constructor() {}
15 | }
16 |
17 | @NgModule({
18 | imports: [VCLPrependDirective, VCLAppendDirective],
19 | exports: [VCLPrependDirective, VCLAppendDirective],
20 | })
21 | export class VCLCoreContentProjectionModule {}
22 |
--------------------------------------------------------------------------------
/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: WeakMapForm
17 |{{formState | json}}
18 | Horizontal
2 |Vertical
7 | 8 |
9 | Check 1
10 | Check 2
11 | Check 3 (disabled)
12 |
13 |
--------------------------------------------------------------------------------
/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 | VCLPasswordInputComponent,
7 | } from '@vcl/ng-vcl';
8 |
9 | @Component({
10 | templateUrl: 'demo.component.html',
11 | imports: [
12 | FormsModule,
13 | VCLFormControlGroupModule,
14 | VCLInputModule,
15 | VCLPasswordInputComponent,
16 | ],
17 | })
18 | export class PasswordInputDemoComponent {
19 | password = 'password';
20 | }
21 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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
2 | @for (token of value; track $index) {
3 |
11 | {{ token.label }}
12 |
13 | }
14 |
15 |
21 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/core/utils.ts:
--------------------------------------------------------------------------------
1 | import { ElementRef } from '@angular/core';
2 |
3 | export function hasProjectedContent(
4 | element: ElementRef
21 | DIV1
22 |
26 | ```
27 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/form-control-group/form-control-group.component.html:
--------------------------------------------------------------------------------
1 |
11 |
23 | DIV2
24 |
25 |
2 |
11 |
5 |
9 |
12 |
14 |
--------------------------------------------------------------------------------
/demo/app/demos/password-input/demo.component.html:
--------------------------------------------------------------------------------
1 | Password input
2 |9 | Password input value: {{ password }} 10 | 11 |
Password input (disabled)
12 |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/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 |
2 |
19 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/jss-form/jss-form-input-wrapper.component.html:
--------------------------------------------------------------------------------
1 |
3 | @for (image of target.images; track $index; let idx = $index) {
4 |
18 |
8 | ![]()
15 |
16 | }
17 | Vertical
2 | 3 |Horizontal
12 | 13 |
2 |
14 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/busy-indicator/busy-indicator.component.html:
--------------------------------------------------------------------------------
1 |
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 |
12 |
13 |
6 | @if (!icon) {
7 |
8 | ![]()
13 |
14 | }
15 |
16 | @if (icon) {
17 |
27 |
--------------------------------------------------------------------------------
/lib/ng-vcl/src/navigation/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { VCLNavigationComponent } from './navigation.component';
3 | import {
4 | VCLNavigationItemComponent,
5 | VCLNavigationLabelComponent,
6 | } from './navigation-item.component';
7 |
8 | export {
9 | VCLNavigationComponent,
10 | VCLNavigationItemComponent,
11 | VCLNavigationLabelComponent,
12 | };
13 |
14 | @NgModule({
15 | imports: [
16 | VCLNavigationComponent,
17 | VCLNavigationItemComponent,
18 | VCLNavigationLabelComponent,
19 | ],
20 | exports: [
21 | VCLNavigationComponent,
22 | VCLNavigationItemComponent,
23 | VCLNavigationLabelComponent,
24 | ],
25 | })
26 | export class VCLNavigationModule {}
27 |
--------------------------------------------------------------------------------
/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 { VCLDrawerContainerComponent } from './drawer-container.component';
11 | import { VCLDrawerComponent } from './drawer.component';
12 |
13 | export { VCLDrawerComponent, VCLDrawerContainerComponent };
14 |
15 | @NgModule({
16 | imports: [VCLDrawerComponent, VCLDrawerContainerComponent],
17 | exports: [VCLDrawerComponent, VCLDrawerContainerComponent],
18 | declarations: [],
19 | })
20 | export class VCLDrawerModule {}
21 |
--------------------------------------------------------------------------------
/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/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode, LOCALE_ID } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import 'prismjs';
5 | import 'prismjs/plugins/custom-class/prism-custom-class';
6 | // import any languages you need:
7 | import 'prismjs/components/prism-typescript.min';
8 |
9 | import { AppModule } from './app/app.module';
10 | import { environment } from './environments/environment';
11 |
12 | if (environment.production) {
13 | enableProdMode();
14 | }
15 |
16 | platformBrowserDynamic()
17 | .bootstrapModule(AppModule, {
18 | // providers: [{provide: LOCALE_ID, useValue: 'en-gb' }]
19 | })
20 | .catch(err => console.error(err));
21 |
22 | Prism.plugins.customClass.prefix('prism-');
23 |
--------------------------------------------------------------------------------
/demo/app/demos/badge/demo.component.html:
--------------------------------------------------------------------------------
1 |
24 |
26 |
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/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 | -------------------------------------------------------------------------------- /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(() => VCLSelectListSeparatorComponent), 18 | }, 19 | ], 20 | }) 21 | export class VCLSelectListSeparatorComponent { 22 | @HostBinding('attr.role') 23 | attrRole = 'separator'; 24 | } 25 | -------------------------------------------------------------------------------- /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/icon/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { VCLIconComponent } 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 | VCLIconComponent, 13 | HostIconRendererService, 14 | IconAliasResolverServiceBase, 15 | VCLIconAliasMap, 16 | IconResolverService, 17 | IconService, 18 | }; 19 | 20 | @NgModule({ 21 | imports: [VCLIconComponent], 22 | exports: [VCLIconComponent], 23 | providers: [IconService], 24 | }) 25 | export class VCLIconModule {} 26 | -------------------------------------------------------------------------------- /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