x-on:click.self="
document.activeElement.selectionStart === undefined &&
document.activeElement.selectionEnd === undefined &&
"
class([
'relative grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center sm:grid-rows-[1fr_auto_3fr]',
'p-4' => ! ($slideOver || ($width === MaxWidth::Screen)),
])); ?>
>
x-on:keydown.window.escape=""
x-show="isShown"
x-transition:enter="duration-300"
x-transition:leave="duration-300"
x-transition:enter-start="translate-x-full rtl:-translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full rtl:-translate-x-full"
x-transition:enter-start="scale-95 opacity-0"
x-transition:enter-end="scale-100 opacity-100"
x-transition:leave-start="scale-100 opacity-100"
x-transition:leave-end="scale-95 opacity-0"
wire:key="getId()}." : ''); ?>modal..window"
class([
'fi-modal-window pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
'fi-modal-slide-over-window ms-auto overflow-y-auto' => $slideOver,
// Using an arbitrary value instead of the h-dvh class that was added in Tailwind CSS v3.4.0
// to ensure compatibility with custom themes that may use an older version of Tailwind CSS.
'h-[100dvh]' => $slideOver || ($width === MaxWidth::Screen),
'mx-auto rounded-xl' => ! ($slideOver || ($width === MaxWidth::Screen)),
'hidden' => ! $visible,
match ($width) {
MaxWidth::ExtraSmall => 'max-w-xs',
MaxWidth::Small => 'max-w-sm',
MaxWidth::Medium => 'max-w-md',
MaxWidth::Large => 'max-w-lg',
MaxWidth::ExtraLarge => 'max-w-xl',
MaxWidth::TwoExtraLarge => 'max-w-2xl',
MaxWidth::ThreeExtraLarge => 'max-w-3xl',
MaxWidth::FourExtraLarge => 'max-w-4xl',
MaxWidth::FiveExtraLarge => 'max-w-5xl',
MaxWidth::SixExtraLarge => 'max-w-6xl',
MaxWidth::SevenExtraLarge => 'max-w-7xl',
MaxWidth::Full => 'max-w-full',
MaxWidth::MinContent => 'max-w-min',
MaxWidth::MaxContent => 'max-w-max',
MaxWidth::FitContent => 'max-w-fit',
MaxWidth::Prose => 'max-w-prose',
MaxWidth::ScreenSmall => 'max-w-screen-sm',
MaxWidth::ScreenMedium => 'max-w-screen-md',
MaxWidth::ScreenLarge => 'max-w-screen-lg',
MaxWidth::ScreenExtraLarge => 'max-w-screen-xl',
MaxWidth::ScreenTwoExtraLarge => 'max-w-screen-2xl',
MaxWidth::Screen => 'fixed inset-0',
default => $width,
},
])); ?>
>
wire:key="getId()}." : ''); ?>modal..header"
class=" (! $hasSlot) && (! $hasFooter),
'fi-sticky sticky top-0 z-10 border-b border-gray-200 bg-white pb-6 dark:border-white/10 dark:bg-gray-900' => $stickyHeader,
'rounded-t-xl' => $stickyHeader && ! ($slideOver || ($width === MaxWidth::Screen)),
match ($alignment) {
Alignment::Start, Alignment::Left => 'gap-x-5',
Alignment::Center => 'flex-col',
default => null,
},
'items-center' => $hasIcon && $hasHeading && (! $hasDescription) && in_array($alignment, [Alignment::Start, Alignment::Left]),
]); ?>"
>
'filament::components.icon-button','data' => ['color' => 'gray','icon' => 'heroicon-o-x-mark','iconAlias' => 'modal.close-button','iconSize' => 'lg','label' => __('filament::components/modal.actions.close.label'),'tabindex' => '-1','xOn:click' => $closeEventHandler,'class' => 'fi-modal-close-btn']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('filament::icon-button'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['color' => 'gray','icon' => 'heroicon-o-x-mark','icon-alias' => 'modal.close-button','icon-size' => 'lg','label' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(__('filament::components/modal.actions.close.label')),'tabindex' => '-1','x-on:click' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($closeEventHandler),'class' => 'fi-modal-close-btn']); ?>
renderComponent(); ?>
'p-2',
Alignment::Center => 'p-3',
default => null,
},
]); ?>"
style=" $iconColor !== 'gray',
]) ?>"
>
'filament::components.icon','data' => ['alias' => $iconAlias,'icon' => $icon,'class' => \Illuminate\Support\Arr::toCssClasses([
'fi-modal-icon h-6 w-6',
match ($iconColor) {
'gray' => 'text-gray-500 dark:text-gray-400',
default => 'text-custom-600 dark:text-custom-400',
},
])]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('filament::icon'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['alias' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($iconAlias),'icon' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($icon),'class' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(\Illuminate\Support\Arr::toCssClasses([
'fi-modal-icon h-6 w-6',
match ($iconColor) {
'gray' => 'text-gray-500 dark:text-gray-400',
default => 'text-custom-600 dark:text-custom-400',
},
]))]); ?>
renderComponent(); ?>
'filament::components.modal.heading','data' => ['class' => \Illuminate\Support\Arr::toCssClasses([
'me-6' => $closeButton && ((! $hasIcon) || in_array($alignment, [Alignment::Start, Alignment::Left])),
'ms-6' => $closeButton && (! $hasIcon) && ($alignment === Alignment::Center),
])]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('filament::modal.heading'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['class' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(\Illuminate\Support\Arr::toCssClasses([
'me-6' => $closeButton && ((! $hasIcon) || in_array($alignment, [Alignment::Start, Alignment::Left])),
'ms-6' => $closeButton && (! $hasIcon) && ($alignment === Alignment::Center),
]))]); ?>
renderComponent(); ?>
'filament::components.modal.description','data' => ['class' => 'mt-2']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
withName('filament::modal.description'); ?>
shouldRender()): ?>
startComponent($component->resolveView(), $component->data()); ?>
except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
withAttributes(['class' => 'mt-2']); ?>
renderComponent(); ?>
wire:key="getId()}." : ''); ?>modal..content"
class=" ($width === MaxWidth::Screen) || $slideOver,
'pe-6 ps-[5.25rem]' => $hasIcon && ($alignment === Alignment::Start) && (! $stickyHeader),
'px-6' => ! ($hasIcon && ($alignment === Alignment::Start) && (! $stickyHeader)),
]); ?>"
>
wire:key="getId()}." : ''); ?>modal..footer"
class=" $hasIcon && ($alignment === Alignment::Start) && ($footerActionsAlignment !== Alignment::Center) && (! $stickyFooter),
'px-6' => ! ($hasIcon && ($alignment === Alignment::Start) && ($footerActionsAlignment !== Alignment::Center) && (! $stickyFooter)),
'fi-sticky sticky bottom-0 border-t border-gray-200 bg-white py-5 dark:border-white/10 dark:bg-gray-900' => $stickyFooter,
'rounded-b-xl' => $stickyFooter && ! ($slideOver || ($width === MaxWidth::Screen)),
'pb-6' => ! $stickyFooter,
'mt-6' => (! $stickyFooter) && (! $hasSlot),
'mt-auto' => $slideOver,
]); ?>"
>