@rulecms/source-components-angular

Angular source components for RuleCMS widgets — the Angular counterpart of @rulecms/source-components-react.

Provides the same default-library type ids. Register as the default library on @rulecms/widget-angular:

libraries: { default: sourceComponents }

Installation

npm install @rulecms/widget-angular @rulecms/source-components-angular

Usage

import { Component } from '@angular/core';
import { RuleCMSWidgetComponent, RuleCMSWidgetProviderComponent } from '@rulecms/widget-angular';
import * as sourceComponents from '@rulecms/source-components-angular';

@Component({
  standalone: true,
  imports: [RuleCMSWidgetProviderComponent, RuleCMSWidgetComponent],
  template: `
    <rulecms-widget-provider [token]="token" [libraries]="libraries">
      <rulecms-widget [publishedKey]="publishedKey" />
    </rulecms-widget-provider>
  `,
})
export class PageComponent {
  token = 'your-token';
  publishedKey = 'your-widget-key';
  libraries = { default: sourceComponents };
}

Components

| Type | Description | |---|---| | r-text | Text in a configurable enclosing tag, with inline links | | cloudinary-advanced-image | Responsive Cloudinary image | | r-video | Cloudinary video with poster | | r-icon | A single Lucide <svg> | | r-button | A <button>, or an <a> when it links somewhere, styled by preset | | r-divider | A single <hr> separating two sections | | r-embed | A third-party <iframe> from a pasted URL | | r-list | A <ul> or <ol>, one item per authored line | | r-accordion | A <details>/<summary> disclosure — a summary that expands to its detail, with no JavaScript | | r-mount | A slot for a host-app component registered on rulecms-widget [mounts] by name |

The package also exports the library contract that @rulecms/widget-angular consumes:

• manifest, components, editor
• getSourceComponentsPlugin(), getComponentMetadataForEditing(), getPreviewComponents()
• link helpers (isSafeHref, resolveLinkAttributes, parseInlineLinkMarkers)
• button presets, list/embed/accordion allowlists

Icons

r-icon renders geometry carried on its own attribute rather than looking a name up at render time. The composer stamps that value when the author picks an icon.

Name resolution lives behind a separate entry point that only the composer should import:

import { buildIconAttributeValue, searchIconNames } from '@rulecms/source-components-angular/icon-registry';

Host onClick

r-button reads onClick from widgetInstanceProps. Address the instance on rulecms-widget [componentProps] by column id.

Develop locally

cd source-components-angular
npm install
npm test
npm run lint
npm run typecheck
npm run build

Publishing

Follow __docs__/RUNBOOK_version-bump-and-release.md.

Increment version

# Patch version (0.1.0 -> 0.1.1)
npm run version:patch

# Minor version (0.1.0 -> 0.2.0)
npm run version:minor

# Major version (0.1.0 -> 1.0.0)
npm run version:major

Publish to npm

Push the version tag. GitHub Actions publishes dist/ via trusted publishing (.github/workflows/publish.yml). Do not run npm run release or npm publish locally except for the first-ever version of a new package (npm cannot attach a trusted publisher until the package exists).

git push && git push --tags
npm view @rulecms/source-components-angular version

License

UNLICENSED - This is proprietary software for RuleCMS, LLC.