chore: updating text input

apps/storybook/stories/orama-input.stories.tsx

@@ -1,5 +1,4 @@
 import type { StoryObj, Meta } from "@storybook/html";
-import { InputProps } from "ui-stencil";
 
 const meta = {
   title: "Internal/Form",
@@ -9,7 +8,7 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
-const TemplateInput = (args: InputProps) => `
+const TemplateInput = (args) => `
   <orama-input name='test1' label='Small size input' size='small' placeholder="Your name" type='text'>
   <orama-input name='test2' label='Medium size input' placeholder="Your surname" type='text'>
   <orama-input name='test3' label='Large size input' size='large' placeholder="Your address" type='text'>
@@ -20,7 +19,7 @@ export const InputSizes: Story = {
   args: {},
 };
 
-const TemplateOnlyInput = (args: InputProps) => `
+const TemplateOnlyInput = (args) => `
   <orama-input name='test4' size='large' labelForScreenReaders=${args.labelForScreenReaders} placeholder='Your name' type="text">
 `;
 
@@ -29,4 +28,15 @@ export const InputWithoutLabel: Story = {
   args: {
     labelForScreenReaders: "Label for screen readers only"
   },
+};
+
+const TemplateInputSearch = (args) => `
+  <orama-input name='test4' size='large' labelForScreenReaders=${args.labelForScreenReaders} placeholder='Search...' type="search">
+`;
+
+export const SearchInput: Story = {
+  render: TemplateInputSearch,
+  args: {
+    labelForScreenReaders: "Search for something"
+  },
 };

biome.json

@@ -32,7 +32,6 @@
     "formatter": {
       "jsxQuoteStyle": "double",
       "quoteProperties": "asNeeded",
-      "trailingCommas": "none",
       "semicolons": "asNeeded",
       "arrowParentheses": "always",
       "bracketSpacing": true,

packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts

@@ -29,14 +29,14 @@ export declare interface OramaChat extends Components.OramaChat {}
 
 
 @ProxyCmp({
-  inputs: ['label', 'labelForScreenReaders', 'name', 'placeholder', 'size', 'type']
+  inputs: ['label', 'labelForScreenReaders', 'name', 'size', 'type']
 })
 @Component({
   selector: 'orama-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['label', 'labelForScreenReaders', 'name', 'placeholder', 'size', 'type'],
+  inputs: ['label', 'labelForScreenReaders', 'name', 'size', 'type'],
 })
 export class OramaInput {
   protected el: HTMLElement;

packages/ui-stencil-vue/lib/components.ts

@@ -13,7 +13,6 @@ export const OramaChat = /*@__PURE__*/ defineContainer<JSX.OramaChat>('orama-cha
 
 export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-input', undefined, [
   'name',
-  'placeholder',
   'size',
   'label',
   'type',

packages/ui-stencil/.prettierrc.json

@@ -1,14 +1,14 @@
 {
-      "arrowParens": "avoid",
-      "bracketSpacing": true,
-      "jsxBracketSameLine": false,
-      "jsxSingleQuote": false,
-      "quoteProps": "consistent",
-      "printWidth": 180,
-      "semi": true,
-      "singleQuote": true,
-      "tabWidth": 6,
-      "trailingComma": "all",
-      "useTabs": false,
-      "editorConfig": true
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "editorConfig": true
 }

packages/ui-stencil/package.json

@@ -25,6 +25,7 @@
   "types": "dist/types/index.d.ts",
   "dependencies": {
     "@oramacloud/client": "1.3.2",
+    "@phosphor-icons/webcomponents": "^2.1.5",
     "@stencil/core": "^4.19.0",
     "@stencil/store": "^2.0.16",
     "sse.js": "^2.5.0"

packages/ui-stencil/src/components.d.ts

@@ -16,7 +16,6 @@ export namespace Components {
         "label"?: InputProps['label'];
         "labelForScreenReaders"?: InputProps['labelForScreenReaders'];
         "name": InputProps['name'];
-        "placeholder"?: InputProps['placeholder'];
         "size"?: InputProps['size'];
         "type"?: InputProps['type'];
     }
@@ -87,7 +86,6 @@ declare namespace LocalJSX {
         "label"?: InputProps['label'];
         "labelForScreenReaders"?: InputProps['labelForScreenReaders'];
         "name"?: InputProps['name'];
-        "placeholder"?: InputProps['placeholder'];
         "size"?: InputProps['size'];
         "type"?: InputProps['type'];
     }

packages/ui-stencil/src/components/internal/orama-input/orama-input.scss

@@ -3,21 +3,26 @@
 }
 
 .input {
+  @include paragraph();
   border: 1px solid var(--border-color-primary, border-color('primary'));
   background: var(--background-color-secondary, background-color('secondary'));
   border-radius: var(--radius-m, $radius-m);
-  color: var(--text-color-secondary, text-color('secondary'));
   padding: var(--radius-s, $radius-s) var(--radius-m, $radius-m);
-  font-size: var(--font-size-sm, $font-size-sm);
+  display: block;
 
   &::placeholder {
     color: var(--text-color-inactive, text-color('inactive'));
   }
 
   &:focus {
-    border-color: var(--border-color-accent, border-color('accent'));
+    border: 1px solid var(--border-color-primary, border-color('primary'));
     outline: none;
   }
+
+  &[type='search']::-webkit-search-cancel-button,
+  &[type='search']::-webkit-search-decoration {
+    appearance: none;
+  }
 }
 
 .input--small {

packages/ui-stencil/src/components/internal/orama-input/orama-input.tsx

@@ -1,5 +1,5 @@
-// create stencil component for Input
 import { Component, Host, Prop, State, h, Element } from '@stencil/core';
+// import '@phoshpor-icons/webcomponents/PhHorse'
 import { AttributeUtils } from '../../../services/AttributeUtils';
 
 type BaseInputProps = {
@@ -28,7 +28,6 @@ export class Input {
   @Element() el: HTMLElement;
 
   @Prop() name: InputProps['name'];
-  @Prop() placeholder?: InputProps['placeholder'];
   @Prop() size?: InputProps['size'] = 'medium'
   @Prop() label?: InputProps['label']
   @Prop() type?: InputProps['type'] = 'text'
@@ -40,7 +39,7 @@ export class Input {
     const inputSizeClass = `input input--${this.size}`
     const labelClass = `label ${this.labelForScreenReaders ? 'sr-only' : ''}`
 
-    const declaredProps = ['id', 'name', 'type'];
+    const declaredProps = ['id', 'name', 'type', 'class', 'onInput'];
     const inputProps = AttributeUtils.getNonExplicitAttributes(this.el, declaredProps);
 
     return (
@@ -53,11 +52,10 @@ export class Input {
             class={inputSizeClass}
             id={this.name}
             type={this.type}
-            placeholder={this.placeholder || null}
             onInput={(e: Event) => this.value = (e.target as HTMLInputElement).value}
-            value={this.value}
             {...inputProps}
           />
+          <ph-horse></ph-horse>
         </div>
       </Host>
     );

packages/ui-stencil/src/components/internal/orama-input/readme.md

@@ -12,7 +12,6 @@
 | `label`                 | `label`                    |             | `string`                                                                    | `undefined` |
 | `labelForScreenReaders` | `label-for-screen-readers` |             | `string`                                                                    | `undefined` |
 | `name`                  | `name`                     |             | `string`                                                                    | `undefined` |
-| `placeholder`           | `placeholder`              |             | `string`                                                                    | `undefined` |
 | `size`                  | `size`                     |             | `"large" \| "medium" \| "small"`                                            | `'medium'`  |
 | `type`                  | `type`                     |             | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'`    |