@akcelik/strct 4.17.0 → 4.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -22395,6 +22395,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
22395
22395
|
}, styles: [".strct-legend{display:block;font-size:var(--text-sm);color:var(--t2)}.strct-legend__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}.strct-legend--vertical .strct-legend__list{flex-direction:column;flex-wrap:nowrap;gap:2px}.strct-legend__row{display:flex;align-items:center;gap:7px;min-width:0}.strct-legend__row--muted{opacity:.55}.strct-legend__hit{display:flex;align-items:center;gap:7px;min-width:0;padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;color:inherit;cursor:pointer}.strct-legend__hit:hover{background:var(--bg-3)}.strct-legend__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-legend__hit[aria-pressed=false]{opacity:.45}.strct-legend__hit[aria-pressed=false] .strct-legend__label{text-decoration:line-through}.strct-legend__swatch{flex:none;background:var(--strct-legend-color, var(--t3))}.strct-legend__swatch--square{width:9px;height:9px;border-radius:2px}.strct-legend__swatch--dot{width:9px;height:9px;border-radius:50%}.strct-legend__swatch--line{width:14px;height:2px;border-radius:1px}.strct-legend__swatch--dash{width:14px;height:2px;background:repeating-linear-gradient(to right,var(--strct-legend-color, var(--t3)) 0 4px,transparent 4px 7px)}.strct-legend__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-legend__value{margin-inline-start:auto;padding-inline-start:8px;color:var(--t3);font-variant-numeric:tabular-nums}\n"] }]
|
|
22396
22396
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], itemToggle: [{ type: i0.Output, args: ["itemToggle"] }] } });
|
|
22397
22397
|
|
|
22398
|
+
const STEP_LABELS = {
|
|
22399
|
+
pending: 'pending',
|
|
22400
|
+
active: 'in progress',
|
|
22401
|
+
done: 'done',
|
|
22402
|
+
failed: 'failed',
|
|
22403
|
+
skipped: 'skipped',
|
|
22404
|
+
blocked: 'blocked',
|
|
22405
|
+
};
|
|
22406
|
+
/**
|
|
22407
|
+
* Per-step action for `appearance="cards"`. The template's context is the step:
|
|
22408
|
+
*
|
|
22409
|
+
* <ng-template strctStepAction let-step>
|
|
22410
|
+
* <button strct-button size="sm" (click)="run(step)">Run</button>
|
|
22411
|
+
* </ng-template>
|
|
22412
|
+
*/
|
|
22413
|
+
class StrctStepAction {
|
|
22414
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStepAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
22415
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctStepAction, isStandalone: true, selector: "ng-template[strctStepAction]", ngImport: i0 });
|
|
22416
|
+
}
|
|
22417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctStepAction, decorators: [{
|
|
22418
|
+
type: Directive,
|
|
22419
|
+
args: [{ selector: 'ng-template[strctStepAction]' }]
|
|
22420
|
+
}] });
|
|
22421
|
+
/**
|
|
22422
|
+
* A process the user *watches* rather than drives: an update run per host
|
|
22423
|
+
* (Check → Download → Install → Verify), or a numbered method on a landing
|
|
22424
|
+
* page. A wizard's rail is the wrong control — the user did not start each step
|
|
22425
|
+
* and cannot go back to one — and a timeline implies history. Neither says
|
|
22426
|
+
* "skipped" or "blocked".
|
|
22427
|
+
*
|
|
22428
|
+
* <strct-steps [steps]="run" appearance="pills" />
|
|
22429
|
+
* <strct-steps [steps]="method" appearance="cards" numbered />
|
|
22430
|
+
*/
|
|
22431
|
+
class StrctSteps {
|
|
22432
|
+
/** The steps, in order. */
|
|
22433
|
+
steps = input.required(/* @ts-ignore */
|
|
22434
|
+
...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
22435
|
+
/** `pills` (default), `dots` for a long run, `cards` for a numbered method. */
|
|
22436
|
+
appearance = input('pills', /* @ts-ignore */
|
|
22437
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
22438
|
+
/** Vertical stacks the steps and turns the connector into a rail. */
|
|
22439
|
+
orientation = input('horizontal', /* @ts-ignore */
|
|
22440
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
22441
|
+
/** Numbers the pills (cards are always numbered). */
|
|
22442
|
+
numbered = input(false, { ...(ngDevMode ? { debugName: "numbered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
22443
|
+
/** Tighter pills, for one row per host in a long list. */
|
|
22444
|
+
dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
22445
|
+
/** The state words read after each label. */
|
|
22446
|
+
labels = input({}, /* @ts-ignore */
|
|
22447
|
+
...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
22448
|
+
actionTpl = contentChild(StrctStepAction, { ...(ngDevMode ? { debugName: "actionTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
22449
|
+
L = computed(() => ({ ...STEP_LABELS, ...this.labels() }), /* @ts-ignore */
|
|
22450
|
+
...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
|
|
22451
|
+
stateWord(state) {
|
|
22452
|
+
return this.L()[state];
|
|
22453
|
+
}
|
|
22454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSteps, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctSteps, isStandalone: true, selector: "strct-steps", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-steps--dots": "appearance() === 'dots'", "class.strct-steps--cards": "appearance() === 'cards'", "class.strct-steps--vertical": "orientation() === 'vertical'", "class.strct-steps--numbered": "numbered()", "class.strct-steps--dense": "dense()" }, classAttribute: "strct-steps" }, queries: [{ propertyName: "actionTpl", first: true, predicate: StrctStepAction, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
|
|
22456
|
+
<ol class="strct-steps__list">
|
|
22457
|
+
@for (step of steps(); track step.id; let i = $index) {
|
|
22458
|
+
<li
|
|
22459
|
+
class="strct-steps__step"
|
|
22460
|
+
[attr.data-state]="step.state"
|
|
22461
|
+
[attr.aria-current]="step.state === 'active' ? 'step' : null"
|
|
22462
|
+
[attr.title]="appearance() === 'cards' ? null : step.description || null"
|
|
22463
|
+
>
|
|
22464
|
+
<span class="strct-steps__marker" aria-hidden="true">
|
|
22465
|
+
@if (numbered() || appearance() === 'cards') {
|
|
22466
|
+
{{ i + 1 }}
|
|
22467
|
+
}
|
|
22468
|
+
</span>
|
|
22469
|
+
<span class="strct-steps__text">
|
|
22470
|
+
<span class="strct-steps__label">{{ step.label }}</span>
|
|
22471
|
+
@if (appearance() === 'cards' && step.description) {
|
|
22472
|
+
<span class="strct-steps__desc">{{ step.description }}</span>
|
|
22473
|
+
}
|
|
22474
|
+
</span>
|
|
22475
|
+
@if (actionTpl(); as tpl) {
|
|
22476
|
+
<span class="strct-steps__action">
|
|
22477
|
+
<ng-container
|
|
22478
|
+
[ngTemplateOutlet]="tpl"
|
|
22479
|
+
[ngTemplateOutletContext]="{ $implicit: step, step }"
|
|
22480
|
+
/>
|
|
22481
|
+
</span>
|
|
22482
|
+
}
|
|
22483
|
+
<!-- The colour says the state; this says it in words. -->
|
|
22484
|
+
<span class="strct-steps__sr">{{ stateWord(step.state) }}</span>
|
|
22485
|
+
</li>
|
|
22486
|
+
}
|
|
22487
|
+
</ol>
|
|
22488
|
+
`, isInline: true, styles: [".strct-steps{display:block;min-width:0}.strct-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}.strct-steps--vertical .strct-steps__list{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.strct-steps__step{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--b2);border-radius:999px;font-size:var(--text-sm);color:var(--t2);background:var(--bg-1);min-width:0}.strct-steps--dense .strct-steps__step{padding:2px 8px}.strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:\"\";position:absolute;inset-inline-start:-5px;width:5px;height:1px;background:var(--b2)}.strct-steps--vertical .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:14px;top:-7px;width:1px;height:7px}.strct-steps__marker:empty{display:none}.strct-steps__marker{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:600;background:var(--bg-3);color:var(--t2)}.strct-steps__text{display:flex;flex-direction:column;min-width:0}.strct-steps__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-steps__desc{font-size:var(--text-sm);color:var(--t3);white-space:normal}.strct-steps__action{margin-inline-start:auto;padding-inline-start:8px;flex:none}.strct-steps__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-steps__step[data-state=done]{border-color:var(--success);color:var(--success)}.strct-steps__step[data-state=done] .strct-steps__marker{background:var(--success);color:var(--inv)}.strct-steps__step[data-state=active]{border-color:var(--acc);color:var(--acc);background:var(--acc-s)}.strct-steps__step[data-state=active] .strct-steps__marker{background:var(--acc);color:var(--inv)}.strct-steps__step[data-state=failed]{border-color:var(--critical);color:var(--critical)}.strct-steps__step[data-state=failed] .strct-steps__marker{background:var(--critical);color:var(--inv)}.strct-steps__step[data-state=blocked]{border-color:var(--warning);color:var(--warning)}.strct-steps__step[data-state=blocked] .strct-steps__marker{background:var(--warning);color:var(--inv)}.strct-steps__step[data-state=skipped]{color:var(--t3);border-style:dashed}.strct-steps__step[data-state=skipped] .strct-steps__label{text-decoration:line-through}.strct-steps__step[data-state=pending]{color:var(--t3);border-color:var(--t4)}.strct-steps__step[data-state=active]:after{content:\"\";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--acc);animation:strct-steps-pulse 1.4s ease-out infinite;pointer-events:none}@keyframes strct-steps-pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.strct-steps__step[data-state=active]:after{animation:none;opacity:.5;transform:none}}.strct-steps--dots .strct-steps__step{padding:0;border:0;background:none;gap:4px}.strct-steps--dots .strct-steps__label{display:none}.strct-steps--dots .strct-steps__marker{display:inline-flex;width:9px;height:9px;font-size:0}.strct-steps--dots .strct-steps__step[data-state=pending] .strct-steps__marker{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--b3)}.strct-steps--dots .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:-4px;width:4px}.strct-steps--cards .strct-steps__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--strct-steps-card-min, 220px),100%),1fr));gap:var(--space-3)}.strct-steps--cards .strct-steps__step{align-items:flex-start;border-radius:var(--radius-lg);padding:var(--space-3);background:var(--bg-1)}.strct-steps--cards .strct-steps__label{font-weight:600;white-space:normal}.strct-steps--cards .strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22489
|
+
}
|
|
22490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSteps, decorators: [{
|
|
22491
|
+
type: Component,
|
|
22492
|
+
args: [{ selector: 'strct-steps', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: `
|
|
22493
|
+
<ol class="strct-steps__list">
|
|
22494
|
+
@for (step of steps(); track step.id; let i = $index) {
|
|
22495
|
+
<li
|
|
22496
|
+
class="strct-steps__step"
|
|
22497
|
+
[attr.data-state]="step.state"
|
|
22498
|
+
[attr.aria-current]="step.state === 'active' ? 'step' : null"
|
|
22499
|
+
[attr.title]="appearance() === 'cards' ? null : step.description || null"
|
|
22500
|
+
>
|
|
22501
|
+
<span class="strct-steps__marker" aria-hidden="true">
|
|
22502
|
+
@if (numbered() || appearance() === 'cards') {
|
|
22503
|
+
{{ i + 1 }}
|
|
22504
|
+
}
|
|
22505
|
+
</span>
|
|
22506
|
+
<span class="strct-steps__text">
|
|
22507
|
+
<span class="strct-steps__label">{{ step.label }}</span>
|
|
22508
|
+
@if (appearance() === 'cards' && step.description) {
|
|
22509
|
+
<span class="strct-steps__desc">{{ step.description }}</span>
|
|
22510
|
+
}
|
|
22511
|
+
</span>
|
|
22512
|
+
@if (actionTpl(); as tpl) {
|
|
22513
|
+
<span class="strct-steps__action">
|
|
22514
|
+
<ng-container
|
|
22515
|
+
[ngTemplateOutlet]="tpl"
|
|
22516
|
+
[ngTemplateOutletContext]="{ $implicit: step, step }"
|
|
22517
|
+
/>
|
|
22518
|
+
</span>
|
|
22519
|
+
}
|
|
22520
|
+
<!-- The colour says the state; this says it in words. -->
|
|
22521
|
+
<span class="strct-steps__sr">{{ stateWord(step.state) }}</span>
|
|
22522
|
+
</li>
|
|
22523
|
+
}
|
|
22524
|
+
</ol>
|
|
22525
|
+
`, host: {
|
|
22526
|
+
class: 'strct-steps',
|
|
22527
|
+
'[class.strct-steps--dots]': "appearance() === 'dots'",
|
|
22528
|
+
'[class.strct-steps--cards]': "appearance() === 'cards'",
|
|
22529
|
+
'[class.strct-steps--vertical]': "orientation() === 'vertical'",
|
|
22530
|
+
'[class.strct-steps--numbered]': 'numbered()',
|
|
22531
|
+
'[class.strct-steps--dense]': 'dense()',
|
|
22532
|
+
}, styles: [".strct-steps{display:block;min-width:0}.strct-steps__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}.strct-steps--vertical .strct-steps__list{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.strct-steps__step{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--b2);border-radius:999px;font-size:var(--text-sm);color:var(--t2);background:var(--bg-1);min-width:0}.strct-steps--dense .strct-steps__step{padding:2px 8px}.strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:\"\";position:absolute;inset-inline-start:-5px;width:5px;height:1px;background:var(--b2)}.strct-steps--vertical .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:14px;top:-7px;width:1px;height:7px}.strct-steps__marker:empty{display:none}.strct-steps__marker{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:600;background:var(--bg-3);color:var(--t2)}.strct-steps__text{display:flex;flex-direction:column;min-width:0}.strct-steps__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-steps__desc{font-size:var(--text-sm);color:var(--t3);white-space:normal}.strct-steps__action{margin-inline-start:auto;padding-inline-start:8px;flex:none}.strct-steps__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-steps__step[data-state=done]{border-color:var(--success);color:var(--success)}.strct-steps__step[data-state=done] .strct-steps__marker{background:var(--success);color:var(--inv)}.strct-steps__step[data-state=active]{border-color:var(--acc);color:var(--acc);background:var(--acc-s)}.strct-steps__step[data-state=active] .strct-steps__marker{background:var(--acc);color:var(--inv)}.strct-steps__step[data-state=failed]{border-color:var(--critical);color:var(--critical)}.strct-steps__step[data-state=failed] .strct-steps__marker{background:var(--critical);color:var(--inv)}.strct-steps__step[data-state=blocked]{border-color:var(--warning);color:var(--warning)}.strct-steps__step[data-state=blocked] .strct-steps__marker{background:var(--warning);color:var(--inv)}.strct-steps__step[data-state=skipped]{color:var(--t3);border-style:dashed}.strct-steps__step[data-state=skipped] .strct-steps__label{text-decoration:line-through}.strct-steps__step[data-state=pending]{color:var(--t3);border-color:var(--t4)}.strct-steps__step[data-state=active]:after{content:\"\";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--acc);animation:strct-steps-pulse 1.4s ease-out infinite;pointer-events:none}@keyframes strct-steps-pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.strct-steps__step[data-state=active]:after{animation:none;opacity:.5;transform:none}}.strct-steps--dots .strct-steps__step{padding:0;border:0;background:none;gap:4px}.strct-steps--dots .strct-steps__label{display:none}.strct-steps--dots .strct-steps__marker{display:inline-flex;width:9px;height:9px;font-size:0}.strct-steps--dots .strct-steps__step[data-state=pending] .strct-steps__marker{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--b3)}.strct-steps--dots .strct-steps__list>.strct-steps__step+.strct-steps__step:before{inset-inline-start:-4px;width:4px}.strct-steps--cards .strct-steps__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--strct-steps-card-min, 220px),100%),1fr));gap:var(--space-3)}.strct-steps--cards .strct-steps__step{align-items:flex-start;border-radius:var(--radius-lg);padding:var(--space-3);background:var(--bg-1)}.strct-steps--cards .strct-steps__label{font-weight:600;white-space:normal}.strct-steps--cards .strct-steps__list>.strct-steps__step+.strct-steps__step:before{content:none}\n"] }]
|
|
22533
|
+
}], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }], dense: [{ type: i0.Input, args: [{ isSignal: true, alias: "dense", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], actionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctStepAction), { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
22534
|
+
|
|
22535
|
+
/**
|
|
22536
|
+
* A value change, as one phrase: "v10.27 → v10.28". The old value is muted, the
|
|
22537
|
+
* arrow is the library's, the new one is emphasised — and assistive tech hears
|
|
22538
|
+
* a sentence rather than an arrow glyph.
|
|
22539
|
+
*
|
|
22540
|
+
* <strct-change from="v10.27" to="v10.28" mono />
|
|
22541
|
+
*/
|
|
22542
|
+
class StrctChange {
|
|
22543
|
+
/** The value before. */
|
|
22544
|
+
from = input.required(/* @ts-ignore */
|
|
22545
|
+
...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
|
|
22546
|
+
/** The value after. */
|
|
22547
|
+
to = input.required(/* @ts-ignore */
|
|
22548
|
+
...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
|
|
22549
|
+
/** Monospace, for versions and identifiers. */
|
|
22550
|
+
mono = input(false, { ...(ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
22551
|
+
/** What assistive tech hears in place of the arrow (localisable). */
|
|
22552
|
+
label = input((from, to) => `from ${from} to ${to}`, /* @ts-ignore */
|
|
22553
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
22554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChange, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22555
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctChange, isStandalone: true, selector: "strct-change", inputs: { from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: true, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: true, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-change--mono": "mono()" }, classAttribute: "strct-change" }, ngImport: i0, template: `
|
|
22556
|
+
<span class="strct-change__from" aria-hidden="true">{{ from() }}</span>
|
|
22557
|
+
<strct-icon
|
|
22558
|
+
class="strct-change__arrow"
|
|
22559
|
+
strictName="arrowRight"
|
|
22560
|
+
[size]="13"
|
|
22561
|
+
aria-hidden="true"
|
|
22562
|
+
/>
|
|
22563
|
+
<span class="strct-change__to" aria-hidden="true">{{ to() }}</span>
|
|
22564
|
+
<span class="strct-change__sr">{{ label()(from(), to()) }}</span>
|
|
22565
|
+
`, isInline: true, styles: [".strct-change{display:inline-flex;align-items:center;gap:5px;min-width:0}.strct-change--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-change__from{color:var(--t3)}.strct-change__arrow{color:var(--t3);flex:none}.strct-change__to{color:var(--t1);font-weight:600}.strct-change__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22566
|
+
}
|
|
22567
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctChange, decorators: [{
|
|
22568
|
+
type: Component,
|
|
22569
|
+
args: [{ selector: 'strct-change', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
|
|
22570
|
+
<span class="strct-change__from" aria-hidden="true">{{ from() }}</span>
|
|
22571
|
+
<strct-icon
|
|
22572
|
+
class="strct-change__arrow"
|
|
22573
|
+
strictName="arrowRight"
|
|
22574
|
+
[size]="13"
|
|
22575
|
+
aria-hidden="true"
|
|
22576
|
+
/>
|
|
22577
|
+
<span class="strct-change__to" aria-hidden="true">{{ to() }}</span>
|
|
22578
|
+
<span class="strct-change__sr">{{ label()(from(), to()) }}</span>
|
|
22579
|
+
`, host: {
|
|
22580
|
+
class: 'strct-change',
|
|
22581
|
+
'[class.strct-change--mono]': 'mono()',
|
|
22582
|
+
}, styles: [".strct-change{display:inline-flex;align-items:center;gap:5px;min-width:0}.strct-change--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-change__from{color:var(--t3)}.strct-change__arrow{color:var(--t3);flex:none}.strct-change__to{color:var(--t1);font-weight:600}.strct-change__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
|
|
22583
|
+
}], propDecorators: { from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: true }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: true }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
22584
|
+
|
|
22398
22585
|
/**
|
|
22399
22586
|
* A generic anchored overlay panel for arbitrary projected content — the
|
|
22400
22587
|
* public primitive behind menus, signposts and rich pickers:
|
|
@@ -24261,5 +24448,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24261
24448
|
* Generated bundle index. Do not edit.
|
|
24262
24449
|
*/
|
|
24263
24450
|
|
|
24264
|
-
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
24451
|
+
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
24265
24452
|
//# sourceMappingURL=akcelik-strct.mjs.map
|