{"version":3,"file":"IconButton.c8a8319e.js","sources":["../../../resources/js/stories/components/misc/Notice.vue","../../../resources/js/stories/components/buttons/IconButton.vue"],"sourcesContent":["<template>\n    <div :class=\"noticeClass\">\n        <div v-if=\"icon\" class=\"flag\">\n            <IconLoader :icon=\"icon\" :size=\"iconSize\" />\n        </div>\n        <div :class=\"contentClass\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport {\n    iconOptions,\n    iconSizeOptions,\n    colorTypeOptions,\n    fontWeightOptions,\n    textAlignOptions,\n} from '../../mocks/StorybookOptions.mock'\nimport IconLoader from '../icons/IconLoader.vue'\n\nexport default defineComponent({\n    name: 'Notice',\n    components: {\n        IconLoader,\n    },\n    props: {\n        rounded: {\n            type: Boolean,\n            default: true,\n        },\n        icon: {\n            type: String,\n            default: null,\n            validator: (value: string) => iconOptions.includes(value),\n        },\n        iconSize: {\n            type: String,\n            default: 'sm',\n            validator: (value: string) => iconSizeOptions.includes(value),\n        },\n        variant: {\n            type: String,\n            default: 'primary',\n            validator: (value: string) => colorTypeOptions.includes(value),\n        },\n        fontWeight: {\n            type: String,\n            default: 'bold',\n            validator: (value: string) => fontWeightOptions.includes(value),\n        },\n        textAlign: {\n            type: String,\n            default: 'center',\n            validator: (value: string) => textAlignOptions.includes(value),\n        },\n        light: {\n            type: Boolean,\n            default: true,\n        },\n    },\n    computed: {\n        noticeClass(): object {\n            return {\n                'p-2': true,\n                'f-13': true,\n                'mb-3': true,\n                'position-relative': true,\n                rounded: this.rounded,\n                [`font-weight-${this.fontWeight}`]: !!this.fontWeight,\n                [`text-${this.textAlign}`]: !!this.textAlign,\n                ...this.variantClasses,\n            }\n        },\n        contentClass(): object {\n            return {\n                'pl-4': !!this.icon,\n            }\n        },\n        variantClasses(): object {\n            // The light option is currently only for primary variant.\n            if (this.variant === 'primary' && this.light) {\n                return {\n                    [`bg-${this.variant}-50`]: !!this.variant,\n                    [`text-${this.variant}-900`]: !!this.variant,\n                    [`border border-${this.variant}-100`]: !!this.variant,\n                }\n            }\n\n            if (this.variant === 'danger' && this.light) {\n                return {\n                    [`bg-${this.variant}-50`]: !!this.variant,\n                    [`text-${this.variant}`]: !!this.variant,\n                    [`border border-${this.variant}`]: !!this.variant,\n                }\n            }\n\n            return {\n                [`notice-${this.variant}`]: !!this.variant,\n                [`bg-${this.variant}`]: !!this.variant,\n                [`border border-${this.variant}`]: !!this.variant,\n            }\n        },\n    },\n})\n</script>\n\n<style lang=\"scss\" scoped>\n@import 'Scss/base.scss';\n\n.notice-primary,\n.notice-secondary,\n.notice-success,\n.notice-danger,\n.notice-info,\n.notice-dark {\n    color: $white;\n}\n\n.flag {\n    position: absolute;\n    width: 30px;\n    left: 15px;\n    top: 10px;\n}\n</style>\n","<template>\n    <component\n        :is=\"element\"\n        :id=\"id\"\n        :name=\"name\"\n        :class=\"buttonClass\"\n        :disabled=\"disabled || loading\"\n        :href=\"isLink ? (href ? href : '#') : null\"\n        :role=\"isLink ? 'button' : null\"\n        :type=\"isLink ? null : type\"\n        @click.stop=\"$emit('click')\"\n    >\n        <div v-if=\"loading\" :class=\"spinnerClass\" role=\"status\">\n            <span class=\"sr-only\">Loading...</span>\n        </div>\n        <IconLoader v-else :icon=\"icon\" :size=\"size\" />\n    </component>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { buttonSizeOptions, buttonTypeOptions, buttonVariantOptions, iconOptions } from '../../mocks/StorybookOptions.mock'\nimport IconLoader from '../icons/IconLoader.vue'\n\nexport default defineComponent({\n    name: 'IconButton',\n    components: {\n        IconLoader,\n    },\n    props: {\n        icon: {\n            type: String,\n            required: true,\n            validator: (value: string) => iconOptions.includes(value),\n        },\n        name: {\n            type: String,\n            default: null,\n        },\n        type: {\n            type: String,\n            default: 'button',\n            validator: (value: string) => buttonTypeOptions.includes(value),\n        },\n        size: {\n            type: String,\n            default: null,\n            validator: (value: string) => buttonSizeOptions.includes(value),\n        },\n        disabled: {\n            type: Boolean,\n            default: false,\n        },\n        href: {\n            type: String,\n            default: null,\n        },\n        variant: {\n            type: String,\n            default: 'primary',\n            validator: (value: string) => buttonVariantOptions.includes(value),\n        },\n        id: {\n            type: String,\n            default: null,\n        },\n        loading: {\n            type: Boolean,\n            default: false,\n        },\n        hasBorder: {\n            type: Boolean,\n            default: true,\n        },\n        transparent: {\n            type: Boolean,\n            default: false,\n        },\n        hasHover: {\n            type: Boolean,\n            default: true,\n        },\n    },\n    computed: {\n        element() {\n            return this.href ? 'a' : 'button'\n        },\n        buttonClass() {\n            return {\n                btn: true,\n                [`btn-${this.variant}`]: !!this.variant,\n                [`btn-${this.size}`]: !!this.size,\n                'border-0': !this.hasBorder,\n                'bg-transparent': this.transparent,\n                'no-hover': !this.hasHover,\n            }\n        },\n        spinnerClass() {\n            return {\n                'spinner-border': true,\n                [`spinner-border-${this.size}`]: !!this.size,\n            }\n        },\n        isLink() {\n            return this.href !== null\n        },\n    },\n})\n</script>\n\n<style scoped lang=\"scss\">\nsvg,\n.b-icon.bi {\n    display: block;\n}\n\n.btn {\n    padding: 0.375rem;\n\n    &-tiny {\n        padding: 0 0.075rem;\n        width: 1.25rem;\n        height: 1.125rem;\n    }\n\n    &-xs {\n        padding: 0.2rem;\n        width: 1.5rem;\n        height: 1.5rem;\n    }\n\n    &-sm {\n        padding: 0.25rem;\n    }\n\n    &-lg {\n        padding: 0.5rem;\n    }\n}\n\n.spinner-border {\n    display: block;\n    width: 1.5rem;\n    height: 1.5rem;\n\n    &-sm {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n\n    &-lg {\n        width: 1.875rem;\n        height: 1.875rem;\n    }\n}\n</style>\n"],"names":["defineComponent","name","components","IconLoader","props","rounded","type","Boolean","default","icon","String","validator","value","iconOptions","includes","iconSize","iconSizeOptions","variant","colorTypeOptions","fontWeight","fontWeightOptions","textAlign","textAlignOptions","light","computed","noticeClass","this","variantClasses","contentClass","required","buttonTypeOptions","size","buttonSizeOptions","disabled","href","buttonVariantOptions","id","loading","hasBorder","transparent","hasHover","element","buttonClass","btn","spinnerClass","isLink"],"mappings":"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"}