mirror of https://github.com/affaan-m/ECC.git synced 2026-09-30 21:45:13 +02:00

Files

T

Affaan MustafaandGitHub c70874fae9 feat(pi): curated pi/core skills+prompts profile, CI load test, and 2.2.2 release sync (#3264 )

Adds a curated, Pi-native, skills+prompts-only profile at pi/core/ for downstream packagers that mirror GitHub Releases.

- manifests/pi-core.json: explicit include lists, per-item exclusion reasons, curation rules, safety allowlists; every root skill and command must be classified.
- scripts/build-pi-core.js regenerates pi/core deterministically (package.json from VERSION, LICENSE, README.md, CURATION.md, skills/, commands/); --check fails CI on drift. council is renamed ecc-council inside pi/core only.
- Safety checks: no callable endpoints outside the allowlist, no npx/curl|sh/pip install, no secrets, no absolute home paths, no symlinks, valid frontmatter, no duplicate names.
- CI: build + drift check and an offline Pi CLI load test of pi/core.
- Release: VERSION, package.json and pi/core/package.json at 2.2.2, CHANGELOG, tag-triggered release verification, and a two-week cadence in CONTRIBUTING.md.

pi/core: 123 of 293 skills and 24 of 94 commands; 35,006 characters of skill description text.

2026-09-29 20:24:05 -05:00

2.1 KiB

Raw Blame History

Component Host Elements

The host element is the DOM element that matches a component's selector. The component's template renders inside this element.

Binding to the Host Element

Use the host property in the @Component decorator to bind properties, attributes, styles, and events to the host element. This is the preferred approach over legacy decorators.

@Component({
  selector: 'custom-slider',
  host: {
    'role': 'slider', // Static attribute
    '[attr.aria-valuenow]': 'value', // Attribute binding
    '[class.active]': 'isActive()', // Class binding
    '[style.color]': 'color()', // Style binding
    '[tabIndex]': 'disabled ? -1 : 0', // Property binding
    '(keydown)': 'onKeyDown($event)', // Event binding
  },
})
export class CustomSlider {
  value = 0;
  disabled = false;
  isActive = signal(false);
  color = signal('blue');

  onKeyDown(event: KeyboardEvent) {
    /* ... */
  }
}

Legacy Decorators

@HostBinding and @HostListener are supported for backwards compatibility but should be avoided in new code.

export class CustomSlider {
  @HostBinding('tabIndex')
  get tabIndex() {
    return this.disabled ? -1 : 0;
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    /* ... */
  }
}

Binding Collisions

If both the component (host binding) and the consumer (template binding) bind to the same property:

Static vs Static: The instance (consumer) binding wins.
Static vs Dynamic: The dynamic binding wins.
Dynamic vs Dynamic: The component's host binding wins.

Injecting Host Attributes

Use HostAttributeToken with the inject function to read static attributes from the host element at construction time.

import {Component, HostAttributeToken, inject} from '@angular/core';

@Component({
  selector: 'app-btn',
  template: `<ng-content />`,
})
export class AppButton {
  // Throws error if 'type' is missing unless injected with { optional: true }
  type = inject(new HostAttributeToken('type'));
}

Usage:

<app-btn type="primary">Click Me</app-btn>

2.1 KiB Raw Blame History