Skip to content

Commit

Permalink
updated library and demo application
Browse files Browse the repository at this point in the history
heinerwalter committed Nov 7, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent ec58376 commit 8c5eec1
Showing 31 changed files with 361 additions and 228 deletions.
44 changes: 4 additions & 40 deletions projects/demo/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,46 +1,9 @@
<style>
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}

.toolbar img {
margin: 0 16px;
}

.container {
margin-top: 60px;
padding: 1rem;
}

footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}

footer a {
display: flex;
align-items: center;
}
</style>

<!-- Toolbar -->
<div class="toolbar" role="banner">
<img width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="/>
<span>Welcome to the <span class="text-monospace">ngx-property-editor</span> Demo</span>
<div class="spacer"></div>
</div>

<div class="container" role="main">
@@ -54,7 +17,7 @@
</pe-select-input>

<pe-tabs *ngIf="containerType == 'tabs'" id="demo-tabs">

<pe-tabs-item label="Input Components">
<ng-container *ngTemplateOutlet="inputComponentsTemplate"></ng-container>
</pe-tabs-item>
@@ -70,7 +33,7 @@
</pe-tabs>

<pe-accordion *ngIf="containerType == 'accordion'" id="demo-accordion">

<pe-accordion-item label="Input Components">
<ng-container *ngTemplateOutlet="inputComponentsTemplate"></ng-container>
</pe-accordion-item>
@@ -83,7 +46,7 @@
<ng-container *ngTemplateOutlet="propertyEditorTemplate"></ng-container>
</pe-accordion-item>

</pe-accordion>
</pe-accordion>

<!-- Footer -->
<footer>
@@ -108,6 +71,7 @@

<ng-template #propertyEditorTemplate>
<pe-property-view-and-edit [data]="data"
[configuration]="propertiesConfiguration"
viewModeType="editor"
editModeType="editor">
</pe-property-view-and-edit>
33 changes: 33 additions & 0 deletions projects/demo/src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}

.toolbar img {
margin: 0 16px;
}

.container {
margin-top: 60px;
padding: 1rem;
}

footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}

footer a {
display: flex;
align-items: center;
}
13 changes: 11 additions & 2 deletions projects/demo/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Component } from '@angular/core';
import { PropertiesConfiguration } from 'ngx-property-editor';
import { Contact } from './model/contact';

@Component({
selector: 'demo-root',
@@ -23,7 +25,7 @@ export class AppComponent {
/**
* Display the properties of this object by the property table and editor.
*/
public data: any = {
public data: Contact = new Contact({
gender: 'male',
firstname: 'Charlie',
lastname: 'Brown',
@@ -32,6 +34,13 @@ export class AppComponent {
email: '[email protected]',
favorite: true,
rating: 4,
};
});

/**
* Configuration of displayed properties including name, data type, displayed value etc.
* If undefined, the configuration will be automatically generated from the properties
* of the `data` object.
*/
public propertiesConfiguration: PropertiesConfiguration | undefined = Contact.propertiesConfiguration;

}
85 changes: 85 additions & 0 deletions projects/demo/src/app/model/contact.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { PropertiesConfiguration, PropertyConfiguration } from 'ngx-property-editor';

export class Contact {

public gender: 'male' | 'female' | undefined;
public firstname: string | undefined;
public lastname: string | undefined;
public birthday: Date | undefined;
public tel: string | undefined;
public email: string | undefined;
public favorite: boolean = false;
public rating: number | undefined;

constructor(data?: {
gender?: 'male' | 'female' | undefined,
firstname?: string | undefined,
lastname?: string | undefined,
birthday?: Date | undefined,
tel?: string | undefined,
email?: string | undefined,
favorite?: boolean | undefined,
rating?: number | undefined,
}) {
this.gender = data?.gender;
this.firstname = data?.firstname;
this.lastname = data?.lastname;
this.birthday = data?.birthday;
this.tel = data?.tel;
this.email = data?.email;
this.favorite = data?.favorite || false;
this.rating = data?.rating;
}

public static get propertiesConfiguration(): PropertiesConfiguration {
return [
new PropertyConfiguration({
propertyName: 'gender',
propertyType: 'select',
dataSource: [
{ name: 'male', value: 'male' },
{ name: 'female', value: 'female' },
],
displayPropertyName: 'name',
valuePropertyName: 'value',
editable: true,
}),
new PropertyConfiguration({
propertyName: 'firstname',
propertyType: 'string',
editable: true,
}),
new PropertyConfiguration({
propertyName: 'lastname',
propertyType: 'string',
editable: true,
}),
new PropertyConfiguration({
propertyName: 'birthday',
propertyType: 'date',
editable: true,
}),
new PropertyConfiguration({
propertyName: 'tel',
propertyType: 'tel',
editable: true,
}),
new PropertyConfiguration({
propertyName: 'email',
propertyType: 'email',
editable: true,
}),
new PropertyConfiguration({
propertyName: 'favorite',
propertyType: 'boolean',
editable: true,
}),
new PropertyConfiguration({
propertyName: 'rating',
propertyType: 'rating',
editable: true,
}),
];
}

}
Original file line number Diff line number Diff line change
@@ -10,24 +10,25 @@ export class ColumnComponent implements OnChanges {
/**
* Bootstrap column width on md wide screens (class "col-md-...").
*/
@Input() md: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined = undefined;
@Input() public md: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined = undefined;

/**
* Bootstrap "col-..." classes are assigned to the host element of this component
* via this property and its host binding.
*/
@HostBinding('class') class: string = '';
@HostBinding('class') public class: string = '';

ngOnChanges(changes: SimpleChanges) {
if (changes.hasOwnProperty('md'))
public ngOnChanges(changes: SimpleChanges): void {
if (changes.hasOwnProperty('md')) {
this.updateClass();
}
}

/**
* Update the class property and thereby the class attribute of the host element of this component.
*/
private updateClass(): void {
this.class = this.md == undefined ? 'col' : `col-md-${ this.md }`;
this.class = this.md == undefined ? 'col' : `col-md-${this.md}`;
}

}
Original file line number Diff line number Diff line change
@@ -14,15 +14,15 @@ export class BooleanInputComponent extends InputBaseWithValue<boolean> {
* - 'switch': As checkbox with bootstrap switch style.
* - 'radio': As radio group with yes and no options.
*/
@Input() type: 'checkbox' | 'switch' | 'radio' = 'radio';
@Input() public type: 'checkbox' | 'switch' | 'radio' = 'radio';

/**
* If true and the `value` is undefined, the checkbox will display an indeterminate state.
* If false and the `value` is undefined, the checkbox will display a false state (same as `value = false`).
*/
@Input() allowIndeterminate: boolean = false;
@Input() public allowIndeterminate: boolean = false;

constructor() {
public constructor() {
super();
}

Original file line number Diff line number Diff line change
@@ -8,14 +8,14 @@ import { InputBaseWithValueAndDataSource } from '../input-base';
})
export class CheckboxSelectInputComponent extends InputBaseWithValueAndDataSource<any[]> {

@Input() showSelectAll: boolean = false;
@Input() public showSelectAll: boolean = false;

constructor() {
public constructor() {
super();
this.value = [];
}

onItemValueChanged(item: any, newSelectionValue: boolean) {
public onItemValueChanged(item: any, newSelectionValue: boolean): void {
const itemValue: any = this.evaluateValuePropertyName(item);

if (!Array.isArray(this.value))
@@ -33,7 +33,7 @@ export class CheckboxSelectInputComponent extends InputBaseWithValueAndDataSourc
this.emitValueChange(this.value);
}

onSelectAllClicked(newSelectionValue: boolean) {
public onSelectAllClicked(newSelectionValue: boolean | undefined): void {
if (newSelectionValue == true) {
this.value = this.dataSource?.map(item => this.evaluateValuePropertyName(item));
this.emitValueChange(this.value);
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import { InputBaseWithValue } from '../input-base';
export class DateInputComponent extends InputBaseWithValue<Date> {

/** Defines the type of the HTML input element. Default: 'text'. */
@Input() type:
@Input() public type:
/** Defines a date control (year, month, day (no time)). */
'date' |
/** Defines a date and time control (year, month, day, time (no timezone). */
@@ -21,11 +21,11 @@ export class DateInputComponent extends InputBaseWithValue<Date> {
/** Defines a week and year control (no timezone). */
'week' = 'date';

constructor() {
public constructor() {
super();
}

onInputChange(event: Event): void {
public onInputChange(event: Event): void {
this.value = (event?.target as HTMLInputElement)?.valueAsDate || undefined;
this.emitValueChange(this.value);
}
Original file line number Diff line number Diff line change
@@ -9,20 +9,20 @@ import { InputBase } from '../input-base';
export class FileInputComponent extends InputBase {

/** Define the file type (extension you want to accept in this file input (e.g. ".txt"). */
@Input() accept: string | undefined = undefined;
@Input() public accept: string | undefined = undefined;
/** If true, accept multi file selection (default: false). */
@Input() multiple: boolean = false;
@Input() public multiple: boolean = false;

/**
* This event is triggered when the user selected on or multiple files.
* The selected files are passed as event argument.
*/
@Output() readonly valueChange: EventEmitter<File[]> = new EventEmitter<File[]>();
* This event is triggered when the user selected on or multiple files.
* The selected files are passed as event argument.
*/
@Output() public readonly valueChange: EventEmitter<File[]> = new EventEmitter<File[]>();

/**
* The user selected one or multiple file.
*/
onChange(event: Event) {
public onChange(event: Event): void {
const inputElement = event?.target as HTMLInputElement;
if (!inputElement) return;

Loading

0 comments on commit 8c5eec1

Please sign in to comment.