{"version":3,"file":"ng-theme-toggle.mjs","sources":["../../../projects/ng-theme-toggle/src/lib/accessibility/theme-toggle.lang.ts","../../../projects/ng-theme-toggle/src/lib/ng-theme-toggle.ts","../../../projects/ng-theme-toggle/src/lib/ng-theme-toggle.html","../../../projects/ng-theme-toggle/src/lib/ng-theme-toggle.types.ts","../../../projects/ng-theme-toggle/src/public-api.ts","../../../projects/ng-theme-toggle/src/ng-theme-toggle.ts"],"sourcesContent":["export const THEME_TOGGLE_LANG = {\n  en: {\n    ariaLabelDark: 'Change to light mode',\n    ariaLabelLight: 'Change to dark mode',\n  },\n  es: {\n    ariaLabelDark: 'Cambiar a modo claro',\n    ariaLabelLight: 'Cambiar a modo oscuro',\n  },\n  fr: {\n    ariaLabelDark: 'Passer en mode clair',\n    ariaLabelLight: 'Passer en mode sombre',\n  },\n  it: {\n    ariaLabelDark: 'Passa alla modalità chiara',\n    ariaLabelLight: 'Passa alla modalità scura',\n  },\n  de: {\n    ariaLabelDark: 'Wechseln Sie zum hellen Modus',\n    ariaLabelLight: 'Wechseln Sie zum dunklen Modus',\n  },\n} as const;\n","import { ChangeDetectionStrategy, Component, ElementRef, inject, input, signal, WritableSignal } from '@angular/core';\nimport { ThemeToggleCustomAria, ThemeToggleLangs } from './ng-theme-toggle.types';\nimport { THEME_TOGGLE_LANG } from './accessibility/theme-toggle.lang';\n\n@Component({\n  standalone: true,\n  selector: 'ng-theme-toggle',\n  imports: [],\n  templateUrl: 'ng-theme-toggle.html',\n  styleUrl: 'ng-theme-toggle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class NgThemeToggle {\n\n  /** ISDARK FEATURES */\n\n  isDarkSignal = input<WritableSignal<boolean>>();\n\n  handleIsDark() {\n    this.isDarkSignal()?.update(value => !value);\n  }\n\n  get isDark() {\n    return this.isDarkSignal()?.();\n  }\n\n  /** STYLES */\n\n  type = input<'solid' | 'minimal' | 'outline'>('minimal');\n  hover = input< 'tone' | 'scale' | 'shadow' | 'none' >('scale');\n  animation = input< 'rotateX' | 'rotateY' | 'soft'>('soft');\n  faster = input<boolean>(false);\n\n\n  /** ACCESIBILITY */\n\n  tabIndex = input<number>(0);\n\n  lang = input<ThemeToggleLangs>('en');\n  customAria = input<Partial<ThemeToggleCustomAria> | null>(null);\n\n  uniqueId = signal<string>('');\n\n  get ariaLabels(): ThemeToggleCustomAria {\n    const langLabels = THEME_TOGGLE_LANG[this.lang()] ?? THEME_TOGGLE_LANG.en;\n    const custom = this.customAria();\n\n    return {\n      ariaLabelDark: custom?.ariaLabelDark ?? langLabels.ariaLabelDark,\n      ariaLabelLight: custom?.ariaLabelLight ?? langLabels.ariaLabelLight,\n    };\n  }\n\n  /** LIFE CYCLE */\n\n  ngOnInit() {\n    this.uniqueId.set(Math.random().toString(36).substring(2, 9));\n  }\n\n\n}\n","<button\n    (click)=\"handleIsDark()\"\n    class=\"themeToggle__button\"\n    [class.isDark]=\"isDark\"\n\n    [class.solid]=\"type() === 'solid'\"\n    [class.minimal]=\"type() === 'minimal'\"\n    [class.outline]=\"type() === 'outline'\"\n\n    [class.hover-shadow]=\"hover() === 'shadow'\"\n    [class.hover-scale]=\"hover() === 'scale'\"\n    [class.hover-tone]=\"hover() === 'tone'\"\n\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-label]=\"isDark ? ariaLabels.ariaLabelDark : ariaLabels.ariaLabelLight\"\n    [attr.aria-pressed]=\"isDark\"\n>\n  <div\n    class=\"themeToggle__svgContainer\"\n    [class.rotateX]=\"animation() === 'rotateX'\"\n    [class.rotateY]=\"animation() === 'rotateY'\"\n    [class.faster]=\"faster()\"\n    [class.isDark]=\"isDark\"\n  >\n    <svg\n        version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        viewBox=\"0 0 512 512\"\n        class=\"themeToggle__svg\"\n        [class.isDark]=\"isDark\"\n        aria-hidden=\"true\"\n    >\n\n        <mask [attr.id]=\"'outerMask-' + uniqueId()\" >\n            <!-- visible -->\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <!-- not visble -->\n            <circle cx=\"384\" cy=\"189\" r=\"200\" [attr.r]=\"isDark ? '0' : '200'\"\n                fill=\"black\"\n                class=\"themeToggle__outerMask\"\n            />\n        </mask>\n\n\n        <circle\n            cx=\"256\" cy=\"256\" r=\"256\" [attr.r]=\"isDark ? '128' : '256'\"\n            [attr.mask]=\"'url(#outerMask-' + uniqueId() + ')'\"\n            class=\"themeToggle__mainCircle\"\n        />\n\n        <mask [attr.id]=\"'innerMask-' + uniqueId()\" >\n            <!-- visible -->\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <!-- not visible -->\n            <circle cx=\"256\" cy=\"256\" r=\"158\"\n                fill=\"black\"\n                class=\"themeToggle__innerMask\"\n                [class.isDark]=\"isDark\"\n                [attr.r]=\"isDark ? '158' : '512'\"\n            />\n        </mask>\n\n        <g\n            class=\"themeToggle__rays\"\n            width=\"512\" height=\"512\"\n            fill=\"none\"\n            [attr.mask]=\"'url(#innerMask-' + uniqueId() + ')'\"\n            [class.isDark]=\"isDark\"\n            [class.rotateX]=\"animation() === 'rotateX'\"\n            [class.rotateY]=\"animation() === 'rotateY'\"\n            [class.faster]=\"faster()\"\n        >\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n            />\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n                transform=\"rotate(45)\"\n            />\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n                transform=\"rotate(90)\"\n            />\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n                transform=\"rotate(135)\"\n            />\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n                transform=\"rotate(180)\"\n            />\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n                transform=\"rotate(225)\"\n            />\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n                transform=\"rotate(270)\"\n            />\n\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\"\n                class=\"themeToggle__line\"\n                transform=\"rotate(315)\"\n            />\n\n        </g>\n\n\n    </svg>\n  </div>\n</button>\n\n\n","import { THEME_TOGGLE_LANG } from \"./accessibility/theme-toggle.lang\";\n\n/** ACCESSIBILITY TYPES */\n\nexport type ThemeToggleLangs = keyof typeof THEME_TOGGLE_LANG;\n// \"en\" | \"es\" | \"fr\" | \"it\" | \"de\"\n\nexport interface ThemeToggleCustomAria {\n  ariaLabelDark?: string;\n  ariaLabelLight?: string;\n};\n","/*\n * Public API Surface of ng-theme-toggle\n */\n\nexport * from './lib/ng-theme-toggle';\nexport * from './lib/ng-theme-toggle.types';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}