feat(core): fd-truncate improvements

[shrvr]

Related Issue(s)

Closes #8239

Description

Created fd-truncate directive that allow developer to truncate element by character length and pixel length of the element.

Screenshots

1

Result

2

Result

[netlify[bot]]

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	57f49fe45f310512865c1075fe180797168ff4aa
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-ngx/deploys/62faa058b29a65000843cd5e
😎 Deploy Preview	https://deploy-preview-8289--fundamental-ngx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 57f49fe):

https://fundamental-ngx-gh--pr8289-fix-8239-fd-truncate-ue5sbqxv.web.app

_{(expires Thu, 18 Aug 2022 19:45:56 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[shrvr]

Related Issue(s)

closes #8292 closes #8239

Description

Changed existing fd-truncate to add truncation of an element by pixel width length.

<div fd-truncate [fdTruncateState]="true" [fdTruncateWidth]="200">

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[mikerodonnell89]

Good!

However we don't react to element's content change because we replaced that content with cut string at the beginning.

// user provided
<div fd-truncate fdTruncateChars="10">Some content...</div>

// then we cut the text and replaced nativeElement.textContent
<div fd-truncate fdTruncateChars="10">Some conte...</div>

// then user changed the text but we don't see it
<div fd-truncate fdTruncateChars="10">Short...</div>

So probably we have to change the textContent only if text provided via fdTruncateTargetText input property. Otherwise we should not change the content to don't lose the content provided by the user. What do you think?

After all looks like we could have two cases of directive usage

• fdTruncateTargetText + fdTruncateChars or fdtruncatewudth = alter the content.
• fdTruncateWidth = set styles, don't alter the content.

There is a caveat in the documentation about how the developer should not attempt to change the text if they are using fdTruncateChars. I am trying to think of a way to have the truncate directive watch for changes to the content of the curly brackets etc like so:

@Component({
    selector: 'fd-truncate-example',
    template: `
        <p fd-truncate [fdTruncateState]="true" [fdTruncateChars]="45">
            {{ changeMe }}
        </p>
        <button (click)="changeText()">This button should change the above text to "Hello World"</button>
    `
})
export class TruncateExampleComponent {
    changeMe = 'This text should be truncated to 45 characters as fdTruncateState is true';

    changeText(): void {
        this.changeMe === 'This text should be truncated to 45 characters as fdTruncateState is true'
            ? (this.changeMe = 'Hello World')
            : (this.changeMe = 'This text should be truncated to 45 characters as fdTruncateState is true');
    }
}

But we've already replaced the inner text so we can't use a MutationObserver to watch for changes. And the directive is unaware of the changeMe variable. If we need this changing functionality then perhaps fdTruncateChars would work better as a pipe. I'm starting to think in 99% of cases it will be best for application developers to perform truncation on their end without the need of a pipe or a directive provided by our library. They can also do the replacement text logic on their end

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[platon-rov]

There is a caveat in the documentation about how the developer should not attempt to change the text if they are using fdTruncateChars. I am trying to think of a way to have the truncate directive watch for changes to the content of the curly brackets etc like so:

@Component({
    selector: 'fd-truncate-example',
    template: `
        <p fd-truncate [fdTruncateState]="true" [fdTruncateChars]="45">
            {{ changeMe }}
        </p>
        <button (click)="changeText()">This button should change the above text to "Hello World"</button>
    `
})
export class TruncateExampleComponent {
    changeMe = 'This text should be truncated to 45 characters as fdTruncateState is true';

    changeText(): void {
        this.changeMe === 'This text should be truncated to 45 characters as fdTruncateState is true'
            ? (this.changeMe = 'Hello World')
            : (this.changeMe = 'This text should be truncated to 45 characters as fdTruncateState is true');
    }
}

But we've already replaced the inner text so we can't use a MutationObserver to watch for changes. And the directive is unaware of the changeMe variable. If we need this changing functionality then perhaps fdTruncateChars would work better as a pipe. I'm starting to think in 99% of cases it will be best for application developers to perform truncation on their end without the need of a pipe or a directive provided by our library. They can also do the replacement text logic on their end

Yea, agree on this one. It could be a pipe for truncating text that would be the best option. Or we can drop such functionality from our lib and as we haven't shown it anywhere it's not a breaking change.

Then applying style/class with style overflow: hidden with using directive also may be considered as overkill.

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[platon-rov]

@mikerodonnell89 are we going to remove the directive at all or to keep pipe for truncating text? or any other options.

cc @droshev

[mikerodonnell89]

@mikerodonnell89 are we going to remove the directive at all or to keep pipe for truncating text? or any other options.

cc @droshev

Yep, pipe for text and directive for px

[cla-assistant[bot]]

All committers have signed the CLA.

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[platon-rov]

is it ready for review? otherwise let's mark it as draft until it's ready.

[shrvr]

is it ready for review? otherwise let's mark it as draft until it's ready.

It's ready. Just need to fix the test fail.

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[github-actions[bot]]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days