@ngstarter-ui/components 21.0.36 → 21.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/ai/component-registry.json +126 -4
  2. package/fesm2022/ngstarter-ui-components-events.mjs +122 -0
  3. package/fesm2022/ngstarter-ui-components-events.mjs.map +1 -0
  4. package/fesm2022/ngstarter-ui-components-scroll-spy.mjs +69 -34
  5. package/fesm2022/ngstarter-ui-components-scroll-spy.mjs.map +1 -1
  6. package/package.json +5 -1
  7. package/types/ngstarter-ui-components-events.d.ts +57 -0
  8. package/types/ngstarter-ui-components-scroll-spy.d.ts +5 -1
package/ai/component-registry.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "generatedBy": "scripts/generate-ai-metadata.mjs",
4
4
  "package": "@ngstarter-ui/components",
5
5
  "description": "AI-readable registry for NgStarter UI Angular secondary entry points.",
6
- "componentCount": 125,
6
+ "componentCount": 126,
7
7
  "conventions": {
8
8
  "importPattern": "@ngstarter-ui/components/<component>",
9
9
  "selectorPrefix": "ngs",
@@ -3847,6 +3847,128 @@
3847
3847
  ],
3848
3848
  "example": null
3849
3849
  },
3850
+ {
3851
+ "name": "events",
3852
+ "title": "Events",
3853
+ "overviewName": "Events",
3854
+ "category": "components",
3855
+ "package": "@ngstarter-ui/components",
3856
+ "importPath": "@ngstarter-ui/components/events",
3857
+ "publicApi": "projects/components/events/public-api.ts",
3858
+ "sourceRoot": "projects/components/events/src",
3859
+ "docsPath": "/components/events",
3860
+ "docsOverviewSource": "projects/docs/src/app/components/events/overview/overview.html",
3861
+ "purpose": "The NgStarter Angular Events components let you build grouped schedule lists with day markers, event cards, inline statuses, time ranges, status tones, and attendee actions.",
3862
+ "useWhen": "Choose Events when the workflow matches examples such as Basic Events, Weekly Grouping, Weekly events.",
3863
+ "exampleTopics": [
3864
+ "Basic Events",
3865
+ "Weekly Grouping",
3866
+ "Weekly events"
3867
+ ],
3868
+ "minimalExample": "<ngs-events-list>\n <ngs-events-section label=\"This week\">\n <ngs-event>\n <ngs-event-date weekday=\"Thu\" day=\"19\"/>\n <ngs-event-title>Octolane Check-in</ngs-event-title>\n <ngs-event-status tone=\"success\">Confirmed</ngs-event-status>\n <ngs-event-time>9:00 - 9:30 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/75.jpg\" label=\"DK\" class=\"size-9\"/>\n </ngs-avatar-group>\n </ngs-event>\n <ngs-event>\n <ngs-event-date weekday=\"Fri\" day=\"20\"/>\n <ngs-event-title>POC Progress</ngs-event-title>\n <ngs-event-status tone=\"neutral\">Draft</ngs-event-status>\n <ngs-event-time>9:00 - 9:15 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar label=\"PO\" class=\"size-9 bg-neutral-950 text-white\"/>\n </ngs-avatar-group>\n </ngs-event>\n <ngs-event>\n <ngs-event-date weekday=\"Sat\" day=\"21\"/>\n <ngs-event-title>Octolane Weekly Review</ngs-event-title>\n <ngs-event-time>9:00 - 10:00 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/46.jpg\" label=\"MR\" class=\"size-9\"/>\n </ngs-avatar-group>\n </ngs-event>\n </ngs-events-section>\n</ngs-events-li\n...",
3869
+ "exampleFiles": [
3870
+ {
3871
+ "name": "basic-events-example",
3872
+ "title": "Basic events",
3873
+ "file": "projects/docs/src/app/components/events/_examples/basic-events-example/basic-events-example.html",
3874
+ "source": "<ngs-events-list>\n <ngs-events-section label=\"This week\">\n <ngs-event>\n <ngs-event-date weekday=\"Thu\" day=\"19\"/>\n <ngs-event-title>Octolane Check-in</ngs-event-title>\n <ngs-event-status tone=\"success\">Confirmed</ngs-event-status>\n <ngs-event-time>9:00 - 9:30 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/75.jpg\" label=\"DK\" class=\"size-9\"/>\n </ngs-avatar-group>\n </ngs-event>\n <ngs-event>\n <ngs-event-date weekday=\"Fri\" day=\"20\"/>\n <ngs-event-title>POC Progress</ngs-event-title>\n <ngs-event-status tone=\"neutral\">Draft</ngs-event-status>\n <ngs-event-time>9:00 - 9:15 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar label=\"PO\" class=\"size-9 bg-neutral-950 text-white\"/>\n </ngs-avatar-group>\n </ngs-event>\n <ngs-event>\n <ngs-event-date weekday=\"Sat\" day=\"21\"/>\n <ngs-event-title>Octolane Weekly Review</ngs-event-title>\n <ngs-event-time>9:00 - 10:00 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/46.jpg\" label=\"MR\" class=\"size-9\"/>\n </ngs-avatar-group>\n </ngs-event>\n </ngs-events-section>\n</ngs-events-li\n..."
3875
+ },
3876
+ {
3877
+ "name": "weekly-events-example",
3878
+ "title": "Weekly events",
3879
+ "file": "projects/docs/src/app/components/events/_examples/weekly-events-example/weekly-events-example.html",
3880
+ "source": "<ngs-events-list groupBy=\"week\">\n <ngs-events-section label=\"This week\">\n <ngs-event>\n <ngs-event-date weekday=\"Sat\" day=\"21\"/>\n <ngs-event-title>Octolane Weekly Review</ngs-event-title>\n <ngs-event-status tone=\"success\">Confirmed</ngs-event-status>\n <ngs-event-time>9:00 - 10:00 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/46.jpg\" label=\"MR\" class=\"size-9\"/>\n </ngs-avatar-group>\n </ngs-event>\n </ngs-events-section>\n <ngs-events-section label=\"Next week\">\n <ngs-event>\n <ngs-event-date weekday=\"Mon\" day=\"23\"/>\n <ngs-event-title>POC Progress</ngs-event-title>\n <ngs-event-status tone=\"neutral\">Draft</ngs-event-status>\n <ngs-event-time>9:00 - 9:15 AM</ngs-event-time>\n <ngs-avatar-group ngsEventActions>\n <ngs-avatar image=\"https://randomuser.me/api/portraits/men/32.jpg\" label=\"AM\" class=\"size-9\"/>\n <ngs-avatar label=\"PO\" class=\"size-9 bg-neutral-950 text-white\"/>\n </ngs-avatar-group>\n </ngs-event>\n </ngs-events-section>\n</ngs-events-list>"
3881
+ }
3882
+ ],
3883
+ "previewAsset": "projects/components/events/preview.svg",
3884
+ "selectors": [
3885
+ "[ngs-event-date]",
3886
+ "[ngs-event-description]",
3887
+ "[ngs-event-status]",
3888
+ "[ngs-event-time]",
3889
+ "[ngs-event-title]",
3890
+ "[ngsEventActions]",
3891
+ "ngs-event",
3892
+ "ngs-event-date",
3893
+ "ngs-event-description",
3894
+ "ngs-event-status",
3895
+ "ngs-event-time",
3896
+ "ngs-event-title",
3897
+ "ngs-events-list",
3898
+ "ngs-events-section"
3899
+ ],
3900
+ "exportedSymbols": [
3901
+ "Event",
3902
+ "EventActionsDirective",
3903
+ "EventDate",
3904
+ "EventDescription",
3905
+ "EventsList",
3906
+ "EventsListGroupBy",
3907
+ "EventsSection",
3908
+ "EventStatus",
3909
+ "EventTime",
3910
+ "EventTitle",
3911
+ "EventTone"
3912
+ ],
3913
+ "inputs": [
3914
+ "day",
3915
+ "groupBy",
3916
+ "label",
3917
+ "tone",
3918
+ "weekday"
3919
+ ],
3920
+ "outputs": [],
3921
+ "cssTokens": [
3922
+ "--ngs-color-border",
3923
+ "--ngs-color-danger",
3924
+ "--ngs-color-on-surface",
3925
+ "--ngs-color-on-surface-variant",
3926
+ "--ngs-color-primary",
3927
+ "--ngs-color-success",
3928
+ "--ngs-color-warning",
3929
+ "--ngs-event-bg",
3930
+ "--ngs-event-border-color",
3931
+ "--ngs-event-date-border-color",
3932
+ "--ngs-event-date-day-color",
3933
+ "--ngs-event-date-day-font-size",
3934
+ "--ngs-event-date-day-font-weight",
3935
+ "--ngs-event-date-divider-height",
3936
+ "--ngs-event-date-height",
3937
+ "--ngs-event-date-weekday-color",
3938
+ "--ngs-event-date-weekday-font-size",
3939
+ "--ngs-event-date-weekday-font-weight",
3940
+ "--ngs-event-date-width",
3941
+ "--ngs-event-description-color",
3942
+ "--ngs-event-description-font-size",
3943
+ "--ngs-event-description-font-weight",
3944
+ "--ngs-event-gap",
3945
+ "--ngs-event-meta-gap",
3946
+ "--ngs-event-min-height",
3947
+ "--ngs-event-padding",
3948
+ "--ngs-event-radius",
3949
+ "--ngs-event-shadow",
3950
+ "--ngs-event-status-color",
3951
+ "--ngs-event-status-dot-color",
3952
+ "--ngs-event-status-dot-size",
3953
+ "--ngs-event-status-font-size",
3954
+ "--ngs-event-status-font-weight",
3955
+ "--ngs-event-status-gap",
3956
+ "--ngs-event-time-color",
3957
+ "--ngs-event-time-font-size",
3958
+ "--ngs-event-time-font-weight",
3959
+ "--ngs-event-title-color",
3960
+ "--ngs-event-title-font-size",
3961
+ "--ngs-event-title-font-weight",
3962
+ "--ngs-events-list-gap",
3963
+ "--ngs-events-section-gap",
3964
+ "--ngs-events-section-item-gap",
3965
+ "--ngs-events-section-label-color",
3966
+ "--ngs-events-section-label-font-size",
3967
+ "--ngs-events-section-label-font-weight",
3968
+ "--ngs-shadow-xs"
3969
+ ],
3970
+ "example": null
3971
+ },
3850
3972
  {
3851
3973
  "name": "expand",
3852
3974
  "title": "Expand",
@@ -6705,19 +6827,19 @@
6705
6827
  "Basic with extra columns (sidebar and aside)",
6706
6828
  "Panel with extra columns"
6707
6829
  ],
6708
- "minimalExample": "<div class=\"h-[500px]\">\n <ngs-panel class=\"border border-muted\">\n <ngs-panel-header class=\"bg-surface-container flex items-center px-6\">Header</ngs-panel-header>\n <ngs-panel-content>\n <ngs-scrollbar-area [absolute]=\"true\">\n <div class=\"p-6 h-[1000px]\">Body</div>\n </ngs-scrollbar-area>\n </ngs-panel-content>\n <ngs-panel-footer class=\"bg-surface-container-low flex items-center px-6\">Footer</ngs-panel-footer>\n </ngs-panel>\n</div>",
6830
+ "minimalExample": "<div class=\"h-[500px]\">\n <ngs-panel class=\"border border-muted\">\n <ngs-panel-header class=\"bg-surface-container flex items-center px-6\">Header</ngs-panel-header>\n <ngs-panel-content>\n <ngs-scrollbar-area>\n <div class=\"p-6 h-[1000px]\">Body</div>\n </ngs-scrollbar-area>\n </ngs-panel-content>\n <ngs-panel-footer class=\"bg-surface-container-low flex items-center px-6\">Footer</ngs-panel-footer>\n </ngs-panel>\n</div>",
6709
6831
  "exampleFiles": [
6710
6832
  {
6711
6833
  "name": "basic-panel-example",
6712
6834
  "title": "Basic panel",
6713
6835
  "file": "projects/docs/src/app/components/panel/_examples/basic-panel-example/basic-panel-example.html",
6714
- "source": "<div class=\"h-[500px]\">\n <ngs-panel class=\"border border-muted\">\n <ngs-panel-header class=\"bg-surface-container flex items-center px-6\">Header</ngs-panel-header>\n <ngs-panel-content>\n <ngs-scrollbar-area [absolute]=\"true\">\n <div class=\"p-6 h-[1000px]\">Body</div>\n </ngs-scrollbar-area>\n </ngs-panel-content>\n <ngs-panel-footer class=\"bg-surface-container-low flex items-center px-6\">Footer</ngs-panel-footer>\n </ngs-panel>\n</div>"
6836
+ "source": "<div class=\"h-[500px]\">\n <ngs-panel class=\"border border-muted\">\n <ngs-panel-header class=\"bg-surface-container flex items-center px-6\">Header</ngs-panel-header>\n <ngs-panel-content>\n <ngs-scrollbar-area>\n <div class=\"p-6 h-[1000px]\">Body</div>\n </ngs-scrollbar-area>\n </ngs-panel-content>\n <ngs-panel-footer class=\"bg-surface-container-low flex items-center px-6\">Footer</ngs-panel-footer>\n </ngs-panel>\n</div>"
6715
6837
  },
6716
6838
  {
6717
6839
  "name": "panel-with-extra-columns-example",
6718
6840
  "title": "Panel with extra columns",
6719
6841
  "file": "projects/docs/src/app/components/panel/_examples/panel-with-extra-columns-example/panel-with-extra-columns-example.html",
6720
- "source": "<div class=\"h-[500px]\">\n <ngs-panel class=\"border border-muted\">\n <ngs-panel-header class=\"bg-surface-container flex items-center px-6\">Header</ngs-panel-header>\n <ngs-panel-sidebar class=\"border-r border-e-muted w-[200px]\">\n <ngs-scrollbar-area [absolute]=\"true\">\n <div class=\"p-6 h-[1000px]\" [style.width.px]=\"width()\" (click)=\"setSidebarLongWidth()\">Sidebar</div>\n </ngs-scrollbar-area>\n </ngs-panel-sidebar>\n <ngs-panel-content>\n <ngs-scrollbar-area [absolute]=\"true\">\n <div class=\"p-6 h-[1000px] w-[1000px]\">Body</div>\n </ngs-scrollbar-area>\n </ngs-panel-content>\n <ngs-panel-aside class=\"border-s border-s-muted w-[120px]\">\n <div class=\"p-6\">Aside</div>\n </ngs-panel-aside>\n <ngs-panel-footer class=\"bg-surface-container-low flex items-center px-6\">Footer</ngs-panel-footer>\n </ngs-panel>\n</div>"
6842
+ "source": "<div class=\"h-[500px]\">\n <ngs-panel class=\"border border-muted\">\n <ngs-panel-header class=\"bg-surface-container flex items-center px-6\">Header</ngs-panel-header>\n <ngs-panel-sidebar class=\"border-r border-e-muted w-[200px]\">\n <ngs-scrollbar-area>\n <div class=\"p-6 h-[1000px]\" [style.width.px]=\"width()\" (click)=\"setSidebarLongWidth()\">Sidebar</div>\n </ngs-scrollbar-area>\n </ngs-panel-sidebar>\n <ngs-panel-content>\n <ngs-scrollbar-area>\n <div class=\"p-6 h-[1000px] w-[1000px]\">Body</div>\n </ngs-scrollbar-area>\n </ngs-panel-content>\n <ngs-panel-aside class=\"border-s border-s-muted w-[120px]\">\n <div class=\"p-6\">Aside</div>\n </ngs-panel-aside>\n <ngs-panel-footer class=\"bg-surface-container-low flex items-center px-6\">Footer</ngs-panel-footer>\n </ngs-panel>\n</div>"
6721
6843
  }
6722
6844
  ],
6723
6845
  "previewAsset": "projects/components/panel/preview.svg",
package/fesm2022/ngstarter-ui-components-events.mjs ADDED
@@ -0,0 +1,122 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
3
+
4
+ class EventsList {
5
+ groupBy = input('day', ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
6
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
7
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: EventsList, isStandalone: true, selector: "ngs-events-list", inputs: { groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-events-list-grouped-by-day": "groupBy() === \"day\"", "class.ngs-events-list-grouped-by-week": "groupBy() === \"week\"" }, classAttribute: "ngs-events-list" }, exportAs: ["ngsEventsList"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-events-list-gap: calc(var(--spacing, .25rem) * 7);display:flex;flex-direction:column;gap:var(--ngs-events-list-gap);width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8
+ }
9
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsList, decorators: [{
10
+ type: Component,
11
+ args: [{ selector: 'ngs-events-list', exportAs: 'ngsEventsList', host: {
12
+ 'class': 'ngs-events-list',
13
+ '[class.ngs-events-list-grouped-by-day]': 'groupBy() === "day"',
14
+ '[class.ngs-events-list-grouped-by-week]': 'groupBy() === "week"',
15
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-events-list-gap: calc(var(--spacing, .25rem) * 7);display:flex;flex-direction:column;gap:var(--ngs-events-list-gap);width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
16
+ }], propDecorators: { groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }] } });
17
+
18
+ class EventsSection {
19
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
20
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
21
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EventsSection, isStandalone: true, selector: "ngs-events-section", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-events-section" }, exportAs: ["ngsEventsSection"], ngImport: i0, template: "@if (label()) {\n <h3 class=\"label\">{{ label() }}</h3>\n}\n<div class=\"items\">\n <ng-content />\n</div>\n", styles: [":host{--ngs-events-section-gap: calc(var(--spacing, .25rem) * 4);--ngs-events-section-item-gap: calc(var(--spacing, .25rem) * 3);--ngs-events-section-label-color: var(--ngs-color-on-surface-variant);--ngs-events-section-label-font-size: .875rem;--ngs-events-section-label-font-weight: 400;display:flex;flex-direction:column;gap:var(--ngs-events-section-gap)}:host .label{color:var(--ngs-events-section-label-color);font-size:var(--ngs-events-section-label-font-size);font-weight:var(--ngs-events-section-label-font-weight);line-height:1.35;margin:0}:host .items{display:flex;flex-direction:column;gap:var(--ngs-events-section-item-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
22
+ }
23
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventsSection, decorators: [{
24
+ type: Component,
25
+ args: [{ selector: 'ngs-events-section', exportAs: 'ngsEventsSection', host: {
26
+ 'class': 'ngs-events-section',
27
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n <h3 class=\"label\">{{ label() }}</h3>\n}\n<div class=\"items\">\n <ng-content />\n</div>\n", styles: [":host{--ngs-events-section-gap: calc(var(--spacing, .25rem) * 4);--ngs-events-section-item-gap: calc(var(--spacing, .25rem) * 3);--ngs-events-section-label-color: var(--ngs-color-on-surface-variant);--ngs-events-section-label-font-size: .875rem;--ngs-events-section-label-font-weight: 400;display:flex;flex-direction:column;gap:var(--ngs-events-section-gap)}:host .label{color:var(--ngs-events-section-label-color);font-size:var(--ngs-events-section-label-font-size);font-weight:var(--ngs-events-section-label-font-weight);line-height:1.35;margin:0}:host .items{display:flex;flex-direction:column;gap:var(--ngs-events-section-item-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
28
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
29
+
30
+ class Event {
31
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Event, deps: [], target: i0.ɵɵFactoryTarget.Component });
32
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Event, isStandalone: true, selector: "ngs-event", host: { classAttribute: "ngs-event" }, exportAs: ["ngsEvent"], ngImport: i0, template: "<ng-content select=\"ngs-event-date,[ngs-event-date]\" />\n<div class=\"content\">\n <div class=\"details\">\n <ng-content select=\"ngs-event-title,[ngs-event-title]\" />\n <div class=\"meta\">\n <ng-content select=\"ngs-event-status,[ngs-event-status]\" />\n <ng-content select=\"ngs-event-time,[ngs-event-time]\" />\n </div>\n <ng-content select=\"ngs-event-description,[ngs-event-description]\" />\n <ng-content />\n </div>\n <div class=\"actions\">\n <ng-content select=\"[ngsEventActions]\" />\n </div>\n</div>\n", styles: [":host{--ngs-event-bg: transparent;--ngs-event-border-color: var(--ngs-color-border);--ngs-event-radius: 1rem;--ngs-event-padding: calc(var(--spacing, .25rem) * 2);--ngs-event-gap: calc(var(--spacing, .25rem) * 4.5);--ngs-event-min-height: calc(var(--spacing, .25rem) * 20);--ngs-event-shadow: var(--ngs-shadow-xs);--ngs-event-meta-gap: calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:var(--ngs-event-gap);min-height:var(--ngs-event-min-height);padding:var(--ngs-event-padding);padding-inline-start:0;padding-inline-end:calc(var(--spacing, .25rem) * 4);background:var(--ngs-event-bg);border:1px solid;border-color:var(--ngs-event-border-color);border-radius:var(--ngs-event-radius);box-shadow:var(--ngs-event-shadow)}:host .content{display:flex;align-items:center;justify-content:space-between;gap:var(--ngs-event-gap);min-width:0;flex:1}:host .details{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:calc(var(--spacing, .25rem) * 1)}:host .meta{display:flex;align-items:center;gap:var(--ngs-event-meta-gap);min-width:0}:host .meta:empty{display:none}:host .actions{display:flex;align-items:center;justify-content:flex-end;flex:none}:host .actions:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
33
+ }
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Event, decorators: [{
35
+ type: Component,
36
+ args: [{ selector: 'ngs-event', exportAs: 'ngsEvent', host: {
37
+ 'class': 'ngs-event',
38
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ngs-event-date,[ngs-event-date]\" />\n<div class=\"content\">\n <div class=\"details\">\n <ng-content select=\"ngs-event-title,[ngs-event-title]\" />\n <div class=\"meta\">\n <ng-content select=\"ngs-event-status,[ngs-event-status]\" />\n <ng-content select=\"ngs-event-time,[ngs-event-time]\" />\n </div>\n <ng-content select=\"ngs-event-description,[ngs-event-description]\" />\n <ng-content />\n </div>\n <div class=\"actions\">\n <ng-content select=\"[ngsEventActions]\" />\n </div>\n</div>\n", styles: [":host{--ngs-event-bg: transparent;--ngs-event-border-color: var(--ngs-color-border);--ngs-event-radius: 1rem;--ngs-event-padding: calc(var(--spacing, .25rem) * 2);--ngs-event-gap: calc(var(--spacing, .25rem) * 4.5);--ngs-event-min-height: calc(var(--spacing, .25rem) * 20);--ngs-event-shadow: var(--ngs-shadow-xs);--ngs-event-meta-gap: calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;gap:var(--ngs-event-gap);min-height:var(--ngs-event-min-height);padding:var(--ngs-event-padding);padding-inline-start:0;padding-inline-end:calc(var(--spacing, .25rem) * 4);background:var(--ngs-event-bg);border:1px solid;border-color:var(--ngs-event-border-color);border-radius:var(--ngs-event-radius);box-shadow:var(--ngs-event-shadow)}:host .content{display:flex;align-items:center;justify-content:space-between;gap:var(--ngs-event-gap);min-width:0;flex:1}:host .details{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:calc(var(--spacing, .25rem) * 1)}:host .meta{display:flex;align-items:center;gap:var(--ngs-event-meta-gap);min-width:0}:host .meta:empty{display:none}:host .actions{display:flex;align-items:center;justify-content:flex-end;flex:none}:host .actions:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
39
+ }] });
40
+
41
+ class EventDate {
42
+ weekday = input('', ...(ngDevMode ? [{ debugName: "weekday" }] : /* istanbul ignore next */ []));
43
+ day = input('', ...(ngDevMode ? [{ debugName: "day" }] : /* istanbul ignore next */ []));
44
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
45
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: EventDate, isStandalone: true, selector: "ngs-event-date,[ngs-event-date]", inputs: { weekday: { classPropertyName: "weekday", publicName: "weekday", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-event-date" }, exportAs: ["ngsEventDate"], ngImport: i0, template: "<span class=\"day\">{{ day() }}</span>\n<span class=\"weekday\">{{ weekday() }}</span>\n", styles: [":host{--ngs-event-date-width: calc(var(--spacing, .25rem) * 16);--ngs-event-date-height: calc(var(--spacing, .25rem) * 12);--ngs-event-date-border-color: var(--ngs-color-border);--ngs-event-date-weekday-color: var(--ngs-color-on-surface-variant);--ngs-event-date-weekday-font-size: .75rem;--ngs-event-date-weekday-font-weight: 500;--ngs-event-date-day-color: var(--ngs-color-on-surface);--ngs-event-date-day-font-size: 1.25rem;--ngs-event-date-day-font-weight: 500;--ngs-event-date-divider-height: calc(var(--spacing, .25rem) * 11);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1);width:var(--ngs-event-date-width);height:var(--ngs-event-date-height);flex:none;position:relative;text-align:center}:host:after{content:\"\";position:absolute;top:50%;inset-inline-end:0;width:1px;height:var(--ngs-event-date-divider-height);background:var(--ngs-event-date-border-color);transform:translateY(-50%)}:host .weekday{display:block;color:var(--ngs-event-date-weekday-color);font-size:var(--ngs-event-date-weekday-font-size);font-weight:var(--ngs-event-date-weekday-font-weight);line-height:1.1;text-transform:uppercase}:host .day{display:block;color:var(--ngs-event-date-day-color);font-size:var(--ngs-event-date-day-font-size);font-weight:var(--ngs-event-date-day-font-weight);line-height:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
46
+ }
47
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventDate, decorators: [{
48
+ type: Component,
49
+ args: [{ selector: 'ngs-event-date,[ngs-event-date]', exportAs: 'ngsEventDate', host: {
50
+ 'class': 'ngs-event-date',
51
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"day\">{{ day() }}</span>\n<span class=\"weekday\">{{ weekday() }}</span>\n", styles: [":host{--ngs-event-date-width: calc(var(--spacing, .25rem) * 16);--ngs-event-date-height: calc(var(--spacing, .25rem) * 12);--ngs-event-date-border-color: var(--ngs-color-border);--ngs-event-date-weekday-color: var(--ngs-color-on-surface-variant);--ngs-event-date-weekday-font-size: .75rem;--ngs-event-date-weekday-font-weight: 500;--ngs-event-date-day-color: var(--ngs-color-on-surface);--ngs-event-date-day-font-size: 1.25rem;--ngs-event-date-day-font-weight: 500;--ngs-event-date-divider-height: calc(var(--spacing, .25rem) * 11);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1);width:var(--ngs-event-date-width);height:var(--ngs-event-date-height);flex:none;position:relative;text-align:center}:host:after{content:\"\";position:absolute;top:50%;inset-inline-end:0;width:1px;height:var(--ngs-event-date-divider-height);background:var(--ngs-event-date-border-color);transform:translateY(-50%)}:host .weekday{display:block;color:var(--ngs-event-date-weekday-color);font-size:var(--ngs-event-date-weekday-font-size);font-weight:var(--ngs-event-date-weekday-font-weight);line-height:1.1;text-transform:uppercase}:host .day{display:block;color:var(--ngs-event-date-day-color);font-size:var(--ngs-event-date-day-font-size);font-weight:var(--ngs-event-date-day-font-weight);line-height:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
52
+ }], propDecorators: { weekday: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekday", required: false }] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }] } });
53
+
54
+ class EventTitle {
55
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
56
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EventTitle, isStandalone: true, selector: "ngs-event-title,[ngs-event-title]", host: { classAttribute: "ngs-event-title" }, exportAs: ["ngsEventTitle"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-event-title-color: var(--ngs-color-on-surface);--ngs-event-title-font-size: 1rem;--ngs-event-title-font-weight: 600;display:block;min-width:0;overflow:hidden;color:var(--ngs-event-title-color);font-size:var(--ngs-event-title-font-size);font-weight:var(--ngs-event-title-font-weight);line-height:1.25;text-overflow:ellipsis;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
57
+ }
58
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventTitle, decorators: [{
59
+ type: Component,
60
+ args: [{ selector: 'ngs-event-title,[ngs-event-title]', exportAs: 'ngsEventTitle', host: {
61
+ 'class': 'ngs-event-title',
62
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-event-title-color: var(--ngs-color-on-surface);--ngs-event-title-font-size: 1rem;--ngs-event-title-font-weight: 600;display:block;min-width:0;overflow:hidden;color:var(--ngs-event-title-color);font-size:var(--ngs-event-title-font-size);font-weight:var(--ngs-event-title-font-weight);line-height:1.25;text-overflow:ellipsis;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
63
+ }] });
64
+
65
+ class EventStatus {
66
+ tone = input('default', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
67
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
68
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: EventStatus, isStandalone: true, selector: "ngs-event-status,[ngs-event-status]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tone-primary": "tone() === \"primary\"", "class.tone-success": "tone() === \"success\"", "class.tone-warning": "tone() === \"warning\"", "class.tone-danger": "tone() === \"danger\"", "class.tone-neutral": "tone() === \"neutral\"" }, classAttribute: "ngs-event-status" }, exportAs: ["ngsEventStatus"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-event-status-color: var(--ngs-color-on-surface-variant);--ngs-event-status-font-size: .875rem;--ngs-event-status-font-weight: 500;--ngs-event-status-gap: calc(var(--spacing, .25rem) * 1.5);--ngs-event-status-dot-size: calc(var(--spacing, .25rem) * 1.5);--ngs-event-status-dot-color: currentColor;display:inline-flex;align-items:center;gap:var(--ngs-event-status-gap);color:var(--ngs-event-status-color);font-size:var(--ngs-event-status-font-size);font-weight:var(--ngs-event-status-font-weight);line-height:1.25;white-space:nowrap}:host:before{content:\"\";width:var(--ngs-event-status-dot-size);height:var(--ngs-event-status-dot-size);flex:none;border-radius:calc(infinity * 1px);background:var(--ngs-event-status-dot-color)}:host.tone-primary{--ngs-event-status-color: var(--ngs-color-primary)}:host.tone-success{--ngs-event-status-color: var(--ngs-color-success)}:host.tone-warning{--ngs-event-status-color: var(--ngs-color-warning)}:host.tone-danger{--ngs-event-status-color: var(--ngs-color-danger)}:host.tone-neutral{--ngs-event-status-color: var(--ngs-color-on-surface-variant)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
69
+ }
70
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventStatus, decorators: [{
71
+ type: Component,
72
+ args: [{ selector: 'ngs-event-status,[ngs-event-status]', exportAs: 'ngsEventStatus', host: {
73
+ 'class': 'ngs-event-status',
74
+ '[class.tone-primary]': 'tone() === "primary"',
75
+ '[class.tone-success]': 'tone() === "success"',
76
+ '[class.tone-warning]': 'tone() === "warning"',
77
+ '[class.tone-danger]': 'tone() === "danger"',
78
+ '[class.tone-neutral]': 'tone() === "neutral"',
79
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-event-status-color: var(--ngs-color-on-surface-variant);--ngs-event-status-font-size: .875rem;--ngs-event-status-font-weight: 500;--ngs-event-status-gap: calc(var(--spacing, .25rem) * 1.5);--ngs-event-status-dot-size: calc(var(--spacing, .25rem) * 1.5);--ngs-event-status-dot-color: currentColor;display:inline-flex;align-items:center;gap:var(--ngs-event-status-gap);color:var(--ngs-event-status-color);font-size:var(--ngs-event-status-font-size);font-weight:var(--ngs-event-status-font-weight);line-height:1.25;white-space:nowrap}:host:before{content:\"\";width:var(--ngs-event-status-dot-size);height:var(--ngs-event-status-dot-size);flex:none;border-radius:calc(infinity * 1px);background:var(--ngs-event-status-dot-color)}:host.tone-primary{--ngs-event-status-color: var(--ngs-color-primary)}:host.tone-success{--ngs-event-status-color: var(--ngs-color-success)}:host.tone-warning{--ngs-event-status-color: var(--ngs-color-warning)}:host.tone-danger{--ngs-event-status-color: var(--ngs-color-danger)}:host.tone-neutral{--ngs-event-status-color: var(--ngs-color-on-surface-variant)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
80
+ }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
81
+
82
+ class EventTime {
83
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
84
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EventTime, isStandalone: true, selector: "ngs-event-time,[ngs-event-time]", host: { classAttribute: "ngs-event-time" }, exportAs: ["ngsEventTime"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-event-time-color: var(--ngs-color-on-surface-variant);--ngs-event-time-font-size: .875rem;--ngs-event-time-font-weight: 400;display:block;min-width:0;overflow:hidden;color:var(--ngs-event-time-color);font-size:var(--ngs-event-time-font-size);font-weight:var(--ngs-event-time-font-weight);line-height:1.4;text-overflow:ellipsis;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
85
+ }
86
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventTime, decorators: [{
87
+ type: Component,
88
+ args: [{ selector: 'ngs-event-time,[ngs-event-time]', exportAs: 'ngsEventTime', host: {
89
+ 'class': 'ngs-event-time',
90
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-event-time-color: var(--ngs-color-on-surface-variant);--ngs-event-time-font-size: .875rem;--ngs-event-time-font-weight: 400;display:block;min-width:0;overflow:hidden;color:var(--ngs-event-time-color);font-size:var(--ngs-event-time-font-size);font-weight:var(--ngs-event-time-font-weight);line-height:1.4;text-overflow:ellipsis;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
91
+ }] });
92
+
93
+ class EventDescription {
94
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
95
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EventDescription, isStandalone: true, selector: "ngs-event-description,[ngs-event-description]", host: { classAttribute: "ngs-event-description" }, exportAs: ["ngsEventDescription"], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-event-description-color: var(--ngs-color-on-surface-variant);--ngs-event-description-font-size: 1rem;--ngs-event-description-font-weight: 400;display:block;min-width:0;overflow:hidden;color:var(--ngs-event-description-color);font-size:var(--ngs-event-description-font-size);font-weight:var(--ngs-event-description-font-weight);line-height:1.4;text-overflow:ellipsis;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
96
+ }
97
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventDescription, decorators: [{
98
+ type: Component,
99
+ args: [{ selector: 'ngs-event-description,[ngs-event-description]', exportAs: 'ngsEventDescription', host: {
100
+ 'class': 'ngs-event-description',
101
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-event-description-color: var(--ngs-color-on-surface-variant);--ngs-event-description-font-size: 1rem;--ngs-event-description-font-weight: 400;display:block;min-width:0;overflow:hidden;color:var(--ngs-event-description-color);font-size:var(--ngs-event-description-font-size);font-weight:var(--ngs-event-description-font-weight);line-height:1.4;text-overflow:ellipsis;white-space:nowrap}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
102
+ }] });
103
+
104
+ class EventActionsDirective {
105
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
106
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: EventActionsDirective, isStandalone: true, selector: "[ngsEventActions]", exportAs: ["ngsEventActions"], ngImport: i0 });
107
+ }
108
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EventActionsDirective, decorators: [{
109
+ type: Directive,
110
+ args: [{
111
+ selector: '[ngsEventActions]',
112
+ exportAs: 'ngsEventActions',
113
+ standalone: true,
114
+ }]
115
+ }] });
116
+
117
+ /**
118
+ * Generated bundle index. Do not edit.
119
+ */
120
+
121
+ export { Event, EventActionsDirective, EventDate, EventDescription, EventStatus, EventTime, EventTitle, EventsList, EventsSection };
122
+ //# sourceMappingURL=ngstarter-ui-components-events.mjs.map
package/fesm2022/ngstarter-ui-components-events.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ngstarter-ui-components-events.mjs","sources":["../../../projects/components/events/src/events-list/events-list.ts","../../../projects/components/events/src/events-list/events-list.html","../../../projects/components/events/src/events-section/events-section.ts","../../../projects/components/events/src/events-section/events-section.html","../../../projects/components/events/src/event/event.ts","../../../projects/components/events/src/event/event.html","../../../projects/components/events/src/event-date/event-date.ts","../../../projects/components/events/src/event-date/event-date.html","../../../projects/components/events/src/event-title/event-title.ts","../../../projects/components/events/src/event-title/event-title.html","../../../projects/components/events/src/event-status/event-status.ts","../../../projects/components/events/src/event-status/event-status.html","../../../projects/components/events/src/event-time/event-time.ts","../../../projects/components/events/src/event-time/event-time.html","../../../projects/components/events/src/event-description/event-description.ts","../../../projects/components/events/src/event-description/event-description.html","../../../projects/components/events/src/event-actions.directive.ts","../../../projects/components/events/ngstarter-ui-components-events.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { EventsListGroupBy } from '../types';\n\n@Component({\n selector: 'ngs-events-list',\n exportAs: 'ngsEventsList',\n templateUrl: './events-list.html',\n styleUrl: './events-list.scss',\n host: {\n 'class': 'ngs-events-list',\n '[class.ngs-events-list-grouped-by-day]': 'groupBy() === \"day\"',\n '[class.ngs-events-list-grouped-by-week]': 'groupBy() === \"week\"',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventsList {\n groupBy = input<EventsListGroupBy>('day');\n}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'ngs-events-section',\n exportAs: 'ngsEventsSection',\n templateUrl: './events-section.html',\n styleUrl: './events-section.scss',\n host: {\n 'class': 'ngs-events-section',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventsSection {\n label = input('');\n}\n","@if (label()) {\n <h3 class=\"label\">{{ label() }}</h3>\n}\n<div class=\"items\">\n <ng-content />\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-event',\n exportAs: 'ngsEvent',\n templateUrl: './event.html',\n styleUrl: './event.scss',\n host: {\n 'class': 'ngs-event',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Event {}\n","<ng-content select=\"ngs-event-date,[ngs-event-date]\" />\n<div class=\"content\">\n <div class=\"details\">\n <ng-content select=\"ngs-event-title,[ngs-event-title]\" />\n <div class=\"meta\">\n <ng-content select=\"ngs-event-status,[ngs-event-status]\" />\n <ng-content select=\"ngs-event-time,[ngs-event-time]\" />\n </div>\n <ng-content select=\"ngs-event-description,[ngs-event-description]\" />\n <ng-content />\n </div>\n <div class=\"actions\">\n <ng-content select=\"[ngsEventActions]\" />\n </div>\n</div>\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'ngs-event-date,[ngs-event-date]',\n exportAs: 'ngsEventDate',\n templateUrl: './event-date.html',\n styleUrl: './event-date.scss',\n host: {\n 'class': 'ngs-event-date',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventDate {\n weekday = input('');\n day = input<string | number>('');\n}\n","<span class=\"day\">{{ day() }}</span>\n<span class=\"weekday\">{{ weekday() }}</span>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-event-title,[ngs-event-title]',\n exportAs: 'ngsEventTitle',\n templateUrl: './event-title.html',\n styleUrl: './event-title.scss',\n host: {\n 'class': 'ngs-event-title',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventTitle {}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { EventTone } from '../types';\n\n@Component({\n selector: 'ngs-event-status,[ngs-event-status]',\n exportAs: 'ngsEventStatus',\n templateUrl: './event-status.html',\n styleUrl: './event-status.scss',\n host: {\n 'class': 'ngs-event-status',\n '[class.tone-primary]': 'tone() === \"primary\"',\n '[class.tone-success]': 'tone() === \"success\"',\n '[class.tone-warning]': 'tone() === \"warning\"',\n '[class.tone-danger]': 'tone() === \"danger\"',\n '[class.tone-neutral]': 'tone() === \"neutral\"',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventStatus {\n tone = input<EventTone>('default');\n}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-event-time,[ngs-event-time]',\n exportAs: 'ngsEventTime',\n templateUrl: './event-time.html',\n styleUrl: './event-time.scss',\n host: {\n 'class': 'ngs-event-time',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventTime {}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-event-description,[ngs-event-description]',\n exportAs: 'ngsEventDescription',\n templateUrl: './event-description.html',\n styleUrl: './event-description.scss',\n host: {\n 'class': 'ngs-event-description',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventDescription {}\n","<ng-content />\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[ngsEventActions]',\n exportAs: 'ngsEventActions',\n standalone: true,\n})\nexport class EventActionsDirective {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/ngstarter-ui-components-scroll-spy.mjs CHANGED
@@ -51,22 +51,16 @@ class ScrollSpyNav {
51
51
  threshold = 10;
52
52
  _activeId;
53
53
  scrollContainer;
54
+ isDocumentScrollContainer = false;
54
55
  ngAfterContentInit() {
55
56
  if (isPlatformServer(this.platformId)) {
56
57
  return;
57
58
  }
58
- if (this.panelBody) {
59
- this.scrollContainer = this.panelBody.scrollContainer();
60
- }
61
- else if (this.layoutBody) {
62
- this.scrollContainer = this.layoutBody.scrollContainer();
63
- }
64
- else {
65
- this.scrollContainer = this.document.body;
66
- }
59
+ this.scrollContainer = this._getScrollContainer();
60
+ const scrollEventTarget = this._getScrollEventTarget();
67
61
  if (this.scrollContainer) {
68
62
  this.zone.runOutsideAngular(() => {
69
- fromEvent(this.scrollContainer, 'scroll')
63
+ fromEvent(scrollEventTarget, 'scroll')
70
64
  .pipe(debounceTime(35), takeUntilDestroyed(this.destroyRef))
71
65
  .subscribe(() => {
72
66
  this._findActiveItem();
@@ -84,44 +78,83 @@ class ScrollSpyNav {
84
78
  if (!this.scrollContainer) {
85
79
  return;
86
80
  }
87
- this._activeId = targetId;
88
81
  const targetElement = this.document.querySelector('#' + targetId);
89
- const offsetTopFix = parseInt(getComputedStyle(targetElement).marginTop) +
90
- parseInt(getComputedStyle(targetElement).height) + this.threshold;
82
+ if (!targetElement) {
83
+ return;
84
+ }
85
+ this._activeId = targetId;
86
+ const targetTop = this._getTargetScrollTop(targetElement);
91
87
  this.cdr.detectChanges();
92
88
  this.scrollContainer.scroll({
93
- top: targetElement.offsetTop - offsetTopFix,
89
+ top: targetTop,
94
90
  left: 0,
95
91
  behavior: 'smooth'
96
92
  });
97
93
  }
98
94
  _findActiveItem() {
95
+ let activeId;
96
+ let nextId;
97
+ let nextDistance = Number.POSITIVE_INFINITY;
99
98
  for (let item of this._items()) {
100
99
  const targetElement = this.document.querySelector('#' + item.targetId());
101
100
  if (targetElement) {
102
- if (this._elementIsVisibleInViewport(this.scrollContainer, targetElement)) {
103
- if (this._activeId === item.targetId()) {
104
- return;
105
- }
106
- this.zone.run(() => {
107
- this._activeId = item.targetId();
108
- this.cdr.detectChanges();
109
- });
110
- break;
101
+ const bounds = this._getTargetBounds(targetElement);
102
+ if (bounds.top <= this.threshold && bounds.bottom > this.threshold) {
103
+ activeId = item.targetId();
104
+ continue;
105
+ }
106
+ if (!activeId && bounds.top > this.threshold && bounds.top < nextDistance) {
107
+ nextId = item.targetId();
108
+ nextDistance = bounds.top;
111
109
  }
112
110
  }
113
111
  }
112
+ const nextActiveId = activeId ?? nextId;
113
+ if (!nextActiveId || this._activeId === nextActiveId) {
114
+ return;
115
+ }
116
+ this.zone.run(() => {
117
+ this._activeId = nextActiveId;
118
+ this.cdr.detectChanges();
119
+ });
120
+ }
121
+ _getScrollContainer() {
122
+ if (this.panelBody) {
123
+ this.isDocumentScrollContainer = false;
124
+ return this.panelBody.scrollContainer();
125
+ }
126
+ if (this.layoutBody) {
127
+ this.isDocumentScrollContainer = false;
128
+ return this.layoutBody.scrollContainer();
129
+ }
130
+ this.isDocumentScrollContainer = true;
131
+ return this.document.scrollingElement ??
132
+ this.document.documentElement ??
133
+ this.document.body;
134
+ }
135
+ _getScrollEventTarget() {
136
+ if (this.isDocumentScrollContainer) {
137
+ return this.document.defaultView ?? this.document;
138
+ }
139
+ return this.scrollContainer;
140
+ }
141
+ _getTargetScrollTop(targetElement) {
142
+ const targetBounds = this._getTargetBounds(targetElement);
143
+ return this.scrollContainer.scrollTop + targetBounds.top - this.threshold;
114
144
  }
115
- _elementIsVisibleInViewport(container, targetEl, partiallyVisible = false) {
116
- const { top, left, bottom, right } = targetEl.getBoundingClientRect();
117
- const containerRect = container.getBoundingClientRect();
118
- const innerWidth = containerRect.width;
119
- const innerHeight = containerRect.height;
120
- return partiallyVisible
121
- ? ((top > 0 && top < innerHeight) ||
122
- (bottom > 0 && bottom < innerHeight)) &&
123
- ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
124
- : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
145
+ _getTargetBounds(targetElement) {
146
+ const targetRect = targetElement.getBoundingClientRect();
147
+ if (this.isDocumentScrollContainer) {
148
+ return {
149
+ top: targetRect.top,
150
+ bottom: targetRect.bottom
151
+ };
152
+ }
153
+ const containerRect = this.scrollContainer.getBoundingClientRect();
154
+ return {
155
+ top: targetRect.top - containerRect.top,
156
+ bottom: targetRect.bottom - containerRect.top
157
+ };
125
158
  }
126
159
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScrollSpyNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
127
160
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ScrollSpyNav, isStandalone: true, selector: "ngs-scroll-spy-nav,[ngs-scroll-spy-nav]", host: { classAttribute: "ngs-scroll-spy-nav" }, providers: [
@@ -190,7 +223,9 @@ class ScrollSpyBackToTop {
190
223
  this.scrollContainer = this.layoutBody.scrollContainer();
191
224
  }
192
225
  else {
193
- this.scrollContainer = this.document.body;
226
+ this.scrollContainer = this.document.scrollingElement ??
227
+ this.document.documentElement ??
228
+ this.document.body;
194
229
  }
195
230
  if (this.scrollContainer) {
196
231
  this.scrollContainer.scrollTo({
package/fesm2022/ngstarter-ui-components-scroll-spy.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ngstarter-ui-components-scroll-spy.mjs","sources":["../../../projects/components/scroll-spy/src/types.ts","../../../projects/components/scroll-spy/src/scroll-spy-on/scroll-spy-on.ts","../../../projects/components/scroll-spy/src/scroll-spy-on/scroll-spy-on.html","../../../projects/components/scroll-spy/src/scroll-spy-nav/scroll-spy-nav.ts","../../../projects/components/scroll-spy/src/scroll-spy-nav/scroll-spy-nav.html","../../../projects/components/scroll-spy/src/scroll-spy-title/scroll-spy-title.ts","../../../projects/components/scroll-spy/src/scroll-spy-title/scroll-spy-title.html","../../../projects/components/scroll-spy/src/scroll-spy-container.directive.ts","../../../projects/components/scroll-spy/src/scroll-spy-back-to-top/scroll-spy-back-to-top.ts","../../../projects/components/scroll-spy/src/scroll-spy-back-to-top/scroll-spy-back-to-top.html","../../../projects/components/scroll-spy/ngstarter-ui-components-scroll-spy.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const SCROLL_SPY_NAV = new InjectionToken('SPY_NAV');\n","import { Component, ElementRef, inject, input, OnInit, Renderer2, DOCUMENT } from '@angular/core';\n\nimport { ScrollSpyNav } from '../scroll-spy-nav/scroll-spy-nav';\nimport { SCROLL_SPY_NAV } from '../types';\n\n@Component({\n selector: 'ngs-scroll-spy-on,[ngs-scroll-spy-on]',\n exportAs: 'ngsScrollSpyOn',\n templateUrl: './scroll-spy-on.html',\n styleUrl: './scroll-spy-on.scss',\n host: {\n 'class': 'ngs-scroll-spy-on',\n '[class.is-active]': 'isActive',\n '(click)': '_handleClick($event)'\n }\n})\nexport class ScrollSpyOn implements OnInit {\n private _parent = inject<ScrollSpyNav>(SCROLL_SPY_NAV);\n private _elementRef = inject(ElementRef);\n private _renderer = inject(Renderer2);\n private _document = inject(DOCUMENT);\n\n targetId = input.required<string>();\n\n ngOnInit() {\n const fullUrl = this._document.location.origin + this._document.location.pathname;\n this._renderer.setAttribute(this._elementRef.nativeElement, 'href', fullUrl + '#' + this.targetId());\n }\n\n protected get isActive() {\n return this.targetId() === this._parent.activeId;\n }\n\n protected _handleClick(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n this._parent.scrollTo(this.targetId());\n }\n}\n","<ng-content/>\n","import {\n AfterContentInit,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n inject,\n NgZone,\n PLATFORM_ID,\n contentChildren,\n DOCUMENT\n} from '@angular/core';\nimport { isPlatformServer } from '@angular/common';\nimport { debounceTime, fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { SCROLL_SPY_NAV } from '../types';\nimport { ScrollSpyOn } from '../scroll-spy-on/scroll-spy-on';\nimport { LAYOUT_CONTENT } from '@ngstarter-ui/components/layout';\nimport { PANEL_CONTENT } from '@ngstarter-ui/components/panel';\n\n@Component({\n selector: 'ngs-scroll-spy-nav,[ngs-scroll-spy-nav]',\n exportAs: 'ngsScrollSpyNav',\n templateUrl: './scroll-spy-nav.html',\n styleUrl: './scroll-spy-nav.scss',\n providers: [\n {\n provide: SCROLL_SPY_NAV,\n useExisting: ScrollSpyNav\n }\n ],\n host: {\n 'class': 'ngs-scroll-spy-nav'\n }\n})\nexport class ScrollSpyNav implements AfterContentInit {\n private document = inject(DOCUMENT);\n private cdr = inject(ChangeDetectorRef);\n private platformId = inject(PLATFORM_ID);\n private zone = inject(NgZone);\n private destroyRef = inject(DestroyRef);\n private panelBody = inject(PANEL_CONTENT, { optional: true });\n private layoutBody = inject(LAYOUT_CONTENT, { optional: true });\n\n readonly _items = contentChildren(ScrollSpyOn);\n\n private threshold = 10;\n protected _activeId: string;\n private scrollContainer: HTMLElement;\n\n ngAfterContentInit() {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n if (this.panelBody) {\n this.scrollContainer = this.panelBody.scrollContainer();\n } else if (this.layoutBody) {\n this.scrollContainer = this.layoutBody.scrollContainer();\n } else {\n this.scrollContainer = this.document.body;\n }\n\n if (this.scrollContainer) {\n this.zone.runOutsideAngular(() => {\n fromEvent(this.scrollContainer, 'scroll')\n .pipe(\n debounceTime(35),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe(() => {\n this._findActiveItem();\n })\n ;\n });\n setTimeout(() => {\n this._findActiveItem();\n }, 10);\n }\n }\n\n get activeId(): string {\n return this._activeId;\n }\n\n scrollTo(targetId: string) {\n if (!this.scrollContainer) {\n return;\n }\n\n this._activeId = targetId;\n const targetElement = this.document.querySelector('#' + targetId) as HTMLElement;\n const offsetTopFix = parseInt(getComputedStyle(targetElement).marginTop) +\n parseInt(getComputedStyle(targetElement).height) + this.threshold\n ;\n this.cdr.detectChanges();\n this.scrollContainer.scroll({\n top: targetElement.offsetTop - offsetTopFix,\n left: 0,\n behavior: 'smooth'\n });\n }\n\n private _findActiveItem() {\n for (let item of this._items()) {\n const targetElement = this.document.querySelector('#' + item.targetId()) as HTMLElement;\n\n if (targetElement) {\n if (this._elementIsVisibleInViewport(this.scrollContainer, targetElement)) {\n if (this._activeId === item.targetId()) {\n return;\n }\n\n this.zone.run(() => {\n this._activeId = item.targetId();\n this.cdr.detectChanges();\n });\n break;\n }\n }\n }\n }\n\n private _elementIsVisibleInViewport(container: HTMLElement, targetEl: HTMLElement, partiallyVisible = false) {\n const { top, left, bottom, right } = targetEl.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n const innerWidth = containerRect.width;\n const innerHeight = containerRect.height;\n return partiallyVisible\n ? ((top > 0 && top < innerHeight) ||\n (bottom > 0 && bottom < innerHeight)) &&\n ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))\n : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;\n }\n}\n","<ng-content select=\"ngs-scroll-spy-title,[ngs-scroll-spy-title]\"/>\n<div>\n <ng-content/>\n</div>\n<ng-content select=\"ngs-scroll-spy-back-to-top,[ngs-scroll-spy-back-to-top]\"/>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-scroll-spy-title,[ngs-scroll-spy-title]',\n exportAs: 'ngsScrollSpyTitle',\n templateUrl: './scroll-spy-title.html',\n styleUrl: './scroll-spy-title.scss',\n host: {\n 'class': 'ngs-scroll-spy-title'\n }\n})\nexport class ScrollSpyTitle {\n\n}\n","<div class=\"truncate\"><ng-content/></div>\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n selector: '[ngsScrollSpyContainer]',\n exportAs: 'ngsScrollSpyContainer',\n host: {\n 'class': 'ngs-scroll-spy-container'\n }\n})\nexport class ScrollSpyContainerDirective {\n private elementRef = inject(ElementRef);\n\n getScrollContainer(): HTMLElement {\n return this.elementRef.nativeElement;\n }\n}\n","import { Component, DOCUMENT, inject, PLATFORM_ID } from '@angular/core';\nimport { PANEL_CONTENT } from '@ngstarter-ui/components/panel';\nimport { LAYOUT_CONTENT } from '@ngstarter-ui/components/layout';\nimport { isPlatformServer } from '@angular/common';\nimport { Icon } from '@ngstarter-ui/components/icon';\n\n@Component({\n selector: 'ngs-scroll-spy-back-to-top,[ngs-scroll-spy-back-to-top]',\n exportAs: 'ngsScrollSpyBackToTop',\n imports: [\n Icon\n ],\n templateUrl: './scroll-spy-back-to-top.html',\n styleUrl: './scroll-spy-back-to-top.scss',\n host: {\n '(click)': 'scrollToTop()'\n }\n})\nexport class ScrollSpyBackToTop {\n private platformId = inject(PLATFORM_ID);\n private document = inject(DOCUMENT);\n private panelBody = inject(PANEL_CONTENT, { optional: true });\n private layoutBody = inject(LAYOUT_CONTENT, { optional: true });\n\n private scrollContainer: HTMLElement;\n\n scrollToTop() {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n if (this.panelBody) {\n this.scrollContainer = this.panelBody.scrollContainer();\n } else if (this.layoutBody) {\n this.scrollContainer = this.layoutBody.scrollContainer();\n } else {\n this.scrollContainer = this.document.body;\n }\n\n if (this.scrollContainer) {\n this.scrollContainer.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n }\n }\n}\n","<ngs-icon name=\"fluent:arrow-up-24-regular\"/>\n<ng-content/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ngstarter-ui-components-scroll-spy.mjs","sources":["../../../projects/components/scroll-spy/src/types.ts","../../../projects/components/scroll-spy/src/scroll-spy-on/scroll-spy-on.ts","../../../projects/components/scroll-spy/src/scroll-spy-on/scroll-spy-on.html","../../../projects/components/scroll-spy/src/scroll-spy-nav/scroll-spy-nav.ts","../../../projects/components/scroll-spy/src/scroll-spy-nav/scroll-spy-nav.html","../../../projects/components/scroll-spy/src/scroll-spy-title/scroll-spy-title.ts","../../../projects/components/scroll-spy/src/scroll-spy-title/scroll-spy-title.html","../../../projects/components/scroll-spy/src/scroll-spy-container.directive.ts","../../../projects/components/scroll-spy/src/scroll-spy-back-to-top/scroll-spy-back-to-top.ts","../../../projects/components/scroll-spy/src/scroll-spy-back-to-top/scroll-spy-back-to-top.html","../../../projects/components/scroll-spy/ngstarter-ui-components-scroll-spy.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const SCROLL_SPY_NAV = new InjectionToken('SPY_NAV');\n","import { Component, ElementRef, inject, input, OnInit, Renderer2, DOCUMENT } from '@angular/core';\n\nimport { ScrollSpyNav } from '../scroll-spy-nav/scroll-spy-nav';\nimport { SCROLL_SPY_NAV } from '../types';\n\n@Component({\n selector: 'ngs-scroll-spy-on,[ngs-scroll-spy-on]',\n exportAs: 'ngsScrollSpyOn',\n templateUrl: './scroll-spy-on.html',\n styleUrl: './scroll-spy-on.scss',\n host: {\n 'class': 'ngs-scroll-spy-on',\n '[class.is-active]': 'isActive',\n '(click)': '_handleClick($event)'\n }\n})\nexport class ScrollSpyOn implements OnInit {\n private _parent = inject<ScrollSpyNav>(SCROLL_SPY_NAV);\n private _elementRef = inject(ElementRef);\n private _renderer = inject(Renderer2);\n private _document = inject(DOCUMENT);\n\n targetId = input.required<string>();\n\n ngOnInit() {\n const fullUrl = this._document.location.origin + this._document.location.pathname;\n this._renderer.setAttribute(this._elementRef.nativeElement, 'href', fullUrl + '#' + this.targetId());\n }\n\n protected get isActive() {\n return this.targetId() === this._parent.activeId;\n }\n\n protected _handleClick(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n this._parent.scrollTo(this.targetId());\n }\n}\n","<ng-content/>\n","import {\n AfterContentInit,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n inject,\n NgZone,\n PLATFORM_ID,\n contentChildren,\n DOCUMENT\n} from '@angular/core';\nimport { isPlatformServer } from '@angular/common';\nimport { debounceTime, fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { SCROLL_SPY_NAV } from '../types';\nimport { ScrollSpyOn } from '../scroll-spy-on/scroll-spy-on';\nimport { LAYOUT_CONTENT } from '@ngstarter-ui/components/layout';\nimport { PANEL_CONTENT } from '@ngstarter-ui/components/panel';\n\n@Component({\n selector: 'ngs-scroll-spy-nav,[ngs-scroll-spy-nav]',\n exportAs: 'ngsScrollSpyNav',\n templateUrl: './scroll-spy-nav.html',\n styleUrl: './scroll-spy-nav.scss',\n providers: [\n {\n provide: SCROLL_SPY_NAV,\n useExisting: ScrollSpyNav\n }\n ],\n host: {\n 'class': 'ngs-scroll-spy-nav'\n }\n})\nexport class ScrollSpyNav implements AfterContentInit {\n private document = inject(DOCUMENT);\n private cdr = inject(ChangeDetectorRef);\n private platformId = inject(PLATFORM_ID);\n private zone = inject(NgZone);\n private destroyRef = inject(DestroyRef);\n private panelBody = inject(PANEL_CONTENT, { optional: true });\n private layoutBody = inject(LAYOUT_CONTENT, { optional: true });\n\n readonly _items = contentChildren(ScrollSpyOn);\n\n private threshold = 10;\n protected _activeId: string;\n private scrollContainer: HTMLElement;\n private isDocumentScrollContainer = false;\n\n ngAfterContentInit() {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n this.scrollContainer = this._getScrollContainer();\n const scrollEventTarget = this._getScrollEventTarget();\n\n if (this.scrollContainer) {\n this.zone.runOutsideAngular(() => {\n fromEvent(scrollEventTarget, 'scroll')\n .pipe(\n debounceTime(35),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe(() => {\n this._findActiveItem();\n })\n ;\n });\n setTimeout(() => {\n this._findActiveItem();\n }, 10);\n }\n }\n\n get activeId(): string {\n return this._activeId;\n }\n\n scrollTo(targetId: string) {\n if (!this.scrollContainer) {\n return;\n }\n\n const targetElement = this.document.querySelector('#' + targetId) as HTMLElement;\n\n if (!targetElement) {\n return;\n }\n\n this._activeId = targetId;\n const targetTop = this._getTargetScrollTop(targetElement);\n\n this.cdr.detectChanges();\n this.scrollContainer.scroll({\n top: targetTop,\n left: 0,\n behavior: 'smooth'\n });\n }\n\n private _findActiveItem() {\n let activeId: string | undefined;\n let nextId: string | undefined;\n let nextDistance = Number.POSITIVE_INFINITY;\n\n for (let item of this._items()) {\n const targetElement = this.document.querySelector('#' + item.targetId()) as HTMLElement;\n\n if (targetElement) {\n const bounds = this._getTargetBounds(targetElement);\n\n if (bounds.top <= this.threshold && bounds.bottom > this.threshold) {\n activeId = item.targetId();\n continue;\n }\n\n if (!activeId && bounds.top > this.threshold && bounds.top < nextDistance) {\n nextId = item.targetId();\n nextDistance = bounds.top;\n }\n }\n }\n\n const nextActiveId = activeId ?? nextId;\n\n if (!nextActiveId || this._activeId === nextActiveId) {\n return;\n }\n\n this.zone.run(() => {\n this._activeId = nextActiveId;\n this.cdr.detectChanges();\n });\n }\n\n private _getScrollContainer(): HTMLElement {\n if (this.panelBody) {\n this.isDocumentScrollContainer = false;\n return this.panelBody.scrollContainer();\n }\n\n if (this.layoutBody) {\n this.isDocumentScrollContainer = false;\n return this.layoutBody.scrollContainer();\n }\n\n this.isDocumentScrollContainer = true;\n return (this.document.scrollingElement as HTMLElement | null) ??\n this.document.documentElement ??\n this.document.body\n ;\n }\n\n private _getScrollEventTarget(): EventTarget {\n if (this.isDocumentScrollContainer) {\n return this.document.defaultView ?? this.document;\n }\n\n return this.scrollContainer;\n }\n\n private _getTargetScrollTop(targetElement: HTMLElement): number {\n const targetBounds = this._getTargetBounds(targetElement);\n return this.scrollContainer.scrollTop + targetBounds.top - this.threshold;\n }\n\n private _getTargetBounds(targetElement: HTMLElement): Pick<DOMRect, 'top' | 'bottom'> {\n const targetRect = targetElement.getBoundingClientRect();\n\n if (this.isDocumentScrollContainer) {\n return {\n top: targetRect.top,\n bottom: targetRect.bottom\n };\n }\n\n const containerRect = this.scrollContainer.getBoundingClientRect();\n\n return {\n top: targetRect.top - containerRect.top,\n bottom: targetRect.bottom - containerRect.top\n };\n }\n}\n","<ng-content select=\"ngs-scroll-spy-title,[ngs-scroll-spy-title]\"/>\n<div>\n <ng-content/>\n</div>\n<ng-content select=\"ngs-scroll-spy-back-to-top,[ngs-scroll-spy-back-to-top]\"/>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-scroll-spy-title,[ngs-scroll-spy-title]',\n exportAs: 'ngsScrollSpyTitle',\n templateUrl: './scroll-spy-title.html',\n styleUrl: './scroll-spy-title.scss',\n host: {\n 'class': 'ngs-scroll-spy-title'\n }\n})\nexport class ScrollSpyTitle {\n\n}\n","<div class=\"truncate\"><ng-content/></div>\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n selector: '[ngsScrollSpyContainer]',\n exportAs: 'ngsScrollSpyContainer',\n host: {\n 'class': 'ngs-scroll-spy-container'\n }\n})\nexport class ScrollSpyContainerDirective {\n private elementRef = inject(ElementRef);\n\n getScrollContainer(): HTMLElement {\n return this.elementRef.nativeElement;\n }\n}\n","import { Component, DOCUMENT, inject, PLATFORM_ID } from '@angular/core';\nimport { PANEL_CONTENT } from '@ngstarter-ui/components/panel';\nimport { LAYOUT_CONTENT } from '@ngstarter-ui/components/layout';\nimport { isPlatformServer } from '@angular/common';\nimport { Icon } from '@ngstarter-ui/components/icon';\n\n@Component({\n selector: 'ngs-scroll-spy-back-to-top,[ngs-scroll-spy-back-to-top]',\n exportAs: 'ngsScrollSpyBackToTop',\n imports: [\n Icon\n ],\n templateUrl: './scroll-spy-back-to-top.html',\n styleUrl: './scroll-spy-back-to-top.scss',\n host: {\n '(click)': 'scrollToTop()'\n }\n})\nexport class ScrollSpyBackToTop {\n private platformId = inject(PLATFORM_ID);\n private document = inject(DOCUMENT);\n private panelBody = inject(PANEL_CONTENT, { optional: true });\n private layoutBody = inject(LAYOUT_CONTENT, { optional: true });\n\n private scrollContainer: HTMLElement;\n\n scrollToTop() {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n if (this.panelBody) {\n this.scrollContainer = this.panelBody.scrollContainer();\n } else if (this.layoutBody) {\n this.scrollContainer = this.layoutBody.scrollContainer();\n } else {\n this.scrollContainer = (this.document.scrollingElement as HTMLElement | null) ??\n this.document.documentElement ??\n this.document.body\n ;\n }\n\n if (this.scrollContainer) {\n this.scrollContainer.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n }\n }\n}\n","<ngs-icon name=\"fluent:arrow-up-24-regular\"/>\n<ng-content/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ngstarter-ui/components",
3
3
  "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
4
- "version": "21.0.36",
4
+ "version": "21.0.38",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/elementarlabsdev/ngstarter.git"
@@ -269,6 +269,10 @@
269
269
  "types": "./types/ngstarter-ui-components-empty-state.d.ts",
270
270
  "default": "./fesm2022/ngstarter-ui-components-empty-state.mjs"
271
271
  },
272
+ "./events": {
273
+ "types": "./types/ngstarter-ui-components-events.d.ts",
274
+ "default": "./fesm2022/ngstarter-ui-components-events.mjs"
275
+ },
272
276
  "./expand": {
273
277
  "types": "./types/ngstarter-ui-components-expand.d.ts",
274
278
  "default": "./fesm2022/ngstarter-ui-components-expand.mjs"
package/types/ngstarter-ui-components-events.d.ts ADDED
@@ -0,0 +1,57 @@
1
+ import * as i0 from '@angular/core';
2
+
3
+ type EventTone = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
4
+ type EventsListGroupBy = 'none' | 'day' | 'week';
5
+
6
+ declare class EventsList {
7
+ groupBy: i0.InputSignal<EventsListGroupBy>;
8
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventsList, never>;
9
+ static ɵcmp: i0.ɵɵComponentDeclaration<EventsList, "ngs-events-list", ["ngsEventsList"], { "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
10
+ }
11
+
12
+ declare class EventsSection {
13
+ label: i0.InputSignal<string>;
14
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventsSection, never>;
15
+ static ɵcmp: i0.ɵɵComponentDeclaration<EventsSection, "ngs-events-section", ["ngsEventsSection"], { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
16
+ }
17
+
18
+ declare class Event {
19
+ static ɵfac: i0.ɵɵFactoryDeclaration<Event, never>;
20
+ static ɵcmp: i0.ɵɵComponentDeclaration<Event, "ngs-event", ["ngsEvent"], {}, {}, never, ["ngs-event-date,[ngs-event-date]", "ngs-event-title,[ngs-event-title]", "ngs-event-status,[ngs-event-status]", "ngs-event-time,[ngs-event-time]", "ngs-event-description,[ngs-event-description]", "*", "[ngsEventActions]"], true, never>;
21
+ }
22
+
23
+ declare class EventDate {
24
+ weekday: i0.InputSignal<string>;
25
+ day: i0.InputSignal<string | number>;
26
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventDate, never>;
27
+ static ɵcmp: i0.ɵɵComponentDeclaration<EventDate, "ngs-event-date,[ngs-event-date]", ["ngsEventDate"], { "weekday": { "alias": "weekday"; "required": false; "isSignal": true; }; "day": { "alias": "day"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
28
+ }
29
+
30
+ declare class EventTitle {
31
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventTitle, never>;
32
+ static ɵcmp: i0.ɵɵComponentDeclaration<EventTitle, "ngs-event-title,[ngs-event-title]", ["ngsEventTitle"], {}, {}, never, ["*"], true, never>;
33
+ }
34
+
35
+ declare class EventStatus {
36
+ tone: i0.InputSignal<EventTone>;
37
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventStatus, never>;
38
+ static ɵcmp: i0.ɵɵComponentDeclaration<EventStatus, "ngs-event-status,[ngs-event-status]", ["ngsEventStatus"], { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
39
+ }
40
+
41
+ declare class EventTime {
42
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventTime, never>;
43
+ static ɵcmp: i0.ɵɵComponentDeclaration<EventTime, "ngs-event-time,[ngs-event-time]", ["ngsEventTime"], {}, {}, never, ["*"], true, never>;
44
+ }
45
+
46
+ declare class EventDescription {
47
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventDescription, never>;
48
+ static ɵcmp: i0.ɵɵComponentDeclaration<EventDescription, "ngs-event-description,[ngs-event-description]", ["ngsEventDescription"], {}, {}, never, ["*"], true, never>;
49
+ }
50
+
51
+ declare class EventActionsDirective {
52
+ static ɵfac: i0.ɵɵFactoryDeclaration<EventActionsDirective, never>;
53
+ static ɵdir: i0.ɵɵDirectiveDeclaration<EventActionsDirective, "[ngsEventActions]", ["ngsEventActions"], {}, {}, never, never, true, never>;
54
+ }
55
+
56
+ export { Event, EventActionsDirective, EventDate, EventDescription, EventStatus, EventTime, EventTitle, EventsList, EventsSection };
57
+ export type { EventTone, EventsListGroupBy };
package/types/ngstarter-ui-components-scroll-spy.d.ts CHANGED
@@ -26,11 +26,15 @@ declare class ScrollSpyNav implements AfterContentInit {
26
26
  private threshold;
27
27
  protected _activeId: string;
28
28
  private scrollContainer;
29
+ private isDocumentScrollContainer;
29
30
  ngAfterContentInit(): void;
30
31
  get activeId(): string;
31
32
  scrollTo(targetId: string): void;
32
33
  private _findActiveItem;
33
- private _elementIsVisibleInViewport;
34
+ private _getScrollContainer;
35
+ private _getScrollEventTarget;
36
+ private _getTargetScrollTop;
37
+ private _getTargetBounds;
34
38
  static ɵfac: i0.ɵɵFactoryDeclaration<ScrollSpyNav, never>;
35
39
  static ɵcmp: i0.ɵɵComponentDeclaration<ScrollSpyNav, "ngs-scroll-spy-nav,[ngs-scroll-spy-nav]", ["ngsScrollSpyNav"], {}, {}, ["_items"], ["ngs-scroll-spy-title,[ngs-scroll-spy-title]", "*", "ngs-scroll-spy-back-to-top,[ngs-scroll-spy-back-to-top]"], true, never>;
36
40
  }