8 |
10 |
--------------------------------------------------------------------------------
/packages/primitives/popover/src/popover-anchor.token.ts:
--------------------------------------------------------------------------------
1 | import { InjectionToken } from '@angular/core';
2 | import { RdxPopoverAnchorDirective } from './popover-anchor.directive';
3 |
4 | export const RdxPopoverAnchorToken = new InjectionToken
8 |
10 |
--------------------------------------------------------------------------------
/packages/primitives/calendar/src/calendar-grid-head.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'thead[rdxCalendarGridHead]',
5 | host: {
6 | '[attr.aria-hidden]': 'true'
7 | }
8 | })
9 | export class RdxCalendarGridHeadDirective {}
10 |
--------------------------------------------------------------------------------
/packages/primitives/core/src/is-inside-form.ts:
--------------------------------------------------------------------------------
1 | import { ElementRef } from '@angular/core';
2 |
3 | export function isInsideForm(el: ElementRefFeatures
10 |-
11 | {items.map((item) =>
- {item} )} 12 |
16 |
18 |
--------------------------------------------------------------------------------
/apps/radix-ssr-testing/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "module": "commonjs",
6 | "target": "es2016",
7 | "types": ["jest", "node"]
8 | },
9 | "files": ["src/test-setup.ts"],
10 | "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/packages/primitives/accordion/src/accordion-content-presence.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 | import { RdxCollapsibleContentPresenceDirective } from '@radix-ng/primitives/collapsible';
3 |
4 | @Directive({
5 | selector: 'ng-template[rdxAccordionContentPresence]',
6 | hostDirectives: [RdxCollapsibleContentPresenceDirective]
7 | })
8 | export class RdxAccordionContentPresenceDirective {}
9 |
--------------------------------------------------------------------------------
/packages/primitives/menubar/src/menubar-root.directive.ts:
--------------------------------------------------------------------------------
1 | import { CdkMenuBar } from '@angular/cdk/menu';
2 | import { Directive } from '@angular/core';
3 |
4 | @Directive({
5 | selector: '[RdxMenuBarRoot]',
6 | hostDirectives: [CdkMenuBar],
7 | host: {
8 | tabindex: '0',
9 | '[attr.data-orientation]': '"horizontal"'
10 | }
11 | })
12 | export class RdxMenuBarRootDirective {}
13 |
--------------------------------------------------------------------------------
/packages/primitives/tsconfig.schematics.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "declaration": true,
6 | "resolveJsonModule": true,
7 | "module": "CommonJS",
8 | "types": ["node"]
9 | },
10 | "exclude": ["**/*.spec.ts", "**/*.test.ts"],
11 | "include": ["./schematics/**/*.ts"]
12 | }
13 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/utils/typedoc.ts:
--------------------------------------------------------------------------------
1 | import apiPrimitives from '../api-doc/primitives.json';
2 |
3 | export const getComponentData = (componentName: string) => {
4 | for (const key in apiPrimitives) {
5 | const components = apiPrimitives[key].components;
6 | if (componentName in components) {
7 | return components[componentName];
8 | }
9 | }
10 | return null;
11 | };
12 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/components/mdx/TabsContent.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { cn } from '@/utils/utils';
3 | import { TabsContent as TabsComponent } from '../tabs';
4 |
5 | const { class: className, ...rest } = Astro.props;
6 | ---
7 |
8 | ***
10 | `
11 | })
12 | export default class Page {}
13 |
--------------------------------------------------------------------------------
/apps/radix-ssr-testing/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
17 |
19 |
--------------------------------------------------------------------------------
/apps/radix-ssr-testing/src/app/app.config.server.ts:
--------------------------------------------------------------------------------
1 | import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
2 | import { provideServerRendering, withRoutes } from '@angular/ssr';
3 | import { appConfig } from './app.config';
4 | import { serverRoutes } from './app.routes.server';
5 |
6 | const serverConfig: ApplicationConfig = {
7 | providers: [provideServerRendering(withRoutes(serverRoutes))]
8 | };
9 |
10 | export const config = mergeApplicationConfig(appConfig, serverConfig);
11 |
--------------------------------------------------------------------------------
/packages/primitives/menubar/src/menubar-trigger.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 | import { RdxMenuTriggerDirective } from '@radix-ng/primitives/menu';
3 |
4 | @Directive({
5 | selector: '[RdxMenuBarTrigger]',
6 | hostDirectives: [
7 | {
8 | directive: RdxMenuTriggerDirective,
9 | inputs: ['disabled', 'menuTriggerFor', 'sideOffset', 'side', 'align', 'alignOffset']
10 | }
11 | ]
12 | })
13 | export class RdxMenuBarTriggerDirective {}
14 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/pages/llms.txt.ts:
--------------------------------------------------------------------------------
1 | import type { APIRoute } from 'astro';
2 | import { getCollection } from 'astro:content';
3 |
4 | export const GET: APIRoute = async () => {
5 | const posts = await getCollection('primitives');
6 |
7 | let content = '# RadixNG Angular\n\n';
8 | for (const post of posts) {
9 | content += `${post.body}\n\n`;
10 | }
11 |
12 | return new Response(content, {
13 | headers: { 'Content-Type': 'text/plain; charset=utf-8' }
14 | });
15 | };
16 |
--------------------------------------------------------------------------------
/packages/primitives/context-menu/src/context-menu-separator.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 | import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
3 |
4 | @Directive({
5 | selector: '[rdxContextMenuSeparator]',
6 | standalone: true,
7 | hostDirectives: [RdxSeparatorRootDirective],
8 | host: {
9 | role: 'separator',
10 | '[attr.aria-orientation]': "'horizontal'"
11 | }
12 | })
13 | export class RdxContextMenuSeparatorDirective {}
14 |
--------------------------------------------------------------------------------
/packages/primitives/dialog/src/dialog-close.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject } from '@angular/core';
2 | import { RdxDialogRef } from './dialog-ref';
3 |
4 | @Directive({
5 | selector: '[rdxDialogClose]',
6 | standalone: true,
7 | host: {
8 | '(click)': 'onClick()'
9 | }
10 | })
11 | export class RdxDialogCloseDirective {
12 | private readonly ref = inject
11 | Shift + Tab
12 |
13 | `
14 | })
15 | export class KbdComponent {}
16 |
17 | export default KbdComponent;
18 |
--------------------------------------------------------------------------------
/packages/primitives/alert-dialog/src/alert-dialog-cancel.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject } from '@angular/core';
2 | import { RdxAlertDialogService } from './alert-dialog.service';
3 |
4 | @Directive({
5 | selector: '[rdxAlertDialogCancel]',
6 | standalone: true,
7 | host: {
8 | '(click)': 'onClick()'
9 | }
10 | })
11 | export class RdxAlertDialogCancelDirective {
12 | private readonly alertDialogService = inject(RdxAlertDialogService);
13 |
14 | onClick() {
15 | this.alertDialogService.close();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/primitives/hover-card/src/hover-card.types.ts:
--------------------------------------------------------------------------------
1 | export enum RdxHoverCardState {
2 | OPEN = 'open',
3 | CLOSED = 'closed'
4 | }
5 |
6 | export enum RdxHoverCardAction {
7 | OPEN = 'open',
8 | CLOSE = 'close'
9 | }
10 |
11 | export enum RdxHoverCardAttachDetachEvent {
12 | ATTACH = 'attach',
13 | DETACH = 'detach'
14 | }
15 |
16 | export enum RdxHoverCardAnimationStatus {
17 | OPEN_STARTED = 'open_started',
18 | OPEN_ENDED = 'open_ended',
19 | CLOSED_STARTED = 'closed_started',
20 | CLOSED_ENDED = 'closed_ended'
21 | }
22 |
--------------------------------------------------------------------------------
/packages/components/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@radix-ng/components",
3 | "version": "0.0.51",
4 | "peerDependencies": {
5 | "@angular/common": "^20.2.3",
6 | "@angular/core": "^20.2.3",
7 | "@radix-ng/primitives": "workspace:*",
8 | "classnames": "^2.5.1"
9 | },
10 | "devDependencies": {
11 | "@radix-ng/primitives": "workspace:*",
12 | "classnames": "^2.5.1"
13 | },
14 | "scripts": {
15 | "compodoc": "compodoc --config .compodocrc.json"
16 | },
17 | "sideEffects": false
18 | }
19 |
--------------------------------------------------------------------------------
/packages/primitives/alert-dialog/src/alert-dialog-trigger.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject } from '@angular/core';
2 | import { RdxAlertDialogService } from './alert-dialog.service';
3 |
4 | @Directive({
5 | selector: '[rdxAlertDialogTrigger]',
6 | standalone: true,
7 | host: {
8 | '(click)': 'handleClick()'
9 | }
10 | })
11 | export class RdxAlertDialogTriggerDirective {
12 | private readonly alertDialogService = inject(RdxAlertDialogService);
13 |
14 | handleClick() {
15 | this.alertDialogService.open();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/primitives/core/src/is-equal.ts:
--------------------------------------------------------------------------------
1 | import { serialize } from './serialize';
2 | /**
3 | * Compare two objects using reference equality and stable deep hashing.
4 | * @param {any} object1 First object
5 | * @param {any} object2 Second object
6 | * @return {boolean} true if equal and false if not
7 | */
8 | export function isEqual(object1: any, object2: any): boolean {
9 | if (object1 === object2) {
10 | return true;
11 | }
12 | if (serialize(object1) === serialize(object2)) {
13 | return true;
14 | }
15 | return false;
16 | }
17 |
--------------------------------------------------------------------------------
/.github/workflows/chromatic.yml:
--------------------------------------------------------------------------------
1 | name: 'Chromatic'
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 |
8 | jobs:
9 | chromatic-deployment:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - name: Checkout repository
13 | uses: actions/checkout@v4
14 | with:
15 | fetch-depth: 0
16 |
17 | - uses: ./.github/actions/setup
18 |
19 | - name: Run Chromatic
20 | uses: chromaui/action@latest
21 | with:
22 | projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
23 | exitZeroOnChanges: true
24 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/demos/components/code/code-demo.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { RdxCodeComponent } from '@radix-ng/components/code';
3 | import { RdxThemeDirective } from '@radix-ng/components/theme';
4 |
5 | @Component({
6 | selector: 'kbd-demo',
7 | standalone: true,
8 | imports: [RdxThemeDirective, RdxCodeComponent],
9 | template: `
10 |
11 | console.log()
12 |
13 | `
14 | })
15 | export class CodeComponent {}
16 |
17 | export default CodeComponent;
18 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/demos/components/switch/switch-demo.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { RdxThemeSwitchComponent } from '@radix-ng/components/switch';
3 | import { RdxThemeDirective } from '@radix-ng/components/theme';
4 |
5 | @Component({
6 | selector: 'switch-demo',
7 | standalone: true,
8 | imports: [RdxThemeSwitchComponent],
9 | hostDirectives: [RdxThemeDirective],
10 | template: `
11 |
9 |
10 |
11 |
12 | `
13 | })
14 | export default class Page {}
15 |
--------------------------------------------------------------------------------
/apps/radix-storybook/.storybook/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "emitDecoratorMetadata": true,
5 | "resolveJsonModule": true
6 | },
7 | "exclude": ["../**/*.spec.ts"],
8 | "include": [
9 | "../../../packages/primitives/**/*.stories.ts",
10 | "../../../packages/primitives/**/*.stories.tsx",
11 | "../../../packages/primitives/**/*.stories.mdx",
12 | "../../../packages/primitives/**/*.directive.ts",
13 | "../../../packages/primitives/**/*.component.ts",
14 | "*.ts",
15 | "*.tsx"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/components/mdx/TabsTrigger.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { cn } from '@/utils/utils';
3 | import { TabsTrigger as TabsComponent } from '../tabs';
4 |
5 | const { class: className, ...rest } = Astro.props;
6 | ---
7 |
8 |
19 | ![]()
20 |
21 | ```
22 |
23 | ## API Reference
24 |
25 | ### Root
26 | Contains the content you want to constrain to a given ratio.
27 |
28 | `RdxAspectRatioDirective`
29 |
21 |
23 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/components/tabs/TabsTrigger.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { cn } from '@/utils/utils';
3 |
4 | export interface Props {
5 | class?: string;
6 | }
7 | ---
8 |
9 |
20 |
--------------------------------------------------------------------------------
/packages/primitives/accordion/src/accordion-header.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 | import { injectAccordionItemContext } from './accordion-item.directive';
3 | import { injectAccordionRootContext } from './accordion-root.directive';
4 |
5 | @Directive({
6 | selector: '[rdxAccordionHeader]',
7 | host: {
8 | '[attr.data-state]': 'itemContext.dataState()',
9 | '[attr.data-disabled]': 'itemContext.dataDisabled()',
10 | '[attr.data-orientation]': 'rootContext.orientation()'
11 | }
12 | })
13 | export class RdxAccordionHeaderDirective {
14 | protected readonly rootContext = injectAccordionRootContext()!;
15 | protected readonly itemContext = injectAccordionItemContext()!;
16 | }
17 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/components/tabs/Tabs.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { cn } from '@/utils/utils';
3 |
4 | export interface Props {
5 | class?: string;
6 | }
7 | ---
8 |
9 |
25 |
27 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/components/demo-component-preview/ComponentThemesPreview.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { DemoThemesLoaderComponent } from './demo-themes-loader.component';
3 |
4 | export interface Props {
5 | name: string;
6 | file: string;
7 | }
8 |
9 | const { name, file } = Astro.props;
10 | ---
11 |
12 |
13 |
22 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/demos/primitives/toggle/toggle-demo.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { RdxToggleDirective } from '@radix-ng/primitives/toggle';
4 | import { Italic, LucideAngularModule } from 'lucide-angular';
5 |
6 | @Component({
7 | selector: 'primitive-toggle-demo',
8 | standalone: true,
9 | imports: [RdxToggleDirective, LucideAngularModule],
10 | template: `
11 |
14 | `,
15 | styleUrl: 'toggle-demo.css'
16 | })
17 | export class ToggleDemoComponent {
18 | protected readonly Italic = Italic;
19 | }
20 |
21 | export default ToggleDemoComponent;
22 |
--------------------------------------------------------------------------------
/packages/primitives/checkbox/src/checkbox-indicator-presence.ts:
--------------------------------------------------------------------------------
1 | import { computed, Directive } from '@angular/core';
2 | import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
3 | import { injectCheckboxRootContext } from './checkbox-root';
4 |
5 | @Directive({
6 | selector: 'ng-template[rdxCheckboxIndicatorPresence]',
7 | providers: [
8 | provideRdxPresenceContext(() => {
9 | const rootContext = injectCheckboxRootContext()!;
10 |
11 | return {
12 | present: computed(() => !!rootContext.checked())
13 | };
14 | })
15 | ],
16 | hostDirectives: [RdxPresenceDirective]
17 | })
18 | export class RdxCheckboxIndicatorPresenceDirective {}
19 |
--------------------------------------------------------------------------------
/packages/primitives/select/src/select-value.directive.ts:
--------------------------------------------------------------------------------
1 | import { Component, inject, Input } from '@angular/core';
2 | import { RdxSelectComponent } from './select.component';
3 |
4 | @Component({
5 | selector: '[rdxSelectValue]',
6 | standalone: true,
7 | exportAs: 'rdxSelectValue',
8 | template: `
9 | {{ select.selectionModel.isEmpty() ? placeholder : select.selected }}
10 | `,
11 | styles: `
12 | /* we don't want events from the children to bubble through the item they came from */
13 | :host {
14 | pointer-events: none;
15 | }
16 | `
17 | })
18 | export class RdxSelectValueDirective {
19 | select = inject(RdxSelectComponent);
20 |
21 | @Input() placeholder: string;
22 | }
23 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/demos/components/avatar/avatar-variant-demo.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { RdxThemeAvatarComponent } from '@radix-ng/components/avatar';
3 | import { RdxThemeDirective } from '@radix-ng/components/theme';
4 |
5 | @Component({
6 | selector: 'avatar-variant-demo',
7 | standalone: true,
8 | imports: [RdxThemeAvatarComponent],
9 | hostDirectives: [RdxThemeDirective],
10 | template: `
11 |
14 |
18 |
15 |
17 |
19 |
21 | Not found
12 |
15 | `
16 | })
17 | export class AvatarVariantComponent {}
18 |
19 | export default AvatarVariantComponent;
20 |
--------------------------------------------------------------------------------
/packages/primitives/pagination/src/pagination-context.token.ts:
--------------------------------------------------------------------------------
1 | import { computed, inject, InjectionToken, model } from '@angular/core';
2 |
3 | export interface PaginationRootContext {
4 | page: ReturnType
25 |
29 | ```
30 |
31 | ## API Reference
32 |
33 | ### Root
34 |
--------------------------------------------------------------------------------
/packages/primitives/radio/src/radio-indicator.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject } from '@angular/core';
2 | import { RdxRadioItemDirective } from './radio-item.directive';
3 | import { RDX_RADIO_GROUP, RadioGroupDirective } from './radio-tokens';
4 |
5 | @Directive({
6 | selector: '[rdxRadioIndicator]',
7 | exportAs: 'rdxRadioIndicator',
8 | host: {
9 | '[attr.data-state]': 'radioItem.checkedState() ? "checked" : "unchecked"',
10 | '[attr.data-disabled]': 'radioItem.disabled() ? "" : undefined'
11 | }
12 | })
13 | export class RdxRadioIndicatorDirective {
14 | protected readonly radioGroup: RadioGroupDirective = inject(RDX_RADIO_GROUP);
15 | protected readonly radioItem: RdxRadioItemDirective = inject(RdxRadioItemDirective);
16 | }
17 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/content/themes/theme/overview.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Themes overview
3 | slug: overview
4 | section: theme
5 | description: description
6 | ---
7 |
8 | # Theme overview
9 |
10 |
26 |
27 |
28 |
10 | console.log()
11 | console.log()
12 | console.log()
13 | console.log()
14 |
15 | `
16 | })
17 | export class CodeVariantsComponent {}
18 |
19 | export default CodeVariantsComponent;
20 |
--------------------------------------------------------------------------------
/.github/workflows/algolia-docsearch-crawler.yml:
--------------------------------------------------------------------------------
1 | name: Algolia DocSearch Crawler
2 |
3 | on:
4 | # Trigger the workflow on manual dispatch
5 | workflow_dispatch:
6 |
7 | jobs:
8 | algolia_docsearch_crawler:
9 | runs-on: ubuntu-latest
10 | steps:
11 | - name: Run Algolia DocSearch Crawler
12 | uses: algolia/algoliasearch-crawler-github-actions@v1.1.13
13 | id: algolia_docsearch_crawler
14 | with:
15 | crawler-user-id: ${{ secrets.ALGOLIA_DOCSEARCH_CRAWLER_USER_ID }}
16 | crawler-api-key: ${{ secrets.ALGOLIA_DOCSEARCH_CRAWLER_API_KEY }}
17 | algolia-app-id: KO68VM9HAD
18 | algolia-api-key: ${{ secrets.ALGOLIA_DOCSEARCH_API_KEY }}
19 | site-url: https://radix-ng.com
20 | crawler-name: radix-ng
21 |
--------------------------------------------------------------------------------
/packages/primitives/editable/src/editable-edit-trigger.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 | import { injectEditableRootContext } from './editable-root';
3 |
4 | @Directive({
5 | selector: 'button[rdxEditableEditTrigger]',
6 | host: {
7 | type: 'button',
8 | '[attr.aria-label]': '"edit"',
9 | '[attr.aria-disabled]': 'rootContext?.disabled() ? "" : undefined',
10 | '[attr.data-disabled]': 'rootContext?.disabled() ? "" : undefined',
11 | '[disabled]': 'rootContext?.disabled()',
12 | '[attr.hidden]': 'rootContext?.isEditing() ? "" : undefined',
13 |
14 | '(click)': 'rootContext?.edit()'
15 | }
16 | })
17 | export class RdxEditableEditTrigger {
18 | protected readonly rootContext = injectEditableRootContext();
19 | }
20 |
--------------------------------------------------------------------------------
/packages/primitives/avatar/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RdxAvatarFallbackDirective } from './src/avatar-fallback.directive';
3 | import { RdxAvatarImageDirective } from './src/avatar-image.directive';
4 | import { RdxAvatarRootDirective } from './src/avatar-root.directive';
5 |
6 | export * from './src/avatar-fallback.directive';
7 | export * from './src/avatar-image.directive';
8 | export * from './src/avatar-root.directive';
9 | export * from './src/avatar.config';
10 | export type { RdxImageLoadingStatus } from './src/types';
11 |
12 | const _imports = [RdxAvatarRootDirective, RdxAvatarFallbackDirective, RdxAvatarImageDirective];
13 |
14 | @NgModule({
15 | imports: [..._imports],
16 | exports: [..._imports]
17 | })
18 | export class RdxCheckboxModule {}
19 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/demos/primitives/slider/slider-demo.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { RdxSliderModule } from '@radix-ng/primitives/slider';
4 |
5 | @Component({
6 | selector: 'radix-slider-demo',
7 | standalone: true,
8 | imports: [RdxSliderModule],
9 | styleUrl: 'slider-demo.css',
10 | template: `
11 |
12 |
16 | `
17 | })
18 | export class AvatarRadiusComponent {}
19 |
20 | export default AvatarRadiusComponent;
21 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/demos/primitives/avatar/avatar-demo.css:
--------------------------------------------------------------------------------
1 | .AvatarRoot {
2 | display: inline-flex;
3 | align-items: center;
4 | justify-content: center;
5 | vertical-align: middle;
6 | overflow: hidden;
7 | user-select: none;
8 | width: 45px;
9 | height: 45px;
10 | border-radius: 100%;
11 | background-color: var(--black-a3);
12 | }
13 |
14 | .AvatarImage {
15 | width: 100%;
16 | height: 100%;
17 | object-fit: cover;
18 | border-radius: inherit;
19 | }
20 |
21 | .AvatarFallback {
22 | width: 100%;
23 | height: 100%;
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | background-color: white;
28 | color: var(--violet-11);
29 | font-size: 15px;
30 | line-height: 1;
31 | font-weight: 500;
32 | }
33 |
--------------------------------------------------------------------------------
/packages/primitives/collapsible/src/collapsible-trigger.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive } from '@angular/core';
2 | import { injectCollapsibleRootContext } from './collapsible-root.directive';
3 |
4 | @Directive({
5 | selector: '[rdxCollapsibleTrigger]',
6 | host: {
7 | '[attr.aria-controls]': 'rootContext.contentId()',
8 | '[attr.aria-expanded]': 'rootContext.open()',
9 | '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
10 | '[attr.data-disabled]': 'rootContext.disabled() ? "true" : undefined',
11 | '[attr.disabled]': 'rootContext.disabled() || undefined',
12 |
13 | '(click)': 'rootContext.toggle()'
14 | }
15 | })
16 | export class RdxCollapsibleTriggerDirective {
17 | protected readonly rootContext = injectCollapsibleRootContext()!;
18 | }
19 |
--------------------------------------------------------------------------------
/packages/primitives/tabs/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RdxTabsContentDirective } from './src/tabs-content.directive';
3 | import { RdxTabsListDirective } from './src/tabs-list.directive';
4 | import { RdxTabsRootDirective } from './src/tabs-root.directive';
5 | import { RdxTabsTriggerDirective } from './src/tabs-trigger.directive';
6 |
7 | export * from './src/tabs-content.directive';
8 | export * from './src/tabs-list.directive';
9 | export * from './src/tabs-root.directive';
10 | export * from './src/tabs-trigger.directive';
11 |
12 | const tabsImports = [RdxTabsRootDirective, RdxTabsContentDirective, RdxTabsListDirective, RdxTabsTriggerDirective];
13 |
14 | @NgModule({
15 | imports: [...tabsImports],
16 | exports: [...tabsImports]
17 | })
18 | export class RdxTabsModule {}
19 |
--------------------------------------------------------------------------------
/packages/primitives/core/src/mount.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Directive } from '@angular/core';
2 |
3 | const callAll =
4 |
12 |
16 | `
17 | })
18 | export class SwitchSizedComponent {}
19 |
20 | export default SwitchSizedComponent;
21 |
--------------------------------------------------------------------------------
/apps/radix-docs/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import type { TocItem } from '@/types';
2 | import type { MarkdownHeading } from 'astro';
3 |
4 | export function generateToc(headings: MarkdownHeading[], maxDepth = 3): TocItem[] {
5 | const toc: TocItem[] = [];
6 | const parentHeadings = new Map${story}
15 | `
16 | )
17 | ]
18 | } as Meta;
19 |
20 | type Story = StoryObj;
21 |
22 | export const Default: Story = {
23 | render: () => ({
24 | template: html`
25 |
12 |
16 | `
17 | })
18 | export class SwitchRadiusComponent {}
19 |
20 | export default SwitchRadiusComponent;
21 |
--------------------------------------------------------------------------------
/packages/primitives/calendar/src/calendar-grid.directive.ts:
--------------------------------------------------------------------------------
1 | import { computed, Directive } from '@angular/core';
2 | import { injectCalendarRootContext } from './сalendar-сontext.token';
3 |
4 | @Directive({
5 | selector: 'table[rdxCalendarGrid]',
6 | host: {
7 | tabindex: '-1',
8 | role: 'grid',
9 | '[attr.aria-readonly]': 'readonly()',
10 | '[attr.aria-disabled]': 'disabled()',
11 | '[attr.data-readonly]': 'readonly() && ""',
12 | '[attr.data-disabled]': 'disabled() && ""'
13 | }
14 | })
15 | export class RdxCalendarGridDirective {
16 | private readonly rootContext = injectCalendarRootContext();
17 |
18 | readonly disabled = computed(() => (this.rootContext.disabled() ? true : undefined));
19 | readonly readonly = computed(() => (this.rootContext.readonly ? true : undefined));
20 | }
21 |
--------------------------------------------------------------------------------
/packages/primitives/dropdown-menu/src/dropdown-menu-item-selectable.ts:
--------------------------------------------------------------------------------
1 | import { booleanAttribute, Directive, EventEmitter, Input, Output } from '@angular/core';
2 | import { RdxDropdownMenuItemDirective } from './dropdown-menu-item.directive';
3 |
4 | /** Base class providing checked state for selectable DropdownMenuItems. */
5 | @Directive({
6 | standalone: true,
7 | host: {
8 | '[attr.aria-checked]': '!!checked',
9 | '[attr.aria-disabled]': 'disabled || null',
10 | '[attr.data-state]': 'checked ? "checked" : "unchecked"'
11 | }
12 | })
13 | export class RdxDropdownMenuSelectable extends RdxDropdownMenuItemDirective {
14 | /** Whether the element is checked */
15 | @Input({ transform: booleanAttribute }) checked: boolean = false;
16 |
17 | @Output() readonly checkedChange = new EventEmitter-
28 | {heading.children.map((subheading) => (
29 |