import * as i0 from '@angular/core';
import { signal, output, input, computed, HostBinding, Component } from '@angular/core';
import * as i1 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';

/**
 * @description
 * Show and Conceal (SNC) component that toggles visibility of sensitive content with masked placeholder.
 * Displays a configurable number of dots to represent hidden content length.
 * Provides a toggle button to reveal or conceal the actual content.
 * Commonly used for passwords, API keys, tokens, or other sensitive information that should be hidden by default.
 * Emits visibility state changes for parent components to track or respond to content exposure.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Simple password field -->
 * <eui-snc [dotsLength]="12" (sncToggle)="onToggle($event)">
 *   MySecretPassword123
 * </eui-snc>
 * ```
 *
 * ```typescript
 * onToggle(isVisible: boolean) {
 *   console.log('Content is now:', isVisible ? 'visible' : 'hidden');
 * }
 * ```
 *
 * ### Accessibility
 * - Toggle button should have clear aria-label indicating show/hide action
 * - Announce state changes to screen readers using aria-live regions
 * - Ensure keyboard navigation works for toggle button
 *
 * ### Notes
 * - Default dotsLength is 8 characters
 * - Content is hidden by default on component initialization
 * - Use sncToggle event to track visibility changes for security logging
 */
class EuiSncComponent {
    constructor() {
        this.string = 'eui-snc';
        /**
         * Controls the visibility state of the concealed content.
         * When true, displays actual content; when false, shows masked dots.
         * Managed internally and toggled via user interaction.
         */
        this.showContent = signal(false, ...(ngDevMode ? [{ debugName: "showContent" }] : []));
        /**
         * Emitted when the content visibility state changes via toggle button interaction.
         * Payload: boolean indicating the new visibility state (true when content is shown, false when concealed).
         */
        this.sncToggle = output();
        /**
         * Number of dot characters to display when content is concealed.
         * Represents the approximate length of the hidden content for visual consistency.
         * Automatically clamped to minimum value of 0.
         * @default 8
         */
        this.dotsLength = input(8, { ...(ngDevMode ? { debugName: "dotsLength" } : {}), transform: (value) => Math.max(0, value) });
        /**
         * Computed property to determine the hidden text based on the dots length.
         */
        this.hiddenText = computed(() => {
            const hiddenCount = this.dotsLength();
            return hiddenCount > 0 ? '•'.repeat(hiddenCount) : '';
        }, ...(ngDevMode ? [{ debugName: "hiddenText" }] : []));
    }
    toggleContent() {
        this.showContent.update(value => !value);
        this.sncToggle.emit(this.showContent());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiSncComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiSncComponent, isStandalone: true, selector: "eui-snc", inputs: { dotsLength: { classPropertyName: "dotsLength", publicName: "dotsLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sncToggle: "sncToggle" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "@if (showContent()) {\n    <ng-content />\n}\n@if (!showContent()) {\n    <div class=\"eui-snc__hidden-content\">\n        {{ hiddenText() }}\n    </div>\n}\n<button euiButton euiOutline euiWarning euiSizeXS\n    (click)=\"toggleContent()\"\n    [attr.aria-pressed]=\"showContent()\"\n    aria-label=\"Toggle SNC content\">\n    SNC\n</button>\n", styles: [".eui-21 :host.eui-snc{display:flex;flex-direction:row;align-items:center;gap:var(--eui-s-m)}.eui-21 :host.eui-snc .eui-snc__hidden-content{font-size:calc(var(--eui-f-s-m) * 2.5);line-height:0;letter-spacing:-.04em}\n"], dependencies: [{ kind: "component", type: i1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiSncComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-snc', imports: [
                        ...EUI_BUTTON,
                    ], template: "@if (showContent()) {\n    <ng-content />\n}\n@if (!showContent()) {\n    <div class=\"eui-snc__hidden-content\">\n        {{ hiddenText() }}\n    </div>\n}\n<button euiButton euiOutline euiWarning euiSizeXS\n    (click)=\"toggleContent()\"\n    [attr.aria-pressed]=\"showContent()\"\n    aria-label=\"Toggle SNC content\">\n    SNC\n</button>\n", styles: [".eui-21 :host.eui-snc{display:flex;flex-direction:row;align-items:center;gap:var(--eui-s-m)}.eui-21 :host.eui-snc .eui-snc__hidden-content{font-size:calc(var(--eui-f-s-m) * 2.5);line-height:0;letter-spacing:-.04em}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }], sncToggle: [{ type: i0.Output, args: ["sncToggle"] }], dotsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotsLength", required: false }] }] } });

const EUI_SNC = [EuiSncComponent];

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

export { EUI_SNC, EuiSncComponent };
//# sourceMappingURL=eui-components-eui-snc.mjs.map
