name: JL News Ticker
description: Create a news ticker.
type: particle
icon: fa-joomla
form:
  overrideable: false
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable particle.
      default: true
    _tabs:
      type: container.tabs
      fields:
        _tab_articles:
          label: Articles
          overridable: false
          fields:
            title_text:
              type: input.text
              label: Title Text
              description: Customize the title text.
              default: Latest News          
            article.filter.categories:
              type: joomla.categories
              label: Categories
              description: Select the categories the articles should be taken from.
              overridable: false

            article.filter.articles:
              type: input.text
              label: Articles
              description: 'Enter the Joomla articles that should be shown. It should be a list of article IDs separated with a comma (i.e. 1,2,3,4,5).'
              overridable: false

            article.filter.featured:
              type: select.select
              label: Featured Articles
              description: Select how Featured articles should be filtered.
              default: ''
              options:
                include: Include Featured
                exclude: Exclude Featured
                only: Only Featured
              overridable: false

            article.limit.total:
              type: input.text
              label: Number of Articles
              description: Enter the maximum number of articles to display.
              default: 5
              pattern: '\d{1,2}'
              overridable: false

            article.limit.start:
              type: input.text
              label: Start From
              description: Enter offset specifying the first article to return. The default is '0' (the first article).
              default: 0
              pattern: '\d{1,2}'
              overridable: false

            article.sort.orderby:
              type: select.select
              label: Order By
              description: Select how the articles should be ordered by.
              default: publish_up
              options:
                publish_up: Published Date
                created: Created Date
                modified: Last Modified Date
                title: Title
                ordering: Ordering
                hits: Hits
                id: ID
                alias: Alias
              overridable: false

            article.sort.ordering:
              type: select.select
              label: Ordering Direction
              description: Select the direction the articles should be ordered by.
              default: ASC
              options:
                ASC: Ascending
                DESC: Descending
              overridable: false
            class:
              type: input.selectize
              label: CSS Classes
              description: CSS class name for the particle.
            extra:
              type: collection.keyvalue
              label: Tag Attributes
              description: Extra Tag attributes.
              key_placeholder: Key (data-*, style, ...)
              value_placeholder: Value
              exclude: ['id', 'class']              
        _tab_display:
          label: Display
          fields:
            article.display.text.type:
              type: select.select
              label: Article Text
              description: Select if and how the article text should be shown.
              default: ''
              options:
                intro: Introduction
                full: Full Article
                '': Hide

            article.display.text.limit:
              type: input.text
              label: Text Limit
              description: Type in the number of characters the article text should be limited to.
              default: '100'
              pattern: '\d+'

            article.display.text.formatting:
              type: select.select
              label: Text Formatting
              description: Select the formatting you want to use to display the article text.
              default: text
              options:
                text: Plain Text
                html: HTML
            link_content:
              type: input.checkbox
              label: Link Content
              description: Link the content if a link exists.
              default: true
            article.display.text.prepare:
              type: input.checkbox
              label: Prepare Content
              description: Use Joomla Content Plugins
              default: false

            article.display.edit:
              type: input.checkbox
              label: Show Edit Link
              description: Display a link to the article edit form
              default: false

            article.display.title.enabled:
              type: select.select
              label: Title
              description: Select if the article title should be shown.
              default: show
              options:
                show: Show
                '': Hide

            article.display.title.limit:
              type: input.text
              label: Title Limit
              description: Enter the maximum number of characters the article title should be limited to.
              pattern: '\d+(\.\d+){0,1}'
            link_title:
              type: input.checkbox
              label: Link title
              description: Link the title if a link exists.
              default: true
            title_hover:
              type: select.selectize
              label: Hover Style
              description: Set the hover style for a linked title. Enable link title to use this option.
              default: reset
              selectize:
                  allowEmptyOption: true              
              options:
                 reset: None
                 heading: Heading
                 '': Default Link
            article.display.date.enabled:
              type: select.select
              label: Date
              description: Select if the article date should be shown.
              default: published
              options:
                created: Show Created Date
                published: Show Published Date
                modified: Show Modified Date
                '': Hide

            article.display.date.format:
              type: select.date
              label: Date Format
              description: Select preferred date format. Leave empty not to display a date.
              default: 'l, F d, Y'
              selectize:
                  allowEmptyOption: true
              options:
                  'l, F d, Y': Date1
                  'l, d F': Date2
                  'D, d F': Date3
                  'F d': Date4
                  'd F': Date5
                  'd M': Date6
                  'D, M d, Y': Date7
                  'D, M d, y': Date8
                  'l': Date9
                  'l j F Y': Date10
                  'j F Y': Date11
                  'F d, Y': Date12
            linktarget:
              type: select.selectize
              label: Link Target
              description: Target browser window when item is clicked.
              placeholder: 'Select...'
              default: _self
              options:
                  _self: Self
                  _blank: New Window
        _tab_style:
          label: Style
          fields:
            card_settings:
              type: separator.note
              class: alert alert-info
              content: 'Title Layout'
            title_grid_width:
              type: select.select
              label: Grid Width
              description: Define the width of the ticker within the grid.
              default: auto
              options:
                auto: Auto
                1-2: 50%
                1-3: 33%
                1-4: 25%
                1-5: 20%
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
                xxlarge: XX-Large
            title_grid_gutter:
              type: select.select
              label: Grid Gutter
              description: Select the gutter width between the ticker content and title.
              default: collapse
              options:
                small: Small
                medium: Medium
                default: Default
                large: Large
                collapse: Collapse
            title_grid_breakpoint:
              type: select.select
              label: Grid Breakpoint
              description: Set the breakpoint from which grid cells will stack.
              default: m
              options:
                default: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
            title_vertical_alignment:
              type: input.checkbox
              label: Vertical Alignment
              description: Vertically center grid cells.
              default: false
            title_alignment:
              type: select.select
              label: Alignment
              description: Align the title to the left, right.
              default: left
              options:
                left: Left
                right: Right
            title_backgroundcolor:
              type: input.colorpicker
              label: Background
              description: Customize the title background color.
            title_color:
              type: input.colorpicker
              label: Color
              description: Customize the title color.
            title_fontsize:
              type: input.number
              label: Font Size
              min: 0
              description: Customize the title text font size.
            title_text_transform:
              type: select.select
              label: Transform
              description: The following options will transform text into uppercased, capitalized or lowercased characters.
              default: ''
              options:
                 '': Inherit
                 uppercase: Uppercase
                 capitalize: Capitalize
                 lowercase: Lowercase
            content_settings:
              type: separator.note
              class: alert alert-info
              content: 'Common Style Settings'
            box_shadow:
              type: select.select
              label: Box Shadow
              description: Select the ticker's box shadow size.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
            box_shadow_hover:
              type: select.select
              label: Hover Box Shadow
              description: Select the ticker's box shadow size on hover.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
            extra_shadow:
              type: input.checkbox
              label: Extra Bottom Shadow
              default: false
            padding:
              type: input.number
              label: Padding
              description: Add spacing between elements and their content.
              min: 0
            news_ticker_settings:
              type: separator.note
              class: alert alert-info
              content: 'News Ticker Settings'
            card_style:
              type: select.select
              label: Background
              description: Select one of the boxed card styles or a blank panel.
              default: primary
              options:
                blank: None
                default: Default
                primary: Primary
                secondary: Secondary
                hover: Hover
            cardsize:
              type: select.select
              label: Content Size
              description: Define the card's size by selecting the padding between the card and its content.
              default: small
              options:
                default: Default
                small: Small
                large: Large
            content_backgroundcolor:
              type: input.colorpicker
              label: Customize Background
              description: Customize the title background color.
            subtitle_color:
              type: input.colorpicker
              label: Content Color
              description: Customize the content color.
            subtitle_fontsize:
              type: input.number
              label: Content Font Size
              min: 0
              description: Customize the content font size.
        _tab_settings:
          label: Slider
          fields:
            slider_gutter:
              type: select.select
              label: Column Gap
              description: Set the size of the gap between the grid columns.
              default: default
              options:
                small: Small
                medium: Medium
                default: Default
                large: Large
                collapse: Collapse
            slider_divider:
              type: select.select
              label: Show dividers
              description: Display dividers between grid cells.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_animation_info:
              type: separator.note
              class: alert alert-info
              content: 'Animation'
            slider_animation_set:
              type: select.select
              label: Set
              description: Slide all visible items at once. Group items into sets. The number of items within a set depends on the defined item width, e.g. 33% means that each set contains 3 items.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_animation_center:
              type: select.select
              label: Center
              description: Center the active slide
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_animation_finite:
              type: select.select
              label: Finite
              description: Disable infinite scrolling
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_velocity:
              type: input.number
              label: Velocity
              description: Set the velocity in pixels per millisecond. Min 20, Max 300
              min: 20
              max: 300
            slider_animation_autoplay:
              type: select.select
              label: Autoplay
              description: Enable autoplay for carousel items.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slider_pause_onhover:
              type: select.select
              label: Pause On Hover
              description: Pause autoplay on hover.
              default: enabled
              options:
                enabled: Enable
                disabled: Disable
            slider_animation_interval:
              type: input.number
              label: Interval
              description: Set the autoplay interval in seconds. Min 5 Max 15.
              min: 5
              max: 15
              placeholder: 7
            column_info:
              type: separator.note
              class: alert alert-info
              content: 'Item Width - You need to set the Item Width Mode to FIXED mode.'
            phone_portrait:
              type: select.select
              label: Phone Portrait
              description: Set the item width for each breakpoint. Inherit refers to the item width of the next smaller screen size.
              default: 1-1
              options:
                1-1: 100%
                5-6: 83%
                4-5: 80%
                3-5: 60%
                1-2: 50%
                1-3: 33%
                1-4: 25%
                1-5: 20%
                1-6: 16%
            phone_landscape:
              type: select.select
              label: Phone Landscape
              description: Set the item width for each breakpoint. Inherit refers to the item width of the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1-1: 100%
                5-6: 83%
                4-5: 80%
                3-5: 60%
                1-2: 50%
                1-3: 33%
                1-4: 25%
                1-5: 20%
                1-6: 16%
            tablet_landscape:
              type: select.select
              label: Tablet Landscape
              description: Set the item width for each breakpoint. Inherit refers to the item width of the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1-1: 100%
                5-6: 83%
                4-5: 80%
                3-5: 60%
                1-2: 50%
                1-3: 33%
                1-4: 25%
                1-5: 20%
                1-6: 16%
            desktop:
              type: select.select
              label: Desktop
              description: Set the item width for each breakpoint. Inherit refers to the item width of the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1-1: 100%
                5-6: 83%
                4-5: 80%
                3-5: 60%
                1-2: 50%
                1-3: 33%
                1-4: 25%
                1-5: 20%
                1-6: 16%
            large_desktop:
              type: select.select
              label: Large Screens
              description: Set the item width for each breakpoint. Inherit refers to the item width of the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1-1: 100%
                5-6: 83%
                4-5: 80%
                3-5: 60%
                1-2: 50%
                1-3: 33%
                1-4: 25%
                1-5: 20%
                1-6: 16%
            slidenav_info:
              type: separator.note
              class: alert alert-info
              content: 'Slidenav'
            slidenav_position:
              type: select.select
              label: Position
              description: Select the position of the slidenav.
              default: center-right
              options:
                none: None
                default: Default
                center-left: Center Left
                center-right: Center Right
            slidenav_hover:
              type: select.select
              label: Show On Hover
              description: Show the slide nav on hover only.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            slidenav_margin:
              type: select.select
              label: Margin
              description: Set the vertical margin.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
            slidenav_breakpoint:
              type: select.select
              label: Breakpoint
              description: Display the slidenav only on this device width and larger.
              default: s
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            slidenav_color:
              type: select.select
              label: Color
              description: Set light or dark color mode.
              default: default
              options:
                default: None
                light: Light
                dark: Dark
            slidenav_icon_info:
              type: separator.note
              content: 'Custom previous/next icons (replace default Slidenav navigation)'                
            slidenav_icon_left:
              type: input.icon
              label: Previous Icon
            slidenav_icon_right:
              type: input.icon
              label: Next Icon
        _tab_general:
          label: General
          fields:
            particle_title_info:
              type: separator.note
              class: alert alert-info
              content: 'Particle Title Style'
            particle_title:
              type: input.text
              label: Title
              description: Add an optional particle title.
              placeholder: Enter particle title
            particle_title_style:
              type: select.select
              label: Style
              description: Title styles differ in font-size but may also come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            particle_title_decoration:
              type: select.select
              label: Decoration
              description: Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
              default: none
              options:
                 none: None
                 divider: Divider
                 bullet: Bullet
                 line: Line
            particle_title_align:
              type: select.select
              label: Alignment
              description: Center, left and right alignment for Particle title.
              default: inherit
              options:
                  inherit: Inherit
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            particle_predefined_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            particle_title_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the title color instead using predefined color mode. Set the Predefined color to None before using this color customization mode.
            particle_title_fontsize:
              type: input.number
              label: Font Size
              description: Customize the particle title font size.
              min: 0
            particle_title_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            general_content_info:
              type: separator.note
              class: alert alert-info
              content: 'General Particle Settings'
            align:
              type: select.select
              label: Text Alignment
              description: Center, left and right alignment may depend on a breakpoint and require a fallback.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            breakpoint:
              type: select.select
              label: Alignment Breakpoint
              description: Define the device width from which the alignment will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            fallback:
              type: select.select
              label: Alignment Fallback
              description: Define an alignment fallback for device widths below the breakpoint.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            g_maxwidth:
              type: select.select
              label: Max Width
              description: Set the maximum content width.
              default: inherit
              options:
                  inherit: None
                  small: Small
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  xxlarge: XX-Large
            g_maxwidth_alignment:
              type: select.select
              label: Max Width Alignment
              description: Define the alignment in case the container exceeds the element's max-width.
              default: left
              options:
                  left: Left
                  center: Center
                  right: Right
            g_maxwidth_breakpoint:
              type: select.select
              label: Max Width Breakpoint
              description: Define the device width from which the element's max-width will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            margin:
              type: select.select
              label: Margin
              description: Set the vertical margin.
              default: inherit
              options:
                  inherit: Keep existing
                  small: Small
                  default: Default
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  remove-vertical: None
            visibility:
              type: select.select
              label: Visibility
              description: Display the element only on this device width and larger.
              default: inherit
              options:
                  inherit: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            general_animation_info:
              type: separator.note
              class: alert alert-info
              content: 'Animation Settings'
            animation:
              type: select.select
              label: Animation
              description: Apply an animation to particles once they enter the viewport. This will animate all particles inside the section.
              default: inherit
              options:
                  inherit: None
                  fade: Fade
                  scale-up: Scale Up
                  scale-down: Scale Down
                  slide-top-small: Slide Top Small
                  slide-bottom-small: Slide Bottom Small
                  slide-left-small: Slide Left Small
                  slide-right-small: Slide Right Small
                  slide-top-medium: Slide Top Medium
                  slide-bottom-medium: Slide Bottom Medium
                  slide-left-medium: Slide Left Medium
                  slide-right-medium: Slide Right Medium
                  slide-top: Slide Top 100%
                  slide-bottom: Slide Bottom 100%
                  slide-left: Slide Left 100%
                  slide-right: Slide Right 100%
            animation_delay:
              type: input.number
              label: Animation Delay
              description: Set the delay animations for particle. Delay time in ms.
              min: 0
              placeholder: 200
            animation_repeat:
              type: select.select
              label: Animation Repeat
              description: Repeat an animation to particle once it enter the viewport.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
    copyright:
      type: separator.note
      class: alert alert-success
      content: 'JL News Ticker <strong>Version: 2.1.3</strong> Copyright (C) <a href="https://joomlead.com/" target="_blank">https://joomlead.com</a> | <a href="https://joomlead.com/g5/docs/news-ticker-particle-documentation/" target="_blank">Documentation</a>'
