@ngstarter-ui/components 21.0.36 → 21.0.37
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.
|
@@ -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":
|
|
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",
|
|
@@ -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
|
|
@@ -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/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.
|
|
4
|
+
"version": "21.0.37",
|
|
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"
|
|
@@ -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 };
|