docs: more stackblitz examples

apps/web/src/app/docs/xui-components/layout/layout.component.html

@@ -4,12 +4,6 @@
   <code apiReference highlight="import { XuiLayoutModule } from '@xui/components';" language="typescript"></code>
 </app-information>
 
-<app-example>
-  <xui-layout>
-    <xui-sider width="150px">Sider</xui-sider>
-    <xui-layout>
-      <xui-header>Header</xui-header>
-      <xui-content>Content</xui-content>
-    </xui-layout>
-  </xui-layout>
+<app-example [files]="example1">
+  <app-layout-example1></app-layout-example1>
 </app-example>

apps/web/src/app/docs/xui-components/layout/layout.component.scss

@@ -4,22 +4,3 @@
   grid-template-columns: 1fr 1fr;
   gap: 24px;
 }
-
-xui-layout {
-  height: 350px;
-}
-
-xui-sider {
-  background-color: indianred;
-  padding: 8px;
-}
-
-xui-header {
-  background-color: yellowgreen;
-  padding: 8px;
-}
-
-xui-content {
-  background-color: mediumpurple;
-  padding: 12px;
-}

apps/web/src/app/docs/xui-components/layout/layout.component.ts

@@ -1,14 +1,18 @@
 import { Component } from '@angular/core';
 import { Information } from '../../components/information';
-import { Example } from '../../components/example';
+import { Example, FileType } from '../../components/example';
 import { HighlightModule } from 'ngx-highlightjs';
-import { XuiLayoutModule } from '@xui/components';
+import { LayoutExample1Component } from '../../../../examples/layout-example1/layout-example1.component';
 
 @Component({
   standalone: true,
-  imports: [Information, Example, HighlightModule, XuiLayoutModule],
+  imports: [Information, Example, HighlightModule, LayoutExample1Component],
   selector: 'app-layout',
   templateUrl: './layout.component.html',
   styleUrls: ['./layout.component.scss']
 })
-export class LayoutComponent {}
+export class LayoutComponent {
+  readonly example1 = {
+    'layout-example1': FileType.Component
+  };
+}

apps/web/src/app/docs/xui-components/status/status.component.html

@@ -4,11 +4,6 @@
   <code apiReference highlight="import { XuiStatusComponent } from '@xui/components';" language="typescript"></code>
 </app-information>
 
-<app-example>
-  <div style="display: flex; gap: 12px">
-    <xui-status type="online"></xui-status>
-    <xui-status type="idle"></xui-status>
-    <xui-status type="dnd"></xui-status>
-    <xui-status type="offline"></xui-status>
-  </div>
+<app-example [files]="example1">
+  <app-status-example1></app-status-example1>
 </app-example>

apps/web/src/app/docs/xui-components/status/status.component.ts

@@ -1,14 +1,18 @@
 import { Component } from '@angular/core';
 import { Information } from '../../components/information';
-import { Example } from '../../components/example';
+import { Example, FileType } from '../../components/example';
 import { HighlightModule } from 'ngx-highlightjs';
-import { XuiStatus } from '@xui/components';
+import { StatusExample1Component } from '../../../../examples/status-example1/status-example1.component';
 
 @Component({
   standalone: true,
-  imports: [Information, Example, HighlightModule, XuiStatus],
+  imports: [Information, Example, HighlightModule, StatusExample1Component],
   selector: 'app-status',
   templateUrl: './status.component.html',
   styleUrls: ['./status.component.scss']
 })
-export class StatusComponent {}
+export class StatusComponent {
+  readonly example1 = {
+    'status-example1': FileType.Component
+  };
+}

apps/web/src/app/docs/xui-components/tabs/tabs.component.html

@@ -4,12 +4,6 @@
   <code apiReference highlight="import { XuiTabModule } from '@xui/components';" language="typescript"></code>
 </app-information>
 
-<app-example>
-  <xui-tab-group>
-    <xui-tab title="Tab 1" disabled>Tab 1 Content</xui-tab>
-    <xui-tab title="Tab 2">Tab 2 Content</xui-tab>
-    <xui-tab title="Tab 3">Tab 3 Content</xui-tab>
-    <xui-tab title="Tab 4" disabled>Tab 4 Content</xui-tab>
-    <xui-tab title="Tab 5">Tab 5 Content</xui-tab>
-  </xui-tab-group>
+<app-example [files]="example1">
+  <app-tabs-example1></app-tabs-example1>
 </app-example>

apps/web/src/app/docs/xui-components/tabs/tabs.component.ts

@@ -1,15 +1,18 @@
 import { Component } from '@angular/core';
 import { Information } from '../../components/information';
-import { Example } from '../../components/example';
+import { Example, FileType } from '../../components/example';
 import { HighlightModule } from 'ngx-highlightjs';
-import { XuiTabModule } from '@xui/components';
+import { TabsExample1Component } from '../../../../examples/tabs-example1/tabs-example1.component';
 
 @Component({
   standalone: true,
-  imports: [Information, Example, HighlightModule, XuiTabModule],
+  imports: [Information, Example, HighlightModule, TabsExample1Component],
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
   styleUrls: ['./tabs.component.scss']
-  // encapsulation: ViewEncapsulation.Emulated
 })
-export class TabsComponent {}
+export class TabsComponent {
+  readonly example1 = {
+    'tabs-example1': FileType.Component
+  };
+}

apps/web/src/app/docs/xui-components/tooltip/tooltip.component.html

@@ -4,9 +4,6 @@
   <code apiReference highlight="import { XuiTooltipModule } from '@xui/components';" language="typescript"></code>
 </app-information>
 
-<app-example>
-  <div class="background" xuiTooltip="examples.random_string">Element with a tooltip</div>
-  <xui-button type="raised" color="success" shine xuiTooltip="Such an awesome button!" xuiTooltipPosition="left">
-    Button with a tooltip
-  </xui-button>
+<app-example [files]="example1">
+  <app-tooltip-example1></app-tooltip-example1>
 </app-example>

apps/web/src/app/docs/xui-components/tooltip/tooltip.component.scss

@@ -1,18 +1,6 @@
-@use '@xui/theme-core';
-
 :host {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
 }
-
-.background {
-  display: grid;
-  place-items: center;
-  width: 300px;
-  height: 100px;
-
-  border-radius: 4px;
-  @include theme-core.fill(default, primary);
-}

apps/web/src/app/docs/xui-components/tooltip/tooltip.component.ts

@@ -1,14 +1,18 @@
 import { Component } from '@angular/core';
 import { Information } from '../../components/information';
-import { Example } from '../../components/example';
+import { Example, FileType } from '../../components/example';
 import { HighlightModule } from 'ngx-highlightjs';
-import { XuiButtonModule, XuiTooltipModule } from '@xui/components';
+import { TooltipExample1Component } from '../../../../examples/tooltip-example1/tooltip-example1.component';
 
 @Component({
   standalone: true,
-  imports: [Information, Example, HighlightModule, XuiButtonModule, XuiTooltipModule],
+  imports: [Information, Example, HighlightModule, TooltipExample1Component],
   selector: 'app-tooltip',
   templateUrl: './tooltip.component.html',
   styleUrls: ['./tooltip.component.scss']
 })
-export class TooltipComponent {}
+export class TooltipComponent {
+  readonly example1 = {
+    'tooltip-example1': FileType.Component
+  };
+}

apps/web/src/examples/image-upload-example1/image-upload-example1.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { XuiImageUploadModule } from '@xui/components';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 

apps/web/src/examples/image-upload-example2/image-upload-example2.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { XuiImageUploadModule } from '@xui/components';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 

apps/web/src/examples/layout-example1/layout-example1.component.html

@@ -0,0 +1,7 @@
+<xui-layout>
+  <xui-sider width="150px">Sider</xui-sider>
+  <xui-layout>
+    <xui-header>Header</xui-header>
+    <xui-content>Content</xui-content>
+  </xui-layout>
+</xui-layout>

apps/web/src/examples/layout-example1/layout-example1.component.scss

@@ -0,0 +1,18 @@
+xui-layout {
+  height: 350px;
+}
+
+xui-sider {
+  background-color: indianred;
+  padding: 8px;
+}
+
+xui-header {
+  background-color: yellowgreen;
+  padding: 8px;
+}
+
+xui-content {
+  background-color: mediumpurple;
+  padding: 12px;
+}

apps/web/src/examples/layout-example1/layout-example1.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XuiLayoutModule } from '@xui/components';
+
+@Component({
+  selector: 'app-layout-example1',
+  standalone: true,
+  imports: [XuiLayoutModule],
+  templateUrl: './layout-example1.component.html',
+  styleUrl: './layout-example1.component.scss'
+})
+export class LayoutExample1Component {}

apps/web/src/examples/status-example1/status-example1.component.html

@@ -0,0 +1,6 @@
+<div style="display: flex; gap: 12px">
+  <xui-status type="online"></xui-status>
+  <xui-status type="idle"></xui-status>
+  <xui-status type="dnd"></xui-status>
+  <xui-status type="offline"></xui-status>
+</div>

apps/web/src/examples/status-example1/status-example1.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XuiStatus } from '@xui/components';
+
+@Component({
+  selector: 'app-status-example1',
+  standalone: true,
+  imports: [XuiStatus],
+  templateUrl: './status-example1.component.html',
+  styleUrl: './status-example1.component.scss'
+})
+export class StatusExample1Component {}

apps/web/src/examples/tabs-example1/tabs-example1.component.html

@@ -0,0 +1,7 @@
+<xui-tab-group>
+  <xui-tab title="Tab 1" disabled>Tab 1 Content</xui-tab>
+  <xui-tab title="Tab 2">Tab 2 Content</xui-tab>
+  <xui-tab title="Tab 3">Tab 3 Content</xui-tab>
+  <xui-tab title="Tab 4" disabled>Tab 4 Content</xui-tab>
+  <xui-tab title="Tab 5">Tab 5 Content</xui-tab>
+</xui-tab-group>

apps/web/src/examples/tabs-example1/tabs-example1.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XuiTabModule } from '@xui/components';
+
+@Component({
+  selector: 'app-tabs-example1',
+  standalone: true,
+  imports: [XuiTabModule],
+  templateUrl: './tabs-example1.component.html',
+  styleUrl: './tabs-example1.component.scss'
+})
+export class TabsExample1Component {}

apps/web/src/examples/tooltip-example1/tooltip-example1.component.html

@@ -0,0 +1,4 @@
+<div class="background" xuiTooltip="examples.random_string">Element with a tooltip</div>
+<xui-button type="raised" color="success" shine xuiTooltip="Such an awesome button!" xuiTooltipPosition="left">
+  Button with a tooltip
+</xui-button>

apps/web/src/examples/tooltip-example1/tooltip-example1.component.scss

@@ -0,0 +1,17 @@
+@use '@xui/theme-core';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.background {
+  display: grid;
+  place-items: center;
+  width: 300px;
+  height: 100px;
+
+  border-radius: 4px;
+  @include theme-core.fill(default, primary);
+}

apps/web/src/examples/tooltip-example1/tooltip-example1.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XuiButtonModule, XuiTooltipModule } from '@xui/components';
+
+@Component({
+  selector: 'app-tooltip-example1',
+  standalone: true,
+  imports: [XuiButtonModule, XuiTooltipModule],
+  templateUrl: './tooltip-example1.component.html',
+  styleUrl: './tooltip-example1.component.scss'
+})
+export class TooltipExample1Component {}