### Run Add Code Example Schematic (npm)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/schematics/README.md

This command runs the 'add-code-example' schematic using npm. It requires the schematic package to be installed globally. The primary argument is the name for the new code example.

```bash
npm run add-code-example [name] -w projects/sds
```

--------------------------------

### Run Add Preview Schematic (npm)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/schematics/README.md

This command executes the 'add-preview' schematic via npm, requiring the schematics package to be installed. It takes two arguments: the name of the code example (which can be new or existing) and the name of the new preview to be added.

```bash
npm run add-preview [code-example] [preview] -w projects/sds
```

--------------------------------

### Install and Use Oblique CLI

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Installs the Oblique CLI globally and demonstrates creating a new Angular workspace with Oblique pre-configured. It outlines the interactive prompts for setup, including component prefix, application title, supported locales, schema validation, HTTP interceptor, testing frameworks, and code quality tools.

```bash
# Install CLI globally
npm install -g @oblique/cli

# Create new Angular workspace with Oblique pre-configured
ob new my-government-app --interactive

# Interactive prompts will ask for:
# - Prefix for components (default: 'app')
# - Application title
# - Supported locales (de-CH, fr-CH, it-CH)
# - Schema validation with Ajv
# - HTTP interceptor configuration
# - Jest for testing
# - ESLint, Prettier, Husky setup

# Update Oblique and dependencies in existing project
cd my-government-app
ob update

# Show version
ob -v

# Show help
ob -h
```

--------------------------------

### Install Oblique with ng add Schematic

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Provides instructions for installing the Oblique framework into an existing Angular project using the `ng add` schematic. It covers both interactive installation with detailed prompts for configuration and non-interactive installation using default settings. The command automatically updates project files like `angular.json`, `package.json`, and `app.config.ts`.

```bash
# Add Oblique to existing Angular project
cd my-angular-project
ng add @oblique/oblique

# Interactive prompts will configure:
# 1. Application title (for master layout header)
# 2. Locales: de-CH, fr-CH, it-CH (multi-select)
# 3. Schema validation with Ajv (Yes/No)
# 4. Unknown route module (404 handling) (Yes/No)
# 5. HTTP interceptor (automatic error handling) (Yes/No)
# 6. Banner (environment indicator) (Yes/No)
# 7. External links module (Yes/No)
# 8. Language selection in header (Yes/No)
# 9. Font Awesome icons (Yes/No)
# 10. OAuth authentication (Yes/No)
# 11. Jest testing framework (Yes/No)
# 12. Sonar configuration (Yes/No)
# 13. Prettier code formatter (Yes/No)
# 14. ESLint (Yes/No)
# 15. Lint-staged (pre-commit hooks) (Yes/No)
# 16. Husky git hooks (Yes/No)

# Non-interactive installation with defaults
ng add @oblique/oblique --skip-confirmation

# After installation, files are automatically updated:
# - angular.json (adds Oblique styles)
# - package.json (adds dependencies)
# - tsconfig.json (adds paths)
# - app.config.ts (adds provideObliqueConfiguration)
# - app.component.ts (adds master layout)

# Start development server
npm start
```

--------------------------------

### HTML Definition Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<dfn>` tag represents the term (or word) that is being defined in the context of a definition (or glossary) list.

```html
The term <dfn>Snaccident</dfn> refers to eating an entire pizza by accident.
```

--------------------------------

### HTML Keyboard Input Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<kbd>` tag defines keyboard input. It represents user input that is to be typed on a keyboard.

```html
To escape from reality, press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Dream</kbd>.
```

--------------------------------

### HTML Sample Output Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<samp>` tag defines sample output from a computer program. It is typically rendered in a monospace font.

```html
<samp>Error 404: Snack not found.</samp>
```

--------------------------------

### HTML Small Text Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<small>` tag defines text that should be styled with a smaller font, such as for copyright or legal text.

```html
<small>This is some important information but in a very small text to test your eyesight.</small>
```

--------------------------------

### Date Picker with Initial Value

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/form/previews/other-options/datepicker-example-other-options-preview.component.html

Shows a date picker component initialized with a specific starting date. This is useful for pre-populating the date selection.

```html
<p>
  A date picker with an initial date
</p>
```

--------------------------------

### HTML Code Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<code>` tag defines a piece of computer code. This tag is used for inline code snippets.

```html
<code>if (coffeeCup.isEmpty()) {{ refill(); }} else { sip(); }</code>
```

--------------------------------

### HTML Superscript Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<sup>` tag defines superscript text. This is typically used for footnotes, mathematical notations, or exponents.

```html
E=mc<sup>2</sup> and also coffee<sup>2</sup> = happiness.
```

--------------------------------

### HTML Mark Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<mark>` tag defines marked or highlighted text. It is often used to highlight search results or important text.

```html
Do not forget to <mark>feed the cat at 6 PM</mark> or face the consequences.
```

--------------------------------

### HTML Variable Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<var>` tag represents a variable in a mathematical expression or a programming context. It is typically rendered in italics.

```html
In the equation of life, <var>happiness</var> = <var>cats</var> + <var>coffee</var>.
```

--------------------------------

### HTML Anchor Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<a>` tag defines a hyperlink, used to link from one page to another. The href attribute specifies the URL of the page the link goes to.

```html
<a href="#">A sample anchor.</a>
```

--------------------------------

### HTML Bold Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<b>` tag specifies bold text without any extra importance. Use this for keywords, or introductory paragraphs, without conveying they have extra importance.

```html
I told my cat she was <b>not allowed</b> on the table. She showed me her <b>&quot;I don&#39;t care&quot;</b> face.
```

--------------------------------

### HTML Abbreviation Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<abbr>` tag is used to mark up abbreviations and acronyms. It can provide a full description in its title attribute.

```html
<abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr>, and <abbr title="JavaScript">JS</abbr>.
```

--------------------------------

### HTML Output Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<output>` tag represents the result of a calculation or the outcome of a user action. It's often used with JavaScript to display results.

```html
<output for="calc">42</output> - the answer to life, universe, and everything.
```

--------------------------------

### HTML Subscript Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<sub>` tag defines subscript text. This is typically used for chemical formulas or mathematical notations.

```html
H<sub>2</sub>O is my favorite beverage.
```

--------------------------------

### HTML Inline Quotation Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<q>` tag defines a short quotation. Browsers typically insert quotation marks around the content.

```html
As my grandma always says, <q>An apple a day keeps anyone away if you throw it hard enough.</q>
```

--------------------------------

### HTML Citation Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<cite>` tag defines the title of a work (e.g. a book, essay, paper, website, song, play, poem, radio program, film, television program, comic strip, or video game).

```html
My favorite book is <cite>How to Train Your Human</cite> by Whiskers McFluffy.
```

--------------------------------

### HTML Idiomatic Text Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<i>` tag defines a part of text in an alternate voice or mood, or otherwise offset from the normal prose. Typically rendered in italics.

```html
I&#39;m on a seafood diet. I see food, and <i>I eat it</i>.
```

--------------------------------

### HTML Label Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<label>` tag defines a label for an `<input>` element. Labels are important for accessibility, allowing screen readers to announce the purpose of the input field.

```html
<label for="overlord">Name of your Overlord:</label>
<input type="text" id="overlord" name="overlord">
```

--------------------------------

### HTML Emphasis Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<em>` tag defines emphasized text, typically rendered in italics. It conveys stress emphasis.

```html
I <em>definitely</em> didn&#39;t order online shopping at midnight... it was my cat!
```

--------------------------------

### Use Service Navigation Web Component in React

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Illustrates integrating the Service Navigation web component within a React application. It shows how to pass properties like `profileLinks` (as a JSON string) and how to listen for component events using React's `useEffect` hook. This example assumes React and Babel are set up.

```jsx
function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  const profileLinks = [
    { id: 'profile', url: '/profile', label: 'Profile' }
  ];

  React.useEffect(() => {
    const nav = document.querySelector('ob-service-navigation-web-component');
    nav.addEventListener('loginState', (e) => {
      setIsLoggedIn(e.detail.isLoggedIn);
    });
  }, []);

  return (
    <div>
      <ob-service-navigation-web-component
        environment="PROD"
        profileLinks={JSON.stringify(profileLinks)}
        display-applications="true"
        display-profile="true">
      </ob-service-navigation-web-component>
    </div>
  );
}
```

--------------------------------

### HTML Strikethrough Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<s>` tag defines text that is no longer correct or relevant. Browsers typically render text within an `<s>` tag with a strikethrough.

```html
I absolutely hate <s>love</s> doing laundry.
```

--------------------------------

### HTML Strong Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<strong>` tag defines text with strong importance, seriousness, or urgency. Browsers typically render text within a `<strong>` tag as bold.

```html
Warning: Do <strong>not</strong> believe the dog when he says he didn&#39;t eat your homework.
```

--------------------------------

### HTML Inserted Text Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<ins>` tag defines a block of text that has been inserted into a document. Browsers typically render text within an `<ins>` tag with an underline.

```html
I need to buy chocolate and ice cream <ins>vegetables</ins>.
```

--------------------------------

### HTML Underline Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<u>` tag defines text that should be rendered as unarticulated annotation. This is often used for text that should be styled in a way that indicates a thought or comment separate from the main text.

```html
<u>Warning: Do not press this button!</u>
```

--------------------------------

### HTML Deleted Text Tag Example

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/typography/previews/inline-elements/typography-example-inline-elements-preview.component.html

The `<del>` tag defines text that has been deleted from a document. Browsers typically render text within a `<del>` tag with a strikethrough.

```html
<del>Buy more snacks for myself</del> Buy healthy food.
```

--------------------------------

### Build and Generate Schematic with CLI

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/toolchain/README.md

This command sequence first builds the @oblique/toolchain package and then uses the Angular Schematics CLI to generate a 'hello-world' file. It's a common pattern for testing schematic generation locally.

```bash
npm run build -w @oblique/toolchain && npx @angular-devkit/schematics-cli ./dist/toolchain/:hello-world --name=hello-world.txt
```

```bash
npm run build -w @oblique/toolchain && npx @angular-devkit/schematics-cli ./dist/toolchain/:hello-world --name=hello-world.txt
```

```bash
cd projects/toolchain/ && npm run build && cd ../../ && npx @angular-devkit/schematics-cli ./dist/toolchain/:hello-world --name=hello-world.txt
```

--------------------------------

### Use Service Navigation Web Component in Vanilla HTML

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Demonstrates how to include and interact with the Service Navigation web component in a standard HTML file. It shows basic usage, accessing the component via JavaScript, configuring profile links, and listening to events like login state changes and logout triggers. No external framework dependencies are required for this basic usage.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Service Navigation Demo</title>
  <script src="https://unpkg.com/@oblique/service-navigation-web-component/dist/service-navigation-web-component.js"></script>
</head>
<body>
  <!-- Use in vanilla HTML -->
  <ob-service-navigation-web-component
    id="serviceNav"
    environment="PROD"
    display-applications="true"
    display-profile="true"
    display-authentication="true">
  </ob-service-navigation-web-component>

  <script>
    // Access web component via JavaScript
    const serviceNav = document.getElementById('serviceNav');

    // Configure profile links
    serviceNav.profileLinks = [
      { id: 'profile', url: '/profile', label: 'My Profile' },
      { id: 'settings', url: '/settings', label: 'Settings' }
    ];

    // Listen to events
    serviceNav.addEventListener('loginState', (event) => {
      console.log('Login state changed:', event.detail);
    });

    serviceNav.addEventListener('logoutTriggered', () => {
      console.log('User logged out');
      // Handle logout
    });
  </script>
</body>
</html>
```

--------------------------------

### Icon Integration in Text and Lists

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/material/icon/icon.sample.component.html

Demonstrates how icons are embedded within text paragraphs and utilized in a list structure. This section covers the general approach to displaying icons and references a loop for icon iteration, implying a dynamic list generation. No specific dependencies are mentioned, and the output is primarily visual presentation within an HTML context.

```html
<p>A paragraph with an icon within it.</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Another paragraph with text above and below the icon. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

@for (icon of icons; track icon) { }
```

--------------------------------

### Ob-breadcrumb: Default Configuration

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/breadcrumb/breadcrumb.component.html

Demonstrates the basic usage of the ob-breadcrumb component with its default settings. No specific dependencies or configurations are required for this basic implementation.

```html
<ob-breadcrumb></ob-breadcrumb>
```

--------------------------------

### Build Schematics for npm Package (npm)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/schematics/README.md

This command builds the schematics for use with the npm package. It's a prerequisite step before running schematics directly via the '@angular/schematics' package. This command is executed within the specified project directory.

```bash
npm run schematics-build -w projects/sds
```

--------------------------------

### Translate i18n Routes Sample

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/column-layout-full-height/column-layout-full-height-sample.component.html

This snippet demonstrates how to translate routes for internationalization (i18n) in a sample application. It utilizes a translation pipe to dynamically set the title for route configurations.

```html
{{ "i18n.routes.samples.column-layout.title" | translate }}
```

--------------------------------

### Collapse Component UI (HTML)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/collapse/collapse-sample.component.html

This snippet represents the basic HTML structure for a collapsible UI element. It includes a placeholder for the collapse title and content that can be expanded or collapsed. It also defines sections for animating duration and icon positions.

```html
<div class="collapse">
  {{ collapseTitle }}

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum

  animate duration @for (variant of durations; track variant) { {{ variant.viewValue }} } iconPositions @for (variant of iconPositions; track variant) { {{ variant.viewValue }} }

  collapse
</div>
```

--------------------------------

### Popover Content with Parameter (Blazor)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/popover/popover.component.html

This snippet illustrates how to include dynamic content within the Popover, utilizing a parameter named 'param'. This allows for personalized or context-specific information to be displayed inside the popover. This assumes a Blazor environment.

```html
Popover example. Here goes your content! {{ param }}
```

--------------------------------

### Manage Oblique Master Layout

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Demonstrates using the ObMasterLayoutService to control the application's master layout. It shows how to configure the header (service navigation, applications, profile, authentication), navigation (full-width, scroll mode), footer (scroll transition, size), and overall layout behavior (fixed, cover, main navigation). It also sets the home page route.

```typescript
import { Component, inject, OnInit } from '@angular/core';
import { ObMasterLayoutService } from '@oblique/oblique';

@Component({
  selector: 'app-root',
  template: '<ob-master-layout></ob-master-layout>'
})
export class AppComponent implements OnInit {
  private readonly masterLayout = inject(ObMasterLayoutService);

  ngOnInit(): void {
    // Configure header
    this.masterLayout.header.configureServiceNavigation({
      displayApplications: true,
      displayProfile: true,
      displayAuthentication: true,
      returnUrl: window.location.href
    });

    // Configure navigation
    this.masterLayout.navigation.isFullWidth = false;
    this.masterLayout.navigation.scrollMode = 'enabled';

    // Configure footer
    this.masterLayout.footer.hasScrollTransition = true;
    this.masterLayout.footer.isSmall = false;

    // Configure layout behavior
    this.masterLayout.layout.isFixed = true;
    this.masterLayout.layout.hasCover = false;
    this.masterLayout.layout.hasMainNavigation = true;

    // Set home page route
    this.masterLayout.homePageRoute = '/home';
  }
}
```

--------------------------------

### Display Filtered Icons with Translations (Angular Template)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/icons/previews/icons-gallery/icons-example-icons-gallery-preview.component.html

This Angular template code iterates through a list of filtered icons. For each icon, it displays translated screen reader descriptions, usage information, the icon name, and detailed descriptions (including what to use for and what not to use for). It relies on Angular's async pipe and translate pipe for data binding and internationalization.

```html
@for (icon of filteredIcons$ | async; track icon) {

{{ "i18n.icons.screen-reader-description" | translate: { icon } }} {{ "i18n.icons.descriptions." + icon + ".use-for" | translate }}

{{ icon }}

{{ "i18n.icons.description-label" | translate | uppercase }}

{{ "i18n.icons.descriptions." + icon + ".description" | translate }}

{{ "i18n.icons.use-for-label" | translate | uppercase }}

{{ "i18n.icons.descriptions." + icon + ".use-for" | translate }}

{{ "i18n.icons.do-not-use-for-label" | translate | uppercase }}

{{ "i18n.icons.descriptions." + icon + ".do-not-use-for" | translate }}

{{ "i18n.icons.description-caption" | translate: { icon } | uppercase }}

}
```

--------------------------------

### Popover Conditional Rendering - Hover Toggle (Blazor)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/popover/popover.component.html

This snippet shows the conditional rendering for a Popover triggered by hover. The text dynamically changes based on whether the popover is currently visible or not, guiding the user on how to interact with it. This assumes a Blazor environment.

```html
@if (toggleHandle === toggleTypeHover) {

{{ popoverVisible ? "Leave to close" : "Hover to open" }} the Popover

}
```

--------------------------------

### Get Mouse Movement Coordinates with RxJS

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sds/src/app/code-examples/code-examples/global-events/previews/properties/global-events-example-properties-preview.component.html

This RxJS observable tracks the 'mousemove' event to provide the real-time X and Y coordinates of the mouse pointer as it moves across the document. It's useful for interactive features that respond to cursor position. The current coordinates are displayed conditionally.

```html
@if (mouseMove$ | async; as loc) { X: {{ loc.xCoordinate }} Y: {{ loc.yCoordinate }} }
```

--------------------------------

### Icon Styling Options

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/material/icon/icon.sample.component.html

Illustrates the available styling options for icons, including color variants (brand-default, brand-primary, brand-accent, brand-success, brand-warning) and font size adjustments. This implies a CSS-based styling mechanism where predefined classes are applied to icons.

```css
Color brand-default brand-primary brand-accent brand-success brand-warning Font size
```

--------------------------------

### Multi-Column Layout - Angular TypeScript

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Utilizes the Oblique UI column layout component to create responsive layouts with configurable column proportions. It supports features like borders and automatic collapsing on mobile devices. The example shows both a two-column layout with left and right content areas and a three-column layout with left, center, and right areas.

```typescript
import { Component } from '@angular/core';
import { ObColumnLayoutComponent } from '@oblique/oblique';

@Component({
  selector: 'app-layout-demo',
  template: `
    <ob-column-layout [left]="30" [right]="70" [hasBorder]="true">
      <div obColumnLeft class="sidebar">
        <h3>Navigation</h3>
        <ul>
          <li><a routerLink="/home">Home</a></li>
          <li><a routerLink="/about">About</a></li>
          <li><a routerLink="/contact">Contact</a></li>
        </ul>
      </div>

      <div obColumnRight class="content">
        <h1>Main Content Area</h1>
        <p>This area takes up 70% of the width on desktop.</p>
        <p>On mobile devices, both columns stack vertically.</p>
      </div>
    </ob-column-layout>

    <!-- Three column layout -->
    <ob-column-layout [left]="20" [center]="60" [right]="20">
      <div obColumnLeft>Left Sidebar</div>
      <div obColumnCenter>Main Content</div>
      <div obColumnRight>Right Sidebar</div>
    </ob-column-layout>
  `,
  imports: [ObColumnLayoutComponent]
})
export class LayoutDemoComponent {}
```

--------------------------------

### Displaying Global Resize Event Target

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/global-events/global-events-sample.component.html

This snippet illustrates capturing and displaying the target element associated with global window resize events. It uses RxJS observables for asynchronous data retrieval. This can be helpful for responsive design debugging.

```html
{{ (globalEvents.resize$ | async)?.target || "-" }}
```

--------------------------------

### ObServiceNavigationComponent: Swiss Government Navigation (Angular)

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Implements a service navigation widget for Swiss government portals, integrating user profiles, application switching, messages, and authentication. It uses Oblique UI components and requires Angular.

```typescript
import { Component } from '@angular/core';
import { ObServiceNavigationComponent, ObEPamsEnvironment, ObIServiceNavigationLink } from '@oblique/oblique';

@Component({
  selector: 'app-root',
  template: `
    <ob-service-navigation
      [environment]="environment"
      [displayApplications]="true"
      [displayProfile]="true"
      [displayAuthentication]="true"
      [profileLinks]="profileLinks"
      [infoLinks]="infoLinks"
      [maxAmountOfApps]="8"
      [handleLogout]="false"
      (loginState)="onLoginStateChange($event)"
      (logoutTriggered)="onLogout()">
    </ob-service-navigation>
  `,
  imports: [ObServiceNavigationComponent]
})
export class AppComponent {
  environment = ObEPamsEnvironment.PROD;

  profileLinks: ObIServiceNavigationLink[] = [
    {
      id: 'profile',
      url: '/profile',
      label: 'My Profile',
      isExternal: false
    },
    {
      id: 'settings',
      url: '/settings',
      label: 'Settings'
    }
  ];

  infoLinks: ObIServiceNavigationLink[] = [
    {
      id: 'help',
      url: 'https://help.admin.ch',
      label: 'Help Center',
      isExternal: true
    },
    {
      id: 'contact',
      url: '/contact',
      label: 'Contact Support'
    }
  ];

  onLoginStateChange(state: any): void {
    console.log('Login state changed:', state);
  }

  onLogout(): void {
    console.log('Logout triggered');
    // Handle logout logic
  }
}

```

--------------------------------

### Handle Custom Events from Service Navigation Web Component (JavaScript)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/service-navigation-web-component/src/index.html

This section demonstrates how to listen for and respond to custom events emitted by the 'ob-service-navigation-web-component'. These events include language changes, login state updates, button clicks, and logout triggers. The code logs the event details to the console, providing insights into the component's internal state and user interactions.

```javascript
document.querySelector("ob-service-navigation-web-component").addEventListener("languageChange", (event) => {
  const lang = event.detail;
  document.querySelector("#languageSelect").value = lang;
  console.log("languageChange", lang);
});
document.querySelector("ob-service-navigation-web-component").addEventListener("loginState", (event) => console.log("loginState", event.detail));
document.querySelector("ob-service-navigation-web-component").addEventListener("buttonClickedEmitter", (event) => console.log("button clicked", event.detail));
document.querySelector("ob-service-navigation-web-component").addEventListener("logoutTriggered", (event) => console.log("logout triggered", event.detail));
```

--------------------------------

### Displaying Global Key Up Event Target

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/global-events/global-events-sample.component.html

This code illustrates how to capture and display the target of a global key up event. It utilizes RxJS observables and the async pipe for efficient event stream processing. This helps in identifying elements affected by key releases.

```html
{{ (globalEvents.keyUp$ | async)?.target || "-" }}
```

--------------------------------

### Card Controls (Text)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/material/card/card.component.html

Lists the available controls for managing the visibility of various card features. These are typically used to toggle UI elements on or off.

```text
Controls

Toggle features Avatar Title Subtitle Header Picture Content Actions Checkbox Mode Alert Disabled Signature
```

--------------------------------

### Configure Oblique Application

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Provides the root configuration for bootstrapping an Angular application with Oblique. It includes settings for translation (available languages, default language, additional translation files), Material Design defaults (form field appearance), icon configuration (icon font), and accessibility statement settings.

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { provideObliqueConfiguration } from '@oblique/oblique';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideObliqueConfiguration({
      // Translation configuration
      translate: {
        config: {
          availableLangs: ['de-CH', 'fr-CH', 'it-CH'],
          defaultLang: 'de-CH'
        },
        additionalFiles: ['app-translations']
      },
      // Material Design defaults
      material: {
        MAT_FORM_FIELD_DEFAULT_OPTIONS: {
          appearance: 'outline',
          hideRequiredMarker: false
        }
      },
      // Icon configuration
      icon: {
        font: 'FontAwesome'
      },
      // Accessibility statement
      accessibilityStatement: {
        url: '/accessibility',
        showInFooter: true
      }
    })
  ]
});
```

--------------------------------

### Conditional Rendering with Sticky Header (Angular)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/sticky/sticky-sample.component.html

Demonstrates conditional rendering of content based on the 'stickyHeader' variable in an Angular template. This snippet shows how to toggle UI elements like 'Left Middle Right' based on a boolean flag. No external dependencies are required beyond Angular's template syntax.

```html
@if (stickyHeader) {

Left Middle Right

}
```

--------------------------------

### ObAutocompleteComponent: Searchable Dropdown in Angular

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

The ObAutocompleteComponent provides a Material-based autocomplete functionality, enabling users to filter and select options from a dropdown. It supports highlighting matched text and grouping options for better organization. This component is part of the Oblique UI library and requires import.

```typescript
import { Component } from '@angular/core';
import { ObAutocompleteComponent, ObIAutocompleteInputOption, ObIAutocompleteInputOptionGroup } from '@oblique/oblique';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-autocomplete-demo',
  template: `
    <ob-autocomplete
      [formControl]="selectedCountry"
      [autocompleteOptions]="countries"
      [inputLabelKey]="'Select Country'"
      [highlightCssClass]="'highlight'"
      [filterRegexFlag]="'gi'"
      (selectedOptionChange)="onCountrySelected($event)">
    </ob-autocomplete>

    <ob-autocomplete
      [formControl]="selectedCity"
      [autocompleteOptions]="citiesByCountry"
      [inputLabelKey]="'Select City'">
    </ob-autocomplete>
  `,
  imports: [ObAutocompleteComponent]
})
export class AutocompleteDemoComponent {
  selectedCountry = new FormControl('');
  selectedCity = new FormControl('');

  // Flat options
  countries: ObIAutocompleteInputOption[] = [
    { label: 'Switzerland', value: 'CH' },
    { label: 'Germany', value: 'DE' },
    { label: 'France', value: 'FR' },
    { label: 'Italy', value: 'IT' },
    { label: 'Austria', value: 'AT' }
  ];

  // Grouped options
  citiesByCountry: ObIAutocompleteInputOptionGroup[] = [
    {
      label: 'Switzerland',
      options: [
        { label: 'Bern', value: 'BE' },
        { label: 'Zurich', value: 'ZH' },
        { label: 'Geneva', value: 'GE' }
      ]
    },
    {
      label: 'Germany',
      options: [
        { label: 'Berlin', value: 'BER' },
        { label: 'Munich', value: 'MUC' },
        { label: 'Hamburg', value: 'HAM' }
      ]
    }
  ];

  onCountrySelected(option: ObIAutocompleteInputOption): void {
    console.log('Selected country:', option.label, option.value);
    // Load cities for selected country
  }
}

```

--------------------------------

### Angular Module Import for Oblique Framework

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/styles/block-elements/block-elements.component.html

Demonstrates how to import necessary modules from the Oblique framework into an Angular application's AppModule. This includes essential components like MasterLayoutModule and NotificationModule, typically required for UI and notification functionalities.

```typescript
import {MasterLayoutModule, NotificationModule, ...} from '@oblique/oblique';

@NgModule({
	declarations: [...],
	imports: [
	...,
	MasterLayoutModule,
	NotificationModule,
	...
],
...,
})
export class AppModule {}
```

--------------------------------

### ObSpinnerService: Manage Loading Indicators

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Handles global or channel-specific loading spinners with automatic activation/deactivation and force stop. It requires ObSpinnerService from '@oblique/oblique' and HttpClient for data fetching. The spinner can be activated and deactivated per channel, or globally using the default channel.

```typescript
import { Component, inject } from '@angular/core';
import { ObSpinnerService } from '@oblique/oblique';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-data-loader',
  template: `
    <ob-spinner channel="data-loading"></ob-spinner>
    <button (click)="loadData()">Load Data</button>
    <button (click)="forceStop()">Force Stop</button>
  `
})
export class DataLoaderComponent {
  private readonly spinner = inject(ObSpinnerService);
  private readonly http = inject(HttpClient);

  loadData(): void {
    // Activate spinner for specific channel
    this.spinner.activate('data-loading');

    this.http.get('/api/data').pipe(
      finalize(() => {
        // Deactivate when complete (success or error)
        this.spinner.deactivate('data-loading');
      })
    ).subscribe({
      next: (data) => console.log('Data loaded:', data),
      error: (err) => console.error('Load failed:', err)
    });
  }

  forceStop(): void {
    // Force deactivate even if multiple activate() calls were made
    this.spinner.forceDeactivate('data-loading');
  }

  // Using default channel
  showGlobalSpinner(): void {
    this.spinner.activate(); // Uses 'default' channel
    setTimeout(() => this.spinner.deactivate(), 3000);
  }
}

```

--------------------------------

### Conditional Card Rendering (Razor)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/material/card/card.component.html

Demonstrates conditional rendering of card elements based on boolean flags like pictureVisible, alertVisible, headerVisible, etc. This allows for dynamic display of card content and features.

```html
@if (pictureVisible) {  } @if (alertVisible) { New feature } @if (headerVisible) { @if (avatarVisible) { 

} @if (titleVisible) { Default Card } @if (subtitleVisible) { Subtitle } } @if (contentVisible) {The default card is only a presentational artifact, without any form of interaction except for eventual buttons inside.

@if (signatureVisible) { 

OFIT Last login 20.07.2022

} } @if (actionsVisible) { Like Share } @if (pictureVisible) {  } @if (alertVisible) { New feature } @if (headerVisible) { @if (avatarVisible) { 

} @if (titleVisible) { Default Card } @if (subtitleVisible) { Subtitle } } @if (contentVisible) {This card shows a small image.

@if (signatureVisible) { 

OFIT Last login 20.07.2022

} } @if (actionsVisible) { Like Share } @if (pictureVisible) {  } @if (alertVisible) { New feature } @if (headerVisible) { @if (avatarVisible) { 

} @if (titleVisible) { Button Card } @if (subtitleVisible) { Subtitle } } @if (contentVisible) {The Button Card is a card wrapped in a button. The Whole card is clickable

@if (signatureVisible) { 

OFIT Last login 20.07.2022

} }[@if (pictureVisible) {  } @if (alertVisible) { New feature } @if (headerVisible) { @if (avatarVisible) { 

} @if (titleVisible) { Link Card } @if (subtitleVisible) { Subtitle } } @if (contentVisible) {Same concept as the Button Card, but wrapped in a link.

@if (signatureVisible) { 

OFIT Last login 20.07.2022

} }](/material/card) @if (pictureVisible) {  } @if (alertVisible) { New feature } @if (headerVisible) { @if (avatarVisible) { 

} @if (titleVisible) { A person in a space suit } @if (subtitleVisible) { luminous balloons } } @if (contentVisible) {A person in a space suit holding luminous balloons

@if (signatureVisible) { 

OFIT Last login 20.07.2022

} } @if (pictureVisible) {  } @if (alertVisible) { New feature } @if (headerVisible) { @if (avatarVisible) { 

} @if (titleVisible) { A person in a space suit } @if (subtitleVisible) { luminous balloons } } @if (contentVisible) {A person in a space suit holding luminous balloons

@if (signatureVisible) { 

OFIT Last login 20.07.2022

} }
```

--------------------------------

### ObAuthenticationService: OAuth2/OIDC Integration (Angular)

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Provides a wrapper for OAuth2/OIDC authentication flows, including login, logout, and token management. It depends on '@oblique/oblique' and 'angular-oauth2-oidc'. The service handles initiating login and logout, and integrates with the OAuthService for token validation and user information retrieval.

```typescript
import { Component, inject, OnInit } from '@angular/core';
import { ObAuthenticationService } from '@oblique/oblique';
import { OAuthService, AuthConfig } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-auth-demo',
  template: `
    <div *ngIf="!isAuthenticated">
      <button (click)="login()">Login</button>
    </div>
    <div *ngIf="isAuthenticated">
      <p>Welcome, {{userName}}!</p>
      <button (click)="logout()">Logout</button>
    </div>
  `
})
export class AuthDemoComponent implements OnInit {
  private readonly authService = inject(ObAuthenticationService);
  private readonly oauthService = inject(OAuthService);

  isAuthenticated = false;
  userName = '';

  ngOnInit(): void {
    // Configure OAuth
    const authConfig: AuthConfig = {
      issuer: 'https://identity.admin.ch',
      redirectUri: window.location.origin,
      clientId: 'my-client-id',
      responseType: 'code',
      scope: 'openid profile email',
      showDebugInformation: false
    };

    this.oauthService.configure(authConfig);
    this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
      this.isAuthenticated = this.oauthService.hasValidAccessToken();
      if (this.isAuthenticated) {
        const claims = this.oauthService.getIdentityClaims() as any;
        this.userName = claims?.name || claims?.email;
      }
    });
  }

  login(): void {
    // Initiate OAuth login flow
    this.authService.performLogin(
      'additional-state-data', // Optional state parameter
      { prompt: 'login' } // Additional OAuth parameters
    );
  }

  logout(): void {
    this.authService.performLogout();
    this.isAuthenticated = false;
  }
}

```

--------------------------------

### List Type Control Rendering in Templating Language

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/material/list/list.component.html

This snippet displays controls for selecting the type of list. It iterates over 'listTypes' and renders each type, applying a 'titlecase' filter for display. This is part of the project's UI for managing list configurations.

```Template Language
### Controls

Type of list @for (type of listTypes; track type) { {{ type | titlecase }} }
```

--------------------------------

### Conditional Rendering with Sticky Footer (Angular)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/sticky/sticky-sample.component.html

Illustrates conditional rendering of a footer section based on the 'stickyFooter' variable in an Angular template. This allows for dynamic display of footer content, such as 'Left Middle Right'. It relies on Angular's template syntax and a 'stickyFooter' boolean variable.

```html
@if (stickyFooter) {

Left Middle Right

}
```

--------------------------------

### Conditional Chip Rendering (Angular)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/material/chips/chips.component.html

This snippet demonstrates conditional rendering of different chip types (mat-chip-row, mat-chip-option, mat-chip) based on the 'type' variable and a flag 'showAutocompleteForm'. It also includes logic for displaying tags within chips when autocomplete is active.

```html
@if (!showAutocompleteForm) { @if (type === "mat-chip-row") { Chip 1 Chip 2 } @if (type === "mat-chip-option") { Chip 1 Chip 2 } @if (type === "mat-chip") { Chip 1 Chip 2 } } @if (showAutocompleteForm) { Chips autocomplete @if (type === "mat-chip-row") { @for (tag of tags; track tag) { {{ tag }} } } @if (type === "mat-chip-option") { @for (tag of tags; track tag) { {{ tag }} } } @if (type === "mat-chip") { @for (tag of tags; track tag) { {{ tag }} } }  @for (tag of filteredTags | async; track tag) { {{ tag }} } }
```

--------------------------------

### Conditional List Rendering in Templating Language

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/material/list/list.component.html

This snippet demonstrates conditional rendering of different list types based on the 'listType' variable. It iterates over 'contentForList' to display list items, each potentially containing line1, line2, and line3. The rendering logic is duplicated for 'list-without-icon', 'list-with-icon', 'selection-list-without-icon', and 'selection-list-with-icon'.

```Template Language
@if (listType === "list-without-icon") { @for (item of contentForList; track item.id) {### {{ item.line1 }}

{{ item.line2 }} {{ item.line3 }} } }
@if (listType === "list-with-icon") { @for (item of contentForList; track item.id) {### {{ item.line1 }}

{{ item.line2 }} {{ item.line3 }} } }
@if (listType === "selection-list-without-icon") { @for (item of contentForList; track item.id) {### {{ item.line1 }}

{{ item.line2 }} {{ item.line3 }} } }
@if (listType === "selection-list-with-icon") { @for (item of contentForList; track item.id) {### {{ item.line1 }}

{{ item.line2 }} {{ item.line3 }} } }
```

--------------------------------

### Popover Toggle Handle Conditional Rendering (Blazor)

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/popover/popover.component.html

This code demonstrates conditional rendering within the Popover configuration, specifically for the 'toggleHandle' when it's set to 'click' or is undefined. It presents options for closing behavior. This assumes a Blazor environment.

```html
@if (toggleHandle === toggleTypeClick || toggleHandle === undefined) {

Close only on toggle Not set true false

}
```

--------------------------------

### Displaying Global Mouse Move Event Target

Source: https://github.com/thongdanghoang/verbose-funicular/blob/main/projects/sandbox/src/app/samples/global-events/global-events-sample.component.html

This code snippet illustrates how to display the target element associated with global mouse move events. It uses RxJS's async pipe to handle the observable event stream and provides a default value. This is valuable for tracking cursor movement over different elements.

```html
{{ (globalEvents.mouseMove$ | async)?.target || "-" }}
```

--------------------------------

### HTTP Request Handling with ObHttpApiInterceptor in Angular

Source: https://context7.com/thongdanghoang/verbose-funicular/llms.txt

Demonstrates how to use ObHttpApiInterceptor to automatically manage loading spinners, broadcast request events, and handle error notifications for HTTP requests within an Angular application. It shows how to customize interceptor behavior per-request and disable it for specific calls.

```typescript
import { Component, inject, OnInit } from '@angular/core';
import { ObHttpApiInterceptor, ObIHttpApiRequest, ObENotificationType } from '@oblique/oblique';
import { HttpClient } from '@angular/common/http';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-api-demo',
  template: `<button (click)="makeRequest()">API Call</button>`
})
export class ApiDemoComponent implements OnInit {
  private readonly interceptor = inject(ObHttpApiInterceptor);
  private readonly http = inject(HttpClient);

  ngOnInit(): void {
    // Subscribe to interceptor events to customize behavior
    this.interceptor.events.requestIntercepted.subscribe((evt: ObIHttpApiRequest) => {
      console.log('Request intercepted:', evt);

      // Customize per-request behavior
      if (evt.url.includes('/silent-api')) {
        evt.notification.active = false; // Disable error notifications
        evt.spinner = false; // Disable spinner
      }

      if (evt.url.includes('/critical-api')) {
        evt.notification.severity = ObENotificationType.ERROR;
        evt.notification.title = 'Critical Error';
        evt.sticky = true; // Make notifications sticky
      }
    });
  }

  makeRequest(): void {
    // Interceptor automatically:
    // 1. Activates spinner
    // 2. Broadcasts requestIntercepted event
    // 3. Handles session expiration (401)
    // 4. Shows error notification on failure
    // 5. Deactivates spinner when complete
    this.http.get('/api/data').subscribe({
      next: (data) => console.log('Success:', data),
      error: (err) => console.error('Error handled by interceptor:', err)
    });
  }

  // Disable interceptor for specific request
  makeCustomRequest(): void {
    this.interceptor.events.requestIntercepted.pipe(take(1)).subscribe(evt => {
      evt.spinner = false;
      evt.notification.active = false;
    });

    this.http.post('/api/custom', {data: 'value'}).subscribe();
  }
}

```