{"file":"uic-button.entry.js","mappings":"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","names":[],"sources":["src/components/icons/animated-loading.tsx","src/components/button/button.scss?tag=uic-button","src/components/button/button.tsx"],"sourcesContent":["import { h } from \"@stencil/core\";\n/* eslint-disable */\nexport const ProgressAnimation = () => (\n \n);\n","@import 'variants';\n\n/**\n @prop --uic-button-min-width: min-width of the default button\n @prop --uic-button-height: height of the default button\n @prop --uic-icon-button-width: width of the icon-sized button\n @prop --uic-icon-button-height: height of the icon-sized button\n @prop --uic-stretched-button-width: width of the stretched-sized button\n @prop --uic-stretched-button-height: height of the stretched-sized button\n*/\n\nuic-button {\n box-sizing: border-box;\n display: inline-block;\n padding: 8px;\n position: relative;\n\n .uic-button__native-button {\n @include font(normal, bold);\n align-items: center;\n border: 1px solid transparent;\n border-radius: 0;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n justify-content: center;\n outline: 2px solid transparent;\n outline-offset: -2px;\n padding: 0 16px;\n position: relative;\n // prevent distracting highlight when pressing\n -webkit-tap-highlight-color: transparent;\n text-decoration: none;\n user-select: none;\n width: 100%;\n\n .uic-button__loading {\n height: 100%;\n position: relative;\n }\n\n &.loading {\n pointer-events: none;\n\n .uic-button__label,\n .uic-button__icon {\n display: none;\n }\n\n svg {\n width: auto; // Added for safari. Else SVG has full width.\n }\n }\n\n &::before {\n @include absolute();\n background: transparent;\n content: '';\n }\n\n &:disabled {\n font-weight: normal;\n pointer-events: none;\n }\n }\n\n .uic-button__label {\n @include truncate();\n }\n\n &[loading],\n &[disabled]:not([disabled='false']) {\n pointer-events: none;\n }\n}\n\nuic-button[size='default'] .uic-button__native-button {\n height: var(--uic-button-height);\n min-width: var(--uic-button-min-width);\n}\n\nuic-button[size='icon'] .uic-button__native-button {\n height: var(--uic-icon-button-height);\n padding: 0;\n width: var(--uic-icon-button-width);\n}\n\nuic-button[size='icon-stretched'] .uic-button__native-button {\n height: var(--uic-stretched-button-height);\n padding: 0;\n width: var(--uic-stretched-button-width);\n}\n\n// SLOT SUPPORT\n\nuic-button slot-fb {\n display: flex;\n}\n\nuic-button[size='default'] .uic-button__icon--custom,\nuic-button[size='default'][icon] .uic-button__icon {\n margin-right: 8px;\n}\n\n.uic-button__icon--custom {\n height: var(--uic-icon-height);\n width: var(--uic-icon-width);\n\n svg {\n height: 100%;\n width: 100%;\n }\n}\n","import { Component, ComponentInterface, Element, h, Prop } from \"@stencil/core\";\nimport { ProgressAnimation } from \"../icons\";\n\nexport type ButtonVariant = \"content\" | \"content-primary\" | \"footer\" | \"footer-primary\";\n\nexport type ButtonSize = \"icon\" | \"icon-stretched\" | \"default\";\n\n/**\n * @slot - Content is placed inside the button if provided without a slot name\n * @slot icon - Should be used to place a custom icon\n */\n@Component({\n tag: \"uic-button\",\n styleUrl: \"button.scss\"\n})\nexport class Button implements ComponentInterface {\n @Element() host: HTMLUicButtonElement;\n\n /**\n * The name of the icon to show next to the label.\n */\n @Prop()\n readonly icon?: string;\n\n /**\n * The text shown inside the button.\n * Please prefer the use of the default slot (content within the button element).\n * Becasue of a bug (https://github.com/ionic-team/stencil/issues/2054),\n * this text may not be visible when nesting button within other elements even if there is not default slot for the button.\n */\n @Prop() readonly label?: string;\n\n /**\n * The color variant to use. You can choose between color schemes that are suited for content or footer areas.\n * Use the `primary` variants to show visually more pronounced versions of these schemes.\n */\n @Prop({ reflect: true }) readonly variant: ButtonVariant = \"content\";\n\n /**\n * If set to `true`, the user cannot interact with the button.\n */\n @Prop({ reflect: true }) readonly disabled: boolean = false;\n\n /**\n * If set to `true`, the button is considered selected or toggled.\n */\n @Prop({ reflect: true }) readonly selected: boolean = false;\n\n /**\n * The size of the button.\n * Use `icon` for a button with just an icon.\n */\n @Prop({ reflect: true }) readonly size: ButtonSize = \"default\";\n\n /**\n * If set to `true`, the button is currently loading.\n */\n @Prop({ reflect: true }) readonly loading: boolean = false;\n\n /**\n * If a value is set, an tag with the specified href will be rendered instead of a button.\n */\n @Prop()\n readonly href?: string;\n\n /**\n * If the `href` value is set, this value will be used for target attribute of the tag.\n */\n @Prop()\n readonly target?: string;\n\n /**\n * If the `href` value is set, this value will be used for download attribute of the tag.\n */\n @Prop()\n readonly download?: string;\n\n private get tabIndex() {\n if (this.disabled) {\n return -1;\n }\n const hasTabIndex = this.host.hasAttribute(\"tabindex\");\n\n if (hasTabIndex) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return this.host.getAttribute(\"tabindex\") as any;\n }\n\n return 0;\n }\n\n render() {\n const Proxy = this.href ? \"a\" : \"button\";\n const props = this.href\n ? { href: this.href, target: this.target, download: this.download }\n : { tabIndex: this.tabIndex, disabled: this.disabled };\n const hasCustomIcon = !!this.host.querySelector(\"[slot='icon']\");\n\n return (\n \n \n {this.icon && }\n \n \n {this.label}\n \n {this.loading && {ProgressAnimation()}}\n \n );\n }\n}\n"],"version":3}