@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
203 lines (196 loc) • 11.2 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component, output, viewChild, model, effect } from '@angular/core';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';
import { matCloseOutline } from '@sixbell-telco/sdk/components/icon/material/outline';
import { cva } from 'class-variance-authority';
class ModalActionsComponent {
// Base table properties
alignment = input('left');
componentClass = computed(() => cn('modal-action', {
'justify-start': this.alignment() === 'left',
'justify-end': this.alignment() === 'right',
'justify-center': this.alignment() === 'center',
}));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ModalActionsComponent, isStandalone: true, selector: "st-modal-actions", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'st-modal-actions', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n" }]
}] });
class ModalContentComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ModalContentComponent, isStandalone: true, selector: "st-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalContentComponent, decorators: [{
type: Component,
args: [{ selector: 'st-modal-content', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
}] });
class ModalTitleComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ModalTitleComponent, isStandalone: true, selector: "st-modal-title", ngImport: i0, template: "<div class=\"mb-6\">\n\t<h2 typography tyFontWeight=\"medium\" tyColor=\"base\" tyVariant=\"h2\">\n\t\t<ng-content></ng-content>\n\t</h2>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TypographyDirective, selector: "[typography]", inputs: ["tyVariant", "tyColor", "tyFontWeight", "tyTextOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalTitleComponent, decorators: [{
type: Component,
args: [{ selector: 'st-modal-title', imports: [CommonModule, TypographyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-6\">\n\t<h2 typography tyFontWeight=\"medium\" tyColor=\"base\" tyVariant=\"h2\">\n\t\t<ng-content></ng-content>\n\t</h2>\n</div>\n" }]
}] });
/**
* CSS class generator for modal component variants
* @internal
*/
const modalComponent = cva(['modal-box', 'bg-base-200', 'p-6', 'text-base-content', 'w-11/12'], {
variants: {
width: {
xs: ['max-w-xs'],
sm: ['max-w-sm'],
md: ['max-w-md'],
lg: ['max-w-lg'],
xl: ['max-w-xl'],
'2xl': ['max-w-2xl'],
'3xl': ['max-w-3xl'],
'4xl': ['max-w-4xl'],
'5xl': ['max-w-5xl'],
},
aligment: {
top: ['modal-top'],
center: ['modal-middle'],
bottom: ['modal-bottom'],
start: ['modal-start'],
end: ['modal-end'],
},
},
compoundVariants: [],
defaultVariants: {
width: 'md',
aligment: 'center',
},
});
/**
* A customizable modal dialog component with Tailwind CSS integration
*
* @remarks
* Uses Angular's signal-based inputs and outputs for reactive state management.
* Supports various sizes and vertical alignments through input properties.
*
* @example
* ```html
* <st-modal
* modalId="confirmDialog"
* [(opened)]="isOpen"
* width="lg"
* alignment="top"
* (close)="handleClose()"
* (clickOutside)="handleClickOustide()"
* />
* ```
*/
class ModalComponent {
/**
* Specifies the maximum width of the modal content
* @defaultValue 'md'
*/
width = input();
/**
* Controls the vertical positioning of the modal
* @defaultValue 'center'
*/
alignment = input('center');
/** Required unique identifier for the modal dialog */
modalId = input.required();
/** Event emitted when clicking outside the modal content */
clickOutside = output();
/** Event emitted when the modal closes */
closed = output();
/** @internal Icon reference for close button */
iconClose = matCloseOutline;
/** @internal Reference to the underlying dialog element */
dialog = viewChild('dialog');
/**
* Controls the visibility state of the modal
* Supports two-way binding via Angular's model
*/
opened = model(false);
/** @internal Handles open/close state changes */
openedEffect = effect(() => {
if (this.opened()) {
this.handleOpen();
}
else {
this.handleClose();
}
});
/**
* Computes CSS classes for modal content based on current configuration
* @returns Combined Tailwind classes string
* @internal
*/
componentClass = computed(() => {
return cn(modalComponent({
width: this.width(),
aligment: this.alignment(),
}));
});
/**
* Computes CSS classes for modal overlay positioning
* @returns Combined positioning classes string
* @internal
*/
modalClass = computed(() => {
return cn('modal', {
'modal-top': this.alignment() === 'top',
'modal-middle': this.alignment() === 'center',
'modal-bottom': this.alignment() === 'bottom',
'modal-start': this.alignment() === 'start',
'modal-end': this.alignment() === 'end',
});
});
/** @internal Opens the native dialog element */
handleOpen() {
this.dialog()?.nativeElement.showModal();
}
/** @internal Closes the native dialog element */
handleClose() {
this.dialog()?.nativeElement.close();
}
/**
* Public method to close the modal and emit close event
* Can be called directly from parent components
*/
handleCloseClick() {
this.opened.set(false);
this.closed.emit();
}
/**
* Handles cancel events from the dialog element
* @param event - Native dialog cancel event
* @internal
*/
handleCancelClick(event) {
event.preventDefault();
this.opened.set(false);
this.closed.emit();
}
/**
* Handles click events outside the modal content
* @param event - Native mouse event
* @internal
*/
handleClickOutside(event) {
event.preventDefault();
this.opened.set(false);
this.clickOutside.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.0", type: ModalComponent, isStandalone: true, selector: "st-modal", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, modalId: { classPropertyName: "modalId", publicName: "modalId", isSignal: true, isRequired: true, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOutside: "clickOutside", closed: "closed", opened: "openedChange" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/elements-content -->\n<dialog #dialog [id]=\"modalId()\" [class]=\"modalClass()\" (cancel)=\"handleCancelClick($event)\">\n\t<div [class]=\"componentClass()\">\n\t\t<div class=\"absolute top-2 right-2\">\n\t\t\t<button class=\"btn btn-circle btn-ghost btn-sm absolute top-0 right-0\" (click)=\"handleCloseClick()\">\u2715</button>\n\t\t</div>\n\t\t<ng-content select=\"st-modal-title\"></ng-content>\n\t\t<ng-content select=\"st-modal-content\"></ng-content>\n\t\t<ng-content select=\"st-modal-actions\"></ng-content>\n\t</div>\n\t<form method=\"dialog\" class=\"modal-backdrop\">\n\t\t<button (click)=\"handleClickOutside($event)\"></button>\n\t</form>\n</dialog>\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'st-modal', imports: [], template: "<!-- eslint-disable @angular-eslint/template/elements-content -->\n<dialog #dialog [id]=\"modalId()\" [class]=\"modalClass()\" (cancel)=\"handleCancelClick($event)\">\n\t<div [class]=\"componentClass()\">\n\t\t<div class=\"absolute top-2 right-2\">\n\t\t\t<button class=\"btn btn-circle btn-ghost btn-sm absolute top-0 right-0\" (click)=\"handleCloseClick()\">\u2715</button>\n\t\t</div>\n\t\t<ng-content select=\"st-modal-title\"></ng-content>\n\t\t<ng-content select=\"st-modal-content\"></ng-content>\n\t\t<ng-content select=\"st-modal-actions\"></ng-content>\n\t</div>\n\t<form method=\"dialog\" class=\"modal-backdrop\">\n\t\t<button (click)=\"handleClickOutside($event)\"></button>\n\t</form>\n</dialog>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ModalActionsComponent, ModalComponent, ModalContentComponent, ModalTitleComponent, modalComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-modal.mjs.map