@rxap/directives
Version:
This package provides a set of Angular directives to simplify common tasks such as setting background images, confirming clicks, making elements contenteditable, and more. It includes directives for handling UI interactions, applying styles, and managing
832 lines (814 loc) • 36.9 kB
JavaScript
import * as i0 from '@angular/core';
import { isDevMode, ElementRef, Renderer2, Directive, Inject, Input, Injectable, HostListener, EventEmitter, HostBinding, Output, TemplateRef, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
import * as i1 from '@rxap/services';
import { ImageLoaderService, AvatarImageService } from '@rxap/services';
import { coerceBoolean, DebounceCall } from '@rxap/utilities';
import { __decorate, __metadata } from 'tslib';
import { ToggleSubject } from '@rxap/rxjs';
import { Subscription, fromEvent } from 'rxjs';
import { tap } from 'rxjs/operators';
var GlobalStyleOptions;
(function (GlobalStyleOptions) {
GlobalStyleOptions["INITIAL"] = "initial";
GlobalStyleOptions["INHERIT"] = "inherit";
})(GlobalStyleOptions || (GlobalStyleOptions = {}));
// TODO : complete description
// https://www.w3schools.com/cssref/css3_pr_background-size.asp
var BackgroundSizeOptions;
(function (BackgroundSizeOptions) {
BackgroundSizeOptions["AUTO"] = "auto";
BackgroundSizeOptions["COVER"] = "cover";
BackgroundSizeOptions["CONTAIN"] = "contain";
})(BackgroundSizeOptions || (BackgroundSizeOptions = {}));
// TODO : complete options and description
// https://www.w3schools.com/cssref/pr_background-repeat.asp
var BackgroundRepeatOptions;
(function (BackgroundRepeatOptions) {
BackgroundRepeatOptions["NO_REPEAT"] = "no-repeat";
})(BackgroundRepeatOptions || (BackgroundRepeatOptions = {}));
// TODO : complete options and description
// https://www.w3schools.com/cssref/pr_background-position.asp
var BackgroundPositionOptions;
(function (BackgroundPositionOptions) {
BackgroundPositionOptions["CENTER"] = "center";
BackgroundPositionOptions["CENTER_CENTER"] = "center center";
})(BackgroundPositionOptions || (BackgroundPositionOptions = {}));
class BackgroundImageDirective {
// TODO : add inputs for all 'background-*' styles
constructor(host, renderer, imageLoader) {
this.host = host;
this.renderer = renderer;
this.imageLoader = imageLoader;
this.imageUrl = null;
}
ngOnInit() {
if (this.size) {
this.sizeChange(this.size);
}
if (this.position) {
this.positionChange(this.position);
}
if (this.repeat) {
this.repeatChange(this.repeat);
}
}
ngOnChanges(changes) {
for (const propertyKey of Object.keys(changes)) {
switch (propertyKey) {
case 'imageUrl':
if (changes['imageUrl'].currentValue) {
this.imageUrlChange(changes['imageUrl'].currentValue);
}
break;
case 'size':
this.sizeChange(changes['size'].currentValue);
break;
case 'repeat':
this.repeatChange(changes['repeat'].currentValue);
break;
case 'position':
this.positionChange(changes['position'].currentValue);
break;
}
}
}
repeatChange(repeat) {
this.renderer.setStyle(this.host.nativeElement, 'background-repeat', repeat);
}
positionChange(position) {
this.renderer.setStyle(this.host.nativeElement, 'background-position', position);
}
sizeChange(size) {
this.renderer.setStyle(this.host.nativeElement, 'background-size', size);
}
async imageUrlChange(imageUrl) {
if (this.placeholderImageUrl) {
this.renderer.setStyle(this.host.nativeElement, 'background-image', `url("${this.placeholderImageUrl}")`);
}
if (imageUrl) {
await this.imageLoader.load(imageUrl);
this.renderer.setStyle(this.host.nativeElement, 'background-image', `url("${imageUrl}")`);
}
else {
if (isDevMode()) {
console.warn('background image url is not defined');
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BackgroundImageDirective, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: ImageLoaderService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BackgroundImageDirective, isStandalone: true, selector: "[rxapBackgroundImage]", inputs: { imageUrl: ["rxapBackgroundImage", "imageUrl"], placeholderImageUrl: "placeholderImageUrl", size: "size", repeat: "repeat", position: "position" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BackgroundImageDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapBackgroundImage]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
type: Inject,
args: [ElementRef]
}] }, { type: i0.Renderer2, decorators: [{
type: Inject,
args: [Renderer2]
}] }, { type: i1.ImageLoaderService, decorators: [{
type: Inject,
args: [ImageLoaderService]
}] }], propDecorators: { imageUrl: [{
type: Input,
args: ['rxapBackgroundImage']
}], placeholderImageUrl: [{
type: Input
}], size: [{
type: Input
}], repeat: [{
type: Input
}], position: [{
type: Input
}] } });
class AvatarBackgroundImageDirective extends BackgroundImageDirective {
constructor(host, renderer, imageLoader, avatarImage) {
super(host, renderer, imageLoader);
this.avatarImage = avatarImage;
this.imageUrl = null;
this.size = BackgroundSizeOptions.COVER;
this.repeat = BackgroundRepeatOptions.NO_REPEAT;
}
set name(name) {
if (!this.placeholderImageUrl) {
this.placeholderImageUrl = this.avatarImage.get({ name });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AvatarBackgroundImageDirective, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: ImageLoaderService }, { token: AvatarImageService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: AvatarBackgroundImageDirective, isStandalone: true, selector: "[rxapAvatarBackgroundImage]", inputs: { imageUrl: ["rxapAvatarBackgroundImage", "imageUrl"], name: "name" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AvatarBackgroundImageDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapAvatarBackgroundImage]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
type: Inject,
args: [ElementRef]
}] }, { type: i0.Renderer2, decorators: [{
type: Inject,
args: [Renderer2]
}] }, { type: i1.ImageLoaderService, decorators: [{
type: Inject,
args: [ImageLoaderService]
}] }, { type: i1.AvatarImageService, decorators: [{
type: Inject,
args: [AvatarImageService]
}] }], propDecorators: { imageUrl: [{
type: Input,
args: ['rxapAvatarBackgroundImage']
}], name: [{
type: Input
}] } });
class ConfirmClick {
constructor() {
this._hasConfirmDirective = false;
}
set hasConfirmDirective(value) {
this._hasConfirmDirective = coerceBoolean(value);
}
onClick() {
if (!this._hasConfirmDirective) {
this.execute();
}
}
onConfirm() {
this.execute();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmClick, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmClick }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmClick, decorators: [{
type: Injectable
}], propDecorators: { hasConfirmDirective: [{
type: Input,
args: ['rxapConfirm']
}], onClick: [{
type: HostListener,
args: ['click']
}], onConfirm: [{
type: HostListener,
args: ['confirmed']
}] } });
class ContenteditableDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.contenteditable = true;
this.spellcheck = false;
this.change = new EventEmitter();
}
onClick($event) {
$event.stopPropagation();
}
async onInput($event) {
const value = ($event.target.textContent)?.trim();
if (value && value.length >= 2) {
const event = {
value,
parameters: this.parameters,
};
this.change.emit(event);
const result = await this.method?.call(event);
if (result && typeof result === 'string') {
this.initial = this.elementRef.nativeElement.innerText = result;
}
else if (this.initial) {
this.elementRef.nativeElement.innerText = this.initial;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ContenteditableDirective, isStandalone: true, selector: "[rxapContenteditable]", inputs: { method: ["rxapContenteditable", "method"], parameters: "parameters", initial: "initial" }, outputs: { change: "rxapContenteditable" }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)" }, properties: { "attr.contenteditable": "this.contenteditable", "attr.spellcheck": "this.spellcheck" } }, ngImport: i0 }); }
}
__decorate([
DebounceCall(1000),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", Promise)
], ContenteditableDirective.prototype, "onInput", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ContenteditableDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapContenteditable]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { contenteditable: [{
type: HostBinding,
args: ['attr.contenteditable']
}], spellcheck: [{
type: HostBinding,
args: ['attr.spellcheck']
}], method: [{
type: Input,
args: ['rxapContenteditable']
}], change: [{
type: Output,
args: ['rxapContenteditable']
}], parameters: [{
type: Input
}], initial: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onInput: [{
type: HostListener,
args: ['input', ['$event']]
}] } });
class FullWidthDirective {
constructor() {
this.width = '100%';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FullWidthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: FullWidthDirective, isStandalone: true, selector: "[rxapFullWidth]", host: { properties: { "style.width": "this.width" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FullWidthDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapFullWidth]',
standalone: true,
}]
}], propDecorators: { width: [{
type: HostBinding,
args: ['style.width']
}] } });
// TODO : mv to rxap package
class IfTruthyDirective {
constructor(templateRef, viewContainerRef, cdr) {
this.templateRef = templateRef;
this.viewContainerRef = viewContainerRef;
this.cdr = cdr;
}
/**
* Asserts the correct type of the context for the template that `NgForOf` will render.
*
* The presence of this method is a signal to the Ivy template type-check compiler that the
* `NgForOf` structural directive renders its template with a specific context type.
*/
static ngTemplateContextGuard(dir, ctx) {
return true;
}
ngOnChanges(changes) {
if (this.method && this.parameters) {
this.execute();
}
}
async execute() {
const result = await this.method.call(this.parameters);
if (this.hasChanged(result)) {
this.viewContainerRef.clear();
if (result) {
this.viewContainerRef.createEmbeddedView(this.templateRef, { $implicit: result });
}
}
this.cdr.detectChanges();
}
hasChanged(current) {
if (this._last !== undefined) {
const currentTrackBy = this.trackBy ? this.trackBy(current) : current;
const lastTrackBy = this.trackBy ? this.trackBy(this._last) : this._last;
return currentTrackBy !== lastTrackBy;
}
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IfTruthyDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: IfTruthyDirective, isStandalone: true, selector: "[rxapIfTruthy]", inputs: { method: ["rxapIfTruthy", "method"], parameters: ["rxapIfTruthyParameters", "parameters"], trackBy: ["rxapIfTruthyTrackBy", "trackBy"] }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IfTruthyDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapIfTruthy]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { method: [{
type: Input,
args: ['rxapIfTruthy']
}], parameters: [{
type: Input,
args: ['rxapIfTruthyParameters']
}], trackBy: [{
type: Input,
args: ['rxapIfTruthyTrackBy']
}] } });
class IsDevModeDirective {
constructor(template, vcr) {
this.template = template;
this.vcr = vcr;
}
ngOnInit() {
if (isDevMode()) {
this.embeddedViewRef = this.vcr.createEmbeddedView(this.template);
}
}
ngOnDestroy() {
this.embeddedViewRef?.destroy();
this.vcr.clear();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IsDevModeDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: IsDevModeDirective, isStandalone: true, selector: "[rxapIsDevMode]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: IsDevModeDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapIsDevMode]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
class MethodTemplateDirective {
constructor(template, viewContainerRef, cdr) {
this.template = template;
this.viewContainerRef = viewContainerRef;
this.cdr = cdr;
this.withoutParameters = false;
this.immediately = false;
this.executed$ = new EventEmitter();
this.failure$ = new EventEmitter();
this.successful$ = new EventEmitter();
/**
* true - a remote method call is in progress
*/
this.executing$ = new ToggleSubject();
this.embedded = new EventEmitter();
}
static ngTemplateContextGuard(dir, ctx) {
return true;
}
ngOnChanges(changes) {
const parametersChanges = changes['parameters'];
if (parametersChanges) {
this.execute(parametersChanges.currentValue);
}
}
ngOnInit() {
this.renderLoadingTemplate();
if (this.withoutParameters) {
this.execute();
}
}
onConfirmed() {
return this.execute();
}
async execute(parameters = this.parameters) {
this.executing$.enable();
try {
const result = await this.method.call(parameters);
this.executed(result);
this.renderTemplate(result);
this.successful(result);
}
catch (error) {
if (isDevMode()) {
console.error(`Method directive execution failed:`, error.message);
}
this.renderErrorTemplate(error);
this.failure(error);
}
finally {
this.executing$.disable();
}
}
setParameter(parameterKey, value) {
this.updateParameters({ [parameterKey]: value });
}
updateParameters(parameters) {
this.parameters = { ...(this.parameters ?? {}), ...parameters };
}
executed(result) {
this.executed$.emit(result);
}
failure(error) {
this.failure$.emit(error);
}
successful(result) {
this.successful$.emit(result);
}
renderErrorTemplate(error) {
if (this.errorTemplate) {
this.viewContainerRef.clear();
if (this.errorTemplate) {
this.viewContainerRef.createEmbeddedView(this.errorTemplate, {
$implicit: error,
message: error.message,
});
}
}
}
renderTemplate(result) {
this.viewContainerRef.clear();
try {
this.viewContainerRef.createEmbeddedView(this.template, { $implicit: result });
}
catch (error) {
this.renderErrorTemplate(error);
console.error(error.message);
throw error;
}
this.embedded.emit();
this.cdr.detectChanges();
}
renderLoadingTemplate() {
if (this.loadingTemplate) {
this.viewContainerRef.clear();
this.viewContainerRef.createEmbeddedView(this.loadingTemplate);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MethodTemplateDirective, deps: [{ token: TemplateRef }, { token: ViewContainerRef }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: MethodTemplateDirective, isStandalone: true, selector: "[rxapMethod]", inputs: { method: ["rxapMethodCall", "method"], parameters: ["rxapMethodParameters", "parameters"], errorTemplate: ["rxapMethodError", "errorTemplate"], loadingTemplate: ["rxapMethodLoading", "loadingTemplate"], withoutParameters: ["rxapMethodWithoutParameters", "withoutParameters"], immediately: "immediately" }, outputs: { executed$: "executed", failure$: "failure", successful$: "successful", executing$: "executing", embedded: "embedded" }, host: { listeners: { "confirmed": "onConfirmed()" } }, exportAs: ["rxapMethod"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MethodTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapMethod]',
exportAs: 'rxapMethod',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
type: Inject,
args: [TemplateRef]
}] }, { type: i0.ViewContainerRef, decorators: [{
type: Inject,
args: [ViewContainerRef]
}] }, { type: i0.ChangeDetectorRef, decorators: [{
type: Inject,
args: [ChangeDetectorRef]
}] }], propDecorators: { method: [{
type: Input,
args: ['rxapMethodCall']
}], parameters: [{
type: Input,
args: ['rxapMethodParameters']
}], errorTemplate: [{
type: Input,
args: ['rxapMethodError']
}], loadingTemplate: [{
type: Input,
args: ['rxapMethodLoading']
}], withoutParameters: [{
type: Input,
args: ['rxapMethodWithoutParameters']
}], immediately: [{
type: Input
}], executed$: [{
type: Output,
args: ['executed']
}], failure$: [{
type: Output,
args: ['failure']
}], successful$: [{
type: Output,
args: ['successful']
}], executing$: [{
type: Output,
args: ['executing']
}], embedded: [{
type: Output
}], onConfirmed: [{
type: HostListener,
args: ['confirmed']
}] } });
class MethodDirective {
constructor() {
this.immediately = false;
this.executed$ = new EventEmitter();
this.failure$ = new EventEmitter();
this.successful$ = new EventEmitter();
/**
* true - a remote method call is in progress
*/
this.executing$ = new ToggleSubject();
this._hasConfirmDirective = false;
}
set hasConfirmDirective(value) {
this._hasConfirmDirective = coerceBoolean(value);
}
ngOnInit() {
if (this.immediately) {
this.execute();
}
}
onConfirmed() {
return this.execute();
}
onClick() {
if (!this._hasConfirmDirective) {
return this.execute();
}
else {
if (isDevMode()) {
console.debug('Skip method call. Wait for confirmation.');
}
}
return Promise.resolve();
}
async execute() {
this.executing$.enable();
try {
const result = await this.method.call(this.parameters);
this.executed(result);
this.successful(result);
}
catch (error) {
if (isDevMode()) {
console.error(`Method directive execution failed:`, error.message);
}
this.failure(error);
}
finally {
this.executing$.disable();
}
}
setParameter(parameterKey, value) {
this.updateParameters({ [parameterKey]: value });
}
updateParameters(parameters) {
this.parameters = { ...(this.parameters ?? {}), ...parameters };
}
executed(result) {
this.executed$.emit(result);
}
failure(error) {
this.failure$.emit(error);
}
successful(result) {
this.successful$.emit(result);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MethodDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: MethodDirective, isStandalone: true, selector: "[rxapMethod]", inputs: { method: ["rxapMethod", "method"], parameters: "parameters", immediately: "immediately", hasConfirmDirective: ["rxapConfirm", "hasConfirmDirective"] }, outputs: { executed$: "executed", failure$: "failure", successful$: "successful" }, host: { listeners: { "confirmed": "onConfirmed()", "click": "onClick()" } }, exportAs: ["rxapMethod"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MethodDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapMethod]',
exportAs: 'rxapMethod',
standalone: true,
}]
}], propDecorators: { method: [{
type: Input,
args: ['rxapMethod']
}], parameters: [{
type: Input
}], immediately: [{
type: Input
}], executed$: [{
type: Output,
args: ['executed']
}], failure$: [{
type: Output,
args: ['failure']
}], successful$: [{
type: Output,
args: ['successful']
}], hasConfirmDirective: [{
type: Input,
args: ['rxapConfirm']
}], onConfirmed: [{
type: HostListener,
args: ['confirmed']
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class MovableDividerDirective {
constructor(renderer) {
this.renderer = renderer;
this.origin = 'right';
this.cursor = 'ew-resize';
this._subscription = new Subscription();
/**
* Indicates that the divider is moved with mouse down
* @private
*/
this._moveDivider = false;
/**
* Holds the current fixed element width.
* If null the move divider feature was not yet used and the initial
* fixed element width is not calculated
* @private
*/
this._fixedElementWidth = null;
}
ngOnDestroy() {
this._subscription?.unsubscribe();
}
ngOnInit() {
this._subscription.add(fromEvent(this.containerElement, 'mousemove').pipe(tap(($event) => {
if (this._moveDivider) {
if (!this._fixedElementWidth) {
this._fixedElementWidth = this.fixedElement.clientWidth;
}
if (this.origin === 'right') {
this._fixedElementWidth = $event.clientX - this.containerElement.getBoundingClientRect().left;
}
else if (this.origin === 'left') {
if (isDevMode()) {
console.log({
clientWidth: this.containerElement.clientWidth,
clientX: $event.clientX,
clientLeft: this.containerElement.getBoundingClientRect().left,
});
}
this._fixedElementWidth =
this.containerElement.clientWidth - $event.clientX + this.containerElement.getBoundingClientRect().left;
}
else {
throw new Error(`The origin '${this.origin}' is not supported.`);
}
const width = this._fixedElementWidth + 'px';
this.renderer.setStyle(this.fixedElement, 'max-width', width);
this.renderer.setStyle(this.fixedElement, 'min-width', width);
this.renderer.setStyle(this.fixedElement, 'flex-basis', width);
}
})).subscribe());
this._subscription.add(fromEvent(this.containerElement, 'mouseup').pipe(tap(() => this._moveDivider = false)).subscribe());
}
onMousedown() {
this._moveDivider = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MovableDividerDirective, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: MovableDividerDirective, isStandalone: true, selector: "[rxapMovableDivider]", inputs: { containerElement: "containerElement", fixedElement: "fixedElement", origin: "origin" }, host: { listeners: { "mousedown": "onMousedown()" }, properties: { "style.cursor": "this.cursor" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MovableDividerDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapMovableDivider]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { containerElement: [{
type: Input,
args: [{ required: true }]
}], fixedElement: [{
type: Input,
args: [{ required: true }]
}], origin: [{
type: Input
}], cursor: [{
type: HostBinding,
args: ['style.cursor']
}], onMousedown: [{
type: HostListener,
args: ['mousedown']
}] } });
class PreventDefaultDirective {
onClick($event) {
$event.preventDefault();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: PreventDefaultDirective, isStandalone: true, selector: "[rxapPreventDefault]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PreventDefaultDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapPreventDefault]',
standalone: true,
}]
}], propDecorators: { onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class ShareService {
async share(data) {
if (this.isShareSupported()) {
if (navigator.canShare(data)) {
await navigator.share(data);
}
else {
console.debug('share data:', data);
throw new Error('Can not share data. Data is invalid!');
}
}
else {
alert('Native share is not supported!');
}
}
isShareSupported() {
return !!navigator.share;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ShareService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ShareService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ShareService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class ShareButtonDirective {
constructor(shareService) {
this.shareService = shareService;
}
share() {
this.shareService.share({
url: this.url,
text: this.text,
files: this.files,
title: this.title,
})
.then(() => console.log('share successfully'))
.catch(err => console.error('share failed', err.message));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ShareButtonDirective, deps: [{ token: ShareService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ShareButtonDirective, isStandalone: true, selector: "[rxapShareButton]", inputs: { url: "url", text: "text", title: "title", files: "files" }, host: { listeners: { "click": "share()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ShareButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapShareButton]',
standalone: true,
}]
}], ctorParameters: () => [{ type: ShareService }], propDecorators: { url: [{
type: Input
}], text: [{
type: Input
}], title: [{
type: Input,
args: [{ required: true }]
}], files: [{
type: Input
}], share: [{
type: HostListener,
args: ['click']
}] } });
class StopImmediatePropagationDirective {
onClick($event) {
$event.stopImmediatePropagation();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StopImmediatePropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: StopImmediatePropagationDirective, isStandalone: true, selector: "[rxapStopImmediatePropagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StopImmediatePropagationDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapStopImmediatePropagation]',
standalone: true,
}]
}], propDecorators: { onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class StopPropagationDirective {
onClick($event) {
$event.stopPropagation();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: StopPropagationDirective, isStandalone: true, selector: "[rxapStopPropagation]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: StopPropagationDirective, decorators: [{
type: Directive,
args: [{
selector: '[rxapStopPropagation]',
standalone: true,
}]
}], propDecorators: { onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
// region
// endregion
/**
* Generated bundle index. Do not edit.
*/
export { AvatarBackgroundImageDirective, BackgroundImageDirective, BackgroundPositionOptions, BackgroundRepeatOptions, BackgroundSizeOptions, ConfirmClick, ContenteditableDirective, FullWidthDirective, GlobalStyleOptions, IfTruthyDirective, IsDevModeDirective, MethodDirective, MethodTemplateDirective, MovableDividerDirective, PreventDefaultDirective, ShareButtonDirective, ShareService, StopImmediatePropagationDirective, StopPropagationDirective };
//# sourceMappingURL=rxap-directives.mjs.map