import * as i0 from '@angular/core';
import { Component } from '@angular/core';
import { elementHelp } from '@siemens/element-icons';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import * as i1 from '@siemens/element-ng/popover';
import { SiPopoverDirective } from '@siemens/element-ng/popover';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/**
 * This component creates a help button that shows contextual help in a popover.
 *
 * @example
 * ```html
 * <button
 *   type="button"
 *   si-help-button
 *   siHelpTitle="Help for problem"
 *   siHelpContent="Use your imagination to solve this problem."
 * >
 *   <!-- This text is only visible to screen reader. Provide a meaningful text, not only "help" -->
 *   How to solve the problem?
 * </button>
 * ```
 */
class SiHelpButtonComponent {
    icons = addIcons({ elementHelp });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHelpButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiHelpButtonComponent, isStandalone: true, selector: "button[si-help-button]", hostDirectives: [{ directive: i1.SiPopoverDirective, inputs: ["siPopoverTitle", "siHelpTitle", "siPopover", "siHelpContent", "siPopoverContext", "siHelpContext", "siPopoverPlacement", "siHelpPlacement"] }], ngImport: i0, template: `
    <div class="visually-hidden"><ng-content /></div>
    <si-icon [icon]="icons.elementHelp" />
  `, isInline: true, styles: [":host{display:inline-flex;vertical-align:middle;font-size:1rem;border-radius:100%;color:var(--element-ui-2);border:0;background:transparent;padding:0}:host:is(:hover,:active){color:var(--element-ui-1)}:host:disabled{color:var(--element-text-disabled)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHelpButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'button[si-help-button]', imports: [SiIconComponent], template: `
    <div class="visually-hidden"><ng-content /></div>
    <si-icon [icon]="icons.elementHelp" />
  `, hostDirectives: [
                        {
                            directive: SiPopoverDirective,
                            inputs: [
                                'siPopoverTitle:siHelpTitle',
                                'siPopover:siHelpContent',
                                'siPopoverContext:siHelpContext',
                                'siPopoverPlacement:siHelpPlacement'
                            ]
                        }
                    ], styles: [":host{display:inline-flex;vertical-align:middle;font-size:1rem;border-radius:100%;color:var(--element-ui-2);border:0;background:transparent;padding:0}:host:is(:hover,:active){color:var(--element-ui-1)}:host:disabled{color:var(--element-text-disabled)}\n"] }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SiHelpButtonComponent };
//# sourceMappingURL=siemens-element-ng-help-button.mjs.map
