Skip to content

Commit a7b762b

Browse files
gjovanovicstgjovanovicst
authored
Merge pull request #29 from gjovanovicst/main
Implemented radio-button and radio-group components, cosmetics and ui…
2 parents d8a746c + 68c5b44 commit a7b762b

File tree

86 files changed

+3195
-1780
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+3195
-1780
lines changed

‎packages/angular/package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/angular/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@anywhere-ui/angular",
3-
"version": "0.2.0+7",
3+
"version": "0.2.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",
@@ -42,5 +42,5 @@
4242
"tslint": "~6.1.0",
4343
"typescript": "~4.4.4"
4444
},
45-
"buildnum": "7"
45+
"buildnum": "8"
4646
}

‎packages/angular/projects/anywhere-ui/src/lib/anywhere-ui.module.ts

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1-
import { NgModule } from '@angular/core';
2-
import { defineCustomElements } from '@anywhere-ui/core/loader';
1+
import { CommonModule, DOCUMENT } from '@angular/common';
2+
import {
3+
ModuleWithProviders,
4+
APP_INITIALIZER,
5+
NgModule,
6+
NgZone,
7+
InjectionToken,
8+
} from '@angular/core';
9+
import { AnywhereUIConfig } from '@anywhere-ui/core';
10+
import { appInitialize } from './app-initialize';
11+
import { ConfigToken } from './providers/config';
312

413
import { BooleanValueAccessor } from './directives/boolean-value-accessor';
514
// import { NumericValueAccessor } from './directives/number-value-accessor';
6-
// import { RadioValueAccessor } from './directives/radio-value-accessor';
15+
import { RadioValueAccessor } from './directives/radio-value-accessor';
716
import { SelectValueAccessor } from './directives/select-value-accessor';
817
import { TextValueAccessor } from './directives/text-value-accessor';
918

@@ -20,9 +29,11 @@ import {
2029
AnyBadgeOverlay,
2130
AnyRippleEffect,
2231
AnyInputSwitch,
32+
AnyRadioButton,
33+
AnyRadioGroup,
2334
} from './directives/proxies';
2435

25-
defineCustomElements(window);
36+
// defineCustomElements(window);
2637

2738
const DECLARATIONS = [
2839
// proxies
@@ -38,18 +49,44 @@ const DECLARATIONS = [
3849
AnyBadgeOverlay,
3950
AnyRippleEffect,
4051
AnyInputSwitch,
52+
AnyRadioButton,
53+
AnyRadioGroup,
4154

4255
// Value Accessors
4356
BooleanValueAccessor,
4457
// NumericValueAccessor,
45-
// RadioValueAccessor,
58+
RadioValueAccessor,
4659
SelectValueAccessor,
4760
TextValueAccessor,
4861
];
4962

5063
@NgModule({
5164
declarations: DECLARATIONS,
5265
exports: DECLARATIONS,
53-
imports: [],
66+
imports: [CommonModule],
5467
})
55-
export class AnywhereUiModule {}
68+
export class AnywhereUiModule {
69+
static forRoot(
70+
config?: AnywhereUIConfig
71+
): ModuleWithProviders<AnywhereUiModule> {
72+
return {
73+
ngModule: AnywhereUiModule,
74+
providers: [
75+
{
76+
provide: ConfigToken,
77+
useValue: config,
78+
},
79+
// {
80+
// provide: ConfigToken,
81+
// useValue: config,
82+
// },
83+
{
84+
provide: APP_INITIALIZER,
85+
useFactory: appInitialize,
86+
multi: true,
87+
deps: [ConfigToken, DOCUMENT, NgZone],
88+
},
89+
],
90+
};
91+
}
92+
}

‎packages/angular/projects/anywhere-ui/src/lib/app-initialize.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { NgZone } from '@angular/core';
2+
import { setupConfig } from '@anywhere-ui/core';
3+
import { applyPolyfills, defineCustomElements } from '@anywhere-ui/core/loader';
4+
5+
import { Config } from './providers/config';
6+
// import { IonicWindow } from './types/interfaces';
7+
import { raf } from './util/util';
8+
9+
export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
10+
return (): any => {
11+
// const win: IonicWindow | undefined = doc.defaultView as any;
12+
const win = window;
13+
if (win && typeof (window as any) !== 'undefined') {
14+
setupConfig({
15+
...config,
16+
_zoneGate: (h: any) => zone.run(h),
17+
});
18+
19+
const aelFn =
20+
'__zone_symbol__addEventListener' in (doc.body as any)
21+
? '__zone_symbol__addEventListener'
22+
: 'addEventListener';
23+
24+
return applyPolyfills().then(() => {
25+
return defineCustomElements(win, {
26+
// exclude: ['ion-tabs', 'ion-tab'],
27+
syncQueue: true,
28+
raf,
29+
jmp: (h: any) => zone.runOutsideAngular(h),
30+
ael(elm, eventName, cb, opts) {
31+
(elm as any)[aelFn](eventName, cb, opts);
32+
},
33+
rel(elm, eventName, cb, opts) {
34+
elm.removeEventListener(eventName, cb, opts);
35+
},
36+
});
37+
});
38+
}
39+
};
40+
};

‎packages/angular/projects/anywhere-ui/src/lib/directives/angular-component-lib/utils.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,13 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
4343
}
4444

4545
// tslint:disable-next-line: only-arrow-functions
46-
export function ProxyCmp(opts: { tagName: string, customElement?: any, inputs?: any; methods?: any }) {
46+
export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
4747
const decorator = function (cls: any) {
48-
const { tagName, customElement, inputs, methods } = opts;
48+
const { defineCustomElementFn, inputs, methods } = opts;
4949

50-
defineCustomElement(tagName, customElement);
50+
if (defineCustomElementFn !== undefined) {
51+
defineCustomElementFn();
52+
}
5153

5254
if (inputs) {
5355
proxyInputs(cls, inputs);

‎packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts

Lines changed: 79 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import { Components } from '@anywhere-ui/core';
1111
export declare interface AnyBadge extends Components.AnyBadge {}
1212

1313
@ProxyCmp({
14-
tagName: 'any-badge',
15-
customElement: undefined,
14+
defineCustomElementFn: undefined,
1615
inputs: ['anyStyle', 'severity', 'size', 'styleClass', 'value']
1716
})
1817
@Component({
@@ -33,8 +32,7 @@ export class AnyBadge {
3332
export declare interface AnyBadgeOverlay extends Components.AnyBadgeOverlay {}
3433

3534
@ProxyCmp({
36-
tagName: 'any-badge-overlay',
37-
customElement: undefined,
35+
defineCustomElementFn: undefined,
3836
inputs: ['styleClass']
3937
})
4038
@Component({
@@ -69,8 +67,7 @@ export declare interface AnyButton extends Components.AnyButton {
6967
}
7068

7169
@ProxyCmp({
72-
tagName: 'any-button',
73-
customElement: undefined,
70+
defineCustomElementFn: undefined,
7471
inputs: ['anyStyle', 'badge', 'badgeClass', 'disabled', 'icon', 'iconHeight', 'iconPos', 'iconWidth', 'label', 'loading', 'loadingIcon', 'loadingIconStyleClass', 'styleClass', 'type']
7572
})
7673
@Component({
@@ -106,16 +103,15 @@ export declare interface AnyCheckbox extends Components.AnyCheckbox {
106103
}
107104

108105
@ProxyCmp({
109-
tagName: 'any-checkbox',
110-
customElement: undefined,
111-
inputs: ['anyStyle', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value'],
106+
defineCustomElementFn: undefined,
107+
inputs: ['anyStyle', 'anyTabIndex', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value'],
112108
methods: ['inputFocus']
113109
})
114110
@Component({
115111
selector: 'any-checkbox',
116112
changeDetection: ChangeDetectionStrategy.OnPush,
117113
template: '<ng-content></ng-content>',
118-
inputs: ['anyStyle', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value']
114+
inputs: ['anyStyle', 'anyTabIndex', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value']
119115
})
120116
export class AnyCheckbox {
121117
protected el: HTMLElement;
@@ -164,8 +160,7 @@ export declare interface AnyDropdown extends Components.AnyDropdown {
164160
}
165161

166162
@ProxyCmp({
167-
tagName: 'any-dropdown',
168-
customElement: undefined,
163+
defineCustomElementFn: undefined,
169164
inputs: ['anyStyle', 'anyTabIndex', 'autoZIndex', 'baseZIndex', 'clearIcon', 'disabled', 'dropdownIcon', 'hideAnimation', 'inputId', 'name', 'optionLabel', 'optionValue', 'options', 'panelScrollHeight', 'placeholder', 'readonly', 'showAnimation', 'showClear', 'value', 'virtualScroll']
170165
})
171166
@Component({
@@ -201,8 +196,7 @@ export declare interface AnyInputSwitch extends Components.AnyInputSwitch {
201196
}
202197

203198
@ProxyCmp({
204-
tagName: 'any-input-switch',
205-
customElement: undefined,
199+
defineCustomElementFn: undefined,
206200
inputs: ['anyStyle', 'anyTabIndex', 'ariaLabeledBy', 'checked', 'disabled', 'falseValue', 'inputId', 'name', 'readonly', 'styleClass', 'trueValue']
207201
})
208202
@Component({
@@ -230,8 +224,7 @@ export declare interface AnyInputText extends Components.AnyInputText {
230224
}
231225

232226
@ProxyCmp({
233-
tagName: 'any-input-text',
234-
customElement: undefined,
227+
defineCustomElementFn: undefined,
235228
inputs: ['disabled', 'floatLabel', 'inputId', 'inputWrapperClass', 'label', 'leftIconClass', 'name', 'placeholder', 'readonly', 'rightIconClass', 'value'],
236229
methods: ['getInputRef']
237230
})
@@ -260,8 +253,7 @@ export declare interface AnyListbox extends Components.AnyListbox {
260253
}
261254

262255
@ProxyCmp({
263-
tagName: 'any-listbox',
264-
customElement: undefined,
256+
defineCustomElementFn: undefined,
265257
inputs: ['anyStyle', 'disabled', 'inputId', 'listStyle', 'name', 'optionLabel', 'optionValue', 'options', 'readonly', 'scrollerHeight', 'value', 'virtualScroll']
266258
})
267259
@Component({
@@ -280,11 +272,75 @@ export class AnyListbox {
280272
}
281273

282274

275+
export declare interface AnyRadioButton extends Components.AnyRadioButton {
276+
/**
277+
* Callback to invoke on radio button select.
278+
*/
279+
aOnSelect: EventEmitter<CustomEvent<any>>;
280+
/**
281+
* Callback to invoke when the radio button receives focus.
282+
*/
283+
aOnFocus: EventEmitter<CustomEvent<any>>;
284+
/**
285+
* Callback to invoke when the radio button loses focus.
286+
*/
287+
aOnBlur: EventEmitter<CustomEvent<any>>;
288+
289+
}
290+
291+
@ProxyCmp({
292+
defineCustomElementFn: undefined,
293+
inputs: ['anyStyle', 'anyTabIndex', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'styleClass', 'value'],
294+
methods: ['setFocus']
295+
})
296+
@Component({
297+
selector: 'any-radio-button',
298+
changeDetection: ChangeDetectionStrategy.OnPush,
299+
template: '<ng-content></ng-content>',
300+
inputs: ['anyStyle', 'anyTabIndex', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'styleClass', 'value']
301+
})
302+
export class AnyRadioButton {
303+
protected el: HTMLElement;
304+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
305+
c.detach();
306+
this.el = r.nativeElement;
307+
proxyOutputs(this, this.el, ['aOnSelect', 'aOnFocus', 'aOnBlur']);
308+
}
309+
}
310+
311+
import type { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@anywhere-ui/core';
312+
export declare interface AnyRadioGroup extends Components.AnyRadioGroup {
313+
/**
314+
* Emitted when the value has changed.
315+
*/
316+
valueChange: EventEmitter<CustomEvent<IRadioGroupRadioGroupChangeEventDetail>>;
317+
318+
}
319+
320+
@ProxyCmp({
321+
defineCustomElementFn: undefined,
322+
inputs: ['allowEmptySelection', 'name', 'value']
323+
})
324+
@Component({
325+
selector: 'any-radio-group',
326+
changeDetection: ChangeDetectionStrategy.OnPush,
327+
template: '<ng-content></ng-content>',
328+
inputs: ['allowEmptySelection', 'name', 'value']
329+
})
330+
export class AnyRadioGroup {
331+
protected el: HTMLElement;
332+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
333+
c.detach();
334+
this.el = r.nativeElement;
335+
proxyOutputs(this, this.el, ['valueChange']);
336+
}
337+
}
338+
339+
283340
export declare interface AnyRippleEffect extends Components.AnyRippleEffect {}
284341

285342
@ProxyCmp({
286-
tagName: 'any-ripple-effect',
287-
customElement: undefined,
343+
defineCustomElementFn: undefined,
288344
inputs: ['type']
289345
})
290346
@Component({
@@ -305,8 +361,7 @@ export class AnyRippleEffect {
305361
export declare interface AnyTabPanel extends Components.AnyTabPanel {}
306362

307363
@ProxyCmp({
308-
tagName: 'any-tab-panel',
309-
customElement: undefined,
364+
defineCustomElementFn: undefined,
310365
inputs: ['disabled', 'header', 'selected']
311366
})
312367
@Component({
@@ -327,8 +382,7 @@ export class AnyTabPanel {
327382
export declare interface AnyTabView extends Components.AnyTabView {}
328383

329384
@ProxyCmp({
330-
tagName: 'any-tab-view',
331-
customElement: undefined,
385+
defineCustomElementFn: undefined,
332386
inputs: ['activeIndex', 'anyStyle', 'styleClass']
333387
})
334388
@Component({
@@ -371,8 +425,7 @@ export declare interface AnyVirtualScroller extends Components.AnyVirtualScrolle
371425
}
372426

373427
@ProxyCmp({
374-
tagName: 'any-virtual-scroller',
375-
customElement: undefined,
428+
defineCustomElementFn: undefined,
376429
inputs: ['anyStyle', 'contentElemClass', 'contentElemTag', 'delay', 'itemElemClass', 'itemSize', 'itemTag', 'items', 'lazy', 'noDataText', 'rowsPerPage', 'scrollElemClass', 'scrollerHeight', 'styleClass']
377430
})
378431
@Component({

‎packages/angular/projects/anywhere-ui/src/lib/directives/radio-value-accessor.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Directive, ElementRef } from '@angular/core';
2+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
3+
4+
import { ValueAccessor } from './value-accessor';
5+
6+
@Directive({
7+
/* tslint:disable-next-line:directive-selector */
8+
selector: 'any-radio-button',
9+
host: {
10+
'(aOnSelect)': 'handleChangeEvent($event.target.checked)'
11+
},
12+
providers: [
13+
{
14+
provide: NG_VALUE_ACCESSOR,
15+
useExisting: RadioValueAccessor,
16+
multi: true
17+
}
18+
]
19+
})
20+
export class RadioValueAccessor extends ValueAccessor {
21+
constructor(el: ElementRef) {
22+
super(el);
23+
}
24+
}

‎packages/angular/projects/anywhere-ui/src/lib/directives/select-value-accessor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
55

66
@Directive({
77
/* tslint:disable-next-line:directive-selector */
8-
selector: 'any-dropdown, any-listbox, any-virtual-scroller',
8+
selector: 'any-dropdown, any-listbox, any-virtual-scroller, any-radio-group',
99
host: {
1010
'(valueChange)': 'handleChangeEvent($event.target.value)'
1111
},

0 commit comments

Comments
 (0)