startControlsSection( 'section_icon', [ 'label' => __('Icon List'), ] ); $this->addControl( 'view', [ 'label' => __('Layout'), 'type' => ControlsManager::CHOOSE, 'default' => 'traditional', 'options' => [ 'traditional' => [ 'title' => __('Default'), 'icon' => 'eicon-editor-list-ul', ], 'inline' => [ 'title' => __('Inline'), 'icon' => 'eicon-ellipsis-h', ], ], 'render_type' => 'template', 'classes' => 'elementor-control-start-end', 'style_transfer' => true, 'prefix_class' => 'elementor-icon-list--layout-', ] ); $repeater = new Repeater(); $repeater->addControl( 'text', [ 'label' => __('Text'), 'type' => ControlsManager::TEXT, 'label_block' => true, 'placeholder' => __('List Item'), 'default' => __('List Item'), 'dynamic' => [ 'active' => true, ], ] ); $repeater->addControl( 'selected_icon', [ 'label' => __('Icon'), 'type' => ControlsManager::ICONS, 'default' => [ 'value' => 'fas fa-check', 'library' => 'fa-solid', ], 'fa4compatibility' => 'icon', ] ); $repeater->addControl( 'link', [ 'label' => __('Link'), 'type' => ControlsManager::URL, 'dynamic' => [ 'active' => true, ], 'placeholder' => __('https://your-link.com'), ] ); $this->addControl( 'icon_list', [ 'type' => ControlsManager::REPEATER, 'fields' => $repeater->getControls(), 'default' => [ [ 'text' => __('List Item #1'), 'selected_icon' => [ 'value' => 'fas fa-check', 'library' => 'fa-solid', ], ], [ 'text' => __('List Item #2'), 'selected_icon' => [ 'value' => 'fas fa-xmark', 'library' => 'fa-solid', ], ], [ 'text' => __('List Item #3'), 'selected_icon' => [ 'value' => 'far fa-circle-dot', 'library' => 'fa-regular', ], ], ], 'title_field' => '{{{ elementor.helpers.renderIcon( this, selected_icon, {}, "i", "panel" ) || \'\' }}} {{{ text }}}', ] ); $this->endControlsSection(); $this->startControlsSection( 'section_icon_list', [ 'label' => __('List'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addResponsiveControl( 'space_between', [ 'label' => __('Space Between'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'max' => 50, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child)' => 'padding-bottom: calc({{SIZE}}{{UNIT}}/2)', '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child)' => 'margin-top: calc({{SIZE}}{{UNIT}}/2)', '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item' => 'margin-right: calc({{SIZE}}{{UNIT}}/2); margin-left: calc({{SIZE}}{{UNIT}}/2)', '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items' => 'margin-right: calc(-{{SIZE}}{{UNIT}}/2); margin-left: calc(-{{SIZE}}{{UNIT}}/2)', 'body.lang-rtl {{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after' => 'left: calc(-{{SIZE}}{{UNIT}}/2)', 'body:not(.lang-rtl) {{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after' => 'right: calc(-{{SIZE}}{{UNIT}}/2)', ], ] ); $this->addResponsiveControl( 'icon_align', [ 'label' => __('Alignment'), 'type' => ControlsManager::CHOOSE, 'options' => [ 'left' => [ 'title' => __('Left'), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => __('Center'), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => __('Right'), 'icon' => 'eicon-h-align-right', ], ], 'prefix_class' => 'elementor%s-align-', ] ); $text_columns = range(1, 10); $text_columns = array_combine($text_columns, $text_columns); $text_columns[''] = __('Default'); $this->addResponsiveControl( 'columns', [ 'label' => __('Columns'), 'type' => ControlsManager::SELECT, 'separator' => 'before', 'options' => &$text_columns, 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-items' => 'columns: {{VALUE}};', ], 'condition' => [ 'view!' => 'inline', ], ] ); $this->addResponsiveControl( 'column_gap', [ 'label' => __('Columns Gap'), 'type' => ControlsManager::SLIDER, 'size_units' => ['px', '%', 'em', 'vw'], 'range' => [ 'px' => [ 'max' => 100, ], '%' => [ 'max' => 10, 'step' => 0.1, ], 'vw' => [ 'max' => 10, 'step' => 0.1, ], 'em' => [ 'max' => 10, 'step' => 0.1, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-items' => 'column-gap: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'view!' => 'inline', ], ] ); $this->addControl( 'divider', [ 'label' => __('Divider'), 'type' => ControlsManager::SWITCHER, 'label_off' => __('Off'), 'label_on' => __('On'), 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'content: ""', ], 'separator' => 'before', ] ); $this->addControl( 'divider_style', [ 'label' => __('Style'), 'type' => ControlsManager::SELECT, 'options' => [ 'solid' => __('Solid'), 'double' => __('Double'), 'dotted' => __('Dotted'), 'dashed' => __('Dashed'), ], 'default' => 'solid', 'condition' => [ 'divider' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-top-style: {{VALUE}}', '{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-left-style: {{VALUE}}', ], ] ); $this->addControl( 'divider_weight', [ 'label' => __('Weight'), 'type' => ControlsManager::SLIDER, 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 20, ], ], 'condition' => [ 'divider' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-top-width: {{SIZE}}{{UNIT}}', '{{WRAPPER}} .elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-left-width: {{SIZE}}{{UNIT}}', ], ] ); $this->addControl( 'divider_width', [ 'label' => __('Width'), 'type' => ControlsManager::SLIDER, 'default' => [ 'unit' => '%', ], 'condition' => [ 'divider' => 'yes', 'view!' => 'inline', ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'width: {{SIZE}}{{UNIT}}', ], ] ); $this->addControl( 'divider_height', [ 'label' => __('Height'), 'type' => ControlsManager::SLIDER, 'size_units' => ['%', 'px'], 'default' => [ 'unit' => '%', ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, ], '%' => [ 'min' => 1, 'max' => 100, ], ], 'condition' => [ 'divider' => 'yes', 'view' => 'inline', ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'height: {{SIZE}}{{UNIT}}', ], ] ); $this->addControl( 'divider_color', [ 'label' => __('Color'), 'type' => ControlsManager::COLOR, 'default' => '#ddd', 'scheme' => [ 'type' => SchemeColor::getType(), 'value' => SchemeColor::COLOR_3, ], 'condition' => [ 'divider' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'border-color: {{VALUE}}', ], ] ); $this->endControlsSection(); $this->startControlsSection( 'section_icon_style', [ 'label' => __('Icon'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'icon_color', [ 'label' => __('Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-icon i' => 'color: {{VALUE}};', '{{WRAPPER}} .elementor-icon-list-icon svg' => 'fill: {{VALUE}};', ], 'scheme' => [ 'type' => SchemeColor::getType(), 'value' => SchemeColor::COLOR_1, ], ] ); $this->addControl( 'icon_color_hover', [ 'label' => __('Hover'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-icon i' => 'color: {{VALUE}};', '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-icon svg' => 'fill: {{VALUE}};', ], ] ); $this->addResponsiveControl( 'icon_size', [ 'label' => __('Size'), 'type' => ControlsManager::SLIDER, 'default' => [ 'size' => 14, ], 'range' => [ 'px' => [ 'min' => 6, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-icon i' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .elementor-icon-list-icon svg' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->addResponsiveControl( 'icon_self_align', [ 'label' => __('Alignment'), 'type' => ControlsManager::CHOOSE, 'options' => [ 'left' => [ 'title' => __('Left'), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => __('Center'), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => __('Right'), 'icon' => 'eicon-h-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-icon' => 'text-align: {{VALUE}};', ], ] ); $this->endControlsSection(); $this->startControlsSection( 'section_text_style', [ 'label' => __('Text'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'text_color', [ 'label' => __('Text Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-text' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => SchemeColor::getType(), 'value' => SchemeColor::COLOR_2, ], ] ); $this->addControl( 'text_color_hover', [ 'label' => __('Hover'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'color: {{VALUE}};', ], ] ); $this->addControl( 'text_indent', [ 'label' => __('Text Indent'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'max' => 50, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-icon-list-text' => is_rtl() ? 'padding-right: {{SIZE}}{{UNIT}};' : 'padding-left: {{SIZE}}{{UNIT}};', ], ] ); $this->addGroupControl( GroupControlTypography::getType(), [ 'name' => 'icon_typography', 'selector' => '{{WRAPPER}} .elementor-icon-list-item', 'scheme' => SchemeTypography::TYPOGRAPHY_3, ] ); $this->addGroupControl( GroupControlTextShadow::getType(), [ 'name' => 'text_shadow', 'selector' => '{{WRAPPER}} .elementor-icon-list-item', ] ); $this->endControlsSection(); } /** * Render icon list widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 */ protected function render() { $settings = $this->getSettingsForDisplay(); $fallback_defaults = [ 'fa fa-check', 'fa fa-times', 'fa fa-dot-circle-o', ]; $this->addRenderAttribute('icon_list', 'class', 'elementor-icon-list-items'); $this->addRenderAttribute('list_item', 'class', 'elementor-icon-list-item'); if ('inline' === $settings['view']) { $this->addRenderAttribute('icon_list', 'class', 'elementor-inline-items'); $this->addRenderAttribute('list_item', 'class', 'elementor-inline-item'); } ?> <# var icon; view.addRenderAttribute( 'icon_list', 'class', 'elementor-icon-list-items' ); view.addRenderAttribute( 'list_item', 'class', 'elementor-icon-list-item' ); if ( 'inline' === settings.view ) { view.addRenderAttribute( 'icon_list', 'class', 'elementor-inline-items' ); view.addRenderAttribute( 'list_item', 'class', 'elementor-inline-item' ); } if ( settings.icon_list ) { #> <# } #>