import { Component, AfterViewInit, OnInit, ViewChild } from'@angular/core';

import {Component} from '@angular/core';
import {SplitterComponent, SplitterPaneComponent} from '@progress/kendo-angular-layout';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SplitterComponent, SplitterPaneComponent],
  template:
    `
      <div class="container" kendoWindowContainer>
        <main>
          <kendo-splitter style="height: 100%">
            <kendo-splitter-pane [collapsible]="true">
              <div class="pane-content" style="height: 500px">
                <h3>Inner splitter / left pane</h3>
                <p>Resizable and collapsible.</p>
              </div>
            </kendo-splitter-pane>

            <kendo-splitter-pane>
              <div class="pane-content" style="height: 700px">
                <h3>Inner splitter / center pane</h3>
                <p>Resizable only.</p>
              </div>
            </kendo-splitter-pane>

          </kendo-splitter>
        </main>
      </div>
    `,
  styles: `
    .pane-content {
      padding: 0 10px;
      border: black 1px solid;
      width: 600px;
    }

    h3 {
      font-size: 1.2em;
      margin: 10px 0;
      padding: 0;
    }

    p {
      margin: 0;
      padding: 0;
    }
  `
})
export class AppComponent {
  title = 'test-kendo-splitter';
}

import { Component, input, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenusModule } from '@progress/kendo-angular-menu';
import { ICON_SETTINGS, SVGIcon } from '@progress/kendo-angular-icons';

@Component({
  selector: 'mnp-menu-item',
  standalone: true,
  imports: [CommonModule, MenusModule],
  providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font', size: 'medium' } }],
  template: `
     <link
      rel="stylesheet"
      href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
    />

    <kendo-menu [items]="items"
    >
      <ng-template kendoMenuItemTemplate let-item="item" >
        <span  class='item'>
        <span class="icon-container">
          <ng-container *ngIf="item.icon; else noIcon">
            <span [ngClass]="item.icon" class="k-icon"></span>
          </ng-container>
          <ng-template #noIcon>
            <span class="k-icon empty-icon"></span>
          </ng-template>
        </span>
        {{ item.text }}
        </span>
      </ng-template>
    </kendo-menu>
  `,
    styleUrl: './menu-item.component.scss',
    

})
export class MenuItemComponent {
  @Input() items: MenuItem[] = [];
  @Input() vertical: boolean = false;

}

interface MenuItem {
  text?: string;
  url?: string;
  icon?: string;  // Dynamic icon field
  disabled?: boolean;
  separator?: boolean;
  svgIcon?: SVGIcon;
  cssClass?: string;
  items?: MenuItem[];
}