aril 1.1.71 → 1.1.73

package/ui/panel/src/panel.component.html

@@ -0,0 +1,44 @@
+<div [ngClass]="{ 'full-screen': isFullScreen && canFullScreen }">
+	<p-panel
+		[toggleable]="toggleable()"
+		[collapsed]="collapsed()"
+		[collapseIcon]="'pi pi-chevron-down'"
+		[expandIcon]="'pi pi-chevron-up'"
+		[styleClass]="styleClass()"
+		>
+		<!-- header -->
+		<ng-template pTemplate="header">
+			<div class="panel-header">
+				<ng-content select="[header]"></ng-content>
+			</div>
+		</ng-template>
+
+		<!-- header-tools -->
+		<ng-template class="flex" pTemplate="icons">
+			<div class="panel-icons flex">
+				<ng-content select="[tools]"></ng-content>
+
+				@if (canFullScreen()) {
+					<i
+						role="button"
+						class="pi"
+						[ngClass]="{
+							'pi-window-maximize': !isFullScreen,
+							'pi-window-minimize': isFullScreen
+						}"
+						(click)="toggleFullScreen()"></i>
+				}
+			</div>
+		</ng-template>
+
+		<!-- body -->
+		<ng-content select="[body]" class="panel-ng-content"></ng-content>
+
+		<!-- footer -->
+		@if (showFooter()) {
+			<ng-template pTemplate="footer">
+				<ng-content select="[footer]"></ng-content>
+			</ng-template>
+		}
+	</p-panel>
+</div>

package/ui/panel/src/panel.component.ts

@@ -0,0 +1,31 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
+
+import { PanelModule } from 'primeng/panel';
+
+@Component({
+	standalone: true,
+	selector: 'aril-panel',
+	templateUrl: './panel.component.html',
+	styleUrl: './panel.component.css',
+	imports: [PanelModule, NgClass],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PanelComponent {
+	toggleable = input<boolean>(true);
+	canFullScreen = input<boolean>();
+	collapsed = input<boolean>(false);
+	styleClass = input<string>();
+	showFooter = input<boolean>(false);
+	noPadding = input<boolean>(false);
+
+	isFullScreen = false;
+
+	toggleFullScreen() {
+		this.isFullScreen = !this.isFullScreen;
+	}
+
+	@HostBinding('class.no-padding') get noPaddingClass() {
+		return this.noPadding();
+	}
+}

package/ui/password/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/password/src/password.component.html

@@ -0,0 +1,25 @@
+<p-password
+	[feedback]="feedback()"
+	autocomplete="off"
+	[toggleMask]="true"
+	[placeholder]="placeholder()"
+	[tabindex]="tabindex"
+	[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+	[tooltipOptions]="tooltipOptions"
+	[formControl]="ngControl.control"
+	(ngModelChange)="ngControl.viewToModelUpdate($event)">
+	@if (passwordCriterias()?.length) {
+		<ng-template pTemplate="header">
+			<h6>Şifre Oluştur</h6>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<p-divider></p-divider>
+			<p class="mt-2">Şartlar</p>
+			<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+				@for (criteria of passwordCriterias(); track criteria) {
+					<li>{{ criteria }}</li>
+				}
+			</ul>
+		</ng-template>
+	}
+</p-password>

package/ui/password/src/password.component.ts

@@ -0,0 +1,22 @@
+import { Component, input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { DividerModule } from 'primeng/divider';
+import { PasswordModule } from 'primeng/password';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+@Component({
+	standalone: true,
+	selector: 'aril-password[ngModel], aril-password[formControl], aril-password[formControlName]',
+	templateUrl: './password.component.html',
+	imports: [ReactiveFormsModule, PasswordModule, DividerModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective]
+})
+export class PasswordComponent extends BaseInputComponent {
+	feedback = input(false);
+	passwordCriterias = input<string[]>();
+	placeholder = input<string>('');
+	tabindex = input<number>();
+}

package/ui/pdf-viewer/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/pdf-viewer/src/pdf-viewer.component.html

@@ -0,0 +1,16 @@
+<ngx-extended-pdf-viewer
+	#pdfViewer
+	[base64Src]="base64Src()"
+	useBrowserLocale="true"
+	[height]="height()"
+	[showToolbar]="true"
+	[showSidebarButton]="showSidebarButton()"
+	[showFindButton]="showFindButton()"
+	[showZoomButtons]="showZoomButtons()"
+	[showPresentationModeButton]="showPresentationModeButton()"
+	[page]="page()"
+    [handTool]="handTool()"
+	[contextMenuAllowed]="allowContextMenu()"
+	[useInlineScripts]="false"
+	[filenameForDownload]="fileNameForDownload()">
+</ngx-extended-pdf-viewer>

package/ui/pdf-viewer/src/pdf-viewer.component.scss

@@ -0,0 +1,8 @@
+ngx-extended-pdf-viewer {
+    display: block;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }

package/ui/pdf-viewer/src/pdf-viewer.component.ts

@@ -0,0 +1,28 @@
+import { Component, input } from '@angular/core';
+import { NgxExtendedPdfViewerComponent, NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
+
+@Component({
+	standalone: true,
+	selector: 'aril-pdf-viewer',
+	templateUrl: 'pdf-viewer.component.html',
+	styleUrls: ['pdf-viewer.component.scss'],
+	imports: [NgxExtendedPdfViewerModule]
+})
+export class PdfViewerComponent {
+
+	pdfViewer!: NgxExtendedPdfViewerComponent;	
+	showSidebarButton = input<boolean>(true);
+	showFindButton = input<boolean>(true);
+	showZoomButtons = input<boolean>(true);
+	showPresentationModeButton = input<boolean>(true);
+	height = input<string>('auto');
+	page = input<number>(1);
+	src = input<string>('');
+	base64Src = input<string>('');
+	allowContextMenu = input<boolean>(false);
+	handTool = input<boolean>(true);
+	httpHeaders = input<Record<string, string>>({});
+	fileNameForDownload= input<string>(this.pdfViewer?.filenameForDownload ?? '');
+
+}
+

package/ui/progressbar/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+exports.__esModule = true;
+__exportStar(require("./src/progressbar.component"), exports);

package/ui/progressbar/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/progressbar/src/dist/progressbar.component.js

@@ -0,0 +1,28 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.ProgressBarComponent = void 0;
+var core_1 = require("@angular/core");
+var progressbar_1 = require("primeng/progressbar");
+var ProgressBarComponent = /** @class */ (function () {
+    function ProgressBarComponent() {
+        this.value = core_1.input();
+        this.unit = core_1.input("%");
+        this.showValue = core_1.input(true);
+    }
+    ProgressBarComponent = __decorate([
+        core_1.Component({
+            selector: 'aril-progress',
+            standalone: true,
+            imports: [progressbar_1.ProgressBarModule],
+            templateUrl: './progressbar.component.html'
+        })
+    ], ProgressBarComponent);
+    return ProgressBarComponent;
+}());
+exports.ProgressBarComponent = ProgressBarComponent;

package/ui/progressbar/src/progressbar.component.html

@@ -0,0 +1 @@
+<p-progressBar [value]="value()" [unit]="unit()" [showValue]="showValue()" />

package/ui/progressbar/src/progressbar.component.ts

@@ -0,0 +1,18 @@
+import {
+	Component,
+    input,
+} from '@angular/core';
+
+import { ProgressBarModule } from 'primeng/progressbar';
+
+@Component({
+	selector: 'aril-progress',
+	standalone: true,
+	imports: [ProgressBarModule],
+	templateUrl: './progressbar.component.html'
+})
+export class ProgressBarComponent  {
+    value=input<number>();
+    unit=input<string>("%");
+    showValue = input<boolean>(true);
+}

package/ui/radioButton/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/radioButton/src/radio-button.component.html

@@ -0,0 +1,23 @@
+<div [class]="_pAlign()">
+	@for (item of options(); track item) {
+		<div [class]="_cAlign()">
+			<p-radioButton
+				[value]="item.key"
+				[inputId]="item.key"
+				[tabindex]="item.disabled ? -1 : tabindex()"
+				[style.pointerEvents]="item.disabled ? 'none' : null"
+				[pTooltip]="ngControl.invalid ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+				[tooltipOptions]="tooltipOptions"
+				[formControl]="item.ngControl ?? ngControl.control"
+				(ngModelChange)="ngControl.viewToModelUpdate($event)"
+				[disabled]="item.disabled ?? false" />
+			<label
+				class="ml-2"
+				[for]="item.key"
+				[class.disabled]="item.disabled"
+				[style.pointerEvents]="item.disabled ? 'none' : null"
+				>{{ item.label }}</label
+			>
+		</div>
+	}
+</div>

package/ui/radioButton/src/radio-button.component.scss

@@ -0,0 +1,17 @@
+label.disabled {
+	opacity: 0.6;
+	color: rgba(0, 0, 0, 0.6);
+	cursor: not-allowed;
+	transition:
+		opacity 0.15s ease,
+		color 0.15s ease;
+	pointer-events: none;
+}
+
+.option-disabled {
+	pointer-events: none;
+}
+
+.option-disabled .option-radio {
+	opacity: 1;
+}

package/ui/radioButton/src/radio-button.component.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Signal, computed, input, signal } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { BaseInputComponent, InputErrorMessagePipe, ValueAccessorDirective } from 'aril/ui/lib';
+
+type Aligns = 'horizontal' | 'vertical';
+interface RadioButtonOption {
+	key: any;
+	label: string;
+	disabled?: boolean;
+	ngControl?: any;
+}
+
+@Component({
+	standalone: true,
+	selector: 'aril-radio-button[ngModel], aril-radio-button[formControl], aril-radio-button[formControlName]',
+	templateUrl: './radio-button.component.html',
+	imports: [ReactiveFormsModule, RadioButtonModule, TooltipModule, InputErrorMessagePipe],
+	hostDirectives: [ValueAccessorDirective],
+	styleUrls: ['./radio-button.component.scss']
+})
+export class RadioButtonComponent extends BaseInputComponent {
+	constructor() {
+		super();
+		this._pAlign = computed(() => (this.align() == 'horizontal' ? 'flex flex-wrap gap-3' : 'flex flex-column'));
+		this._cAlign = computed(() => (this.align() == 'horizontal' ? 'flex align-items-center' : 'field-checkbox'));
+	}
+
+	options = input.required<RadioButtonOption[]>();
+	tabindex = input<number>();
+	align = input<Aligns>('horizontal');
+
+	_pAlign: Signal<string> = signal('flex flex-wrap gap-3');
+	_cAlign: Signal<string> = signal('flex align-items-center');
+}

package/ui/relativeDateSelector/index.ts

@@ -0,0 +1 @@
+export * from './src/relative-date-selector.component'; 

package/ui/relativeDateSelector/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/ui/relativeDateSelector/src/enum.ts

@@ -0,0 +1,29 @@
+export enum RelativeDateUnit {
+	Seconds = 's',
+	Minutes = 'm',
+	Hours = 'h',
+	Days = 'd',
+	Weeks = 'w',
+	Months = 'M',
+	Years = 'y'
+}
+
+export enum RelativeDateDirection {
+	Past = '-',
+	Future = '+'
+}
+
+export enum RelativeDateUnitName {
+	Seconds = 'seconds',
+	Minutes = 'minutes',
+	Hours = 'hours',
+	Days = 'days',
+	Weeks = 'weeks',
+	Months = 'months',
+	Years = 'years'
+}
+
+export enum RelativeDateUnitSuffix {
+	Ago = 'Ago',
+	FromNow = 'FromNow'
+}

package/ui/relativeDateSelector/src/relative-date-selector.component.html

@@ -0,0 +1,118 @@
+<div class="relative-date-selector">
+	<div class="input-wrapper flex align-items-center" (click)="onInputClick($event)">
+		<input
+			type="text"
+			readonly
+			[value]="getDisplayValue()"
+			class="p-inputtext p-component"
+			[class.p-invalid]="ngControl.invalid && ngControl.touched"
+			[placeholder]="translocoService.translate('relativeDateSelector.placeholder')"
+			[pTooltip]="ngControl.invalid && ngControl.touched ? (ngControl.control.value | inputErrorMessage: ngControl) : ''"
+			[tooltipOptions]="tooltipOptions" />
+		<div class="calendar-icon-wrapper flex align-items-center justify-content-center" (click)="toggleQuickSelect($event)">
+			<i class="pi pi-calendar calendar-icon"></i>
+		</div>
+	</div>
+
+	<p-overlayPanel
+		#op
+		[style]="{ minWidth: '350px', maxHeight: '600px', overflow: 'visible' }"
+		[dismissable]="true"
+		(onHide)="showOverlayPanel.set(false)">
+		<p-tabView (onChange)="onTabChange($event)" [activeIndex]="activeTabIndex()">
+			<p-tabPanel [header]="translocoService.translate('relativeDateSelector.absolute')">
+				<div class="flex justify-content-center">
+					<aril-calendar
+						[(ngModel)]="absoluteDate"
+						(ngModelChange)="onAbsoluteDateChange($event)"
+						[inline]="true"
+						[showTime]="true"
+						[showSeconds]="true">
+					</aril-calendar>
+				</div>
+			</p-tabPanel>
+
+			<p-tabPanel [header]="translocoService.translate('relativeDateSelector.relative')">
+				<div>
+					<div class="flex flex-column gap-2 m-2">
+						<aril-number
+							[(ngModel)]="relativeValue"
+							(ngModelChange)="onRelativeChange()"
+							[min]="1"
+							[showButtons]="true"
+							[placeholder]="translocoService.translate('relativeDateSelector.valuePlaceholder')">
+						</aril-number>
+
+						<aril-select-box
+							[(ngModel)]="relativeUnit"
+							(ngModelChange)="onRelativeChange()"
+							[items]="relativeUnits"
+							[itemKey]="'value'"
+							[itemText]="'label'"
+							[placeholder]="translocoService.translate('relativeDateSelector.selectUnit')">
+						</aril-select-box>
+					</div>
+
+					<div class="m-2">
+						<small class="text-muted">
+							<strong>{{ translocoService.translate('relativeDateSelector.examples') }}:</strong> {{ translocoService.translate('relativeDateSelector.examplesText') }}
+						</small>
+					</div>
+				</div>
+			</p-tabPanel>
+		</p-tabView>
+	</p-overlayPanel>
+
+	<!-- Quick Select Panel -->
+	@if (showQuickSelect()) {
+		<div class="quick-select-panel mt-2">
+			<div class="quick-select-header flex justify-content-between align-items-center p-3">
+				<span class="title">{{ translocoService.translate('relativeDateSelector.quickSelect') }}</span>
+				<div class="flex align-items-center gap-2">
+					<i class="pi pi-times cursor-pointer" (click)="showQuickSelect.set(false)"></i>
+				</div>
+			</div>
+			<div class="quick-select-body p-3">
+				<!-- Custom Quick Select Inputs -->
+				<div class="quick-select-custom mb-3 pb-3">
+					<div class="flex gap-2 align-items-center mb-3">
+						<aril-select-box
+							[(ngModel)]="quickSelectDirection"
+							[items]="quickSelectDirections"
+							[itemKey]="'value'"
+							[itemText]="'label'">
+						</aril-select-box>
+
+						<aril-number [(ngModel)]="quickSelectValue" [min]="1" [showButtons]="true"> </aril-number>
+
+						<aril-select-box
+							[(ngModel)]="quickSelectUnit"
+							[items]="quickSelectUnits"
+							[itemKey]="'value'"
+							[itemText]="'label'">
+						</aril-select-box>
+
+						<aril-button
+							[label]="translocoService.translate('relativeDateSelector.apply')"
+							color="primary"
+							(clickEvent)="applyQuickSelectCustom()"
+							[style]="{ 'min-width': '80px' }">
+						</aril-button>
+					</div>
+				</div>
+
+				<!-- Commonly Used Options -->
+				<div class="quick-select-section">
+					<span class="title-section mb-2">{{ translocoService.translate('relativeDateSelector.commonlyUsed') }}</span>
+					<div class="quick-select-options">
+						@for (option of commonlyUsedOptions; track option.value) {
+							<button type="button" class="quick-select-option" (click)="applyQuickSelect(option)">
+								{{ option.label }}
+							</button>
+						}
+					</div>
+				</div>
+			</div>
+		</div>
+	}
+</div>

package/ui/relativeDateSelector/src/relative-date-selector.component.scss

@@ -0,0 +1,154 @@
+.relative-date-selector {
+	position: relative;
+
+	.input-wrapper {
+		position: relative;
+		cursor: pointer;
+
+		input {
+			width: 100%;
+			padding-right: 3rem;
+			cursor: pointer;
+			transition: all var(--transition-duration) ease;
+
+			&:hover {
+				border-color: var(--focus-border-color);
+			}
+
+			&:focus {
+				box-shadow: var(--focus-ring);
+				border-color: var(--focus-border-color);
+			}
+
+			&.p-invalid {
+				border-color:  var(--error-300);
+			}
+		}
+
+		.calendar-icon-wrapper {
+			position: absolute;
+			right: 0.5rem;
+			width: 2rem;
+			height: 2rem;
+			background: var(--surface-100);
+			border: 1px solid var(--surface-border);
+			border-radius: var(--border-radius);
+			cursor: pointer;
+			transition: all var(--transition-duration) ease;
+			z-index: 2;
+
+			&:hover {
+				background: var(--surface-200);
+				border-color: var(--primary-color);
+				transform: scale(1.05);
+
+				.calendar-icon {
+					color: var(--primary-color);
+				}
+			}
+
+			&:active {
+				transform: scale(0.98);
+			}
+
+			.calendar-icon {
+				font-size: 0.9375rem;
+				color: var(--text-color-secondary);
+				transition: color var(--transition-duration) ease;
+			}
+		}
+	}
+
+	.quick-select-panel {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		background: var(--surface-0);
+		border: 1px solid var(--surface-border);
+		border-radius: 8px;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+		z-index: 1000;
+		width: 460px;
+		max-height: 520px;
+		overflow: hidden;
+		animation: slideDown var(--transition-duration) ease;
+
+		@keyframes slideDown {
+			from {
+				opacity: 0;
+				transform: translateY(-10px);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+
+		.quick-select-header {
+			border-bottom: 1px solid var(--surface-200);
+			background: var(--surface-100);
+
+			.title {
+				margin: 0;
+				font-size: 13px;
+				font-weight: 700;
+				color: var(--surface-600);
+			}
+
+			i {
+				cursor: pointer;
+				color: var(--text-color-secondary);
+				font-size: 0.875rem;
+				transition: all var(--transition-duration) ease;
+
+				&:hover {
+					color: var(--text-color);
+					transform: scale(1.1);
+				}
+			}
+		}
+
+		.quick-select-body {
+			max-height: 440px;
+			overflow-y: auto;
+		}
+
+		.quick-select-custom {
+			border-bottom: 1px solid var(--surface-200);
+		}
+
+		.quick-select-section {
+			.title-section {
+				display: inline-block;
+				font-size: 0.8rem;
+				font-weight: 600;
+				color: var(--text-color-secondary);
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+		}
+
+		.quick-select-options {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 0.5rem;
+
+			.quick-select-option {
+				padding: 0.625rem 1rem;
+				background: var(--surface-100);
+				border: 1px solid var(--surface-200);
+				text-align: left;
+				cursor: pointer;
+				border-radius: var(--border-radius);
+				transition: all var(--transition-duration) ease;
+				color: var(--text-color);
+				font-size: 0.875rem;
+				font-weight: 500;
+
+				&:hover {
+					transform: translateY(-1px);
+				}
+			}
+		}
+	}
+}