@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-modal.mjs.map

A collection of reusable components designed for use in Sixbell Telco Angular projects

{"version":3,"file":"sixbell-telco-sdk-components-modal.mjs","sources":["../../../projects/sdk/components/modal/modal-actions/modal-actions.component.ts","../../../projects/sdk/components/modal/modal-actions/modal-actions.component.html","../../../projects/sdk/components/modal/modal-content/modal-content.component.ts","../../../projects/sdk/components/modal/modal-content/modal-content.component.html","../../../projects/sdk/components/modal/modal-title/modal-title.component.ts","../../../projects/sdk/components/modal/modal-title/modal-title.component.html","../../../projects/sdk/components/modal/src/modal.component.ts","../../../projects/sdk/components/modal/src/modal.component.html","../../../projects/sdk/components/modal/sixbell-telco-sdk-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\n\nexport type ModalActionsAligmentProps = 'left' | 'right' | 'center';\n\n@Component({\n\tselector: 'st-modal-actions',\n\timports: [CommonModule],\n\ttemplateUrl: './modal-actions.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ModalActionsComponent {\n\t// Base table properties\n\talignment = input<ModalActionsAligmentProps>('left');\n\n\tcomponentClass = computed(() =>\n\t\tcn('modal-action', {\n\t\t\t'justify-start': this.alignment() === 'left',\n\t\t\t'justify-end': this.alignment() === 'right',\n\t\t\t'justify-center': this.alignment() === 'center',\n\t\t}),\n\t);\n}\n","<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n\n    selector: 'st-modal-content',\n    imports: [CommonModule],\n    templateUrl: './modal-content.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ModalContentComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';\n\n@Component({\n\n    selector: 'st-modal-title',\n    imports: [CommonModule, TypographyDirective],\n    templateUrl: './modal-title.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ModalTitleComponent {}\n","<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","import { Component, computed, effect, ElementRef, input, model, output, viewChild } from '@angular/core';\nimport { matCloseOutline } from '@sixbell-telco/sdk/components/icon/material/outline';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { cva } from 'class-variance-authority';\n\n/**\n * CSS class generator for modal component variants\n * @internal\n */\nexport const modalComponent = cva(['modal-box', 'bg-base-200', 'p-6', 'text-base-content', 'w-11/12'], {\n\tvariants: {\n\t\twidth: {\n\t\t\txs: ['max-w-xs'],\n\t\t\tsm: ['max-w-sm'],\n\t\t\tmd: ['max-w-md'],\n\t\t\tlg: ['max-w-lg'],\n\t\t\txl: ['max-w-xl'],\n\t\t\t'2xl': ['max-w-2xl'],\n\t\t\t'3xl': ['max-w-3xl'],\n\t\t\t'4xl': ['max-w-4xl'],\n\t\t\t'5xl': ['max-w-5xl'],\n\t\t},\n\t\taligment: {\n\t\t\ttop: ['modal-top'],\n\t\t\tcenter: ['modal-middle'],\n\t\t\tbottom: ['modal-bottom'],\n\t\t\tstart: ['modal-start'],\n\t\t\tend: ['modal-end'],\n\t\t},\n\t},\n\tcompoundVariants: [],\n\tdefaultVariants: {\n\t\twidth: 'md',\n\t\taligment: 'center',\n\t},\n});\n\n/** Possible width values for the modal component */\nexport type ModalWidthProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | null | undefined;\n\n/** Possible vertical alignment values for the modal component */\nexport type ModalAlignmentProps = 'top' | 'center' | 'bottom' | 'start' | 'end' | null | undefined;\n\n/** Configuration properties for the modal component */\nexport type ModalProps = {\n\twidth?: ModalWidthProps;\n\talignment?: ModalAlignmentProps;\n};\n\n/**\n * A customizable modal dialog component with Tailwind CSS integration\n *\n * @remarks\n * Uses Angular's signal-based inputs and outputs for reactive state management.\n * Supports various sizes and vertical alignments through input properties.\n *\n * @example\n * ```html\n * <st-modal\n *   modalId=\"confirmDialog\"\n *   [(opened)]=\"isOpen\"\n *   width=\"lg\"\n *   alignment=\"top\"\n *   (close)=\"handleClose()\"\n *   (clickOutside)=\"handleClickOustide()\"\n * />\n * ```\n */\n@Component({\n\tselector: 'st-modal',\n\timports: [],\n\ttemplateUrl: './modal.component.html',\n\tstyles: '',\n})\nexport class ModalComponent {\n\t/**\n\t * Specifies the maximum width of the modal content\n\t * @defaultValue 'md'\n\t */\n\twidth = input<ModalWidthProps>();\n\n\t/**\n\t * Controls the vertical positioning of the modal\n\t * @defaultValue 'center'\n\t */\n\talignment = input<ModalAlignmentProps>('center');\n\n\t/** Required unique identifier for the modal dialog */\n\tmodalId = input.required<string>();\n\n\t/** Event emitted when clicking outside the modal content */\n\tclickOutside = output<void>();\n\n\t/** Event emitted when the modal closes */\n\tclosed = output<void>();\n\n\t/** @internal Icon reference for close button */\n\ticonClose = matCloseOutline;\n\n\t/** @internal Reference to the underlying dialog element */\n\tdialog = viewChild<ElementRef<HTMLDialogElement>>('dialog');\n\n\t/**\n\t * Controls the visibility state of the modal\n\t * Supports two-way binding via Angular's model\n\t */\n\topened = model<boolean>(false);\n\n\t/** @internal Handles open/close state changes */\n\topenedEffect = effect(() => {\n\t\tif (this.opened()) {\n\t\t\tthis.handleOpen();\n\t\t} else {\n\t\t\tthis.handleClose();\n\t\t}\n\t});\n\n\t/**\n\t * Computes CSS classes for modal content based on current configuration\n\t * @returns Combined Tailwind classes string\n\t * @internal\n\t */\n\tcomponentClass = computed(() => {\n\t\treturn cn(\n\t\t\tmodalComponent({\n\t\t\t\twidth: this.width(),\n\t\t\t\taligment: this.alignment(),\n\t\t\t}),\n\t\t);\n\t});\n\n\t/**\n\t * Computes CSS classes for modal overlay positioning\n\t * @returns Combined positioning classes string\n\t * @internal\n\t */\n\tmodalClass = computed(() => {\n\t\treturn cn('modal', {\n\t\t\t'modal-top': this.alignment() === 'top',\n\t\t\t'modal-middle': this.alignment() === 'center',\n\t\t\t'modal-bottom': this.alignment() === 'bottom',\n\t\t\t'modal-start': this.alignment() === 'start',\n\t\t\t'modal-end': this.alignment() === 'end',\n\t\t});\n\t});\n\n\t/** @internal Opens the native dialog element */\n\thandleOpen() {\n\t\tthis.dialog()?.nativeElement.showModal();\n\t}\n\n\t/** @internal Closes the native dialog element */\n\thandleClose() {\n\t\tthis.dialog()?.nativeElement.close();\n\t}\n\n\t/**\n\t * Public method to close the modal and emit close event\n\t * Can be called directly from parent components\n\t */\n\thandleCloseClick() {\n\t\tthis.opened.set(false);\n\t\tthis.closed.emit();\n\t}\n\n\t/**\n\t * Handles cancel events from the dialog element\n\t * @param event - Native dialog cancel event\n\t * @internal\n\t */\n\thandleCancelClick(event: Event) {\n\t\tevent.preventDefault();\n\t\tthis.opened.set(false);\n\t\tthis.closed.emit();\n\t}\n\n\t/**\n\t * Handles click events outside the modal content\n\t * @param event - Native mouse event\n\t * @internal\n\t */\n\thandleClickOutside(event: Event) {\n\t\tevent.preventDefault();\n\t\tthis.opened.set(false);\n\t\tthis.clickOutside.emit();\n\t}\n}\n","<!-- 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()\">✕</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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}