@tacdaed/fragments 1.0.0-beta.0

package/README.md

@@ -0,0 +1,73 @@
+# Fragments Library
+
+A reusable Angular library for UI fragments, code highlighting, and more.
+
+## Features
+
+- UI components and utilities
+- Syntax highlighting for code blocks
+- SCSS themes and FontAwesome integration
+
+## Installation
+
+Install the library in your Angular project:
+
+```sh
+npm install fragments
+```
+
+## Setup
+
+### 1. Import Library Module
+
+Import the library module in your app module:
+
+```ts
+import { FragmentsModule } from 'fragments';
+
+@NgModule({
+  imports: [
+    FragmentsModule,
+    // ...other modules
+  ],
+})
+export class AppModule {}
+```
+
+### 2. Add Styles to `angular.json`
+
+To enable syntax highlighting, you must import a Highlight.js theme in your app’s `angular.json`:
+
+```json
+"styles": [
+  "node_modules/fragments/assets/styles/scss/highlight.js/github-dark.scss",
+  "node_modules/fragments/assets/styles/scss/style.scss",
+  "node_modules/fragments/assets/font-awesome/css/all.min.css",
+  "src/styles.scss"
+]
+```
+
+#### Choosing a Highlight.js Theme
+
+You can choose any theme from:
+
+```
+node_modules/fragments/assets/styles/scss/highlight.js/
+```
+
+Popular options include:
+
+- `github-dark.scss`
+- `atom-one-dark.scss`
+- `monokai.scss`
+- `default.scss`
+
+Pick the style that best fits your app!
+
+## Notes
+
+- **Highlight.js is bundled with the library.**  
+  You do not need to install it separately.
+- If you do not import a Highlight.js style, code highlighting will not be styled correctly.
+
+---

package/assets/styles/scss/_all.scss

@@ -0,0 +1,5 @@
+@use './fonts';
+@use './variables';
+@use './functions';
+@use './directives/badge';
+@use './directives/tooltip';

package/assets/styles/scss/_fonts.scss

@@ -0,0 +1,122 @@
+/* ==========================================================================
+   FONT DEFINITIONS
+   Path: assets/resources/fonts/
+   ========================================================================== */
+
+/* =======================
+   OPEN SANS
+   ======================= */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/assets/resources/fonts/OpenSans/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/assets/resources/fonts/OpenSans/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
+}
+
+/* =======================
+   ROBOTO
+   ======================= */
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/assets/resources/fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}

package/assets/styles/scss/_functions.scss

@@ -0,0 +1,3 @@
+@function px-to-rem($px, $base: 16px) {
+  @return calc($px / $base * 1rem);
+}

package/assets/styles/scss/_variables.scss

@@ -0,0 +1,138 @@
+@use 'sass:color';
+
+$color-primary: #6ea8d9;
+$color-primary-light: #b3d1f0;
+$color-primary-dark: #4c7aae;
+
+$color-secondary: #e6c57a;
+$color-secondary-light: #f7e7ba;
+$color-secondary-dark: #c9a24e;
+
+$color-tertiary: #d97ebd;
+$color-tertiary-light: #f1bdd8;
+$color-tertiary-dark: #b05a99;
+
+$color-dark: #3d3d3d;
+$color-light: #fdfdfd;
+$color-neutral: #f1f5f9;
+$color-neutral-text: #334155;
+
+$color-info: #6baed9;
+$color-info-light: #cce2f2;
+$color-info-dark:  #4b8bbf;
+
+$color-warning: #eba566;
+$color-warning-light: #fcd8b8;
+$color-warning-dark:  #d68a47;
+
+$color-danger: #d66a6a;
+$color-danger-light: #f2bebe;
+$color-danger-dark:  #b34d4d;
+
+$color-success: #6baf7d;
+$color-success-light: #a1d7a0;
+$color-success-dark:  #478c49;
+
+$color-disabled: #bfbfbf;
+$color-disabled-text: #9e9e9e;
+$color-dark-soft: #737579;
+$color-dark-neutral: #5e5f62;
+$color-light-soft: #e6e6e6;
+$color-light-neutral: #cfcece;
+
+// Breakpoints
+$screen-sm-min: 576px;
+$screen-md-min: 768px;
+$screen-lg-min: 992px;
+$screen-xl-min: 1200px;
+
+// Table
+$table-input-padding: 10px;
+
+// Input
+$input-text-color: $color-dark-neutral;
+$input-background: $color-light;
+$input-border-color: color.scale($color-dark-soft, $lightness: 50%);
+$input-border-radius: .25rem;
+$input-padding: .25rem .5rem;
+$input-font-size: 1rem;
+$input-focus-border-color: $color-primary;
+$input-error-border-color: $color-danger;
+$input-disabled-background: $color-disabled;
+$input-disabled-border-color: $color-dark-soft;
+$input-placeholder-color: $color-dark-soft;
+$input-font-family:
+  'Open Sans',
+  'Roboto',
+  system-ui,
+  -apple-system,
+  "Segoe UI",
+  "Helvetica Neue",
+  "Noto Sans",
+  "Liberation Sans",
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji";
+
+// Shadows
+$box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12);
+$box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.1);
+$box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
+
+$box-shadow-light-sm: 0 1px 1.5px rgba($color-light, 0.08), 0 0.5px 1px rgba($color-light, 0.06);
+$box-shadow-light-md: 0 2px 4px rgba($color-light, 0.1), 0 1px 2px rgba($color-light, 0.08);
+$box-shadow-light-lg: 0 6px 12px rgba($color-light, 0.12), 0 3px 6px rgba($color-light, 0.1);
+
+$box-shadow-primary-sm: 0 2px 4px rgba($color-primary-dark, 0.1), 0 1px 2px rgba($color-primary-dark, 0.08);
+$box-shadow-primary-md: 0 6px 12px rgba($color-primary-dark, 0.15), 0 3px 6px rgba($color-primary-dark, 0.1);
+$box-shadow-primary-lg: 0 12px 24px rgba($color-primary-dark, 0.2), 0 6px 12px rgba($color-primary-dark, 0.15);
+
+$box-shadow-secondary-sm: 0 2px 4px rgba($color-secondary-dark, 0.1), 0 1px 2px rgba($color-secondary-dark, 0.08);
+$box-shadow-secondary-md: 0 6px 12px rgba($color-secondary-dark, 0.15), 0 3px 6px rgba($color-secondary-dark, 0.1);
+$box-shadow-secondary-lg: 0 12px 24px rgba($color-secondary-dark, 0.2), 0 6px 12px rgba($color-secondary-dark, 0.15);
+
+$box-shadow-tertiary-sm: 0 2px 4px rgba($color-tertiary-dark, 0.1), 0 1px 2px rgba($color-tertiary-dark, 0.08);
+$box-shadow-tertiary-md: 0 6px 12px rgba($color-tertiary-dark, 0.15), 0 3px 6px rgba($color-tertiary-dark, 0.1);
+$box-shadow-tertiary-lg: 0 12px 24px rgba($color-tertiary-dark, 0.2), 0 6px 12px rgba($color-tertiary-dark, 0.15);
+
+$box-shadow-selection-option-hover: 0 2px 4px rgba($color-dark-soft, 0.15), 0 1px 2px rgba($color-dark-neutral, 0.1);
+
+// Inner shadows (inset)
+$box-shadow-inner-sm:  inset 0 1px 2px rgba(0, 0, 0, 0.06);
+$box-shadow-inner-md:  inset 0 4px 6px rgba(0, 0, 0, 0.06);
+$box-shadow-inner-lg:  inset 0 10px 15px rgba(0, 0, 0, 0.06);
+
+// Fonts
+$base-font:  'Open Sans', 'Roboto', system-ui, 'Helvetica Neue', sans-serif;
+
+// Font Sizes
+$font-size-2xs: 0.5rem;
+$font-size-xs: 0.75rem;
+$font-size-sm: 0.875rem;
+$font-size-md: 1rem;
+$font-size-lg: 1.125rem;
+$font-size-xl: 1.25rem;
+$font-size-2xl: 1.5rem;
+$font-size-3xl: 1.875rem;
+$font-size-4xl: 2.25rem;
+$font-size-5xl: 3rem;
+
+// Loader
+$frg-loader-color-primary: $color-primary;
+$frg-loader-color-secondary: $color-secondary;
+$frg-loader-color-tertiary: $color-tertiary;
+$frg-loader-color-dark: $color-dark;
+$frg-loader-color-light: $color-light;
+$frg-loader-size-xs: 1rem;
+$frg-loader-size-sm: 1.5rem; 
+$frg-loader-size-md: 2.25rem;
+$frg-loader-size-lg: 3rem;
+$frg-loader-size-xl: 4.5rem; 
+$frg-loader-border-width: 0.1875rem; 
+
+// Accordion
+$frg-accordion-border-color: #dbdbdb;
+$frg-accordion-header-background-color: #f6f6f6;

package/assets/styles/scss/directives/_badge.scss

@@ -0,0 +1,59 @@
+@use '../variables' as *;
+
+/* Host container for badges */
+.frg-has-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Badge element */
+.frg-badge {
+  position: relative;
+  top: -12px;
+  right: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  font-weight: 600;
+  line-height: 1;
+  border-radius: 999px;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  font-size: 0.75rem;
+  background-color: $color-primary;
+  color: white;
+
+  /* Sizes */
+  &--sm { font-size: 0.625rem; height: 1rem; min-width: 1rem; }
+  &--md { font-size: 0.75rem; height: 1.25rem; min-width: 1.25rem; }
+  &--lg { font-size: 0.875rem; height: 1.5rem; min-width: 1.5rem; }
+
+  /* Dot mode */
+  &--dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    min-width: 0.5rem;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  /* Style variants */
+  &--primary { background-color: $color-primary; }
+  &--secondary { background-color: $color-secondary; }
+  &--success { background-color: $color-success; }
+  &--danger { background-color: $color-danger; }
+  &--warning { background-color: $color-warning; }
+  &--info { background-color: $color-info; }
+  &--tertiary { background-color: $color-tertiary; }
+  &--dark { background-color: $color-dark; }
+  &--light { background-color: $color-light; color: $color-dark; }
+
+  /* Disabled state */
+  &--disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}

package/assets/styles/scss/directives/_tooltip.scss

@@ -0,0 +1,154 @@
+@use '../variables' as *;
+
+.frg-tooltip {
+  max-width: 18rem;
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.25rem;
+  background-color: $color-dark;
+  color: $color-light;
+  font-size: $font-size-sm;
+  line-height: 1.3;
+  box-shadow: $box-shadow-md;
+  pointer-events: none;
+}
+
+.fragment-tooltip {
+  @extend .frg-tooltip;
+}
+
+.frg-popover {
+  @extend .frg-tooltip;
+  max-width: 22rem;
+  pointer-events: auto;
+}
+
+.frg-popover-inner {
+  @extend .frg-tooltip-inner;
+}
+
+.frg-popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.35rem;
+}
+
+.frg-popover-button {
+  border: none;
+  border-radius: 0.2rem;
+  background-color: $color-light;
+  color: $color-dark;
+  font-size: $font-size-xs;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+}
+
+.frg-popover-indicator {
+  @extend .frg-tooltip-indicator;
+}
+
+.frg-tooltip-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  p {
+    margin: 0;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+}
+
+.fragment-tooltip-inner {
+  @extend .frg-tooltip-inner;
+}
+
+.frg-tooltip-indicator,
+.fragment-tooltip-indicator {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid $color-dark;
+  border-bottom: 0;
+}
+
+.frg-tooltip[data-position^='top'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position^='top'] .fragment-tooltip-indicator,
+.frg-popover[data-position^='top'] .frg-popover-indicator {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: $color-dark;
+  border-bottom: 0;
+}
+
+.frg-tooltip[data-position='top-left'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position='top-left'] .fragment-tooltip-indicator,
+.frg-popover[data-position='top-left'] .frg-popover-indicator {
+  left: auto;
+  right: 0.75rem;
+  transform: none;
+}
+
+.frg-tooltip[data-position='top-right'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position='top-right'] .fragment-tooltip-indicator,
+.frg-popover[data-position='top-right'] .frg-popover-indicator {
+  left: 0.75rem;
+  right: auto;
+  transform: none;
+}
+
+.frg-tooltip[data-position^='bottom'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position^='bottom'] .fragment-tooltip-indicator,
+.frg-popover[data-position^='bottom'] .frg-popover-indicator {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top: 0;
+  border-bottom: 6px solid $color-dark;
+}
+
+.frg-tooltip[data-position='bottom-left'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position='bottom-left'] .fragment-tooltip-indicator,
+.frg-popover[data-position='bottom-left'] .frg-popover-indicator {
+  left: auto;
+  right: 0.75rem;
+  transform: none;
+}
+
+.frg-tooltip[data-position='bottom-right'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position='bottom-right'] .fragment-tooltip-indicator,
+.frg-popover[data-position='bottom-right'] .frg-popover-indicator {
+  left: 0.75rem;
+  right: auto;
+  transform: none;
+}
+
+.frg-tooltip[data-position='left'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position='left'] .fragment-tooltip-indicator,
+.frg-popover[data-position='left'] .frg-popover-indicator {
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid $color-dark;
+  border-right: 0;
+}
+
+.frg-tooltip[data-position='right'] .frg-tooltip-indicator,
+.fragment-tooltip[data-position='right'] .fragment-tooltip-indicator,
+.frg-popover[data-position='right'] .frg-popover-indicator {
+  left: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid $color-dark;
+  border-left: 0;
+}

package/assets/styles/scss/style.scss

@@ -0,0 +1 @@
+@use './all' as *;