@semantic-components/carousel 0.63.0 → 0.65.0
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.
- package/esm2022/index.js +2 -0
- package/esm2022/index.js.map +1 -0
- package/esm2022/lib/components/carousel/carousel-item.js +27 -0
- package/esm2022/lib/components/carousel/carousel-item.js.map +1 -0
- package/esm2022/lib/components/carousel/carousel-next.js +39 -0
- package/esm2022/lib/components/carousel/carousel-next.js.map +1 -0
- package/esm2022/lib/components/carousel/carousel-previous.js +39 -0
- package/esm2022/lib/components/carousel/carousel-previous.js.map +1 -0
- package/esm2022/lib/components/carousel/carousel-track.js +25 -0
- package/esm2022/lib/components/carousel/carousel-track.js.map +1 -0
- package/esm2022/lib/components/carousel/carousel-viewport.js +29 -0
- package/esm2022/lib/components/carousel/carousel-viewport.js.map +1 -0
- package/esm2022/lib/components/carousel/carousel.js +80 -0
- package/esm2022/lib/components/carousel/carousel.js.map +1 -0
- package/{src/lib/components/carousel/index.ts → esm2022/lib/components/carousel/index.js} +1 -6
- package/esm2022/lib/components/carousel/index.js.map +1 -0
- package/esm2022/lib/components/index.js +2 -0
- package/esm2022/lib/components/index.js.map +1 -0
- package/esm2022/semantic-components-carousel.js +5 -0
- package/esm2022/semantic-components-carousel.js.map +1 -0
- package/lib/components/carousel/carousel-item.d.ts +8 -0
- package/lib/components/carousel/carousel-next.d.ts +11 -0
- package/lib/components/carousel/carousel-previous.d.ts +11 -0
- package/lib/components/carousel/carousel-track.d.ts +8 -0
- package/lib/components/carousel/carousel-viewport.d.ts +9 -0
- package/lib/components/carousel/carousel.d.ts +25 -0
- package/lib/components/carousel/index.d.ts +7 -0
- package/package.json +17 -3
- package/semantic-components-carousel.d.ts +5 -0
- package/eslint.config.mjs +0 -48
- package/ng-package.json +0 -7
- package/project.json +0 -28
- package/src/lib/components/carousel/README.md +0 -342
- package/src/lib/components/carousel/carousel-item.ts +0 -27
- package/src/lib/components/carousel/carousel-next.ts +0 -46
- package/src/lib/components/carousel/carousel-previous.ts +0 -46
- package/src/lib/components/carousel/carousel-track.ts +0 -25
- package/src/lib/components/carousel/carousel-viewport.ts +0 -34
- package/src/lib/components/carousel/carousel.ts +0 -104
- package/tsconfig.json +0 -28
- package/tsconfig.lib.json +0 -12
- package/tsconfig.lib.prod.json +0 -7
- /package/{src/index.ts → index.d.ts} +0 -0
- /package/{src/lib/components/index.ts → lib/components/index.d.ts} +0 -0
package/esm2022/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/carousel/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './lib/components';\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { computed, Directive, inject, input } from '@angular/core';
|
|
2
|
+
import { cn } from '@semantic-components/ui';
|
|
3
|
+
import { ScCarousel } from './carousel';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class ScCarouselItem {
|
|
6
|
+
carousel = inject(ScCarousel);
|
|
7
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
8
|
+
class = computed(() => {
|
|
9
|
+
const isHorizontal = this.carousel.orientation() === 'horizontal';
|
|
10
|
+
return cn('min-w-0 shrink-0 grow-0 basis-full', isHorizontal ? 'pl-4' : 'pt-4', this.classInput());
|
|
11
|
+
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
12
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: ScCarouselItem, isStandalone: true, selector: "div[sc-carousel-item]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel-item", "role": "group", "aria-roledescription": "slide" }, properties: { "class": "class()" } }, ngImport: i0 });
|
|
14
|
+
}
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselItem, decorators: [{
|
|
16
|
+
type: Directive,
|
|
17
|
+
args: [{
|
|
18
|
+
selector: 'div[sc-carousel-item]',
|
|
19
|
+
host: {
|
|
20
|
+
'data-slot': 'carousel-item',
|
|
21
|
+
role: 'group',
|
|
22
|
+
'aria-roledescription': 'slide',
|
|
23
|
+
'[class]': 'class()',
|
|
24
|
+
},
|
|
25
|
+
}]
|
|
26
|
+
}], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
27
|
+
//# sourceMappingURL=carousel-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel-item.js","sourceRoot":"","sources":["../../../../../../../libs/carousel/src/lib/components/carousel/carousel-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;;AAWxC,MAAM,OAAO,cAAc;IACR,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAEtC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC;QAClE,OAAO,EAAE,CACP,oCAAoC,EACpC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC9B,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;uGAZQ,cAAc;2FAAd,cAAc;;2FAAd,cAAc;kBAT1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,IAAI,EAAE;wBACJ,WAAW,EAAE,eAAe;wBAC5B,IAAI,EAAE,OAAO;wBACb,sBAAsB,EAAE,OAAO;wBAC/B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { ScCarousel } from './carousel';\n\n@Directive({\n selector: 'div[sc-carousel-item]',\n host: {\n 'data-slot': 'carousel-item',\n role: 'group',\n 'aria-roledescription': 'slide',\n '[class]': 'class()',\n },\n})\nexport class ScCarouselItem {\n private readonly carousel = inject(ScCarousel);\n\n readonly classInput = input<string>('', { alias: 'class' });\n\n protected readonly class = computed(() => {\n const isHorizontal = this.carousel.orientation() === 'horizontal';\n return cn(\n 'min-w-0 shrink-0 grow-0 basis-full',\n isHorizontal ? 'pl-4' : 'pt-4',\n this.classInput(),\n );\n });\n}\n"]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
|
|
2
|
+
import { buttonVariants, cn } from '@semantic-components/ui';
|
|
3
|
+
import { ScCarousel } from './carousel';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class ScCarouselNext {
|
|
6
|
+
carousel = inject(ScCarousel);
|
|
7
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
8
|
+
variant = input('outline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
9
|
+
size = input('icon-sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
10
|
+
class = computed(() => {
|
|
11
|
+
const isHorizontal = this.carousel.orientation() === 'horizontal';
|
|
12
|
+
return cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'rounded-full absolute touch-manipulation', isHorizontal
|
|
13
|
+
? 'top-1/2 -right-12 -translate-y-1/2'
|
|
14
|
+
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', this.classInput());
|
|
15
|
+
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselNext, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScCarouselNext, isStandalone: true, selector: "button[sc-carousel-next]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel-next", "type": "button" }, listeners: { "click": "carousel.scrollNext()" }, properties: { "class": "class()", "disabled": "!carousel.canScrollNext()" } }, ngImport: i0, template: `
|
|
18
|
+
<ng-content />
|
|
19
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20
|
+
}
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselNext, decorators: [{
|
|
22
|
+
type: Component,
|
|
23
|
+
args: [{
|
|
24
|
+
selector: 'button[sc-carousel-next]',
|
|
25
|
+
template: `
|
|
26
|
+
<ng-content />
|
|
27
|
+
`,
|
|
28
|
+
host: {
|
|
29
|
+
'data-slot': 'carousel-next',
|
|
30
|
+
type: 'button',
|
|
31
|
+
'[class]': 'class()',
|
|
32
|
+
'[disabled]': '!carousel.canScrollNext()',
|
|
33
|
+
'(click)': 'carousel.scrollNext()',
|
|
34
|
+
},
|
|
35
|
+
encapsulation: ViewEncapsulation.None,
|
|
36
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
37
|
+
}]
|
|
38
|
+
}], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
39
|
+
//# sourceMappingURL=carousel-next.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel-next.js","sourceRoot":"","sources":["../../../../../../../libs/carousel/src/lib/components/carousel/carousel-next.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,EAAE,EAAoB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;;AAiBxC,MAAM,OAAO,cAAc;IAChB,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAE9B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,OAAO,GAAG,KAAK,CAA8B,SAAS,mDAAC,CAAC;IACxD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAExC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC;QAClE,OAAO,EAAE,CACP,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,0CAA0C,EAC1C,YAAY;YACV,CAAC,CAAC,oCAAoC;YACtC,CAAC,CAAC,gDAAgD,EACpD,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;uGAlBQ,cAAc;2FAAd,cAAc,6pBAbf;;GAET;;2FAWU,cAAc;kBAf1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,eAAe;wBAC5B,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,2BAA2B;wBACzC,SAAS,EAAE,uBAAuB;qBACnC;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { buttonVariants, cn, ScButtonVariants } from '@semantic-components/ui';\nimport { ScCarousel } from './carousel';\n\n@Component({\n selector: 'button[sc-carousel-next]',\n template: `\n <ng-content />\n `,\n host: {\n 'data-slot': 'carousel-next',\n type: 'button',\n '[class]': 'class()',\n '[disabled]': '!carousel.canScrollNext()',\n '(click)': 'carousel.scrollNext()',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCarouselNext {\n readonly carousel = inject(ScCarousel);\n\n readonly classInput = input<string>('', { alias: 'class' });\n\n readonly variant = input<ScButtonVariants['variant']>('outline');\n readonly size = input<ScButtonVariants['size']>('icon-sm');\n\n protected readonly class = computed(() => {\n const isHorizontal = this.carousel.orientation() === 'horizontal';\n return cn(\n buttonVariants({ variant: this.variant(), size: this.size() }),\n 'rounded-full absolute touch-manipulation',\n isHorizontal\n ? 'top-1/2 -right-12 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n this.classInput(),\n );\n });\n}\n"]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
|
|
2
|
+
import { buttonVariants, cn } from '@semantic-components/ui';
|
|
3
|
+
import { ScCarousel } from './carousel';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class ScCarouselPrevious {
|
|
6
|
+
carousel = inject(ScCarousel);
|
|
7
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
8
|
+
variant = input('outline', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
9
|
+
size = input('icon-sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
10
|
+
class = computed(() => {
|
|
11
|
+
const isHorizontal = this.carousel.orientation() === 'horizontal';
|
|
12
|
+
return cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'rounded-full absolute touch-manipulation', isHorizontal
|
|
13
|
+
? 'top-1/2 -left-12 -translate-y-1/2'
|
|
14
|
+
: '-top-12 left-1/2 -translate-x-1/2 rotate-90', this.classInput());
|
|
15
|
+
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScCarouselPrevious, isStandalone: true, selector: "button[sc-carousel-previous]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel-previous", "type": "button" }, listeners: { "click": "carousel.scrollPrev()" }, properties: { "class": "class()", "disabled": "!carousel.canScrollPrev()" } }, ngImport: i0, template: `
|
|
18
|
+
<ng-content />
|
|
19
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20
|
+
}
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselPrevious, decorators: [{
|
|
22
|
+
type: Component,
|
|
23
|
+
args: [{
|
|
24
|
+
selector: 'button[sc-carousel-previous]',
|
|
25
|
+
template: `
|
|
26
|
+
<ng-content />
|
|
27
|
+
`,
|
|
28
|
+
host: {
|
|
29
|
+
'data-slot': 'carousel-previous',
|
|
30
|
+
type: 'button',
|
|
31
|
+
'[class]': 'class()',
|
|
32
|
+
'[disabled]': '!carousel.canScrollPrev()',
|
|
33
|
+
'(click)': 'carousel.scrollPrev()',
|
|
34
|
+
},
|
|
35
|
+
encapsulation: ViewEncapsulation.None,
|
|
36
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
37
|
+
}]
|
|
38
|
+
}], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
39
|
+
//# sourceMappingURL=carousel-previous.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel-previous.js","sourceRoot":"","sources":["../../../../../../../libs/carousel/src/lib/components/carousel/carousel-previous.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,EAAE,EAAoB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;;AAiBxC,MAAM,OAAO,kBAAkB;IACpB,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAE9B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,OAAO,GAAG,KAAK,CAA8B,SAAS,mDAAC,CAAC;IACxD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAExC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC;QAClE,OAAO,EAAE,CACP,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,0CAA0C,EAC1C,YAAY;YACV,CAAC,CAAC,mCAAmC;YACrC,CAAC,CAAC,6CAA6C,EACjD,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;uGAlBQ,kBAAkB;2FAAlB,kBAAkB,qqBAbnB;;GAET;;2FAWU,kBAAkB;kBAf9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,2BAA2B;wBACzC,SAAS,EAAE,uBAAuB;qBACnC;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { buttonVariants, cn, ScButtonVariants } from '@semantic-components/ui';\nimport { ScCarousel } from './carousel';\n\n@Component({\n selector: 'button[sc-carousel-previous]',\n template: `\n <ng-content />\n `,\n host: {\n 'data-slot': 'carousel-previous',\n type: 'button',\n '[class]': 'class()',\n '[disabled]': '!carousel.canScrollPrev()',\n '(click)': 'carousel.scrollPrev()',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCarouselPrevious {\n readonly carousel = inject(ScCarousel);\n\n readonly classInput = input<string>('', { alias: 'class' });\n\n readonly variant = input<ScButtonVariants['variant']>('outline');\n readonly size = input<ScButtonVariants['size']>('icon-sm');\n\n protected readonly class = computed(() => {\n const isHorizontal = this.carousel.orientation() === 'horizontal';\n return cn(\n buttonVariants({ variant: this.variant(), size: this.size() }),\n 'rounded-full absolute touch-manipulation',\n isHorizontal\n ? 'top-1/2 -left-12 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n this.classInput(),\n );\n });\n}\n"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { computed, Directive, inject, input } from '@angular/core';
|
|
2
|
+
import { cn } from '@semantic-components/ui';
|
|
3
|
+
import { ScCarousel } from './carousel';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class ScCarouselTrack {
|
|
6
|
+
carousel = inject(ScCarousel);
|
|
7
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
8
|
+
class = computed(() => {
|
|
9
|
+
const isHorizontal = this.carousel.orientation() === 'horizontal';
|
|
10
|
+
return cn('flex', isHorizontal ? '-ml-4' : '-mt-4 flex-col', this.classInput());
|
|
11
|
+
}, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
12
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: ScCarouselTrack, isStandalone: true, selector: "div[sc-carousel-track]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel-track" }, properties: { "class": "class()" } }, ngImport: i0 });
|
|
14
|
+
}
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselTrack, decorators: [{
|
|
16
|
+
type: Directive,
|
|
17
|
+
args: [{
|
|
18
|
+
selector: 'div[sc-carousel-track]',
|
|
19
|
+
host: {
|
|
20
|
+
'data-slot': 'carousel-track',
|
|
21
|
+
'[class]': 'class()',
|
|
22
|
+
},
|
|
23
|
+
}]
|
|
24
|
+
}], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
25
|
+
//# sourceMappingURL=carousel-track.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel-track.js","sourceRoot":"","sources":["../../../../../../../libs/carousel/src/lib/components/carousel/carousel-track.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;;AASxC,MAAM,OAAO,eAAe;IACT,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAEtC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC;QAClE,OAAO,EAAE,CACP,MAAM,EACN,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,EACzC,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;uGAZQ,eAAe;2FAAf,eAAe;;2FAAf,eAAe;kBAP3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,gBAAgB;wBAC7B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '@semantic-components/ui';\nimport { ScCarousel } from './carousel';\n\n@Directive({\n selector: 'div[sc-carousel-track]',\n host: {\n 'data-slot': 'carousel-track',\n '[class]': 'class()',\n },\n})\nexport class ScCarouselTrack {\n private readonly carousel = inject(ScCarousel);\n\n readonly classInput = input<string>('', { alias: 'class' });\n\n protected readonly class = computed(() => {\n const isHorizontal = this.carousel.orientation() === 'horizontal';\n return cn(\n 'flex',\n isHorizontal ? '-ml-4' : '-mt-4 flex-col',\n this.classInput(),\n );\n });\n}\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { computed, Component, ElementRef, inject, input, ViewEncapsulation, ChangeDetectionStrategy, } from '@angular/core';
|
|
2
|
+
import { cn } from '@semantic-components/ui';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class ScCarouselViewport {
|
|
5
|
+
elementRef = inject((ElementRef));
|
|
6
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
7
|
+
viewportElement = computed(() => this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "viewportElement" }] : []));
|
|
8
|
+
class = computed(() => cn('overflow-hidden', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselViewport, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ScCarouselViewport, isStandalone: true, selector: "div[sc-carousel-viewport]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel-viewport" }, properties: { "class": "class()" } }, ngImport: i0, template: `
|
|
11
|
+
<ng-content />
|
|
12
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13
|
+
}
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarouselViewport, decorators: [{
|
|
15
|
+
type: Component,
|
|
16
|
+
args: [{
|
|
17
|
+
selector: 'div[sc-carousel-viewport]',
|
|
18
|
+
template: `
|
|
19
|
+
<ng-content />
|
|
20
|
+
`,
|
|
21
|
+
host: {
|
|
22
|
+
'data-slot': 'carousel-viewport',
|
|
23
|
+
'[class]': 'class()',
|
|
24
|
+
},
|
|
25
|
+
encapsulation: ViewEncapsulation.None,
|
|
26
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
27
|
+
}]
|
|
28
|
+
}], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
29
|
+
//# sourceMappingURL=carousel-viewport.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel-viewport.js","sourceRoot":"","sources":["../../../../../../../libs/carousel/src/lib/components/carousel/carousel-viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,EACL,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;;AAc7C,MAAM,OAAO,kBAAkB;IACZ,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAErD,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,2DAAC,CAAC;IAEtD,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACzC,CAAC;uGATS,kBAAkB;2FAAlB,kBAAkB,mUAVnB;;GAET;;2FAQU,kBAAkB;kBAZ9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,2BAA2B;oBACrC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n computed,\n Component,\n ElementRef,\n inject,\n input,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n} from '@angular/core';\nimport { cn } from '@semantic-components/ui';\n\n@Component({\n selector: 'div[sc-carousel-viewport]',\n template: `\n <ng-content />\n `,\n host: {\n 'data-slot': 'carousel-viewport',\n '[class]': 'class()',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCarouselViewport {\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n readonly classInput = input<string>('', { alias: 'class' });\n\n readonly viewportElement = computed(() => this.elementRef.nativeElement);\n\n protected readonly class = computed(() =>\n cn('overflow-hidden', this.classInput()),\n );\n}\n"]}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, computed, contentChild, input, signal, ViewEncapsulation, DestroyRef, inject, afterNextRender, } from '@angular/core';
|
|
2
|
+
import EmblaCarousel from 'embla-carousel';
|
|
3
|
+
import { cn } from '@semantic-components/ui';
|
|
4
|
+
import { ScCarouselViewport } from './carousel-viewport';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export class ScCarousel {
|
|
7
|
+
destroyRef = inject(DestroyRef);
|
|
8
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
9
|
+
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
10
|
+
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
11
|
+
plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : []));
|
|
12
|
+
viewport = contentChild(ScCarouselViewport, ...(ngDevMode ? [{ debugName: "viewport" }] : []));
|
|
13
|
+
canScrollPrev = signal(false, ...(ngDevMode ? [{ debugName: "canScrollPrev" }] : []));
|
|
14
|
+
canScrollNext = signal(false, ...(ngDevMode ? [{ debugName: "canScrollNext" }] : []));
|
|
15
|
+
api = null;
|
|
16
|
+
class = computed(() => cn('relative', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
17
|
+
constructor() {
|
|
18
|
+
afterNextRender(() => {
|
|
19
|
+
const viewportEl = this.viewport()?.viewportElement();
|
|
20
|
+
if (!viewportEl)
|
|
21
|
+
return;
|
|
22
|
+
const opts = {
|
|
23
|
+
...this.options(),
|
|
24
|
+
axis: (this.orientation() === 'horizontal' ? 'x' : 'y'),
|
|
25
|
+
};
|
|
26
|
+
this.api = EmblaCarousel(viewportEl, opts, this.plugins());
|
|
27
|
+
this.updateScrollState();
|
|
28
|
+
this.api.on('select', () => this.updateScrollState());
|
|
29
|
+
this.api.on('reInit', () => this.updateScrollState());
|
|
30
|
+
this.destroyRef.onDestroy(() => {
|
|
31
|
+
this.api?.destroy();
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
scrollPrev() {
|
|
36
|
+
this.api?.scrollPrev();
|
|
37
|
+
}
|
|
38
|
+
scrollNext() {
|
|
39
|
+
this.api?.scrollNext();
|
|
40
|
+
}
|
|
41
|
+
updateScrollState() {
|
|
42
|
+
if (!this.api)
|
|
43
|
+
return;
|
|
44
|
+
this.canScrollPrev.set(this.api.canScrollPrev());
|
|
45
|
+
this.canScrollNext.set(this.api.canScrollNext());
|
|
46
|
+
}
|
|
47
|
+
onKeyDown(event) {
|
|
48
|
+
if (event.key === 'ArrowLeft') {
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
this.scrollPrev();
|
|
51
|
+
}
|
|
52
|
+
else if (event.key === 'ArrowRight') {
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
this.scrollNext();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
58
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.4", type: ScCarousel, isStandalone: true, selector: "div[sc-carousel]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel", "role": "region", "aria-roledescription": "carousel" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "class()" } }, queries: [{ propertyName: "viewport", first: true, predicate: ScCarouselViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
59
|
+
<ng-content />
|
|
60
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
61
|
+
}
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScCarousel, decorators: [{
|
|
63
|
+
type: Component,
|
|
64
|
+
args: [{
|
|
65
|
+
selector: 'div[sc-carousel]',
|
|
66
|
+
template: `
|
|
67
|
+
<ng-content />
|
|
68
|
+
`,
|
|
69
|
+
host: {
|
|
70
|
+
'data-slot': 'carousel',
|
|
71
|
+
role: 'region',
|
|
72
|
+
'aria-roledescription': 'carousel',
|
|
73
|
+
'[class]': 'class()',
|
|
74
|
+
'(keydown)': 'onKeyDown($event)',
|
|
75
|
+
},
|
|
76
|
+
encapsulation: ViewEncapsulation.None,
|
|
77
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
78
|
+
}]
|
|
79
|
+
}], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], viewport: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScCarouselViewport), { isSignal: true }] }] } });
|
|
80
|
+
//# sourceMappingURL=carousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../../../../../libs/carousel/src/lib/components/carousel/carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n input,\n signal,\n ViewEncapsulation,\n DestroyRef,\n inject,\n afterNextRender,\n} from '@angular/core';\nimport EmblaCarousel, {\n type EmblaCarouselType,\n EmblaOptionsType,\n EmblaPluginType,\n} from 'embla-carousel';\nimport { cn } from '@semantic-components/ui';\nimport { ScCarouselViewport } from './carousel-viewport';\n\nexport type ScCarouselOrientation = 'horizontal' | 'vertical';\nexport type ScCarouselApi = EmblaCarouselType;\nexport type ScCarouselOptions = EmblaOptionsType;\nexport type ScCarouselPlugin = EmblaPluginType;\n\n@Component({\n selector: 'div[sc-carousel]',\n template: `\n <ng-content />\n `,\n host: {\n 'data-slot': 'carousel',\n role: 'region',\n 'aria-roledescription': 'carousel',\n '[class]': 'class()',\n '(keydown)': 'onKeyDown($event)',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScCarousel {\n private readonly destroyRef = inject(DestroyRef);\n\n readonly classInput = input<string>('', { alias: 'class' });\n readonly orientation = input<ScCarouselOrientation>('horizontal');\n readonly options = input<ScCarouselOptions>({});\n readonly plugins = input<ScCarouselPlugin[]>([]);\n\n private readonly viewport = contentChild(ScCarouselViewport);\n\n readonly canScrollPrev = signal(false);\n readonly canScrollNext = signal(false);\n\n private api: ScCarouselApi | null = null;\n\n protected readonly class = computed(() => cn('relative', this.classInput()));\n\n constructor() {\n afterNextRender(() => {\n const viewportEl = this.viewport()?.viewportElement();\n if (!viewportEl) return;\n\n const opts = {\n ...this.options(),\n axis: (this.orientation() === 'horizontal' ? 'x' : 'y') as 'x' | 'y',\n };\n\n this.api = EmblaCarousel(viewportEl, opts, this.plugins());\n\n this.updateScrollState();\n\n this.api.on('select', () => this.updateScrollState());\n this.api.on('reInit', () => this.updateScrollState());\n\n this.destroyRef.onDestroy(() => {\n this.api?.destroy();\n });\n });\n }\n\n scrollPrev(): void {\n this.api?.scrollPrev();\n }\n\n scrollNext(): void {\n this.api?.scrollNext();\n }\n\n private updateScrollState(): void {\n if (!this.api) return;\n this.canScrollPrev.set(this.api.canScrollPrev());\n this.canScrollNext.set(this.api.canScrollNext());\n }\n\n protected onKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.scrollPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.scrollNext();\n }\n }\n}\n"]}
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
export { ScCarousel } from './carousel';
|
|
2
|
-
export type {
|
|
3
|
-
ScCarouselOrientation,
|
|
4
|
-
ScCarouselOptions,
|
|
5
|
-
ScCarouselApi,
|
|
6
|
-
ScCarouselPlugin,
|
|
7
|
-
} from './carousel';
|
|
8
2
|
export { ScCarouselViewport } from './carousel-viewport';
|
|
9
3
|
export { ScCarouselTrack } from './carousel-track';
|
|
10
4
|
export { ScCarouselItem } from './carousel-item';
|
|
11
5
|
export { ScCarouselPrevious } from './carousel-previous';
|
|
12
6
|
export { ScCarouselNext } from './carousel-next';
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/carousel/src/lib/components/carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAOxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { ScCarousel } from './carousel';\nexport type {\n ScCarouselOrientation,\n ScCarouselOptions,\n ScCarouselApi,\n ScCarouselPlugin,\n} from './carousel';\nexport { ScCarouselViewport } from './carousel-viewport';\nexport { ScCarouselTrack } from './carousel-track';\nexport { ScCarouselItem } from './carousel-item';\nexport { ScCarouselPrevious } from './carousel-previous';\nexport { ScCarouselNext } from './carousel-next';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/carousel/src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './carousel';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"semantic-components-carousel.js","sourceRoot":"","sources":["../../../../libs/carousel/src/semantic-components-carousel.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class ScCarouselItem {
|
|
3
|
+
private readonly carousel;
|
|
4
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
5
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScCarouselItem, never>;
|
|
7
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ScCarouselItem, "div[sc-carousel-item]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
8
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ScCarousel } from './carousel';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class ScCarouselNext {
|
|
4
|
+
readonly carousel: ScCarousel;
|
|
5
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
6
|
+
readonly variant: import("@angular/core").InputSignal<"default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined>;
|
|
7
|
+
readonly size: import("@angular/core").InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
|
|
8
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
9
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScCarouselNext, never>;
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ScCarouselNext, "button[sc-carousel-next]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
11
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ScCarousel } from './carousel';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class ScCarouselPrevious {
|
|
4
|
+
readonly carousel: ScCarousel;
|
|
5
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
6
|
+
readonly variant: import("@angular/core").InputSignal<"default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined>;
|
|
7
|
+
readonly size: import("@angular/core").InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
|
|
8
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
9
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScCarouselPrevious, never>;
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ScCarouselPrevious, "button[sc-carousel-previous]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
11
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class ScCarouselTrack {
|
|
3
|
+
private readonly carousel;
|
|
4
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
5
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScCarouselTrack, never>;
|
|
7
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ScCarouselTrack, "div[sc-carousel-track]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
8
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class ScCarouselViewport {
|
|
3
|
+
private readonly elementRef;
|
|
4
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
5
|
+
readonly viewportElement: import("@angular/core").Signal<any>;
|
|
6
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScCarouselViewport, never>;
|
|
8
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ScCarouselViewport, "div[sc-carousel-viewport]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
9
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export type ScCarouselOrientation = 'horizontal' | 'vertical';
|
|
4
|
+
export type ScCarouselApi = EmblaCarouselType;
|
|
5
|
+
export type ScCarouselOptions = EmblaOptionsType;
|
|
6
|
+
export type ScCarouselPlugin = EmblaPluginType;
|
|
7
|
+
export declare class ScCarousel {
|
|
8
|
+
private readonly destroyRef;
|
|
9
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
10
|
+
readonly orientation: import("@angular/core").InputSignal<ScCarouselOrientation>;
|
|
11
|
+
readonly options: import("@angular/core").InputSignal<Partial<import("node_modules/embla-carousel/esm/components/Options").OptionsType>>;
|
|
12
|
+
readonly plugins: import("@angular/core").InputSignal<import("embla-carousel").CreatePluginType<import("node_modules/embla-carousel/esm/components/Plugins").LoosePluginType, {}>[]>;
|
|
13
|
+
private readonly viewport;
|
|
14
|
+
readonly canScrollPrev: import("@angular/core").WritableSignal<boolean>;
|
|
15
|
+
readonly canScrollNext: import("@angular/core").WritableSignal<boolean>;
|
|
16
|
+
private api;
|
|
17
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
18
|
+
constructor();
|
|
19
|
+
scrollPrev(): void;
|
|
20
|
+
scrollNext(): void;
|
|
21
|
+
private updateScrollState;
|
|
22
|
+
protected onKeyDown(event: KeyboardEvent): void;
|
|
23
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScCarousel, never>;
|
|
24
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ScCarousel, "div[sc-carousel]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, ["viewport"], ["*"], true, never>;
|
|
25
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { ScCarousel } from './carousel';
|
|
2
|
+
export type { ScCarouselOrientation, ScCarouselOptions, ScCarouselApi, ScCarouselPlugin, } from './carousel';
|
|
3
|
+
export { ScCarouselViewport } from './carousel-viewport';
|
|
4
|
+
export { ScCarouselTrack } from './carousel-track';
|
|
5
|
+
export { ScCarouselItem } from './carousel-item';
|
|
6
|
+
export { ScCarouselPrevious } from './carousel-previous';
|
|
7
|
+
export { ScCarouselNext } from './carousel-next';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semantic-components/carousel",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.65.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -14,8 +14,22 @@
|
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
16
|
"@angular/core": ">=21.1.0",
|
|
17
|
-
"@semantic-components/ui": "0.
|
|
17
|
+
"@semantic-components/ui": "0.65.0",
|
|
18
18
|
"embla-carousel": ">=8.6.0"
|
|
19
19
|
},
|
|
20
|
-
"sideEffects": false
|
|
20
|
+
"sideEffects": false,
|
|
21
|
+
"module": "esm2022/semantic-components-carousel.js",
|
|
22
|
+
"typings": "semantic-components-carousel.d.ts",
|
|
23
|
+
"exports": {
|
|
24
|
+
"./package.json": {
|
|
25
|
+
"default": "./package.json"
|
|
26
|
+
},
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./semantic-components-carousel.d.ts",
|
|
29
|
+
"default": "./esm2022/semantic-components-carousel.js"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"tslib": "^2.3.0"
|
|
34
|
+
}
|
|
21
35
|
}
|
package/eslint.config.mjs
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import nx from '@nx/eslint-plugin';
|
|
2
|
-
import baseConfig from '../../eslint.config.mjs';
|
|
3
|
-
|
|
4
|
-
export default [
|
|
5
|
-
...baseConfig,
|
|
6
|
-
{
|
|
7
|
-
files: ['**/*.json'],
|
|
8
|
-
rules: {
|
|
9
|
-
'@nx/dependency-checks': [
|
|
10
|
-
'error',
|
|
11
|
-
{
|
|
12
|
-
ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}'],
|
|
13
|
-
},
|
|
14
|
-
],
|
|
15
|
-
},
|
|
16
|
-
languageOptions: {
|
|
17
|
-
parser: await import('jsonc-eslint-parser'),
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
...nx.configs['flat/angular'],
|
|
21
|
-
...nx.configs['flat/angular-template'],
|
|
22
|
-
{
|
|
23
|
-
files: ['**/*.ts'],
|
|
24
|
-
rules: {
|
|
25
|
-
'@angular-eslint/directive-selector': [
|
|
26
|
-
'error',
|
|
27
|
-
{
|
|
28
|
-
type: 'attribute',
|
|
29
|
-
prefix: 'sc',
|
|
30
|
-
style: 'camelCase',
|
|
31
|
-
},
|
|
32
|
-
],
|
|
33
|
-
'@angular-eslint/component-selector': [
|
|
34
|
-
'error',
|
|
35
|
-
{
|
|
36
|
-
type: 'element',
|
|
37
|
-
prefix: 'sc',
|
|
38
|
-
style: 'kebab-case',
|
|
39
|
-
},
|
|
40
|
-
],
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
files: ['**/*.html'],
|
|
45
|
-
// Override or add rules here
|
|
46
|
-
rules: {},
|
|
47
|
-
},
|
|
48
|
-
];
|
package/ng-package.json
DELETED
package/project.json
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "carousel",
|
|
3
|
-
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
4
|
-
"sourceRoot": "libs/carousel/src",
|
|
5
|
-
"prefix": "sc",
|
|
6
|
-
"projectType": "library",
|
|
7
|
-
"tags": [],
|
|
8
|
-
"targets": {
|
|
9
|
-
"build": {
|
|
10
|
-
"executor": "@nx/angular:ng-packagr-lite",
|
|
11
|
-
"outputs": ["{workspaceRoot}/dist/{projectRoot}"],
|
|
12
|
-
"options": {
|
|
13
|
-
"project": "libs/carousel/ng-package.json",
|
|
14
|
-
"tsConfig": "libs/carousel/tsconfig.lib.json"
|
|
15
|
-
},
|
|
16
|
-
"configurations": {
|
|
17
|
-
"production": {
|
|
18
|
-
"tsConfig": "libs/carousel/tsconfig.lib.prod.json"
|
|
19
|
-
},
|
|
20
|
-
"development": {}
|
|
21
|
-
},
|
|
22
|
-
"defaultConfiguration": "production"
|
|
23
|
-
},
|
|
24
|
-
"lint": {
|
|
25
|
-
"executor": "@nx/eslint:lint"
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|