UNPKG

@ynmstudio/utils

Version:
1 lines 9.41 kB
{"version":3,"file":"ynmstudio-utils-dynamic-heading.mjs","sources":["../../../projects/ynm-utils/dynamic-heading/src/dynamic-heading.component.ts","../../../projects/ynm-utils/dynamic-heading/src/dynamic-heading.directive.ts","../../../projects/ynm-utils/dynamic-heading/src/public_api.ts","../../../projects/ynm-utils/dynamic-heading/src/ynmstudio-utils-dynamic-heading.ts"],"sourcesContent":["import { Component, input, numberAttribute } from '@angular/core';\n\n@Component({\n selector: '[dynamicHeadingWrapper]',\n template: '<ng-content></ng-content>',\n styles: `\n :host.debug ::ng-deep > * {\n position: relative;\n }\n :host.debug ::ng-deep > *:after {\n position: absolute;\n background-color: lightpink;\n color: white;\n font-size: 12px;\n padding: 0.25em;\n line-height: 1.1;\n border-radius: 2px;\n content: \"H\" attr(data-level) / \"Heading \" attr(data-level);\n top: 0;\n right: 0;\n transform: translate(0%, -50%);\n\n }\n :host.debug:hover ::ng-deep > *:after {\n background-color: red;\n }\n `,\n host: {\n '[class]': 'class()',\n },\n})\nexport class DynamicHeadingComponent {\n class = input('');\n}","\nimport { booleanAttribute, ComponentRef, computed, createComponent, Directive, effect, EnvironmentInjector, inject, InjectionToken, Injector, input, isDevMode, numberAttribute, Optional, Renderer2, SkipSelf, ViewContainerRef, DOCUMENT } from \"@angular/core\";\nimport { DynamicHeadingComponent } from \"./dynamic-heading.component\";\n\n/**\n * Injection token to control the base heading level within components.\n *\n * This provider allows setting or resetting the heading level hierarchy within specific components.\n * This is useful when you want to start a new heading hierarchy from level 1, regardless of parent levels.\n *\n * Common use cases include:\n * - Reset to h1 at the start of a new <article> element to maintain proper document outline\n * - Start fresh heading hierarchy in <aside> elements or sidebars\n * - Modal dialogs or overlays that should have their own heading structure\n * - Independent widgets or components that can be placed anywhere but need consistent heading levels\n * - Blog post or article comments sections that should start their own hierarchy\n *\n * @example\n * ```typescript\n * @Component({\n * providers: [\n * { provide: DYNAMIC_HEADING_LEVEL, useValue: 1 } // Reset to h1\n * ]\n * })\n * ```\n */\nexport const DYNAMIC_HEADING_LEVEL = new InjectionToken<number>(\n 'DYNAMIC_HEADING_LEVEL',\n {\n factory: () => 1,\n providedIn: 'root',\n },\n);\n\n/**\n * Injection token to enable debug mode for dynamic headings.\n *\n * When set to true, a pseudo element will be rendered next to each heading element\n * showing its current heading level (e.g. \"H2/Heading 2\"). This provides visual feedback\n * about the computed heading levels during development.\n *\n * @default false\n */\nexport const DYNAMIC_HEADING_DEBUG = new InjectionToken<boolean>(\n 'DYNAMIC_HEADING_DEBUG',\n {\n factory: () => false,\n providedIn: 'root',\n },\n);\n\n\n\n/**\n * Factory function to increase the heading level relative to parent headings.\n *\n * This can be used in two ways:\n * 1. As a provider to automatically increment heading levels by X relative to parent headings\n * (e.g. h1 -> h2 -> h3)\n * 2. Alternatively, the level/offset inputs can be used directly on the dynamicHeading directive\n * to explicitly set the heading level, overriding the automatic increments\n *\n * @param offset Number of levels to increment from the parent heading level (defaults to 1)\n * @returns Provider configuration for DYNAMIC_HEADING_LEVEL\n */\nexport function increaseDynamicHeadingLevel() {\n return {\n provide: DYNAMIC_HEADING_LEVEL,\n useFactory: (parentLevel: number | null) => {\n // If parentLevel is null or undefined, start from 2\n return (parentLevel ?? 1) + 1;\n },\n deps: [[new Optional(), new SkipSelf(), DYNAMIC_HEADING_LEVEL]],\n };\n}\n\n@Directive({\n selector: '[dynamicHeading]',\n standalone: true,\n host: {\n '[attr.data-level]': 'level()',\n },\n})\nexport class DynamicHeadingDirective {\n #viewContainerRef = inject(ViewContainerRef);\n #injector = inject(Injector);\n #renderer = inject(Renderer2);\n #environment = inject(EnvironmentInjector);\n #currentHeadingLevel = inject(DYNAMIC_HEADING_LEVEL);\n\n debug = inject(DYNAMIC_HEADING_DEBUG);\n\n dynamicHeadingClass = input('');\n\n _level = input<number, string | number>(this.#currentHeadingLevel, {\n alias: 'level',\n transform: (value) => numberAttribute(value) ?? 1\n });\n offset = input<number, string | number>(0, {\n transform: (value) => numberAttribute(value) ?? 0\n });\n\n level = computed(() => Math.max(1, Math.min(6, this._level() + this.offset())));\n\n constructor() {\n effect(() => {\n this.#viewContainerRef?.clear();\n const hostElement = this.#renderer.createElement(`h${this.level()}`);\n\n const heading = createComponent(DynamicHeadingComponent, {\n hostElement,\n environmentInjector: this.#environment,\n elementInjector: this.#injector,\n projectableNodes: [\n [this.#viewContainerRef.element.nativeElement]\n ],\n })\n heading.setInput('class', `${this.dynamicHeadingClass()} ${this.debug ? 'debug' : ''}`);\n this.#viewContainerRef.insert(heading.hostView);\n })\n }\n}\n","/*\n * Public API Surface of draw-blurhash\n */\n\n// export * from './dynamic-heading.component';\nexport * from './dynamic-heading.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}