Skip to content

Commit

Permalink
update demo pages
Browse files Browse the repository at this point in the history
  • Loading branch information
h2qutc committed Aug 2, 2023
1 parent 30ce297 commit 15c795c
Show file tree
Hide file tree
Showing 20 changed files with 255 additions and 120 deletions.
18 changes: 13 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ Feel free to open the [issues](https://github.com/h2qutc/angular-material-compon

If you like this project, support angular-material-components by starring⭐.

And thank you so much for your coffee ❤️

<a href="https://www.buymeacoffee.com/h2qutc" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

## DEMO Angular Material Components
Expand All @@ -21,12 +23,18 @@ If you like this project, support angular-material-components by starring⭐.

Choose the version corresponding to your Angular version:

Angular | @angular-material-components/xxx (xxx is name of package(datetime-picker, color-picker, file-input))
Angular | @angular-material-components/datetime-picker
----------- | -------------------
10 | 4.x+
9 | 2.x+
8 | 2.x+
7 | 2.x+
16 | 16.x+
15 | 15.x+ OR 9.x+ for legacy import
14 | 8.x+
13 | 7.x+
12 | 6.x+
11 | 5.x+
10 | 4.x+
9 | 2.x+
8 | 2.x+
7 | 2.x+


### Datetime Picker
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-material-components",
"version": "16.0.0",
"version": "16.0.1",
"description": "Angular Material Datetime Picker",
"author": "HO Hong Quan",
"repository": {
Expand Down
2 changes: 1 addition & 1 deletion projects/color-picker/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@angular-material-components/color-picker",
"version": "16.0.0",
"version": "16.0.1",
"description": "Angular Material Color Picker",
"author": "HO Hong Quan",
"repository": {
Expand Down
2 changes: 1 addition & 1 deletion projects/datetime-picker/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@angular-material-components/datetime-picker",
"version": "16.0.0",
"version": "16.0.1",
"description": "Angular Material Datetime Picker",
"author": "HO Hong Quan",
"repository": {
Expand Down
2 changes: 1 addition & 1 deletion projects/file-input/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@angular-material-components/file-input",
"version": "16.0.0",
"version": "16.0.1",
"description": "Angular Material File Input",
"author": "HO Hong Quan",
"repository": {
Expand Down
13 changes: 7 additions & 6 deletions projects/file-input/src/lib/file-input.component.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<input #inputValue autocomplete="off" class="mat-input-element mat-form-field-autofill-control" [attr.id]='id'
<input #inputValue autocomplete="off"
class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input" [attr.id]='id'
[attr.placeholder]='placeholder' [disabled]='disabled' [required]='required' [attr.readonly]='readonly || null'
[attr.aria-describedby]='_ariaDescribedby || null' [attr.aria-invalid]='errorState'
[attr.aria-required]='required.toString()'>
<div class="mat-form-field-suffix">
<button matSuffix mat-icon-button [color]="color" class="button-browse" (click)="openFilePicker($event)" type="button"
[disabled]="disabled">
<div class="mat-mdc-form-field-suffix">
<button matSuffix mat-icon-button [color]="color" class="button-browse" (click)="openFilePicker($event)" type="button"
[disabled]="disabled">
<mat-icon *ngIf="!_customIcon" class="ngx-mat-file-input--default-icon">attach_file</mat-icon>
<ng-content select="[ngxMatFileInputIcon]"></ng-content>
</button>
</div>
<input type="file" #inputFile (change)="handleFiles($event.target.files)" class="input-file"
[multiple]="multiple" [accept]="accept">
<input type="file" #inputFile (change)="handleFiles($event.target.files)" class="input-file" [multiple]="multiple"
[accept]="accept">
2 changes: 1 addition & 1 deletion projects/file-input/src/lib/file-input.component.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.mat-form-field-appearance-outline {
.mat-mdc-form-field-appearance-outline {

.mat-form-field-prefix,
.mat-form-field-suffix {
Expand Down
4 changes: 2 additions & 2 deletions projects/file-input/src/lib/validators/accept.validator.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

/**
*
* Validator for input file accept
* @param accept Allowable type of file
*/
export function AcceptValidator(accept: string): ValidatorFn {
Expand Down
2 changes: 1 addition & 1 deletion projects/moment-adapter/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@angular-material-components/moment-adapter",
"version": "16.0.0",
"version": "16.0.1",
"description": "Angular Material Moment Adapter",
"author": "HO Hong Quan",
"license": "MIT",
Expand Down
17 changes: 8 additions & 9 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
<mat-toolbar color="primary" class="header">
<span class="title">{{nameApp}}</span>

<button mat-button class="app-menu-button" (click)="sidenav.toggle()">
<i class="material-icons">menu</i>
</button>
<a mat-button href="https://github.com/h2qutc/angular-material-components">
<img src="./assets/GitHub-Mark-Light-32px.png" />
</a>
<span class="title">{{nameApp}}</span>

<a href="https://www.buymeacoffee.com/h2qutc" target="_blank">
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee"
style="height: 35px !important;width: 150px !important;">
</a>
<ng-container *ngIf="!isHandset">
<a mat-button href="https://github.com/h2qutc/angular-material-components">
<img src="./assets/GitHub-Mark-Light-32px.png" />
</a>
</ng-container>

</mat-toolbar>

<mat-sidenav-container class="sidenav">
<mat-sidenav #sidenav mode="side" opened [fixedInViewport]="false" [fixedBottomGap]="0">
<mat-sidenav #sidenav [mode]="sidenavMode" [opened]="sidenavOpened" [disableClose]="!isHandset" [fixedInViewport]="false" [fixedBottomGap]="0">
<mat-nav-list>
<a mat-list-item routerLink="/home" routerLinkActive="active" class="sidebar-item">
<mat-icon>home</mat-icon>
Expand Down
4 changes: 2 additions & 2 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
}

&.active {
background-color: rgba(63,81,181,.15);
background-color: #009B77;

.mdc-list-item__content {
.mdc-list-item__primary-text {
color: #3f51b5;
color: white;
}
}
}
Expand Down
46 changes: 43 additions & 3 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,58 @@
import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from "@angular/cdk/layout";
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
export class AppComponent implements OnInit, OnDestroy {

public nameApp = 'angular-material-components';

constructor() {
isHandset: boolean;
sidenavMode: 'side' | 'over' | 'push';
sidenavHasBackdrop: boolean;
sidenavOpened: boolean;


protected _destroyed = new Subject<void>();

constructor(
protected breakpointObserver: BreakpointObserver
) {
this.breakpointObserver.observe([Breakpoints.XSmall])
.pipe(takeUntil(this._destroyed))
.subscribe(resp => {
this.isHandset = resp?.matches;
if (this.isHandset) {
this.activateHandsetLayout();
} else {
this.activateWebLayout();
}
})
}

ngOnInit() {
}

ngOnDestroy(): void {
this._destroyed.next();
this._destroyed.complete();
}

protected activateHandsetLayout() {
this.sidenavMode = 'over';
this.sidenavHasBackdrop = true;
this.sidenavOpened = false;
}

protected activateWebLayout() {
this.sidenavMode = 'side';
this.sidenavHasBackdrop = false;
this.sidenavOpened = true;
}

}
10 changes: 8 additions & 2 deletions src/app/demo-colorpicker/demo-colorpicker.component.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<mat-tab-group>
<mat-tab-group [mat-stretch-tabs]="false">
<mat-tab label="API">
<p>Thank you so much for your coffee ❤️ </p>
<a href="https://www.buymeacoffee.com/h2qutc" target="_blank">
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee"
style="height: 35px !important;width: 150px !important;">
</a>

<h1>API reference for @angular-material-components/color-picker</h1>
<h2>Getting started</h2>

<a href="https://www.npmjs.com/package/@angular-material-components/color-picker" target="_blank">
<img src="https://badge.fury.io/js/%40angular-material-components%2Fcolor-picker.svg">
</a>

<pre><code>{{code1}}</code></pre>
<pre><code ngxMatHighlight>{{code1}}</code></pre>

<h2>Setup</h2>
<pre><code ngxMatHighlight class="language-typescript">{{code2}}</code></pre>
Expand Down
1 change: 1 addition & 0 deletions src/app/demo-colorpicker/demo-colorpicker.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@
.row {
display: block;
padding: 5px;
max-width: 200px;
}
}
2 changes: 1 addition & 1 deletion src/app/demo-colorpicker/demo-colorpicker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class DemoColorpickerComponent implements OnInit {
public color: ThemePalette = 'primary';
public touchUi = false;

colorCtr: AbstractControl = new FormControl(new Color(255, 243, 0), [Validators.required]);
colorCtr: AbstractControl = new FormControl(new Color(0, 255, 255), [Validators.required]);

public options = [
{ value: true, label: 'True' },
Expand Down
15 changes: 11 additions & 4 deletions src/app/demo-datetime/demo-datetime.component.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<mat-tab-group>
<mat-tab-group [mat-stretch-tabs]="false">
<mat-tab label="API">
<p>Thank you so much for your coffee ❤️ </p>
<a href="https://www.buymeacoffee.com/h2qutc" target="_blank">
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee"
style="height: 35px !important;width: 150px !important;">
</a>

<h1>API reference for @angular-material-components/datetime-picker</h1>
<h2>Getting started</h2>

<a href="https://www.npmjs.com/package/@angular-material-components/datetime-picker" target="_blank">
<img src="https://badge.fury.io/js/%40angular-material-components%2Fdatetime-picker.svg">
</a>

<pre><code>{{code1}}</code></pre>
<pre><code ngxMatHighlight>{{code1}}</code></pre>

<h2>Setup</h2>
<pre>
Expand Down Expand Up @@ -209,7 +215,7 @@ <h2>Choosing a date implementation and date format settings
</table>

To use <strong>NgxMatMomentModule</strong>:
<pre><code>{{code4}}</code></pre>
<pre><code ngxMatHighlight>{{code4}}</code></pre>

<p>Please note: <strong>NgxMatNativeDateModule</strong> is based off the functionality available in JavaScript's
native Date object. Thus it is not suitable for many locales. One of the biggest shortcomings of the native Date
Expand Down Expand Up @@ -242,7 +248,6 @@ <h2>Theming</h2>
<mat-tab label="Example">

<mat-card class="zone zone-picker">
<mat-card-header>Selected date: {{dateControl.value?.toLocaleString()}}</mat-card-header>
<mat-card-content>
<div class="datepicker-wrapper">
<mat-form-field>
Expand All @@ -255,6 +260,8 @@ <h2>Theming</h2>
</ngx-mat-datetime-picker>
</mat-form-field>
</div>
<h4>Selected date: {{dateControl.value?.toLocaleString()}}</h4>

</mat-card-content>
</mat-card>

Expand Down
Loading

0 comments on commit 15c795c

Please sign in to comment.