nativescript-web-adapter 0.1.3 → 0.1.6

package/angular/components/index.ts

@@ -0,0 +1,156 @@
+import { AbsoluteLayoutComponent } from './absolute-layout.component';
+import { ActionBarComponent } from './action-bar.component';
+import { ActionItemComponent } from './action-item.component';
+import { ActivityIndicatorComponent } from './activity-indicator.component';
+import { ButtonComponent } from './button.component';
+import { DatePickerComponent } from './date-picker.component';
+import { DockLayoutComponent } from './dock-layout.component';
+import { FlexboxLayoutComponent } from './flexbox-layout.component';
+import { FrameComponent } from './frame.component';
+import { GridLayoutComponent } from './grid-layout.component';
+import { HtmlViewComponent } from './html-view.component';
+import { ImageComponent } from './image.component';
+import { ImageCacheItComponent } from './image-cache-it.component';
+import { LabelComponent } from './label.component';
+import { ListPickerComponent } from './list-picker.component';
+import { ListViewComponent } from './list-view.component';
+import { NavigationButtonComponent } from './navigation-button.component';
+import { PageComponent } from './page.component';
+import { PlaceholderComponent } from './placeholder.component';
+import { ProgressComponent } from './progress.component';
+import { RootLayoutComponent } from './root-layout.component';
+import { ScrollViewComponent } from './scroll-view.component';
+import { SearchBarComponent } from './search-bar.component';
+import { SegmentedBarComponent } from './segmented-bar.component';
+import { SegmentedBarItemComponent } from './segmented-bar-item.component';
+import { SliderComponent } from './slider.component';
+import { StackLayoutComponent } from './stack-layout.component';
+import { SwitchComponent } from './switch.component';
+import { TabViewComponent } from './tab-view.component';
+import { TabViewItemComponent } from './tab-view-item.component';
+import { TextFieldComponent } from './text-field.component';
+import { TextViewComponent } from './text-view.component';
+import { TimePickerComponent } from './time-picker.component';
+import { WebViewComponent } from './web-view.component';
+import { WrapLayoutComponent } from './wrap-layout.component';
+import { NsAbsolutePositionDirective } from './directives/absolute-position.directive';
+import { NsGridPositionDirective } from './directives/grid-position.directive';
+
+export const components = {
+	AbsoluteLayout: AbsoluteLayoutComponent,
+	ActionBar: ActionBarComponent,
+	ActionItem: ActionItemComponent,
+	ActivityIndicator: ActivityIndicatorComponent,
+	Button: ButtonComponent,
+	DatePicker: DatePickerComponent,
+	DockLayout: DockLayoutComponent,
+	FlexboxLayout: FlexboxLayoutComponent,
+	Frame: FrameComponent,
+	GridLayout: GridLayoutComponent,
+	HtmlView: HtmlViewComponent,
+	Image: ImageComponent,
+	ImageCacheIt: ImageCacheItComponent,
+	Label: LabelComponent,
+	ListPicker: ListPickerComponent,
+	ListView: ListViewComponent,
+	NavigationButton: NavigationButtonComponent,
+	Page: PageComponent,
+	Placeholder: PlaceholderComponent,
+	Progress: ProgressComponent,
+	RootLayout: RootLayoutComponent,
+	ScrollView: ScrollViewComponent,
+	SearchBar: SearchBarComponent,
+	SegmentedBar: SegmentedBarComponent,
+	SegmentedBarItem: SegmentedBarItemComponent,
+	Slider: SliderComponent,
+	StackLayout: StackLayoutComponent,
+	Switch: SwitchComponent,
+	TabView: TabViewComponent,
+	TabViewItem: TabViewItemComponent,
+	TextField: TextFieldComponent,
+	TextView: TextViewComponent,
+	TimePicker: TimePickerComponent,
+	WebView: WebViewComponent,
+	WrapLayout: WrapLayoutComponent,
+};
+
+export const imports = [
+	AbsoluteLayoutComponent,
+	ActionBarComponent,
+	ActionItemComponent,
+	ActivityIndicatorComponent,
+	ButtonComponent,
+	DatePickerComponent,
+	DockLayoutComponent,
+	FlexboxLayoutComponent,
+	FrameComponent,
+	GridLayoutComponent,
+	HtmlViewComponent,
+	ImageComponent,
+	ImageCacheItComponent,
+	LabelComponent,
+	ListPickerComponent,
+	ListViewComponent,
+	NavigationButtonComponent,
+	PageComponent,
+	PlaceholderComponent,
+	ProgressComponent,
+	RootLayoutComponent,
+	ScrollViewComponent,
+	SearchBarComponent,
+	SegmentedBarComponent,
+	SegmentedBarItemComponent,
+	SliderComponent,
+	StackLayoutComponent,
+	SwitchComponent,
+	TabViewComponent,
+	TabViewItemComponent,
+	TextFieldComponent,
+	TextViewComponent,
+	TimePickerComponent,
+	WebViewComponent,
+	WrapLayoutComponent,
+	NsAbsolutePositionDirective,
+	NsGridPositionDirective,
+] as const;
+
+export {
+	AbsoluteLayoutComponent,
+	ActionBarComponent,
+	ActionItemComponent,
+	ActivityIndicatorComponent,
+	ButtonComponent,
+	DatePickerComponent,
+	DockLayoutComponent,
+	FlexboxLayoutComponent,
+	FrameComponent,
+	GridLayoutComponent,
+	HtmlViewComponent,
+	ImageComponent,
+	ImageCacheItComponent,
+	LabelComponent,
+	ListPickerComponent,
+	ListViewComponent,
+	NavigationButtonComponent,
+	PageComponent,
+	PlaceholderComponent,
+	ProgressComponent,
+	RootLayoutComponent,
+	ScrollViewComponent,
+	SearchBarComponent,
+	SegmentedBarComponent,
+	SegmentedBarItemComponent,
+	SliderComponent,
+	StackLayoutComponent,
+	SwitchComponent,
+	TabViewComponent,
+	TabViewItemComponent,
+	TextFieldComponent,
+	TextViewComponent,
+	TimePickerComponent,
+	WebViewComponent,
+	WrapLayoutComponent,
+	NsAbsolutePositionDirective,
+	NsGridPositionDirective,
+};
+

package/angular/components/label.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'Label, label',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CommonModule],
+	template: `
+		<span class="ns-label">
+			<ng-container *ngIf="text === undefined || text === null || text === ''; else textTpl">
+				<ng-content></ng-content>
+			</ng-container>
+			<ng-template #textTpl>{{ text }}</ng-template>
+		</span>
+	`,
+	styles: [
+		`
+			.ns-label {
+				display: inline-block;
+			}
+		`,
+	],
+})
+export class LabelComponent {
+	@Input() text?: string;
+}

package/angular/components/list-picker.component.ts

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'ListPicker, listpicker',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CommonModule],
+	template: `
+		<select class="ns-listpicker" [value]="selectedIndex ?? 0" (change)="onChange($event)">
+			<option *ngFor="let item of items; let i = index" [value]="i">{{ item }}</option>
+		</select>
+	`,
+	styles: [
+		`
+			.ns-listpicker {
+				padding: 6px 8px;
+			}
+		`,
+	],
+})
+export class ListPickerComponent {
+	@Input({ required: true }) items: string[] = [];
+	@Input() selectedIndex?: number;
+	@Output() selectedIndexChange = new EventEmitter<number>();
+	@Output() change = new EventEmitter<number>();
+
+	onChange(e: Event) {
+		const v = Number((e.target as HTMLSelectElement).value);
+		this.selectedIndexChange.emit(v);
+		this.change.emit(v);
+	}
+}

package/angular/components/list-view.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'ListView, listview',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<ul class="ns-listview"><ng-content></ng-content></ul>`,
+	styles: [
+		`
+			.ns-listview {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+			}
+			.ns-listview > li {
+				padding: 8px 12px;
+				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+			}
+		`,
+	],
+})
+export class ListViewComponent {}

package/angular/components/navigation-button.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'NavigationButton, navigationbutton',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CommonModule],
+	template: `
+		<button class="ns-navbutton" (click)="onClick($event)">
+			<ng-content></ng-content>
+			<ng-container *ngIf="text">{{ text }}</ng-container>
+		</button>
+	`,
+	styles: [
+		`
+			.ns-navbutton {
+				background: transparent;
+				border: none;
+				color: inherit;
+				cursor: pointer;
+				padding: 8px;
+			}
+		`,
+	],
+})
+export class NavigationButtonComponent {
+	@Input() text?: string;
+	@Output() tap = new EventEmitter<MouseEvent>();
+
+	onClick(e: MouseEvent) {
+		this.tap.emit(e);
+		if ((this.tap as any).observers?.length) return;
+		if (window?.history?.back) window.history.back();
+	}
+}

package/angular/components/page.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'Page, page',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-page"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-page {
+				top: 0;
+				left: 0;
+				position: absolute;
+				width: 100%;
+				min-height: 100%;
+				padding: 0px;
+			}
+		`,
+	],
+})
+export class PageComponent {}

package/angular/components/placeholder.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'Placeholder, placeholder',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-placeholder"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-placeholder {
+				display: contents;
+			}
+		`,
+	],
+})
+export class PlaceholderComponent {}

package/angular/components/progress.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'Progress, progress[nsProgress], ns-progress',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<progress class="ns-progress" [value]="value ?? null" [max]="max ?? null"></progress>`,
+	styles: [
+		`
+			.ns-progress {
+				width: 100%;
+			}
+		`,
+	],
+})
+export class ProgressComponent {
+	@Input() value?: number;
+	@Input() max?: number;
+}
+

package/angular/components/root-layout.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'RootLayout, rootlayout',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-root"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-root {
+				position: relative;
+				width: 100%;
+				height: 100%;
+				display: block;
+			}
+		`,
+	],
+})
+export class RootLayoutComponent {}

package/angular/components/scroll-view.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'ScrollView, scrollview',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-scroll"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-scroll {
+				overflow: auto;
+				max-height: 100%;
+			}
+		`,
+	],
+})
+export class ScrollViewComponent {}

package/angular/components/search-bar.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'SearchBar, searchbar',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<div class="ns-searchbar">
+			<input type="search" [value]="text ?? ''" (input)="onInput($event)" (keyup.enter)="onSubmit($event)" />
+		</div>
+	`,
+	styles: [
+		`
+			.ns-searchbar input {
+				width: 100%;
+				padding: 6px 8px;
+			}
+		`,
+	],
+})
+export class SearchBarComponent {
+	@Input() text?: string;
+	@Output() textChange = new EventEmitter<string>();
+	@Output() submit = new EventEmitter<string>();
+
+	onInput(e: Event) {
+		this.textChange.emit((e.target as HTMLInputElement).value);
+	}
+
+	onSubmit(e: KeyboardEvent) {
+		this.submit.emit((e.target as HTMLInputElement).value);
+	}
+}
+

package/angular/components/segmented-bar-item.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input, Optional } from '@angular/core';
+import { SegmentedBarComponent } from './segmented-bar.component';
+
+@Component({
+	selector: 'SegmentedBarItem, segmentedbaritem',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-segmentedbar-item"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-segmentedbar-item {
+				display: block;
+			}
+		`,
+	],
+})
+export class SegmentedBarItemComponent {
+	@Input({ required: true }) title!: string;
+
+	constructor(@Optional() private readonly parent?: SegmentedBarComponent) {}
+
+	@HostBinding('style.display')
+	get display(): string {
+		if (!this.parent) return 'block';
+		return this.parent.isActive(this) ? 'block' : 'none';
+	}
+}

package/angular/components/segmented-bar.component.ts

@@ -0,0 +1,101 @@
+import { CommonModule } from '@angular/common';
+import {
+	AfterContentInit,
+	ChangeDetectionStrategy,
+	Component,
+	ContentChildren,
+	EventEmitter,
+	Input,
+	Output,
+	QueryList,
+} from '@angular/core';
+import { SegmentedBarItemComponent } from './segmented-bar-item.component';
+
+@Component({
+	selector: 'SegmentedBar, segmentedbar',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CommonModule],
+	template: `
+		<div class="ns-segmentedbar">
+			<div class="ns-segmentedbar-header">
+				<button
+					*ngFor="let t of displayItems; let i = index"
+					class="ns-segment"
+					[class.active]="i === currentIndex"
+					(click)="select(i)"
+				>
+					{{ t }}
+				</button>
+			</div>
+			<div class="ns-segmentedbar-body"><ng-content></ng-content></div>
+		</div>
+	`,
+	styles: [
+		`
+			.ns-segmentedbar {
+				display: block;
+				color: inherit;
+			}
+			.ns-segmentedbar-header {
+				display: flex;
+				gap: 8px;
+				border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+				padding-bottom: 8px;
+			}
+			.ns-segment {
+				background: transparent;
+				border: none;
+				color: #fff;
+				padding: 8px 12px;
+				cursor: pointer;
+				opacity: 0.95;
+			}
+			.ns-segment.active {
+				opacity: 1;
+				border-bottom: 2px solid currentColor;
+			}
+			.ns-segmentedbar-body {
+				padding-top: 12px;
+			}
+		`,
+	],
+})
+export class SegmentedBarComponent implements AfterContentInit {
+	@Input() items?: string[];
+	@Input() selectedIndex?: number;
+	@Output() selectedIndexChange = new EventEmitter<number>();
+	@Output() change = new EventEmitter<number>();
+
+	@ContentChildren(SegmentedBarItemComponent) private readonly contentItems?: QueryList<SegmentedBarItemComponent>;
+
+	currentIndex = 0;
+	displayItems: string[] = [];
+
+	ngAfterContentInit(): void {
+		this.currentIndex = typeof this.selectedIndex === 'number' ? this.selectedIndex : 0;
+		this.refreshItems();
+		this.contentItems?.changes.subscribe(() => this.refreshItems());
+	}
+
+	select(i: number) {
+		this.currentIndex = i;
+		this.selectedIndexChange.emit(i);
+		this.change.emit(i);
+	}
+
+	isActive(item: SegmentedBarItemComponent): boolean {
+		const list = this.contentItems?.toArray() ?? [];
+		const idx = list.indexOf(item);
+		if (idx < 0) return true;
+		return idx === this.currentIndex;
+	}
+
+	private refreshItems() {
+		if (this.items && this.items.length) {
+			this.displayItems = this.items;
+			return;
+		}
+		this.displayItems = (this.contentItems?.toArray() ?? []).map((it: SegmentedBarItemComponent) => it.title);
+	}
+}

package/angular/components/slider.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'Slider, slider',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<input
+			class="ns-slider"
+			type="range"
+			[min]="min ?? 0"
+			[max]="max ?? 100"
+			[step]="step ?? 1"
+			[value]="value ?? 0"
+			(input)="onInput($event)"
+		/>
+	`,
+	styles: [
+		`
+			.ns-slider {
+				width: 100%;
+			}
+		`,
+	],
+})
+export class SliderComponent {
+	@Input() value?: number;
+	@Input() min?: number;
+	@Input() max?: number;
+	@Input() step?: number;
+
+	@Output() valueChange = new EventEmitter<number>();
+	@Output() change = new EventEmitter<number>();
+
+	onInput(e: Event) {
+		const v = Number((e.target as HTMLInputElement).value);
+		this.valueChange.emit(v);
+		this.change.emit(v);
+	}
+}
+

package/angular/components/stack-layout.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'StackLayout, stacklayout',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-stack"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-stack {
+				display: flex;
+				flex-direction: column;
+			}
+		`,
+	],
+})
+export class StackLayoutComponent {}

package/angular/components/switch.component.ts

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'Switch, switch',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<label class="ns-switch">
+			<input type="checkbox" [checked]="checked ?? false" (change)="onChange($event)" />
+			<span class="track"><span class="thumb"></span></span>
+		</label>
+	`,
+	styles: [
+		`
+			.ns-switch {
+				display: inline-flex;
+				align-items: center;
+				cursor: pointer;
+			}
+			.ns-switch input {
+				display: none;
+			}
+			.ns-switch .track {
+				width: 40px;
+				height: 22px;
+				background: rgba(255, 255, 255, 0.3);
+				border-radius: 11px;
+				position: relative;
+				transition: background 0.2s;
+			}
+			.ns-switch .thumb {
+				width: 18px;
+				height: 18px;
+				background: rgb(0, 255, 174);
+				border-radius: 50%;
+				position: absolute;
+				top: 2px;
+				left: 2px;
+				transition: left 0.2s;
+			}
+			.ns-switch input:checked + .track {
+				background: currentColor;
+				opacity: 0.5;
+			}
+			.ns-switch input:checked + .track .thumb {
+				left: 20px;
+			}
+		`,
+	],
+})
+export class SwitchComponent {
+	@Input() checked?: boolean;
+	@Output() checkedChange = new EventEmitter<boolean>();
+	@Output() change = new EventEmitter<boolean>();
+
+	onChange(e: Event) {
+		const v = (e.target as HTMLInputElement).checked;
+		this.checkedChange.emit(v);
+		this.change.emit(v);
+	}
+}
+

package/angular/components/tab-view-item.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input, Optional } from '@angular/core';
+import { TabViewComponent } from './tab-view.component';
+
+@Component({
+	selector: 'TabViewItem, tabviewitem',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-tabview-item"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-tabview-item {
+				display: block;
+			}
+		`,
+	],
+})
+export class TabViewItemComponent {
+	@Input({ required: true }) title!: string;
+
+	constructor(@Optional() private readonly parent?: TabViewComponent) {}
+
+	@HostBinding('style.display')
+	get display(): string {
+		if (!this.parent) return 'block';
+		return this.parent.isActive(this) ? 'block' : 'none';
+	}
+}