Service offering carousel

Carousel with custom layout and action options for service offerings and their categories

Contents

Default

Edit mode

isCategoryEditMode=true and isServiceEditMode=true: with categories and services

Potion

Super Potion

$20

Hyper Potion

$50

Max Potion

$100

Full Restore

$300

Add a service

isCategoryEditMode=true and isServiceEditMode=true: empty state

Add a service

isCategoryEditMode=false and isServiceEditMode=false

Health Potions.

Potions to heal your wounds

Health Potions

Potions to heal your wounds

Potion

Super Potion

$20

Hyper Potion

$50

Max Potion

$100

Full Restore

$300

Inputs

isCategoryEditMode : boolean

Sets category name and description to be input fields

isLoading : boolean

Sets the carousel to a loading state. This will override the header and cards.

isServiceEditMode : boolean

Sets service card to be editable. Possible actions depend on serviceActionOptions

category ?: ServiceOfferingShopCategory

categoryDescriptionPlaceholder ?: any = $localize`Describe your shop category here`

categoryForm ?: FormGroup<FormGroupTypeOf<CarouselHeaderFormType>>

categoryNamePlaceholder ?: any = $localize`Name your shop category here`

fromUrl ?: string

hideUsername ?: boolean = false

Hides the usernames shown on the service offering cards. Only works when passing in `ServiceOfferingWithOwnerDetails`.

peekSlideWidth ?: number = 0.3

Defines the width of the peeking slide as a fraction of the slide width. Values should be between 0 to 1. By default, 50% (0.5) of the peeking slide is visible.

serviceActionOptions ?: CategoryServiceActionOptions = defaultActionOptions

Determine what service-related actions can be done

services ?: readonly ServiceOfferingShopCategoryService[] | readonly ServiceOfferingWithOwnerDetails[] = []

showPeekSlide ?: boolean = true

Determines if a portion of the next slide should be visible. This is applied only when CarouselScrollBehaviour is FREE. If true, a part of the nth slide (where n is the number of slides to show) will be visible.

showSeeMoreCard ?: boolean = false

Toggles the See More card at the end of the carousel. Used for linking to the Services Landing Page.

slidesToShow ?: number = 2

Number of slides visible on mobile to larger screen sizes

slidesToShowDesktop ?: number = 5

Number of slides visible on desktop to larger screen sizes

slidesToShowDesktopLarge ?: number

Number of slides visible on desktop large to larger screen sizes

slidesToShowDesktopXLarge ?: number

Number of slides visible on desktop xlarge to larger screen sizes

slidesToShowDesktopXXLarge ?: number

Number of slides visible on desktop xxlarge to larger screen sizes

slidesToShowTablet ?: number = 3

Number of slides visible on tablet to larger screen sizes

trackingSection ?: string = 'ServiceOfferingCarousel'

Tracking Section to use. Defaults to `ServiceOfferingCarousel`.

useSmallerPriceSize ?: boolean = false

Use a smaller price size font

Outputs

addService ?: any = new EventEmitter<void>()

editService ?: any = new EventEmitter<ServiceOfferingShopCategoryService>()

exitEditCategory ?: any = new EventEmitter< ServiceOfferingShopCategory | undefined >()

removeService ?: any = new EventEmitter<ServiceOfferingShopCategoryService>()

saveCategory ?: any = new EventEmitter<CategorySaveEvent>()

toggleServiceVisibility ?: any = new EventEmitter<ServiceOfferingShopCategoryService>()

Ai

Cards

Controls

Freelancer domain

Modals