@visuno/angular 0.0.0-stage → 0.1.0

package/esm2022/buttons/buttons.component.mjs

@@ -0,0 +1,215 @@
+// framework/angular/buttons/buttons.component.ts
+//
+// Native Angular port of the Button from framework/react/buttons/Buttons.tsx.
+// A pill button in one of five styles and three sizes, with busy, done and
+// pressed states. An async click handler drives the busy -> done face itself.
+// Inputs mirror the React ButtonProps; the label comes via content projection
+// (or the `label` input), callbacks become an @Output() click.
+//
+// The optional round icon button (ButtonIcon) and the copy button (ButtonCopy)
+// are ported in the same file for completeness.
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, } from '@angular/core';
+import { VoIconComponent } from '../core/icon.component';
+import * as i0 from "@angular/core";
+import * as i1 from "../core/reduced-motion.service";
+/** The class for a variant: ink, the old name, draws as primary. */
+const variantClass = (v) => v ? 'vo-' + (v === 'ink' ? 'primary' : v) : null;
+/** A pill button in one of the site's five styles and three sizes, with busy, done and pressed states. */
+export class ButtonComponent {
+    constructor(motion) {
+        this.motion = motion;
+        this.size = 'md';
+        /** spin, or think: the agent's four turning dots with a shimmering label. */
+        this.busyGlyph = 'spin';
+        /** How long the done face stays when the button runs itself. */
+        this.doneFor = 1800;
+        /** Going back from done to the label blurs across (the default) instead of switching at once. */
+        this.fadeBack = true;
+        /** Emitted on a plain click (when not busy/done). */
+        this.clicked = new EventEmitter();
+        // an async handler that returns a promise drives the button itself
+        this.auto = 'idle';
+        this.alive = true;
+        /** True while the face blurs out before it is swapped. */
+        this.out = false;
+    }
+    get isBusy() {
+        return this.busy ?? this.auto === 'busy';
+    }
+    get isDone() {
+        return !this.isBusy && (this.done ?? this.auto === 'done');
+    }
+    get think() {
+        return this.isBusy && this.busyGlyph === 'think';
+    }
+    get variantCls() {
+        return variantClass(this.variant);
+    }
+    get shownLabel() {
+        if (this.isBusy)
+            return this.busyLabel ?? this.label;
+        if (this.isDone)
+            return this.doneLabel ?? this.label;
+        return this.label;
+    }
+    onClick(e) {
+        if (this.isBusy || this.isDone)
+            return;
+        this.clicked.emit(e);
+        const r = this.handler?.();
+        if (!r || typeof r.then !== 'function')
+            return;
+        this.auto = 'busy';
+        r.then(() => {
+            if (!this.alive)
+                return;
+            this.auto = 'done';
+            this.timer = setTimeout(() => this.back(), this.doneFor);
+        }, () => {
+            if (this.alive)
+                this.auto = 'idle';
+        });
+    }
+    /** Blurs the done face out before it becomes the idle label again (fadeBack). */
+    back() {
+        if (!this.fadeBack) {
+            this.auto = 'idle';
+            return;
+        }
+        this.out = true;
+        this.swapTimer = setTimeout(() => {
+            this.auto = 'idle';
+            this.out = false;
+        }, this.motion.reduce() ? 0 : 170);
+    }
+    ngOnDestroy() {
+        this.alive = false;
+        clearTimeout(this.timer);
+        clearTimeout(this.swapTimer);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: i1.ReducedMotionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "vo-button", inputs: { variant: "variant", size: "size", icon: "icon", label: "label", busy: "busy", done: "done", busyLabel: "busyLabel", doneLabel: "doneLabel", doneIcon: "doneIcon", busyGlyph: "busyGlyph", success: "success", doneFor: "doneFor", fadeBack: "fadeBack", pressed: "pressed", handler: "handler" }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <span data-vo="" style="display:contents">
+      <button
+        type="button"
+        class="vo-pill"
+        [class.vo-sm]="size === 'sm'"
+        [class.vo-btx-lg]="size === 'lg'"
+        [class.vo-busy]="isBusy"
+        [class.vo-done]="isDone"
+        [class.vo-btx-load]="isDone && success"
+        [class.vo-ok]="isDone && success"
+        [class]="variantCls"
+        [attr.aria-busy]="isBusy ? true : null"
+        [attr.aria-pressed]="pressed ?? null"
+        (click)="onClick($event)"
+      >
+        <span class="vo-sw" [class.vo-out]="out" style="display:inline-flex;align-items:center;gap:7px">
+          @if (isBusy) {
+            @if (think) {
+              <span class="vo-think vo-on" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
+              <span class="vo-shim">{{ shownLabel }}</span>
+            } @else {
+              <span class="vo-spin" aria-hidden="true"></span>
+              <span>{{ shownLabel }}</span>
+            }
+          } @else if (isDone) {
+            @if (doneIcon) {
+              <span class="vo-enter" style="display:inline-flex;align-items:center;gap:7px">
+                <vo-icon [name]="doneIcon" size="xs"></vo-icon>
+              </span>
+            } @else {
+              <vo-icon name="check" size="xs" class="vo-enter"></vo-icon>
+            }
+            <span>{{ shownLabel }}</span>
+          } @else {
+            @if (icon) {
+              <vo-icon [name]="icon" size="xs"></vo-icon>
+            }
+            <span><ng-content></ng-content>{{ label }}</span>
+          }
+        </span>
+      </button>
+    </span>
+  `, isInline: true, styles: [".vo-btx-lg{height:40px;padding:0 18px;font-size:14px}.vo-btx-load{min-width:100px;transition:min-width .4s var(--vo-ease),background .3s}.vo-btx-load .vo-spin{width:13px;height:13px;border-color:color-mix(in srgb,var(--vo-on-ink) 30%,transparent);border-top-color:var(--vo-on-ink)}.vo-pill.vo-btx-load.vo-ok{background:color-mix(in srgb,var(--vo-ok) 16%,var(--vo-surface));color:var(--vo-ok);opacity:1}@media (hover:hover) and (pointer:fine){.vo-pill.vo-btx-load.vo-ok:hover{background:color-mix(in srgb,var(--vo-ok) 16%,var(--vo-surface));color:var(--vo-ok);opacity:1}}.vo-btx-load.vo-busy{cursor:progress}.vo-pill.vo-sw{display:inline-flex}\n"], dependencies: [{ kind: "component", type: VoIconComponent, selector: "vo-icon", inputs: ["name", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vo-button', standalone: true, encapsulation: ViewEncapsulation.None, imports: [VoIconComponent], template: `
+    <span data-vo="" style="display:contents">
+      <button
+        type="button"
+        class="vo-pill"
+        [class.vo-sm]="size === 'sm'"
+        [class.vo-btx-lg]="size === 'lg'"
+        [class.vo-busy]="isBusy"
+        [class.vo-done]="isDone"
+        [class.vo-btx-load]="isDone && success"
+        [class.vo-ok]="isDone && success"
+        [class]="variantCls"
+        [attr.aria-busy]="isBusy ? true : null"
+        [attr.aria-pressed]="pressed ?? null"
+        (click)="onClick($event)"
+      >
+        <span class="vo-sw" [class.vo-out]="out" style="display:inline-flex;align-items:center;gap:7px">
+          @if (isBusy) {
+            @if (think) {
+              <span class="vo-think vo-on" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
+              <span class="vo-shim">{{ shownLabel }}</span>
+            } @else {
+              <span class="vo-spin" aria-hidden="true"></span>
+              <span>{{ shownLabel }}</span>
+            }
+          } @else if (isDone) {
+            @if (doneIcon) {
+              <span class="vo-enter" style="display:inline-flex;align-items:center;gap:7px">
+                <vo-icon [name]="doneIcon" size="xs"></vo-icon>
+              </span>
+            } @else {
+              <vo-icon name="check" size="xs" class="vo-enter"></vo-icon>
+            }
+            <span>{{ shownLabel }}</span>
+          } @else {
+            @if (icon) {
+              <vo-icon [name]="icon" size="xs"></vo-icon>
+            }
+            <span><ng-content></ng-content>{{ label }}</span>
+          }
+        </span>
+      </button>
+    </span>
+  `, styles: [".vo-btx-lg{height:40px;padding:0 18px;font-size:14px}.vo-btx-load{min-width:100px;transition:min-width .4s var(--vo-ease),background .3s}.vo-btx-load .vo-spin{width:13px;height:13px;border-color:color-mix(in srgb,var(--vo-on-ink) 30%,transparent);border-top-color:var(--vo-on-ink)}.vo-pill.vo-btx-load.vo-ok{background:color-mix(in srgb,var(--vo-ok) 16%,var(--vo-surface));color:var(--vo-ok);opacity:1}@media (hover:hover) and (pointer:fine){.vo-pill.vo-btx-load.vo-ok:hover{background:color-mix(in srgb,var(--vo-ok) 16%,var(--vo-surface));color:var(--vo-ok);opacity:1}}.vo-btx-load.vo-busy{cursor:progress}.vo-pill.vo-sw{display:inline-flex}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ReducedMotionService }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], done: [{
+                type: Input
+            }], busyLabel: [{
+                type: Input
+            }], doneLabel: [{
+                type: Input
+            }], doneIcon: [{
+                type: Input
+            }], busyGlyph: [{
+                type: Input
+            }], success: [{
+                type: Input
+            }], doneFor: [{
+                type: Input
+            }], fadeBack: [{
+                type: Input
+            }], pressed: [{
+                type: Input
+            }], handler: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9idXR0b25zL2J1dHRvbnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlEQUFpRDtBQUNqRCxFQUFFO0FBQ0YsOEVBQThFO0FBQzlFLDJFQUEyRTtBQUMzRSw4RUFBOEU7QUFDOUUsOEVBQThFO0FBQzlFLCtEQUErRDtBQUMvRCxFQUFFO0FBQ0YsK0VBQStFO0FBQy9FLGdEQUFnRDtBQUVoRCxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxFQUNOLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZUFBZSxFQUFtQixNQUFNLHdCQUF3QixDQUFDOzs7QUFPMUUsb0VBQW9FO0FBQ3BFLE1BQU0sWUFBWSxHQUFHLENBQUMsQ0FBaUIsRUFBaUIsRUFBRSxDQUN4RCxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztBQUVuRCwwR0FBMEc7QUFvRDFHLE1BQU0sT0FBTyxlQUFlO0lBOEMxQixZQUE2QixNQUE0QjtRQUE1QixXQUFNLEdBQU4sTUFBTSxDQUFzQjtRQTNDaEQsU0FBSSxHQUFlLElBQUksQ0FBQztRQWVqQyw2RUFBNkU7UUFDcEUsY0FBUyxHQUFxQixNQUFNLENBQUM7UUFHOUMsZ0VBQWdFO1FBQ3ZELFlBQU8sR0FBRyxJQUFJLENBQUM7UUFDeEIsaUdBQWlHO1FBQ3hGLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFVekIscURBQXFEO1FBQzNDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBRW5ELG1FQUFtRTtRQUMzRCxTQUFJLEdBQTZCLE1BQU0sQ0FBQztRQUN4QyxVQUFLLEdBQUcs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Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyQ1QsOHNCQTVDUyxlQUFlOzs0RkErQ2QsZUFBZTtrQkFuRDNCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksaUJBQ0QsaUJBQWlCLENBQUMsSUFBSSxXQUM1QixDQUFDLGVBQWUsQ0FBQyxZQUNoQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTJDVDt5RkFLUSxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsSUFBSTtzQkFBWixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLE9BQU87c0JBQWYsS0FBSztnQkFFRyxPQUFPO3NCQUFmLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxPQUFPO3NCQUFmLEtBQUs7Z0JBTUcsT0FBTztzQkFBZixLQUFLO2dCQUdJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyIvLyBmcmFtZXdvcmsvYW5ndWxhci9idXR0b25zL2J1dHRvbnMuY29tcG9uZW50LnRzXG4vL1xuLy8gTmF0aXZlIEFuZ3VsYXIgcG9ydCBvZiB0aGUgQnV0dG9uIGZyb20gZnJhbWV3b3JrL3JlYWN0L2J1dHRvbnMvQnV0dG9ucy50c3guXG4vLyBBIHBpbGwgYnV0dG9uIGluIG9uZSBvZiBmaXZlIHN0eWxlcyBhbmQgdGhyZWUgc2l6ZXMsIHdpdGggYnVzeSwgZG9uZSBhbmRcbi8vIHByZXNzZWQgc3RhdGVzLiBBbiBhc3luYyBjbGljayBoYW5kbGVyIGRyaXZlcyB0aGUgYnVzeSAtPiBkb25lIGZhY2UgaXRzZWxmLlxuLy8gSW5wdXRzIG1pcnJvciB0aGUgUmVhY3QgQnV0dG9uUHJvcHM7IHRoZSBsYWJlbCBjb21lcyB2aWEgY29udGVudCBwcm9qZWN0aW9uXG4vLyAob3IgdGhlIGBsYWJlbGAgaW5wdXQpLCBjYWxsYmFja3MgYmVjb21lIGFuIEBPdXRwdXQoKSBjbGljay5cbi8vXG4vLyBUaGUgb3B0aW9uYWwgcm91bmQgaWNvbiBidXR0b24gKEJ1dHRvbkljb24pIGFuZCB0aGUgY29weSBidXR0b24gKEJ1dHRvbkNvcHkpXG4vLyBhcmUgcG9ydGVkIGluIHRoZSBzYW1lIGZpbGUgZm9yIGNvbXBsZXRlbmVzcy5cblxuaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE91dHB1dCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVm9JY29uQ29tcG9uZW50LCB0eXBlIFZvSWNvbk5hbWUgfSBmcm9tICcuLi9jb3JlL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IFJlZHVjZWRNb3Rpb25TZXJ2aWNlIH0gZnJvbSAnLi4vY29yZS9yZWR1Y2VkLW1vdGlvbi5zZXJ2aWNlJztcblxuLyoqIHByaW1hcnkgaXMgdGhlIG1haW4gYWN0aW9uLCBvbiB0aGUgYWNjZW50LiBpbmsgaXMgdGhlIG9sZCBuYW1lIGZvciBwcmltYXJ5IGFuZCBzdGlsbCB3b3Jrcy4gKi9cbmV4cG9ydCB0eXBlIEJ1dHRvblZhcmlhbnQgPSAncHJpbWFyeScgfCAnYWNjZW50JyB8ICdzb2Z0JyB8ICdsaW5lJyB8ICdnaG9zdCcgfCAnaW5rJztcbmV4cG9ydCB0eXBlIEJ1dHRvblNpemUgPSAnc20nIHwgJ21kJyB8ICdsZyc7XG5cbi8qKiBUaGUgY2xhc3MgZm9yIGEgdmFyaWFudDogaW5rLCB0aGUgb2xkIG5hbWUsIGRyYXdzIGFzIHByaW1hcnkuICovXG5jb25zdCB2YXJpYW50Q2xhc3MgPSAodj86IEJ1dHRvblZhcmlhbnQpOiBzdHJpbmcgfCBudWxsID0+XG4gIHYgPyAndm8tJyArICh2ID09PSAnaW5rJyA/ICdwcmltYXJ5JyA6IHYpIDogbnVsbDtcblxuLyoqIEEgcGlsbCBidXR0b24gaW4gb25lIG9mIHRoZSBzaXRlJ3MgZml2ZSBzdHlsZXMgYW5kIHRocmVlIHNpemVzLCB3aXRoIGJ1c3ksIGRvbmUgYW5kIHByZXNzZWQgc3RhdGVzLiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndm8tYnV0dG9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaW1wb3J0czogW1ZvSWNvbkNvbXBvbmVudF0sXG4gIHRlbXBsYXRlOiBgXG4gICAgPHNwYW4gZGF0YS12bz1cIlwiIHN0eWxlPVwiZGlzcGxheTpjb250ZW50c1wiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJ2by1waWxsXCJcbiAgICAgICAgW2NsYXNzLnZvLXNtXT1cInNpemUgPT09ICdzbSdcIlxuICAgICAgICBbY2xhc3Mudm8tYnR4LWxnXT1cInNpemUgPT09ICdsZydcIlxuICAgICAgICBbY2xhc3Mudm8tYnVzeV09XCJpc0J1c3lcIlxuICAgICAgICBbY2xhc3Mudm8tZG9uZV09XCJpc0RvbmVcIlxuICAgICAgICBbY2xhc3Mudm8tYnR4LWxvYWRdPVwiaXNEb25lICYmIHN1Y2Nlc3NcIlxuICAgICAgICBbY2xhc3Mudm8tb2tdPVwiaXNEb25lICYmIHN1Y2Nlc3NcIlxuICAgICAgICBbY2xhc3NdPVwidmFyaWFudENsc1wiXG4gICAgICAgIFthdHRyLmFyaWEtYnVzeV09XCJpc0J1c3kgPyB0cnVlIDogbnVsbFwiXG4gICAgICAgIFthdHRyLmFyaWEtcHJlc3NlZF09XCJwcmVzc2VkID8/IG51bGxcIlxuICAgICAgICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbiAgICAgID5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ2by1zd1wiIFtjbGFzcy52by1vdXRdPVwib3V0XCIgc3R5bGU9XCJkaXNwbGF5OmlubGluZS1mbGV4O2FsaWduLWl0ZW1zOmNlbnRlcjtnYXA6N3B4XCI+XG4gICAgICAgICAgQGlmIChpc0J1c3kpIHtcbiAgICAgICAgICAgIEBpZiAodGhpbmspIHtcbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ2by10aGluayB2by1vblwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjxpPjwvaT48aT48L2k+PGk+PC9pPjxpPjwvaT48L3NwYW4+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidm8tc2hpbVwiPnt7IHNob3duTGFiZWwgfX08L3NwYW4+XG4gICAgICAgICAgICB9IEBlbHNlIHtcbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ2by1zcGluXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9zcGFuPlxuICAgICAgICAgICAgICA8c3Bhbj57eyBzaG93bkxhYmVsIH19PC9zcGFuPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIH0gQGVsc2UgaWYgKGlzRG9uZSkge1xuICAgICAgICAgICAgQGlmIChkb25lSWNvbikge1xuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInZvLWVudGVyXCIgc3R5bGU9XCJkaXNwbGF5OmlubGluZS1mbGV4O2FsaWduLWl0ZW1zOmNlbnRlcjtnYXA6N3B4XCI+XG4gICAgICAgICAgICAgICAgPHZvLWljb24gW25hbWVdPVwiZG9uZUljb25cIiBzaXplPVwieHNcIj48L3ZvLWljb24+XG4gICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIH0gQGVsc2Uge1xuICAgICAgICAgICAgICA8dm8taWNvbiBuYW1lPVwiY2hlY2tcIiBzaXplPVwieHNcIiBjbGFzcz1cInZvLWVudGVyXCI+PC92by1pY29uPlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgPHNwYW4+e3sgc2hvd25MYWJlbCB9fTwvc3Bhbj5cbiAgICAgICAgICB9IEBlbHNlIHtcbiAgICAgICAgICAgIEBpZiAoaWNvbikge1xuICAgICAgICAgICAgICA8dm8taWNvbiBbbmFtZV09XCJpY29uXCIgc2l6ZT1cInhzXCI+PC92by1pY29uPlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgPHNwYW4+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50Pnt7IGxhYmVsIH19PC9zcGFuPlxuICAgICAgICAgIH1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9zcGFuPlxuICBgLFxuICBzdHlsZVVybDogJy4vYnV0dG9ucy5jc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAvKiogcHJpbWFyeS9hY2NlbnQgZm9yIHRoZSBtYWluIGFjdGlvbiwgc29mdCBhbmQgbGluZSBmb3IgdGhlIHJlc3QsIGdob3N0IGZvciB0aGUgcXVpZXRlc3QuICovXG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiBCdXR0b25WYXJpYW50O1xuICBASW5wdXQoKSBzaXplOiBCdXR0b25TaXplID0gJ21kJztcbiAgLyoqIEFuIGljb24gYmVmb3JlIHRoZSBsYWJlbC4gKi9cbiAgQElucHV0KCkgaWNvbj86IFZvSWNvbk5hbWU7XG4gIC8qKiBUaGUgbGFiZWwgKGFsdGVybmF0aXZlIHRvIHByb2plY3RlZCBjb250ZW50KS4gKi9cbiAgQElucHV0KCkgbGFiZWw/OiBzdHJpbmc7XG4gIC8qKiBTaG93cyB0aGUgYnVzeSBmYWNlOiBhIHNwaW5uZXIgKG9yIHRoaW5raW5nIGRvdHMpIGFuZCBidXN5TGFiZWwuIENsaWNrcyBhcmUgaWdub3JlZC4gKi9cbiAgQElucHV0KCkgYnVzeT86IGJvb2xlYW47XG4gIC8qKiBTaG93cyB0aGUgZG9uZSBmYWNlOiBhIGNoZWNrIHRoYXQgcG9wcyBpbiBhbmQgZG9uZUxhYmVsLiBDbGlja3MgYXJlIGlnbm9yZWQuICovXG4gIEBJbnB1dCgpIGRvbmU/OiBib29sZWFuO1xuICAvKiogVGhlIGxhYmVsIHdoaWxlIGJ1c3ksIGxpa2UgXCJQdWJsaXNoaW5nXCIuIERlZmF1bHRzIHRvIHRoZSBsYWJlbC4gKi9cbiAgQElucHV0KCkgYnVzeUxhYmVsPzogc3RyaW5nO1xuICAvKiogVGhlIGxhYmVsIG9uY2UgZG9uZSwgbGlrZSBcIlB1Ymxpc2hlZFwiLiBEZWZhdWx0cyB0byB0aGUgbGFiZWwuICovXG4gIEBJbnB1dCgpIGRvbmVMYWJlbD86IHN0cmluZztcbiAgLyoqIFRoZSBpY29uIG9uIHRoZSBkb25lIGZhY2UuIERlZmF1bHRzIHRvIGEgY2hlY2sgdGhhdCBwb3BzIGluLiAqL1xuICBASW5wdXQoKSBkb25lSWNvbj86IFZvSWNvbk5hbWU7XG4gIC8qKiBzcGluLCBvciB0aGluazogdGhlIGFnZW50J3MgZm91ciB0dXJuaW5nIGRvdHMgd2l0aCBhIHNoaW1tZXJpbmcgbGFiZWwuICovXG4gIEBJbnB1dCgpIGJ1c3lHbHlwaDogJ3NwaW4nIHwgJ3RoaW5rJyA9ICdzcGluJztcbiAgLyoqIFRoZSBkb25lIGZhY2UgdHVybnMgZ3JlZW4uICovXG4gIEBJbnB1dCgpIHN1Y2Nlc3M/OiBib29sZWFuO1xuICAvKiogSG93IGxvbmcgdGhlIGRvbmUgZmFjZSBzdGF5cyB3aGVuIHRoZSBidXR0b24gcnVucyBpdHNlbGYuICovXG4gIEBJbnB1dCgpIGRvbmVGb3IgPSAxODAwO1xuICAvKiogR29pbmcgYmFjayBmcm9tIGRvbmUgdG8gdGhlIGxhYmVsIGJsdXJzIGFjcm9zcyAodGhlIGRlZmF1bHQpIGluc3RlYWQgb2Ygc3dpdGNoaW5nIGF0IG9uY2UuICovXG4gIEBJbnB1dCgpIGZhZGVCYWNrID0gdHJ1ZTtcbiAgLyoqIEZvciBhIHRvZ2dsZTogd2hldGhlciBpdCBpcyBvbiwgYXMgYXJpYS1wcmVzc2VkLiAqL1xuICBASW5wdXQoKSBwcmVzc2VkPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogQSBwbGFpbiBjbGljay4gUmV0dXJuIGEgUHJvbWlzZSAocmVzb2x2ZSB3aXRoIGFueSB2YWx1ZSkgYW5kIHRoZSBidXR0b25cbiAgICogcnVucyBieSBpdHNlbGY6IGJ1c3kgdW50aWwgaXQgc2V0dGxlcywgdGhlbiBkb25lIGZvciBgZG9uZUZvcmAgbXMuXG4gICAqL1xuICBASW5wdXQoKSBoYW5kbGVyPzogKCkgPT4gdm9pZCB8IFByb21pc2U8dW5rbm93bj47XG5cbiAgLyoqIEVtaXR0ZWQgb24gYSBwbGFpbiBjbGljayAod2hlbiBub3QgYnVzeS9kb25lKS4gKi9cbiAgQE91dHB1dCgpIGNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG5cbiAgLy8gYW4gYXN5bmMgaGFuZGxlciB0aGF0IHJldHVybnMgYSBwcm9taXNlIGRyaXZlcyB0aGUgYnV0dG9uIGl0c2VsZlxuICBwcml2YXRlIGF1dG86ICdpZGxlJyB8ICdidXN5JyB8ICdkb25lJyA9ICdpZGxlJztcbiAgcHJpdmF0ZSBhbGl2ZSA9IHRydWU7XG4gIHByaXZhdGUgdGltZXI/OiBSZXR1cm5UeXBlPHR5cGVvZiBzZXRUaW1lb3V0PjtcbiAgcHJpdmF0ZSBzd2FwVGltZXI/OiBSZXR1cm5UeXBlPHR5cGVvZiBzZXRUaW1lb3V0PjtcbiAgLyoqIFRydWUgd2hpbGUgdGhlIGZhY2UgYmx1cnMgb3V0IGJlZm9yZSBpdCBpcyBzd2FwcGVkLiAqL1xuICBvdXQgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IG1vdGlvbjogUmVkdWNlZE1vdGlvblNlcnZpY2UpIHt9XG5cbiAgZ2V0IGlzQnVzeSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5idXN5ID8/IHRoaXMuYXV0byA9PT0gJ2J1c3knO1xuICB9XG4gIGdldCBpc0RvbmUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICF0aGlzLmlzQnVzeSAmJiAodGhpcy5kb25lID8/IHRoaXMuYXV0byA9PT0gJ2RvbmUnKTtcbiAgfVxuICBnZXQgdGhpbmsoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuaXNCdXN5ICYmIHRoaXMuYnVzeUdseXBoID09PSAndGhpbmsnO1xuICB9XG4gIGdldCB2YXJpYW50Q2xzKCk6IHN0cmluZyB8IG51bGwge1xuICAgIHJldHVybiB2YXJpYW50Q2xhc3ModGhpcy52YXJpYW50KTtcbiAgfVxuXG4gIGdldCBzaG93bkxhYmVsKCk6IHN0cmluZyB8IHVuZGVmaW5lZCB7XG4gICAgaWYgKHRoaXMuaXNCdXN5KSByZXR1cm4gdGhpcy5idXN5TGFiZWwgPz8gdGhpcy5sYWJlbDtcbiAgICBpZiAodGhpcy5pc0RvbmUpIHJldHVybiB0aGlzLmRvbmVMYWJlbCA/PyB0aGlzLmxhYmVsO1xuICAgIHJldHVybiB0aGlzLmxhYmVsO1xuICB9XG5cbiAgb25DbGljayhlOiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXNCdXN5IHx8IHRoaXMuaXNEb25lKSByZXR1cm47XG4gICAgdGhpcy5jbGlja2VkLmVtaXQoZSk7XG4gICAgY29uc3QgciA9IHRoaXMuaGFuZGxlcj8uKCk7XG4gICAgaWYgKCFyIHx8IHR5cGVvZiAociBhcyBQcm9taXNlPHVua25vd24+KS50aGVuICE9PSAnZnVuY3Rpb24nKSByZXR1cm47XG4gICAgdGhpcy5hdXRvID0gJ2J1c3knO1xuICAgIChyIGFzIFByb21pc2U8dW5rbm93bj4pLnRoZW4oXG4gICAgICAoKSA9PiB7XG4gICAgICAgIGlmICghdGhpcy5hbGl2ZSkgcmV0dXJuO1xuICAgICAgICB0aGlzLmF1dG8gPSAnZG9uZSc7XG4gICAgICAgIHRoaXMudGltZXIgPSBzZXRUaW1lb3V0KCgpID0+IHRoaXMuYmFjaygpLCB0aGlzLmRvbmVGb3IpO1xuICAgICAgfSxcbiAgICAgICgpID0+IHtcbiAgICAgICAgaWYgKHRoaXMuYWxpdmUpIHRoaXMuYXV0byA9ICdpZGxlJztcbiAgICAgIH0sXG4gICAgKTtcbiAgfVxuXG4gIC8qKiBCbHVycyB0aGUgZG9uZSBmYWNlIG91dCBiZWZvcmUgaXQgYmVjb21lcyB0aGUgaWRsZSBsYWJlbCBhZ2FpbiAoZmFkZUJhY2spLiAqL1xuICBwcml2YXRlIGJhY2soKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmZhZGVCYWNrKSB7XG4gICAgICB0aGlzLmF1dG8gPSAnaWRsZSc7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMub3V0ID0gdHJ1ZTtcbiAgICB0aGlzLnN3YXBUaW1lciA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiB7XG4gICAgICAgIHRoaXMuYXV0byA9ICdpZGxlJztcbiAgICAgICAgdGhpcy5vdXQgPSBmYWxzZTtcbiAgICAgIH0sXG4gICAgICB0aGlzLm1vdGlvbi5yZWR1Y2UoKSA/IDAgOiAxNzAsXG4gICAgKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuYWxpdmUgPSBmYWxzZTtcbiAgICBjbGVhclRpbWVvdXQodGhpcy50aW1lcik7XG4gICAgY2xlYXJUaW1lb3V0KHRoaXMuc3dhcFRpbWVyKTtcbiAgfVxufVxuIl19

package/esm2022/card/card.component.mjs

@@ -0,0 +1,107 @@
+// framework/angular/card/card.component.ts
+//
+// Native Angular port of framework/react/card/Card.tsx.
+// A surface you drop other components onto, with an optional header, body and
+// footer. Inputs mirror the React props; content is projected via <ng-content>
+// with named slots for the header end and the footer.
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+export class CardComponent {
+    constructor() {
+        /** How the footer's actions align. 'end' by default. */
+        this.footerAlign = 'end';
+        /** Inset for header/body/footer. 'md' by default. */
+        this.pad = 'md';
+        /** Makes the whole card a hit target: lifts on hover, takes focus, fires (clicked) on Enter/Space. */
+        this.interactive = false;
+        /** Emitted when an interactive card is activated (click or Enter/Space). */
+        this.clicked = new EventEmitter();
+    }
+    onKeyDown(e) {
+        if (!this.interactive)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.clicked.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "vo-card", inputs: { title: "title", subtitle: "subtitle", footerAlign: "footerAlign", pad: "pad", interactive: "interactive" }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <div
+      class="vo-crd"
+      [attr.data-pad]="pad === 'md' ? null : pad"
+      [attr.data-interactive]="interactive ? 'true' : null"
+      [attr.role]="interactive ? 'button' : null"
+      [attr.tabindex]="interactive ? 0 : null"
+      (click)="interactive && clicked.emit()"
+      (keydown)="onKeyDown($event)"
+    >
+      @if (title || subtitle) {
+        <div class="vo-crd-h">
+          <div class="vo-crd-hl">
+            @if (title) {
+              <span class="vo-crd-t">{{ title }}</span>
+            }
+            @if (subtitle) {
+              <span class="vo-crd-sub vo-muted">{{ subtitle }}</span>
+            }
+          </div>
+          <ng-content select="[card-action]"></ng-content>
+        </div>
+      }
+      <div class="vo-crd-b">
+        <ng-content></ng-content>
+      </div>
+      <div class="vo-crd-f" [attr.data-align]="footerAlign === 'end' ? null : footerAlign">
+        <ng-content select="[card-footer]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [".vo-crd{--vo-crd-pad:var(--vo-s-4);display:flex;flex-direction:column;min-width:0;background:var(--vo-surface);border-radius:var(--vo-r-card);box-shadow:var(--vo-shadow)}.vo-crd[data-pad=sm]{--vo-crd-pad:var(--vo-s-3)}.vo-crd[data-pad=none]{--vo-crd-pad:0}.vo-crd-h{display:flex;align-items:flex-start;gap:var(--vo-s-3);padding:var(--vo-crd-pad);padding-bottom:0}.vo-crd-hl{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.vo-crd-t{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--vo-fg)}.vo-crd-sub{font-size:12.5px}.vo-crd-h>:not(.vo-crd-hl){flex:none}.vo-crd-b{padding:var(--vo-crd-pad);display:flex;flex-direction:column;gap:var(--vo-s-2);min-width:0;font-size:13px;color:var(--vo-fg2)}.vo-crd-b p{margin:0;line-height:1.5}.vo-crd-f{display:flex;align-items:center;justify-content:flex-end;gap:var(--vo-s-2);padding:var(--vo-crd-pad);padding-top:0}.vo-crd-f[data-align=start]{justify-content:flex-start}.vo-crd-f[data-align=between]{justify-content:space-between}.vo-crd-f:empty{display:none}.vo-crd[data-interactive=true]{cursor:pointer;transition:transform .45s var(--vo-ease),box-shadow .3s}@media (hover:hover) and (pointer:fine){.vo-crd[data-interactive=true]:hover{transform:translateY(-2px);box-shadow:var(--vo-shadow-pop)}}.vo-crd[data-interactive=true]:focus-visible{outline:2px solid var(--vo-focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){.vo-crd[data-interactive=true]{transition:box-shadow .3s}}@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){.vo-crd[data-interactive=true]:hover{transform:none}}:root:not([data-style=soft]) .vo-crd:not(:where([data-style=soft],[data-style=soft] *)){box-shadow:inset 0 0 0 1px var(--vo-line)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vo-card', standalone: true, encapsulation: ViewEncapsulation.None, template: `
+    <div
+      class="vo-crd"
+      [attr.data-pad]="pad === 'md' ? null : pad"
+      [attr.data-interactive]="interactive ? 'true' : null"
+      [attr.role]="interactive ? 'button' : null"
+      [attr.tabindex]="interactive ? 0 : null"
+      (click)="interactive && clicked.emit()"
+      (keydown)="onKeyDown($event)"
+    >
+      @if (title || subtitle) {
+        <div class="vo-crd-h">
+          <div class="vo-crd-hl">
+            @if (title) {
+              <span class="vo-crd-t">{{ title }}</span>
+            }
+            @if (subtitle) {
+              <span class="vo-crd-sub vo-muted">{{ subtitle }}</span>
+            }
+          </div>
+          <ng-content select="[card-action]"></ng-content>
+        </div>
+      }
+      <div class="vo-crd-b">
+        <ng-content></ng-content>
+      </div>
+      <div class="vo-crd-f" [attr.data-align]="footerAlign === 'end' ? null : footerAlign">
+        <ng-content select="[card-footer]"></ng-content>
+      </div>
+    </div>
+  `, styles: [".vo-crd{--vo-crd-pad:var(--vo-s-4);display:flex;flex-direction:column;min-width:0;background:var(--vo-surface);border-radius:var(--vo-r-card);box-shadow:var(--vo-shadow)}.vo-crd[data-pad=sm]{--vo-crd-pad:var(--vo-s-3)}.vo-crd[data-pad=none]{--vo-crd-pad:0}.vo-crd-h{display:flex;align-items:flex-start;gap:var(--vo-s-3);padding:var(--vo-crd-pad);padding-bottom:0}.vo-crd-hl{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.vo-crd-t{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--vo-fg)}.vo-crd-sub{font-size:12.5px}.vo-crd-h>:not(.vo-crd-hl){flex:none}.vo-crd-b{padding:var(--vo-crd-pad);display:flex;flex-direction:column;gap:var(--vo-s-2);min-width:0;font-size:13px;color:var(--vo-fg2)}.vo-crd-b p{margin:0;line-height:1.5}.vo-crd-f{display:flex;align-items:center;justify-content:flex-end;gap:var(--vo-s-2);padding:var(--vo-crd-pad);padding-top:0}.vo-crd-f[data-align=start]{justify-content:flex-start}.vo-crd-f[data-align=between]{justify-content:space-between}.vo-crd-f:empty{display:none}.vo-crd[data-interactive=true]{cursor:pointer;transition:transform .45s var(--vo-ease),box-shadow .3s}@media (hover:hover) and (pointer:fine){.vo-crd[data-interactive=true]:hover{transform:translateY(-2px);box-shadow:var(--vo-shadow-pop)}}.vo-crd[data-interactive=true]:focus-visible{outline:2px solid var(--vo-focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){.vo-crd[data-interactive=true]{transition:box-shadow .3s}}@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){.vo-crd[data-interactive=true]:hover{transform:none}}:root:not([data-style=soft]) .vo-crd:not(:where([data-style=soft],[data-style=soft] *)){box-shadow:inset 0 0 0 1px var(--vo-line)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], footerAlign: [{
+                type: Input
+            }], pad: [{
+                type: Input
+            }], interactive: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jYXJkL2NhcmQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDJDQUEyQztBQUMzQyxFQUFFO0FBQ0Ysd0RBQXdEO0FBQ3hELDhFQUE4RTtBQUM5RSwrRUFBK0U7QUFDL0Usc0RBQXNEO0FBRXRELE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBMEMxRixNQUFNLE9BQU8sYUFBYTtJQXJDMUI7UUEwQ0Usd0RBQXdEO1FBQy9DLGdCQUFXLEdBQWdDLEtBQUssQ0FBQztRQUMxRCxxREFBcUQ7UUFDNUMsUUFBRyxHQUFZLElBQUksQ0FBQztRQUM3QixzR0FBc0c7UUFDN0YsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFFN0IsNEVBQTRFO1FBQ2xFLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBUzlDO0lBUEMsU0FBUyxDQUFDLENBQWdCO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVztZQUFFLE9BQU87UUFDOUIsSUFBSSxDQUFDLENBQUMsR0FBRyxLQUFLLE9BQU8sSUFBSSxDQUFDLENBQUMsR0FBRyxLQUFLLEdBQUcsRUFBRSxDQUFDO1lBQ3ZDLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3RCLENBQUM7SUFDSCxDQUFDOytHQXJCVSxhQUFhO21HQUFiLGFBQWEsME5BakNkOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E4QlQ7OzRGQUdVLGFBQWE7a0JBckN6QixTQUFTOytCQUNFLFNBQVMsY0FDUCxJQUFJLGlCQUNELGlCQUFpQixDQUFDLElBQUksWUFDM0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQThCVDs4QkFLUSxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxXQUFXO3NCQUFuQixLQUFLO2dCQUVHLEdBQUc7c0JBQVgsS0FBSztnQkFFRyxXQUFXO3NCQUFuQixLQUFLO2dCQUdJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyIvLyBmcmFtZXdvcmsvYW5ndWxhci9jYXJkL2NhcmQuY29tcG9uZW50LnRzXG4vL1xuLy8gTmF0aXZlIEFuZ3VsYXIgcG9ydCBvZiBmcmFtZXdvcmsvcmVhY3QvY2FyZC9DYXJkLnRzeC5cbi8vIEEgc3VyZmFjZSB5b3UgZHJvcCBvdGhlciBjb21wb25lbnRzIG9udG8sIHdpdGggYW4gb3B0aW9uYWwgaGVhZGVyLCBib2R5IGFuZFxuLy8gZm9vdGVyLiBJbnB1dHMgbWlycm9yIHRoZSBSZWFjdCBwcm9wczsgY29udGVudCBpcyBwcm9qZWN0ZWQgdmlhIDxuZy1jb250ZW50PlxuLy8gd2l0aCBuYW1lZCBzbG90cyBmb3IgdGhlIGhlYWRlciBlbmQgYW5kIHRoZSBmb290ZXIuXG5cbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKiogSG93IG11Y2ggdGhlIGNhcmQgaW5zZXRzIGl0cyBoZWFkZXIsIGJvZHkgYW5kIGZvb3Rlci4gKi9cbmV4cG9ydCB0eXBlIENhcmRQYWQgPSAnbm9uZScgfCAnc20nIHwgJ21kJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndm8tY2FyZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJ2by1jcmRcIlxuICAgICAgW2F0dHIuZGF0YS1wYWRdPVwicGFkID09PSAnbWQnID8gbnVsbCA6IHBhZFwiXG4gICAgICBbYXR0ci5kYXRhLWludGVyYWN0aXZlXT1cImludGVyYWN0aXZlID8gJ3RydWUnIDogbnVsbFwiXG4gICAgICBbYXR0ci5yb2xlXT1cImludGVyYWN0aXZlID8gJ2J1dHRvbicgOiBudWxsXCJcbiAgICAgIFthdHRyLnRhYmluZGV4XT1cImludGVyYWN0aXZlID8gMCA6IG51bGxcIlxuICAgICAgKGNsaWNrKT1cImludGVyYWN0aXZlICYmIGNsaWNrZWQuZW1pdCgpXCJcbiAgICAgIChrZXlkb3duKT1cIm9uS2V5RG93bigkZXZlbnQpXCJcbiAgICA+XG4gICAgICBAaWYgKHRpdGxlIHx8IHN1YnRpdGxlKSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ2by1jcmQtaFwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJ2by1jcmQtaGxcIj5cbiAgICAgICAgICAgIEBpZiAodGl0bGUpIHtcbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ2by1jcmQtdFwiPnt7IHRpdGxlIH19PC9zcGFuPlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgQGlmIChzdWJ0aXRsZSkge1xuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInZvLWNyZC1zdWIgdm8tbXV0ZWRcIj57eyBzdWJ0aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbY2FyZC1hY3Rpb25dXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIH1cbiAgICAgIDxkaXYgY2xhc3M9XCJ2by1jcmQtYlwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ2by1jcmQtZlwiIFthdHRyLmRhdGEtYWxpZ25dPVwiZm9vdGVyQWxpZ24gPT09ICdlbmQnID8gbnVsbCA6IGZvb3RlckFsaWduXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltjYXJkLWZvb3Rlcl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVVcmw6ICcuL2NhcmQuY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZENvbXBvbmVudCB7XG4gIC8qKiBBIHRpdGxlIHNob3duIGluIHRoZSBoZWFkZXIuICovXG4gIEBJbnB1dCgpIHRpdGxlPzogc3RyaW5nO1xuICAvKiogQSBzdWJ0aXRsZSB1bmRlciB0aGUgdGl0bGUuICovXG4gIEBJbnB1dCgpIHN1YnRpdGxlPzogc3RyaW5nO1xuICAvKiogSG93IHRoZSBmb290ZXIncyBhY3Rpb25zIGFsaWduLiAnZW5kJyBieSBkZWZhdWx0LiAqL1xuICBASW5wdXQoKSBmb290ZXJBbGlnbjogJ3N0YXJ0JyB8ICdlbmQnIHwgJ2JldHdlZW4nID0gJ2VuZCc7XG4gIC8qKiBJbnNldCBmb3IgaGVhZGVyL2JvZHkvZm9vdGVyLiAnbWQnIGJ5IGRlZmF1bHQuICovXG4gIEBJbnB1dCgpIHBhZDogQ2FyZFBhZCA9ICdtZCc7XG4gIC8qKiBNYWtlcyB0aGUgd2hvbGUgY2FyZCBhIGhpdCB0YXJnZXQ6IGxpZnRzIG9uIGhvdmVyLCB0YWtlcyBmb2N1cywgZmlyZXMgKGNsaWNrZWQpIG9uIEVudGVyL1NwYWNlLiAqL1xuICBASW5wdXQoKSBpbnRlcmFjdGl2ZSA9IGZhbHNlO1xuXG4gIC8qKiBFbWl0dGVkIHdoZW4gYW4gaW50ZXJhY3RpdmUgY2FyZCBpcyBhY3RpdmF0ZWQgKGNsaWNrIG9yIEVudGVyL1NwYWNlKS4gKi9cbiAgQE91dHB1dCgpIGNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgb25LZXlEb3duKGU6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuaW50ZXJhY3RpdmUpIHJldHVybjtcbiAgICBpZiAoZS5rZXkgPT09ICdFbnRlcicgfHwgZS5rZXkgPT09ICcgJykge1xuICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgdGhpcy5jbGlja2VkLmVtaXQoKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==