Introduction Foundations Components Directives Pipes Motion Brand

Ai

Cards

Controls

Freelancer domain

Modals

Structure

Text & links

Service offering carousel

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

Contents

Default Edit mode

Health Potions.

Potions to heal your wounds

Health Potions

Potions to heal your wounds

Shopfront service card media

Potion

$5

Shopfront service card media

Regen per hour

$15

/ hour

Shopfront service card media

Regen per week

$100 / week

Shopfront service card media

Regen per month

$350 / month

Shopfront service card media

Regen per year

$1,000 / year

Shopfront service card media

Potion with discounted price

$100

$80

Shopfront service card media

Regen per hour discounted price

$15

$12

/ hour

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>()