0b33a4561e
Angular library providing dashboard components including grid layout, drag-and-drop widgets, resize handles, toolbar, config panel, layout presets, and persistence services.
58 lines
3.4 KiB
TypeScript
58 lines
3.4 KiB
TypeScript
import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { TooltipDirective } from '@sda/base-ui';
|
|
import type { DbLayoutPreset } from '../../types/dashboard.types';
|
|
|
|
interface PresetOption {
|
|
preset: DbLayoutPreset;
|
|
label: string;
|
|
svg: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'db-layout-preset-picker',
|
|
standalone: true,
|
|
imports: [CommonModule, TooltipDirective],
|
|
templateUrl: './db-layout-preset-picker.component.html',
|
|
styleUrl: './db-layout-preset-picker.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
host: { 'class': 'db-layout-preset-picker' },
|
|
})
|
|
export class DbLayoutPresetPickerComponent {
|
|
readonly selected = input<DbLayoutPreset>('custom');
|
|
readonly presetSelect = output<DbLayoutPreset>();
|
|
|
|
protected readonly presets: PresetOption[] = [
|
|
{
|
|
preset: 'single',
|
|
label: 'Single',
|
|
svg: `<rect x="2" y="2" width="36" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
|
|
},
|
|
{
|
|
preset: 'two-column',
|
|
label: 'Two Column',
|
|
svg: `<rect x="2" y="2" width="16" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="22" y="2" width="16" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
|
|
},
|
|
{
|
|
preset: 'sidebar-main',
|
|
label: 'Sidebar + Main',
|
|
svg: `<rect x="2" y="2" width="10" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="16" y="2" width="22" height="26" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
|
|
},
|
|
{
|
|
preset: 'four-grid',
|
|
label: 'Four Grid',
|
|
svg: `<rect x="2" y="2" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="22" y="2" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="2" y="17" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="22" y="17" width="16" height="11" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
|
|
},
|
|
{
|
|
preset: 'analytics',
|
|
label: 'Analytics',
|
|
svg: `<rect x="2" y="2" width="10" height="8" rx="1" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="15" y="2" width="10" height="8" rx="1" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="28" y="2" width="10" height="8" rx="1" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="2" y="14" width="22" height="14" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/><rect x="28" y="14" width="10" height="14" rx="2" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1"/>`,
|
|
},
|
|
{
|
|
preset: 'custom',
|
|
label: 'Custom',
|
|
svg: `<rect x="2" y="2" width="36" height="26" rx="2" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="3 2"/><line x1="14" y1="2" x2="14" y2="28" stroke="currentColor" stroke-width="0.5" opacity="0.3"/><line x1="26" y1="2" x2="26" y2="28" stroke="currentColor" stroke-width="0.5" opacity="0.3"/><line x1="2" y1="15" x2="38" y2="15" stroke="currentColor" stroke-width="0.5" opacity="0.3"/>`,
|
|
},
|
|
];
|
|
}
|