Feat/select

apps/angular-kits-doc/stories/ui-components/form-field/select/index.stories.ts

@@ -17,6 +17,10 @@ export { Default } from './overview/default.stories';
 export { Size } from './overview/size.stories';
 export { CustomPreview } from './overview/custom-preview.stories';
 export { OptionGroup } from './overview/option-group.stories';
+export { Type } from './overview/type.stories';
+export { Color } from './overview/color.stories';
+export { WithNgModel } from './overview/withngmodel.stories';
+export { ReactiveForm } from './overview/reactiveform.stories';
 
 const meta: StoriesMeta = {
   component: SelectComponent,

apps/angular-kits-doc/stories/ui-components/form-field/select/overview/color.stories.ts

@@ -0,0 +1,57 @@
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<SelectComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The color is adjustable to match the design language or emphasize the Select field in the form',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <% themeComponentConfig.color.values.map(color => { %>
+              <cck-form-field
+                <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+              >
+                <cck-label>Favorite food</cck-label>
+                <cck-select placeholder="Favorite food" color="<%= color %>">
+                  <cck-option value="Steak">Steak</cck-option>
+                  <cck-option value="Pizza">Pizza</cck-option>
+                  <cck-option value="Burger">Burger</cck-option>
+                </cck-select>
+              </cck-form-field>
+            <% }) %>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <cck-form-field>
+          <cck-label>Select - {{color}}</cck-label>
+          <cck-select placeholder="Favorite food" [color]="color" [type]="cckControl.type">
+            <cck-option value="Steak">Steak</cck-option>
+            <cck-option value="Pizza">Pizza</cck-option>
+            <cck-option value="Burger">Burger</cck-option>
+          </cck-select>
+        </cck-form-field>
+      }
+    `,
+  }),
+};

apps/angular-kits-doc/stories/ui-components/form-field/select/overview/default.stories.ts

@@ -57,7 +57,7 @@ export const Default: StoryObj<SelectComponent> = {
       ...args,
     },
     template: `
-       <cck-form-field style="width: 100%">
+       <cck-form-field>
         @if(cckControl.label) {
           <cck-label>{{cckControl.label}}</cck-label>
         }

apps/angular-kits-doc/stories/ui-components/form-field/select/overview/option-group.stories.ts

@@ -53,7 +53,7 @@ export const OptionGroup: StoryObj<SelectComponent> = {
       ...args,
     },
     template: `
-      <cck-form-field style="width: 100%">
+      <cck-form-field>
         <cck-label>Favorite Food</cck-label>
         <cck-select [multiple]="true" placeholder="Favorite Food">
           <cck-option-group label="Fast Foods">

apps/angular-kits-doc/stories/ui-components/form-field/select/overview/reactiveform.stories.ts

@@ -0,0 +1,65 @@
+import { moduleMetadata } from '@storybook/angular';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+
+export const ReactiveForm: StoryObj<SelectComponent> = {
+  name: 'With ReactiveForms',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Integration with Angular Reactive Forms using FormControl',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <cck-form-field>
+              <cck-label>Favorite food</cck-label>
+              <cck-select [formControl]="foodControl" placeholder="Pick one">
+                <cck-option value="Steak">Steak</cck-option>
+                <cck-option value="Pizza">Pizza</cck-option>
+                <cck-option value="Burger">Burger</cck-option>
+              </cck-select>
+            </cck-form-field>
+
+            <p>Selected: {{ foodControl.value }}</p>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  render: (args) => {
+    const foodControl = new FormControl('Pizza');
+
+    return {
+      props: {
+        foodControl,
+        ...args,
+      },
+      template: `
+        <cck-form-field>
+            <cck-label>Favorite food</cck-label>
+            <cck-select placeholder="Pick one" [formControl]="foodControl" [type]="cckControl.type">
+                <cck-option value="Steak">Steak</cck-option>
+                <cck-option value="Pizza">Pizza</cck-option>
+                <cck-option value="Burger">Burger</cck-option>
+            </cck-select>
+        </cck-form-field>
+        <p>Selected: {{ foodControl.value }}</p>
+        `,
+    };
+  },
+};

apps/angular-kits-doc/stories/ui-components/form-field/select/overview/size.stories.ts

@@ -21,7 +21,6 @@ export const Size: StoryObj<SelectComponent> = {
           code: `
             <% themeComponentConfig.size.values.map(size => { %>
 
-              <!-- <%= size %> -->
               <cck-form-field
                 size="<%= size %>"
                 <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
@@ -46,9 +45,9 @@ export const Size: StoryObj<SelectComponent> = {
     },
     template: `
       @for (size of cckControl.themeComponentConfig.size.values; let col = $index; track size) {
-        <cck-form-field style="width: 100%">
+        <cck-form-field [size]="size">
           <cck-label>Select - {{size}}</cck-label>
-          <cck-select placeholder="Favorite food" [size]="size" [type]="cckControl.type">
+          <cck-select placeholder="Favorite food"  [type]="cckControl.type">
             <cck-option value="Steak">Steak</cck-option>
             <cck-option value="Pizza">Pizza</cck-option>
             <cck-option value="Burger">Burger</cck-option>

apps/angular-kits-doc/stories/ui-components/form-field/select/overview/type.stories.ts

@@ -0,0 +1,58 @@
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Type: StoryObj<SelectComponent> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The `type` property customizes the visual style of the select component, allowing for different appearances such as filled, outline, etc.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      singleControls: ['size'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <% themeComponentConfig.type.values.map(type => { %>
+                <cck-form-field
+                type="<%= type %>"
+                <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
+              >
+                <cck-label>Favorite food</cck-label>
+                <cck-select placeholder="Favorite food">
+                  <cck-option value="Steak">Steak</cck-option>
+                  <cck-option value="Pizza">Pizza</cck-option>
+                  <cck-option value="Burger">Burger</cck-option>
+                </cck-select>
+              </cck-form-field>
+            <% }) %>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.size()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (type of cckControl.themeComponentConfig.type.values; track type) {
+        <cck-form-field [type]="type">
+          <cck-label>Select - {{type}}</cck-label>
+          <cck-select placeholder="Favorite food" [size]="cckControl.size">
+            <cck-option value="Steak">Steak</cck-option>
+            <cck-option value="Pizza">Pizza</cck-option>
+            <cck-option value="Burger">Burger</cck-option>
+          </cck-select>
+        </cck-form-field>
+      }
+    `,
+  }),
+};

apps/angular-kits-doc/stories/ui-components/form-field/select/overview/withngmodel.stories.ts

@@ -0,0 +1,68 @@
+import { moduleMetadata } from '@storybook/angular';
+import { FormsModule } from '@angular/forms';
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+
+export const WithNgModel: StoryObj<SelectComponent> = {
+  name: 'With ngModel',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use ngModel with the select component to enable two-way data binding.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      controls: [CCK_CONTROL.type()],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <cck-form-field>
+              <cck-label>Select your food</cck-label>
+              <cck-select 
+                [(ngModel)]="selectedValue" 
+                placeholder="Tap to select food">
+                <cck-option value="Steak">Steak</cck-option>
+                <cck-option value="Pizza">Pizza</cck-option>
+                <cck-option value="Burger">Burger</cck-option>
+              </cck-select>
+            </cck-form-field>
+
+            <p>
+             You selected: {{ selectedValue }}
+            </p>
+          `,
+        },
+      ],
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [FormsModule],
+    }),
+  ],
+  render: () => ({
+    props: {
+      selectedValue: 'Pizza',
+    },
+    template: `
+      <cck-form-field>
+        <cck-label>Select your food</cck-label>
+        <cck-select 
+          [(ngModel)]="selectedValue" 
+          placeholder="Tap to select food">
+          <cck-option value="Steak">Steak</cck-option>
+          <cck-option value="Pizza">Pizza</cck-option>
+          <cck-option value="Burger">Burger</cck-option>
+        </cck-select>
+      </cck-form-field>
+      <p>
+              You selected: {{ selectedValue }}
+      </p>
+    `,
+  }),
+};

apps/angular-kits-doc/stories/ui-components/form-field/textarea/color.stories.ts

@@ -0,0 +1,48 @@
+import { TextareaComponent } from '@cocokits/angular-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<TextareaComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different color variations of the textarea.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.color.values.map(color => { %>
+            <cck-form-field>
+              <cck-label><%= color %></cck-label>
+              <textarea
+                cckTextarea
+                [color]='"<%= color %>"'
+                placeholder="<%= color %>"
+              ></textarea>
+            </cck-form-field>
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <cck-form-field>
+          <cck-label>{{color}}</cck-label>
+          <textarea cckTextarea [color]="color" [placeholder]="color"></textarea>
+        </cck-form-field>
+      }
+    `,
+  }),
+};

apps/angular-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts

@@ -7,6 +7,9 @@ import descriptionMd from './description.md';
 
 export { Default } from './default.stories';
 export { AutoResize } from './auto-resize.stories';
+export { Color } from './color.stories';
+export { Size } from './size.stories';
+export { Type } from './type.stories';
 
 const meta: StoriesMeta = {
   component: TextareaComponent,