@angulogic/ng-sidebar/esm2022/lib/component/theme-toggler/theme-toggler.component.mjs

angular sidebar - standalone components

import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../ng-sidebar.service";
/**
 * A component that toggles the theme of the sidebar between 'light' and 'dark'.
 *
 * @export
 * @class ThemeTogglerComponent
 */
export class ThemeTogglerComponent {
    /**
     * Creates an instance of `ThemeTogglerComponent`.
     *
     * @param {NgSidebarService} sidebarService - The sidebar service used to change the theme.
     */
    constructor(sidebarService) {
        this.sidebarService = sidebarService;
    }
    /**
     * Toggles the sidebar theme between 'light' and 'dark'.
     * Calls the `changeTheme()` method from `NgSidebarService`.
     */
    toggleTheme() {
        this.sidebarService.changeTheme();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThemeTogglerComponent, deps: [{ token: i1.NgSidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ThemeTogglerComponent, isStandalone: true, selector: "al-theme-toggler", ngImport: i0, template: "<div class=\"theme-toggler\">\n  <svg display=\"none\">\n    <symbol id=\"light\" viewBox=\"0 0 24 24\">\n      <g stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(0,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(45,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(90,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(135,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(180,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(225,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(270,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(315,12,12)\" />\n      </g>\n      <circle fill=\"currentColor\" cx=\"12\" cy=\"12\" r=\"5\" />\n    </symbol>\n    <symbol id=\"dark\" viewBox=\"0 0 24 24\">\n      <path\n        fill=\"currentColor\"\n        d=\"M15.1,14.9c-3-0.5-5.5-3-6-6C8.8,7.1,9.1,5.4,9.9,4c0.4-0.8-0.4-1.7-1.2-1.4C4.6,4,1.8,7.9,2,12.5c0.2,5.1,4.4,9.3,9.5,9.5c4.5,0.2,8.5-2.6,9.9-6.6c0.3-0.8-0.6-1.7-1.4-1.2C18.6,14.9,16.9,15.2,15.1,14.9z\" />\n    </symbol>\n  </svg>\n  <label class=\"switch\">\n    <input\n      class=\"switch__input\"\n      (change)=\"toggleTheme()\"\n      type=\"checkbox\"\n      role=\"switch\"\n      name=\"dark\" />\n    <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n      <use href=\"#light\" />\n    </svg>\n    <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n      <use href=\"#dark\" />\n    </svg>\n    <span class=\"switch__inner\"></span>\n    <span class=\"switch__inner-icons\">\n      <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n        <use href=\"#light\" />\n      </svg>\n      <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n        <use href=\"#dark\" />\n      </svg>\n    </span>\n  </label>\n</div>\n", styles: ["input{font:1em/1.5 sans-serif}.theme-toggler{font-size:24px;background-color:transparent;color:hsl(var(--hue),10%,10%);display:flex;transition:background-color .3s,color .3s}.theme-toggler:has(.switch__input:checked){background-color:transparent;color:hsl(var(--hue),10%,90%)}.switch,.switch__input{display:block;-webkit-tap-highlight-color:transparent}.switch{margin:auto;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch__icon{color:hsla(var(--hue),10%,80%);pointer-events:none;position:absolute;top:.475em;left:.475em;width:.75em;height:.75em;transition:color .3s,transform .3s cubic-bezier(.65,0,.35,1)}.switch__icon:nth-of-type(2){right:.375em;left:auto}.switch__inner,.switch__inner-icons{border-radius:.5em;display:block;overflow:hidden;position:absolute;top:.375em;left:.375em;width:2.25em;height:1em}.switch__inner:before,.switch__inner-icons{transition:transform .3s cubic-bezier(.65,0,.35,1);transform:translate(-1.25em)}.switch__inner:before{background-color:var(--primary);border-radius:inherit;content:\"\";display:block;width:100%;height:100%}.switch__inner-icons{pointer-events:none}.switch__inner-icons .switch__icon{color:#fff;top:.125em;left:.125em;transform:translate(1.25em)}.switch__inner-icons .switch__icon:nth-child(2){right:.125em;left:auto}.switch__input{background-color:#fff;border-radius:calc(var(--radius) * 4);box-shadow:0 0 8px #00000071;outline:transparent;width:2.75em;height:1.5em;-webkit-appearance:none;appearance:none;transition:background-color .3s,box-shadow .3s}.switch__input:checked{background-color:hsl(var(--hue),10%,10%)}.switch__input:checked~.switch__icon{color:hsla(var(--hue),10%,40%)}.switch__input:checked~.switch__inner:before,.switch__input:checked~.switch__inner-icons{transform:translate(1.25em)}.switch__input:not(:checked)~.switch__icon:first-of-type,.switch__input:checked~.switch__icon:nth-of-type(2){transform:rotate(360deg)}.switch__input:checked~.switch__inner-icons .switch__icon:first-of-type{transform:translate(-1.25em) rotate(-360deg)}.switch__input:checked~.switch__inner-icons .switch__icon:nth-of-type(2){transform:translate(-1.25em) rotate(360deg)}.switch__input:focus-visible{box-shadow:0 0 0 .0625em hsla(var(--hue),90%,50%,1),0 .125em .5em hsla(var(--hue),10%,10%,.1)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThemeTogglerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'al-theme-toggler', standalone: true, template: "<div class=\"theme-toggler\">\n  <svg display=\"none\">\n    <symbol id=\"light\" viewBox=\"0 0 24 24\">\n      <g stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(0,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(45,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(90,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(135,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(180,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(225,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(270,12,12)\" />\n        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"20\" transform=\"rotate(315,12,12)\" />\n      </g>\n      <circle fill=\"currentColor\" cx=\"12\" cy=\"12\" r=\"5\" />\n    </symbol>\n    <symbol id=\"dark\" viewBox=\"0 0 24 24\">\n      <path\n        fill=\"currentColor\"\n        d=\"M15.1,14.9c-3-0.5-5.5-3-6-6C8.8,7.1,9.1,5.4,9.9,4c0.4-0.8-0.4-1.7-1.2-1.4C4.6,4,1.8,7.9,2,12.5c0.2,5.1,4.4,9.3,9.5,9.5c4.5,0.2,8.5-2.6,9.9-6.6c0.3-0.8-0.6-1.7-1.4-1.2C18.6,14.9,16.9,15.2,15.1,14.9z\" />\n    </symbol>\n  </svg>\n  <label class=\"switch\">\n    <input\n      class=\"switch__input\"\n      (change)=\"toggleTheme()\"\n      type=\"checkbox\"\n      role=\"switch\"\n      name=\"dark\" />\n    <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n      <use href=\"#light\" />\n    </svg>\n    <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n      <use href=\"#dark\" />\n    </svg>\n    <span class=\"switch__inner\"></span>\n    <span class=\"switch__inner-icons\">\n      <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n        <use href=\"#light\" />\n      </svg>\n      <svg class=\"switch__icon\" width=\"24px\" height=\"24px\" aria-hidden=\"true\">\n        <use href=\"#dark\" />\n      </svg>\n    </span>\n  </label>\n</div>\n", styles: ["input{font:1em/1.5 sans-serif}.theme-toggler{font-size:24px;background-color:transparent;color:hsl(var(--hue),10%,10%);display:flex;transition:background-color .3s,color .3s}.theme-toggler:has(.switch__input:checked){background-color:transparent;color:hsl(var(--hue),10%,90%)}.switch,.switch__input{display:block;-webkit-tap-highlight-color:transparent}.switch{margin:auto;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch__icon{color:hsla(var(--hue),10%,80%);pointer-events:none;position:absolute;top:.475em;left:.475em;width:.75em;height:.75em;transition:color .3s,transform .3s cubic-bezier(.65,0,.35,1)}.switch__icon:nth-of-type(2){right:.375em;left:auto}.switch__inner,.switch__inner-icons{border-radius:.5em;display:block;overflow:hidden;position:absolute;top:.375em;left:.375em;width:2.25em;height:1em}.switch__inner:before,.switch__inner-icons{transition:transform .3s cubic-bezier(.65,0,.35,1);transform:translate(-1.25em)}.switch__inner:before{background-color:var(--primary);border-radius:inherit;content:\"\";display:block;width:100%;height:100%}.switch__inner-icons{pointer-events:none}.switch__inner-icons .switch__icon{color:#fff;top:.125em;left:.125em;transform:translate(1.25em)}.switch__inner-icons .switch__icon:nth-child(2){right:.125em;left:auto}.switch__input{background-color:#fff;border-radius:calc(var(--radius) * 4);box-shadow:0 0 8px #00000071;outline:transparent;width:2.75em;height:1.5em;-webkit-appearance:none;appearance:none;transition:background-color .3s,box-shadow .3s}.switch__input:checked{background-color:hsl(var(--hue),10%,10%)}.switch__input:checked~.switch__icon{color:hsla(var(--hue),10%,40%)}.switch__input:checked~.switch__inner:before,.switch__input:checked~.switch__inner-icons{transform:translate(1.25em)}.switch__input:not(:checked)~.switch__icon:first-of-type,.switch__input:checked~.switch__icon:nth-of-type(2){transform:rotate(360deg)}.switch__input:checked~.switch__inner-icons .switch__icon:first-of-type{transform:translate(-1.25em) rotate(-360deg)}.switch__input:checked~.switch__inner-icons .switch__icon:nth-of-type(2){transform:translate(-1.25em) rotate(360deg)}.switch__input:focus-visible{box-shadow:0 0 0 .0625em hsla(var(--hue),90%,50%,1),0 .125em .5em hsla(var(--hue),10%,10%,.1)}\n"] }]
        }], ctorParameters: () => [{ type: i1.NgSidebarService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtdG9nZ2xlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1zaWRlYmFyL3NyYy9saWIvY29tcG9uZW50L3RoZW1lLXRvZ2dsZXIvdGhlbWUtdG9nZ2xlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1zaWRlYmFyL3NyYy9saWIvY29tcG9uZW50L3RoZW1lLXRvZ2dsZXIvdGhlbWUtdG9nZ2xlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFHMUM7Ozs7O0dBS0c7QUFPSCxNQUFNLE9BQU8scUJBQXFCO0lBQ2hDOzs7O09BSUc7SUFDSCxZQUFvQixjQUFnQztRQUFoQyxtQkFBYyxHQUFkLGNBQWMsQ0FBa0I7SUFBRyxDQUFDO0lBRXhEOzs7T0FHRztJQUNILFdBQVc7UUFDVCxJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3BDLENBQUM7K0dBZFUscUJBQXFCO21HQUFyQixxQkFBcUIsNEVDZmxDLHdtRUE2Q0E7OzRGRDlCYSxxQkFBcUI7a0JBTmpDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBR2hCLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nU2lkZWJhclNlcnZpY2UgfSBmcm9tICcuLi8uLi9uZy1zaWRlYmFyLnNlcnZpY2UnO1xuXG4vKipcbiAqIEEgY29tcG9uZW50IHRoYXQgdG9nZ2xlcyB0aGUgdGhlbWUgb2YgdGhlIHNpZGViYXIgYmV0d2VlbiAnbGlnaHQnIGFuZCAnZGFyaycuXG4gKlxuICogQGV4cG9ydFxuICogQGNsYXNzIFRoZW1lVG9nZ2xlckNvbXBvbmVudFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhbC10aGVtZS10b2dnbGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RoZW1lLXRvZ2dsZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vdGhlbWUtdG9nZ2xlci5jb21wb25lbnQuc2NzcycsXG4gIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgVGhlbWVUb2dnbGVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIENyZWF0ZXMgYW4gaW5zdGFuY2Ugb2YgYFRoZW1lVG9nZ2xlckNvbXBvbmVudGAuXG4gICAqXG4gICAqIEBwYXJhbSB7TmdTaWRlYmFyU2VydmljZX0gc2lkZWJhclNlcnZpY2UgLSBUaGUgc2lkZWJhciBzZXJ2aWNlIHVzZWQgdG8gY2hhbmdlIHRoZSB0aGVtZS5cbiAgICovXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2lkZWJhclNlcnZpY2U6IE5nU2lkZWJhclNlcnZpY2UpIHt9XG5cbiAgLyoqXG4gICAqIFRvZ2dsZXMgdGhlIHNpZGViYXIgdGhlbWUgYmV0d2VlbiAnbGlnaHQnIGFuZCAnZGFyaycuXG4gICAqIENhbGxzIHRoZSBgY2hhbmdlVGhlbWUoKWAgbWV0aG9kIGZyb20gYE5nU2lkZWJhclNlcnZpY2VgLlxuICAgKi9cbiAgdG9nZ2xlVGhlbWUoKTogdm9pZCB7XG4gICAgdGhpcy5zaWRlYmFyU2VydmljZS5jaGFuZ2VUaGVtZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidGhlbWUtdG9nZ2xlclwiPlxuICA8c3ZnIGRpc3BsYXk9XCJub25lXCI+XG4gICAgPHN5bWJvbCBpZD1cImxpZ2h0XCIgdmlld0JveD1cIjAgMCAyNCAyNFwiPlxuICAgICAgPGcgc3Ryb2tlPVwiY3VycmVudENvbG9yXCIgc3Ryb2tlLXdpZHRoPVwiMlwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIj5cbiAgICAgICAgPGxpbmUgeDE9XCIxMlwiIHkxPVwiMTdcIiB4Mj1cIjEyXCIgeTI9XCIyMFwiIHRyYW5zZm9ybT1cInJvdGF0ZSgwLDEyLDEyKVwiIC8+XG4gICAgICAgIDxsaW5lIHgxPVwiMTJcIiB5MT1cIjE3XCIgeDI9XCIxMlwiIHkyPVwiMjBcIiB0cmFuc2Zvcm09XCJyb3RhdGUoNDUsMTIsMTIpXCIgLz5cbiAgICAgICAgPGxpbmUgeDE9XCIxMlwiIHkxPVwiMTdcIiB4Mj1cIjEyXCIgeTI9XCIyMFwiIHRyYW5zZm9ybT1cInJvdGF0ZSg5MCwxMiwxMilcIiAvPlxuICAgICAgICA8bGluZSB4MT1cIjEyXCIgeTE9XCIxN1wiIHgyPVwiMTJcIiB5Mj1cIjIwXCIgdHJhbnNmb3JtPVwicm90YXRlKDEzNSwxMiwxMilcIiAvPlxuICAgICAgICA8bGluZSB4MT1cIjEyXCIgeTE9XCIxN1wiIHgyPVwiMTJcIiB5Mj1cIjIwXCIgdHJhbnNmb3JtPVwicm90YXRlKDE4MCwxMiwxMilcIiAvPlxuICAgICAgICA8bGluZSB4MT1cIjEyXCIgeTE9XCIxN1wiIHgyPVwiMTJcIiB5Mj1cIjIwXCIgdHJhbnNmb3JtPVwicm90YXRlKDIyNSwxMiwxMilcIiAvPlxuICAgICAgICA8bGluZSB4MT1cIjEyXCIgeTE9XCIxN1wiIHgyPVwiMTJcIiB5Mj1cIjIwXCIgdHJhbnNmb3JtPVwicm90YXRlKDI3MCwxMiwxMilcIiAvPlxuICAgICAgICA8bGluZSB4MT1cIjEyXCIgeTE9XCIxN1wiIHgyPVwiMTJcIiB5Mj1cIjIwXCIgdHJhbnNmb3JtPVwicm90YXRlKDMxNSwxMiwxMilcIiAvPlxuICAgICAgPC9nPlxuICAgICAgPGNpcmNsZSBmaWxsPVwiY3VycmVudENvbG9yXCIgY3g9XCIxMlwiIGN5PVwiMTJcIiByPVwiNVwiIC8+XG4gICAgPC9zeW1ib2w+XG4gICAgPHN5bWJvbCBpZD1cImRhcmtcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCI+XG4gICAgICA8cGF0aFxuICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgZD1cIk0xNS4xLDE0LjljLTMtMC41LTUuNS0zLTYtNkM4LjgsNy4xLDkuMSw1LjQsOS45LDRjMC40LTAuOC0wLjQtMS43LTEuMi0xLjRDNC42LDQsMS44LDcuOSwyLDEyLjVjMC4yLDUuMSw0LjQsOS4zLDkuNSw5LjVjNC41LDAuMiw4LjUtMi42LDkuOS02LjZjMC4zLTAuOC0wLjYtMS43LTEuNC0xLjJDMTguNiwxNC45LDE2LjksMTUuMiwxNS4xLDE0Ljl6XCIgLz5cbiAgICA8L3N5bWJvbD5cbiAgPC9zdmc+XG4gIDxsYWJlbCBjbGFzcz1cInN3aXRjaFwiPlxuICAgIDxpbnB1dFxuICAgICAgY2xhc3M9XCJzd2l0Y2hfX2lucHV0XCJcbiAgICAgIChjaGFuZ2UpPVwidG9nZ2xlVGhlbWUoKVwiXG4gICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgcm9sZT1cInN3aXRjaFwiXG4gICAgICBuYW1lPVwiZGFya1wiIC8+XG4gICAgPHN2ZyBjbGFzcz1cInN3aXRjaF9faWNvblwiIHdpZHRoPVwiMjRweFwiIGhlaWdodD1cIjI0cHhcIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgIDx1c2UgaHJlZj1cIiNsaWdodFwiIC8+XG4gICAgPC9zdmc+XG4gICAgPHN2ZyBjbGFzcz1cInN3aXRjaF9faWNvblwiIHdpZHRoPVwiMjRweFwiIGhlaWdodD1cIjI0cHhcIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgIDx1c2UgaHJlZj1cIiNkYXJrXCIgLz5cbiAgICA8L3N2Zz5cbiAgICA8c3BhbiBjbGFzcz1cInN3aXRjaF9faW5uZXJcIj48L3NwYW4+XG4gICAgPHNwYW4gY2xhc3M9XCJzd2l0Y2hfX2lubmVyLWljb25zXCI+XG4gICAgICA8c3ZnIGNsYXNzPVwic3dpdGNoX19pY29uXCIgd2lkdGg9XCIyNHB4XCIgaGVpZ2h0PVwiMjRweFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgICA8dXNlIGhyZWY9XCIjbGlnaHRcIiAvPlxuICAgICAgPC9zdmc+XG4gICAgICA8c3ZnIGNsYXNzPVwic3dpdGNoX19pY29uXCIgd2lkdGg9XCIyNHB4XCIgaGVpZ2h0PVwiMjRweFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgICA8dXNlIGhyZWY9XCIjZGFya1wiIC8+XG4gICAgICA8L3N2Zz5cbiAgICA8L3NwYW4+XG4gIDwvbGFiZWw+XG48L2Rpdj5cbiJdfQ==