4 | Snackbar 5 |
6 |
8 | {{content}}
9 |
10 | 4 | Ng Wizi Bulma 5 |
6 |4 | Spinner with random color 5 |
6 |17 | Spinner with custom color : {{customColor}} 18 |
19 |6 | Add User 7 |
8 |4 | Input value change will fire with 500ms nwbDebounceDelay 5 |
6 |My value is: {{inputValue}}
20 |Value from nwbDebounceChange event: {{valueFromNwbDebounceChangeEvent}}
21 | 22 | 23 |4 | Paginator with page size options 5 |
6 |22 | Paginator without page size options 23 |
24 |4 | Modal search 5 |
6 |The modal search is a component to search wherever you are on the page.
10 |You can open it via cmd+k (on mac) or ctrl+e. You can also open it via the search button on 11 | the top left corner. Then search any NgWiziBulma component to keyboardNavigate to it. 12 |
13 |You can give to the service an array of strings to search to and use you own filter method. See the demo 14 | app file
15 |9 | 10 |
11 | 12 |13 | 14 |
15 | 16 |17 | 18 |
19 |4 | Switch 5 |
6 |4 | Sort Header 5 |
6 |This is an adaptation from the sort 11 | header component from angular material 12 |
13 | 14 || Dessert (100g) | 19 |Calories | 20 |Fat (g) | 21 |Carbs (g) | 22 |Protein (g) | 23 |
|---|---|---|---|---|
| {{dessert.name}} | 27 |{{dessert.calories}} | 28 |{{dessert.fat}} | 29 |{{dessert.carbs}} | 30 |{{dessert.protein}} | 31 |
12 | Click me ! 13 |
14 | 15 | 16 | 17 | 18 | 19 |My Awesome hidden content
23 |32 | Click me ! 33 |
34 | 35 | 36 | 37 | 38 | 39 |My Awesome content
43 |Animated Card
Closed by default use nwbAnimatedCardClosed attribute
Click me !
10 | 11 | 12 | 13 |My Awesome hidden content
Opened by default use nwbAnimatedCardOpened attribute
Click me !
25 | 26 | 27 | 28 |My Awesome content
4 | Switch 5 |
6 |Switch with tooltip
28 |{{config.title}}
10 | 11 |4 | Dialog 5 |
6 |Simple Dialog with custom handler function on ok (yes) button
10 | 11 |17 | Dialog with component 18 |
19 |Your name is: {{fakeComponentValue}}
24 |30 | Dialog with component and spinner with backdrop disabled 31 |
32 |Your name is: {{fakeComponent2Value}}
37 |43 | Dialog with template 44 |
45 |4 | Progress Bar 5 |
6 |4 | Alert 5 |
6 |Color : is-success is-warning is-link is-info is-dark
10 |Position : is-top is-left is-right is-left
11 |With extraClasses options, you can invert color Example : extraClasses = 'is-inverted' :
With icon Example : icon = 'fa fa-warning fa-2x' :
4 | Dropdown menu 5 |
6 |A dropdown is composed of nwb-dropdown and nwb-option elements.
9 |11 | Specific dropdown items can be disabled via the disabled property. You can also separate items by creating an item 12 | with the divider property set to true. 13 |
14 | 15 |Selected value: {{gaming}}
28 |35 | Dropdown menu with change handler method 36 |
37 |40 | You can specify a custom change handler in the config input. The following example will change only if user selects 41 | Nintendo64 (n64) or Sega Genesis (genesis) 42 |
43 |Selected value: {{gaming2}}
56 | 57 | 60 |{{dopdown2Config|json}}
61 | 4 | Table 5 |
6 |This table uses the table 10 | component 11 | from angular CDK
12 |13 | It's also using our NwbFilterRoutingBuilder service which allow you to mix data table's filters 14 | with angular router. 15 | Go ahead play with the filters (sort, query, page) and refresh the page. 16 |
17 | 18 |20 | 29 |
30 || # | 52 |{{row.number}} | 53 |Title | 58 |{{row.title}} | 59 |State | 64 |{{row.state}} | 65 |70 | Created 71 | | 72 |{{row.created_at | date}} | 73 |
|---|
Selected index: {{ tabBasicIndex }}
9 | 10 |Your Pictures are here!
Your Music is here!
Your Videos are here!
Your Documents are here!
Your Pictures are here!
Your Music is here!
Your Videos are here!
Your Documents are here!
Your Pictures are here!
Your Music is here!
Your Videos are here!
Your Documents are here!
Your Pictures are here!
Your Music is here!
Your Videos are here!
Your Documents are here!
Your Pictures are here!
Your Music is here!
Your Videos are here!
Your Documents are here!
Your Pictures are here!
Your Music is here!
Your Videos are here!
Your Documents are here!
4 | Edit In Place Input 5 |
6 |Entered value: {{developer}}
15 |23 | Edit In Place Input 24 |
25 |
30 | I am a
31 |
Allowed values: developer, devops
34 |42 | Edit In Place Input with auto select 43 |
44 |Entered value: {{developer}}
57 |65 | Edit In Place Input With Currency 66 |
67 |
72 | Enter a number value to format:
73 |
81 | Choose another currency or percentage 82 | 91 | 92 | 101 | 102 |
103 |Number value: {{number}}
104 |Output formatted string: {{formattedString}}
105 |Selected value: {{gaming}}
25 | 26 | gaming = 'nes'; 27 | 28 | modelChange(event: any) { 29 | console.log('modelChange', event); 30 | } 31 | 32 | nesHasBeenSelected(event: any) { 33 | console.log('nesHasBeenSelected', event); 34 | }`; 35 | 36 | sample2 = `Selected value: {{gaming2}}
49 | 51 | 55 |{{dopdown2Config|json}}
56 |
57 | gaming2 = 'genesis';
58 |
59 | dopdown2Config: NwbDropdownConfig = {
60 | data: 20,
61 | handler: (value: any, data: number) => {
62 | return this.changeHandler(value, data);
63 | }
64 | };
65 |
66 | changeHandler(value: any, data: number) {
67 | return Observable.create((observer: any) => {
68 | setTimeout(() => {
69 | if (value === 'n64' || value === 'genesis') {
70 | console.log('value has changed to', value, 'with data = ', data);
71 | observer.next(true);
72 | } else {
73 | this.dialog.open({
74 | title: 'Not changed',
75 | message: \`Value: \${value} is not allowed\`
76 | });
77 | observer.next(false);
78 | }
79 | observer.complete();
80 | }, 700);
81 | });
82 | }`;
83 |
84 | dopdown2Config: NwbDropdownConfig = {
85 | data: 20,
86 | handler: (value: any, data: number) => {
87 | return this.changeHandler(value, data);
88 | }
89 | };
90 |
91 | constructor(private dialog: NwbDialogService) {}
92 |
93 | modelChange(event: any) {
94 | console.log('modelChange', event);
95 | }
96 |
97 | nesHasBeenSelected(event: any) {
98 | console.log('nesHasBeenSelected', event);
99 | }
100 |
101 | changeHandler(value: any, data: number) {
102 | return Observable.create((observer: any) => {
103 | setTimeout(() => {
104 | if (value === 'n64' || value === 'genesis') {
105 | console.log('value has changed to', value, 'with data = ', data);
106 | observer.next(true);
107 | } else {
108 | this.dialog.open({
109 | title: 'Not changed',
110 | message: `Value: ${value} is not allowed`
111 | });
112 | observer.next(false);
113 | }
114 | observer.complete();
115 | }, 700);
116 | });
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/projects/ng-wizi-bulma/src/lib/edit-in-place/edit-in-place.component.scss:
--------------------------------------------------------------------------------
1 | .nwb-wrapper {
2 | display: inline-block;
3 | position: relative;
4 | width: auto;
5 | min-width: 12px;
6 | min-height: 1.4em;
7 | cursor: pointer;
8 |
9 | input {
10 | font-size: inherit;
11 | transition: width 50ms;
12 | position: absolute;
13 | top: 0;
14 | left: -5px;
15 | width: calc(100% + 16px) !important;
16 | height: calc(100% + 14px) !important;
17 | padding: 5px;
18 | z-index: 1;
19 | margin: 0;
20 | outline: none !important;
21 | border: 1px solid #a8a8a8;
22 | background: inherit;
23 | transform: translateY(-17%);
24 | background-color: #fff;
25 |
26 | &.nwb-editable {
27 | text-decoration: none;
28 | color: inherit;
29 | border: none;
30 | cursor: pointer;
31 | height: 26px;
32 | }
33 |
34 | &.nwb-editing {
35 | color: #a8a8a8;
36 | }
37 | }
38 |
39 | span.nwb-loader {
40 | &.nwb-is-loading {
41 | z-index: 2;
42 | opacity: 1;
43 | position: absolute;
44 | top: -7px;
45 | left: -7px;
46 | width: calc(100% + 16px) !important;
47 | height: calc(100% + 14px) !important;
48 | min-width: 12px;
49 | min-height: 1em;
50 | margin: 0;
51 | background-size: auto 70%;
52 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ellipsis' style='background: none;'%3E%3C!--circle(cx='16',cy='50',r='10')--%3E%3Ccircle cx='84' cy='50' r='0' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='10;0;0;0;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='84;84;84;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='28.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-1s'/%3E%3C/circle%3E%3Ccircle cx='16' cy='50' r='3.71582' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/circle%3E%3Ccircle cx='84' cy='50' r='6.28418' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='62.6338' cy='50' r='10' fill='%236c6c6c'%3E%3Canimate attributeName='r' values='0;0;10;10;10' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3Canimate attributeName='cx' values='16;16;16;50;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='2s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3C/svg%3E");
53 | background-repeat: no-repeat;
54 | background-position: center center;
55 | }
56 | }
57 | span {
58 | color: inherit;
59 | &:not(.nwb-loader) {
60 | display: inline-block;
61 | min-width: 12px;
62 | }
63 | &.nwb-editing {
64 | visibility: hidden;
65 | }
66 |
67 | &.nwb-is-loading {
68 | text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
69 | color: rgba(0, 0, 0, 0.4);
70 | opacity: 0.25;
71 | }
72 | }
73 | }
74 |
75 | .nwb-wrapper--editable::after {
76 | position: absolute;
77 | content: '';
78 | border-bottom: dashed 1px $primary;
79 | width: 100%;
80 | bottom: 0;
81 | left: 0;
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/features/edit-in-place/edit-in-place-demo.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NwbDialogService } from 'projects/ng-wizi-bulma/src/public_api';
3 | import { timer } from 'rxjs';
4 | import { NwbEditInPlaceConfig } from '../../../../projects/ng-wizi-bulma/src/lib/edit-in-place';
5 | import { map } from 'rxjs/operators';
6 |
7 | @Component({
8 | providers: [],
9 | templateUrl: './edit-in-place-demo.html'
10 | })
11 | export class EditInPlaceDemo {
12 | docPreview1 = `
13 |