### Getting Started with Stencil Component Starter
Source: https://github.com/haiilo/catalyst/blob/main/core/README.md
This snippet demonstrates the basic commands to clone a Stencil component starter project, install dependencies, start a development server, build for production, and run unit tests. It's essential for initializing a new Stencil-based web component.
```bash
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin
npm install
npm start
npm run build
npm test
```
--------------------------------
### Install Catalyst Core, Tokens, and Icons
Source: https://context7.com/haiilo/catalyst/llms.txt
Installs the core Web Components, design tokens, and icon set for the Catalyst design system using npm or pnpm. This is the foundational step for using Catalyst components.
```bash
# Install core components and tokens
npm install @haiilo/catalyst @haiilo/catalyst-tokens @haiilo/catalyst-icons
# For Angular projects
npm install @haiilo/catalyst-angular
# For React projects
npm install @haiilo/catalyst-react
# Peer dependencies
npm install rxjs@^7.5.5
```
--------------------------------
### Install Catalyst Tokens Package (NPM)
Source: https://github.com/haiilo/catalyst/blob/main/tokens/README.md
Installs the `@haiilo/catalyst-tokens` package into your Node.js project using npm. This command fetches the latest version of the design tokens to be used within your application.
```shell
npm install @haiilo/catalyst-tokens
```
--------------------------------
### Design Tokens in JavaScript
Source: https://context7.com/haiilo/catalyst/llms.txt
Illustrates importing and using design tokens from `@haiilo/catalyst-tokens` directly within JavaScript for dynamic styling. Includes examples for colors, spacing, borders, and transitions.
```javascript
// Import tokens in JavaScript
import {
colorThemePrimaryBg,
colorThemePrimaryText,
sizeSpacingM,
sizeBorderRadiusM,
timeTransitionS
} from '@haiilo/catalyst-tokens';
const styles = {
backgroundColor: colorThemePrimaryBg,
color: colorThemePrimaryText,
padding: sizeSpacingM,
borderRadius: sizeBorderRadiusM,
transition: `all ${timeTransitionS}ms ease`
};
```
--------------------------------
### Checkbox Component (cat-checkbox) Examples
Source: https://context7.com/haiilo/catalyst/llms.txt
Demonstrates various configurations for the cat-checkbox component, including basic usage, hints, checked and indeterminate states, custom values, label positioning, alignment, and event handling.
```html
>
```
```javascript
const checkbox = document.querySelector('cat-checkbox');
checkbox.addEventListener('catChange', (e) => {
console.log('Checked:', checkbox.checked);
console.log('Resolved value:', e.detail);
});
// Methods
await checkbox.doFocus();
await checkbox.doBlur();
```
--------------------------------
### Dropdown Component (cat-dropdown) Examples
Source: https://context7.com/haiilo/catalyst/llms.txt
Illustrates the usage of the cat-dropdown component, including basic menus, placement options, matching trigger width, preventing auto-close for forms, and programmatic control via JavaScript.
```html
Menu
Custom dropdown content with padding.
Select OptionForm Dropdown
Submit
```
```javascript
const dropdown = document.querySelector('cat-dropdown');
dropdown.addEventListener('catOpen', () => console.log('Dropdown opened'));
dropdown.addEventListener('catClose', () => console.log('Dropdown closed'));
// Methods
await dropdown.open(); // Open dropdown
await dropdown.close(); // Close dropdown
await dropdown.toggle(); // Toggle dropdown
console.log(dropdown.isOpen); // Check if open
```
--------------------------------
### Tabs Component Usage (cat-tabs)
Source: https://context7.com/haiilo/catalyst/llms.txt
Demonstrates various configurations for the cat-tabs component, including basic setup, icons, alignment, adaptive/responsive modes, URL linking, error states, and sticky tabs.
```html
```
--------------------------------
### Local Development: Build and Test Catalyst Packages
Source: https://github.com/haiilo/catalyst/blob/main/README.md
Steps to build and locally test changes in Catalyst packages. This involves building all projects, installing dependencies, and then packing specific packages for local file-based installation in consumer projects.
```bash
pnpm build
pnpm install
cd angular/projects/catalyst
pnpm pack
cd ../../dist/catalyst
pnpm pack
```
--------------------------------
### Cat-Select Component Examples
Source: https://context7.com/haiilo/catalyst/llms.txt
Illustrates different use cases for the cat-select component, including basic single selection, multiple selections, and select with tagging capabilities. It covers setting placeholders, clearable options, and hints for tag creation.
```html
```
--------------------------------
### Cat-Input Component Examples
Source: https://context7.com/haiilo/catalyst/llms.txt
Demonstrates various configurations of the cat-input component, including basic text input, email validation, password toggling, search with clearing, price input with prefixes/suffixes, date/time masking, file uploads, and horizontal layout. It also shows event handling for changes, focus, blur, and file selection, along with method calls for focus, blur, and clearing.
```html
```
--------------------------------
### Alert Component (cat-alert) Examples
Source: https://context7.com/haiilo/catalyst/llms.txt
Showcases the cat-alert component with different color variants (primary, info, success, warning, danger), custom icons, disabling icons, and using rich content within the alert.
```html
New Feature: Check out our latest updates!
Information: Your session will expire in 5 minutes.
Success: Your changes have been saved.
Warning: This action cannot be undone.
Error: Failed to save changes. Please try again.
Tip: You can use keyboard shortcuts for faster navigation.
Simple notification message without an icon.
System Maintenance
Scheduled maintenance on Saturday, 10 PM - 2 AM.
Learn More
```
--------------------------------
### Catalyst Utility Classes for Styling
Source: https://context7.com/haiilo/catalyst/llms.txt
Provides examples of using Catalyst's pre-defined utility classes for common styling needs in HTML. Covers spacing, flexbox, typography, borders, backgrounds, and elevation/shadows.
```html
Padding medium on all sides
Padding top and bottom large
Margin small on all sides
Horizontally centered
Item 1
Item 2
Row 1
Row 2
Primary color text
Danger/error text
Muted/secondary text
Long text that will be truncated...
All borders
Top border only
Medium border radius
Primary background
Muted/gray background
Small shadow
Medium shadow
Large shadow
```
--------------------------------
### Design Tokens in SCSS and CSS
Source: https://context7.com/haiilo/catalyst/llms.txt
Shows how to import and use design tokens from `@haiilo/catalyst-tokens` within SCSS files for styling components, and how to utilize them as CSS custom properties. Provides examples for colors, spacing, borders, typography, and transitions.
```scss
// Import tokens in SCSS
@use '@haiilo/catalyst-tokens/dist/scss/variables' as tokens;
.custom-component {
// Color tokens
color: tokens.$color-theme-primary-text;
background-color: tokens.$color-theme-primary-bg;
&:hover {
background-color: tokens.$color-theme-primary-bg-hover;
}
// Spacing tokens
padding: tokens.$size-spacing-m;
margin-bottom: tokens.$size-spacing-l;
// Border tokens
border-radius: tokens.$size-border-radius-m;
border: tokens.$size-border-width solid tokens.$color-ui-border;
// Typography tokens
font-family: tokens.$font-family-default;
font-size: tokens.$size-font-m;
font-weight: tokens.$font-weight-medium;
// Z-index tokens
z-index: tokens.$z-index-dropdown;
// Transitions
transition: background-color tokens.$time-transition-s ease;
}
// Using CSS custom properties
.my-element {
color: var(--cat-primary-text);
background: var(--cat-primary-bg);
padding: var(--cat-spacing-m);
border-radius: var(--cat-border-radius-m);
}
```
--------------------------------
### Perform Release Actions with PNPM
Source: https://github.com/haiilo/catalyst/blob/main/README.md
This script automates the release process for all projects within the repository using PNPM and semantic-release. It handles version bumping, building, installation, publishing, and Git tagging.
```bash
pnpm run release:{patch|minor|major}
pnpm run build
pnpm install
pnpm run publish
git push --follow-tags origin main
```
--------------------------------
### Using Stencil Web Components via Node Modules (Local)
Source: https://github.com/haiilo/catalyst/blob/main/core/README.md
This snippet illustrates how to install a Stencil component from npm and include it in your project by referencing its local ES Module file within your project's node_modules directory. This is useful for managing dependencies within a larger application.
```bash
npm install my-component --save
```
```html
```
--------------------------------
### Local Development: Update Consumer Project Package JSON
Source: https://github.com/haiilo/catalyst/blob/main/README.md
Example configurations for updating a consumer project's `package.json` to use locally built Catalyst packages via file protocol. This allows for testing changes before publishing.
```json
"@haiilo/catalyst": "file:../../../catalyst/core",
"@haiilo/catalyst-angular": "file:../../../catalyst/angular/dist/catalyst/haiilo-catalyst-angular-13.4.0.tgz"
```
```json
"@haiilo/catalyst": "file:../../../catalyst/core",
"@haiilo/catalyst-react": "file:../../../catalyst/react/dist"
```
--------------------------------
### Angular Component Integration with Catalyst
Source: https://context7.com/haiilo/catalyst/llms.txt
Demonstrates integrating Catalyst Angular components, including setup in `app.module.ts`, using template-driven and reactive forms with `cat-input`, `cat-select`, `cat-datepicker`, and `cat-checkbox`, and utilizing the `CatDialogService` for modal dialogs. Requires `@haiilo/catalyst-angular`.
```typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { CatalystModule } from '@haiilo/catalyst-angular';
@NgModule({
imports: [
CatalystModule.forRoot() // Initialize custom elements
]
})
export class AppModule { }
// component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
template: `
`
})
export class MyComponent {
name = '';
form = this.fb.group({
email: ['', [Validators.required, Validators.email]],
country: [''],
date: [''],
terms: [false, Validators.requiredTrue]
});
constructor(private fb: FormBuilder) {}
}
// Using the dialog service
import { CatDialogService } from '@haiilo/catalyst-angular';
@Component({...})
export class DialogExample {
constructor(private dialogService: CatDialogService) {}
openDialog() {
const dialogRef = this.dialogService.open(MyDialogComponent, {
data: { title: 'Confirm Action' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result:', result);
});
}
}
```
--------------------------------
### Using Stencil Web Components within a Stencil App
Source: https://github.com/haiilo/catalyst/blob/main/core/README.md
This demonstrates how to integrate a Stencil component into another Stencil application. It involves installing the component via npm and then importing it directly into your Stencil project's code, allowing for seamless usage within your Stencil components.
```bash
npm install my-component --save
```
```javascript
import my-component;
// Then you can use the element anywhere in your template, JSX, html etc
```
--------------------------------
### Show Notifications with CatNotificationService
Source: https://github.com/haiilo/catalyst/blob/main/core/src/index.html
This code snippet shows how to use the `catNotificationService` to display various types of notifications. It includes examples of setting custom actions, modes, and close buttons.
```javascript
import { catNotificationService } from '/build/index.esm.js';
document.getElementById('notification-trigger').onclick = function () {
catNotificationService.show('Item saved', { autoClose: false, closeButton: true, action: 'Show saved items' });
catNotificationService.show('This is light', { mode: 'light', closeButton: true, icon: 'globe-outlined', action: 'Seite neu laden' });
catNotificationService.show('Article was saved', { action: 'Undo' });
catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', { icon: 'globe-outlined', action: 'Seite neu laden' });
};
```
--------------------------------
### Select Component Methods
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-select/readme.md
This section describes the methods available for programmatic control of the select component.
```APIDOC
## Select Component Methods
### Description
Methods available for programmatic control of the select component.
### Methods
#### `clear() => Promise`
Clears the input value of the select component.
Returns:
- Type: `Promise`
#### `connect(connector: CatSelectConnector) => Promise`
Connects the functions of the select component.
Parameters:
- **connector** (CatSelectConnector) - The `CatSelectConnector` for the select component.
Returns:
- Type: `Promise`
#### `doBlur() => Promise`
Programmatically removes focus from the input element. It is recommended to use this method over the native `input.blur()`.
Returns:
- Type: `Promise`
```
--------------------------------
### Cat-Select Data Loading and Event Handling (JavaScript)
Source: https://context7.com/haiilo/catalyst/llms.txt
Details how to implement the connector pattern for asynchronous data loading in cat-select using RxJS observables. It shows how to define 'resolve', 'retrieve', and 'render' functions for data management and item display. Event handling for 'catChange', 'catOpen', 'catClose', and 'catBlur' is also demonstrated, along with setting initial values for single and multiple selections, including tags.
```javascript
import { of } from 'rxjs';
// Define items
const countries = [
{ id: '1', name: 'United States', code: 'US' },
{ id: '2', name: 'Canada', code: 'CA' },
{ id: '3', name: 'United Kingdom', code: 'UK' },
{ id: '4', name: 'Germany', code: 'DE' },
{ id: '5', name: 'France', code: 'FR' }
];
// Create connector
const countryConnector = {
// Resolve selected IDs to items
resolve: (ids) => of(countries.filter(c => ids.includes(c.id))),
// Retrieve items with search and pagination
retrieve: (term, page) => {
const filtered = countries.filter(c =>
c.name.toLowerCase().includes(term.toLowerCase())
);
const pageSize = 10;
const start = page * pageSize;
const content = filtered.slice(start, start + pageSize);
return of({
content,
last: start + pageSize >= filtered.length,
totalElements: filtered.length
});
},
// Render item for display
render: (item) => ({
label: item.name,
description: item.code,
avatar: {
initials: item.code,
round: true
}
})
};
// Connect to select component
const select = document.querySelector('cat-select');
await select.connect(countryConnector);
// Set initial value
select.value = '1'; // Single select
select.value = ['1', '2']; // Multiple select
// With tagging
select.value = { id: '1', tag: '' }; // Single with tag
select.value = { ids: ['1'], tags: ['Custom Tag'] }; // Multiple with tags
// Event handling
select.addEventListener('catChange', () => console.log('Selection changed:', select.value));
select.addEventListener('catOpen', () => console.log('Dropdown opened'));
select.addEventListener('catClose', () => console.log('Dropdown closed'));
select.addEventListener('catBlur', () => console.log('Select blurred'));
```
--------------------------------
### Cat-Input Event Handling and Methods (JavaScript)
Source: https://context7.com/haiilo/catalyst/llms.txt
Shows how to handle events emitted by the cat-input component, such as 'catChange', 'catFocus', 'catBlur', and 'catChangeFiles'. It also demonstrates the usage of imperative methods like 'doFocus', 'doBlur', and 'clear' to programmatically control the input's state.
```javascript
const input = document.querySelector('cat-input');
input.addEventListener('catChange', (e) => console.log('Value changed:', e.detail));
input.addEventListener('catFocus', (e) => console.log('Input focused'));
input.addEventListener('catBlur', (e) => console.log('Input blurred'));
input.addEventListener('catChangeFiles', (e) => console.log('Files selected:', e.detail));
// Methods
await input.doFocus(); // Focus the input
await input.doBlur(); // Remove focus
await input.clear(); // Clear the input value
```
--------------------------------
### Basic cat-button Component Usage
Source: https://context7.com/haiilo/catalyst/llms.txt
Demonstrates various ways to use the `cat-button` Web Component, including different variants (filled, outlined, text, link), colors, and sizes. It shows how to apply styles and basic functionality.
```html
Primary ActionSecondary ActionDeleteExternal LinkExtra SmallSmallMedium (default)LargeExtra LargeAdd ItemContinueProcessing...UnavailableSubmit FormGo to DashboardOpen Docs
```
--------------------------------
### Initialize Catalyst Icons and Translations (JavaScript)
Source: https://github.com/haiilo/catalyst/blob/main/core/src/index.html
Initializes the Catalyst icon and internationalization registries. It adds a set of predefined icons and sets translations for various UI elements like datepickers, timepickers, and dialogs. This setup is crucial for the correct display and functionality of Catalyst components.
```javascript
import { ci } from '/build/assets/icons/js/icons.object.js';
import { catI18nRegistry, catIconRegistry } from '/build/index.esm.js';
catIconRegistry.addIcons(ci);
catI18nRegistry.set({
'datepicker.prevYear': 'Previous year',
'datepicker.nextYear': 'Next year',
'datepicker.prevMonth': 'Previous month',
'datepicker.nextMonth': 'Next month',
'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
'datepicker.today': 'Today',
'datepicker.change': 'Change date',
'datepicker.choose': 'Choose date',
'timepicker.change': 'Change time',
'timepicker.choose': 'Choose time',
'datepicker.year': 'Year',
'datepicker.month': 'Month',
'datepicker.hour': 'Hour',
'datepicker.minute': 'Minute',
'datepicker.scroll': 'Scroll to increment',
'datepicker.toggle': 'Click to toggle',
'datepicker.clear': 'Clear',
'dialog.close': 'Close',
'input.clear': 'Clear',
'input.optional': 'Optional',
'input.required': 'Required',
'input.showPassword': 'Show password',
'input.hidePassword': 'Hide password',
'notification.dismiss': 'Dismiss',
'pagination.prev': 'Previous',
'pagination.page': 'Go to page {{page}},
'pagination.next': 'Next',
'select.close': 'Close',
'select.deselect': 'Deselect',
'select.empty': 'No items',
'select.open': 'Open',
'tabs.more': 'More'
});
```
--------------------------------
### Button Methods
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-button/readme.md
This section describes the methods available on the Haiilo Catalyst Button component.
```APIDOC
## Button Methods
This section describes the methods available on the Haiilo Catalyst Button component.
### `doBlur() => Promise`
Programmatically remove focus from the button. Use this method instead of `button.blur()`.
#### Returns
Type: `Promise`
```
--------------------------------
### Input Field Configurations
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-datepicker/readme.md
This section details the configurable properties for input fields within the Haiilo Catalyst project, including placeholder text, positioning, read-only status, and required markers.
```APIDOC
## Input Field Configurations
### Description
Configuration options for input fields, controlling their appearance and behavior.
### Method
N/A (Configuration object)
### Endpoint
N/A
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **placeholder** (string | undefined) - The placeholder text to display within the input.
- **position** (string | Placement | ((self: Instance, customElement: HTMLElement | undefined) => void) | undefined) - Where the calendar is rendered relative to the input vertically and horizontally. In the format of "[vertical] [horizontal]". Vertical can be auto, above or below (required). Horizontal can be left, center or right.
- **readonly** (boolean) - The value is not editable.
- **required** (boolean) - A value is required or must be check for the form to be submittable.
- **requiredMarker** (string | undefined) - Whether the label need a marker to shown if the input is required or optional.
- **step** (number) - The step size to use when changing the time.
- **textPrefix** (string | undefined) - A textual prefix to be displayed in the input.
### Request Example
```json
{
"placeholder": "Enter text here",
"position": "below right",
"readonly": false,
"required": true,
"requiredMarker": "required!",
"step": 10,
"textPrefix": "ID:"
}
```
### Response
#### Success Response (200)
N/A (This represents configuration options, not a data retrieval endpoint.)
#### Response Example
N/A
```
--------------------------------
### Define Layout and Component Styles (CSS)
Source: https://github.com/haiilo/catalyst/blob/main/core/src/index.html
Defines layout structures like .wrapper, .toolbar, and navigation (#nav) using flexbox for alignment and spacing. It also styles content areas, canvas elements, and sections, including typography examples and aside elements. These styles control the overall page structure and appearance of Catalyst components.
```css
.wrapper {
display: flex;
flex-direction: row;
gap: 8rem;
}
.toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fff;
border-bottom: 1px solid #ebecf0;
position: sticky;
top: 0;
z-index: 3;
}
.tabs {
box-shadow: none;
}
#nav {
align-self: flex-start;
position: sticky;
top: 8rem;
width: 300px;
margin: 4rem 0;
border-right: 1px solid #ebecf0;
}
#nav ul {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#nav .active {
font-weight: bold;
}
.content {
max-width: 600px;
padding: 2rem 0;
}
.canvas-fake {
background: #f2f4f7;
border-radius: 0.5rem;
padding: 3.5rem;
}
section {
flex: 0 1 auto;
padding: 5rem 0;
}
section:not(:last-of-type) {
border-bottom: 1px solid rgba(0, 0, 0, 10%);
}
section > h2:not(:first-child),
section > h3:not(:first-child) {
margin-top: 2rem;
}
section > h2:not(:last-child),
section > h3:not(:last-child) {
margin-bottom: 1rem;
}
section.typography {
display: flex;
gap: 5rem;
}
/* Text page stylings */
section.typography .example {
max-width: 600px;
margin: 0 auto;
}
figure img {
max-width: 100%;
}
section.typography aside {
display: flex;
flex-direction: column;
gap: 7rem;
max-width: 450px;
box-sizing: content-box;
padding-right: 5rem;
border-right: 1px solid #ebecf0;
}
.switches {
position: fixed;
bottom: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: end;
}
.switches cat-button {
width: fit-content;
}
```
--------------------------------
### Input Component Properties
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-date/readme.md
This section details the various properties available for the input component, including their types, descriptions, and default values.
```APIDOC
## Input Component Properties
### Description
This document outlines the properties available for the input component, specifying their types, whether they are required, and their default values.
### Method
N/A (Component Properties)
### Endpoint
N/A (Component Properties)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
N/A
### Response
#### Success Response (200)
N/A
#### Response Example
N/A
## Property Details:
- **`icon`** (`string | undefined`) - Optional - The name of an icon to be displayed in the input. Default: `undefined`.
- **`iconRight`** (`boolean`) - Optional - Display the icon on the right. Default: `false`.
- **`identifier`** (`string | undefined`) - Optional - A unique identifier for the input. Default: `undefined`.
- **`label`** (`string`) - Required - The label for the input. Default: `''`.
- **`labelHidden`** (`boolean`) - Optional - Visually hide the label, but still show it to assistive technologies like screen readers. Default: `false`.
- **`max`** (`string | undefined`) - Optional - A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD. Default: `undefined`.
- **`min`** (`string | undefined`) - Optional - A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD. Default: `undefined`.
- **`name`** (`string | undefined`) - Optional - The name of the form control. Submitted with the form as part of a name/value pair. Default: `undefined`.
- **`nativeAttributes`** (`undefined | { [key: string]: string; }`) - Optional - Attributes that will be added to the native HTML input element. Default: `undefined`.
```
--------------------------------
### Datepicker Component Event Handling and Methods (cat-datepicker)
Source: https://context7.com/haiilo/catalyst/llms.txt
Demonstrates how to listen for 'catChange', 'catFocus', and 'catBlur' events on the datepicker component, and shows how to programmatically trigger focus and blur actions.
```javascript
const datepicker = document.querySelector('cat-datepicker');
datepicker.addEventListener('catChange', (e) => {
console.log('Selected date:', e.detail); // ISO string
});
datepicker.addEventListener('catFocus', () => console.log('Datepicker focused'));
datepicker.addEventListener('catBlur', () => console.log('Datepicker blurred'));
// Methods
await datepicker.doFocus();
await datepicker.doBlur();
```
--------------------------------
### Using Stencil Web Components via Script Tag
Source: https://github.com/haiilo/catalyst/blob/main/core/README.md
This method shows how to include Stencil-generated Web Components in an HTML file using a script tag that points to the component's ES Module file hosted on a CDN like unpkg. This approach is framework-agnostic and suitable for quick integration.
```html
```
--------------------------------
### Select Component Properties
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-select/readme.md
This section details the configurable properties of the select component, including hints, tagging behavior, test identifiers, and value management.
```APIDOC
## Select Component Properties
### Description
Properties that can be configured for the select component.
### Parameters
#### Request Body
- **tagHint** (string | undefined) - Optional hint text to be displayed on the new item to be added.
- **tags** (boolean) - Whether the select should add new items. Defaults to `false`.
- **testId** (string | undefined) - A unique identifier for the underlying native element used for testing purposes. This is added as a `data-test` attribute.
- **value** (CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined) - The value of the select. This can be a single item ID, an array of IDs, or a complex object when tagging is enabled.
```
--------------------------------
### Input Attributes
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-input/readme.md
This section details the attributes that can be used to configure input elements within the Haiilo Catalyst project.
```APIDOC
## Input Attributes
This section details the attributes that can be used to configure input elements within the Haiilo Catalyst project.
### Parameters
#### Query Parameters
- **minLength** (number | undefined) - Optional - A minimum length (number of characters) for textual values.
- **multiple** (boolean | undefined) - Optional - Whether the input should allow multiple files to be selected.
- **name** (string | undefined) - Optional - The name of the form control. Submitted with the form as part of a name/value pair.
- **nativeAttributes** (undefined | { [key: string]: string; }) - Optional - Attributes that will be added to the native HTML input element.
- **placeholder** (string | undefined) - Optional - The placeholder text to display within the input.
- **readonly** (boolean) - Optional - The value is not editable. Defaults to `false`.
- **required** (boolean) - Optional - A value is required or must be checked for the form to be submittable. Defaults to `false`.
- **requiredMarker** ( "none!" | "none" | "optional!" | "optional" | "required!" | "required" | undefined) - Optional - Whether the label needs a marker to show if the input is required or optional. Defaults to `'optional'`.
- **round** (boolean) - Optional - Use round input edges. Defaults to `false`.
- **testId** (string | undefined) - Optional - A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
```
--------------------------------
### URL Target Property
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-tab/readme.md
Documentation for the `urlTarget` property, which specifies where a linked document should be opened.
```APIDOC
## GET /haiilo/catalyst/urlTarget
### Description
Specifies where to open the linked document.
### Method
GET
### Endpoint
/haiilo/catalyst/urlTarget
### Parameters
#### Query Parameters
- **urlTarget** (string) - Required - Specifies where to open the linked document. Allowed values are `"_blank"`, `"_self"`, or `undefined`.
### Response
#### Success Response (200)
- **urlTarget** (string) - The target attribute for the link.
#### Response Example
{
"urlTarget": "_blank"
}
```
--------------------------------
### Datepicker Component Usage (cat-datepicker)
Source: https://context7.com/haiilo/catalyst/llms.txt
Illustrates various configurations for the cat-datepicker component, including basic date selection, time, datetime, date range, week selection, min/max constraints, validation, and pre-populated values.
```html
```
--------------------------------
### Input Component Props
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-input/readme.md
This section details the various props available for the Haiilo Catalyst input component, including their types, default values, and descriptions.
```APIDOC
## Input Component Props
This document outlines the properties that can be configured for the input component within the Haiilo Catalyst project.
### Parameters
#### Props
- **horizontal** (`boolean | undefined`) - Optional - Whether the label is on top or left. Default: `undefined`
- **icon** (`string | undefined`) - Optional - The name of an icon to be displayed in the input. Default: `undefined`
- **iconRight** (`boolean`) - Optional - Display the icon on the right. Default: `false`
- **identifier** (`string | undefined`) - Optional - A unique identifier for the input. Default: `undefined`
- **label** (`string`) - Required - The label for the input. Default: `''`
- **labelHidden** (`boolean`) - Optional - Visually hide the label, but still show it to assistive technologies like screen readers. Default: `false`
- **loading** (`boolean`) - Optional - Displays the input in a loading state with a spinner. Default: `false`
- **max** (`number | string | undefined`) - Optional - A maximum value for numeric values. Default: `undefined`
- **maxLength** (`number | undefined`) - Optional - A maximum length (number of characters) for textual values. Default: `undefined`
- **min** (`number | string | undefined`) - Optional - A minimum value for numeric values. Default: `undefined`
### Request Example
```json
{
"horizontal": true,
"icon": "search",
"iconRight": false,
"identifier": "user-search",
"label": "Search Users",
"labelHidden": false,
"loading": false,
"max": 100,
"maxLength": 50,
"min": 0
}
```
### Response
#### Success Response (200)
This component does not have a direct API endpoint for success responses as it is a UI component. The props listed above configure its behavior and appearance.
#### Response Example
N/A
```
--------------------------------
### Toggle Methods
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-toggle/readme.md
Describes the methods available for programmatic control of the toggle component.
```APIDOC
## Toggle Methods
### `doBlur() => Promise`
Programmatically remove focus from the toggle. Use this method instead of `input.blur()`.
#### Returns
Type: `Promise`
### `doFocus(options?: FocusOptions) => Promise`
Programmatically move focus to the toggle. Use this method instead of `input.focus()`.
#### Parameters
| Name | Type | Description |
| --------- | --------------------------- | -------------------------------------------------------------------------------- |
| `options` | `FocusOptions | undefined` | An optional object providing options to control aspects of the focusing process. |
#### Returns
Type: `Promise`
```
--------------------------------
### Tabs Component Event Handling and Methods (cat-tabs)
Source: https://context7.com/haiilo/catalyst/llms.txt
Shows how to handle the 'catChange' event for the tabs component and demonstrates methods for programmatically controlling the active tab and updating adaptive tab layouts.
```javascript
const tabs = document.querySelector('cat-tabs');
tabs.addEventListener('catChange', (e) => {
console.log('Active tab:', e.detail.id);
console.log('Tab index:', e.detail.index);
console.log('From dropdown:', e.detail.fromDropdown);
});
// Methods
await tabs.setActive('tab2'); // Activate by ID
await tabs.setActiveIndex(1); // Activate by index
await tabs.updateAdaptiveTabs(); // Recalculate responsive tabs
```
--------------------------------
### Dropdown Methods
Source: https://github.com/haiilo/catalyst/blob/main/core/src/components/cat-dropdown/readme.md
Methods available for controlling the dropdown component.
```APIDOC
## Dropdown Methods
### Description
These methods allow programmatic control over the dropdown's state.
### Methods
#### `close()`
Closes the dropdown.
Returns:
Type: `Promise`
#### `open(isFocusVisible?: boolean)`
Opens the dropdown.
Parameters:
- **isFocusVisible** (boolean) - Optional - Whether focus should be visible.
Returns:
Type: `Promise`
```
--------------------------------
### Initialize VanillaScrollspy Navigation
Source: https://github.com/haiilo/catalyst/blob/main/core/src/index.html
This code initializes the VanillaScrollspy plugin for a navigation element. It selects the navigation bar by its ID and then calls the `init` method on the scrollspy instance.
```javascript
// --- init navigation
const navbar = document.getElementById('nav');
const scrollspy = VanillaScrollspy(navbar);
scrollspy.init();
```