@radix-ng/primitives 0.1.0 → 0.1.1

package/switch/src/switch.directive.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class SwitchDirective implements ControlValueAccessor {
+    /**
+     * Access the element ref.
+     */
+    private readonly elementRef;
+    /**
+     * Determine if the switch is a button
+     */
+    protected isButton: boolean;
+    /**
+     * Determine if the switch is checked.
+     * The controlled state of the switch.
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * Determine if the switch is disabled.
+     * When true, prevents the user from interacting with the switch.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Event emitted when the checked state changes.
+     */
+    readonly checkedChange: EventEmitter<boolean>;
+    /**
+     * Store the onChange callback.
+     */
+    private onChange?;
+    /**
+     * Store the onTouched callback.
+     */
+    protected onTouched?: () => void;
+    /**
+     * Register the onChange callback.
+     * @param fn The onChange callback.
+     * @internal
+     */
+    registerOnChange(fn: (checked: boolean) => void): void;
+    /**
+     * Register the onTouched callback.
+     * @param fn The onTouched callback.
+     * @internal
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Write the value to the checked state.
+     * @param checked The checked state.
+     * @internal
+     */
+    writeValue(checked: boolean): void;
+    /**
+     * Set the disabled state.
+     * @param isDisabled The disabled state.
+     * @internal
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Toggle the checked state.
+     */
+    toggle(): void;
+    /**
+     * Handle the keydown event.
+     */
+    protected onKeyDown(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwitchDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SwitchDirective, "[rdxSwitch]", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_checked: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

package/switch/src/switch.token.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { SwitchDirective } from './switch.directive';
+export declare const SwitchToken: InjectionToken<SwitchDirective>;
+export declare function injectSwitch(): SwitchDirective;

package/visually-hidden/src/visually-hidden.directive.d.ts

@@ -0,0 +1,11 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class VisuallyHiddenDirective implements OnInit {
+    /**
+     * Access the element.
+     */
+    private readonly element;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VisuallyHiddenDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<VisuallyHiddenDirective, "[rdxVisuallyHidden]", never, {}, {}, never, never, true, never>;
+}

package/.docs/overview/accessibility.docs.mdx

@@ -1,45 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta
-    title="Overview/Accessibility"
-    description="Radix Primitives follow the WAI-ARIA authoring practices guidelines and are tested in a wide selection of modern browsers and commonly used assistive technologies."
-/>
-
-# Accessibility
-
-Radix Primitives follow the WAI-ARIA authoring practices guidelines and are
-tested in a wide selection of modern browsers and commonly used assistive
-technologies.
-
-We take care of many of the difficult implementation details related to accessibility, including `aria` and `role` attributes, focus management, and keyboard navigation. That means that users should be able to use our components as-is in most contexts and rely on functionality to follow the expected accessibility design patterns.
-
-## WAI-ARIA
-
-[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/), published and maintained by the W3C, specifies the semantics for many common UI patterns that show up in Radix Primitives. This is designed to provide meaning for controls that aren't built using elements provided by the browser. For example, if you use a `div` instead of a `button` element to create a button, there are attributes you need to add to the `div` in order to convey that it's a button for screen readers or voice recognition tools.
-
-In addition to semantics, there are behaviors that are expected from different types of components. A `button` element is going to respond to certain interactions in ways that a `div` will not, so it's up to the developer to reimplement those interactions with JavaScript. The [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/) provide additional guidance for implementing behaviors for various controls that come with Radix Primitives.
-
-## Accessible Labels
-
-With many built-in form controls, the native HTML `label` element is designed to provide semantic meaning and context for corresponding `input` elements. For non-form control elements,
-or for custom controls like those provided by Radix Primitives, [WAI-ARIA provides a specification](https://www.w3.org/TR/wai-aria-1.2/#namecalculation) for how to provide accessible names and descriptions to those controls.
-
-Where possible, Radix Primitives include abstractions to make labelling our controls simple. The `Label` primitive is designed to work with many of our controls.
-Ultimately it's up to you to provide those labels so that users have the proper context when navigating your application.
-
-## Keyboard Navigation
-
-Many complex components, like `Tabs` and `Dialog`, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities.
-Radix Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/).
-
-## Focus Management
-
-Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with an element and something changes as a result, it's often helpful to move focus with the interaction so that the next tab stop is logical depending on the new context of the app. And for screen reader users, moving focus often results in an announcement to convey this new context, which relies on proper labelling.
-
-In many Radix Primitives, we move focus based on the interactions a user normally takes in a given component.
-For example, in `AlertDialog`, when the modal is opened, focus is programmatically moved to a `Cancel` button
-element to anticipate a response to the prompt.
-
-
-Source: [Radix UI](https://www.radix-ui.com/)
-

package/.docs/overview/installation.docs.mdx

@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta
-    title="Overview/Installation"
-/>
-
-# Installation
-
-A quick tutorial to walk through installing the packages, as well as the supported plugins.
-
-
-## Installing the package
-```bash
-npm i @radix-ng/primitives
-```

package/.docs/overview/introduction.docs.mdx

@@ -1,59 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta
-    title="Overview/Introduction"
-/>
-
-# Introduction
-
-> Radix-NG is an unofficial Angular port of [Radix UI](https://www.radix-ui.com/), thus we share the same principal and vision when building primitives.
-
-Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
-
-
-## Vision
-
-The common understanding among us regarding UI elements such as accordions, checkboxes, comboboxes, dialogs, dropdowns, selects, sliders, and tooltips is well-established, guided by standards like those [documented by WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#aria_ex). These elements are foundational to our shared language in web development.
-
-Yet, the reality we face with the current web platform offerings falls short. These essential elements are often missing, underdeveloped, or rigid in customization options.
-
-This forces developers into the challenging position of creating custom components from scratch, a task fraught with complexity. Consequently, the web is littered with components that fail to be accessible, perform poorly, and miss critical functionality.
-
-We aim to spearhead the development of an open-source, comprehensively funded library of components. This initiative seeks to empower the creation of design systems that are both accessible and rich in features, serving the needs of the community at large.
-
-## Key Features
-
-Components adhere to the [WAI-ARIA design patterns](https://www.w3.org/TR/wai-aria-practices-1.2) where possible. We handle many of the difficult implementation details related to accessibility, including aria and role attributes, focus management, and keyboard navigation. Learn more in our [accessibility](./accessibility) overview.
-
-### Unstyled
-
-Components ship with zero styles, giving you complete control over styling. Components can be styled with any styling solution (vanilla CSS, CSS preprocessors & etc).
-
-### Opened
-
-Radix Primitives are designed to be customized to suit your needs. Our open component architecture provides you granular access to each component part, so you can wrap them and add your own event listeners, props, or refs.
-
-### Uncontrolled
-
-Where applicable, components are uncontrolled by default but can also be controlled, alternatively. All of the behavior wiring is handled internally, so you can get up and running as smoothly as possible, without needing to create any local states.
-
-## Community
-
-### Telegram
-To get involved to community, ask questions, and share tips.
-
-[Join our Telegram](https://t.me/radixng)
-
-### GitHub
-To file issues, request features, and contribute, check out our GitHub.
-
-[GitHub repo](https://github.com/radix-ng/primitives)
-
-## Credits
-
-All credits go to these open-source works and resources
-
-- [Radix UI](https://radix-ui.com)
-- [Radix Vue](https://radix-vue.com)
-- [Radix Svelte](https://radix-svelte.com)
-- [Spartan UI](https://www.spartan.ng/)

package/.docs/utils/storybook.ts

@@ -1,30 +0,0 @@
-/**
- * Targets strings which start with underscore or with 'ng'. E.g. _internalStuff or ngOnInit.
- *
- * This has been set as default value for Storybook stories controls in preview.js
- * If you need to append the list, just provide a string[] with list of props to exclude.
- */
-
-export const excludeRegex = (array?: string[]): RegExp => {
-    const joined: string | null = array ? array.join('|') : null;
-
-    const joinedWithRegexOr = `|^(${joined})$`;
-
-    return new RegExp(`(^(?:_|ng)[a-zA-Z0-9]\\w+)${joinedWithRegexOr}`);
-};
-
-export const separatorExclude: RegExp = excludeRegex([]);
-
-export const labelExclude: RegExp = excludeRegex(['onMouseDown', 'htmlFor']);
-
-export const switchExclude: RegExp = excludeRegex([
-    'elementRef',
-    'isButton',
-    'onChange',
-    'onTouched',
-    'onKeyDown',
-    'registerOnTouched',
-    'registerOnChange',
-    'setDisabledState',
-    'writeValue'
-]);

package/.eslintrc.json

@@ -1,56 +0,0 @@
-{
-    "extends": [
-        "../../.eslintrc.json"
-    ],
-    "ignorePatterns": [
-        "!**/*"
-    ],
-    "overrides": [
-        {
-            "files": [
-                "*.ts"
-            ],
-            "extends": [
-                "plugin:@nx/angular",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ],
-            "rules": {
-                "@angular-eslint/directive-selector": [
-                    "error",
-                    {
-                        "type": "attribute",
-                        "prefix": "rdx",
-                        "style": "camelCase"
-                    }
-                ],
-                "@angular-eslint/component-selector": [
-                    "error",
-                    {
-                        "type": "element",
-                        "prefix": "rdx",
-                        "style": "kebab-case"
-                    }
-                ],
-                "@angular-eslint/no-host-metadata-property": "off"
-            }
-        },
-        {
-            "files": [
-                "*.html"
-            ],
-            "extends": [
-                "plugin:@nx/angular-template"
-            ],
-            "rules": {}
-        },
-        {
-            "files": [
-                "*.json"
-            ],
-            "parser": "jsonc-eslint-parser",
-            "rules": {
-                "@nx/dependency-checks": "error"
-            }
-        }
-    ]
-}

package/.storybook/helpers/bages-config.ts

@@ -1,43 +0,0 @@
-import { BadgesConfig } from '@geometricpanda/storybook-addon-badges';
-
-export enum BADGE {
-    BETA,
-    PREVIEW,
-    UPDATED,
-    SOON
-}
-
-export const badgesConfig: BadgesConfig = {
-    [BADGE.BETA]: {
-        styles: {
-            backgroundColor: 'color(display-p3 1 1 1/0.8)',
-            color: 'gray',
-            borderColor: 'color(display-p3 0.008 0.008 0.165/0.15)'
-        },
-        title: 'Beta'
-    },
-    [BADGE.PREVIEW]: {
-        styles: {
-            backgroundColor: 'color(display-p3 1 1 1/0.8)',
-            color: 'gray',
-            borderColor: 'color(display-p3 0.008 0.008 0.165/0.15)'
-        },
-        title: 'Preview'
-    },
-    [BADGE.UPDATED]: {
-        styles: {
-            backgroundColor: 'color(display-p3 1 1 1/0.8)',
-            color: 'gray',
-            borderColor: 'color(display-p3 0.008 0.008 0.165/0.15)'
-        },
-        title: 'Updated'
-    },
-    [BADGE.SOON]: {
-        styles: {
-            backgroundColor: 'color(display-p3 1 1 1/0.8)',
-            color: 'gray',
-            borderColor: 'color(display-p3 0.008 0.008 0.165/0.15)'
-        },
-        title: 'Soon'
-    }
-};

package/.storybook/main.ts

@@ -1,24 +0,0 @@
-import type { StorybookConfig } from '@storybook/angular';
-
-const config: StorybookConfig = {
-    stories: ['../.docs/**/*.docs.mdx', '../**/*.docs.mdx', '../**/*.stories.@(js|ts)'],
-
-    addons: [
-        '@storybook/addon-essentials',
-        '@storybook/addon-docs',
-        '@storybook/addon-backgrounds',
-        '@geometricpanda/storybook-addon-badges'
-    ],
-
-    framework: {
-        name: '@storybook/angular',
-        options: {}
-    },
-
-    core: {
-        builder: '@storybook/builder-webpack5',
-        disableTelemetry: true
-    }
-};
-
-export default config;

package/.storybook/manager-head.html

@@ -1,76 +0,0 @@
-
-<!-- Open Graph general (Facebook, Pinterest & Google+) -->
-<meta property="og:type" content="website" />
-<meta property="og:title" content="Radix Angular UI Primitives" />
-<meta property="og:locale" content="en_US" />
-<meta
-    property="og:description"
-    content="Angular Primitives is a low-level UI component library."
-/>
-<meta property="og:image:alt" content="Radix Angular display image" />
-
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-
-<!-- Yandex.Metrika counter -->
-<script type="text/javascript" >
-    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
-        m[i].l=1*new Date();
-        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
-        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
-    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
-
-    ym(97017282, "init", {
-        clickmap:true,
-        trackLinks:true,
-        accurateTrackBounce:true
-    });
-</script>
-<noscript><div><img src="https://mc.yandex.ru/watch/97017282" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
-<!-- /Yandex.Metrika counter -->
-
-<!-- customize the sidebar icons -->
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    data-chromatic="ignore"
-    style="position: absolute; width: 0px; height: 0px"
->
-    <symbol id="icon--folder" viewBox="0 0 32 32">
-        <path
-            fill="currentColor"
-            stroke="currentColor"
-            stroke-width="1"
-            d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z"
-        />
-    </symbol>
-    <symbol id="icon--component" viewBox="0 0 32 32">
-        <path
-            fill="currentColor"
-            stroke="currentColor"
-            stroke-width="1"
-            d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z"
-        />
-        <path
-            fill="currentColor"
-            stroke="currentColor"
-            stroke-width="1"
-            d="M10.667 14.667h10.667V16H10.667v-1.333z"
-        />
-    </symbol>
-    <symbol id="icon--document" viewBox="0 0 32 32">
-        <path
-            fill="currentColor"
-            stroke="currentColor"
-            stroke-width="1"
-            d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z"
-        />
-    </symbol>
-    <symbol id="icon--bookmarkhollow" viewBox="0 0 32 32">
-        <path
-            fill="currentColor"
-            stroke="currentColor"
-            stroke-width="1"
-            d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z"
-        />
-    </symbol>
-</svg>

package/.storybook/manager.ts

@@ -1,6 +0,0 @@
-import { addons } from '@storybook/manager-api';
-import rdxTheme from './rdxTheme';
-
-addons.setConfig({
-    theme: rdxTheme
-});

package/.storybook/preview.ts

@@ -1,58 +0,0 @@
-import { Preview } from '@storybook/angular';
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from './documentation.json';
-import { badgesConfig } from './helpers/bages-config';
-
-setCompodocJson(docJson);
-
-const preview: Preview = {
-    decorators: [
-        (Story, context) => {
-            const storyAnchor = `anchor--${context.id}`;
-            const existAnchor = context.canvasElement.closest(`#${storyAnchor}`);
-            const storyContainer = context.canvasElement.closest('.sbdocs');
-
-            if (!existAnchor && storyContainer) {
-                storyContainer.id = storyAnchor;
-            }
-
-            return Story(context);
-        }
-    ],
-    parameters: {
-        docs: {
-            toc: {
-                contentsSelector: '.sbdocs-content',
-                headingSelector: 'h2, h3',
-                ignoreSelector: '#primary',
-                title: 'On this page',
-                disable: false,
-                unsafeTocbotOptions: {
-                    orderedList: false
-                }
-            }
-        },
-        backgrounds: {
-            default: 'blue',
-            values: [
-                {
-                    name: 'blue',
-                    value: 'linear-gradient(330deg,color(display-p3 0.523 0.318 0.751) 0,color(display-p3 0.276 0.384 0.837) 100%)'
-                },
-                {
-                    name: 'white',
-                    value: '#ffffff'
-                }
-            ]
-        },
-        options: {
-            storySort: {
-                method: 'alphabetical',
-                order: ['Overview', ['Introduction', 'Installation'], 'Primitives']
-            }
-        },
-        badgesConfig
-    }
-};
-
-export default preview;

package/.storybook/rdxTheme.ts

@@ -1,8 +0,0 @@
-import { create } from '@storybook/theming/create';
-
-export default create({
-    base: 'light',
-    brandTitle: 'Radix Angular',
-    brandUrl: 'https://github.com/radix-ng/primitives',
-    brandTarget: '_self'
-});

package/.storybook/tsconfig.json

@@ -1,20 +0,0 @@
-{
-    "extends": "../tsconfig.json",
-    "compilerOptions": {
-        "emitDecoratorMetadata": true,
-        "resolveJsonModule": true,
-        "allowSyntheticDefaultImports": true
-    },
-    "exclude": [
-        "../**/*.spec.ts"
-    ],
-    "include": [
-        "../**/*.stories.ts",
-        "../**/*.stories.js",
-        "../**/*.stories.jsx",
-        "../**/*.stories.tsx",
-        "../**/*.stories.mdx",
-        "*.js",
-        "*.ts"
-    ]
-}

package/CHANGELOG.md

@@ -1,6 +0,0 @@
-## 0.1.0 (2024-04-14)
-
-
-### 🚀 Features
-
-- **progress:** added progress meter ([17f3ffb](https://github.com/radix-ng/primitives/commit/17f3ffb))

package/checkbox/ng-package.json

@@ -1,5 +0,0 @@
-{
-    "lib": {
-        "entryFile": "index.ts"
-    }
-}

package/checkbox/src/checkbox-indicator.directive.ts

@@ -1,15 +0,0 @@
-import { Directive } from '@angular/core';
-import { injectCheckbox } from './checkbox.token';
-
-@Directive({
-    selector: '[rdxCheckboxIndicator]',
-    standalone: true,
-    host: {
-        '[style.pointer-events]': '"none"',
-        '[attr.data-state]': 'checkbox.state',
-        '[attr.data-disabled]': 'checkbox.disabled ? "" : null'
-    }
-})
-export class CheckboxIndicatorDirective {
-    protected readonly checkbox = injectCheckbox();
-}