{"version":3,"sources":["webpack:///./src/views/forms/form-element/form-input-group/code.js"],"names":["codeAddons","codeBasic","codeButton","codeCheckboxRadio","codeDropdown","codeSize","codeMerged"],"mappings":"kHAAA,0TAAO,IAAMA,EAAa,uvDAyEbC,EAAY,6lEAoFZC,EAAa,+tCAqDbC,EAAoB,mtEAgGpBC,EAAe,61EAyFfC,EAAW,ksBAyCXC,EAAa","file":"js/chunk-2d0ac3ef.8236149c.js","sourcesContent":["export const codeAddons = `\n<template>\n  <b-row>\n    <b-col\n      md=\"6\"\n      class=\"mb-1\"\n    >\n      <b-input-group>\n        <b-input-group-prepend>\n          <b-input-group-text>$</b-input-group-text>\n          <b-input-group-text>\n            <b-form-checkbox\n              name=\"checkbox-input\"\n              plain\n              class=\"vs-checkbox-con pl-0\"\n            >\n              <span class=\"vs-checkbox\">\n                <span class=\"vs-checkbox--check\">\n                  <i class=\"vs-icon feather icon-check\" />\n                </span>\n              </span>\n            </b-form-checkbox>\n          </b-input-group-text>\n        </b-input-group-prepend>\n        <b-form-input />\n      </b-input-group>\n    </b-col>\n    <b-col\n      md=\"6\"\n    >\n      <b-input-group>\n        <b-form-input />\n        <b-input-group-append>\n          <b-input-group-text>$</b-input-group-text>\n          <b-input-group-text>\n            <b-form-radio\n              class=\"vs-radio-con\"\n              name=\"radio-input\"\n              plain\n            >\n              <span class=\"vs-radio\">\n                <span class=\"vs-radio--border\" />\n                <span class=\"vs-radio--circle\" />\n              </span>\n            </b-form-radio>\n          </b-input-group-text>\n        </b-input-group-append>\n      </b-input-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {\n  BInputGroup, BFormInput, BInputGroupPrepend, BInputGroupAppend, BRow, BCol, BFormCheckbox, BInputGroupText, BFormRadio,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BInputGroup,\n    BInputGroupPrepend,\n    BInputGroupAppend,\n    BFormCheckbox,\n    BFormRadio,\n    BInputGroupText,\n    BRow,\n    BCol,\n  },\n}\n</script>\n`\n\nexport const codeBasic = `\n<template>\n  <div class=\"demo-vertical-spacing\">\n    <!-- basic search -->\n    <b-input-group>\n      <b-input-group-prepend is-text>\n        <feather-icon icon=\"SearchIcon\" />\n      </b-input-group-prepend>\n      <b-form-input placeholder=\"Search\" />\n    </b-input-group>\n\n    <!-- password -->\n    <b-form-group>\n      <label for=\"basic-password\">Password</label>\n      <b-input-group>\n        <b-form-input\n          id=\"basic-password\"\n          :type=\"passwordFieldType\"\n          placeholder=\"Your Password\"\n        />\n        <b-input-group-append is-text>\n          <feather-icon\n            :icon=\"passwordToggleIcon\"\n            class=\"cursor-pointer\"\n            @click=\"togglePasswordVisibility\"\n          />\n        </b-input-group-append>\n      </b-input-group>\n    </b-form-group>\n\n    <!-- with prop prepend  -->\n    <b-input-group prepend=\"@\">\n      <b-form-input placeholder=\"Username\" />\n    </b-input-group>\n\n    <!-- with prop append -->\n    <b-input-group append=\"@example.com\">\n      <b-form-input placeholder=\"Recipient's username\" />\n    </b-input-group>\n\n    <b-input-group prepend=\"https://example.com/users/\">\n      <b-form-input />\n    </b-input-group>\n\n    <!-- append and pepend -->\n    <b-input-group\n      prepend=\"$\"\n      append=\".00\"\n    >\n      <b-form-input placeholder=\"100\" />\n    </b-input-group>\n\n    <!-- textarea -->\n    <b-input-group prepend=\"With textarea\">\n      <b-form-textarea />\n    </b-input-group>\n  </div>\n</template>\n\n<script>\nimport {\n  BInputGroup, BFormInput, BInputGroupPrepend, BInputGroupAppend, BFormGroup, BFormTextarea,\n} from 'bootstrap-vue'\nimport { togglePasswordVisibility } from '@core/mixins/ui/forms'\n\nexport default {\n  components: {\n    BFormTextarea,\n    BInputGroup,\n    BFormGroup,\n    BFormInput,\n    BInputGroupPrepend,\n    BInputGroupAppend,\n  },\n  mixins: [togglePasswordVisibility],\n  computed: {\n    passwordToggleIcon() {\n      return this.passwordFieldType === 'password' ? 'EyeIcon' : 'EyeOffIcon'\n    },\n  },\n}\n</script>\n`\n\nexport const codeButton = `\n<template>\n  <b-row>\n    <b-col\n      lg=\"6\"\n      class=\"mb-1\"\n    >\n      <!-- button on right -->\n      <b-input-group>\n        <b-form-input placeholder=\"Button on right\" />\n        <b-input-group-append>\n          <b-button variant=\"outline-primary\">\n            GO\n          </b-button>\n        </b-input-group-append>\n      </b-input-group>\n    </b-col>\n    <b-col lg=\"6\">\n      <!-- button on both side -->\n      <b-input-group>\n        <b-input-group-prepend>\n          <b-button variant=\"outline-primary\">\n            <feather-icon icon=\"SearchIcon\" />\n          </b-button>\n        </b-input-group-prepend>\n        <b-form-input placeholder=\"Button on both side\" />\n        <b-input-group-append>\n          <b-button variant=\"outline-primary\">\n            Search !\n          </b-button>\n        </b-input-group-append>\n      </b-input-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {BInputGroup, BFormInput, BInputGroupAppend, BInputGroupPrepend, BRow, BCol, BButton} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BInputGroup,\n    BInputGroupAppend,\n    BInputGroupPrepend,\n    BRow,\n    BCol,\n    BButton,\n  },\n}\n</script>\n`\n\nexport const codeCheckboxRadio = `\n<template>\n  <b-row>\n    <!-- checkbox -->\n    <b-col md=\"6\">\n      <b-form-group>\n        <b-input-group>\n          <b-input-group-prepend is-text>\n            <b-form-checkbox\n              plain\n              name=\"checkbox-input\"\n            />\n          </b-input-group-prepend>\n          <b-form-input placeholder=\"Message\" />\n        </b-input-group>\n      </b-form-group>\n    </b-col>\n\n    <!-- radio -->\n    <b-col md=\"6\">\n      <b-form-group>\n        <b-input-group>\n          <b-input-group-prepend is-text>\n            <b-form-radio\n              v-model=\"radio1\"\n              value=\"radio2\"\n              plain\n              name=\"radio-input1\"\n            />\n          </b-input-group-prepend>\n          <b-form-input placeholder=\"Message\" />\n        </b-input-group>\n      </b-form-group>\n    </b-col>\n\n    <!-- custome checkbox and radio -->\n    <b-col\n      cols=\"12\"\n      class=\" my-1\"\n    >\n      <small class=\"font-weight-semibold\">Custom checkbox and radio</small>\n    </b-col>\n    <b-col md=\"6\">\n      <b-form-group>\n        <b-input-group>\n          <b-input-group-prepend is-text>\n            <b-form-checkbox\n              name=\"checkbox-input\"\n            />\n          </b-input-group-prepend>\n          <b-form-input placeholder=\"Message\" />\n        </b-input-group>\n      </b-form-group>\n    </b-col>\n\n    <!-- radio -->\n    <b-col md=\"6\">\n      <b-form-group>\n        <b-input-group>\n          <b-input-group-prepend is-text>\n            <b-form-radio\n              v-model=\"radio1\"\n              value=\"radio2\"\n              name=\"radio-input1\"\n            />\n          </b-input-group-prepend>\n          <b-form-input placeholder=\"Message\" />\n        </b-input-group>\n      </b-form-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {BInputGroup, BFormInput, BInputGroupPrepend, BRow, BCol, BFormCheckbox, BFormRadio, BFormGroup} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BInputGroup,\n    BInputGroupPrepend,\n    BRow,\n    BCol,\n    BFormCheckbox,\n    BFormRadio,\n    BFormGroup,\n  },\n  data() {\n    return {\n      radio1: 'radio2',\n    }\n  },\n}\n</script>\n`\n\nexport const codeDropdown = `\n<template>\n  <b-row>\n    <b-col\n      lg=\"6\"\n      class=\"mb-1\"\n    >\n      <!-- dropdown in right side -->\n      <b-input-group>\n        <b-input-group-prepend>\n          <b-dropdown\n            text=\"Action\"\n            variant=\"outline-primary\"\n          >\n            <b-dropdown-item>Action </b-dropdown-item>\n            <b-dropdown-item>Another Action</b-dropdown-item>\n            <b-dropdown-item>Something else here</b-dropdown-item>\n            <b-dropdown-divider />\n            <b-dropdown-item>Separated link</b-dropdown-item>\n          </b-dropdown>\n        </b-input-group-prepend>\n        <b-form-input placeholder=\"Dropdown on left\" />\n      </b-input-group>\n    </b-col>\n    <b-col lg=\"6\">\n\n      <!-- dropdown in both side -->\n      <b-input-group>\n        <b-input-group-prepend>\n          <b-dropdown variant=\"outline-primary\">\n            <template #button-content>\n              <feather-icon icon=\"Edit2Icon\" />\n            </template>\n            <b-dropdown-item>Action </b-dropdown-item>\n            <b-dropdown-item>Another Action</b-dropdown-item>\n            <b-dropdown-item>Something else here</b-dropdown-item>\n            <b-dropdown-divider />\n            <b-dropdown-item>Separated link</b-dropdown-item>\n          </b-dropdown>\n        </b-input-group-prepend>\n        <b-form-input placeholder=\"Dropdown on both side\" />\n        <b-input-group-append>\n          <b-dropdown\n            text=\"Action\"\n            variant=\"outline-primary\"\n            right\n          >\n            <b-dropdown-item>Action </b-dropdown-item>\n            <b-dropdown-item>Another Action</b-dropdown-item>\n            <b-dropdown-item>Something else here</b-dropdown-item>\n            <b-dropdown-divider />\n            <b-dropdown-item>Separated link</b-dropdown-item>\n          </b-dropdown>\n        </b-input-group-append>\n\n      </b-input-group>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {\n  BInputGroup,\n  BFormInput,\n  BInputGroupPrepend,\n  BInputGroupAppend,\n  BDropdown,\n  BDropdownItem,\n  BDropdownDivider,\n  BRow,\n  BCol,\n} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BInputGroup,\n    BInputGroupPrepend,\n    BInputGroupAppend,\n    BDropdownDivider,\n    BDropdown,\n    BDropdownItem,\n    BRow,\n    BCol,\n  },\n}\n</script>\n`\n\nexport const codeSize = `\n<template>\n  <div class=\"demo-vertical-spacing\">\n\n    <!-- large -->\n    <b-input-group\n      prepend=\"@\"\n      size=\"lg\"\n    >\n      <b-form-input placeholder=\"Username\" />\n    </b-input-group>\n\n    <!-- default -->\n    <b-input-group\n      prepend=\"@\"\n    >\n      <b-form-input placeholder=\"Username\" />\n    </b-input-group>\n\n    <!-- small -->\n    <b-input-group\n      size=\"sm\"\n      prepend=\"@\"\n    >\n      <b-form-input placeholder=\"Username\" />\n    </b-input-group>\n  </div>\n</template>\n\n<script>\nimport {BInputGroup, BFormInput} from 'bootstrap-vue'\n\nexport default {\n  components: {\n    BFormInput,\n    BInputGroup,\n  },\n}\n</script>\n`\n\nexport const codeMerged = `\n<template>\n  <div class=\"demo-vertical-spacing\">\n    <!-- basic search -->\n    <b-input-group class=\"input-group-merge\">\n      <b-input-group-prepend is-text>\n        <feather-icon icon=\"SearchIcon\" />\n      </b-input-group-prepend>\n      <b-form-input placeholder=\"Search\" />\n    </b-input-group>\n\n    <!-- password -->\n    <b-form-group>\n      <label for=\"basic-password1\">Password</label>\n      <b-input-group class=\"input-group-merge\">\n        <b-form-input\n          id=\"basic-password1\"\n          :type=\"passwordFieldType\"\n          placeholder=\"Your Password\"\n        />\n        <b-input-group-append is-text>\n          <feather-icon\n            :icon=\"passwordToggleIcon\"\n            class=\"cursor-pointer\"\n            @click=\"togglePasswordVisibility\"\n          />\n        </b-input-group-append>\n      </b-input-group>\n    </b-form-group>\n\n    <!-- with prop prepend  -->\n    <b-input-group\n      prepend=\"@\"\n      class=\"input-group-merge\"\n    >\n      <b-form-input placeholder=\"Username\" />\n    </b-input-group>\n\n    <!-- with prop append -->\n    <b-input-group\n      append=\"@example.com\"\n      class=\"input-group-merge\"\n    >\n      <b-form-input placeholder=\"Recipient's username\" />\n    </b-input-group>\n\n    <b-input-group\n      prepend=\"https://example.com/users/\"\n      class=\"input-group-merge\"\n    >\n      <b-form-input />\n    </b-input-group>\n\n    <!-- append and pepend -->\n    <b-input-group\n      prepend=\"$\"\n      append=\".00\"\n      class=\"input-group-merge\"\n    >\n      <b-form-input placeholder=\"100\" />\n    </b-input-group>\n\n    <!-- textarea -->\n    <b-input-group\n      prepend=\"With textarea\"\n      class=\"input-group-merge\"\n    >\n      <b-form-textarea />\n    </b-input-group>\n  </div>\n</template>\n\n<script>\nimport {BInputGroup, BFormInput, BInputGroupPrepend, BInputGroupAppend, BFormGroup, BFormTextarea} from 'bootstrap-vue'\nimport { togglePasswordVisibility } from '@core/mixins/ui/forms'\n\nexport default {\n  components: {\n    BFormTextarea,\n    BInputGroup,\n    BFormGroup,\n    BFormInput,\n    BInputGroupPrepend,\n    BInputGroupAppend,\n  },\n  mixins: [togglePasswordVisibility],\n  computed: {\n    passwordToggleIcon() {\n      return this.passwordFieldType === 'password' ? 'EyeIcon' : 'EyeOffIcon'\n    },\n  },\n}\n</script>\n`\n"],"sourceRoot":""}