feat(esl-anchornav): create esl-anchor mixin

.commitlintrc.yml

@@ -31,6 +31,7 @@ rules:
  -
  - esl-a11y-group
  - esl-alert
+ - esl-anchornav
  - esl-animate
  - esl-base-element
  - esl-carousel

src/modules/esl-anchornav/core/esl-anchor.less

@@ -0,0 +1,4 @@
+[esl-anchor] {
+ margin-block-end: -2px;
+ height: 2px;
+}

src/modules/esl-anchornav/core/esl-anchor.ts

@@ -0,0 +1,38 @@
+import {ESLMixinElement} from '../../esl-mixin-element/core';
+import {ExportNs} from '../../esl-utils/environment/export-ns';
+import {prop} from '../../esl-utils/decorators';
+import {ESLEventUtils} from '../../esl-event-listener/core';
+
+/**
+ * ESLAnchor - custom mixin element for setting up anchor for {@link ESLAnchornav} attaching
+ *
+ * Use example:
+ * `<div esl-anchor id="my-anchor-id" title="My anchor title"></div>`
+ */
+@ExportNs('Anchor')
+export class ESLAnchor extends ESLMixinElement {
+ static override is = 'esl-anchor';
+
+ @prop('esl:anchornav:request') public ANCHORNAV_REQUEST_EVENT: string;
+
+ protected override connectedCallback(): void {
+ super.connectedCallback();
+ this.sendRequestEvent();
+ }
+
+ protected override disconnectedCallback(): void {
+ this.sendRequestEvent();
+ super.disconnectedCallback();
+ }
+
+ /** Sends a broadcast event to Anchornav components to refresh the list of anchors */
+ protected sendRequestEvent(): void {
+ ESLEventUtils.dispatch(document.body, this.ANCHORNAV_REQUEST_EVENT);
+ }
+}
+
+declare global {
+ export interface ESLLibrary {
+ Anchor: typeof ESLAnchor;
+ }
+}