npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@sixbell-telco/sdk

v0.7.3

Published

A collection of reusable components designed for use in Sixbell Telco Angular projects

Downloads

479

Readme

Sixbell Telco SDK

We are thrilled to have you here. This SDK is designed to provide you with a comprehensive set of UI components to accelerate your development process. Whether you are building a small project or a large-scale application, our components are crafted to be flexible, customizable, and easy to integrate.

Explore the documentation, try out the examples, and start building amazing applications with Sixbell Telco SDK today!

Happy coding!

sixbell-telco-sdk-banner

Pre-requirements

  • Angular 18.X.X or later

Available Components

General components

| Component | Description | | -------------- | ---------------------------------- | | Accordion | Expandable/collapsible content | | Accordion Item | Item within an accordion | | Avatar | User avatar display | | Button | Buttons for various actions | | Card | Container for content and actions | | Countdown | Countdown timer | | Dropdown | Dropdown menu for actions or links | | Dual List | Dual list for selecting items | | File Uploader | Upload files | | File Dropzone | Drag and drop file upload | | Icon | Display icons | | Link | Hyperlink component | | Modal | Modal dialog | | Notification | Display notifications | | Paginator | Pagination controls | | Product Card | Display product information | | Progress | Progress bar | | Tab | Tabbed navigation | | Table | Display tabular data | | Toast | Toast notifications | | Tooltip | Display tooltips | | Wizard | Step-by-step wizard |

Forms specific components

| Component | Description | | ---------- | ------------------------------- | | Checkbox | Checkbox input | | Combobox | Combo box for selecting options | | Datepicker | Date selection input | | Form Error | Display form errors | | Input | Text input field | | Radio | Radio button input | | Range | Range slider input | | Select | Dropdown select input | | Switch | Toggle switch input | | Textarea | Multi-line text input | | Toggle | Toggle button input |

Setup

Quick Setup (Recommended)

We provide a CLI tool for automatic setup:

npx @sixbell-telco/cli init

This will automatically:

  • Install all necessary dependencies
  • Configure Tailwind CSS and Daisy UI
  • Set up required theme configurations

Note: The CLI tool is currently a work in progress and is not yet available. Coming soon!

Manual Setup

  1. Install dependencies:
npm i -D @sixbell-telco/sdk @tailwindcss/typography daisyui @midudev/tailwind-animations
  1. Configure Tailwind CSS (Tailwind guide)

  2. Add the provided configuration to your tailwind.config.js [See detailed config below]

/** @type {import('tailwindcss').Config} */
// const plugin = require('tailwindcss/plugin');

module.exports = {
  content: ['./src/**/*.{html,ts}', './node_modules/@sixbell-telco/sdk/**/*.{html,ts,js,mjs}'],
  theme: {
    extend: {
      colors: {
        'primary-gradient': 'rgba(var(--primary-gradient), <alpha-value>)',
        tertiary: 'rgba(var(--tertiary), <alpha-value>)',
        'tertiary-content': 'rgba(var(--tertiary-content), <alpha-value>)',
        'neutral-secondary': 'rgba(var(--neutral-secondary),  <alpha-value>)',
        'base-placeholder': 'rgba(var(--base-placeholder), <alpha-value>)',
        'metrics-increase': 'rgba(var(--metrics-increase), <alpha-value>)',
        'metrics-decrease': 'rgba(var(--metrics-decrease), <alpha-value>)',
        'metrics-neutral': 'rgba(var(--metrics-neutral), <alpha-value>)',
        'metrics-intensity-highest': 'rgba(var(--metrics-intensity-highest), <alpha-value>)',
        'metrics-intensity-high': 'rgba(var(--metrics-intensity-high), <alpha-value>)',
        'metrics-intensity-medium': 'rgba(var(--metrics-intensity-medium), <alpha-value>)',
        'metrics-intensity-low': 'rgba(var(--metrics-intensity-low), <alpha-value>)',
        'metrics-intensity-lowest': 'rgba(var(--metrics-intensity-lowest), <alpha-value>)',
      },
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        heading: ['Poppins', 'sans-serif'],
        body: ['Poppins', 'sans-serif'],
      },
      boxShadow: {
        main: '0px 0px 8px 0px rgba(var(--shadow-primary))',
      },
      fontWeight: {
        inherit: 'inherit',
      },
      transitionTimingFunction: {
        'ease-out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        'ease-in-and-out-back': 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
      },
      keyframes: {
        wave: {
          '0%, 100%': { transform: 'scaleY(0)' },
          '50%': { transform: 'scaleY(1)' },
        },
      },
      animation: {
        'slide-in': 'slideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)',
        'slide-out': 'slideOut 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)',
        'toast-slide-out': 'toastSlideOut 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55)',
        'fade-in': 'fadeIn 1s',
        'fade-out': 'fadeOut 1s',
        wave: 'wave 1s linear infinite',
      },
    },
  },
  daisyui: {
    themes: [
      {
        vivid_elegance_light: {
          // Daisy UI theme variables
          primary: '#15A1C1',
          'primary-content': '#ffffff',
          secondary: '#D0D3D7',
          'secondary-content': '#080809',
          accent: '#FF6B35',
          'accent-content': '#080809',
          neutral: '#E2E5E9',
          'neutral-content': '#080809',
          'base-100': '#F2F4F7',
          'base-200': '#FFFFFF',
          'base-300': '#E2E8F0',
          'base-content': '#080809',
          info: '#0070E0',
          'info-content': '#ffffff',
          success: '#34CC05',
          'success-content': '#134B02',
          warning: '#DBD706',
          'warning-content': '#5E5D02',
          error: '#ef5145',
          'error-content': '#460A06',
          // Custom colors
          '--primary-gradient': '7, 90, 105',
          '--tertiary': '166, 166, 166',
          '--tertiary-content': '8, 8, 9',
          '--neutral-secondary': '169, 170, 178',
          '--neutral-secondary-content': '255, 255, 255',
          '--base-placeholder': '101, 104, 108',
          '--shadow-primary': '186, 185, 185,  0.40',
          // Custom properties for metrics
          '--metrics-increase': '46, 204, 113',
          '--metrics-decrease': '231, 76, 60',
          '--metrics-neutral': '127, 140, 141',
          '--metrics-intensity-highest': '77, 214, 237',
          '--metrics-intensity-high': '101, 222, 241',
          '--metrics-intensity-medium': '125, 229, 244',
          '--metrics-intensity-low': '149, 236, 247',
          '--metrics-intensity-lowest': '220, 247, 252',
          // Daisy UI utility variables
          '--rounded-box': '1rem', // border radius rounded-box utility class, used in card and other large boxes
          '--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element
          '--rounded-badge': '1.9rem', // border radius rounded-badge utility class, used in badges and similar
          '--animation-btn': '0.25s', // duration of animation when you click on button
          '--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc
          '--btn-focus-scale': '0.95', // scale transform of button when you focus on it
          '--border-btn': '1px', // border width of buttons
          '--tab-border': '1px', // border width of tabs
          '--tab-radius': '0.5rem', // border radius of tabs,
          // custom button sizes
          '.btn-md': {
            height: '2.5rem',
            'min-height': '2.5rem',
          },
          '.btn-square:where(.btn-md)': {
            height: '2.5rem',
            width: '2.5rem',
            padding: '0',
          },
          '.btn-circle:where(.btn-md)': {
            height: '2.5rem',
            width: '2.5rem',
            padding: '0',
          },
          '.btn-lg': {
            height: '3rem',
            'min-height': '3rem',
            'padding-left': '1rem',
            'padding-right': '1rem',
            'font-size': '1.125rem',
          },
          '.btn-square:where(.btn-lg)': {
            height: '3rem',
            width: '3rem',
            padding: '0',
          },
          '.btn-circle:where(.btn-lg)': {
            height: '3rem',
            width: '3rem',
            padding: '0',
          },
          // custom input sizes
          '.input-md': {
            height: '2.5rem',
            'min-height': '2.5rem',
          },
          '.input-lg': {
            height: '3rem',
            'min-height': '3rem',
          },
          // custom select sizes
          '.select-md': {
            height: '2.5rem',
            'min-height': '2.5rem',
          },
          '.select-lg': {
            height: '3rem',
            'min-height': '3rem',
          },
        },
        vivid_elegance_dark: {
          // Daisy UI theme variables
          primary: '#15A1C1',
          'primary-content': '#ffffff',
          secondary: '#5D5F69',
          'secondary-content': '#FFFFFF',
          accent: '#FF8B5A',
          'accent-content': '#1E1E1E',
          neutral: '#616161',
          'neutral-content': '#FFFFFF',
          'base-100': '#121212',
          'base-200': '#1E1E1E',
          'base-300': '#2A2A2A',
          'base-content': '#FFFFFF',
          info: '#0070E0',
          'info-content': '#ffffff',
          success: '#34CC05',
          'success-content': '#134B02',
          warning: '#DBD706',
          'warning-content': '#5E5D02',
          error: '#FF4133',
          'error-content': '#4D0500',
          // Custom colors
          '--primary-gradient': '7, 90, 105',
          '--tertiary': '161, 161, 161',
          '--tertiary-content': '55, 56, 62',
          '--neutral-secondary': '169, 170, 178',
          '--neutral-secondary-content': '255, 255, 255',
          '--base-placeholder': '178, 179, 81',
          '--shadow-primary': '0, 0, 0,  0.40',
          // Custom properties for metrics
          '--metrics-increase': '46, 204, 113',
          '--metrics-decrease': '231, 76, 60',
          '--metrics-neutral': '127, 140, 141',
          '--metrics-intensity-highest': '77, 214, 237',
          '--metrics-intensity-high': '101, 222, 241',
          '--metrics-intensity-medium': '125, 229, 244',
          '--metrics-intensity-low': '149, 236, 247',
          '--metrics-intensity-lowest': '220, 247, 252',
          // Daisy UI utility variables
          '--rounded-box': '1rem', // border radius rounded-box utility class, used in card and other large boxes
          '--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element
          '--rounded-badge': '1.9rem', // border radius rounded-badge utility class, used in badges and similar
          '--animation-btn': '0.25s', // duration of animation when you click on button
          '--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc
          '--btn-focus-scale': '0.95', // scale transform of button when you focus on it
          '--border-btn': '1px', // border width of buttons
          '--tab-border': '1px', // border width of tabs
          '--tab-radius': '0.5rem', // border radius of tabs,
          // custom button sizes
          '.btn-md': {
            height: '2.5rem',
            'min-height': '2.5rem',
          },
          '.btn-square:where(.btn-md)': {
            height: '2.5rem',
            width: '2.5rem',
            padding: '0',
          },
          '.btn-circle:where(.btn-md)': {
            height: '2.5rem',
            width: '2.5rem',
            padding: '0',
          },
          '.btn-lg': {
            height: '3rem',
            'min-height': '3rem',
            'padding-left': '1rem',
            'padding-right': '1rem',
            'font-size': '1rem',
          },
          '.btn-square:where(.btn-lg)': {
            height: '3rem',
            width: '3rem',
            padding: '0',
          },
          '.btn-circle:where(.btn-lg)': {
            height: '3rem',
            width: '3rem',
            padding: '0',
          },
          // custom input sizes
          '.input-md': {
            height: '2.5rem',
            'min-height': '2.5rem',
          },
          '.input-lg': {
            height: '3rem',
            'min-height': '3rem',
          },
          // custom select sizes
          '.select-md': {
            height: '2.5rem',
            'min-height': '2.5rem',
          },
          '.select-lg': {
            height: '3rem',
            'min-height': '3rem',
          },
        },
      },
    ],
  },
  plugins: [require('@midudev/tailwind-animations'), require('@tailwindcss/typography'), require('tailwind-scrollbar'), require('daisyui')],
};
  1. Below tailwind decorators in your global styles file add
@import 'node_modules/@sixbell-telco/sdk/_index.scss';

With that configuration the library custom CSS will be loaded

  1. Microfrontend Configuration (Required for Microfrontends Only)

Add the following path mapping to your tsconfig.json file under compilerOptions.paths:

"@sixbell-telco/sdk/*": ["./node_modules/@sixbell-telco/sdk/*"]

Complete example of a tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "@sixbell-telco/sdk/*": ["./node_modules/@sixbell-telco/sdk/*"]
      // ... other path mappings
    }
    // ... other compiler options
  }
}

This configuration ensures proper module resolution in microfrontend architectures.

  1. VSCode Settings (Optional)

For VSCode users, it is recommended to install the official Tailwind CSS extension and add the following to your settings.json file:

"tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list", "classes", "containerClasses", "titleClasses", "actionsClasses"]

With those settings VSCode will pick the library custom attributes to give class intellisense

  1. Translations

Before setting up translations, first install the necessary packages:

npm install @ngx-translate/core @ngx-translate/http-loader [email protected]

Setup

  1. Create a folder (e.g., /assets/i18n) to store your translation files.
  2. In the folder, add separate JSON files for each language:
  • en.json (English)
  • es.json (Spanish)
  • pt.json (Portuguese)
  1. In each file, include the corresponding translations for file uploader, for example:
English
{
  "sdk": {
    "fileUpload": {
      "dropzone": {
        "selectPrompt": "Click to select files or drag and drop here",
        "maxSizeLabel": "Max size:",
        "allowedTypesLabel": "Allowed types:",
        "invalidFileType": "Invalid file type",
        "fileTooLarge": "File too large",
        "fileCounter": "{{current}} of {{max}} files",
        "maxFilesExceeded": "Maximum {{max}} file(s) allowed",
        "noValidFiles": "No valid files selected",
        "fileActions": {
          "play": "Play audio",
          "pause": "Pause audio",
          "download": "Download file",
          "remove": "Remove file"
        }
      },
      "fileUploader": {
        "allowedTypesLabel": "Allowed types:"
      }
    },
    "audioPlayer": {
      "trackListTitle": "Tracks",
      "trackInfo": {
        "title": "No title",
        "description": "No description"
      }
    },
    "countdown": {
      "days": "Days",
      "hours": "Hours",
      "minutes": "Minutes",
      "seconds": "Seconds"
    },
    "dualList": {
      "searchPlaceHolder": "Search"
    },
    "combobox": {
      "noResultsFound": "No results found",
      "loading": "Loading..."
    },
    "formErrors": {
      "validation": {
        "required": "*This field is required",
        "email": "*Please enter a valid email address",
        "minLength": "*Must be at least {{min}} characters",
        "maxLength": "*Must be no more than {{max}} characters",
        "min": "*Value must be at least {{min}}",
        "max": "*Value must be no more than {{max}}",
        "pattern": "*Invalid format",
        "unhandledError": "*Unhandled error"
      }
    },
    "textarea": {
      "maxCharacters": "{{current}} of {{max}} characters"
    },
    "table": {
      "entriesByPage": "Entries per page",
      "totalEntries": "{{total}} entries",
      "entriesRange": "{{range}} of {{total}} entries",
      "emptyListMessage": "No items to show"
    },
    "wizard": {
      "wizardMarker": {
        "completed": "Completed",
        "inProgress": "In progress",
        "pending": "Pending"
      },
      "wizardWrapper": {
        "back": "Back",
        "previous": "Previous",
        "end": "End",
        "next": "Next"
      }
    }
  }
}
Spanish
{
  "sdk": {
    "fileUpload": {
      "dropzone": {
        "selectPrompt": "Haz clic para seleccionar archivos o arrastra y suelta aquí",
        "maxSizeLabel": "Tamaño máximo:",
        "allowedTypesLabel": "Tipos permitidos:",
        "invalidFileType": "Tipo de archivo no válido",
        "fileTooLarge": "Archivo demasiado grande",
        "fileCounter": "{{current}} de {{max}} archivos",
        "maxFilesExceeded": "Máximo de {{max}} archivo(s) permitido",
        "noValidFiles": "No se han seleccionado archivos válidos",
        "fileActions": {
          "play": "Reproducir audio",
          "pause": "Pausar audio",
          "download": "Descargar archivo",
          "remove": "Quitar archivo"
        }
      },
      "fileUploader": {
        "allowTypesLabel": "Tipos permitidos:"
      }
    },
    "audioPlayer": {
      "trackListTitle": "Pistas",
      "trackInfo": {
        "title": "Sin título",
        "description": "Sin descripción"
      }
    },
    "countdown": {
      "days": "Días",
      "hours": "Horas",
      "minutes": "Minutos",
      "seconds": "Segundos"
    },
    "dualList": {
      "searchPlaceHolder": "Buscar"
    },
    "combobox": {
      "noResultsFound": "No se encontraron resultados",
      "loading": "Cargando..."
    },
    "formErrors": {
      "validation": {
        "required": "*Este campo es obligatorio",
        "email": "*Por favor ingresa una dirección de correo válida",
        "minLength": "*Debe tener al menos {{min}} caracteres",
        "maxLength": "*No debe tener más de {{max}} caracteres",
        "min": "*El valor debe ser al menos {{min}}",
        "max": "*El valor no debe superar {{max}}",
        "pattern": "*Formato inválido",
        "unhandledError": "*Error inesperado"
      }
    },
    "textarea": {
      "maxCharacters": "{{current}} de {{max}} caracteres"
    },
    "table": {
      "entriesByPage": "Entradas por página",
      "totalEntries": "{{total}} entradas",
      "entriesRange": "{{range}} de {{total}} entradas",
      "emptyListMessage": "No hay elementos para mostrar"
    },
    "wizard": {
      "wizardMarker": {
        "completed": "Completado",
        "inProgress": "En progreso",
        "pending": "Pendiente"
      },
      "wizardWrapper": {
        "back": "Atrás",
        "previous": "Anterior",
        "end": "Finalizar",
        "next": "Siguiente"
      }
    }
  }
}
Portuguese
{
  "sdk": {
    "fileUpload": {
      "dropzone": {
        "selectPrompt": "Haz clic para seleccionar archivos o arrastra y suelta aquí",
        "maxSizeLabel": "Tamaño máximo:",
        "allowedTypesLabel": "Tipos permitidos:",
        "invalidFileType": "Tipo de archivo no válido",
        "fileTooLarge": "Archivo demasiado grande",
        "fileCounter": "{{current}} de {{max}} archivos",
        "maxFilesExceeded": "Máximo de {{max}} archivo(s) permitido",
        "noValidFiles": "No se han seleccionado archivos válidos",
        "fileActions": {
          "play": "Reproducir audio",
          "pause": "Pausar audio",
          "download": "Descargar archivo",
          "remove": "Quitar archivo"
        }
      },
      "fileUploader": {
        "allowedTypesLabel": "Tipos permitidos:"
      }
    },
    "audioPlayer": {
      "trackListTitle": "Trilhas",
      "trackInfo": {
        "title": "Sem título",
        "description": "Sem descrição"
      }
    },
    "countdown": {
      "days": "Dias",
      "hours": "Horas",
      "minutes": "Minutos",
      "seconds": "Segundos"
    },
    "dualList": {
      "searchPlaceHolder": "Pesquisar"
    },
    "combobox": {
      "noResultsFound": "Nenhum resultado encontrado",
      "loading": "Carregando..."
    },
    "formErrors": {
      "validation": {
        "required": "*Este campo é obrigatório",
        "email": "*Por favor, insira um endereço de e-mail válido",
        "minLength": "*Deve ter pelo menos {{min}} caracteres",
        "maxLength": "*Deve ter no máximo {{max}} caracteres",
        "min": "*O valor deve ser de pelo menos {{min}}",
        "max": "*O valor deve ser de no máximo {{max}}",
        "pattern": "*Formato inválido",
        "unhandledError": "*Erro não tratado"
      }
    },
    "textarea": {
      "maxCharacters": "{{current}} de {{max}} caracteres"
    },
    "table": {
      "entriesByPage": "Entradas por página",
      "totalEntries": "{{total}} entradas",
      "entriesRange": "{{range}} de {{total}} entradas",
      "emptyListMessage": "Nenhum item para mostrar"
    },
    "wizard": {
      "wizardMarker": {
        "completed": "Concluído",
        "inProgress": "Em andamento",
        "pending": "Pendente"
      },
      "wizardWrapper": {
        "back": "Voltar",
        "previous": "Anterior",
        "end": "Fim",
        "next": "Próximo"
      }
    }
  }
}
  1. Configure your translation loader. If you are using Angular i18n, ngx-translate, etc., first import in your app.config.ts:
import { HttpBackend } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { provideTranslateService, TranslateLoader } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';

export function HttpLoaderFactory(_httpBackend: HttpBackend) {
  return new MultiTranslateHttpLoader(_httpBackend, ['/assets/i18n/']);
}
  1. Then, add the provider to your application configuration:
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideTranslateService({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpBackend],
      },
    }),
  ],
};
  1. Finally, set up the basic configuration in your app.component to load the translations:
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    this.translate.addLangs(['en', 'es', 'pt']);
    this.translate.setDefaultLang('en');
    this.translate.use('en');
  }
}

With this configuration, all the translations related to the SDK will be loaded.

Usage Example

Here's a basic example of using a button component:

// app.component.ts
import { ButtonComponent } from '@sixbell-telco/sdk/components/button';

@Component({
  imports: [ButtonComponent],
  template: `
    <div>
      <h1>Awesome button</h1>
    	  <st-button variant="primary">Click me!</st-button>
    </div>
  `
})

Documentation

For detailed component documentation, visit our Storybook

Note: Our Storybook documentation is currently a work in progress and will be available soon!

Last update

This file was last updated on February 18th, 2025.