{"version":3,"names":["CSS","button","buttonTextVisible","buttonCompact","indicatorText","iconContainer","slotContainer","slotContainerHidden","textContainer","textContainerVisible","indicatorWithIcon","indicatorWithoutIcon","SLOTS","tooltip","actionCss","CalciteActionStyle0","Action","this","mutationObserver","createObserver","forceUpdate","guid","indicatorId","buttonId","handleTooltipSlotChange","event","tooltips","target","assignedElements","flatten","filter","el","matches","referenceElement","buttonEl","onMessagesChange","effectiveLocaleChange","updateMessages","effectiveLocale","connectedCallback","connectLocalized","connectMessages","observe","childList","subtree","componentWillLoad","setUpLoadableComponent","isBrowser","setUpMessages","componentDidLoad","setComponentLoaded","disconnectedCallback","disconnectLocalized","disconnectMessages","disconnect","componentDidRender","updateHostInteraction","setFocus","componentFocusable","focus","renderTextContainer","text","textEnabled","textContainerClasses","h","class","key","renderIndicatorText","indicator","messages","id","role","renderIconContainer","loading","icon","scale","iconFlipRtl","loaderScale","calciteLoaderNode","inline","label","calciteIconNode","flipRtl","getIconScale","iconNode","hasIconToDisplay","children","length","slotContainerNode","render","active","compact","disabled","labelFallback","ariaLabel","buttonClasses","Host","InteractiveContainer","toAriaBoolean","ref","name","onSlotchange"],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n button: \"button\",\n buttonTextVisible: \"button--text-visible\",\n buttonCompact: \"button--compact\",\n indicatorText: \"indicator-text\",\n iconContainer: \"icon-container\",\n slotContainer: \"slot-container\",\n slotContainerHidden: \"slot-container--hidden\",\n textContainer: \"text-container\",\n textContainerVisible: \"text-container--visible\",\n indicatorWithIcon: \"indicator-with-icon\",\n indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n tooltip: \"tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-indicator-color: Specifies the component's indicator color.\n * @prop --calcite-action-background-color: Specifies the component's background color.\n * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.\n * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.\n * @prop --calcite-action-corner-radius: Specifies the component's corner radius.\n * @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end.\n * @prop --calcite-action-corner-radius-end-start: Specifies the component's corner radius end start.\n * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.\n * @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start.\n * @prop --calcite-action-text-color: Specifies the component's text color.\n * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.\n */\n\n:host {\n @extend %component-host;\n @apply flex bg-transparent;\n}\n\n:host,\nbutton {\n border-end-end-radius: var(\n --calcite-action-corner-radius-end-end,\n var(--calcite-action-corner-radius, var(--calcite-corner-radius))\n );\n border-end-start-radius: var(\n --calcite-action-corner-radius-end-start,\n var(--calcite-action-corner-radius, var(--calcite-corner-radius))\n );\n border-start-end-radius: var(\n --calcite-action-corner-radius-start-end,\n var(--calcite-action-corner-radius, var(--calcite-corner-radius))\n );\n border-start-start-radius: var(\n --calcite-action-corner-radius-start-start,\n var(--calcite-action-corner-radius, var(--calcite-corner-radius))\n );\n}\n\n@mixin action-indicator() {\n position: relative;\n &::after {\n content: \"\";\n @apply absolute\n h-2\n w-2\n rounded-full;\n inset-block-end: calc(-0.275rem);\n inset-inline-end: calc(-0.275rem);\n background-color: var(--calcite-action-indicator-color, theme(\"colors.brand\"));\n }\n}\n\n.button {\n @apply focus-base\n text-n2h\n relative\n m-0\n flex\n w-auto\n cursor-pointer\n items-center\n justify-start\n border-none\n font-medium\n font-sans;\n\n background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n color: var(--calcite-action-text-color, var(--calcite-color-text-3));\n text-align: unset;\n flex: 1 0 auto;\n\n &:hover,\n &:focus {\n background-color: var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));\n color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n }\n\n &:focus {\n @apply focus-inset;\n }\n\n &:active {\n background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n }\n}\n\n.icon-container {\n @apply pointer-events-none\n m-0\n flex\n items-center\n justify-center;\n min-inline-size: theme(\"spacing.4\");\n min-block-size: theme(\"spacing.6\");\n}\n\n.text-container {\n @apply m-0\n w-0\n truncate\n leading-6\n opacity-0\n transition-opacity\n duration-150\n ease-in-out;\n\n transition-property: margin;\n transition-property: inline-size;\n}\n\n.text-container--visible {\n @apply w-auto flex-auto opacity-100;\n}\n\n:host([active]) {\n .button {\n &,\n &:hover,\n &:focus {\n color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n }\n\n &:active {\n background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n }\n }\n}\n\n:host([loading]) {\n .button {\n &:hover,\n &:focus {\n background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n }\n }\n\n .text-container {\n @apply opacity-disabled;\n }\n\n calcite-loader[inline] {\n margin-inline-end: theme(\"spacing.0\");\n }\n}\n\n:host([appearance=\"transparent\"]) {\n .button {\n @apply bg-transparent\n transition-shadow\n duration-150\n ease-in-out;\n\n &:hover,\n &:focus {\n background-color: var(--calcite-color-transparent-hover);\n }\n\n &:active {\n background-color: var(--calcite-color-transparent-press);\n }\n }\n}\n\n:host([data-active]) .button {\n @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n .button {\n @apply text-n2h px-2 py-1 font-normal;\n }\n .button--text-visible .icon-container {\n margin-inline-end: theme(\"spacing.2\");\n }\n}\n\n:host([scale=\"m\"]) {\n .button {\n @apply text-n1h px-4 py-3 font-normal;\n }\n .button--text-visible .icon-container {\n margin-inline-end: theme(\"spacing.3\");\n }\n}\n\n:host([scale=\"l\"]) {\n .button {\n @apply text-0h p-5 font-normal;\n }\n .button--text-visible .icon-container {\n margin-inline-end: theme(\"spacing.4\");\n }\n}\n\n:host([alignment=\"center\"]) .button {\n @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n .button .text-container--visible {\n @apply flex-initial;\n }\n}\n\n/* [Deprecated] Compact */\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n @apply px-0;\n}\n\n.slot-container {\n @apply flex;\n}\n\n.slot-container--hidden {\n @apply hidden;\n}\n\n.button--text-visible {\n @apply w-full;\n}\n\n.indicator-with-icon {\n @include action-indicator();\n}\n\n.indicator-without-icon {\n @apply w-4 mx-1;\n @include action-indicator();\n}\n\n.indicator-text {\n @apply sr-only;\n}\n\n@include base-component();\n@include disabled {\n .button,\n .button:hover,\n .button:focus {\n @apply opacity-disabled bg-foreground-1 cursor-default;\n }\n\n &:host([active]) {\n .button,\n .button:hover,\n .button:focus {\n @apply opacity-disabled bg-foreground-3;\n }\n }\n}\n","import {\n Component,\n Element,\n forceUpdate,\n h,\n Host,\n Method,\n Prop,\n State,\n VNode,\n Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n InteractiveComponent,\n InteractiveContainer,\n updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n componentFocusable,\n LoadableComponent,\n setComponentLoaded,\n setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n connectMessages,\n disconnectMessages,\n setUpMessages,\n T9nComponent,\n updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - [Deprecated] Use the `calcite-tooltip` component instead.\n */\n@Component({\n tag: \"calcite-action\",\n styleUrl: \"action.scss\",\n shadow: true,\n assetsDirs: [\"assets\"],\n})\nexport class Action\n implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n // --------------------------------------------------------------------------\n //\n // Properties\n //\n // --------------------------------------------------------------------------\n\n /**\n * When `true`, the component is highlighted.\n */\n @Prop({ reflect: true }) active = false;\n\n /**\n * Specifies the horizontal alignment of button elements with text content.\n */\n @Prop({ reflect: true }) alignment: Alignment;\n\n /** Specifies the appearance of the component. */\n @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n /**\n * When `true`, the side padding of the component is reduced.\n *\n * @deprecated No longer necessary.\n */\n @Prop({ reflect: true }) compact = false;\n\n /**\n * When `true`, interaction is prevented and the component is displayed with lower opacity.\n */\n @Prop({ reflect: true }) disabled = false;\n\n /** Specifies an icon to display. */\n @Prop() icon: IconNameOrString;\n\n /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n @Prop({ reflect: true }) iconFlipRtl = false;\n\n /**\n * When `true`, displays a visual indicator.\n */\n @Prop({ reflect: true }) indicator = false;\n\n /**\n * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n */\n @Prop() label: string;\n\n /**\n * When `true`, a busy indicator is displayed.\n */\n @Prop({ reflect: true }) loading = false;\n\n /**\n * Specifies the size of the component.\n */\n @Prop({ reflect: true }) scale: Scale = \"m\";\n\n /**\n * Specifies text that accompanies the icon.\n */\n @Prop() text!: string;\n\n /**\n * Indicates whether the text is displayed.\n */\n @Prop({ reflect: true }) textEnabled = false;\n\n /**\n * Made into a prop for testing purposes only\n *\n * @internal\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messages: ActionMessages;\n\n /**\n * Use this property to override individual strings used by the component.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messageOverrides: Partial;\n\n @Watch(\"messageOverrides\")\n onMessagesChange(): void {\n /* wired up by t9n util */\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Properties\n //\n // --------------------------------------------------------------------------\n\n @Element() el: HTMLCalciteActionElement;\n\n buttonEl: HTMLButtonElement;\n\n mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n @State() effectiveLocale = \"\";\n\n @Watch(\"effectiveLocale\")\n effectiveLocaleChange(): void {\n updateMessages(this, this.effectiveLocale);\n }\n\n @State() defaultMessages: ActionMessages;\n\n guid = `calcite-action-${guid()}`;\n\n indicatorId = `${this.guid}-indicator`;\n\n buttonId = `${this.guid}-button`;\n\n // --------------------------------------------------------------------------\n //\n // Lifecycle\n //\n // --------------------------------------------------------------------------\n\n connectedCallback(): void {\n connectLocalized(this);\n connectMessages(this);\n this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n }\n\n async componentWillLoad(): Promise {\n setUpLoadableComponent(this);\n if (isBrowser()) {\n await setUpMessages(this);\n }\n }\n\n componentDidLoad(): void {\n setComponentLoaded(this);\n }\n\n disconnectedCallback(): void {\n disconnectLocalized(this);\n disconnectMessages(this);\n this.mutationObserver?.disconnect();\n }\n\n componentDidRender(): void {\n updateHostInteraction(this);\n }\n\n // --------------------------------------------------------------------------\n //\n // Methods\n //\n // --------------------------------------------------------------------------\n\n /** Sets focus on the component. */\n @Method()\n async setFocus(): Promise {\n await componentFocusable(this);\n this.buttonEl?.focus();\n }\n\n // --------------------------------------------------------------------------\n //\n // Render Methods\n //\n // --------------------------------------------------------------------------\n\n renderTextContainer(): VNode {\n const { text, textEnabled } = this;\n\n const textContainerClasses = {\n [CSS.textContainer]: true,\n [CSS.textContainerVisible]: textEnabled,\n };\n\n return text ? (\n
\n {text}\n
\n ) : null;\n }\n\n renderIndicatorText(): VNode {\n const { indicator, messages, indicatorId, buttonId } = this;\n return (\n \n {indicator ? messages.indicator : null}\n \n );\n }\n\n renderIconContainer(): VNode {\n const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n const calciteLoaderNode = loading ? (\n \n ) : null;\n const calciteIconNode = icon ? (\n \n ) : null;\n const iconNode = calciteLoaderNode || calciteIconNode;\n const hasIconToDisplay = iconNode || el.children?.length;\n\n const slotContainerNode = (\n \n \n \n );\n\n return hasIconToDisplay ? (\n
\n {iconNode}\n {slotContainerNode}\n
\n ) : null;\n }\n\n render(): VNode {\n const {\n active,\n compact,\n disabled,\n icon,\n loading,\n textEnabled,\n label,\n text,\n indicator,\n indicatorId,\n buttonId,\n messages,\n } = this;\n const labelFallback = label || text;\n const ariaLabel = labelFallback\n ? `${labelFallback}${indicator ? ` (${messages.indicator})` : \"\"}`\n : \"\";\n\n const buttonClasses = {\n [CSS.button]: true,\n [CSS.buttonTextVisible]: textEnabled,\n [CSS.buttonCompact]: compact,\n };\n\n return (\n \n \n (this.buttonEl = buttonEl)}\n >\n {this.renderIconContainer()}\n {this.renderTextContainer()}\n {!icon && indicator &&
}\n \n \n {this.renderIndicatorText()}\n \n \n );\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Methods\n //\n // --------------------------------------------------------------------------\n\n handleTooltipSlotChange = (event: Event): void => {\n const tooltips = (event.target as HTMLSlotElement)\n .assignedElements({\n flatten: true,\n })\n .filter((el): el is HTMLCalciteTooltipElement => el?.matches(\"calcite-tooltip\"));\n\n const tooltip = tooltips[0];\n\n if (tooltip) {\n tooltip.referenceElement = this.buttonEl;\n }\n };\n}\n"],"mappings":"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","ignoreList":[]}