@angulogic/ng-sidebar
Version:
angular sidebar
33 lines • 15.3 kB
JavaScript
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, 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', 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtdG9nZ2xlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1zaWRlYmFyL3NyYy9saWIvY29tcG9uZW50L3RoZW1lLXRvZ2dsZXIvdGhlbWUtdG9nZ2xlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1zaWRlYmFyL3NyYy9saWIvY29tcG9uZW50L3RoZW1lLXRvZ2dsZXIvdGhlbWUtdG9nZ2xlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFHMUM7Ozs7O0dBS0c7QUFNSCxNQUFNLE9BQU8scUJBQXFCO0lBQ2hDOzs7O09BSUc7SUFDSCxZQUFvQixjQUFnQztRQUFoQyxtQkFBYyxHQUFkLGNBQWMsQ0FBa0I7SUFBRyxDQUFDO0lBRXhEOzs7T0FHRztJQUNILFdBQVc7UUFDVCxJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3BDLENBQUM7K0dBZFUscUJBQXFCO21HQUFyQixxQkFBcUIsd0RDZGxDLHdtRUE2Q0E7OzRGRC9CYSxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0Usa0JBQWtCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ1NpZGViYXJTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vbmctc2lkZWJhci5zZXJ2aWNlJztcblxuLyoqXG4gKiBBIGNvbXBvbmVudCB0aGF0IHRvZ2dsZXMgdGhlIHRoZW1lIG9mIHRoZSBzaWRlYmFyIGJldHdlZW4gJ2xpZ2h0JyBhbmQgJ2RhcmsnLlxuICpcbiAqIEBleHBvcnRcbiAqIEBjbGFzcyBUaGVtZVRvZ2dsZXJDb21wb25lbnRcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYWwtdGhlbWUtdG9nZ2xlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi90aGVtZS10b2dnbGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3RoZW1lLXRvZ2dsZXIuY29tcG9uZW50LnNjc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBUaGVtZVRvZ2dsZXJDb21wb25lbnQge1xuICAvKipcbiAgICogQ3JlYXRlcyBhbiBpbnN0YW5jZSBvZiBgVGhlbWVUb2dnbGVyQ29tcG9uZW50YC5cbiAgICpcbiAgICogQHBhcmFtIHtOZ1NpZGViYXJTZXJ2aWNlfSBzaWRlYmFyU2VydmljZSAtIFRoZSBzaWRlYmFyIHNlcnZpY2UgdXNlZCB0byBjaGFuZ2UgdGhlIHRoZW1lLlxuICAgKi9cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBzaWRlYmFyU2VydmljZTogTmdTaWRlYmFyU2VydmljZSkge31cblxuICAvKipcbiAgICogVG9nZ2xlcyB0aGUgc2lkZWJhciB0aGVtZSBiZXR3ZWVuICdsaWdodCcgYW5kICdkYXJrJy5cbiAgICogQ2FsbHMgdGhlIGBjaGFuZ2VUaGVtZSgpYCBtZXRob2QgZnJvbSBgTmdTaWRlYmFyU2VydmljZWAuXG4gICAqL1xuICB0b2dnbGVUaGVtZSgpOiB2b2lkIHtcbiAgICB0aGlzLnNpZGViYXJTZXJ2aWNlLmNoYW5nZVRoZW1lKCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0aGVtZS10b2dnbGVyXCI+XG4gIDxzdmcgZGlzcGxheT1cIm5vbmVcIj5cbiAgICA8c3ltYm9sIGlkPVwibGlnaHRcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCI+XG4gICAgICA8ZyBzdHJva2U9XCJjdXJyZW50Q29sb3JcIiBzdHJva2Utd2lkdGg9XCIyXCIgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiPlxuICAgICAgICA8bGluZSB4MT1cIjEyXCIgeTE9XCIxN1wiIHgyPVwiMTJcIiB5Mj1cIjIwXCIgdHJhbnNmb3JtPVwicm90YXRlKDAsMTIsMTIpXCIgLz5cbiAgICAgICAgPGxpbmUgeDE9XCIxMlwiIHkxPVwiMTdcIiB4Mj1cIjEyXCIgeTI9XCIyMFwiIHRyYW5zZm9ybT1cInJvdGF0ZSg0NSwxMiwxMilcIiAvPlxuICAgICAgICA8bGluZSB4MT1cIjEyXCIgeTE9XCIxN1wiIHgyPVwiMTJcIiB5Mj1cIjIwXCIgdHJhbnNmb3JtPVwicm90YXRlKDkwLDEyLDEyKVwiIC8+XG4gICAgICAgIDxsaW5lIHgxPVwiMTJcIiB5MT1cIjE3XCIgeDI9XCIxMlwiIHkyPVwiMjBcIiB0cmFuc2Zvcm09XCJyb3RhdGUoMTM1LDEyLDEyKVwiIC8+XG4gICAgICAgIDxsaW5lIHgxPVwiMTJcIiB5MT1cIjE3XCIgeDI9XCIxMlwiIHkyPVwiMjBcIiB0cmFuc2Zvcm09XCJyb3RhdGUoMTgwLDEyLDEyKVwiIC8+XG4gICAgICAgIDxsaW5lIHgxPVwiMTJcIiB5MT1cIjE3XCIgeDI9XCIxMlwiIHkyPVwiMjBcIiB0cmFuc2Zvcm09XCJyb3RhdGUoMjI1LDEyLDEyKVwiIC8+XG4gICAgICAgIDxsaW5lIHgxPVwiMTJcIiB5MT1cIjE3XCIgeDI9XCIxMlwiIHkyPVwiMjBcIiB0cmFuc2Zvcm09XCJyb3RhdGUoMjcwLDEyLDEyKVwiIC8+XG4gICAgICAgIDxsaW5lIHgxPVwiMTJcIiB5MT1cIjE3XCIgeDI9XCIxMlwiIHkyPVwiMjBcIiB0cmFuc2Zvcm09XCJyb3RhdGUoMzE1LDEyLDEyKVwiIC8+XG4gICAgICA8L2c+XG4gICAgICA8Y2lyY2xlIGZpbGw9XCJjdXJyZW50Q29sb3JcIiBjeD1cIjEyXCIgY3k9XCIxMlwiIHI9XCI1XCIgLz5cbiAgICA8L3N5bWJvbD5cbiAgICA8c3ltYm9sIGlkPVwiZGFya1wiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIj5cbiAgICAgIDxwYXRoXG4gICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICBkPVwiTTE1LjEsMTQuOWMtMy0wLjUtNS41LTMtNi02QzguOCw3LjEsOS4xLDUuNCw5LjksNGMwLjQtMC44LTAuNC0xLjctMS4yLTEuNEM0LjYsNCwxLjgsNy45LDIsMTIuNWMwLjIsNS4xLDQuNCw5LjMsOS41LDkuNWM0LjUsMC4yLDguNS0yLjYsOS45LTYuNmMwLjMtMC44LTAuNi0xLjctMS40LTEuMkMxOC42LDE0LjksMTYuOSwxNS4yLDE1LjEsMTQuOXpcIiAvPlxuICAgIDwvc3ltYm9sPlxuICA8L3N2Zz5cbiAgPGxhYmVsIGNsYXNzPVwic3dpdGNoXCI+XG4gICAgPGlucHV0XG4gICAgICBjbGFzcz1cInN3aXRjaF9faW5wdXRcIlxuICAgICAgKGNoYW5nZSk9XCJ0b2dnbGVUaGVtZSgpXCJcbiAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICByb2xlPVwic3dpdGNoXCJcbiAgICAgIG5hbWU9XCJkYXJrXCIgLz5cbiAgICA8c3ZnIGNsYXNzPVwic3dpdGNoX19pY29uXCIgd2lkdGg9XCIyNHB4XCIgaGVpZ2h0PVwiMjRweFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgPHVzZSBocmVmPVwiI2xpZ2h0XCIgLz5cbiAgICA8L3N2Zz5cbiAgICA8c3ZnIGNsYXNzPVwic3dpdGNoX19pY29uXCIgd2lkdGg9XCIyNHB4XCIgaGVpZ2h0PVwiMjRweFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgPHVzZSBocmVmPVwiI2RhcmtcIiAvPlxuICAgIDwvc3ZnPlxuICAgIDxzcGFuIGNsYXNzPVwic3dpdGNoX19pbm5lclwiPjwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cInN3aXRjaF9faW5uZXItaWNvbnNcIj5cbiAgICAgIDxzdmcgY2xhc3M9XCJzd2l0Y2hfX2ljb25cIiB3aWR0aD1cIjI0cHhcIiBoZWlnaHQ9XCIyNHB4XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICAgIDx1c2UgaHJlZj1cIiNsaWdodFwiIC8+XG4gICAgICA8L3N2Zz5cbiAgICAgIDxzdmcgY2xhc3M9XCJzd2l0Y2hfX2ljb25cIiB3aWR0aD1cIjI0cHhcIiBoZWlnaHQ9XCIyNHB4XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICAgIDx1c2UgaHJlZj1cIiNkYXJrXCIgLz5cbiAgICAgIDwvc3ZnPlxuICAgIDwvc3Bhbj5cbiAgPC9sYWJlbD5cbjwvZGl2PlxuIl19