{"version":3,"file":"ngx-theme-toggler.mjs","sources":["../../../projects/ngx-theme-toggler/src/lib/ngx-theme-toggler.ts","../../../projects/ngx-theme-toggler/src/lib/ngx-theme-toggler.html","../../../projects/ngx-theme-toggler/src/public-api.ts","../../../projects/ngx-theme-toggler/src/ngx-theme-toggler.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, inject, input, output, signal } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ngx-theme-toggler',\r\n  imports: [],\r\n  templateUrl: './ngx-theme-toggler.html',\r\n  styleUrl: './ngx-theme-toggler.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class NgxThemeToggler {\r\n\r\n  private el = inject(ElementRef);\r\n\r\n  /** ISDARK FEATURES */\r\n\r\n  isDark = input<boolean>(false);\r\n  setIsDark = output<any>();\r\n\r\n  toggle() {\r\n    this.setIsDark.emit(!this.isDark());\r\n    this.setColor();\r\n  }\r\n\r\n  /** STYLES */\r\n\r\n  darkColor = input<string>('white');\r\n  lightColor = input<string>('black');\r\n  colorDuration = input<number>(0);\r\n  colorTimingFunction = input<'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'>('ease');\r\n  hover = input< 'scale' | 'shadow' >('scale');\r\n  \r\n  animation = input< 'rotateX' | 'rotateY' | 'soft'>('soft');\r\n  faster = input<boolean>(false);\r\n  \r\n\r\n  /** ACCESIBILITY */\r\n\r\n  tabIndex = input<number>(0);\r\n  ariaLabelDark = input<string>('Change to light mode');\r\n  ariaLabelLight = input<string>('Change to dark mode');\r\n\r\n  uniqueId = signal<string>('');\r\n\r\n  /** LIFE CYCLE */\r\n\r\n  ngOnInit() {\r\n    this.setColor();\r\n    this.setColorTransition();\r\n    this.uniqueId.set(Math.random().toString(36).substring(2, 9));\r\n  }\r\n\r\n  ngOnChanges() {\r\n    this.setColor();\r\n  }\r\n\r\n  /** METHODS */\r\n\r\n  private setColor(){\r\n    if(this.isDark()){\r\n      const host = this.el.nativeElement as HTMLElement;\r\n      host.style.setProperty('--current-color', this.darkColor());\r\n    }else{\r\n      const host = this.el.nativeElement as HTMLElement;\r\n      host.style.setProperty('--current-color', this.lightColor());\r\n    }\r\n  }\r\n\r\n  private setColorTransition(){\r\n    const host = this.el.nativeElement as HTMLElement;\r\n    host.style.setProperty('--color-duration', `${this.colorDuration()}ms`);\r\n    host.style.setProperty('--color-timing', this.colorTimingFunction());\r\n  }\r\n\r\n}\r\n","<button \r\n    (click)=\"toggle()\" \r\n    class=\"ngxThemeToggler__button\"\r\n    [class.isDark]=\"isDark()\"\r\n    [class.rotateX]=\"animation() === 'rotateX'\"\r\n    [class.rotateY]=\"animation() === 'rotateY'\"\r\n    [class.faster]=\"faster()\"\r\n    [class.shadow]=\"hover() === 'shadow'\"\r\n    [tabIndex]=\"tabIndex()\"\r\n    [aria-label]=\"isDark() ? ariaLabelDark() : ariaLabelLight()\"\r\n    [aria-pressed]=\"isDark()\"\r\n>\r\n\r\n    <svg \r\n        version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \r\n        viewBox=\"0 0 512 512\" \r\n        class=\"ngxThemeToggler__svg\"\r\n        aria-hidden=\"true\"\r\n    >\r\n\r\n        <mask [attr.id]=\"'outerMask-' + uniqueId()\" >\r\n            <!-- visible -->\r\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\r\n            <!-- not visble -->\r\n            <circle cx=\"384\" cy=\"189\" r=\"200\" [attr.r]=\"isDark() ? '0' : '200'\"\r\n                fill=\"black\" \r\n                class=\"ngxThemeToggler__outerMask\"\r\n            />\r\n        </mask>\r\n        \r\n\r\n        <circle \r\n            cx=\"256\" cy=\"256\" r=\"256\" [attr.r]=\"isDark() ? '128' : '256'\" \r\n            fill=\"var(--current-color)\" \r\n            [attr.mask]=\"'url(#outerMask-' + uniqueId() + ')'\"\r\n            class=\"ngxThemeToggler__mainCircle\"\r\n        />\r\n\r\n        <mask [attr.id]=\"'innerMask-' + uniqueId()\" >\r\n            <!-- visible -->\r\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\r\n            <!-- not visible -->\r\n            <circle cx=\"256\" cy=\"256\" r=\"158\"\r\n                fill=\"black\"\r\n                class=\"ngxThemeToggler__innerMask\"\r\n                [class.isDark]=\"isDark()\"\r\n                [attr.r]=\"isDark() ? '158' : '512'\"\r\n            />\r\n        </mask>\r\n\r\n        <g \r\n            class=\"ngxThemeToggler__rays\" \r\n            width=\"512\" height=\"512\" \r\n            fill=\"none\" \r\n            [attr.mask]=\"'url(#innerMask-' + uniqueId() + ')'\"\r\n            [class.isDark]=\"isDark()\"\r\n            [class.rotateX]=\"animation() === 'rotateX'\"\r\n            [class.rotateY]=\"animation() === 'rotateY'\"\r\n            [class.faster]=\"faster()\"\r\n        >\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n            />\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n                transform=\"rotate(45)\"\r\n            />\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n                transform=\"rotate(90)\"\r\n            />\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n                transform=\"rotate(135)\"\r\n            />\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n                transform=\"rotate(180)\"\r\n            />\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n                transform=\"rotate(225)\"\r\n            />\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n                transform=\"rotate(270)\"\r\n            />\r\n\r\n            <line x1=\"0\" y1=\"256\" x2=\"512\" y2=\"256\" \r\n                stroke=\"var(--current-color)\" stroke-width=\"40\"\r\n                class=\"ngxThemeToggler__line\"\r\n                transform=\"rotate(315)\"\r\n            />\r\n\r\n        </g>\r\n\r\n\r\n    </svg>\r\n</button>\r\n\r\n\r\n","/*\r\n * Public API Surface of ngx-theme-toggler\r\n */\r\n\r\nexport * from './lib/ngx-theme-toggler';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}