@skyux/help-inline
Version:
This library was generated with [Nx](https://nx.dev).
255 lines (250 loc) • 57 kB
JavaScript
import * as i0 from '@angular/core';
import { NgModule, Pipe, output, input, inject, ChangeDetectionStrategy, Component, computed, TemplateRef, signal, EventEmitter, Output, Input } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
import * as i4 from '@skyux/core';
import { SKY_HELP_GLOBAL_OPTIONS, SkyHelpService, SkyIdModule } from '@skyux/core';
import * as i2$1 from '@skyux/i18n';
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
import * as i3 from '@skyux/icon';
import { SkyIconModule } from '@skyux/icon';
import { SkyThemeModule } from '@skyux/theme';
import { switchMap, of } from 'rxjs';
import * as i2 from '@skyux/popovers';
import { SkyPopoverModule } from '@skyux/popovers';
/* istanbul ignore file */
/**
* NOTICE: DO NOT MODIFY THIS FILE!
* The contents of this file were automatically generated by
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-help-inline' schematic.
* To update this file, simply rerun the command.
*/
const RESOURCES = {
'EN-US': {
skyux_help_inline_button_title: { message: 'Show help content' },
skyux_help_inline_aria_label: { message: 'Show help content for {0}' },
},
'FR-CA': {
skyux_help_inline_button_title: {
message: 'Afficher le contenu de l’aide',
},
skyux_help_inline_aria_label: {
message: 'Afficher le contenu de l’aide pour {0}',
},
},
};
SkyLibResourcesService.addResources(RESOURCES);
/**
* Import into any component library module that needs to use resource strings.
*/
class SkyHelpInlineResourcesModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineResourcesModule, exports: [SkyI18nModule] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineResourcesModule, imports: [SkyI18nModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineResourcesModule, decorators: [{
type: NgModule,
args: [{
exports: [SkyI18nModule],
}]
}] });
/**
* Sets the value of `aria-label` for inline help buttons.
* @internal
*/
class SkyHelpInlineAriaLabelPipe {
transform(ariaLabel, labelText, labelledBy, defaultAriaLabel) {
if (labelledBy) {
return;
}
if (labelText) {
return labelText;
}
if (ariaLabel) {
return ariaLabel;
}
return defaultAriaLabel;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineAriaLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineAriaLabelPipe, isStandalone: true, name: "skyHelpInlineAriaLabel" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineAriaLabelPipe, decorators: [{
type: Pipe,
args: [{
name: 'skyHelpInlineAriaLabel',
standalone: true,
}]
}] });
/**
* @internal
*/
class SkyHelpInlineHelpKeyButtonComponent {
constructor() {
this.actionClick = output();
this.ariaLabel = input();
this.ariaLabelledby = input();
this.helpKey = input.required();
this.globalOptions = inject(SKY_HELP_GLOBAL_OPTIONS, {
optional: true,
});
this.helpSvc = inject(SkyHelpService, { optional: true });
}
openHelpKey() {
this.actionClick.emit();
this.helpSvc?.openHelp({
helpKey: this.helpKey(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineHelpKeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: SkyHelpInlineHelpKeyButtonComponent, isStandalone: true, selector: "sky-help-inline-help-key-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
<button
class="sky-help-inline"
type="button"
[attr.aria-controls]="
(helpSvc?.widgetReadyStateChange | async)
? globalOptions?.ariaControls
: null
"
[attr.aria-haspopup]="globalOptions?.ariaHaspopup"
[attr.aria-label]="ariaLabel()"
[attr.aria-labelledby]="ariaLabelledby()"
[ngClass]="{
'sky-help-inline-hidden': !helpSvc,
}"
(click)="openHelpKey()"
>
<ng-content />
</button>
`, isInline: true, styles: [".sky-help-inline:not(.sky-theme-modern *){color:#0974a1;font-size:15px;line-height:1;background-color:transparent;border:none;display:inline-block}.sky-help-inline:not(.sky-theme-modern *):hover{color:#065171;transition:color .15s;cursor:pointer}.sky-help-inline-hidden:not(.sky-theme-modern *){display:none}.sky-help-inline-popover-text:not(.sky-theme-modern *){overflow-wrap:break-word;margin:0}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-help-inline{--sky-override-help-inline-border-radius: var(--modern-size-3);--sky-override-help-inline-box-shadow-focus: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--sky-override-help-inline-color-hover: rgb(6.3, 81.2, 112.7);--sky-override-help-inline-font-size: 15px;--sky-override-help-inline-icon-color: var(--sky-color-icon-action);--sky-override-help-inline-padding-sides: var(--modern-size-6)}:host-context(.sky-theme-modern) .sky-help-inline{font-size:var(--sky-size-icon-s);line-height:1;border:none;outline:none;padding:var(--sky-comp-help_inline-space-inset-top) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-right)) var(--sky-comp-help_inline-space-inset-bottom) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-left));border-radius:var(--sky-override-help-inline-border-radius, var(--sky-border-radius-s));color:var(--sky-override-help-inline-icon-color, var(--sky-color-background-icon_matte-action-heavy));background-color:var(--sky-color-background-action-tertiary-base);display:inline-block;box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}:host-context(.sky-theme-modern) .sky-help-inline:hover{background-color:var(--sky-color-background-action-tertiary-hover);box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover);color:var(--sky-override-help-inline-color-hover, var(--sky-color-icon-action));transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{background-color:var(--sky-color-background-action-tertiary-active);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active)}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible:not(:active){background-color:var(--sky-color-background-action-tertiary-focus);box-shadow:var(--sky-override-help-inline-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active,:host-context(.sky-theme-modern) .sky-help-inline[disabled],:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active{box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled);background-color:var(--sky-color-background-action-tertiary-disabled)}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active.sky-btn-focus{box-shadow:var(--sky-override-button-icon-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}:host-context(.sky-theme-modern) .sky-help-inline-hidden{display:none}::ng-deep .sky-theme-modern .sky-help-inline-popover-text{overflow-wrap:break-word;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineHelpKeyButtonComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], selector: 'sky-help-inline-help-key-button', template: `
<button
class="sky-help-inline"
type="button"
[attr.aria-controls]="
(helpSvc?.widgetReadyStateChange | async)
? globalOptions?.ariaControls
: null
"
[attr.aria-haspopup]="globalOptions?.ariaHaspopup"
[attr.aria-label]="ariaLabel()"
[attr.aria-labelledby]="ariaLabelledby()"
[ngClass]="{
'sky-help-inline-hidden': !helpSvc,
}"
(click)="openHelpKey()"
>
<ng-content />
</button>
`, styles: [".sky-help-inline:not(.sky-theme-modern *){color:#0974a1;font-size:15px;line-height:1;background-color:transparent;border:none;display:inline-block}.sky-help-inline:not(.sky-theme-modern *):hover{color:#065171;transition:color .15s;cursor:pointer}.sky-help-inline-hidden:not(.sky-theme-modern *){display:none}.sky-help-inline-popover-text:not(.sky-theme-modern *){overflow-wrap:break-word;margin:0}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-help-inline{--sky-override-help-inline-border-radius: var(--modern-size-3);--sky-override-help-inline-box-shadow-focus: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--sky-override-help-inline-color-hover: rgb(6.3, 81.2, 112.7);--sky-override-help-inline-font-size: 15px;--sky-override-help-inline-icon-color: var(--sky-color-icon-action);--sky-override-help-inline-padding-sides: var(--modern-size-6)}:host-context(.sky-theme-modern) .sky-help-inline{font-size:var(--sky-size-icon-s);line-height:1;border:none;outline:none;padding:var(--sky-comp-help_inline-space-inset-top) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-right)) var(--sky-comp-help_inline-space-inset-bottom) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-left));border-radius:var(--sky-override-help-inline-border-radius, var(--sky-border-radius-s));color:var(--sky-override-help-inline-icon-color, var(--sky-color-background-icon_matte-action-heavy));background-color:var(--sky-color-background-action-tertiary-base);display:inline-block;box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}:host-context(.sky-theme-modern) .sky-help-inline:hover{background-color:var(--sky-color-background-action-tertiary-hover);box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover);color:var(--sky-override-help-inline-color-hover, var(--sky-color-icon-action));transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{background-color:var(--sky-color-background-action-tertiary-active);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active)}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible:not(:active){background-color:var(--sky-color-background-action-tertiary-focus);box-shadow:var(--sky-override-help-inline-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active,:host-context(.sky-theme-modern) .sky-help-inline[disabled],:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active{box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled);background-color:var(--sky-color-background-action-tertiary-disabled)}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active.sky-btn-focus{box-shadow:var(--sky-override-button-icon-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}:host-context(.sky-theme-modern) .sky-help-inline-hidden{display:none}::ng-deep .sky-theme-modern .sky-help-inline-popover-text{overflow-wrap:break-word;margin:0}\n"] }]
}] });
/**
* @internal
*/
class SkyHelpInlinePopoverButtonComponent {
constructor() {
this.actionClick = output();
this.ariaControls = input();
this.ariaLabel = input();
this.ariaLabelledby = input();
this.popoverContent = input.required();
this.popoverTitle = input();
this.popoverTemplate = computed(() => {
const value = this.popoverContent();
if (value instanceof TemplateRef) {
return value;
}
return undefined;
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlinePopoverButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SkyHelpInlinePopoverButtonComponent, isStandalone: true, selector: "sky-help-inline-popover-button", inputs: { ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, popoverContent: { classPropertyName: "popoverContent", publicName: "popoverContent", isSignal: true, isRequired: true, transformFunction: null }, popoverTitle: { classPropertyName: "popoverTitle", publicName: "popoverTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
<button
class="sky-help-inline"
type="button"
[attr.aria-label]="ariaLabel()"
[attr.aria-labelledby]="ariaLabelledby()"
[skyPopover]="popoverRef"
(click)="actionClick.emit()"
>
<ng-content />
</button>
<sky-popover #popoverRef [popoverTitle]="popoverTitle()">
@if (popoverTemplate(); as template) {
<ng-container *ngTemplateOutlet="template" />
} @else {
<p class="sky-help-inline-popover-text">{{ popoverContent() }}</p>
}
</sky-popover>
`, isInline: true, styles: [".sky-help-inline:not(.sky-theme-modern *){color:#0974a1;font-size:15px;line-height:1;background-color:transparent;border:none;display:inline-block}.sky-help-inline:not(.sky-theme-modern *):hover{color:#065171;transition:color .15s;cursor:pointer}.sky-help-inline-hidden:not(.sky-theme-modern *){display:none}.sky-help-inline-popover-text:not(.sky-theme-modern *){overflow-wrap:break-word;margin:0}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-help-inline{--sky-override-help-inline-border-radius: var(--modern-size-3);--sky-override-help-inline-box-shadow-focus: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--sky-override-help-inline-color-hover: rgb(6.3, 81.2, 112.7);--sky-override-help-inline-font-size: 15px;--sky-override-help-inline-icon-color: var(--sky-color-icon-action);--sky-override-help-inline-padding-sides: var(--modern-size-6)}:host-context(.sky-theme-modern) .sky-help-inline{font-size:var(--sky-size-icon-s);line-height:1;border:none;outline:none;padding:var(--sky-comp-help_inline-space-inset-top) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-right)) var(--sky-comp-help_inline-space-inset-bottom) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-left));border-radius:var(--sky-override-help-inline-border-radius, var(--sky-border-radius-s));color:var(--sky-override-help-inline-icon-color, var(--sky-color-background-icon_matte-action-heavy));background-color:var(--sky-color-background-action-tertiary-base);display:inline-block;box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}:host-context(.sky-theme-modern) .sky-help-inline:hover{background-color:var(--sky-color-background-action-tertiary-hover);box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover);color:var(--sky-override-help-inline-color-hover, var(--sky-color-icon-action));transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{background-color:var(--sky-color-background-action-tertiary-active);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active)}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible:not(:active){background-color:var(--sky-color-background-action-tertiary-focus);box-shadow:var(--sky-override-help-inline-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active,:host-context(.sky-theme-modern) .sky-help-inline[disabled],:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active{box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled);background-color:var(--sky-color-background-action-tertiary-disabled)}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active.sky-btn-focus{box-shadow:var(--sky-override-button-icon-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}:host-context(.sky-theme-modern) .sky-help-inline-hidden{display:none}::ng-deep .sky-theme-modern .sky-help-inline-popover-text{overflow-wrap:break-word;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i2.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i2.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlinePopoverButtonComponent, decorators: [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkyPopoverModule], selector: 'sky-help-inline-popover-button', template: `
<button
class="sky-help-inline"
type="button"
[attr.aria-label]="ariaLabel()"
[attr.aria-labelledby]="ariaLabelledby()"
[skyPopover]="popoverRef"
(click)="actionClick.emit()"
>
<ng-content />
</button>
<sky-popover #popoverRef [popoverTitle]="popoverTitle()">
@if (popoverTemplate(); as template) {
<ng-container *ngTemplateOutlet="template" />
} @else {
<p class="sky-help-inline-popover-text">{{ popoverContent() }}</p>
}
</sky-popover>
`, styles: [".sky-help-inline:not(.sky-theme-modern *){color:#0974a1;font-size:15px;line-height:1;background-color:transparent;border:none;display:inline-block}.sky-help-inline:not(.sky-theme-modern *):hover{color:#065171;transition:color .15s;cursor:pointer}.sky-help-inline-hidden:not(.sky-theme-modern *){display:none}.sky-help-inline-popover-text:not(.sky-theme-modern *){overflow-wrap:break-word;margin:0}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-help-inline{--sky-override-help-inline-border-radius: var(--modern-size-3);--sky-override-help-inline-box-shadow-focus: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--sky-override-help-inline-color-hover: rgb(6.3, 81.2, 112.7);--sky-override-help-inline-font-size: 15px;--sky-override-help-inline-icon-color: var(--sky-color-icon-action);--sky-override-help-inline-padding-sides: var(--modern-size-6)}:host-context(.sky-theme-modern) .sky-help-inline{font-size:var(--sky-size-icon-s);line-height:1;border:none;outline:none;padding:var(--sky-comp-help_inline-space-inset-top) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-right)) var(--sky-comp-help_inline-space-inset-bottom) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-left));border-radius:var(--sky-override-help-inline-border-radius, var(--sky-border-radius-s));color:var(--sky-override-help-inline-icon-color, var(--sky-color-background-icon_matte-action-heavy));background-color:var(--sky-color-background-action-tertiary-base);display:inline-block;box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}:host-context(.sky-theme-modern) .sky-help-inline:hover{background-color:var(--sky-color-background-action-tertiary-hover);box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover);color:var(--sky-override-help-inline-color-hover, var(--sky-color-icon-action));transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{background-color:var(--sky-color-background-action-tertiary-active);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active)}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible:not(:active){background-color:var(--sky-color-background-action-tertiary-focus);box-shadow:var(--sky-override-help-inline-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active,:host-context(.sky-theme-modern) .sky-help-inline[disabled],:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active{box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled);background-color:var(--sky-color-background-action-tertiary-disabled)}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active.sky-btn-focus{box-shadow:var(--sky-override-button-icon-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}:host-context(.sky-theme-modern) .sky-help-inline-hidden{display:none}::ng-deep .sky-theme-modern .sky-help-inline-popover-text{overflow-wrap:break-word;margin:0}\n"] }]
}] });
/**
* Inserts a help button beside an element, such as a field, to display contextual information about the element.
*/
class SkyHelpInlineComponent {
constructor() {
this.#labelText = signal(undefined);
this.#resourcesSvc = inject(SkyLibResourcesService);
/**
* Fires when the user clicks the help inline button.
*/
this.actionClick = new EventEmitter();
this.defaultAriaLabel = toSignal(this.#resourcesSvc.getString('skyux_help_inline_button_title'));
this.labelTextResolved = toSignal(toObservable(this.#labelText).pipe(switchMap((labelText) => {
if (labelText) {
return this.#resourcesSvc.getString('skyux_help_inline_aria_label', labelText);
}
return of(undefined);
})));
}
#labelText;
#resourcesSvc;
/**
* The label of the component the help inline button is attached to.
*/
set labelText(value) {
this.#labelText.set(value);
}
onClick() {
this.actionClick.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SkyHelpInlineComponent, isStandalone: true, selector: "sky-help-inline", inputs: { ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", ariaLabel: "ariaLabel", helpKey: "helpKey", labelledBy: "labelledBy", labelText: "labelText", popoverContent: "popoverContent", popoverTitle: "popoverTitle" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "@let ariaLabelResolved =\n ariaLabel\n | skyHelpInlineAriaLabel\n : labelTextResolved()\n : labelledBy\n : defaultAriaLabel();\n\n@let ariaLabelledbyResolved =\n labelledBy ? labelledByPrefixRef.id + ' ' + labelledBy : undefined;\n\n@if (helpKey) {\n <sky-help-inline-help-key-button\n [ariaLabel]=\"ariaLabelResolved\"\n [ariaLabelledby]=\"ariaLabelledbyResolved\"\n [helpKey]=\"helpKey\"\n (actionClick)=\"actionClick.emit()\"\n >\n <ng-container [ngTemplateOutlet]=\"icon\" />\n </sky-help-inline-help-key-button>\n} @else if (popoverContent) {\n <sky-help-inline-popover-button\n [ariaLabel]=\"ariaLabelResolved\"\n [ariaLabelledby]=\"ariaLabelledbyResolved\"\n [popoverContent]=\"popoverContent\"\n [popoverTitle]=\"popoverTitle\"\n (actionClick)=\"actionClick.emit()\"\n >\n <ng-container [ngTemplateOutlet]=\"icon\" />\n </sky-help-inline-popover-button>\n} @else {\n <button\n class=\"sky-help-inline\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaControls && (ariaExpanded ?? false)\"\n [attr.aria-label]=\"ariaLabelResolved\"\n [attr.aria-labelledby]=\"ariaLabelledbyResolved\"\n (click)=\"onClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"icon\" />\n </button>\n}\n\n<ng-template #icon>\n <sky-icon iconName=\"info\" iconSize=\"s\" variant=\"solid\" />\n</ng-template>\n\n<span #labelledByPrefixRef=\"skyId\" hidden skyId>{{\n 'skyux_help_inline_aria_label' | skyLibResources: ''\n}}</span>\n", styles: [".sky-help-inline:not(.sky-theme-modern *){color:#0974a1;font-size:15px;line-height:1;background-color:transparent;border:none;display:inline-block}.sky-help-inline:not(.sky-theme-modern *):hover{color:#065171;transition:color .15s;cursor:pointer}.sky-help-inline-hidden:not(.sky-theme-modern *){display:none}.sky-help-inline-popover-text:not(.sky-theme-modern *){overflow-wrap:break-word;margin:0}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-help-inline{--sky-override-help-inline-border-radius: var(--modern-size-3);--sky-override-help-inline-box-shadow-focus: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--sky-override-help-inline-color-hover: rgb(6.3, 81.2, 112.7);--sky-override-help-inline-font-size: 15px;--sky-override-help-inline-icon-color: var(--sky-color-icon-action);--sky-override-help-inline-padding-sides: var(--modern-size-6)}:host-context(.sky-theme-modern) .sky-help-inline{font-size:var(--sky-size-icon-s);line-height:1;border:none;outline:none;padding:var(--sky-comp-help_inline-space-inset-top) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-right)) var(--sky-comp-help_inline-space-inset-bottom) var(--sky-override-help-inline-padding-sides, var(--sky-comp-help_inline-space-inset-left));border-radius:var(--sky-override-help-inline-border-radius, var(--sky-border-radius-s));color:var(--sky-override-help-inline-icon-color, var(--sky-color-background-icon_matte-action-heavy));background-color:var(--sky-color-background-action-tertiary-base);display:inline-block;box-shadow:inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base)}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}:host-context(.sky-theme-modern) .sky-help-inline:hover{background-color:var(--sky-color-background-action-tertiary-hover);box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover);color:var(--sky-override-help-inline-color-hover, var(--sky-color-icon-action));transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-active{background-color:var(--sky-color-background-action-tertiary-active);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active)}:host-context(.sky-theme-modern) .sky-help-inline:focus-visible:not(:active){background-color:var(--sky-color-background-action-tertiary-focus);box-shadow:var(--sky-override-help-inline-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active,:host-context(.sky-theme-modern) .sky-help-inline[disabled],:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active{box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled);background-color:var(--sky-color-background-action-tertiary-disabled)}:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline.sky-btn-disabled.sky-btn-active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:hover.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:focus-visible.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-focus.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled]:active.sky-btn-focus,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active:focus-visible,:host-context(.sky-theme-modern) .sky-help-inline[disabled].sky-btn-active.sky-btn-focus{box-shadow:var(--sky-override-button-icon-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}:host-context(.sky-theme-modern) .sky-help-inline-hidden{display:none}::ng-deep .sky-theme-modern .sky-help-inline-popover-text{overflow-wrap:break-word;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SkyHelpInlineAriaLabelPipe, name: "skyHelpInlineAriaLabel" }, { kind: "component", type: SkyHelpInlineHelpKeyButtonComponent, selector: "sky-help-inline-help-key-button", inputs: ["ariaLabel", "ariaLabelledby", "helpKey"], outputs: ["actionClick"] }, { kind: "component", type: SkyHelpInlinePopoverButtonComponent, selector: "sky-help-inline-popover-button", inputs: ["ariaControls", "ariaLabel", "ariaLabelledby", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyHelpInlineResourcesModule }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i4.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyHelpInlineComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-help-inline', imports: [
CommonModule,
SkyHelpInlineAriaLabelPipe,
SkyHelpInlineHelpKeyButtonComponent,
SkyHelpInlinePopoverButtonComponent,
SkyHelpInlineResourcesModule,
SkyIconModule,
SkyIdModule,
SkyThemeModule,
], template: "@let ariaLabelResolved =\n ariaLabel\n | skyHelpInlineAriaLabel\n : labelTextResolved()\n : labelledBy\n : defaultAriaLabel();\n\n@let ariaLabelledbyResolved =\n labelledBy ? labelledByPrefixRef.id + ' ' + labelledBy : undefined;\n\n@if (helpKey) {\n <sky-help-inline-help-key-button\n [ariaLabel]=\"ariaLabelResolved\"\n [ariaLabelledby]=\"ariaLabelledbyResolved\"\n [helpKey]=\"helpKey\"\n (actionClick)=\"actionClick.emit()\"\n >\n <ng-container [ngTemplateOutlet]=\"icon\" />\n </sky-help-inline-help-key-button>\n} @else if (popoverContent) {\n <sky-help-inline-popover-button\n [ariaLabel]=\"ariaLabelResolved\"\n [ariaLabelledby]=\"ariaLabelledbyResolved\"\n [popoverContent]=\"popoverContent\"\n [popoverTitle]=\"popoverTitle\"\n (actionClick)=\"actionClick.emit()\"\n >\n <ng-container [ngTemplateOutlet]=\"icon\" />\n </sky-help-inline-popover-button>\n} @else {\n <button\n class=\"sky-help-inline\"\n type=\"button\"\n [attr.aria-controls]=\"ariaControls\"\n [attr.aria-expanded]=\"ariaControls && (ariaExpanded ?? false)\"\n [attr.aria-label]=\"ariaLabelResolved\"\n [attr.aria-labelledby]=\"ariaLabelledbyResolved\"\n (click)=\"onClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"icon\" />\n </button>\n}\n\n<ng-template #icon>\n <sky-icon iconName=\"info\" iconSize=\"s\" variant=\"solid\" />\n</ng-template>\n\n<span #labelledByPrefixRef=\"skyId\" hidden skyId>{{\n 'skyux_help_inline_aria_label' | skyLibResources: ''\n}}</span>\n", styles: [".sky-help-inline:not(.sky-theme-modern *){color:#0974a1;font-size:15px;line-height:1;background-color:transparent;border:none;display:inline-block}.sky-help-inline:not(.sky-theme-modern *):hover{color:#065171;transition:color .15s;cursor:pointer}.sky-help-inline-hidden:not(.sky-theme-modern *){display:none}.sky-help-inline-popover-text:not(.sky-theme-modern *){overflow-wrap:break-word;margin:0}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-help-inline{--sky-override-help-inline-border-radius: var(--modern-size-3);--sky-override-help-inline-box-shadow-focus: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);--sky-override-help-inline-color-hover: rgb(6.3, 81.2, 112.7);--sky-override-help-inline-font-size: 15px;--sky-override-help-inline-icon-color: var(--sky-color-icon-action);--sky-override-help-inline-padding-sides: var(--modern-size-6)}:host-context(.sky-theme-modern) .sky-help-inline{font-size:var(--sky-size-icon-s);line-height:1;border:none;outline:none;padding: