@scania/tegel 0.0.2 → 0.0.4

package/dist/collection/components/textfield/textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textfield.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    let className = ' sdds-textfield-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}\n        ${\n          this.focusInput && !this.disabled\n            ? 'sdds-form-textfield sdds-textfield-focus'\n            : ' sdds-form-textfield'\n        }\n        ${this.value ? 'sdds-textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'sdds-textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}\n        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-textfield-${this.state}`\n            : ''\n        }\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"sdds-textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"sdds-textfield-container\">\n          <div class={`sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}`}>\n            <slot name=\"sdds-prefix\" />\n          </div>\n\n          <div class=\"sdds-textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"sdds-textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"sdds-textfield-bar\"></div>\n\n          <div class={`sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}`}>\n            <slot name=\"sdds-suffix\" />\n          </div>\n          <span class=\"sdds-textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"sdds-textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"sdds-textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"sdds-textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"sdds-textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"sdds-textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/textfield/textfield.stories.js

@@ -1,184 +1,184 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Textfield',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    placeholderText: {
-      name: 'Placeholder',
-      description: 'Placeholder text',
-      control: {
-        type: 'text',
-      },
-    },
-    type: {
-      name: 'Type',
-      description: 'Which type of textfield',
-      control: {
-        type: 'radio',
-        options: ['Password', 'Text'],
-      },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Switch between different sizes',
-      control: {
-        type: 'radio',
-        options: ['Large', 'Medium', 'Small'],
-      },
-    },
-    minWidth: {
-      name: 'No minimum width',
-      description: 'Toggle the minimum width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-    },
-    readonly: {
-      description: 'Set textfield to read only',
-      name: 'Read Only',
-      control: {
-        type: 'boolean',
-      },
-    },
-    label: {
-      description: 'Label text for specific textfield',
-      name: 'Label text',
-      control: {
-        type: 'text',
-      },
-    },
-    labelPosition: {
-      name: 'Label position',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
-    },
-    prefix: {
-      name: 'Prefix',
-      description: 'Add prefix symbol/text before the textfield',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    prefixType: {
-      name: 'Prefix type',
-      description: 'Choose icon or text for prefix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'prefix', eq: true },
-    },
-    suffix: {
-      name: 'Suffix',
-      description: 'Add suffix symbol/text after the textfield',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    suffixType: {
-      name: 'Suffix type',
-      description: 'Choose icon or text for suffix.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Icon', 'Text'],
-      if: { arg: 'suffix', eq: true },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Add helper text for the textfield',
-      control: {
-        type: 'text',
-      },
-    },
-    maxLength: {
-      name: 'Max length',
-      description: 'Set a maximum value of how long the text can be.',
-      control: {
-        type: 'number',
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Success', 'Error'],
-    },
-  },
-  args: {
-    placeholderText: 'Placeholder',
-    disabled: false,
-    readonly: false,
-    label: 'Label',
-    labelPosition: 'None',
-    helper: '',
-    maxLength: 0,
-    state: 'Default',
-    suffix: false,
-    suffixType: 'Icon',
-    prefix: false,
-    prefixType: 'Icon',
-    minWidth: 'Default',
-    size: 'Large',
-    type: 'Text',
-    modeVariant: 'Inherit from parent',
-  },
-};
-const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, label, labelPosition, state, helper, prefix, prefixType, suffix, suffixType, maxLength, modeVariant, }) => {
-  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
-  const stateValue = state.toLowerCase();
-  const sizeLookUp = {
-    Large: 'lg',
-    Medium: 'md',
-    Small: 'sm',
-  };
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Textfield',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Placeholder text',
+      control: {
+        type: 'text',
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Which type of textfield',
+      control: {
+        type: 'radio',
+        options: ['Password', 'Text'],
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switch between different sizes',
+      control: {
+        type: 'radio',
+        options: ['Large', 'Medium', 'Small'],
+      },
+    },
+    minWidth: {
+      name: 'No minimum width',
+      description: 'Toggle the minimum width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+    },
+    readonly: {
+      description: 'Set textfield to read only',
+      name: 'Read Only',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    prefix: {
+      name: 'Prefix',
+      description: 'Add prefix symbol/text before the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    prefixType: {
+      name: 'Prefix type',
+      description: 'Choose icon or text for prefix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'prefix', eq: true },
+    },
+    suffix: {
+      name: 'Suffix',
+      description: 'Add suffix symbol/text after the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    suffixType: {
+      name: 'Suffix type',
+      description: 'Choose icon or text for suffix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'suffix', eq: true },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Set a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+    },
+  },
+  args: {
+    placeholderText: 'Placeholder',
+    disabled: false,
+    readonly: false,
+    label: 'Label',
+    labelPosition: 'None',
+    helper: '',
+    maxLength: 0,
+    state: 'Default',
+    suffix: false,
+    suffixType: 'Icon',
+    prefix: false,
+    prefixType: 'Icon',
+    minWidth: 'Default',
+    size: 'Large',
+    type: 'Text',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, label, labelPosition, state, helper, prefix, prefixType, suffix, suffixType, maxLength, modeVariant, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const stateValue = state.toLowerCase();
+  const sizeLookUp = {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  };
   return formatHtmlPreview(`
     <style>
     /* demo-wrapper is for demonstration purposes only*/
@@ -202,17 +202,17 @@ const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, l
       ${readonly ? 'read-only' : ''}
       ${minWidth ? 'no-min-width' : ''}
       placeholder="${placeholderText}" >
-        ${prefix
+        ${prefix
     ? `
         <span slot="sdds-prefix">
           ${prefixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
-        </span>`
+        </span>`
     : ''}
-        ${suffix
+        ${suffix
     ? `
         <span slot="sdds-suffix">
           ${suffixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
-        </span>`
+        </span>`
     : ''}
         </sdds-textfield>
   </div>
@@ -232,8 +232,9 @@ const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, l
       console.log(event)
     })
   </script>
-  `);
-};
-// ${true ? '<sdds-icon name="cross" slot="sdds-prefix"></sdds-icon>' : ''}
-export const Default = Template.bind({});
-Default.args = {};
+  `);
+};
+// ${true ? '<sdds-icon name="cross" slot="sdds-prefix"></sdds-icon>' : ''}
+export const Default = Template.bind({});
+Default.args = {};
+//# sourceMappingURL=textfield.stories.js.map

package/dist/collection/components/textfield/textfield.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textfield.stories.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Textfield',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    placeholderText: {\n      name: 'Placeholder',\n      description: 'Placeholder text',\n      control: {\n        type: 'text',\n      },\n    },\n    type: {\n      name: 'Type',\n      description: 'Which type of textfield',\n      control: {\n        type: 'radio',\n        options: ['Password', 'Text'],\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Switch between different sizes',\n      control: {\n        type: 'radio',\n        options: ['Large', 'Medium', 'Small'],\n      },\n    },\n    minWidth: {\n      name: 'No minimum width',\n      description: 'Toggle the minimum width.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      description: 'Set textfield to disabled state',\n      name: 'Disabled',\n      control: {\n        type: 'boolean',\n      },\n    },\n    readonly: {\n      description: 'Set textfield to read only',\n      name: 'Read Only',\n      control: {\n        type: 'boolean',\n      },\n    },\n    label: {\n      description: 'Label text for specific textfield',\n      name: 'Label text',\n      control: {\n        type: 'text',\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Inside', 'Outside'],\n      description: 'Label text position',\n    },\n    prefix: {\n      name: 'Prefix',\n      description: 'Add prefix symbol/text before the textfield',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    prefixType: {\n      name: 'Prefix type',\n      description: 'Choose icon or text for prefix.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon', 'Text'],\n      if: { arg: 'prefix', eq: true },\n    },\n    suffix: {\n      name: 'Suffix',\n      description: 'Add suffix symbol/text after the textfield',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    suffixType: {\n      name: 'Suffix type',\n      description: 'Choose icon or text for suffix.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon', 'Text'],\n      if: { arg: 'suffix', eq: true },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Add helper text for the textfield',\n      control: {\n        type: 'text',\n      },\n    },\n    maxLength: {\n      name: 'Max length',\n      description: 'Set a maximum value of how long the text can be.',\n      control: {\n        type: 'number',\n      },\n    },\n    state: {\n      name: 'State',\n      description: 'Switch between success or error state',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Success', 'Error'],\n    },\n  },\n  args: {\n    placeholderText: 'Placeholder',\n    disabled: false,\n    readonly: false,\n    label: 'Label',\n    labelPosition: 'None',\n    helper: '',\n    maxLength: 0,\n    state: 'Default',\n    suffix: false,\n    suffixType: 'Icon',\n    prefix: false,\n    prefixType: 'Icon',\n    minWidth: 'Default',\n    size: 'Large',\n    type: 'Text',\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({\n  type,\n  placeholderText,\n  size,\n  minWidth,\n  disabled,\n  readonly,\n  label,\n  labelPosition,\n  state,\n  helper,\n  prefix,\n  prefixType,\n  suffix,\n  suffixType,\n  maxLength,\n  modeVariant,\n}) => {\n  const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n  const stateValue = state.toLowerCase();\n  const sizeLookUp = {\n    Large: 'lg',\n    Medium: 'md',\n    Small: 'sm',\n  };\n  return formatHtmlPreview(\n    `\n    <style>\n    /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 200px;\n    height: 150px;\n  }\n    </style>\n\n  <div class=\"demo-wrapper\">\n    <sdds-textfield\n      type=\"${type}\"\n      size=\"${sizeLookUp[size]}\"\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n      state=\"${stateValue}\"\n      label=\"${label}\"\n      label-position=\"${labelPosition.toLowerCase()}\"\n      ${helper ? `helper=\"${helper}\"` : ''}\n      ${maxlength}\n      ${disabled ? 'disabled' : ''}\n      ${readonly ? 'read-only' : ''}\n      ${minWidth ? 'no-min-width' : ''}\n      placeholder=\"${placeholderText}\" >\n        ${\n          prefix\n            ? `\n        <span slot=\"sdds-prefix\">\n          ${prefixType === 'Text' ? '$' : '<sdds-icon name=\"truck\" size=\"20px\"></sdds-icon> '}\n        </span>`\n            : ''\n        }\n        ${\n          suffix\n            ? `\n        <span slot=\"sdds-suffix\">\n          ${suffixType === 'Text' ? '$' : '<sdds-icon name=\"truck\" size=\"20px\"></sdds-icon> '}\n        </span>`\n            : ''\n        }\n        </sdds-textfield>\n  </div>\n  <!-- Script tag for demo purposes -->\n  <script>\n    textElement = document.querySelector('sdds-textfield')\n    textElement.addEventListener('sddsFocus',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsBlur',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsInput',(event) => {\n      console.log(event)\n    })\n    textElement.addEventListener('sddsChange',(event) => {\n      console.log(event)\n    })\n  </script>\n  `,\n  );\n};\n\n// ${true ? '<sdds-icon name=\"cross\" slot=\"sdds-prefix\"></sdds-icon>' : ''}\n\nexport const Default = Template.bind({});\n\nDefault.args = {};\n"]}