feat(input): display type icons (#713)

I decided that'd be a good idea to display icons depending on the type
of the input.

> `icon` attribute overrides the default icon.

<img width="844" alt="image"
src="https://github.com/Trendyol/baklava/assets/47941171/3025aee8-5357-45c1-946f-01ab7fa5b680">

```html
<bl-input type="search" />
<bl-input type="date" />
<bl-input type="date" icon="academy" />
<bl-input type="time" />
```

Additionally, this PR adds input type of `search`, it could be good idea
to review #712 first.

---------

Co-authored-by: Aykut Saraç <aykut.sarac@trendyol.com>

src/components/input/bl-input.css

@@ -154,6 +154,14 @@ input:disabled {
  cursor: not-allowed;
 }
 
+input::-webkit-calendar-picker-indicator {
+ display: none;
+}
+
+input::-moz-calendar-picker-indicator {
+ display: none;
+}
+
 input:autofill {
  background-color: var(--autofill-bg-color);
 

src/components/input/bl-input.stories.mdx

@@ -238,6 +238,24 @@ Input also supports slot icons for more complex use cases. You can use `icon` sl
  </Story>
 </Canvas>
 
+Inputs with type of date, time, datetime-local, month, week and search have default icons. You can override these icons with `icon` attribute.
+
+<Canvas>
+ <Story name="Date Input With Default Icon" args={{ type: "date" }}>
+ {SingleInputTemplate.bind({})}
+ </Story>
+ <Story name="Time Input With Default Icon" args={{ type: "time" }}>
+ {SingleInputTemplate.bind({})}
+ </Story>
+ <Story name="Search Input With Default Icon" args={{ type: "search" }}>
+ {SingleInputTemplate.bind({})}
+ </Story>
+ <Story name="Date Input With Custom Icon" args={{ type: "date", icon: "star" }}>
+ {SingleInputTemplate.bind({})}
+ </Story>
+</Canvas>
+
+
 ## Input Validation
 
 Input supports native HTML validation rules like `required`, `minlength`, `maxlength`, `min` and `max`. Other validation rules will come soon.

src/components/input/bl-input.test.ts

@@ -85,6 +85,25 @@ describe("bl-input", () => {
  });
 
  describe("input with icon", () => {
+ it("should show default icon", async () => {
+ const el = await fixture<BlInput>(html`<bl-input type="time"></bl-input>`);
+ const defaultIcon = el.shadowRoot?.querySelector('bl-icon[name="clock"]');
+
+ expect(defaultIcon).to.exist;
+ expect(defaultIcon?.getAttribute("name")).to.equal("clock");
+ expect(el.shadowRoot?.querySelector(".has-icon")).to.exist;
+ });
+
+ it("should override default icon when custom icon is set", async () => {
+ const el = await fixture<BlInput>(html`<bl-input type="time" icon="academy"></bl-input>`);
+ const defaultIcon = el.shadowRoot?.querySelector('bl-icon[name="clock"]');
+ const customIcon = el.shadowRoot?.querySelector('bl-icon[name="academy"]');
+
+ expect(defaultIcon).to.not.exist;
+ expect(customIcon).to.exist;
+ expect(el.shadowRoot?.querySelector(".has-icon")).to.exist;
+ });
+
  it("should show custom icon", async () => {
  const el = await fixture<BlInput>(html`<bl-input icon="info"></bl-input>`);
  const customIcon = el.shadowRoot?.querySelector('bl-icon[name="info"]');

src/components/input/bl-input.ts

@@ -24,7 +24,17 @@ export type InputType =
  | "password"
  | "number"
  | "tel"
- | "url";
+ | "url"
+ | "search";
+
+const inputTypeIcons: Partial<Record<InputType, BaklavaIcon>> = {
+ "date": "calendar",
+ "datetime-local": "calendar",
+ "month": "calendar",
+ "week": "calendar",
+ "time": "clock",
+ "search": "search",
+};
 
 export type InputSize = "small" | "medium" | "large";
 /**
@@ -53,7 +63,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
  name?: string;
 
  /**
- * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.
+ * Type of the input. It's used to set `type` attribute of native input inside.
  */
  @property({ reflect: true })
  type: InputType = "text";
@@ -284,6 +294,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
 
  firstUpdated() {
  this.setValue(this.value);
+ if (!this.icon) this.icon = inputTypeIcons[this.type];
  }
 
  protected async updated(changedProperties: PropertyValues) {